@happyvertical/smrt-images 0.30.0

package/dist/svelte/components/ImageUploader.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ImageEditorClient, ImageLike, ImagesGalleryClient } from '../image-clients';
+type $$ComponentProps = {
+    apiBaseUrl?: string;
+    editorClient?: ImageEditorClient;
+    galleryClient?: ImagesGalleryClient;
+    /** @required Callback when an image is selected */
+    onSelect: (image: ImageLike | File | string) => void;
+    onCancel?: () => void;
+    allowedTabs?: ('gallery' | 'upload' | 'camera' | 'external')[];
+    enableDragToEditor?: boolean;
+};
+declare const ImageUploader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUploader = ReturnType<typeof ImageUploader>;
+export default ImageUploader;
+//# sourceMappingURL=ImageUploader.svelte.d.ts.map

package/dist/svelte/components/ImageUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageUploader.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAGzB,KAAK,gBAAgB,GAAI;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC,EAAE,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAqYF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/i18n.d.ts

@@ -0,0 +1,42 @@
+export declare const M: {
+    readonly 'images.assets_gallery.title': "images.assets_gallery.title";
+    readonly 'images.assets_gallery.search_placeholder': "images.assets_gallery.search_placeholder";
+    readonly 'images.assets_gallery.any_orientation': "images.assets_gallery.any_orientation";
+    readonly 'images.assets_gallery.min_width_placeholder': "images.assets_gallery.min_width_placeholder";
+    readonly 'images.assets_gallery.min_height_placeholder': "images.assets_gallery.min_height_placeholder";
+    readonly 'images.assets_gallery.no_images_found': "images.assets_gallery.no_images_found";
+    readonly 'images.image_editor.title': "images.image_editor.title";
+    readonly 'images.image_editor.no_image_selected': "images.image_editor.no_image_selected";
+    readonly 'images.image_editor.standard_tools': "images.image_editor.standard_tools";
+    readonly 'images.image_editor.ai_edit': "images.image_editor.ai_edit";
+    readonly 'images.image_editor.apply_resize': "images.image_editor.apply_resize";
+    readonly 'images.image_editor.reset_dimensions': "images.image_editor.reset_dimensions";
+    readonly 'images.image_editor.apply_crop': "images.image_editor.apply_crop";
+    readonly 'images.image_editor.convert_format': "images.image_editor.convert_format";
+    readonly 'images.image_editor.ai_powered_edit': "images.image_editor.ai_powered_edit";
+    readonly 'images.image_editor.ai_powered_edit_hint': "images.image_editor.ai_powered_edit_hint";
+    readonly 'images.image_editor.ai_prompt_placeholder': "images.image_editor.ai_prompt_placeholder";
+    readonly 'images.image_uploader.select_image': "images.image_uploader.select_image";
+    readonly 'images.image_uploader.create_variation': "images.image_uploader.create_variation";
+    readonly 'images.image_uploader.variation_hint': "images.image_uploader.variation_hint";
+    readonly 'images.image_uploader.variation_prompt_placeholder': "images.image_uploader.variation_prompt_placeholder";
+    readonly 'images.image_uploader.generating': "images.image_uploader.generating";
+    readonly 'images.image_uploader.generate_variation': "images.image_uploader.generate_variation";
+    readonly 'images.image_uploader.choose_image': "images.image_uploader.choose_image";
+    readonly 'images.image_uploader.external_url': "images.image_uploader.external_url";
+    readonly 'images.image_uploader.drag_and_drop': "images.image_uploader.drag_and_drop";
+    readonly 'images.image_uploader.browse_files': "images.image_uploader.browse_files";
+    readonly 'images.image_uploader.try_again': "images.image_uploader.try_again";
+    readonly 'images.image_uploader.starting_camera': "images.image_uploader.starting_camera";
+    readonly 'images.image_uploader.take_picture': "images.image_uploader.take_picture";
+    readonly 'images.image_uploader.external_hint': "images.image_uploader.external_hint";
+    readonly 'images.image_uploader.external_url_placeholder': "images.image_uploader.external_url_placeholder";
+    readonly 'images.image_studio_route.eyebrow': "images.image_studio_route.eyebrow";
+    readonly 'images.image_studio_route.title': "images.image_studio_route.title";
+    readonly 'images.image_studio_route.lede': "images.image_studio_route.lede";
+    readonly 'images.image_studio_route.acquire_images': "images.image_studio_route.acquire_images";
+    readonly 'images.image_studio_route.acquire_images_description': "images.image_studio_route.acquire_images_description";
+    readonly 'images.image_studio_route.browse_and_edit': "images.image_studio_route.browse_and_edit";
+    readonly 'images.image_studio_route.browse_and_edit_description': "images.image_studio_route.browse_and_edit_description";
+};
+//# sourceMappingURL=i18n.d.ts.map

