feat(ui): stream network image and retry badge

apps/design_system_gallery/lib/app/gallery_app.directories.g.dart

@@ -28,6 +28,8 @@ import 'package:design_system_gallery/components/badge/stream_badge_notification
     as _design_system_gallery_components_badge_stream_badge_notification;
 import 'package:design_system_gallery/components/badge/stream_online_indicator.dart'
     as _design_system_gallery_components_badge_stream_online_indicator;
+import 'package:design_system_gallery/components/badge/stream_retry_badge.dart'
+    as _design_system_gallery_components_badge_stream_retry_badge;
 import 'package:design_system_gallery/components/buttons/button.dart'
     as _design_system_gallery_components_buttons_button;
 import 'package:design_system_gallery/components/buttons/stream_emoji_button.dart'
@@ -38,6 +40,8 @@ import 'package:design_system_gallery/components/common/stream_flex.dart'
     as _design_system_gallery_components_common_stream_flex;
 import 'package:design_system_gallery/components/common/stream_loading_spinner.dart'
     as _design_system_gallery_components_common_stream_loading_spinner;
+import 'package:design_system_gallery/components/common/stream_network_image.dart'
+    as _design_system_gallery_components_common_stream_network_image;
 import 'package:design_system_gallery/components/common/stream_progress_bar.dart'
     as _design_system_gallery_components_common_stream_progress_bar;
 import 'package:design_system_gallery/components/common/stream_skeleton_loading.dart'
@@ -365,6 +369,23 @@ final directories = <_widgetbook.WidgetbookNode>[
               ),
             ],
           ),
+          _widgetbook.WidgetbookComponent(
+            name: 'StreamRetryBadge',
+            useCases: [
+              _widgetbook.WidgetbookUseCase(
+                name: 'Playground',
+                builder:
+                    _design_system_gallery_components_badge_stream_retry_badge
+                        .buildStreamRetryBadgePlayground,
+              ),
+              _widgetbook.WidgetbookUseCase(
+                name: 'Showcase',
+                builder:
+                    _design_system_gallery_components_badge_stream_retry_badge
+                        .buildStreamRetryBadgeShowcase,
+              ),
+            ],
+          ),
         ],
       ),
       _widgetbook.WidgetbookFolder(
@@ -456,6 +477,23 @@ final directories = <_widgetbook.WidgetbookNode>[
               ),
             ],
           ),
