feat: handle prereleases in publish workflows

.github/workflows/cli.yml

@@ -49,7 +49,9 @@ jobs:
 
       - name: Publish
         if: ${{ github.event_name == 'release' }}
-        run: mise run ci-publish
+        env:
+          NPM_TAG: ${{ github.event.release.prerelease && 'rc' || 'latest' }}
+        run: mise run ci-publish -- --tag "$NPM_TAG"
 
   docker:
     name: Docker
@@ -102,7 +104,7 @@ jobs:
             name=ghcr.io/${{ github.repository_owner }}/immich-cli
           tags: |
             type=raw,value=${{ steps.package-version.outputs.version }},enable=${{ github.event_name == 'release' }}
-            type=raw,value=latest,enable=${{ github.event_name == 'release' }}
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && !github.event.release.prerelease }}
 
       - name: Build and push image
         uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0

.github/workflows/docker.yml

@@ -147,7 +147,7 @@ jobs:
       platforms: ${{ matrix.platforms }}
       runner-mapping: ${{ matrix.runner-mapping }}
       suffixes: ${{ matrix.suffixes }}
-      dockerhub-push: ${{ github.event_name == 'release' }}
+      dockerhub-push: ${{ github.event_name == 'release' && !github.event.release.prerelease }}
       build-args: |
         DEVICE=${{ matrix.device }}
 
@@ -167,7 +167,7 @@ jobs:
       image: immich-server
       context: .
       dockerfile: server/Dockerfile
-      dockerhub-push: ${{ github.event_name == 'release' }}
+      dockerhub-push: ${{ github.event_name == 'release' && !github.event.release.prerelease }}
       build-args: |
         DEVICE=cpu
 

.github/workflows/docs-deploy.yml

@@ -98,9 +98,16 @@ jobs:
                 shouldDeploy: true
               };
             } else if (eventType == "release") {
+              const tag = context.payload.workflow_run.head_branch;
+              const { data: release } = await github.rest.repos.getReleaseByTag({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                tag,
+              });
               parameters = {
                 event: "release",
-                name: context.payload.workflow_run.head_branch,
+                name: tag,
+                prerelease: release.prerelease,
                 shouldDeploy: !isFork
               };
             }
@@ -146,6 +153,7 @@ jobs:
             const parameters = JSON.parse(process.env.PARAM_JSON);
             core.setOutput("event", parameters.event);
             core.setOutput("name", parameters.name);
+            core.setOutput("prerelease", parameters.prerelease);
             core.setOutput("shouldDeploy", parameters.shouldDeploy);
 
       - name: Download artifact
@@ -203,7 +211,7 @@ jobs:
         run: mise run //docs:deploy
 
       - name: Deploy Docs Release Domain
-        if: ${{ steps.parameters.outputs.event == 'release' }}
+        if: ${{ steps.parameters.outputs.event == 'release' && steps.parameters.outputs.prerelease != 'true' }}
         env:
           TF_VAR_prefix_name: ${{ steps.parameters.outputs.name}}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/sdk.yml

@@ -39,4 +39,6 @@ jobs:
         run: pnpm --filter @immich/sdk build
 
       - name: Publish
-        run: pnpm --filter @immich/sdk publish --provenance --no-git-checks
+        env:
+          NPM_TAG: ${{ github.event.release.prerelease && 'rc' || 'latest' }}
+        run: pnpm --filter @immich/sdk publish --provenance --no-git-checks --tag "$NPM_TAG"

.github/workflows/static_analysis.yml

@@ -72,6 +72,10 @@ jobs:
         run: flutter pub get
         working-directory: ./mobile/packages/ui
 
+      - name: Install dependencies for UI Showcase
+        run: flutter pub get
+        working-directory: ./mobile/packages/ui/showcase
+
       - name: Generate translation files
         run: mise //mobile:codegen:translation
 

docs/docs/developer/setup.md

@@ -109,24 +109,6 @@ mise //mobile:translation
 
 The mobile app asks you what backend to connect to. You can utilize the demo backend (https://demo.immich.app/) if you don't need to change server code or upload photos. Alternatively, you can run the server yourself per the instructions above.
 
-#### UI components and widget previews
-
-Shared design-system widgets (buttons, inputs, forms) live in the
-[`immich_ui` package](https://github.com/immich-app/immich/tree/main/mobile/packages/ui/)
-under `mobile/packages/ui/`. Components are defined in `lib/src/components/`
-and have matching previews in `lib/src/previews/`.
-
-To inspect a component in isolation with a light/dark toggle and hot reload,
-launch [Flutter's Widget Previewer](https://docs.flutter.dev/tools/widget-previewer):
-
-```bash
-cd mobile/packages/ui
-flutter widget-preview start
-```
-
-In VS Code or Android Studio with the Flutter plugin, the previewer
-auto-starts when you open the **Flutter Widget Preview** tab in the sidebar.
-
 ## IDE setup
 
 ### Lint / format extensions

mobile/openapi/lib/model/workflow_trigger.dart

@@ -24,13 +24,11 @@ class WorkflowTrigger {
   String toJson() => value;
 
   static const assetCreate = WorkflowTrigger._(r'AssetCreate');
-  static const assetMetadataExtraction = WorkflowTrigger._(r'AssetMetadataExtraction');
   static const personRecognized = WorkflowTrigger._(r'PersonRecognized');
 
   /// List of all possible values in this [enum][WorkflowTrigger].
   static const values = <WorkflowTrigger>[
     assetCreate,
-    assetMetadataExtraction,
     personRecognized,
   ];
 
@@ -71,7 +69,6 @@ class WorkflowTriggerTypeTransformer {
     if (data != null) {
       switch (data) {
         case r'AssetCreate': return WorkflowTrigger.assetCreate;
-        case r'AssetMetadataExtraction': return WorkflowTrigger.assetMetadataExtraction;
         case r'PersonRecognized': return WorkflowTrigger.personRecognized;
         default:
           if (!allowNull) {

mobile/packages/ui/lib/src/previews.dart

@@ -1,60 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/widget_previews.dart';
-import 'package:immich_ui/src/theme.dart';
-
-const ColorScheme _lightColorScheme = ColorScheme.light(
-  primary: Color(0xFF4250AF),
-  onPrimary: Colors.white,
-  primaryContainer: Color(0xFFD4D6F0),
-  onPrimaryContainer: Color(0xFF181E44),
-  secondary: Color(0xFF737373),
-  onSecondary: Colors.white,
-  error: Color(0xFFE53E3E),
-  onError: Colors.white,
-  surface: Color(0xFFFAFAFA),
-  onSurface: Color(0xFF1A1C1E),
-  surfaceContainerHighest: Color(0xFFE3E4E8),
-  outline: Color(0xFFD1D3D9),
-  outlineVariant: Color(0xFFD4D4D4),
-);
-
-const ColorScheme _darkColorScheme = ColorScheme.dark(
-  primary: Color(0xFFACCBFA),
-  onPrimary: Color(0xFF0F1433),
-  primaryContainer: Color(0xFF616D94),
-  onPrimaryContainer: Color(0xFFD4D6F0),
-  secondary: Color(0xFFC4C6D0),
-  onSecondary: Color(0xFF2E3042),
-  error: Color(0xFFE88080),
-  onError: Color(0xFF0F1433),
-  surface: Color(0xFF0A0A0A),
-  onSurface: Color(0xFFE3E3E6),
-  surfaceContainerHighest: Color(0xFF262626),
-  outline: Color(0xFF8E9099),
-  outlineVariant: Color(0xFF43464F),
-);
-
-PreviewThemeData immichPreviewTheme() => PreviewThemeData(
-      materialLight: ThemeData(colorScheme: _lightColorScheme, useMaterial3: true),
-      materialDark: ThemeData(colorScheme: _darkColorScheme, useMaterial3: true),
-    );
-
-Widget immichPreviewWrapper(Widget child) {
-  return Builder(
-    builder: (context) => ImmichThemeProvider(
-      colorScheme: Theme.of(context).colorScheme,
-      child: Scaffold(
-        backgroundColor: Theme.of(context).colorScheme.surface,
-        body: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Align(alignment: Alignment.topLeft, child: child),
-        ),
-      ),
-    ),
-  );
-}
-
-final class ImmichPreview extends Preview {
-  const ImmichPreview({super.name, super.group, super.size, super.textScaleFactor})
-      : super(theme: immichPreviewTheme, wrapper: immichPreviewWrapper);
-}

mobile/packages/ui/lib/src/previews/close_button.dart

@@ -1,26 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/close_button.dart';
-import 'package:immich_ui/src/previews.dart';
-import 'package:immich_ui/src/types.dart';
-
-void _previewNoop() {}
-
-@ImmichPreview(group: 'CloseButton', name: 'Variants')
-Widget previewCloseButtonVariants() => const Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: [
-        ImmichCloseButton(onPressed: _previewNoop),
-        ImmichCloseButton(onPressed: _previewNoop, variant: ImmichVariant.filled),
-      ],
-    );
-
-@ImmichPreview(group: 'CloseButton', name: 'Colors')
-Widget previewCloseButtonColors() => const Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: [
-        ImmichCloseButton(onPressed: _previewNoop),
-        ImmichCloseButton(onPressed: _previewNoop, color: ImmichColor.secondary),
-      ],
-    );

mobile/packages/ui/lib/src/previews/form.dart

@@ -1,72 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/form.dart';
-import 'package:immich_ui/src/components/password_input.dart';
-import 'package:immich_ui/src/components/text_input.dart';
-import 'package:immich_ui/src/constants.dart';
-import 'package:immich_ui/src/previews.dart';
-
-@ImmichPreview(group: 'Form', name: 'Login Form')
-Widget previewFormLogin() => const _PreviewLoginForm();
-
-class _PreviewLoginForm extends StatefulWidget {
-  const _PreviewLoginForm();
-
-  @override
-  State<_PreviewLoginForm> createState() => _PreviewLoginFormState();
-}
-
-class _PreviewLoginFormState extends State<_PreviewLoginForm> {
-  final _emailController = TextEditingController();
-  final _passwordController = TextEditingController();
-  String _result = '';
-
-  @override
-  void dispose() {
-    _emailController.dispose();
-    _passwordController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        ImmichForm(
-          submitText: 'Login',
-          submitIcon: Icons.login,
-          onSubmit: () async {
-            await Future<void>.delayed(const Duration(seconds: 1));
-            if (!mounted) {
-              return;
-            }
-            setState(() {
-              _result = 'Form submitted!';
-            });
-          },
-          builder: (context, form) => Column(
-            spacing: ImmichSpacing.sm,
-            children: [
-              ImmichTextInput(
-                label: 'Email',
-                controller: _emailController,
-                keyboardType: TextInputType.emailAddress,
-                validator: (value) => value?.isEmpty ?? true ? 'Required' : null,
-              ),
-              ImmichPasswordInput(
-                label: 'Password',
-                controller: _passwordController,
-                validator: (value) => value?.isEmpty ?? true ? 'Required' : null,
-                onSubmit: (_) => form.submit(),
-              ),
-            ],
-          ),
-        ),
-        if (_result.isNotEmpty) ...[
-          const SizedBox(height: 16),
-          Text(_result, style: const TextStyle(color: Colors.green)),
-        ],
-      ],
-    );
-  }
-}

mobile/packages/ui/lib/src/previews/formatted_text.dart

@@ -1,50 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/formatted_text.dart';
-import 'package:immich_ui/src/previews.dart';
-
-@ImmichPreview(group: 'FormattedText', name: 'Bold')
-Widget previewFormattedTextBold() => const ImmichFormattedText('This is <b>bold text</b>.');
-
-@ImmichPreview(group: 'FormattedText', name: 'Links')
-Widget previewFormattedTextLinks() => const _PreviewFormattedTextLinks();
-
-@ImmichPreview(group: 'FormattedText', name: 'Mixed Content')
-Widget previewFormattedTextMixed() => const _PreviewFormattedTextMixed();
-
-class _PreviewFormattedTextLinks extends StatelessWidget {
-  const _PreviewFormattedTextLinks();
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichFormattedText(
-      'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
-      spanBuilder: (tag) => FormattedSpan(
-        onTap: switch (tag) {
-          'docs-link' =>
-            () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Docs link clicked!'))),
-          'github-link' =>
-            () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('GitHub link clicked!'))),
-          _ => null,
-        },
-      ),
-    );
-  }
-}
-
-class _PreviewFormattedTextMixed extends StatelessWidget {
-  const _PreviewFormattedTextMixed();
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichFormattedText(
-      'You can use <b>bold text</b> and <link>links</link> together.',
-      spanBuilder: (tag) => switch (tag) {
-        'b' => const FormattedSpan(style: TextStyle(fontWeight: FontWeight.bold)),
-        _ => FormattedSpan(
-            onTap: () =>
-                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Link clicked!'))),
-          ),
-      },
-    );
-  }
-}