package/dist/svelte/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DZ,CAAC"}

package/dist/svelte/i18n.js

@@ -0,0 +1,46 @@
+import { defineMessages } from '@happyvertical/smrt-ui/i18n';
+export const M = defineMessages({
+    // AssetsGallery
+    'images.assets_gallery.title': 'Asset Gallery',
+    'images.assets_gallery.search_placeholder': 'Search images (name, alt text)...',
+    'images.assets_gallery.any_orientation': 'Any Orientation',
+    'images.assets_gallery.min_width_placeholder': 'Min Width (px)',
+    'images.assets_gallery.min_height_placeholder': 'Min Height (px)',
+    'images.assets_gallery.no_images_found': 'No images found matching your criteria.',
+    // ImageEditor
+    'images.image_editor.title': 'Image Editor',
+    'images.image_editor.no_image_selected': 'No image selected for editing.',
+    'images.image_editor.standard_tools': 'Standard Tools',
+    'images.image_editor.ai_edit': 'AI Edit',
+    'images.image_editor.apply_resize': 'Apply Resize',
+    'images.image_editor.reset_dimensions': 'Reset Dimensions',
+    'images.image_editor.apply_crop': 'Apply Crop',
+    'images.image_editor.convert_format': 'Convert Format',
+    'images.image_editor.ai_powered_edit': 'AI Powered Edit',
+    'images.image_editor.ai_powered_edit_hint': 'Describe how you want to change this image. A new derivative asset will be created.',
+    'images.image_editor.ai_prompt_placeholder': 'e.g. Change the background to a sunset...',
+    // ImageUploader
+    'images.image_uploader.select_image': 'Select Image',
+    'images.image_uploader.create_variation': 'Create Variation',
+    'images.image_uploader.variation_hint': 'Describe how this image should be changed. A new derivative will be created from the original.',
+    'images.image_uploader.variation_prompt_placeholder': 'e.g. Change the sky to show heavy rain and overcast clouds...',
+    'images.image_uploader.generating': 'Generating…',
+    'images.image_uploader.generate_variation': 'Generate Variation',
+    'images.image_uploader.choose_image': 'Choose Image',
+    'images.image_uploader.external_url': 'External URL',
+    'images.image_uploader.drag_and_drop': 'Drag and drop an image here',
+    'images.image_uploader.browse_files': 'Browse Files',
+    'images.image_uploader.try_again': 'Try Again',
+    'images.image_uploader.starting_camera': 'Starting camera...',
+    'images.image_uploader.take_picture': 'Take Picture',
+    'images.image_uploader.external_hint': 'Enter a direct URL to an image or a supported provider link.',
+    'images.image_uploader.external_url_placeholder': 'https://example.com/image.jpg',
+    // ImageStudioRoute (route)
+    'images.image_studio_route.eyebrow': 'Package Route Surface',
+    'images.image_studio_route.title': 'Image Studio',
+    'images.image_studio_route.lede': 'A package-owned route for acquiring images, browsing stored assets, and moving directly into the editor workflow.',
+    'images.image_studio_route.acquire_images': 'Acquire Images',
+    'images.image_studio_route.acquire_images_description': 'Use the uploader to test gallery selection, local uploads, camera capture, and external URLs from the same package surface downstream apps can mount.',
+    'images.image_studio_route.browse_and_edit': 'Browse And Edit',
+    'images.image_studio_route.browse_and_edit_description': 'The gallery and editor stay wired together so route consumers can see the intended package flow instead of disconnected component snapshots.',
+});

package/dist/svelte/image-clients.d.ts

