new scaffold and add toast_card

Signed-off-by: Peter Siegmund <developer@mars3142.org>

packages/toaster_ui/lib/src/theme/app_theme.dart

@@ -19,11 +19,40 @@ class AppTheme {
     );
 
     return ThemeData(
-      colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFA78BFA)).copyWith(
-        primary: const Color(0xFFA78BFA),
-        secondary: const Color(0xFF71717A),
-        tertiary: const Color(0xFF34D399),
+      colorScheme: const ColorScheme(
         brightness: Brightness.dark,
+        primary: Color(0xFFA78BFA),
+        onPrimary: Color(0xFF0A0012),
+        primaryContainer: Color(0xFF7C3AED),
+        onPrimaryContainer: Color(0xFFEDE9FE),
+        secondary: Color(0xFF71717A),
+        onSecondary: Color(0xFF09090B),
+        secondaryContainer: Color(0xFF27272A),
+        onSecondaryContainer: Color(0xFFA1A1AA),
+        tertiary: Color(0xFF34D399),
+        onTertiary: Color(0xFF001A12),
+        tertiaryContainer: Color(0xFF065F46),
+        onTertiaryContainer: Color(0xFFBBF7D0),
+        error: Color(0xFFEF4444),
+        onError: Color(0xFF1A0000),
+        errorContainer: Color(0xFF3B1111),
+        onErrorContainer: Color(0xFFFCA5A5),
+        surface: Color(0xFF0C0C0F),
+        onSurface: Color(0xFFFAFAFA),
+        onSurfaceVariant: Color(0xFFA1A1AA),
+        outline: Color(0xFF52525B),
+        outlineVariant: Color(0xFF27272A),
+        inverseSurface: Color(0xFFFAFAFA),
+        onInverseSurface: Color(0xFF09090B),
+        inversePrimary: Color(0xFF5B21B6),
+        surfaceTint: Color(0xFFA78BFA),
+        surfaceDim: Color(0xFF0C0C0F),
+        surfaceBright: Color(0xFF18181B),
+        surfaceContainerLowest: Color(0xFF09090B),
+        surfaceContainerLow: Color(0xFF0F0F12),
+        surfaceContainer: Color(0xFF121215),
+        surfaceContainerHigh: Color(0xFF18181B),
+        surfaceContainerHighest: Color(0xFF1E1E22),
       ),
       extensions: const [appColors, AppSpacing()],
     );

packages/toaster_ui/lib/src/widgets/toast_card.dart

