feat: add layer and mask thumbnails

view/layers/LayerThumbnail.tsx

@@ -0,0 +1,29 @@
+import { FolderSimple, ImageBroken } from "@phosphor-icons/react";
+import type { LayerThumbnailModel, RasterThumbnailModel } from "./thumbnailModel";
+
+export function LayerThumbnail({ model, label, compact = false }: { model: LayerThumbnailModel; label: string; compact?: boolean }) {
+  const sizeClass = compact ? "h-7 w-9 rounded-md" : "h-8 w-10 rounded-lg";
+  return (
+    <span role="img" aria-label={label} className={`relative grid shrink-0 place-items-center overflow-hidden bg-black/25 ring-1 ring-inset ring-white/15 ${sizeClass}`}>
+      {model.kind === "raster" ? <RasterPreview model={model} /> : null}
+      {model.kind === "group" ? (
+        <>
+          <span className="absolute inset-1 grid grid-cols-2 gap-px overflow-hidden rounded">
+            {model.previews.map((preview, index) => <RasterPreview key={`${preview.source}-${index}`} model={preview} />)}
+          </span>
+          <FolderSimple size={compact ? 14 : 17} weight="fill" className="relative drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />
+        </>
+      ) : null}
+      {model.kind === "empty" ? <ImageBroken size={compact ? 14 : 17} className="text-white/35" /> : null}
+    </span>
+  );
+}
+
+function RasterPreview({ model }: { model: RasterThumbnailModel }) {
+  const { x, y, w, h } = model.viewBox;
+  return (
+    <svg aria-hidden="true" className="h-full w-full bg-[linear-gradient(45deg,rgba(255,255,255,.06)_25%,transparent_25%,transparent_75%,rgba(255,255,255,.06)_75%),linear-gradient(45deg,rgba(255,255,255,.06)_25%,transparent_25%,transparent_75%,rgba(255,255,255,.06)_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]" viewBox={`${x} ${y} ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
+      <image href={model.source} x="0" y="0" width={model.intrinsicWidth} height={model.intrinsicHeight} onError={(event) => event.currentTarget.setAttribute("visibility", "hidden")} />
+    </svg>
+  );
+}

view/layers/thumbnailModel.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test } from "bun:test";
+import type { Asset } from "@core/asset";
+import type { Layer } from "@core/layer";
+import { createLayerThumbnailIndex, resolveLayerThumbnail } from "./thumbnailModel";
+
+const assets = new Map([
+  ["asset-a", { id: "asset-a", name: "A", mimeType: "image/png", source: "data:image/png;base64,a", intrinsicSize: { w: 400, h: 200 } }],
+  ["asset-b", { id: "asset-b", name: "B", mimeType: "image/webp", source: "blob:b", intrinsicSize: { w: 80, h: 60 } }],
+] as const) as ReadonlyMap<string, Asset>;
+
+describe("layer thumbnail read model", () => {
+  test("preserves and clamps a layer source crop", () => {
+    expect(resolveLayerThumbnail(raster("cropped", "asset-a", { x: 350, y: 20, w: 100, h: 240 }), assets)).toEqual({
+      kind: "raster",
+      source: "data:image/png;base64,a",
+      viewBox: { x: 350, y: 20, w: 50, h: 180 },
+      intrinsicWidth: 400,
+      intrinsicHeight: 200,
+    });
+  });
+
+  test("returns a graceful empty model for invalid and missing assets", () => {
+    expect(resolveLayerThumbnail(raster("missing", "unknown"), assets)).toEqual({ kind: "empty" });
+    expect(resolveLayerThumbnail(raster("outside", "asset-a", { x: 500, y: 0, w: 20, h: 20 }), assets)).toEqual({ kind: "empty" });
+  });
+
+  test("collects a bounded visible group preview and excludes attached masks", () => {
+    const group = base("group", "group") as Layer & { type: "group"; children: Layer[] };
+    group.type = "group";
+    group.children = [raster("hidden", "asset-a", undefined, false), raster("mask", "asset-a"), raster("one", "asset-a"), raster("two", "asset-b"), raster("three", "asset-a"), raster("four", "asset-a")];
+    const result = resolveLayerThumbnail(group, assets, new Set(["mask"]));
+    expect(result.kind).toBe("group");
+    if (result.kind === "group") expect(result.previews.map((preview) => preview.source)).toEqual(["data:image/png;base64,a", "blob:b", "data:image/png;base64,a"]);
+  });
+
+  test("indexes nested group previews once for row lookup", () => {
+    const child = { ...base("child-group", "Child"), type: "group" as const, children: [raster("nested", "asset-b")] };
+    const group = { ...base("root", "Root"), type: "group" as const, children: [child] };
+    const document = { id: "doc", version: 1, name: "Doc", assets: [...assets.values()], artboards: [{ id: "artboard", name: "Artboard", bounds: { x: 0, y: 0, w: 100, h: 100 }, backgroundColor: "#000000", visible: true, locked: false, layers: [group] }] };
+    const index = createLayerThumbnailIndex(document, assets);
+    expect(index.get("nested")?.kind).toBe("raster");
+    expect(index.get("child-group")).toMatchObject({ kind: "group", previews: [{ source: "blob:b" }] });
+    expect(index.get("root")).toMatchObject({ kind: "group", previews: [{ source: "blob:b" }] });
+  });
+});
+
+function raster(id: string, assetId: string, sourceRect?: { x: number; y: number; w: number; h: number }, visible = true): Layer {
+  return { ...base(id, id), type: "raster", assetId, visible, ...(sourceRect ? { sourceRect } : {}) };
+}
+
+function base(id: string, name: string) {
+  return { id, name, visible: true, locked: false, opacity: 1, transform: { position: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, rotation: 0 } };
+}

view/layers/thumbnailModel.ts

@@ -0,0 +1,110 @@
+import type { Asset } from "@core/asset";
+import type { ImageDocument } from "@core/document";
+import type { Rect } from "@core/geometry";
+import type { AssetId, LayerId } from "@core/id";
+import type { Layer } from "@core/layer";
+
+export type RasterThumbnailModel = {
+  kind: "raster";
+  source: string;
+  viewBox: Rect;
+  intrinsicWidth: number;
+  intrinsicHeight: number;
+};
+
+export type LayerThumbnailModel =
+  | RasterThumbnailModel
+  | { kind: "group"; previews: readonly RasterThumbnailModel[] }
+  | { kind: "empty" };
+
+/** Builds a small, read-only preview descriptor without decoding or rerasterizing assets. */
+export function resolveLayerThumbnail(
+  layer: Layer,
+  assetById: ReadonlyMap<AssetId, Asset>,
+  excludedLayerIds: ReadonlySet<LayerId> = new Set(),
+): LayerThumbnailModel {
+  if (layer.type !== "group") return resolveRasterThumbnail(layer, assetById) ?? { kind: "empty" };
+
+  const previews: RasterThumbnailModel[] = [];
+  const pending = [...layer.children].reverse();
+  while (pending.length > 0 && previews.length < 3) {
+    const child = pending.pop();
+    if (!child || excludedLayerIds.has(child.id) || !child.visible) continue;
+    if (child.type === "group") {
+      pending.push(...[...child.children].reverse());
+      continue;
+    }
+    const preview = resolveRasterThumbnail(child, assetById);
+    if (preview) previews.push(preview);
+  }
+  return { kind: "group", previews };
+}
+
+/** Resolves every layer once, including group mosaics, for linear tree rendering. */
+export function createLayerThumbnailIndex(
+  document: ImageDocument,
+  assetById: ReadonlyMap<AssetId, Asset>,
+  excludedLayerIds: ReadonlySet<LayerId> = new Set(),
+): ReadonlyMap<LayerId, LayerThumbnailModel> {
+  const result = new Map<LayerId, LayerThumbnailModel>();
+  const pending: Array<{ layer: Layer; visited: boolean }> = [];
+  for (const artboard of document.artboards) for (const layer of artboard.layers) pending.push({ layer, visited: false });
+
+  while (pending.length > 0) {
+    const frame = pending.pop();
+    if (!frame) continue;
+    const { layer } = frame;
+    if (frame.visited || layer.type !== "group") {
+      if (layer.type !== "group") {
+        result.set(layer.id, resolveRasterThumbnail(layer, assetById) ?? { kind: "empty" });
+        continue;
+      }
+      const previews: RasterThumbnailModel[] = [];
+      for (const child of layer.children) {
+        if (previews.length >= 3) break;
+        if (excludedLayerIds.has(child.id) || !child.visible) continue;
+        const childModel = result.get(child.id);
+        if (childModel?.kind === "raster") previews.push(childModel);
+        if (childModel?.kind === "group") previews.push(...childModel.previews.slice(0, 3 - previews.length));
+      }
+      result.set(layer.id, { kind: "group", previews });
+      continue;
+    }
+    pending.push({ layer, visited: true });
+    for (let index = layer.children.length - 1; index >= 0; index -= 1) {
+      const child = layer.children[index];
+      if (child) pending.push({ layer: child, visited: false });
+    }
+  }
+  return result;
+}
+
+function resolveRasterThumbnail(layer: Exclude<Layer, { type: "group" }>, assetById: ReadonlyMap<AssetId, Asset>): RasterThumbnailModel | undefined {
+  const asset = assetById.get(layer.assetId);
+  if (!asset || !asset.source.trim() || !positiveFinite(asset.intrinsicSize.w) || !positiveFinite(asset.intrinsicSize.h)) return undefined;
+
+  const fullRect = { x: 0, y: 0, w: asset.intrinsicSize.w, h: asset.intrinsicSize.h };
+  const viewBox = layer.sourceRect ? intersectRect(layer.sourceRect, fullRect) : fullRect;
+  if (!viewBox) return undefined;
+
+  return {
+    kind: "raster",
+    source: asset.source,
+    viewBox,
+    intrinsicWidth: asset.intrinsicSize.w,
+    intrinsicHeight: asset.intrinsicSize.h,
+  };
+}
+
+function intersectRect(rect: Rect, bounds: Rect): Rect | undefined {
+  if (![rect.x, rect.y, rect.w, rect.h].every(Number.isFinite) || rect.w <= 0 || rect.h <= 0) return undefined;
+  const x = Math.max(rect.x, bounds.x);
+  const y = Math.max(rect.y, bounds.y);
+  const right = Math.min(rect.x + rect.w, bounds.x + bounds.w);
+  const bottom = Math.min(rect.y + rect.h, bounds.y + bounds.h);
+  return right > x && bottom > y ? { x, y, w: right - x, h: bottom - y } : undefined;
+}
+
+function positiveFinite(value: number) {
+  return Number.isFinite(value) && value > 0;
+}