@@ -0,0 +1,45 @@
+import type { Image } from '../image';
+export type ImageLike = Omit<Pick<Image, 'id' | 'name' | 'sourceUri' | 'mimeType' | 'description' | 'width' | 'height' | 'alt'>, 'id'> & {
+    id: string;
+    url?: string;
+};
+export interface ImagesGalleryQuery {
+    limit: number;
+    offset: number;
+    q?: string;
+    orientation?: 'landscape' | 'portrait' | 'square';
+    minWidth?: number;
+    minHeight?: number;
+}
+export interface ImagesGalleryResult {
+    items: ImageLike[];
+}
+export interface ImagesGalleryClient {
+    list(query: ImagesGalleryQuery): Promise<ImagesGalleryResult>;
+}
+export interface ImageResizeRequest {
+    width: number;
+    height: number;
+}
+export interface ImageCropRequest {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface ImageConvertRequest {
+    format: string;
+}
+export interface ImageEditRequest {
+    prompt: string;
+}
+export interface ImageEditorResult {
+    image: ImageLike;
+}
+export interface ImageEditorClient {
+    resize(id: string, payload: ImageResizeRequest): Promise<ImageEditorResult>;
+    crop(id: string, payload: ImageCropRequest): Promise<ImageEditorResult>;
+    convert(id: string, payload: ImageConvertRequest): Promise<ImageEditorResult>;
+    edit(id: string, payload: ImageEditRequest): Promise<ImageEditorResult>;
+}
+//# sourceMappingURL=image-clients.d.ts.map

package/dist/svelte/image-clients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-clients.d.ts","sourceRoot":"","sources":["../../src/svelte/image-clients.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,IAAI,CACF,KAAK,EACH,IAAI,GACJ,MAAM,GACN,WAAW,GACX,UAAU,GACV,aAAa,GACb,OAAO,GACP,QAAQ,GACR,KAAK,CACR,EACD,IAAI,CACL,GAAG;IACF,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC/D;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5E,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9E,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzE"}

package/dist/svelte/image-clients.js

@@ -0,0 +1 @@
+export {};

package/dist/svelte/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Images Module Svelte Components
+ *
+ * Optional Svelte UI components for image gallery, editing, and upload.
+ * Auto-registers components with ModuleUIRegistry on import.
+ *
+ * @packageDocumentation
+ */
+import AssetsGallery from './components/AssetsGallery.svelte';
+import ImageEditor from './components/ImageEditor.svelte';
+import ImageUploader from './components/ImageUploader.svelte';
+export { AssetsGallery, ImageEditor, ImageUploader };
+export type { ImageConvertRequest, ImageCropRequest, ImageEditorClient, ImageEditorResult, ImageEditRequest, ImageLike, ImageResizeRequest, ImagesGalleryClient, ImagesGalleryQuery, ImagesGalleryResult, } from './image-clients';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAC1D,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AAErD,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,21 @@
+/**
+ * Images Module Svelte Components
+ *
+ * Optional Svelte UI components for image gallery, editing, and upload.
+ * Auto-registers components with ModuleUIRegistry on import.
+ *
+ * @packageDocumentation
+ */
+import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
+import { IMAGES_MODULE_META } from '../ui.js';
+// Import components
+import AssetsGallery from './components/AssetsGallery.svelte';
+import ImageEditor from './components/ImageEditor.svelte';
+import ImageUploader from './components/ImageUploader.svelte';
+// Export components
+export { AssetsGallery, ImageEditor, ImageUploader };
+// Auto-register with ModuleUIRegistry
+ModuleUIRegistry.registerModule(IMAGES_MODULE_META);
+ModuleUIRegistry.register('@happyvertical/smrt-images', 'assets-gallery', AssetsGallery);
+ModuleUIRegistry.register('@happyvertical/smrt-images', 'image-editor', ImageEditor);
+ModuleUIRegistry.register('@happyvertical/smrt-images', 'image-uploader', ImageUploader);

package/dist/svelte/playground.d.ts

@@ -0,0 +1,74 @@
+declare const _default: {
+    packageName: string;
+    displayName: string;
+    description: string;
+    entries: ({
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./components/ImageUploader.svelte")>;
+        order: number;
+        tags: string[];
+        props: {
+            allowedTabs: string[];
+            onSelect: () => undefined;
+            image?: undefined;
+            onSave?: undefined;
+        };
+        modes: {
+            mock: {
+                label: string;
+            };
+            live?: undefined;
+        };
+    } | {
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./components/ImageEditor.svelte")>;
+        order: number;
+        tags: string[];
+        props: {
+            image: {
+                id: string;
+                name: string;
+                description: string;
+                sourceUri: string;
+                url: string;
+                mimeType: string;
+                width: number;
+                height: number;
+                alt: string;
+            };
+            onSave: () => undefined;
+            allowedTabs?: undefined;
+            onSelect?: undefined;
+        };
+        modes: {
+            mock: {
+                label: string;
+            };
+            live?: undefined;
+        };
+    } | {
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./routes/ImageStudioRoute.svelte")>;
+        order: number;
+        tags: string[];
+        modes: {
+            live: {
+                label: string;
+                description: string;
+                props: {
+                    apiBaseUrl: string;
+                };
+            };
+            mock?: undefined;
+        };
+        props?: undefined;
+    })[];
+};
+export default _default;
+//# sourceMappingURL=playground.d.ts.map

package/dist/svelte/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,wBA6DE"}

package/dist/svelte/playground.js

@@ -0,0 +1,105 @@
+import { IMAGES_ROUTE_META } from './routes/shared.js';
+const DEFAULT_IMAGES_PLAYGROUND_API_BASE_URL = '/api/v1';
+function resolveImagesPlaygroundApiBaseUrl() {
+    const configuredViaGlobal = globalThis
+        .__SMRT_IMAGES_PLAYGROUND_API_BASE_URL__;
+    if (configuredViaGlobal) {
+        return configuredViaGlobal;
+    }
+    const browserLocation = globalThis.location;
+    if (browserLocation) {
+        const configuredViaQuery = new URLSearchParams(browserLocation.search).get('smrtImagesApiBaseUrl');
+        if (configuredViaQuery) {
+            return configuredViaQuery;
+        }
+    }
+    return DEFAULT_IMAGES_PLAYGROUND_API_BASE_URL;
+}
+function createPreviewImageUri(label, accent) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
+    <defs>
+      <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="100%">
+        <stop offset="0%" stop-color="${accent}" />
+        <stop offset="100%" stop-color="#111827" />
+      </linearGradient>
+    </defs>
+    <rect width="1280" height="720" fill="url(#bg)" rx="40" />
+    <circle cx="1040" cy="170" r="92" fill="rgba(255,255,255,0.18)" />
+    <path d="M110 590L360 320l182 170 146-104 210 204H110z" fill="rgba(255,255,255,0.22)" />
+    <text x="92" y="118" fill="#f8fafc" font-size="60" font-family="Arial, sans-serif" font-weight="700">${label}</text>
+    <text x="92" y="662" fill="#dbeafe" font-size="30" font-family="Arial, sans-serif">SMRT Images preview</text>
+  </svg>`;
+    return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+}
+const sampleImage = {
+    id: 'image-harbor-dusk',
+    name: 'Harbor Dusk',
+    description: 'Wide editorial frame used for feature headers.',
+    sourceUri: createPreviewImageUri('Harbor Dusk', '#2563eb'),
+    url: createPreviewImageUri('Harbor Dusk', '#2563eb'),
+    mimeType: 'image/jpeg',
+    width: 1280,
+    height: 720,
+    alt: 'Cargo cranes and harbor lights reflected at dusk.',
+};
+const loadImageEditor = () => import('./components/ImageEditor.svelte');
+const loadImageStudioRoute = () => import('./routes/ImageStudioRoute.svelte');
+const loadImageUploader = () => import('./components/ImageUploader.svelte');
+export default {
+    packageName: '@happyvertical/smrt-images',
+    displayName: 'Images',
+    description: IMAGES_ROUTE_META.studio.description,
+    entries: [
+        {
+            id: 'image-uploader',
+            title: 'Image Uploader',
+            description: 'Mock-safe uploader preview for local files and external image URLs.',
+            loadComponent: loadImageUploader,
+            order: 1,
+            tags: ['uploader', 'images', 'media'],
+            props: {
+                allowedTabs: ['upload', 'external'],
+                onSelect: () => undefined,
+            },
+            modes: {
+                mock: {
+                    label: 'Mock',
+                },
+            },
+        },
+        {
+            id: 'image-editor',
+            title: 'Image Editor',
+            description: 'Editor controls for resizing, cropping, and AI-assisted image edits.',
+            loadComponent: loadImageEditor,
+            order: 2,
+            tags: ['editor', 'images', 'media'],
+            props: {
+                image: sampleImage,
+                onSave: () => undefined,
+            },
+            modes: {
+                mock: {
+                    label: 'Mock',
+                },
+            },
+        },
+        {
+            id: 'image-studio-route',
+            title: 'Image Studio Route',
+            description: 'Package-owned acquisition and editing flow backed by the generated images API.',
+            loadComponent: loadImageStudioRoute,
+            order: 3,
+            tags: ['route', 'images', 'admin'],
+            modes: {
+                live: {
+                    label: 'Live',
+                    description: 'Requires the images package dev server and generated routes. Override the base URL with ?smrtImagesApiBaseUrl=... or window.__SMRT_IMAGES_PLAYGROUND_API_BASE_URL__ when needed.',
+                    props: {
+                        apiBaseUrl: resolveImagesPlaygroundApiBaseUrl(),
+                    },
+                },
+            },
+        },
+    ],
+};

package/dist/svelte/routes/ImageStudioRoute.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { ImageLike } from '../image-clients.js';
+import { AssetsGallery, ImageEditor, ImageUploader } from '../index.js';
+
+const { t } = useI18n();
+
+let { apiBaseUrl = '/api/v1' }: { apiBaseUrl?: string } = $props();
+
+type StudioImage = ImageLike;
+
+let selectedImage = $state<StudioImage | null>(null);
+let uploaderStatus = $state('No image selected from the uploader yet.');
+
+function isPersistedImage(value: unknown): value is StudioImage {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value
+  );
+}
+
+function handleUploaderSelect(value: StudioImage | File | string) {
+  if (isPersistedImage(value)) {
+    selectedImage = value;
+    uploaderStatus = `Ready to edit “${value.name}”.`;
+    return;
+  }
+
+  if (value instanceof File) {
+    uploaderStatus = `Selected local file “${value.name}”. Persist it through your app flow before opening advanced edits.`;
+    return;
+  }
+
+  uploaderStatus = `Selected external image source: ${value}`;
+}
+
+function handleGallerySelect(image: StudioImage) {
+  selectedImage = image;
+  uploaderStatus = `Loaded “${image.name}” from the gallery.`;
+}
+
+function handleEditorSave(image: StudioImage) {
+  selectedImage = image;
+  uploaderStatus = `Saved a new derivative for “${image.name}”.`;
+}
+</script>
+
+<div class="images-route">
+  <header class="images-route__header">
+    <div>
+      <p class="images-route__eyebrow">{t(M['images.image_studio_route.eyebrow'])}</p>
+      <h1>{t(M['images.image_studio_route.title'])}</h1>
+      <p class="images-route__lede">
+        {t(M['images.image_studio_route.lede'])}
+      </p>
+    </div>
+  </header>
+
+  <section class="images-route__uploader">
+    <div class="images-route__section-copy">
+      <h2>{t(M['images.image_studio_route.acquire_images'])}</h2>
+      <p>
+        {t(M['images.image_studio_route.acquire_images_description'])}
+      </p>
+      <p class="images-route__status">{uploaderStatus}</p>
+    </div>
+
+    <div class="images-route__card">
+      <ImageUploader {apiBaseUrl} onSelect={handleUploaderSelect} />
+    </div>
+  </section>
+
+  <section class="images-route__workspace">
+    <div class="images-route__section-copy">
+      <h2>{t(M['images.image_studio_route.browse_and_edit'])}</h2>
+      <p>
+        {t(M['images.image_studio_route.browse_and_edit_description'])}
+      </p>
+    </div>
+
+    <div class="images-route__workspace-grid">
+      <div class="images-route__card images-route__gallery">
+        <AssetsGallery {apiBaseUrl} onSelect={handleGallerySelect} />
+      </div>
+
+      <div class="images-route__card images-route__editor">
+        <ImageEditor
+          {apiBaseUrl}
+          image={selectedImage}
+          onSave={handleEditorSave}
+        />
+      </div>
+    </div>
+  </section>
+</div>
+
+<style>
+  .images-route {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+    color: var(--smrt-color-on-surface, #e2e8f0);
+    background:
+      radial-gradient(circle at top, color-mix(in srgb, var(--smrt-color-primary) 22%, transparent), transparent 40%),
+      var(--smrt-color-background, #020617);
+    min-height: 100vh;
+  }
+
+  .images-route__eyebrow {
+    margin: 0 0 0.5rem;
+    color: var(--smrt-color-primary, #7dd3fc);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+    letter-spacing: var(--smrt-typography-label-medium-tracking, 0.08em);
+    text-transform: uppercase;
+  }
+
+  .images-route__header h1,
+  .images-route__section-copy h2 {
+    margin: 0;
+  }
+
+  .images-route__header h1 {
+    font-size: clamp(2rem, 3vw, 2.8rem);
+  }
+
+  .images-route__lede,
+  .images-route__section-copy p {
+    margin: 0.75rem 0 0;
+    color: var(--smrt-color-on-surface-variant, #cbd5e1);
+    line-height: 1.6;
+    max-width: 60rem;
+  }
+
+  .images-route__uploader,
+  .images-route__workspace {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .images-route__status {
+    margin-top: 1rem;
+    padding: 0.875rem 1rem;
+    border-radius: 0.85rem;
+    background: color-mix(in srgb, var(--smrt-color-surface-container) 72%, transparent);
+    border: 1px solid color-mix(in srgb, var(--smrt-color-primary) 20%, transparent);
+    color: var(--smrt-color-on-surface, #e0f2fe);
+  }
+
+  .images-route__workspace-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .images-route__card {
+    border-radius: 1rem;
+    border: 1px solid color-mix(in srgb, var(--smrt-color-outline-variant) 18%, transparent);
+    background: color-mix(in srgb, var(--smrt-color-surface-container) 72%, transparent);
+    box-shadow: var(--smrt-elevation-5, 0 24px 60px color-mix(in srgb, var(--smrt-color-shadow) 35%, transparent));
+    overflow: hidden;
+  }
+
+  .images-route__gallery {
+    min-height: 720px;
+  }
+
+  .images-route__editor {
+    min-height: 720px;
+  }
+
+  @media (max-width: 1024px) {
+    .images-route {
+      padding: 1.25rem;
+    }
+
+    .images-route__workspace-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .images-route__gallery,
+    .images-route__editor {
+      min-height: 560px;
+    }
+  }
+</style>

package/dist/svelte/routes/ImageStudioRoute.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    apiBaseUrl?: string;
+};
+declare const ImageStudioRoute: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageStudioRoute = ReturnType<typeof ImageStudioRoute>;
+export default ImageStudioRoute;
+//# sourceMappingURL=ImageStudioRoute.svelte.d.ts.map

package/dist/svelte/routes/ImageStudioRoute.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageStudioRoute.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/ImageStudioRoute.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAmGlD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/routes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImageStudioRoute } from './ImageStudioRoute.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/routes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/svelte/routes/index.js

@@ -0,0 +1 @@
+export { default as ImageStudioRoute } from './ImageStudioRoute.svelte';

package/dist/svelte/routes/shared.d.ts

@@ -0,0 +1,25 @@
+import type { SmrtRouteNavigationItem } from '@happyvertical/smrt-types';
+export declare const IMAGES_ROUTE_IDS: {
+    readonly studio: "@happyvertical/smrt-images:studio";
+};
+export type ImagesRouteId = (typeof IMAGES_ROUTE_IDS)[keyof typeof IMAGES_ROUTE_IDS];
+export type ImagesRouteNavigationItem = SmrtRouteNavigationItem;
+export declare const IMAGES_ROUTE_META: {
+    readonly studio: {
+        id: "@happyvertical/smrt-images:studio";
+        title: string;
+        description: string;
+        defaultPath: string;
+        loadKind: undefined;
+        nav: {
+            label: string;
+            description: string;
+            icon: string;
+            order: number;
+            group: string;
+        };
+    };
+};
+export declare function createImagesRouteNavigation(mounts?: Partial<Record<ImagesRouteId, string>>): ImagesRouteNavigationItem[];
+export declare const IMAGES_DEFAULT_ROUTE_NAVIGATION: SmrtRouteNavigationItem[];
+//# sourceMappingURL=shared.d.ts.map

package/dist/svelte/routes/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/svelte/routes/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,uBAAuB,EACxB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,gBAAgB;;CAEnB,CAAC;AAEX,MAAM,MAAM,aAAa,GACvB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAE3D,MAAM,MAAM,yBAAyB,GAAG,uBAAuB,CAAC;AAEhE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAgBpB,CAAC;AAEX,wBAAgB,2BAA2B,CACzC,MAAM,GAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAM,GAClD,yBAAyB,EAAE,CAU7B;AAED,eAAO,MAAM,+BAA+B,2BAAgC,CAAC"}