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

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

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

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

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

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

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

@@ -6,42 +6,25 @@ part of 'custom_loading_widget.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomLoadingWidgetCWProxyImpl implements $LoaderComponentCWProxy {
+class $CustomLoadingWidgetCWProxyImpl
+    implements $LoadingWidgetComponentCWProxy {
   const $CustomLoadingWidgetCWProxyImpl(this._value);
   final CustomLoadingWidget _value;
   @override
-  CustomLoadingWidget colors(MultiColor? colors) => this(colors: colors);
+  CustomLoadingWidget color(Color? color) => this(color: color);
-  @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({
-    MultiColor? colors,
+    Color? color,
-    double? radius,
-    double? stroke,
-    Duration? duration,
-    bool? flip,
-    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       CustomLoadingWidget(
-        key: key ?? _value.key,
+        color: color ?? _value.color,
-        colors: colors ?? _value.colors,
       );
 }
 
 mixin $CustomLoadingWidgetCWMixin on Component {
-  $LoaderComponentCWProxy get copyWith =>
+  $LoadingWidgetComponentCWProxy 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';
 
-abstract class AppThemeComponent {
+class AppThemeComponent {
-  static const ComponentThemeData components = ComponentThemeData.raw(
+  static ComponentThemeData get components => ComponentThemeData.raw(
-    topAppBar: CustomAppBar(),
+        appBar: const CustomAppBar(),
-    bottomNavigationBar: CustomBottomBar(),
+        bottomNavigationBar: const CustomBottomBar(),
-    loader: CustomLoadingWidget(),
+        loadingWidget: CustomLoadingWidget(),
-    error: CustomErrorWidget(),
+        errorWidget: 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(
-        data: AppThemeComponent.components,
+        componentThemeWidget: 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(
-            const TextWrapper('Example Title'),
+            'Example Title'.wrap(),
           ),
         );
 
@@ -139,7 +139,7 @@ class ExampleFrameLayoutCrudListConsumer
   ExampleFrameLayoutCrudListConsumer({super.key})
       : super(
           customAppBar: (bar) => bar?.copyWith.title(
-            const TextWrapper('Example Title'),
+            'Example Title'.wrap(),
           ),
         );
 

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

@@ -23,12 +23,11 @@ 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.errorComponent.call(
+      context.components.errorWidget?.copyWith(error: state.message.wrap()) ??
-        message: (state.message != null) ? TextWrapper(state.message!) : null,
+      const SizedBox.shrink();
-      );
 
   Widget loadingBuilder(BuildContext context, CrudLoading state) =>
-      context.components.loader ?? const SizedBox.shrink();
+      context.components.loadingWidget ?? const SizedBox.shrink();
 
   Widget initialBuilder(BuildContext context, CrudInitial state) =>
       const SizedBox.shrink();

packages/wyatt_ui_components/lib/src/core/utils/text_wrapper.dart

@@ -123,5 +123,9 @@ class TextWrapper {
   final Color? selectionColor;
 
   @override
-  String toString() => data;
+  String toString() => 'TextWrapper(data: $data, style: $style, '
+      'gradientColors: $gradientColors, textAlign: $textAlign, '
+      'textDirection: $textDirection, softWrap: $softWrap, '
+      'overflow: $overflow, maxLines: $maxLines, '
+      'selectionColor: $selectionColor)';
 }

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(
-        topAppBar: const CustomAppBar(),
+        appBar: 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(
-        data: AppThemeComponent.components,
+        componentThemeWidget: AppThemeComponent.components,
         child: MaterialApp(
           title: 'Wyatt Ui Layout Example',
           theme: ThemeData(

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

@@ -7,8 +7,7 @@ class AppBarLayoutPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => TopAppBarLayout(
-        custom: (topBar) =>
+        custom: (p0) => p0?.copyWith.title('New Title'.wrap()),
-            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.topAppBar) != null ||
+        appBar: (customAppBar?.call(context.components.appBar) != null ||
-                context.components.topAppBar != null)
+                context.components.appBar != null)
             ? PreferredSize(
                 preferredSize: Size.fromHeight(height),
-                child: customAppBar?.call(context.components.topAppBar) ??
+                child: customAppBar?.call(context.components.appBar) ??
-                    context.components.topAppBar!,
+                    context.components.appBar!,
               )
             : null,
         body: body,

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

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