mobile/packages/ui/lib/src/previews/icon_button.dart

@@ -1,41 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/icon_button.dart';
-import 'package:immich_ui/src/previews.dart';
-import 'package:immich_ui/src/types.dart';
-
-void _previewNoop() {}
-
-@ImmichPreview(group: 'IconButton', name: 'Variants')
-Widget previewIconButtonVariants() => const Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: [
-        ImmichIconButton(icon: Icons.add, onPressed: _previewNoop),
-        ImmichIconButton(icon: Icons.edit, onPressed: _previewNoop, variant: ImmichVariant.ghost),
-      ],
-    );
-
-@ImmichPreview(group: 'IconButton', name: 'Colors')
-Widget previewIconButtonColors() => const Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: [
-        ImmichIconButton(icon: Icons.favorite, onPressed: _previewNoop),
-        ImmichIconButton(icon: Icons.delete, onPressed: _previewNoop, color: ImmichColor.secondary),
-      ],
-    );
-
-@ImmichPreview(group: 'IconButton', name: 'Disabled')
-Widget previewIconButtonDisabled() => const Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: [
-        ImmichIconButton(icon: Icons.settings, onPressed: _previewNoop, disabled: true),
-        ImmichIconButton(
-          icon: Icons.settings,
-          onPressed: _previewNoop,
-          disabled: true,
-          variant: ImmichVariant.ghost,
-        ),
-      ],
-    );

mobile/packages/ui/lib/src/previews/password_input.dart

@@ -1,18 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/password_input.dart';
-import 'package:immich_ui/src/previews.dart';
-
-@ImmichPreview(group: 'PasswordInput', name: 'With Validator')
-Widget previewPasswordInput() => ImmichPasswordInput(
-      label: 'Password',
-      hintText: 'Enter your password',
-      validator: (value) {
-        if (value == null || value.isEmpty) {
-          return 'Password is required';
-        }
-        if (value.length < 8) {
-          return 'Password must be at least 8 characters';
-        }
-        return null;
-      },
-    );

mobile/packages/ui/lib/src/previews/text_button.dart

@@ -1,88 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/text_button.dart';
-import 'package:immich_ui/src/previews.dart';
-import 'package:immich_ui/src/types.dart';
-
-void _previewNoop() {}
-
-@ImmichPreview(group: 'TextButton', name: 'Variants')
-Widget previewTextButtonVariants() => const Wrap(
-  spacing: 12,
-  runSpacing: 12,
-  children: [
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'Filled', expanded: false),
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'Ghost', variant: ImmichVariant.ghost, expanded: false),
-  ],
-);
-
-@ImmichPreview(group: 'TextButton', name: 'Colors')
-Widget previewTextButtonColors() => const Wrap(
-  spacing: 12,
-  runSpacing: 12,
-  children: [
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'Primary', expanded: false),
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'Secondary', color: ImmichColor.secondary, expanded: false),
-  ],
-);
-
-@ImmichPreview(group: 'TextButton', name: 'With Icons')
-Widget previewTextButtonWithIcons() => const Wrap(
-  spacing: 12,
-  runSpacing: 12,
-  children: [
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'With Icon', icon: Icons.add, expanded: false),
-    ImmichTextButton(
-      onPressed: _previewNoop,
-      labelText: 'Download',
-      icon: Icons.download,
-      variant: ImmichVariant.ghost,
-      expanded: false,
-    ),
-  ],
-);
-
-@ImmichPreview(group: 'TextButton', name: 'Loading')
-Widget previewTextButtonLoading() => const _PreviewLoadingDemo();
-
-@ImmichPreview(group: 'TextButton', name: 'Disabled')
-Widget previewTextButtonDisabled() => const Wrap(
-  spacing: 12,
-  runSpacing: 12,
-  children: [
-    ImmichTextButton(onPressed: _previewNoop, labelText: 'Disabled', disabled: true, expanded: false),
-    ImmichTextButton(
-      onPressed: _previewNoop,
-      labelText: 'Disabled Ghost',
-      variant: ImmichVariant.ghost,
-      disabled: true,
-      expanded: false,
-    ),
-  ],
-);
-
-class _PreviewLoadingDemo extends StatefulWidget {
-  const _PreviewLoadingDemo();
-
-  @override
-  State<_PreviewLoadingDemo> createState() => _PreviewLoadingDemoState();
-}
-
-class _PreviewLoadingDemoState extends State<_PreviewLoadingDemo> {
-  bool _isLoading = false;
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichTextButton(
-      onPressed: () async {
-        setState(() => _isLoading = true);
-        await Future<void>.delayed(const Duration(seconds: 2));
-        if (mounted) {
-          setState(() => _isLoading = false);
-        }
-      },
-      labelText: _isLoading ? 'Loading...' : 'Click Me',
-      loading: _isLoading,
-      expanded: false,
-    );
-  }
-}

mobile/packages/ui/lib/src/previews/text_input.dart

@@ -1,71 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/text_input.dart';
-import 'package:immich_ui/src/previews.dart';
-
-@ImmichPreview(group: 'TextInput', name: 'Basic')
-Widget previewTextInputBasic() => const _PreviewTextInputBasic();
-
-@ImmichPreview(group: 'TextInput', name: 'With Validator')
-Widget previewTextInputValidator() => const _PreviewTextInputValidator();
-
-class _PreviewTextInputBasic extends StatefulWidget {
-  const _PreviewTextInputBasic();
-
-  @override
-  State<_PreviewTextInputBasic> createState() => _PreviewTextInputBasicState();
-}
-
-class _PreviewTextInputBasicState extends State<_PreviewTextInputBasic> {
-  final _controller = TextEditingController();
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichTextInput(
-      label: 'Email',
-      hintText: 'Enter your email',
-      controller: _controller,
-      keyboardType: TextInputType.emailAddress,
-    );
-  }
-}
-
-class _PreviewTextInputValidator extends StatefulWidget {
-  const _PreviewTextInputValidator();
-
-  @override
-  State<_PreviewTextInputValidator> createState() => _PreviewTextInputValidatorState();
-}
-
-class _PreviewTextInputValidatorState extends State<_PreviewTextInputValidator> {
-  final _controller = TextEditingController();
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichTextInput(
-      label: 'Username',
-      controller: _controller,
-      autovalidateMode: AutovalidateMode.onUserInteraction,
-      validator: (value) {
-        if (value == null || value.isEmpty) {
-          return 'Username is required';
-        }
-        if (value.length < 3) {
-          return 'Username must be at least 3 characters';
-        }
-        return null;
-      },
-    );
-  }
-}

mobile/packages/ui/lib/src/previews/url_input.dart

@@ -1,28 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/components/url_input.dart';
-import 'package:immich_ui/src/previews.dart';
-
-@ImmichPreview(group: 'URLInput', name: 'Basic')
-Widget previewUrlInput() => const _PreviewUrlInput();
-
-class _PreviewUrlInput extends StatefulWidget {
-  const _PreviewUrlInput();
-
-  @override
-  State<_PreviewUrlInput> createState() => _PreviewUrlInputState();
-}
-
-class _PreviewUrlInputState extends State<_PreviewUrlInput> {
-  final _controller = TextEditingController();
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ImmichURLInput(label: 'Server URL', hintText: 'https://demo.immich.com', controller: _controller);
-  }
-}

mobile/packages/ui/pubspec.lock

@@ -185,5 +185,5 @@ packages:
     source: hosted
     version: "15.2.0"
 sdks:
-  dart: ">=3.12.0 <4.0.0"
+  dart: ">=3.11.0 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"

mobile/packages/ui/pubspec.yaml

@@ -2,7 +2,7 @@ name: immich_ui
 publish_to: none
 
 environment:
-  sdk: '>=3.12.0 <4.0.0'
+  sdk: '>=3.11.0 <4.0.0'
 
 dependencies:
   flutter:

mobile/packages/ui/showcase/.gitignore

@@ -0,0 +1,11 @@
+# Build artifacts
+build/
+
+# Test cache and generated files
+.dart_tool/
+.packages
+.flutter-plugins
+.flutter-plugins-dependencies
+
+# IDE-specific files
+.vscode/

mobile/packages/ui/showcase/.metadata

@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+    - platform: web
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

mobile/packages/ui/showcase/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:flutter_lints/flutter.yaml

mobile/packages/ui/showcase/assets/themes/github_dark.json

@@ -0,0 +1,339 @@
+{
+  "name": "GitHub Dark",
+  "settings": [
+    {
+      "settings": {
+        "foreground": "#e1e4e8",
+        "background": "#24292e"
+      }
+    },
+    {
+      "scope": [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment"
+      ],
+      "settings": {
+        "foreground": "#6a737d"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language"
+      ],
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "entity",
+        "entity.name"
+      ],
+      "settings": {
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage",
+        "storage.type"
+      ],
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source"
+      ],
+      "settings": {
+        "foreground": "#9ecbff"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "source.regexp",
+        "string.regexp"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.heading",
+        "markup.heading entity.name"
+      ],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": [
+        "markup.changed",
+        "punctuation.definition.changed"
+      ],
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.ignored",
+        "markup.untracked"
+      ],
+      "settings": {
+        "foreground": "#2f363d"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#d1d5da"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "constant.other.reference.link",
+        "string.other.link"
+      ],
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#dbedff"
+      }
+    }
+  ]
+}

mobile/packages/ui/showcase/lib/app_theme.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // Light theme colors
+  static const _primary500 = Color(0xFF4250AF);
+  static const _primary100 = Color(0xFFD4D6F0);
+  static const _primary900 = Color(0xFF181E44);
+  static const _danger500 = Color(0xFFE53E3E);
+  static const _light50 = Color(0xFFFAFAFA);
+  static const _light300 = Color(0xFFD4D4D4);
+  static const _light500 = Color(0xFF737373);
+
+  // Dark theme colors
+  static const _darkPrimary500 = Color(0xFFACCBFA);
+  static const _darkPrimary300 = Color(0xFF616D94);
+  static const _darkDanger500 = Color(0xFFE88080);
+  static const _darkLight50 = Color(0xFF0A0A0A);
+  static const _darkLight100 = Color(0xFF171717);
+  static const _darkLight200 = Color(0xFF262626);
+
+  static ThemeData get lightTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.light(
+        primary: _primary500,
+        onPrimary: Colors.white,
+        primaryContainer: _primary100,
+        onPrimaryContainer: _primary900,
+        secondary: _light500,
+        onSecondary: Colors.white,
+        error: _danger500,
+        onError: Colors.white,
+        surface: _light50,
+        onSurface: Color(0xFF1A1C1E),
+        surfaceContainerHighest: Color(0xFFE3E4E8),
+        outline: Color(0xFFD1D3D9),
+        outlineVariant: _light300,
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _light50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: Colors.white,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _light300, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFF1A1C1E),
+      ),
+    );
+  }
+
+  static ThemeData get darkTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.dark(
+        primary: _darkPrimary500,
+        onPrimary: Color(0xFF0F1433),
+        primaryContainer: _darkPrimary300,
+        onPrimaryContainer: _primary100,
+        secondary: Color(0xFFC4C6D0),
+        onSecondary: Color(0xFF2E3042),
+        error: _darkDanger500,
+        onError: Color(0xFF0F1433),
+        surface: _darkLight50,
+        onSurface: Color(0xFFE3E3E6),
+        surfaceContainerHighest: _darkLight200,
+        outline: Color(0xFF8E9099),
+        outlineVariant: Color(0xFF43464F),
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _darkLight50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: _darkLight100,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _darkLight200, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: _darkLight50,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFFE3E3E6),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/constants.dart

@@ -0,0 +1,16 @@
+const String appTitle = '@immich/ui';
+
+class LayoutConstants {
+  static const double sidebarWidth = 220.0;
+
+  static const double gridSpacing = 16.0;
+  static const double gridAspectRatio = 2.5;
+
+  static const double borderRadiusSmall = 6.0;
+  static const double borderRadiusMedium = 8.0;
+  static const double borderRadiusLarge = 12.0;
+
+  static const double iconSizeSmall = 16.0;
+  static const double iconSizeMedium = 18.0;
+  static const double iconSizeLarge = 20.0;
+}