@@ -0,0 +1,248 @@
+import 'package:toaster_ui/toaster_ui.dart';
+
+/// {@template toast_card}
+/// A card displaying a toast notification with icon, title, timestamp,
+/// string content, metadata tags, and an optional delete action.
+/// {@endtemplate}
+class ToastCard extends StatefulWidget {
+  /// {@macro toast_card}
+  const ToastCard({
+    required this.icon,
+    required this.title,
+    required this.timestamp,
+    required this.content,
+    required this.tags,
+    super.key,
+    this.onDelete,
+  });
+
+  /// The icon displayed in the leading section.
+  final IconData icon;
+
+  /// The title text shown next to the icon.
+  final String title;
+
+  /// The timestamp shown below the title.
+  final String timestamp;
+
+  /// The string content displayed in the monospace content box.
+  final String content;
+
+  /// Metadata tags shown below the content box.
+  final List<String> tags;
+
+  /// Called when the delete button is tapped.
+  final VoidCallback? onDelete;
+
+  @override
+  State<ToastCard> createState() => _ToastCardState();
+}
+
+class _ToastCardState extends State<ToastCard> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hovered = true),
+      onExit: (_) => setState(() => _hovered = false),
+      child: Container(
+        padding: EdgeInsets.all(spacing.md),
+        decoration: BoxDecoration(
+          color: cs.surfaceContainer,
+          border: Border.all(color: cs.outlineVariant),
+          borderRadius: BorderRadius.circular(spacing.xs),
+        ),
+        child: Column(
+          spacing: spacing.xs,
+          children: [
+            Row(
+              children: [
+                _IconSection(
+                  icon: widget.icon,
+                  title: widget.title,
+                  timestamp: widget.timestamp,
+                ),
+                const Spacer(),
+                AnimatedOpacity(
+                  opacity: _hovered ? 1.0 : 0.0,
+                  duration: const Duration(milliseconds: 150),
+                  child: _DeleteButton(onDelete: widget.onDelete),
+                ),
+              ],
+            ),
+            _ContentSection(
+              content: widget.content,
+              tags: widget.tags,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _IconSection extends StatelessWidget {
+  const _IconSection({
+    required this.icon,
+    required this.title,
+    required this.timestamp,
+  });
+
+  final IconData icon;
+  final String title;
+  final String timestamp;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: 40,
+          height: 40,
+          decoration: BoxDecoration(
+            color: cs.surfaceDim,
+            border: Border.all(color: cs.outlineVariant),
+            borderRadius: BorderRadius.circular(spacing.xs),
+          ),
+          alignment: Alignment.center,
+          child: Icon(icon, color: cs.primary, size: 20),
+        ),
+        SizedBox(width: spacing.sm),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              title,
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 14,
+                color: cs.onSurface,
+              ),
+            ),
+            Text(
+              timestamp,
+              style: TextStyle(
+                fontSize: 12,
+                color: cs.onSurfaceVariant,
+                fontFamily: 'monospace',
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class _ContentSection extends StatelessWidget {
+  const _ContentSection({required this.content, required this.tags});
+
+  final String content;
+  final List<String> tags;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: double.infinity,
+          padding: EdgeInsets.all(spacing.sm),
+          decoration: BoxDecoration(
+            color: cs.surfaceContainerLowest,
+            border: Border.all(color: cs.outlineVariant),
+            borderRadius: BorderRadius.circular(4),
+          ),
+          child: Text(
+            '"$content"',
+            style: TextStyle(
+              fontFamily: 'monospace',
+              fontSize: 14,
+              color: cs.tertiary,
+            ),
+          ),
+        ),
+        SizedBox(height: spacing.xs),
+        Wrap(
+          spacing: spacing.xs,
+          children: tags
+              .map(
+                (tag) => Container(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: spacing.xs,
+                    vertical: 2,
+                  ),
+                  decoration: BoxDecoration(
+                    color: cs.surface,
+                    border: Border.all(color: cs.outlineVariant),
+                    borderRadius: BorderRadius.circular(4),
+                  ),
+                  child: Text(
+                    tag,
+                    style: TextStyle(
+                      fontSize: 12,
+                      color: cs.onSurfaceVariant,
+                    ),
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      ],
+    );
+  }
+}
+
+class _DeleteButton extends StatefulWidget {
+  const _DeleteButton({this.onDelete});
+
+  final VoidCallback? onDelete;
+
+  @override
+  State<_DeleteButton> createState() => _DeleteButtonState();
+}
+
+class _DeleteButtonState extends State<_DeleteButton> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hovered = true),
+      onExit: (_) => setState(() => _hovered = false),
+      child: GestureDetector(
+        onTap: widget.onDelete,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            color: _hovered
+                ? cs.errorContainer.withValues(alpha: 0.2)
+                : Colors.transparent,
+            borderRadius: BorderRadius.circular(6),
+          ),
+          child: Icon(
+            Icons.delete_outline,
+            size: 20,
+            color: _hovered ? cs.error : cs.onSurfaceVariant,
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/toaster_ui/lib/toaster_ui.dart

@@ -8,3 +8,4 @@ export 'src/theme/app_colors.dart';
 export 'src/theme/app_spacing.dart';
 export 'src/theme/app_theme.dart';
 export 'src/widgets/app_button.dart';
+export 'src/widgets/toast_card.dart';