packages/wyatt_bloc_layout/example/lib/components/custom_app_bar.g.dart

@@ -88,6 +88,7 @@ class $CustomAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
     Key? key,
   }) =>
       CustomAppBar(
+        key: key ?? _value.key,
         title: title ?? _value.title,
       );
 }

packages/wyatt_bloc_layout/example/lib/components/custom_bottom_bar.g.dart

@@ -24,7 +24,9 @@ class $CustomBottomBarCWProxyImpl
     int? currentIndex,
     Key? key,
   }) =>
-      CustomBottomBar();
+      CustomBottomBar(
+        key: key ?? _value.key,
+      );
 }
 
 mixin $CustomBottomBarCWMixin on Component {

packages/wyatt_bloc_layout/example/lib/components/custom_error_widget.dart

@@ -5,13 +5,12 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 part 'custom_error_widget.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomErrorWidget extends ErrorWidgetComponent
+class CustomErrorWidget extends ErrorComponent with $CustomErrorWidgetCWMixin {
-    with $CustomErrorWidgetCWMixin {
+  const CustomErrorWidget({super.key, super.details});
-  CustomErrorWidget({super.key, super.error});
 
   @override
   Widget build(BuildContext context) => ColoredBox(
         color: Colors.red,
-        child: Center(child: Text(error?.data ?? 'Error')),
+        child: Center(child: Text(details?.data ?? 'Error')),
       );
 }

packages/wyatt_bloc_layout/example/lib/components/custom_error_widget.g.dart

@@ -6,24 +6,36 @@ part of 'custom_error_widget.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomErrorWidgetCWProxyImpl implements $ErrorWidgetComponentCWProxy {
+class $CustomErrorWidgetCWProxyImpl implements $ErrorComponentCWProxy {
   const $CustomErrorWidgetCWProxyImpl(this._value);
   final CustomErrorWidget _value;
   @override
-  CustomErrorWidget error(TextWrapper? error) => this(error: error);
+  CustomErrorWidget colors(MultiColor? colors) => this(colors: colors);
+  @override
+  CustomErrorWidget message(TextWrapper? message) => this(message: message);
+  @override
+  CustomErrorWidget details(TextWrapper? details) => this(details: details);
+  @override
+  CustomErrorWidget themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
   @override
   CustomErrorWidget key(Key? key) => this(key: key);
   @override
   CustomErrorWidget call({
-    TextWrapper? error,
+    MultiColor? colors,
+    TextWrapper? message,
+    TextWrapper? details,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       CustomErrorWidget(
-        error: error ?? _value.error,
+        key: key ?? _value.key,
+        details: details ?? _value.details,
       );
 }
 
 mixin $CustomErrorWidgetCWMixin on Component {
-  $ErrorWidgetComponentCWProxy get copyWith =>
+  $ErrorComponentCWProxy get copyWith =>
       $CustomErrorWidgetCWProxyImpl(this as CustomErrorWidget);
 }

packages/wyatt_bloc_layout/example/lib/components/custom_loading_widget.dart

@@ -5,11 +5,14 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 part 'custom_loading_widget.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomLoadingWidget extends LoadingWidgetComponent
+class CustomLoadingWidget extends LoaderComponent
     with $CustomLoadingWidgetCWMixin {
-  CustomLoadingWidget({super.key, super.color});
+  const CustomLoadingWidget({super.key, super.colors});
 
   @override
-  Widget build(BuildContext context) =>
+  Widget build(BuildContext context) => Center(
-      Center(child: CircularProgressIndicator(color: color));
+        child: CircularProgressIndicator(
+          color: (colors?.isColor ?? false) ? colors!.color : Colors.blue,
+        ),
+      );
 }

packages/wyatt_bloc_layout/example/lib/components/custom_loading_widget.g.dart

@@ -6,25 +6,42 @@ part of 'custom_loading_widget.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomLoadingWidgetCWProxyImpl
+class $CustomLoadingWidgetCWProxyImpl implements $LoaderComponentCWProxy {
-    implements $LoadingWidgetComponentCWProxy {
   const $CustomLoadingWidgetCWProxyImpl(this._value);
   final CustomLoadingWidget _value;
   @override
-  CustomLoadingWidget color(Color? color) => this(color: color);
+  CustomLoadingWidget colors(MultiColor? colors) => this(colors: colors);
+  @override
+  CustomLoadingWidget radius(double? radius) => this(radius: radius);
+  @override
+  CustomLoadingWidget stroke(double? stroke) => this(stroke: stroke);
+  @override
+  CustomLoadingWidget duration(Duration? duration) => this(duration: duration);
+  @override
+  CustomLoadingWidget flip(bool? flip) => this(flip: flip);
+  @override
+  CustomLoadingWidget themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
   @override
   CustomLoadingWidget key(Key? key) => this(key: key);
   @override
   CustomLoadingWidget call({
-    Color? color,
+    MultiColor? colors,
+    double? radius,
+    double? stroke,
+    Duration? duration,
+    bool? flip,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       CustomLoadingWidget(
-        color: color ?? _value.color,
+        key: key ?? _value.key,
+        colors: colors ?? _value.colors,
       );
 }
 
 mixin $CustomLoadingWidgetCWMixin on Component {
-  $LoadingWidgetComponentCWProxy get copyWith =>
+  $LoaderComponentCWProxy get copyWith =>
       $CustomLoadingWidgetCWProxyImpl(this as CustomLoadingWidget);
 }

packages/wyatt_bloc_layout/example/lib/components/theme_components.dart

@@ -4,11 +4,11 @@ import 'package:bloc_layout_example/components/custom_error_widget.dart';
 import 'package:bloc_layout_example/components/custom_loading_widget.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
-class AppThemeComponent {
+abstract class AppThemeComponent {
-  static ComponentThemeData get components => ComponentThemeData.raw(
+  static const ComponentThemeData components = ComponentThemeData.raw(
-        appBar: const CustomAppBar(),
+    topAppBar: CustomAppBar(),
-        bottomNavigationBar: const CustomBottomBar(),
+    bottomNavigationBar: CustomBottomBar(),
-        loadingWidget: CustomLoadingWidget(),
+    loader: CustomLoadingWidget(),
-        errorWidget: CustomErrorWidget(),
+    error: CustomErrorWidget(),
-      );
+  );
 }

packages/wyatt_bloc_layout/example/lib/main.dart

@@ -32,7 +32,7 @@ class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) => ComponentTheme(
-        componentThemeWidget: AppThemeComponent.components,
+        data: AppThemeComponent.components,
         child: MaterialApp(
           title: 'Bloc Layout Example',
           theme: ThemeData(
@@ -122,7 +122,7 @@ class ExampleFrameLayoutCrudConsumer
   ExampleFrameLayoutCrudConsumer({super.key})
       : super(
           customAppBar: (bar) => bar?.copyWith.title(
-            'Example Title'.wrap(),
+            const TextWrapper('Example Title'),
           ),
         );
 
@@ -139,7 +139,7 @@ class ExampleFrameLayoutCrudListConsumer
   ExampleFrameLayoutCrudListConsumer({super.key})
       : super(
           customAppBar: (bar) => bar?.copyWith.title(
-            'Example Title'.wrap(),
+            const TextWrapper('Example Title'),
           ),
         );
 

packages/wyatt_bloc_layout/lib/src/core/crud_cubit_consumer_screen_mixin.dart

@@ -23,11 +23,12 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 mixin CrudMixin<Cubit extends bloc_base.Cubit<dynamic>,
     SuccessState extends CrudSuccess> {
   Widget errorBuilder(BuildContext context, CrudError state) =>
-      context.components.errorWidget?.copyWith(error: state.message.wrap()) ??
+      context.components.errorComponent.call(
-      const SizedBox.shrink();
+        message: (state.message != null) ? TextWrapper(state.message!) : null,
+      );
 
   Widget loadingBuilder(BuildContext context, CrudLoading state) =>
-      context.components.loadingWidget ?? const SizedBox.shrink();
+      context.components.loader ?? const SizedBox.shrink();
 
   Widget initialBuilder(BuildContext context, CrudInitial state) =>
       const SizedBox.shrink();

packages/wyatt_ui_layout/example/lib/core/app_theme_component.dart

@@ -7,7 +7,7 @@ import 'package:wyatt_ui_layout_example/pages/bottom_navigation_bar_layout_page_
 
 class AppThemeComponent {
   static ComponentThemeData get components => ComponentThemeData.raw(
-        appBar: const CustomAppBar(),
+        topAppBar: const CustomAppBar(),
         bottomNavigationBar: CustomBottomNavigationBar(
           onTap: (context, index) {
             switch (index) {

packages/wyatt_ui_layout/example/lib/main.dart

@@ -29,7 +29,7 @@ class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) => ComponentTheme(
-        componentThemeWidget: AppThemeComponent.components,
+        data: AppThemeComponent.components,
         child: MaterialApp(
           title: 'Wyatt Ui Layout Example',
           theme: ThemeData(

packages/wyatt_ui_layout/example/lib/pages/app_bar_layout_page.dart

@@ -7,7 +7,8 @@ class AppBarLayoutPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => TopAppBarLayout(
-        custom: (p0) => p0?.copyWith.title('New Title'.wrap()),
+        custom: (topBar) =>
+            topBar?.copyWith.title(const TextWrapper('New Title')),
         body: const Center(
           child: Text(
             'Body',

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/frame_layout.dart

@@ -52,12 +52,12 @@ class FrameLayout extends StructuralLayout {
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: (customAppBar?.call(context.components.appBar) != null ||
+        appBar: (customAppBar?.call(context.components.topAppBar) != null ||
-                context.components.appBar != null)
+                context.components.topAppBar != null)
             ? PreferredSize(
                 preferredSize: Size.fromHeight(height),
-                child: customAppBar?.call(context.components.appBar) ??
+                child: customAppBar?.call(context.components.topAppBar) ??
-                    context.components.appBar!,
+                    context.components.topAppBar!,
               )
             : null,
         body: body,

packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/top_app_bar_layout.dart

@@ -82,7 +82,8 @@ class TopAppBarLayout extends TopBarLayout<TopAppBarComponent> {
   });
 
   @override
-  TopAppBarComponent? child(BuildContext context) => context.components.appBar;
+  TopAppBarComponent? child(BuildContext context) =>
+      context.components.topAppBar;
 }
 
 /// A concrete implementation of [TopBarLayout] for a navigation bar.
@@ -102,5 +103,5 @@ class TopNavigationBarLayout extends TopBarLayout<TopNavigationBarComponent> {
 
   @override
   TopNavigationBarComponent? child(BuildContext context) =>
-      context.components.topNavigationBarComponent;
+      context.components.topNavigationBar;
 }