mobile/packages/ui/showcase/lib/main.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/app_theme.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/router.dart';
+import 'package:showcase/widgets/example_card.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await initializeCodeHighlighter();
+  runApp(const ShowcaseApp());
+}
+
+class ShowcaseApp extends StatefulWidget {
+  const ShowcaseApp({super.key});
+
+  @override
+  State<ShowcaseApp> createState() => _ShowcaseAppState();
+}
+
+class _ShowcaseAppState extends State<ShowcaseApp> {
+  ThemeMode _themeMode = ThemeMode.light;
+  late final GoRouter _router;
+
+  @override
+  void initState() {
+    super.initState();
+    _router = AppRouter.createRouter(_toggleTheme);
+  }
+
+  void _toggleTheme() {
+    setState(() {
+      _themeMode = _themeMode == ThemeMode.light
+          ? ThemeMode.dark
+          : ThemeMode.light;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: appTitle,
+      themeMode: _themeMode,
+      routerConfig: _router,
+      theme: AppTheme.lightTheme,
+      darkTheme: AppTheme.darkTheme,
+      debugShowCheckedModeBanner: false,
+      builder: (context, child) => ImmichThemeProvider(
+        colorScheme: Theme.of(context).colorScheme,
+        child: child!,
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/close_button_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class CloseButtonPage extends StatelessWidget {
+  const CloseButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.closeButton.name,
+      child: ComponentExamples(
+        title: 'ImmichCloseButton',
+        subtitle: 'Pre-configured close button for dialogs and sheets.',
+        examples: [
+          ExampleCard(
+            title: 'Default & Custom',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichCloseButton(onPressed: () {}),
+                ImmichCloseButton(
+                  variant: ImmichVariant.filled,
+                  onPressed: () {},
+                ),
+                ImmichCloseButton(
+                  color: ImmichColor.secondary,
+                  onPressed: () {},
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/formatted_text_bold_text.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class FormattedTextBoldText extends StatelessWidget {
+  const FormattedTextBoldText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichFormattedText('This is <b>bold text</b>.');
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/formatted_text_links.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class FormattedTextLinks extends StatelessWidget {
+  const FormattedTextLinks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichFormattedText(
+      'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
+      spanBuilder: (tag) => FormattedSpan(
+        onTap: switch (tag) {
+          'docs-link' => () => ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Docs link clicked!'))),
+          'github-link' => () => ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('GitHub link clicked!'))),
+          _ => null,
+        },
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/formatted_text_mixed_tags.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class FormattedTextMixedContent extends StatelessWidget {
+  const FormattedTextMixedContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichFormattedText(
+      'You can use <b>bold text</b> and <link>links</link> together.',
+      spanBuilder: (tag) => switch (tag) {
+        'b' => const FormattedSpan(
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        _ => FormattedSpan(
+          onTap: () => ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Link clicked!'))),
+        ),
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/form_page.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class FormPage extends StatefulWidget {
+  const FormPage({super.key});
+
+  @override
+  State<FormPage> createState() => _FormPageState();
+}
+
+class _FormPageState extends State<FormPage> {
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  String _result = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.form.name,
+      child: ComponentExamples(
+        title: 'ImmichForm',
+        subtitle:
+            'Form container with built-in validation and submit handling.',
+        examples: [
+          ExampleCard(
+            title: 'Login Form',
+            preview: Column(
+              children: [
+                ImmichForm(
+                  submitText: 'Login',
+                  submitIcon: Icons.login,
+                  onSubmit: () async {
+                    await Future.delayed(const Duration(seconds: 1));
+                    setState(() {
+                      _result = 'Form submitted!';
+                    });
+                  },
+                  builder: (context, form) => Column(
+                    spacing: 10,
+                    children: [
+                      ImmichTextInput(
+                        label: 'Email',
+                        controller: _emailController,
+                        keyboardType: TextInputType.emailAddress,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                      ),
+                      ImmichPasswordInput(
+                        label: 'Password',
+                        controller: _passwordController,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                        onSubmit: (_) => form.submit(),
+                      ),
+                    ],
+                  ),
+                ),
+                if (_result.isNotEmpty) ...[
+                  const SizedBox(height: 16),
+                  Text(_result, style: const TextStyle(color: Colors.green)),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/formatted_text_page.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/pages/components/examples/formatted_text_bold_text.dart';
+import 'package:showcase/pages/components/examples/formatted_text_links.dart';
+import 'package:showcase/pages/components/examples/formatted_text_mixed_tags.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class FormattedTextPage extends StatelessWidget {
+  const FormattedTextPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.formattedText.name,
+      child: ComponentExamples(
+        title: 'ImmichFormattedText',
+        subtitle: 'Render text with HTML formatting (bold, links).',
+        examples: [
+          ExampleCard(
+            title: 'Bold Text',
+            preview: const FormattedTextBoldText(),
+            code: 'formatted_text_bold_text.dart',
+          ),
+          ExampleCard(
+            title: 'Links',
+            preview: const FormattedTextLinks(),
+            code: 'formatted_text_links.dart',
+          ),
+          ExampleCard(
+            title: 'Mixed Content',
+            preview: const FormattedTextMixedContent(),
+            code: 'formatted_text_mixed_tags.dart',
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/icon_button_page.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class IconButtonPage extends StatelessWidget {
+  const IconButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.iconButton.name,
+      child: ComponentExamples(
+        title: 'ImmichIconButton',
+        subtitle: 'Icon-only button with customizable styling.',
+        examples: [
+          ExampleCard(
+            title: 'Variants & Colors',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichIconButton(
+                  icon: Icons.add,
+                  onPressed: () {},
+                  variant: ImmichVariant.filled,
+                ),
+                ImmichIconButton(
+                  icon: Icons.edit,
+                  onPressed: () {},
+                  variant: ImmichVariant.ghost,
+                ),
+                ImmichIconButton(
+                  icon: Icons.delete,
+                  onPressed: () {},
+                  color: ImmichColor.secondary,
+                ),
+                ImmichIconButton(
+                  icon: Icons.settings,
+                  onPressed: () {},
+                  disabled: true,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/password_input_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class PasswordInputPage extends StatelessWidget {
+  const PasswordInputPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.passwordInput.name,
+      child: ComponentExamples(
+        title: 'ImmichPasswordInput',
+        subtitle: 'Password field with visibility toggle.',
+        examples: [
+          ExampleCard(
+            title: 'Password Input',
+            preview: ImmichPasswordInput(
+              label: 'Password',
+              hintText: 'Enter your password',
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+                if (value.length < 8) {
+                  return 'Password must be at least 8 characters';
+                }
+                return null;
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_button_page.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextButtonPage extends StatefulWidget {
+  const TextButtonPage({super.key});
+
+  @override
+  State<TextButtonPage> createState() => _TextButtonPageState();
+}
+
+class _TextButtonPageState extends State<TextButtonPage> {
+  bool _isLoading = false;
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textButton.name,
+      child: ComponentExamples(
+        title: 'ImmichTextButton',
+        subtitle:
+            'A versatile button component with multiple variants and color options.',
+        examples: [
+          ExampleCard(
+            title: 'Variants',
+            description:
+                'Filled and ghost variants for different visual hierarchy',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Filled',
+                  variant: ImmichVariant.filled,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Ghost',
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Colors',
+            description: 'Primary and secondary color options',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Primary',
+                  color: ImmichColor.primary,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Secondary',
+                  color: ImmichColor.secondary,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'With Icons',
+            description: 'Add leading icons',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'With Icon',
+                  icon: Icons.add,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Download',
+                  icon: Icons.download,
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Loading State',
+            description: 'Shows loading indicator during async operations',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ImmichTextButton(
+                  onPressed: () async {
+                    setState(() => _isLoading = true);
+                    await Future.delayed(const Duration(seconds: 2));
+                    if (mounted) setState(() => _isLoading = false);
+                  },
+                  labelText: _isLoading ? 'Loading...' : 'Click Me',
+                  loading: _isLoading,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Disabled State',
+            description: 'Buttons can be disabled',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled',
+                  disabled: true,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled Ghost',
+                  variant: ImmichVariant.ghost,
+                  disabled: true,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_input_page.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextInputPage extends StatefulWidget {
+  const TextInputPage({super.key});
+
+  @override
+  State<TextInputPage> createState() => _TextInputPageState();
+}
+
+class _TextInputPageState extends State<TextInputPage> {
+  final _controller1 = TextEditingController();
+  final _controller2 = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textInput.name,
+      child: ComponentExamples(
+        title: 'ImmichTextInput',
+        subtitle: 'Text field with validation support.',
+        examples: [
+          ExampleCard(
+            title: 'Basic Usage',
+            preview: Column(
+              children: [
+                ImmichTextInput(
+                  label: 'Email',
+                  hintText: 'Enter your email',
+                  controller: _controller1,
+                  keyboardType: TextInputType.emailAddress,
+                ),
+                const SizedBox(height: 16),
+                ImmichTextInput(
+                  label: 'Username',
+                  controller: _controller2,
+                  validator: (value) {
+                    if (value == null || value.isEmpty) {
+                      return 'Username is required';
+                    }
+                    if (value.length < 3) {
+                      return 'Username must be at least 3 characters';
+                    }
+                    return null;
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller1.dispose();
+    _controller2.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart

@@ -0,0 +1,396 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class ConstantsPage extends StatefulWidget {
+  const ConstantsPage({super.key});
+
+  @override
+  State<ConstantsPage> createState() => _ConstantsPageState();
+}
+
+class _ConstantsPageState extends State<ConstantsPage> {
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.constants.name,
+      child: ComponentExamples(
+        title: 'Constants',
+        subtitle: 'Consistent spacing, sizing, and styling constants.',
+        expand: true,
+        examples: [
+          const ExampleCard(
+            title: 'Spacing',
+            description: 'ImmichSpacing (4.0 → 48.0)',
+            preview: Column(
+              children: [
+                _SpacingBox(label: 'xs', size: ImmichSpacing.xs),
+                _SpacingBox(label: 'sm', size: ImmichSpacing.sm),
+                _SpacingBox(label: 'md', size: ImmichSpacing.md),
+                _SpacingBox(label: 'lg', size: ImmichSpacing.lg),
+                _SpacingBox(label: 'xl', size: ImmichSpacing.xl),
+                _SpacingBox(label: 'xxl', size: ImmichSpacing.xxl),
+                _SpacingBox(label: 'xxxl', size: ImmichSpacing.xxxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Radius',
+            description: 'ImmichRadius (0.0 → 24.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _RadiusBox(label: 'none', radius: ImmichRadius.none),
+                _RadiusBox(label: 'xs', radius: ImmichRadius.xs),
+                _RadiusBox(label: 'sm', radius: ImmichRadius.sm),
+                _RadiusBox(label: 'md', radius: ImmichRadius.md),
+                _RadiusBox(label: 'lg', radius: ImmichRadius.lg),
+                _RadiusBox(label: 'xl', radius: ImmichRadius.xl),
+                _RadiusBox(label: 'xxl', radius: ImmichRadius.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Icon Sizes',
+            description: 'ImmichIconSize (16.0 → 48.0)',
+            preview: Wrap(
+              spacing: 16,
+              runSpacing: 16,
+              alignment: WrapAlignment.start,
+              children: [
+                _IconSizeBox(label: 'xs', size: ImmichIconSize.xs),
+                _IconSizeBox(label: 'sm', size: ImmichIconSize.sm),
+                _IconSizeBox(label: 'md', size: ImmichIconSize.md),
+                _IconSizeBox(label: 'lg', size: ImmichIconSize.lg),
+                _IconSizeBox(label: 'xl', size: ImmichIconSize.xl),
+                _IconSizeBox(label: 'xxl', size: ImmichIconSize.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Text Sizes',
+            description: 'ImmichTextSize (10.0 → 60.0)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Caption',
+                  style: TextStyle(fontSize: ImmichTextSize.caption),
+                ),
+                Text('Label', style: TextStyle(fontSize: ImmichTextSize.label)),
+                Text('Body', style: TextStyle(fontSize: ImmichTextSize.body)),
+                Text('H6', style: TextStyle(fontSize: ImmichTextSize.h6)),
+                Text('H5', style: TextStyle(fontSize: ImmichTextSize.h5)),
+                Text('H4', style: TextStyle(fontSize: ImmichTextSize.h4)),
+                Text('H3', style: TextStyle(fontSize: ImmichTextSize.h3)),
+                Text('H2', style: TextStyle(fontSize: ImmichTextSize.h2)),
+                Text('H1', style: TextStyle(fontSize: ImmichTextSize.h1)),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Elevation',
+            description: 'ImmichElevation (0.0 → 16.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _ElevationBox(label: 'none', elevation: ImmichElevation.none),
+                _ElevationBox(label: 'xs', elevation: ImmichElevation.xs),
+                _ElevationBox(label: 'sm', elevation: ImmichElevation.sm),
+                _ElevationBox(label: 'md', elevation: ImmichElevation.md),
+                _ElevationBox(label: 'lg', elevation: ImmichElevation.lg),
+                _ElevationBox(label: 'xl', elevation: ImmichElevation.xl),
+                _ElevationBox(label: 'xxl', elevation: ImmichElevation.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Width',
+            description: 'ImmichBorderWidth (0.5 → 4.0)',
+            preview: Column(
+              children: [
+                _BorderBox(
+                  label: 'hairline',
+                  borderWidth: ImmichBorderWidth.hairline,
+                ),
+                _BorderBox(label: 'base', borderWidth: ImmichBorderWidth.base),
+                _BorderBox(label: 'md', borderWidth: ImmichBorderWidth.md),
+                _BorderBox(label: 'lg', borderWidth: ImmichBorderWidth.lg),
+                _BorderBox(label: 'xl', borderWidth: ImmichBorderWidth.xl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Animation Durations',
+            description: 'ImmichDuration (100ms → 700ms)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              spacing: 8,
+              children: [
+                _AnimatedDurationBox(
+                  label: 'Extra Fast',
+                  duration: ImmichDuration.extraFast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Fast',
+                  duration: ImmichDuration.fast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Normal',
+                  duration: ImmichDuration.normal,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Slow',
+                  duration: ImmichDuration.slow,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Extra Slow',
+                  duration: ImmichDuration.extraSlow,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SpacingBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _SpacingBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 60,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Container(
+            width: size,
+            height: 24,
+            color: Theme.of(context).colorScheme.primary,
+          ),
+          const SizedBox(width: 8),
+          Text('${size.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _RadiusBox extends StatelessWidget {
+  final String label;
+  final double radius;
+
+  const _RadiusBox({required this.label, required this.radius});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          width: 60,
+          height: 60,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.primary,
+            borderRadius: BorderRadius.circular(radius),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+      ],
+    );
+  }
+}
+
+class _IconSizeBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _IconSizeBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Icon(Icons.palette_rounded, size: size),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+        Text(
+          '${size.toStringAsFixed(0)}px',
+          style: const TextStyle(fontSize: 10, color: Colors.grey),
+        ),
+      ],
+    );
+  }
+}
+
+class _ElevationBox extends StatelessWidget {
+  final String label;
+  final double elevation;
+
+  const _ElevationBox({required this.label, required this.elevation});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Material(
+          elevation: elevation,
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: Container(
+            width: 60,
+            height: 60,
+            alignment: Alignment.center,
+            child: Text(label, style: const TextStyle(fontSize: 12)),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(
+          elevation.toStringAsFixed(1),
+          style: const TextStyle(fontSize: 10),
+        ),
+      ],
+    );
+  }
+}
+
+class _BorderBox extends StatelessWidget {
+  final String label;
+  final double borderWidth;
+
+  const _BorderBox({required this.label, required this.borderWidth});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 80,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Expanded(
+            child: Container(
+              height: 40,
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.primary,
+                  width: borderWidth,
+                ),
+                borderRadius: const BorderRadius.all(Radius.circular(4)),
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text('${borderWidth.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _AnimatedDurationBox extends StatefulWidget {
+  final String label;
+  final Duration duration;
+
+  const _AnimatedDurationBox({required this.label, required this.duration});
+
+  @override
+  State<_AnimatedDurationBox> createState() => _AnimatedDurationBoxState();
+}
+
+class _AnimatedDurationBoxState extends State<_AnimatedDurationBox> {
+  bool _atEnd = false;
+  bool _isAnimating = false;
+
+  void _playAnimation() async {
+    if (_isAnimating) return;
+    setState(() => _isAnimating = true);
+    setState(() => _atEnd = true);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _atEnd = false);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _isAnimating = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Row(
+      children: [
+        SizedBox(
+          width: 90,
+          child: Text(
+            widget.label,
+            style: const TextStyle(fontFamily: 'GoogleSansCode', fontSize: 12),
+          ),
+        ),
+        Expanded(
+          child: Container(
+            height: 32,
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+              borderRadius: BorderRadius.circular(6),
+            ),
+            child: AnimatedAlign(
+              duration: widget.duration,
+              curve: Curves.easeInOut,
+              alignment: _atEnd ? Alignment.centerRight : Alignment.centerLeft,
+              child: Container(
+                width: 60,
+                height: 28,
+                margin: const EdgeInsets.symmetric(horizontal: 2),
+                decoration: BoxDecoration(
+                  color: colorScheme.primary,
+                  borderRadius: BorderRadius.circular(4),
+                ),
+                alignment: Alignment.center,
+                child: Text(
+                  '${widget.duration.inMilliseconds}ms',
+                  style: TextStyle(
+                    fontSize: 11,
+                    color: colorScheme.onPrimary,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        const SizedBox(width: 8),
+        IconButton(
+          onPressed: _isAnimating ? null : _playAnimation,
+          icon: Icon(
+            Icons.play_arrow_rounded,
+            color: _isAnimating ? colorScheme.outline : colorScheme.primary,
+          ),
+          iconSize: 24,
+          padding: EdgeInsets.zero,
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/home_page.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class HomePage extends StatelessWidget {
+  final VoidCallback onThemeToggle;
+
+  const HomePage({super.key, required this.onThemeToggle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: appTitle,
+      color: Theme.of(context).colorScheme.primary,
+      child: ListView(
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
+        children: [
+          Text(
+            appTitle,
+            style: Theme.of(context).textTheme.displaySmall?.copyWith(
+              fontWeight: FontWeight.bold,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(
+            'A collection of Flutter components that are shared across all Immich projects',
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+              fontWeight: FontWeight.w400,
+              height: 1.5,
+            ),
+          ),
+          const SizedBox(height: 48),
+          ...routesByCategory.entries.map((entry) {
+            if (entry.key == AppRouteCategory.root) {
+              return const SizedBox.shrink();
+            }
+
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  entry.key.displayName,
+                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: Theme.of(context).colorScheme.onSurface,
+                  ),
+                ),
+                const SizedBox(height: 16),
+                GridView.builder(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 3,
+                    crossAxisSpacing: LayoutConstants.gridSpacing,
+                    mainAxisSpacing: LayoutConstants.gridSpacing,
+                    childAspectRatio: LayoutConstants.gridAspectRatio,
+                  ),
+                  itemCount: entry.value.length,
+                  itemBuilder: (context, index) {
+                    return _ComponentCard(route: entry.value[index]);
+                  },
+                ),
+                const SizedBox(height: 48),
+              ],
+            );
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _ComponentCard extends StatelessWidget {
+  final AppRoute route;
+
+  const _ComponentCard({required this.route});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () => context.go(route.path),
+      borderRadius: const BorderRadius.all(Radius.circular(LayoutConstants.borderRadiusLarge)),
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(route.icon, size: 32, color: Theme.of(context).colorScheme.primary),
+              const SizedBox(height: 16),
+              Text(
+                route.name,
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+
+              const SizedBox(height: 8),
+              Text(
+                route.description,
+                style: Theme.of(
+                  context,
+                ).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant, height: 1.4),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/router.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/pages/components/close_button_page.dart';
+import 'package:showcase/pages/components/form_page.dart';
+import 'package:showcase/pages/components/formatted_text_page.dart';
+import 'package:showcase/pages/components/icon_button_page.dart';
+import 'package:showcase/pages/components/password_input_page.dart';
+import 'package:showcase/pages/components/text_button_page.dart';
+import 'package:showcase/pages/components/text_input_page.dart';
+import 'package:showcase/pages/design_system/constants_page.dart';
+import 'package:showcase/pages/home_page.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/shell_layout.dart';
+
+class AppRouter {
+  static GoRouter createRouter(VoidCallback onThemeToggle) {
+    return GoRouter(
+      initialLocation: AppRoute.home.path,
+      routes: [
+        ShellRoute(
+          builder: (context, state, child) =>
+              ShellLayout(onThemeToggle: onThemeToggle, child: child),
+          routes: AppRoute.values
+              .map(
+                (route) => GoRoute(
+                  path: route.path,
+                  pageBuilder: (context, state) => NoTransitionPage(
+                    key: state.pageKey,
+                    child: switch (route) {
+                      AppRoute.home => HomePage(onThemeToggle: onThemeToggle),
+                      AppRoute.textButton => const TextButtonPage(),
+                      AppRoute.iconButton => const IconButtonPage(),
+                      AppRoute.closeButton => const CloseButtonPage(),
+                      AppRoute.textInput => const TextInputPage(),
+                      AppRoute.passwordInput => const PasswordInputPage(),
+                      AppRoute.form => const FormPage(),
+                      AppRoute.formattedText => const FormattedTextPage(),
+                      AppRoute.constants => const ConstantsPage(),
+                    },
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/routes.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+enum AppRouteCategory {
+  root(''),
+  forms('Forms'),
+  buttons('Buttons'),
+  designSystem('Design System');
+
+  final String displayName;
+  const AppRouteCategory(this.displayName);
+}
+
+enum AppRoute {
+  home(
+    name: 'Home',
+    description: 'Home page',
+    path: '/',
+    category: AppRouteCategory.root,
+    icon: Icons.home_outlined,
+  ),
+  textButton(
+    name: 'Text Button',
+    description: 'Versatile button with filled and ghost variants',
+    path: '/text-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.smart_button_rounded,
+  ),
+  iconButton(
+    name: 'Icon Button',
+    description: 'Icon-only button with customizable styling',
+    path: '/icon-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.radio_button_unchecked_rounded,
+  ),
+  closeButton(
+    name: 'Close Button',
+    description: 'Pre-configured close button for dialogs',
+    path: '/close-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.close_rounded,
+  ),
+  textInput(
+    name: 'Text Input',
+    description: 'Text field with validation support',
+    path: '/text-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.text_fields_outlined,
+  ),
+  passwordInput(
+    name: 'Password Input',
+    description: 'Password field with visibility toggle',
+    path: '/password-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.password_outlined,
+  ),
+  form(
+    name: 'Form',
+    description: 'Form container with built-in validation',
+    path: '/form',
+    category: AppRouteCategory.forms,
+    icon: Icons.description_outlined,
+  ),
+  formattedText(
+    name: 'Formatted Text',
+    description: 'Render text with HTML formatting',
+    path: '/formatted-text',
+    category: AppRouteCategory.forms,
+    icon: Icons.code_rounded,
+  ),
+  constants(
+    name: 'Constants',
+    description: 'Spacing, colors, typography, and more',
+    path: '/constants',
+    category: AppRouteCategory.designSystem,
+    icon: Icons.palette_outlined,
+  );
+
+  final String name;
+  final String description;
+  final String path;
+  final AppRouteCategory category;
+  final IconData icon;
+
+  const AppRoute({
+    required this.name,
+    required this.description,
+    required this.path,
+    required this.category,
+    required this.icon,
+  });
+}
+
+final routesByCategory = AppRoute.values
+    .fold<Map<AppRouteCategory, List<AppRoute>>>({}, (map, route) {
+      map.putIfAbsent(route.category, () => []).add(route);
+      return map;
+    });

mobile/packages/ui/showcase/lib/widgets/component_examples.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+
+class ComponentExamples extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final List<Widget> examples;
+  final bool expand;
+
+  const ComponentExamples({
+    super.key,
+    required this.title,
+    this.subtitle,
+    required this.examples,
+    this.expand = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(10, 24, 24, 24),
+      child: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(
+            child: _PageHeader(title: title, subtitle: subtitle),
+          ),
+          const SliverPadding(padding: EdgeInsets.only(top: 24)),
+          if (expand)
+            SliverList.builder(
+              itemCount: examples.length,
+              itemBuilder: (context, index) => examples[index],
+            )
+          else
+            SliverLayoutBuilder(
+              builder: (context, constraints) {
+                return SliverList.builder(
+                  itemCount: examples.length,
+                  itemBuilder: (context, index) => Align(
+                    alignment: Alignment.centerLeft,
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minWidth: constraints.crossAxisExtent * 0.6,
+                        maxWidth: constraints.crossAxisExtent,
+                      ),
+                      child: IntrinsicWidth(child: examples[index]),
+                    ),
+                  ),
+                );
+              },
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PageHeader extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+
+  const _PageHeader({required this.title, this.subtitle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          title,
+          style: Theme.of(
+            context,
+          ).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.bold),
+        ),
+        if (subtitle != null) ...[
+          const SizedBox(height: 8),
+          Text(
+            subtitle!,
+            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/example_card.dart

@@ -0,0 +1,237 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:showcase/constants.dart';
+import 'package:syntax_highlight/syntax_highlight.dart';
+
+late final Highlighter _codeHighlighter;
+
+Future<void> initializeCodeHighlighter() async {
+  await Highlighter.initialize(['dart']);
+  final darkTheme = await HighlighterTheme.loadFromAssets([
+    'assets/themes/github_dark.json',
+  ], const TextStyle(color: Color(0xFFe1e4e8)));
+
+  _codeHighlighter = Highlighter(language: 'dart', theme: darkTheme);
+}
+
+class ExampleCard extends StatefulWidget {
+  final String title;
+  final String? description;
+  final Widget preview;
+  final String? code;
+
+  const ExampleCard({
+    super.key,
+    required this.title,
+    this.description,
+    required this.preview,
+    this.code,
+  });
+
+  @override
+  State<ExampleCard> createState() => _ExampleCardState();
+}
+
+class _ExampleCardState extends State<ExampleCard> {
+  bool _showPreview = true;
+  String? code;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.code != null) {
+      rootBundle
+          .loadString('lib/pages/components/examples/${widget.code!}')
+          .then((value) {
+            setState(() {
+              code = value;
+            });
+          });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 1,
+      margin: const EdgeInsets.only(bottom: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        widget.title,
+                        style: Theme.of(context).textTheme.titleMedium
+                            ?.copyWith(fontWeight: FontWeight.bold),
+                      ),
+                      const SizedBox(height: 4),
+                      if (widget.description != null)
+                        Text(
+                          widget.description!,
+                          style: Theme.of(context).textTheme.bodyMedium
+                              ?.copyWith(
+                                color: Theme.of(
+                                  context,
+                                ).colorScheme.onSurfaceVariant,
+                              ),
+                        ),
+                    ],
+                  ),
+                ),
+                if (code != null) ...[
+                  const SizedBox(width: 16),
+                  Row(
+                    children: [
+                      _ToggleButton(
+                        icon: Icons.visibility_rounded,
+                        label: 'Preview',
+                        isSelected: _showPreview,
+                        onTap: () => setState(() => _showPreview = true),
+                      ),
+                      const SizedBox(width: 8),
+                      _ToggleButton(
+                        icon: Icons.code_rounded,
+                        label: 'Code',
+                        isSelected: !_showPreview,
+                        onTap: () => setState(() => _showPreview = false),
+                      ),
+                    ],
+                  ),
+                ],
+              ],
+            ),
+          ),
+          const Divider(height: 1),
+          if (_showPreview)
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: SizedBox(width: double.infinity, child: widget.preview),
+            )
+          else
+            Container(
+              width: double.infinity,
+              decoration: const BoxDecoration(
+                color: Color(0xFF24292e),
+                borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                  bottomRight: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                ),
+              ),
+              child: _CodeCard(code: code!),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ToggleButton extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _ToggleButton({
+    required this.icon,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: const BorderRadius.all(Radius.circular(24)),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+        decoration: BoxDecoration(
+          color: isSelected
+              ? Theme.of(context).colorScheme.primary.withValues(alpha: 0.7)
+              : Theme.of(context).colorScheme.primary,
+          borderRadius: const BorderRadius.all(Radius.circular(24)),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              icon,
+              size: 16,
+              color: Theme.of(context).colorScheme.onPrimary,
+            ),
+            const SizedBox(width: 6),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onPrimary,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CodeCard extends StatelessWidget {
+  final String code;
+
+  const _CodeCard({required this.code});
+
+  @override
+  Widget build(BuildContext context) {
+    final lines = code.split('\n');
+    final lineNumberColor = Colors.white.withValues(alpha: 0.4);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Padding(
+        padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: List.generate(
+                lines.length,
+                (index) => SizedBox(
+                  height: 20,
+                  child: Text(
+                    '${index + 1}',
+                    style: TextStyle(
+                      fontFamily: 'GoogleSansCode',
+                      fontSize: 13,
+                      color: lineNumberColor,
+                      height: 1.5,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 16),
+            SelectableText.rich(
+              _codeHighlighter.highlight(code),
+              style: const TextStyle(
+                fontFamily: 'GoogleSansCode',
+                fontSize: 13,
+                height: 1.54,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/page_title.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class PageTitle extends StatelessWidget {
+  final String title;
+  final Widget child;
+
+  const PageTitle({super.key, required this.title, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: '$title | @immich/ui',
+      color: Theme.of(context).colorScheme.primary,
+      child: child,
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/shell_layout.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/widgets/sidebar_navigation.dart';
+
+class ShellLayout extends StatelessWidget {
+  final Widget child;
+  final VoidCallback onThemeToggle;
+
+  const ShellLayout({
+    super.key,
+    required this.child,
+    required this.onThemeToggle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Image.asset('assets/immich_logo.png', height: 32, width: 32),
+            const SizedBox(width: 8),
+            Image.asset(
+              isDark
+                  ? 'assets/immich-text-dark.png'
+                  : 'assets/immich-text-light.png',
+              height: 24,
+              filterQuality: FilterQuality.none,
+              isAntiAlias: true,
+            ),
+          ],
+        ),
+        actions: [
+          IconButton(
+            icon: Icon(
+              isDark ? Icons.light_mode_outlined : Icons.dark_mode_outlined,
+              size: LayoutConstants.iconSizeLarge,
+            ),
+            onPressed: onThemeToggle,
+            tooltip: 'Toggle theme',
+          ),
+        ],
+        shape: Border(
+          bottom: BorderSide(color: Theme.of(context).dividerColor, width: 1),
+        ),
+      ),
+      body: Row(
+        children: [
+          const SidebarNavigation(),
+          const VerticalDivider(),
+          Expanded(child: child),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/sidebar_navigation.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class SidebarNavigation extends StatelessWidget {
+  const SidebarNavigation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: LayoutConstants.sidebarWidth,
+      decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface),
+      child: ListView(
+        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+        children: [
+          ...routesByCategory.entries.expand((entry) {
+            final category = entry.key;
+            final routes = entry.value;
+            return [
+              if (category != AppRouteCategory.root) _CategoryHeader(category),
+              ...routes.map((route) => _NavItem(route)),
+              const SizedBox(height: 24),
+            ];
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _CategoryHeader extends StatelessWidget {
+  final AppRouteCategory category;
+
+  const _CategoryHeader(this.category);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+      child: Text(
+        category.displayName,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+          fontWeight: FontWeight.w600,
+          letterSpacing: 0.5,
+        ),
+      ),
+    );
+  }
+}
+
+class _NavItem extends StatelessWidget {
+  final AppRoute route;
+
+  const _NavItem(this.route);
+
+  @override
+  Widget build(BuildContext context) {
+    final currentRoute = GoRouterState.of(context).uri.toString();
+    final isSelected = currentRoute == route.path;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () {
+            context.go(route.path);
+          },
+          borderRadius: BorderRadius.circular(
+            LayoutConstants.borderRadiusMedium,
+          ),
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+            decoration: BoxDecoration(
+              color: isSelected
+                  ? (isDark
+                        ? Colors.white.withValues(alpha: 0.1)
+                        : Theme.of(
+                            context,
+                          ).colorScheme.primaryContainer.withValues(alpha: 0.5))
+                  : Colors.transparent,
+              borderRadius: BorderRadius.circular(
+                LayoutConstants.borderRadiusMedium,
+              ),
+            ),
+            child: Row(
+              children: [
+                Icon(
+                  route.icon,
+                  size: 20,
+                  color: isSelected
+                      ? Theme.of(context).colorScheme.primary
+                      : Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Text(
+                    route.name,
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: isSelected
+                          ? Theme.of(context).colorScheme.primary
+                          : Theme.of(context).colorScheme.onSurface,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/pubspec.lock

@@ -0,0 +1,377 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: e2eb0491ba5ddb6177742d2da23904574082139b07c1e33b8503b9f46f3e1a37
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.1"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: faf38497bda5ead2a8c7615f4f7939df04333478bf32e4173fcb06d428b5716b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.19.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
+  device_info_plus:
+    dependency: transitive
+    description:
+      name: device_info_plus
+      sha256: "98f28b42168cc509abc92f88518882fd58061ea372d7999aecc424345c7bff6a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.5.0"
+  device_info_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: device_info_plus_platform_interface
+      sha256: e1ea89119e34903dca74b883d0dd78eb762814f97fb6c76f35e9ff74d261a18f
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.3"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: "6d7fd89431262d8f3125e81b50d3847a091d846eafcd4fdb88dd06f36d705a45"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      sha256: "3105dc8492f6183fb076ccf1f351ac3d60564bff92e20bfc4af9cc1651f4e7e1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      sha256: "92d8cee7c57dff0a6c409c05597b460002434eccf7424a712283225b3962d03f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "17.2.3"
+  immich_ui:
+    dependency: "direct main"
+    description:
+      path: ".."
+      relative: true
+    source: path
+    version: "0.0.0"
+  irondash_engine_context:
+    dependency: transitive
+    description:
+      name: irondash_engine_context
+      sha256: "2bb0bc13dfda9f5aaef8dde06ecc5feb1379f5bb387d59716d799554f3f305d7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.5"
+  irondash_message_channel:
+    dependency: transitive
+    description:
+      name: irondash_message_channel
+      sha256: b4101669776509c76133b8917ab8cfc704d3ad92a8c450b92934dd8884a2f060
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      sha256: "12f842a479589fea194fe5c5a3095abc7be0c1f2ddfa9a0e76aed1dbd26a87df"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.0"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.19"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.13.0"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: "1741988757a65eb6b36abe716829688cf01910bbf91c34354ff7ec1c3de2b349"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.18.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  pixel_snap:
+    dependency: transitive
+    description:
+      name: pixel_snap
+      sha256: "677410ea37b07cd37ecb6d5e6c0d8d7615a7cf3bd92ba406fd1ac57e937d1fb0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.5"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.8"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "56a02f1f4cd1a2d96303c0144c93bd6d909eea6bee6bf5a0e0b685edbd4c47ab"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.2"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  super_clipboard:
+    dependency: transitive
+    description:
+      name: super_clipboard
+      sha256: e73f3bb7e66cc9260efa1dc507f979138e7e106c3521e2dda2d0311f6d728a16
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  super_native_extensions:
+    dependency: transitive
+    description:
+      name: super_native_extensions
+      sha256: b9611dcb68f1047d6f3ef11af25e4e68a21b1a705bbcc3eb8cb4e9f5c3148569
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  syntax_highlight:
+    dependency: "direct main"
+    description:
+      name: syntax_highlight
+      sha256: "4d3ba40658cadba6ba55d697f29f00b43538ebb6eb4a0ca0e895c568eaced138"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "949a932224383300f01be9221c39180316445ecb8e7547f70a41a35bf421fb9e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.11"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: "1fef9e8e11e2991bb773070d4656b7bd5d850967a2456cfc83cf47925ba79489"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.3"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "0016aef94fc66495ac78af5859181e3f3bf2026bd8eecc72b9565601e19ab360"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.2.0"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      sha256: d7cb55e04cd34096cd3a79b3330245f54cb96a370a1c27adb3c84b917de8b08e
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.15.0"
+  win32_registry:
+    dependency: transitive
+    description:
+      name: win32_registry
+      sha256: "6f1b564492d0147b330dd794fee8f512cec4977957f310f9951b5f9d83618dae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+sdks:
+  dart: ">=3.11.0 <4.0.0"
+  flutter: ">=3.35.0"

mobile/packages/ui/showcase/pubspec.yaml

@@ -0,0 +1,47 @@
+name: showcase
+publish_to: 'none'
+
+version: 1.0.0+1
+
+environment:
+  sdk: ^3.11.0
+
+dependencies:
+  flutter:
+    sdk: flutter
+  immich_ui:
+    path: ../
+  go_router: ^17.2.1
+  syntax_highlight: ^0.5.0
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/
+    - assets/themes/
+    - lib/pages/components/examples/
+
+  fonts:
+    - family: GoogleSans
+      fonts:
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Regular.ttf
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Italic.ttf
+          style: italic
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSans/GoogleSans-SemiBold.ttf
+          weight: 600
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Bold.ttf
+          weight: 700
+    - family: GoogleSansCode
+      fonts:
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Regular.ttf
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-SemiBold.ttf
+          weight: 600

mobile/packages/ui/showcase/web/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="Immich UI component library showcase and documentation">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="@immich/ui">
+  <link rel="apple-touch-icon" href="icons/apple-icon-180.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+
+  <title>@immich/ui</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>

mobile/packages/ui/showcase/web/manifest.json

@@ -0,0 +1,37 @@
+{
+    "name": "@immich/ui Showcase",
+    "short_name": "@immich/ui",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#FCFCFD",
+    "theme_color": "#4250AF",
+    "description": "Immich UI component library showcase and documentation",
+    "orientation": "landscape",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

mobile/pubspec.yaml

@@ -34,7 +34,7 @@ dependencies:
   flutter_web_auth_2: ^5.0.2
   fluttertoast: ^8.2.14
   geolocator: ^14.0.2
-  home_widget: ^0.9.0
+  home_widget: ^0.8.1
   hooks_riverpod: ^2.6.1
   http: ^1.6.0
   image_picker: ^1.2.1
@@ -43,7 +43,7 @@ dependencies:
   intl: ^0.20.2
   local_auth: ^2.3.0
   logging: ^1.3.0
-  maplibre_gl: ^0.26.0
+  maplibre_gl: ^0.22.0
   native_video_player:
     git:
       url: https://github.com/immich-app/native_video_player
@@ -67,7 +67,7 @@ dependencies:
   sliver_tools: ^0.2.12
   stream_transform: ^2.1.1
   thumbhash: 0.1.0+1
-  timezone: ^0.11.0
+  timezone: ^0.9.4
   url_launcher: ^6.3.2
   uuid: ^4.5.3
   wakelock_plus: ^1.3.3

open-api/immich-openapi-specs.json

@@ -26355,7 +26355,6 @@
         "description": "Plugin trigger type",
         "enum": [
           "AssetCreate",
-          "AssetMetadataExtraction",
           "PersonRecognized"
         ],
         "type": "string"

packages/plugin-core/manifest.json

@@ -7,8 +7,8 @@
   "wasmPath": "dist/plugin.wasm",
   "templates": [
     {
-      "name": "screenshots-smart-album",
-      "title": "Archive screenshots",
+      "name": "auto-archive-screenshots",
+      "title": "Auto-archive screenshots",
       "description": "Archive uploads with \"screenshot\" in the filename and optionally add them to an album",
       "trigger": "AssetCreate",
       "steps": [
@@ -29,27 +29,6 @@
         {
           "method": "immich-plugin-core#assetAddToAlbums",
           "config": {
-            "albumName": "Screenshots",
-            "albumIds": []
-          }
-        }
-      ],
-      "uiHints": ["SmartAlbum"]
-    },
-    {
-      "name": "missing-timezone-smart-album",
-      "title": "Missing timezone",
-      "description": "Automatically create an album for assets without a time zone",
-      "trigger": "AssetMetadataExtraction",
-      "steps": [
-        {
-          "method": "immich-plugin-core#assetMissingTimeZoneFilter",
-          "config": {}
-        },
-        {
-          "method": "immich-plugin-core#assetAddToAlbums",
-          "config": {
-            "albumName": "Missing time zone",
             "albumIds": []
           }
         }
@@ -89,24 +68,6 @@
       },
       "uiHints": ["Filter"]
     },
-    {
-      "name": "assetMissingTimeZoneFilter",
-      "title": "Filter by missing time zone",
-      "description": "Filter assets that have no time zone information",
-      "types": ["AssetV1"],
-      "schema": {
-        "type": "object",
-        "properties": {
-          "inverse": {
-            "type": "boolean",
-            "title": "Inverse",
-            "description": "Missing by default, set to true to filter assets with a time zone",
-            "default": false
-          }
-        }
-      },
-      "uiHints": ["Filter"]
-    },
     {
       "name": "filterFileType",
       "title": "Filter by file type",
@@ -228,12 +189,6 @@
             "array": true,
             "description": "Target album IDs",
             "uiHint": "AlbumId"
-          },
-          "albumName": {
-            "type": "string",
-            "title": "Album name",
-            "array": true,
-            "description": "Use an album with this name if one exists, otherwise create a new one"
           }
         },
         "required": ["albumIds"]

packages/plugin-core/package.json

@@ -13,7 +13,6 @@
   "license": "AGPL-3.0",
   "devDependencies": {
     "@extism/js-pdk": "^1.0.1",
-    "@immich/sdk": "workspace:*",
     "@immich/plugin-sdk": "workspace:*",
     "esbuild": "^0.28.0",
     "typescript": "^6.0.0"

packages/plugin-core/src/index.d.ts

@@ -1,20 +1,14 @@
-// keep in sync with plugin-sdk/host-functions.ts';
+// copy from
+// import '@immich/plugin-sdk/host-functions';
 declare module 'extism:host' {
   interface user {
-    searchAlbums(ptr: PTR): I64;
-    createAlbum(ptr: PTR): I64;
-    addAssetsToAlbum(ptr: PTR): I64;
+    albumAddAssets(ptr: PTR): I64;
     addAssetsToAlbums(ptr: PTR): I64;
   }
 }
 
-// keep in sync with manifest.json
 declare module 'main' {
-  // filters
   export function assetFileFilter(): I32;
-  export function assetMissingTimeZoneFilter(): I32;
-
-  // updates
   export function assetFavorite(): I32;
   export function assetVisibility(): I32;
   export function assetArchive(): I32;

packages/plugin-core/src/index.ts

@@ -1,5 +1,4 @@
-import { wrapper } from '@immich/plugin-sdk';
-import { AssetVisibility, WorkflowType } from '@immich/sdk';
+import { AssetStatus, AssetVisibility, WorkflowType, wrapper } from '@immich/plugin-sdk';
 
 type AssetFileFilterConfig = {
   pattern: string;
@@ -42,14 +41,6 @@ export const assetFileFilter = () => {
   });
 };
 
-export const assetMissingTimeZoneFilter = () => {
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
-    const hasTimeZone = !!data.asset?.exifInfo?.timeZone;
-    const needsTimeZone = config.inverse ? true : false;
-    return { workflow: { continue: hasTimeZone === needsTimeZone } };
-  });
-};
-
 export const assetFavorite = () => {
   return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
     const target = config.inverse ? false : true;
@@ -98,35 +89,28 @@ export const assetLock = () => {
 };
 
 export const assetTrash = () => {
-  // TODO use trash/untrash host functions
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(() => ({}));
+  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => ({
+    changes: {
+      asset: config.inverse
+        ? { deletedAt: null, status: AssetStatus.Active }
+        : { deletedAt: new Date().toISOString(), status: AssetStatus.Trashed },
+    },
+  }));
 };
 
 export const assetAddToAlbums = () => {
-  return wrapper<WorkflowType.AssetV1, { albumIds: string[]; albumName?: string }>(({ config, data, functions }) => {
-    const assetId = data.asset.id;
-
+  return wrapper<WorkflowType.AssetV1, { albumIds: string[] }>(({ config, data, functions }) => {
     if (config.albumIds.length === 0) {
-      if (!config.albumName) {
-        return {};
-      }
-
-      const [existing] = functions.searchAlbums({ name: config.albumName });
-      if (!existing) {
-        const created = functions.createAlbum({ albumName: config.albumName, assetIds: [assetId] });
-        config.albumIds.push(created.id);
-        return {};
-      }
-
-      config.albumIds.push(existing.id);
-    }
-
-    if (config.albumIds.length === 1) {
-      functions.addAssetsToAlbum(config.albumIds[0], [assetId]);
+      // noop
       return {};
     }
 
-    functions.addAssetsToAlbums({ albumIds: config.albumIds, assetIds: [assetId] });
+    if (config.albumIds.length === 1) {
+      functions.albumAddAssets(config.albumIds[0], [data.asset.id]);
+      return {};
+    }
+
+    functions.addAssetsToAlbums({ albumIds: config.albumIds, assetIds: [data.asset.id] });
     return {};
   });
 };

packages/plugin-sdk/package.json

@@ -2,6 +2,7 @@
   "name": "@immich/plugin-sdk",
   "version": "0.0.0",
   "description": "",
+  "main": "index.js",
   "type": "module",
   "exports": {
     "./host-functions": {
@@ -10,8 +11,7 @@
     },
     ".": {
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {

packages/plugin-sdk/src/enum.ts

@@ -0,0 +1,33 @@
+export enum WorkflowTrigger {
+  AssetCreate = 'AssetCreate',
+  PersonRecognized = 'PersonRecognized',
+}
+
+export enum WorkflowType {
+  AssetV1 = 'AssetV1',
+  AssetPersonV1 = 'AssetPersonV1',
+}
+
+export enum AssetType {
+  Image = 'IMAGE',
+  Video = 'VIDEO',
+  Audio = 'AUDIO',
+  Other = 'OTHER',
+}
+
+export enum AssetStatus {
+  Active = 'active',
+  Trashed = 'trashed',
+  Deleted = 'deleted',
+}
+
+export enum AssetVisibility {
+  Archive = 'archive',
+  Timeline = 'timeline',
+
+  /**
+   * Video part of the LivePhotos and MotionPhotos
+   */
+  Hidden = 'hidden',
+  Locked = 'locked',
+}

packages/plugin-sdk/src/host-functions.ts

@@ -1,26 +1,15 @@
-import {
-  getAllAlbums,
-  type AlbumResponseDto,
-  type BulkIdResponseDto,
-  type BulkIdsDto,
-  type CreateAlbumDto,
-} from '@immich/sdk';
+import { type BulkIdResponseDto, type BulkIdsDto } from '@immich/sdk';
 
 // keep in sync with plugin-core/src/index.d.ts';
 declare module 'extism:host' {
   interface user {
-    searchAlbums(ptr: PTR): I64;
-    createAlbum(ptr: PTR): I64;
-    addAssetsToAlbum(ptr: PTR): I64;
+    albumAddAssets(ptr: PTR): I64;
     addAssetsToAlbums(ptr: PTR): I64;
   }
 }
 
-type AlbumsToAssets = {
-  assetIds: string[];
-  albumIds: string[];
-};
-
+const host = Host.getFunctions();
+type HostFunctionName = keyof typeof host;
 type HostFunctionSuccessResult<T> = { success: true; response: T };
 type HostFunctionErrorResult = {
   success: false;
@@ -31,49 +20,39 @@ type HostFunctionResult<T> =
   | HostFunctionSuccessResult<T>
   | HostFunctionErrorResult;
 
-type QueryParams<T extends (...args: any) => any> = Parameters<T>[0];
-type AlbumSearchDto = QueryParams<typeof getAllAlbums>;
+const call = <T, R>(name: HostFunctionName, authToken: string, args: T) => {
+  const pointer1 = Memory.fromString(JSON.stringify({ authToken, args }));
+  const fn = host[name];
+  const handler = Memory.find(fn(pointer1.offset));
 
-export const hostFunctions = (authToken: string) => {
-  const host = Host.getFunctions();
-  type HostFunctionName = keyof typeof host;
+  try {
+    const result = JSON.parse(handler.readString()) as HostFunctionResult<R>;
 
-  const call = <T, R>(name: HostFunctionName, authToken: string, args: T) => {
-    const pointer1 = Memory.fromString(JSON.stringify({ authToken, args }));
-    const fn = host[name];
-    const handler = Memory.find(fn(pointer1.offset));
-
-    try {
-      const result = JSON.parse(handler.readString()) as HostFunctionResult<R>;
-
-      if (result.success) {
-        return result.response;
-      }
-
-      throw new Error(
-        `Failed to call host function "${String(name)}", received ${result.status} - ${JSON.stringify(result.message)}`,
-      );
-    } finally {
-      handler.free();
-      pointer1.free();
+    if (result.success) {
+      return result.response;
     }
-  };
 
-  return {
-    // album
-    searchAlbums: (dto: AlbumSearchDto) =>
-      call<[AlbumSearchDto], AlbumResponseDto[]>('searchAlbums', authToken, [
-        dto,
-      ]),
-    createAlbum: (dto: CreateAlbumDto) =>
-      call<[CreateAlbumDto], AlbumResponseDto>('createAlbum', authToken, [dto]),
-    addAssetsToAlbum: (albumId: string, assetIds: string[]) =>
-      call<[string, BulkIdsDto], BulkIdResponseDto[]>(
-        'addAssetsToAlbum',
-        authToken,
-        [albumId, { ids: assetIds }],
-      ),
-    addAssetsToAlbums: ({ assetIds, albumIds }: AlbumsToAssets) =>
-      call('addAssetsToAlbums', authToken, [{ albumIds, assetIds }]),
-  };
+    throw new Error(
+      `Failed to call host function "${String(name)}", received ${result.status} - ${JSON.stringify(result.message)}`,
+    );
+  } finally {
+    handler.free();
+    pointer1.free();
+  }
 };
+
+type AlbumsToAssets = {
+  assetIds: string[];
+  albumIds: string[];
+};
+
+export const hostFunctions = (authToken: string) => ({
+  albumAddAssets: (albumId: string, assetIds: string[]) =>
+    call<[string, BulkIdsDto], BulkIdResponseDto[]>(
+      'albumAddAssets',
+      authToken,
+      [albumId, { ids: assetIds }],
+    ),
+  addAssetsToAlbums: ({ assetIds, albumIds }: AlbumsToAssets) =>
+    call('addAssetsToAlbums', authToken, [{ albumIds, assetIds }]),
+});

packages/plugin-sdk/src/index.ts

@@ -1,3 +1,4 @@
+export * from 'src/enum.js';
 export * from 'src/host-functions.js';
 export * from 'src/sdk.js';
 export * from 'src/types.js';

packages/plugin-sdk/src/sdk.ts

@@ -1,10 +1,9 @@
-import type { WorkflowType } from '@immich/sdk';
+import type { WorkflowType } from 'src/enum.js';
 import { hostFunctions } from 'src/host-functions.js';
 import type {
   ConfigValue,
   WorkflowEventPayload,
   WorkflowResponse,
-  WorkflowStepConfig,
 } from 'src/types.js';
 
 export const wrapper = <
@@ -20,28 +19,19 @@ export const wrapper = <
   const input = Host.inputString();
 
   try {
-    const payload = JSON.parse(input) as WorkflowEventPayload<T, TConfig>;
-    const event = {
-      ...payload,
-      functions: hostFunctions(payload.workflow.authToken),
-    };
-
-    const eventConfigBefore = JSON.stringify(event.config);
+    const event = JSON.parse(input) as WorkflowEventPayload<T, TConfig>;
+    // const debug = event.workflow.debug ?? false;
 
     console.debug(
-      `Inputs: trigger=${event.trigger}, event=${event.type}, config=${eventConfigBefore}`,
+      `Inputs: trigger=${event.trigger}, event=${event.type}, config=${JSON.stringify(event.config)}`,
     );
 
-    const response = fn(event) ?? {};
-
-    // if config changed, notify host
-    const eventConfigAfter = JSON.stringify(event.config);
-    if (!response.config && eventConfigBefore !== eventConfigAfter) {
-      response.config = event.config as WorkflowStepConfig;
-    }
+    const response =
+      fn({ ...event, functions: hostFunctions(event.workflow.authToken) }) ??
+      {};
 
     console.debug(
-      `Outputs: workflow=${JSON.stringify(response.workflow)}, changes=${JSON.stringify(response.changes)}, data=${JSON.stringify(response.data)}, config=${JSON.stringify(response.config)}`,
+      `Outputs: workflow=${JSON.stringify(response.workflow)}, changes=${JSON.stringify(response.changes)}, data=${JSON.stringify(response.data)}`,
     );
 
     const output = JSON.stringify(response);

packages/plugin-sdk/src/types.ts

@@ -1,4 +1,10 @@
-import type { AssetTypeEnum, AssetVisibility, WorkflowType } from '@immich/sdk';
+import type {
+  AssetStatus,
+  AssetType,
+  AssetVisibility,
+  WorkflowTrigger,
+  WorkflowType,
+} from 'src/enum.js';
 
 type DeepPartial<T> = T extends Date
   ? T
@@ -15,12 +21,6 @@ export type WorkflowEventMap = {
 
 export type WorkflowEventData<T extends WorkflowType> = WorkflowEventMap[T];
 
-export enum WorkflowTrigger {
-  AssetCreate = 'AssetCreate',
-  AssetMetadataExtraction = 'AssetMetadataExtraction',
-  PersonRecognized = 'PersonRecognized',
-}
-
 export type WorkflowEventPayload<
   T extends WorkflowType = WorkflowType,
   TConfig = WorkflowStepConfig,
@@ -48,8 +48,6 @@ export type WorkflowResponse<T extends WorkflowType = WorkflowType> = {
   changes?: WorkflowChanges<T>;
   /** data to be passed to the next workflow step */
   data?: Record<string, unknown>;
-  /** update step config */
-  config?: WorkflowStepConfig;
 };
 
 export type WorkflowStepConfig = {
@@ -68,7 +66,7 @@ export type AssetV1 = {
   asset: {
     id: string;
     ownerId: string;
-    type: AssetTypeEnum;
+    type: AssetType;
     originalPath: string;
     fileCreatedAt: string;
     fileModifiedAt: string;
@@ -85,6 +83,7 @@ export type AssetV1 = {
     localDateTime: string;
     stackId: string | null;
     duplicateId: string | null;
+    status: AssetStatus;
     visibility: AssetVisibility;
     isEdited: boolean;
     exifInfo: {

packages/sdk/src/fetch-client.ts

@@ -7081,7 +7081,6 @@ export enum WorkflowType {
 }
 export enum WorkflowTrigger {
     AssetCreate = "AssetCreate",
-    AssetMetadataExtraction = "AssetMetadataExtraction",
     PersonRecognized = "PersonRecognized"
 }
 export enum QueueJobStatus {

pnpm-lock.yaml

@@ -320,9 +320,6 @@ importers:
       '@immich/plugin-sdk':
         specifier: workspace:*
         version: link:../plugin-sdk
-      '@immich/sdk':
-        specifier: workspace:*
-        version: link:../sdk
       esbuild:
         specifier: ^0.28.0
         version: 0.28.0

server/src/controllers/workflow.controller.spec.ts

@@ -1,5 +1,5 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import { WorkflowController } from 'src/controllers/workflow.controller';
+import { WorkflowTrigger } from 'src/enum';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { WorkflowService } from 'src/services/workflow.service';
 import request from 'supertest';

server/src/dtos/plugin.dto.ts

@@ -1,7 +1,6 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import { createZodDto } from 'nestjs-zod';
 import { JsonSchemaDto } from 'src/dtos/json-schema.dto';
-import { WorkflowTriggerSchema, WorkflowType, WorkflowTypeSchema } from 'src/enum';
+import { WorkflowTrigger, WorkflowTriggerSchema, WorkflowType, WorkflowTypeSchema } from 'src/enum';
 import { asPluginKey } from 'src/utils/workflow';
 import z from 'zod';
 

server/src/dtos/workflow.dto.ts

@@ -1,6 +1,6 @@
-import type { WorkflowStepConfig, WorkflowTrigger } from '@immich/plugin-sdk';
+import type { WorkflowStepConfig } from '@immich/plugin-sdk';
 import { createZodDto } from 'nestjs-zod';
-import { WorkflowTriggerSchema, WorkflowTypeSchema } from 'src/enum';
+import { WorkflowTrigger, WorkflowTriggerSchema, WorkflowTypeSchema } from 'src/enum';
 import z from 'zod';
 
 const WorkflowTriggerResponseSchema = z

server/src/enum.ts

@@ -1,4 +1,3 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import z from 'zod';
 
 export enum AuthType {
@@ -1165,6 +1164,11 @@ export enum PluginContext {
 
 export const PluginContextSchema = z.enum(PluginContext).describe('Plugin context').meta({ id: 'PluginContextType' });
 
+export enum WorkflowTrigger {
+  AssetCreate = 'AssetCreate',
+  PersonRecognized = 'PersonRecognized',
+}
+
 export const WorkflowTriggerSchema = z
   .enum(WorkflowTrigger)
   .describe('Plugin trigger type')

server/src/repositories/workflow.repository.ts

@@ -103,10 +103,6 @@ export class WorkflowRepository {
     });
   }
 
-  async updateStep(id: string, dto: Updateable<WorkflowStepTable>) {
-    await this.db.updateTable('workflow_step').where('workflow_step.id', '=', id).set(dto).execute();
-  }
-
   private async replaceAndReturn(tx: Kysely<DB>, workflowId: string, steps?: WorkflowStepUpsert[]) {
     if (steps) {
       await tx.deleteFrom('workflow_step').where('workflowId', '=', workflowId).execute();

server/src/schema/tables/workflow.table.ts

@@ -1,4 +1,3 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import {
   Column,
   CreateDateColumn,
@@ -10,6 +9,7 @@ import {
   UpdateDateColumn,
 } from '@immich/sql-tools';
 import { UpdatedAtTrigger, UpdateIdColumn } from 'src/decorators';
+import { WorkflowTrigger } from 'src/enum';
 import { UserTable } from 'src/schema/tables/user.table';
 
 @Table('workflow')

server/src/services/workflow-execution.service.ts

@@ -1,15 +1,9 @@
 import { CurrentPlugin } from '@extism/extism';
-import {
-  WorkflowChanges,
-  WorkflowEventData,
-  WorkflowEventPayload,
-  WorkflowResponse,
-  WorkflowTrigger,
-} from '@immich/plugin-sdk';
+import { WorkflowChanges, WorkflowEventData, WorkflowEventPayload, WorkflowResponse } from '@immich/plugin-sdk';
 import { HttpException, UnauthorizedException } from '@nestjs/common';
 import { join } from 'node:path';
 import { DummyValue, OnEvent, OnJob } from 'src/decorators';
-import { AlbumsAddAssetsDto, CreateAlbumDto, GetAlbumsDto } from 'src/dtos/album.dto';
+import { AlbumsAddAssetsDto } from 'src/dtos/album.dto';
 import { BulkIdsDto } from 'src/dtos/asset-ids.response.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
 import { PluginManifestDto } from 'src/dtos/plugin-manifest.dto';
@@ -21,6 +15,7 @@ import {
   JobName,
   JobStatus,
   QueueName,
+  WorkflowTrigger,
   WorkflowType,
 } from 'src/enum';
 import { ArgOf } from 'src/repositories/event.repository';
@@ -66,9 +61,7 @@ export class WorkflowExecutionService extends BaseService {
 
     const albumService = BaseService.create(AlbumService, this);
 
-    const searchAlbums = this.wrap<[dto: GetAlbumsDto]>((authDto, args) => albumService.getAll(authDto, ...args));
-    const createAlbum = this.wrap<[dto: CreateAlbumDto]>((authDto, args) => albumService.create(authDto, ...args));
-    const addAssetsToAlbum = this.wrap<[id: string, dto: BulkIdsDto]>((authDto, args) =>
+    const albumAddAssets = this.wrap<[id: string, dto: BulkIdsDto]>((authDto, args) =>
       albumService.addAssets(authDto, ...args),
     );
     const addAssetsToAlbums = this.wrap<[dto: AlbumsAddAssetsDto]>((authDto, args) =>
@@ -76,16 +69,12 @@ export class WorkflowExecutionService extends BaseService {
     );
 
     const functions = {
-      searchAlbums,
-      createAlbum,
-      addAssetsToAlbum,
+      albumAddAssets,
       addAssetsToAlbums,
     };
 
-    const stubs: typeof functions = {
-      searchAlbums: dummy,
-      createAlbum: dummy,
-      addAssetsToAlbum: dummy,
+    const stubs = {
+      albumAddAssets: dummy,
       addAssetsToAlbums: dummy,
     };
 
@@ -263,17 +252,6 @@ export class WorkflowExecutionService extends BaseService {
     return this.onAssetTrigger({ userId, assetId, trigger: WorkflowTrigger.AssetCreate });
   }
 
-  @OnEvent({ name: 'AssetMetadataExtracted' })
-  onAssetMetadataExtracted({ userId, assetId, source }: ArgOf<'AssetMetadataExtracted'>) {
-    // prevent loops
-    // TODO loop detection in job service directly
-    if (source === 'sidecar-write') {
-      return;
-    }
-
-    return this.onAssetTrigger({ userId, assetId, trigger: WorkflowTrigger.AssetMetadataExtraction });
-  }
-
   private async onAssetTrigger({ userId, assetId, trigger }: AssetTrigger) {
     const items = await this.workflowRepository.search({ userId, trigger });
     await this.jobRepository.queueAll(
@@ -308,25 +286,6 @@ export class WorkflowExecutionService extends BaseService {
               await assetService.update(auth, assetId, {
                 isFavorite: asset.isFavorite,
                 visibility: asset.visibility,
-                dateTimeOriginal: asset.exifInfo?.dateTimeOriginal ?? undefined,
-                // TODO allow setting to null
-                longitude: asset.exifInfo?.longitude ?? undefined,
-                // TODO allow setting to null
-                latitude: asset.exifInfo?.latitude ?? undefined,
-                // TODO allow setting to null
-                description: asset.exifInfo?.description ?? undefined,
-                rating: asset.exifInfo?.rating,
-
-                // TODO add to update dto
-                // make: asset.exifInfo?.make,
-                // model: asset.exifInfo?.model,
-                // city: asset.exifInfo?.city,
-                // state: asset.exifInfo?.state,
-                // country: asset.exifInfo?.country,
-                // lensModel: asset.exifInfo?.lensModel,
-                // fNumber: asset.exifInfo?.fNumber,
-                // fps: asset.exifInfo?.fps,
-                // iso: asset.exifInfo?.iso,
               });
             },
           } satisfies ExecuteOptions<typeof type>;
@@ -408,10 +367,6 @@ export class WorkflowExecutionService extends BaseService {
           ({ data } = await read(type));
         }
 
-        if (result?.config) {
-          await this.workflowRepository.updateStep(step.id, { config: result.config });
-        }
-
         const shouldContinue = result?.workflow?.continue ?? true;
         if (!shouldContinue) {
           break;

server/src/services/workflow.service.ts

@@ -1,4 +1,4 @@
-import { WorkflowStepConfig, WorkflowTrigger } from '@immich/plugin-sdk';
+import { WorkflowStepConfig } from '@immich/plugin-sdk';
 import { BadRequestException, Injectable } from '@nestjs/common';
 import { AuthDto } from 'src/dtos/auth.dto';
 import {
@@ -11,7 +11,7 @@ import {
   WorkflowTriggerResponseDto,
   WorkflowUpdateDto,
 } from 'src/dtos/workflow.dto';
-import { Permission } from 'src/enum';
+import { Permission, WorkflowTrigger } from 'src/enum';
 import { PluginMethodSearchResponse } from 'src/repositories/plugin.repository';
 import { BaseService } from 'src/services/base.service';
 import { getWorkflowTriggers, isMethodCompatible, resolveMethod } from 'src/utils/workflow';

server/src/types.ts

@@ -1,4 +1,3 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import { ShallowDehydrateObject } from 'kysely';
 import { SystemConfig } from 'src/config';
 import { VECTOR_EXTENSIONS } from 'src/constants';
@@ -30,6 +29,7 @@ import {
   TranscodeTarget,
   UserMetadataKey,
   VideoCodec,
+  WorkflowTrigger,
   WorkflowType,
 } from 'src/enum';
 

server/src/utils/workflow.spec.ts

@@ -1,5 +1,4 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
-import { WorkflowType } from 'src/enum';
+import { WorkflowTrigger, WorkflowType } from 'src/enum';
 import { isMethodCompatible } from 'src/utils/workflow';
 
 const tests: Array<{ trigger: WorkflowTrigger; types: WorkflowType[]; expected: boolean }> = [

server/src/utils/workflow.ts

@@ -1,11 +1,9 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
-import { WorkflowType } from 'src/enum';
+import { WorkflowTrigger, WorkflowType } from 'src/enum';
 import { PluginMethodSearchResponse } from 'src/repositories/plugin.repository';
 
 export const triggerMap: Record<WorkflowTrigger, WorkflowType[]> = {
   [WorkflowTrigger.AssetCreate]: [WorkflowType.AssetV1],
   [WorkflowTrigger.PersonRecognized]: [WorkflowType.AssetPersonV1],
-  [WorkflowTrigger.AssetMetadataExtraction]: [WorkflowType.AssetV1],
 };
 
 export const getWorkflowTriggers = () =>

server/test/medium/specs/services/workflow.service.spec.ts

@@ -1,6 +1,5 @@
-import { WorkflowTrigger } from '@immich/plugin-sdk';
 import { Kysely } from 'kysely';
-import { WorkflowType } from 'src/enum';
+import { WorkflowTrigger, WorkflowType } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { PluginRepository } from 'src/repositories/plugin.repository';

server/test/medium/specs/workflow/workflow-core-plugin.spec.ts

@@ -1,8 +1,8 @@
-import { WorkflowStepConfig, WorkflowTrigger } from '@immich/plugin-sdk';
+import { WorkflowStepConfig } from '@immich/plugin-sdk';
 import { Kysely } from 'kysely';
 import { readFileSync } from 'node:fs';
 import { PluginManifestDto } from 'src/dtos/plugin-manifest.dto';
-import { AssetVisibility, LogLevel } from 'src/enum';
+import { AssetVisibility, LogLevel, WorkflowTrigger } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { AlbumRepository } from 'src/repositories/album.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
@@ -12,7 +12,6 @@ import { DatabaseRepository } from 'src/repositories/database.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { PluginRepository } from 'src/repositories/plugin.repository';
 import { StorageRepository } from 'src/repositories/storage.repository';
-import { UserRepository } from 'src/repositories/user.repository';
 import { WorkflowRepository } from 'src/repositories/workflow.repository';
 import { DB } from 'src/schema';
 import { WorkflowExecutionService } from 'src/services/workflow-execution.service';
@@ -34,9 +33,8 @@ class WorkflowTestContext extends MediumTestContext<WorkflowExecutionService> {
         CryptoRepository,
         DatabaseRepository,
         LoggingRepository,
-        PluginRepository,
         StorageRepository,
-        UserRepository,
+        PluginRepository,
         WorkflowRepository,
       ],
       mock: [ConfigRepository],
@@ -233,52 +231,6 @@ describe('core plugin', () => {
   });
 
   describe('assetAddToAlbums', () => {
-    it('should create an album by name', async () => {
-      const { user } = await ctx.newUser();
-      const { asset } = await ctx.newAsset({ ownerId: user.id, isFavorite: true });
-
-      const workflow = await createWorkflow({
-        ownerId: user.id,
-        trigger: WorkflowTrigger.AssetCreate,
-        steps: [{ method: 'immich-plugin-core#assetAddToAlbums', config: { albumIds: [], albumName: 'Screenshots' } }],
-      });
-
-      await expect(ctx.sut.handleAssetTrigger({ workflowId: workflow.id, assetId: asset.id })).resolves.toBeUndefined();
-
-      const albums = await ctx.get(AlbumRepository).getAll(user.id);
-      expect(albums).toHaveLength(1);
-
-      const album = albums[0]!;
-      expect(album.albumName).toEqual('Screenshots');
-
-      const updated = await ctx.get(WorkflowRepository).get(workflow.id);
-      expect(updated?.steps[0].config).toEqual({ albumIds: [album.id], albumName: 'Screenshots' });
-
-      await expect(ctx.get(AlbumRepository).getAssetIds(album.id, [asset.id])).resolves.toContain(asset.id);
-    });
-
-    it('should not use the name when there is an albumId', async () => {
-      const { user } = await ctx.newUser();
-      const { asset } = await ctx.newAsset({ ownerId: user.id, isFavorite: true });
-      const { album } = await ctx.newAlbum({ ownerId: user.id });
-
-      const workflow = await createWorkflow({
-        ownerId: user.id,
-        trigger: WorkflowTrigger.AssetCreate,
-        steps: [
-          { method: 'immich-plugin-core#assetAddToAlbums', config: { albumIds: [album.id], albumName: 'Screenshots' } },
-        ],
-      });
-
-      const albums = await ctx.get(AlbumRepository).getAll(user.id);
-      expect(albums).toHaveLength(1);
-      expect(albums[0].albumName).toEqual(album.albumName);
-
-      await expect(ctx.sut.handleAssetTrigger({ workflowId: workflow.id, assetId: asset.id })).resolves.toBeUndefined();
-
-      await expect(ctx.get(AlbumRepository).getAssetIds(album.id, [asset.id])).resolves.toContain(asset.id);
-    });
-
     it('should add an asset to an album', async () => {
       const { user } = await ctx.newUser();
       const { asset } = await ctx.newAsset({ ownerId: user.id, isFavorite: true });

web/src/lib/components/album-page/AlbumThumbnail.svelte

@@ -2,7 +2,7 @@
   import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getAlbumInfo } from '@immich/sdk';
-  import { IconButton, Text, LoadingSpinner } from '@immich/ui';
+  import { IconButton, LoadingSpinner } from '@immich/ui';
   import { mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -46,22 +46,5 @@
         />
       </div>
     </div>
-  {:catch}
-    <div class="flex justify-between gap-2">
-      <div class="flex flex-col gap-1">
-        <Text>{$t('unknown')}</Text>
-        <Text color="muted" size="small" variant="italic">{albumId}</Text>
-      </div>
-      <div class="">
-        <IconButton
-          icon={mdiTrashCanOutline}
-          shape="round"
-          color="danger"
-          variant="ghost"
-          onclick={onDelete}
-          aria-label={$t('remove')}
-        />
-      </div>
-    </div>
   {/await}
 </div>

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte

@@ -1,25 +1,5 @@
-<script module lang="ts">
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { getAlbumInfo } from '@immich/sdk';
-
-  // eslint-disable-next-line svelte/prefer-svelte-reactivity
-  const albumNameCache = new Map<string, Promise<string>>();
-
-  const getAlbumName = (id: string): Promise<string> => {
-    let albumName = albumNameCache.get(id);
-    if (!albumName) {
-      albumName = getAlbumInfo({ ...authManager.params, id })
-        .then((album) => album.albumName)
-        .catch(() => id);
-      albumNameCache.set(id, albumName);
-    }
-    return albumName;
-  };
-</script>
-
 <script lang="ts">
   import { pluginManager } from '$lib/managers/plugin-manager.svelte';
-  import type { JSONSchemaProperty } from '$lib/types';
   import type { WorkflowStepDto } from '@immich/sdk';
   import { Badge, Card, CardBody, CardDescription, CardHeader, CardTitle, Icon, IconButton } from '@immich/ui';
   import {
@@ -47,13 +27,9 @@
 
   const method = $derived(pluginManager.getMethod(step.method));
   const isFilter = $derived(method?.uiHints?.includes('Filter') ?? false);
-  const schema = $derived(method?.schema as JSONSchemaProperty | undefined);
   const configEntries = $derived(
     Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
   );
-
-  const getUiHint = (key: string) => schema?.properties?.[key]?.uiHint;
-  const toIds = (value: unknown): string[] => (Array.isArray(value) ? value.map(String) : [String(value)]);
   let dragImage = $state<Element>();
   let isDropTarget = $state(false);
   let hoverDrag = $state(false);
@@ -228,28 +204,15 @@
       {#if configEntries.length > 0}
         <CardBody class="py-3">
           <div class="flex flex-wrap items-center gap-1.5">
-            {#snippet badge(key: string, content: string)}
+            {#each configEntries as [key, value] (key)}
               <Badge
                 color={isFilter ? 'info' : 'warning'}
                 shape="round"
                 size="small"
                 class="border font-mono {isFilter ? 'border-primary-200' : 'border-warning-200'}"
               >
-                <span class="opacity-60">{key}</span>{content}
+                <span class="opacity-60">{key}</span>{formatConfigValue(value)}
               </Badge>
-            {/snippet}
-            {#each configEntries as [key, value] (key)}
-              {#if getUiHint(key) === 'AlbumId'}
-                {#each toIds(value) as albumId (albumId)}
-                  {#await getAlbumName(albumId)}
-                    {@render badge($t('album'), '…')}
-                  {:then albumName}
-                    {@render badge($t('album'), `"${truncate(albumName)}"`)}
-                  {/await}
-                {/each}
-              {:else}
-                {@render badge(key, formatConfigValue(value))}
-              {/if}
             {/each}
           </div>
         </CardBody>