+          _widgetbook.WidgetbookComponent(
+            name: 'StreamNetworkImage',
+            useCases: [
+              _widgetbook.WidgetbookUseCase(
+                name: 'Playground',
+                builder:
+                    _design_system_gallery_components_common_stream_network_image
+                        .buildStreamNetworkImagePlayground,
+              ),
+              _widgetbook.WidgetbookUseCase(
+                name: 'Showcase',
+                builder:
+                    _design_system_gallery_components_common_stream_network_image
+                        .buildStreamNetworkImageShowcase,
+              ),
+            ],
+          ),
           _widgetbook.WidgetbookComponent(
             name: 'StreamProgressBar',
             useCases: [

apps/design_system_gallery/lib/components/badge/stream_retry_badge.dart

@@ -0,0 +1,189 @@
+import 'package:flutter/material.dart';
+import 'package:stream_core_flutter/stream_core_flutter.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+@widgetbook.UseCase(
+  name: 'Playground',
+  type: StreamRetryBadge,
+  path: '[Components]/Badge',
+)
+Widget buildStreamRetryBadgePlayground(BuildContext context) {
+  final size = context.knobs.object.dropdown<StreamRetryBadgeSize>(
+    label: 'Size',
+    options: StreamRetryBadgeSize.values,
+    initialOption: StreamRetryBadgeSize.md,
+    labelBuilder: (option) => '${option.name.toUpperCase()} (${option.value.toInt()}px)',
+    description: 'The diameter of the badge.',
+  );
+
+  return Center(
+    child: StreamRetryBadge(size: size),
+  );
+}
+
+// =============================================================================
+// Showcase
+// =============================================================================
+
+@widgetbook.UseCase(
+  name: 'Showcase',
+  type: StreamRetryBadge,
+  path: '[Components]/Badge',
+)
+Widget buildStreamRetryBadgeShowcase(BuildContext context) {
+  final colorScheme = context.streamColorScheme;
+  final textTheme = context.streamTextTheme;
+  final spacing = context.streamSpacing;
+
+  return DefaultTextStyle(
+    style: textTheme.bodyDefault.copyWith(color: colorScheme.textPrimary),
+    child: SingleChildScrollView(
+      padding: EdgeInsets.all(spacing.lg),
+      child: const Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _SizeVariantsSection(),
+        ],
+      ),
+    ),
+  );
+}
+
+// =============================================================================
+// Size Variants Section
+// =============================================================================
+
+class _SizeVariantsSection extends StatelessWidget {
+  const _SizeVariantsSection();
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    final textTheme = context.streamTextTheme;
+    final boxShadow = context.streamBoxShadow;
+    final radius = context.streamRadius;
+    final spacing = context.streamSpacing;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const _SectionLabel(label: 'SIZE VARIANTS'),
+        SizedBox(height: spacing.md),
+        Container(
+          width: double.infinity,
+          clipBehavior: Clip.antiAlias,
+          padding: EdgeInsets.all(spacing.md),
+          decoration: BoxDecoration(
+            color: colorScheme.backgroundSurface,
+            borderRadius: BorderRadius.all(radius.lg),
+            boxShadow: boxShadow.elevation1,
+          ),
+          foregroundDecoration: BoxDecoration(
+            borderRadius: BorderRadius.all(radius.lg),
+            border: Border.all(color: colorScheme.borderSubtle),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Two sizes for different contexts',
+                style: textTheme.captionDefault.copyWith(
+                  color: colorScheme.textSecondary,
+                ),
+              ),
+              SizedBox(height: spacing.md),
+              Row(
+                children: [
+                  for (final (index, size) in StreamRetryBadgeSize.values.indexed) ...[
+                    _SizeDemo(size: size),
+                    if (index < StreamRetryBadgeSize.values.length - 1) SizedBox(width: spacing.xl),
+                  ],
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _SizeDemo extends StatelessWidget {
+  const _SizeDemo({required this.size});
+
+  final StreamRetryBadgeSize size;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    final textTheme = context.streamTextTheme;
+    final spacing = context.streamSpacing;
+
+    return Column(
+      children: [
+        SizedBox(
+          width: 48,
+          height: 48,
+          child: Center(
+            child: StreamRetryBadge(size: size),
+          ),
+        ),
+        SizedBox(height: spacing.sm),
+        Text(
+          size.name.toUpperCase(),
+          style: textTheme.metadataEmphasis.copyWith(
+            color: colorScheme.accentPrimary,
+            fontFamily: 'monospace',
+          ),
+        ),
+        Text(
+          '${size.value.toInt()}px',
+          style: textTheme.metadataDefault.copyWith(
+            color: colorScheme.textTertiary,
+            fontFamily: 'monospace',
+            fontSize: 10,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+// =============================================================================
+// Shared Widgets
+// =============================================================================
+
+class _SectionLabel extends StatelessWidget {
+  const _SectionLabel({required this.label});
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    final textTheme = context.streamTextTheme;
+    final radius = context.streamRadius;
+    final spacing = context.streamSpacing;
+
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: spacing.sm, vertical: spacing.xs),
+      decoration: BoxDecoration(
+        color: colorScheme.accentPrimary,
+        borderRadius: BorderRadius.all(radius.xs),
+      ),
+      child: Text(
+        label,
+        style: textTheme.metadataEmphasis.copyWith(
+          color: colorScheme.textOnAccent,
+          letterSpacing: 1,
+          fontSize: 9,
+        ),
+      ),
+    );
+  }
+}