feat: expand UI Lab media fixtures

Add a derived dev-media fixture pack and wire UI Lab scenarios to use the broader image set for more useful browser screenshots.

docs/ui-lab.md

@@ -79,14 +79,17 @@ src/dev/mockScenarios.ts
 src/dev/applyMockScenario.ts
 ```
 
-Happy-path fixture media is imported from the existing onboarding assets in:
+Happy-path fixture media is generated from existing onboarding images and
+website screenshots into:
 
 ```text
-src/assets/onboarding/
+public/dev-media/fixture-*.webp
 ```
 
-Synthetic or deliberately broken fixture paths can still use the `mock://`
+The pack is deliberately small and deterministic, but varied enough for browser
-scheme described below.
+screenshots: square, portrait, landscape, monochrome, tinted, framed, and
+interface-like crops. Synthetic or deliberately broken fixture paths can still
+use the `mock://` scheme described below.
 
 ## Mock Media
 
@@ -100,9 +103,8 @@ const src = mediaSrc(image.thumbnail_path);
 ```
 
 In normal Tauri modes, `mediaSrc` delegates to `convertFileSrc`. In UI Lab,
-already-resolved Vite asset URLs are returned as-is, so fixtures can reuse
+root-relative asset URLs such as `/dev-media/fixture-01.webp` are returned
-existing imported assets. Paths beginning with `mock://` are served from
+as-is. Paths beginning with `mock://` are also served from `public/dev-media`:
-`public/dev-media`:
 
 ```text
 mock://thumb-1.svg -> /dev-media/thumb-1.svg

src/dev/mockFixtures.ts

@@ -12,21 +12,7 @@ import type {
   TagCloudEntry,
 } from "../store";
 import type { MockScenario } from "./mockScenarios";
-import alpineLake from "../assets/onboarding/alpinelake.webp";
+import { fixtureMediaPath } from "./mockMedia";
-import architecture from "../assets/onboarding/architecture.webp";
-import balloon from "../assets/onboarding/balloon.webp";
-import beach from "../assets/onboarding/beach.webp";
-import cat from "../assets/onboarding/cat.webp";
-import cityNight from "../assets/onboarding/citynight.webp";
-import cozy from "../assets/onboarding/cozy.webp";
-import dunes from "../assets/onboarding/dunes.webp";
-import flower from "../assets/onboarding/flower.webp";
-import forest from "../assets/onboarding/forest.webp";
-import landscape1 from "../assets/onboarding/landscape1.webp";
-import landscape2 from "../assets/onboarding/landscape2.webp";
-import sunset from "../assets/onboarding/sunset.webp";
-import sunsetCoast from "../assets/onboarding/sunsetcoast.webp";
-import sunsetLake from "../assets/onboarding/sunsetlake.webp";
 
 export interface MockDb {
   scenario: MockScenario;
@@ -72,23 +58,6 @@ const tags = [
   "select",
 ];
 const aiRatings: AiRating[] = ["general", "sensitive", "questionable"];
-const fixtureAssets = [
-  alpineLake,
-  architecture,
-  balloon,
-  beach,
-  cat,
-  cityNight,
-  cozy,
-  dunes,
-  flower,
-  forest,
-  landscape1,
-  landscape2,
-  sunset,
-  sunsetCoast,
-  sunsetLake,
-];
 
 function daysAgo(days: number): string {
   return new Date(Date.now() - days * 86_400_000).toISOString();
@@ -99,7 +68,7 @@ function mockPath(folder: number, name: string, index: number, ext: string): str
 }
 
 function mockThumb(index: number): string {
-  return fixtureAssets[index % fixtureAssets.length];
+  return fixtureMediaPath(index);
 }
 
 function makeImage(index: number, folderId: number, scenario: MockScenario): ImageRecord {

src/dev/mockMedia.ts

@@ -0,0 +1,8 @@
+const fixtureMedia = Array.from(
+  { length: 48 },
+  (_, index) => `/dev-media/fixture-${String(index + 1).padStart(2, "0")}.webp`,
+);
+
+export function fixtureMediaPath(index: number): string {
+  return fixtureMedia[index % fixtureMedia.length];
+}