@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/imageEditor/layers/EditorTextLayer.tsx

@@ -1,45 +0,0 @@
-/**
- * SVG renderer for an `ImageEditLayer` of kind `text` inside the editor.
- *
- * Multi-line text is laid out as a `<text>` element with one `<tspan>`
- * per line. The first line sits at `y + fontSize` so the visible top
- * of the glyph block aligns with the layer's `y` coordinate (matches
- * what users expect from a top-anchored bounding box).
- */
-
-import type { ImageEditCanvas, ImageEditLayer } from '@bendyline/squisq/schemas';
-
-interface Props {
-  layer: ImageEditLayer & { type: 'text' };
-  canvas: ImageEditCanvas;
-}
-
-export function EditorTextLayer({ layer, canvas: _canvas }: Props) {
-  const p = layer.position;
-  const x = typeof p.x === 'number' ? p.x : 0;
-  const y = typeof p.y === 'number' ? p.y : 0;
-  const { text, style } = layer.content;
-  const lineHeight = style.lineHeight ?? 1.4;
-  const lineHeightPx = style.fontSize * lineHeight;
-  const lines = (text ?? '').split('\n');
-  const textAnchor =
-    style.textAlign === 'center' ? 'middle' : style.textAlign === 'right' ? 'end' : 'start';
-
-  return (
-    <text
-      x={x}
-      y={y + style.fontSize}
-      fontFamily={style.fontFamily ?? 'sans-serif'}
-      fontSize={style.fontSize}
-      fontWeight={style.fontWeight ?? 'normal'}
-      fill={style.color}
-      textAnchor={textAnchor}
-    >
-      {lines.map((line, i) => (
-        <tspan key={i} x={x} dy={i === 0 ? 0 : lineHeightPx}>
-          {line || '\u00A0'}
-        </tspan>
-      ))}
-    </text>
-  );
-}

package/src/imageEditor/layers/SelectionHandles.tsx

@@ -1,86 +0,0 @@
-/**
- * SelectionHandles
- *
- * Renders the dashed selection rectangle plus eight resize handles around
- * the currently-selected layer's bounding box. Pointer events on each
- * handle bubble back through `onHandlePointerDown` so the surrounding
- * `<CanvasSurface>` can run its drag loop with the right resize semantics.
- */
-
-import type { CanvasRect } from '../state.js';
-
-export type Handle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
-
-const HANDLE_SIZE = 10; // canvas-pixel size of each square handle
-
-interface Props {
-  box: CanvasRect;
-  onHandlePointerDown: (e: React.PointerEvent<SVGRectElement>, handle: Handle) => void;
-}
-
-export function SelectionHandles({ box, onHandlePointerDown }: Props) {
-  const half = HANDLE_SIZE / 2;
-  const cx = box.x + box.width / 2;
-  const cy = box.y + box.height / 2;
-
-  const handles: Array<{ id: Handle; x: number; y: number; cursor: string }> = [
-    { id: 'nw', x: box.x, y: box.y, cursor: 'nwse-resize' },
-    { id: 'n', x: cx, y: box.y, cursor: 'ns-resize' },
-    { id: 'ne', x: box.x + box.width, y: box.y, cursor: 'nesw-resize' },
-    { id: 'e', x: box.x + box.width, y: cy, cursor: 'ew-resize' },
-    { id: 'se', x: box.x + box.width, y: box.y + box.height, cursor: 'nwse-resize' },
-    { id: 's', x: cx, y: box.y + box.height, cursor: 'ns-resize' },
-    { id: 'sw', x: box.x, y: box.y + box.height, cursor: 'nesw-resize' },
-    { id: 'w', x: box.x, y: cy, cursor: 'ew-resize' },
-  ];
-
-  return (
-    <g className="squisq-image-editor-selection-handles" pointerEvents="none">
-      {/*
-       * Outline: rendered as two stacked rectangles so the selection
-       * stays visible over both light and dark imagery. The white
-       * "halo" goes underneath; the blue dashed line on top. Both use
-       * `vector-effect: non-scaling-stroke` so the stroke width stays
-       * crisp at any zoom level (the SVG viewBox is the canvas size,
-       * which can be much larger than the rendered element).
-       */}
-      <rect
-        x={box.x}
-        y={box.y}
-        width={box.width}
-        height={box.height}
-        fill="none"
-        stroke="#ffffff"
-        strokeOpacity={0.9}
-        strokeWidth={4}
-        vectorEffect="non-scaling-stroke"
-      />
-      <rect
-        x={box.x}
-        y={box.y}
-        width={box.width}
-        height={box.height}
-        fill="none"
-        stroke="#39f"
-        strokeWidth={2}
-        strokeDasharray="6 4"
-        vectorEffect="non-scaling-stroke"
-      />
-      {handles.map((h) => (
-        <rect
-          key={h.id}
-          x={h.x - half}
-          y={h.y - half}
-          width={HANDLE_SIZE}
-          height={HANDLE_SIZE}
-          fill="#fff"
-          stroke="#39f"
-          strokeWidth={2}
-          vectorEffect="non-scaling-stroke"
-          style={{ cursor: h.cursor, pointerEvents: 'all' }}
-          onPointerDown={(e) => onHandlePointerDown(e, h.id)}
-        />
-      ))}
-    </g>
-  );
-}

package/src/imageEditor/state.ts

@@ -1,173 +0,0 @@
-/**
- * Pure state + reducer for the `<ImageEditor>` component.
- *
- * Kept React-free so it's easy to unit-test in isolation. The actual
- * React hook that wires this to a {@link ContentContainer} (and the
- * version manager) lives in `useImageEditor.ts`.
- */
-
-import type { ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
-import {
-  addLayer,
-  removeLayer,
-  reorderLayer,
-  setCanvas,
-  updateLayer,
-  touch,
-} from '@bendyline/squisq/imageEdit';
-
-// Distributive Omit: applied per union member so the discriminant (`type`) is preserved.
-type DOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
-
-/**
- * Layer payload accepted by the `add-layer` action — the `id` field is
- * optional and will be assigned by the underlying `addLayer` helper if
- * the caller doesn't supply one.
- */
-export type ImageEditLayerInput = ImageEditLayer | (DOmit<ImageEditLayer, 'id'> & { id?: string });
-
-/** The currently active interaction tool. */
-export type ImageEditorTool = 'select' | 'text' | 'shape' | 'image' | 'crop' | 'zoom-rect';
-
-/** A pixel-space rectangle in canvas coordinates. */
-export interface CanvasRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface ImageEditorState {
-  /** The persisted document. */
-  doc: ImageEditDoc;
-  /** Selected layer id, or `null` when nothing is selected. */
-  selectedLayerId: string | null;
-  /** Active tool. */
-  tool: ImageEditorTool;
-  /**
-   * The shape kind the shape tool will drop next (a drawing palette kind,
-   * e.g. `'rectangle'`, `'diamond'`, `'arrow-right'`). Set when the user
-   * picks from the shape palette; defaults to `'rectangle'`.
-   */
-  shapeKind: string;
-  /**
-   * Dirty flag — true when the in-memory doc has unsaved changes
-   * relative to the last `markClean()` call. The hook uses this to
-   * debounce writes back to `state.json`.
-   */
-  dirty: boolean;
-}
-
-export type ImageEditorAction =
-  | { type: 'load'; doc: ImageEditDoc }
-  | { type: 'mark-clean' }
-  | { type: 'set-tool'; tool: ImageEditorTool }
-  | { type: 'set-shape-kind'; kind: string }
-  | { type: 'select'; layerId: string | null }
-  | { type: 'set-canvas'; canvas: ImageEditDoc['canvas'] }
-  | { type: 'add-layer'; layer: ImageEditLayerInput; select?: boolean }
-  | { type: 'remove-layer'; layerId: string }
-  | { type: 'update-layer'; layerId: string; patch: Partial<ImageEditLayer> }
-  | { type: 'reorder-layer'; layerId: string; toIndex: number }
-  | { type: 'crop'; rect: CanvasRect };
-
-/** Build the initial state from a freshly-loaded doc. */
-export function initialImageEditorState(doc: ImageEditDoc): ImageEditorState {
-  return {
-    doc,
-    selectedLayerId: null,
-    tool: 'select',
-    shapeKind: 'rectangle',
-    dirty: false,
-  };
-}
-
-export function imageEditorReducer(
-  state: ImageEditorState,
-  action: ImageEditorAction,
-): ImageEditorState {
-  switch (action.type) {
-    case 'load':
-      return {
-        doc: action.doc,
-        selectedLayerId: null,
-        tool: 'select',
-        shapeKind: state.shapeKind,
-        dirty: false,
-      };
-
-    case 'mark-clean':
-      return state.dirty ? { ...state, dirty: false } : state;
-
-    case 'set-tool':
-      return state.tool === action.tool ? state : { ...state, tool: action.tool };
-
-    case 'set-shape-kind':
-      return state.shapeKind === action.kind ? state : { ...state, shapeKind: action.kind };
-
-    case 'select':
-      return state.selectedLayerId === action.layerId
-        ? state
-        : { ...state, selectedLayerId: action.layerId };
-
-    case 'set-canvas': {
-      const next = setCanvas(state.doc, action.canvas);
-      return next === state.doc ? state : { ...state, doc: next, dirty: true };
-    }
-
-    case 'add-layer': {
-      // `addLayer` from core assigns an id when missing; cast through
-      // `ImageEditLayer` for the existing helper signature.
-      const next = addLayer(state.doc, action.layer as ImageEditLayer);
-      // Pick up the assigned id (last layer)
-      const newId = next.layers[next.layers.length - 1]!.id;
-      return {
-        ...state,
-        doc: next,
-        dirty: true,
-        selectedLayerId: action.select === false ? state.selectedLayerId : newId,
-      };
-    }
-
-    case 'remove-layer': {
-      const next = removeLayer(state.doc, action.layerId);
-      if (next === state.doc) return state;
-      return {
-        ...state,
-        doc: next,
-        dirty: true,
-        selectedLayerId: state.selectedLayerId === action.layerId ? null : state.selectedLayerId,
-      };
-    }
-
-    case 'update-layer': {
-      const next = updateLayer(state.doc, action.layerId, action.patch);
-      return next === state.doc ? state : { ...state, doc: next, dirty: true };
-    }
-
-    case 'reorder-layer': {
-      const next = reorderLayer(state.doc, action.layerId, action.toIndex);
-      return next === state.doc ? state : { ...state, doc: next, dirty: true };
-    }
-
-    case 'crop': {
-      const { rect } = action;
-      const newCanvas = {
-        ...state.doc.canvas,
-        width: Math.max(1, Math.round(rect.width)),
-        height: Math.max(1, Math.round(rect.height)),
-      };
-      // Translate every layer by (-rect.x, -rect.y). Only handles numeric
-      // positions; percentage strings are left alone (rare for image-edit
-      // layers, which the editor produces with numeric coords).
-      const translated: ImageEditLayer[] = state.doc.layers.map((layer) => {
-        const { position } = layer;
-        const x = typeof position.x === 'number' ? position.x - rect.x : position.x;
-        const y = typeof position.y === 'number' ? position.y - rect.y : position.y;
-        return { ...layer, position: { ...position, x, y } } as ImageEditLayer;
-      });
-      const next = touch({ ...state.doc, canvas: newCanvas, layers: translated });
-      return { ...state, doc: next, dirty: true };
-    }
-  }
-}

package/src/imageEditor/useImageEditor.ts

@@ -1,385 +0,0 @@
-/**
- * React hook that bundles the image-editor reducer with sidecar
- * persistence, versioning, and an object-URL cache for asset bytes.
- *
- * Hosts pass an already-scoped {@link ContentContainer} (typically built
- * with `scopeContainer(parent, basename + '_files')`); the hook never
- * looks above that root.
- */
-
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import type { ContentContainer } from '@bendyline/squisq/storage';
-import type { ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
-import {
-  IMAGE_EDIT_ASSETS_PREFIX,
-  IMAGE_EDIT_STATE_FILENAME,
-  ImageEditVersionManager,
-  createEmptyImageEditDoc,
-  readImageEditDoc,
-  writeImageEditDoc,
-} from '@bendyline/squisq/imageEdit';
-import {
-  imageEditorReducer,
-  initialImageEditorState,
-  type ImageEditorAction,
-  type ImageEditorState,
-} from './state.js';
-
-export interface UseImageEditorOptions {
-  /** Sidecar container for the image being edited. */
-  container: ContentContainer;
-  /**
-   * Initial source image URL — used to seed layer 0 when the sidecar has
-   * no `state.json` yet. Bytes are fetched and copied into
-   * `assets/source.<ext>` so the doc is portable.
-   */
-  initialSrc?: string;
-  /** Override the state filename. Defaults to `state.json`. */
-  stateFilename?: string;
-  /** Enable version history. Default: `false`. */
-  allowVersioning?: boolean;
-  /** Auto-save idle delay (ms). `0` disables. Default: `5000`. */
-  versioningAutoSaveIdleMs?: number;
-  /** Debounced write delay for state.json (ms). Default: `500`. */
-  persistDebounceMs?: number;
-}
-
-export interface UseImageEditorReturn {
-  /** Current reducer state (or `null` while still loading the initial doc). */
-  state: ImageEditorState | null;
-  /** Dispatch a reducer action. No-op while loading. */
-  dispatch: (action: ImageEditorAction) => void;
-  /** Manually trigger a synchronous write of `state.json`. */
-  flush: () => Promise<void>;
-  /** Resolve an asset path inside the sidecar to a blob URL (cached). */
-  resolveAssetUrl: (path: string) => Promise<string>;
-  /**
-   * Write a new asset (raster image) into `assets/` and return the
-   * sidecar-relative path. The caller is then expected to push a layer
-   * referencing that path.
-   */
-  uploadAsset: (file: Blob, suggestedName?: string) => Promise<string>;
-  /** Versioning handle. `null` when `allowVersioning` is false or no container. */
-  versioning: ImageEditVersionManager | null;
-  /** True after the initial load completes (either an existing doc or seeded). */
-  ready: boolean;
-  /** Last load / persistence error, if any. */
-  error: Error | null;
-}
-
-export function useImageEditor(options: UseImageEditorOptions): UseImageEditorReturn {
-  const {
-    container,
-    initialSrc,
-    stateFilename = IMAGE_EDIT_STATE_FILENAME,
-    allowVersioning = false,
-    versioningAutoSaveIdleMs = 5000,
-    persistDebounceMs = 500,
-  } = options;
-
-  const [state, dispatch] = useReducer(
-    (s: ImageEditorState | null, a: ImageEditorAction): ImageEditorState | null => {
-      if (s === null) return a.type === 'load' ? initialImageEditorState(a.doc) : null;
-      return imageEditorReducer(s, a);
-    },
-    null,
-  );
-  const [ready, setReady] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  // Set to true inside the initial-load effect when we just seeded the
-  // sidecar (no prior `state.json`). The versioning effect below reads
-  // this flag to write an "original" snapshot once the manager exists.
-  const seededOnLoadRef = useRef(false);
-
-  // ── Initial load (or seed from initialSrc) ────────────────────────────
-  useEffect(() => {
-    let cancelled = false;
-    setReady(false);
-    setError(null);
-
-    (async () => {
-      try {
-        const existing = await readImageEditDoc(container, stateFilename);
-        if (cancelled) return;
-        if (existing) {
-          dispatch({ type: 'load', doc: existing });
-          setReady(true);
-          return;
-        }
-        // No existing state — seed.
-        const seeded = await seedFromSource(container, initialSrc);
-        if (cancelled) return;
-        await writeImageEditDoc(container, seeded, stateFilename);
-        if (cancelled) return;
-        dispatch({ type: 'load', doc: seeded });
-        setReady(true);
-        // Capture an initial snapshot of the freshly-seeded state so the
-        // version history always has an "original" entry the user can
-        // revert to after their first edit.
-        seededOnLoadRef.current = true;
-      } catch (err: unknown) {
-        if (cancelled) return;
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setReady(true);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [container, stateFilename, initialSrc]);
-
-  // ── Debounced persistence of state.json ────────────────────────────────
-  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const docRef = useRef<ImageEditDoc | null>(null);
-  const dirtyRef = useRef(false);
-  const revisionRef = useRef(0);
-  const previousDocRef = useRef<ImageEditDoc | null>(null);
-  const nextDoc = state?.doc ?? null;
-  if (nextDoc !== previousDocRef.current) {
-    previousDocRef.current = nextDoc;
-    revisionRef.current += 1;
-  }
-  docRef.current = nextDoc;
-  dirtyRef.current = state?.dirty ?? false;
-  const writeQueueRef = useRef<Promise<void>>(Promise.resolve());
-  const persistTargetRef = useRef({ container, stateFilename });
-  persistTargetRef.current = { container, stateFilename };
-
-  const enqueueWrite = useCallback(
-    (doc: ImageEditDoc, revision: number, markClean: boolean): Promise<void> => {
-      const write = writeQueueRef.current
-        .catch(() => undefined)
-        .then(() => writeImageEditDoc(container, doc, stateFilename));
-      writeQueueRef.current = write.catch(() => undefined);
-      return write.then(() => {
-        if (markClean && revision === revisionRef.current && docRef.current === doc) {
-          dispatch({ type: 'mark-clean' });
-        }
-      });
-    },
-    [container, stateFilename],
-  );
-
-  useEffect(() => {
-    if (!state?.dirty) return;
-    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-    persistTimerRef.current = setTimeout(() => {
-      const doc = state.doc;
-      if (!doc) return;
-      const revision = revisionRef.current;
-      enqueueWrite(doc, revision, true).catch((err: unknown) => {
-        console.warn(
-          '[squisq-editor] image-edit state persist failed:',
-          err instanceof Error ? err.message : err,
-        );
-      });
-    }, persistDebounceMs);
-    return () => {
-      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-    };
-  }, [state?.dirty, state?.doc, persistDebounceMs, enqueueWrite]);
-
-  const flush = useCallback(async () => {
-    const doc = docRef.current;
-    if (!doc) return;
-    if (persistTimerRef.current) {
-      clearTimeout(persistTimerRef.current);
-      persistTimerRef.current = null;
-    }
-    await enqueueWrite(doc, revisionRef.current, true);
-  }, [enqueueWrite]);
-
-  // A quick modal close must not discard the final edit that is still inside
-  // the debounce window. Queue it behind any in-flight write on unmount.
-  useEffect(
-    () => () => {
-      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-      const doc = docRef.current;
-      if (!dirtyRef.current || !doc) return;
-      const target = persistTargetRef.current;
-      const write = writeQueueRef.current
-        .catch(() => undefined)
-        .then(() => writeImageEditDoc(target.container, doc, target.stateFilename));
-      writeQueueRef.current = write.catch((err: unknown) => {
-        console.warn(
-          '[squisq-editor] image-edit final persist failed:',
-          err instanceof Error ? err.message : err,
-        );
-      });
-    },
-    [],
-  );
-
-  // ── Versioning ─────────────────────────────────────────────────────────
-  const versioning = useMemo(
-    () => (allowVersioning ? new ImageEditVersionManager(container, { stateFilename }) : null),
-    [allowVersioning, container, stateFilename],
-  );
-
-  // Drop the "original" snapshot once versioning is wired and we just
-  // seeded a fresh sidecar. Guarded by `seededOnLoadRef` so we never
-  // duplicate-snapshot on subsequent renders. Uses `force: true` so the
-  // initial entry always lands even though no diff has occurred yet.
-  useEffect(() => {
-    if (!versioning) return;
-    if (!ready) return;
-    if (!seededOnLoadRef.current) return;
-    seededOnLoadRef.current = false;
-    versioning.saveVersion({ force: true }).catch((err: unknown) => {
-      console.warn(
-        '[squisq-editor] image-edit initial snapshot failed:',
-        err instanceof Error ? err.message : err,
-      );
-    });
-  }, [versioning, ready]);
-
-  useEffect(() => {
-    if (!versioning) return;
-    if (versioningAutoSaveIdleMs <= 0) return;
-    if (!state?.doc) return;
-    const timer = setTimeout(() => {
-      versioning.saveVersion({ doc: docRef.current ?? undefined }).catch((err: unknown) => {
-        console.warn(
-          '[squisq-editor] image-edit auto-save version failed:',
-          err instanceof Error ? err.message : err,
-        );
-      });
-    }, versioningAutoSaveIdleMs);
-    return () => clearTimeout(timer);
-  }, [versioning, versioningAutoSaveIdleMs, state?.doc]);
-
-  // ── Asset URL cache ────────────────────────────────────────────────────
-  const urlCacheRef = useRef<Map<string, string>>(new Map());
-  const urlCacheGenerationRef = useRef(0);
-
-  const resolveAssetUrl = useCallback(
-    async (path: string): Promise<string> => {
-      const cache = urlCacheRef.current;
-      const generation = urlCacheGenerationRef.current;
-      const cached = cache.get(path);
-      if (cached) return cached;
-      const data = await container.readFile(path);
-      if (generation !== urlCacheGenerationRef.current) {
-        throw new Error('useImageEditor: asset resolution cancelled');
-      }
-      if (!data) throw new Error(`useImageEditor: missing asset "${path}"`);
-      const list = await container.listFiles(path);
-      const mime = list.find((e) => e.path === path)?.mimeType ?? 'application/octet-stream';
-      const url = URL.createObjectURL(new Blob([data], { type: mime }));
-      if (generation !== urlCacheGenerationRef.current) {
-        URL.revokeObjectURL(url);
-        throw new Error('useImageEditor: asset resolution cancelled');
-      }
-      cache.set(path, url);
-      return url;
-    },
-    [container],
-  );
-
-  // Revoke all cached object URLs on unmount / container swap
-  useEffect(() => {
-    const cache = urlCacheRef.current;
-    return () => {
-      urlCacheGenerationRef.current += 1;
-      for (const url of cache.values()) URL.revokeObjectURL(url);
-      cache.clear();
-    };
-  }, [container]);
-
-  const uploadAsset = useCallback(
-    async (file: Blob, suggestedName?: string): Promise<string> => {
-      const ext = guessExtensionFromMime(file.type) ?? extensionFromName(suggestedName) ?? 'bin';
-      const id = randomId();
-      const path = `${IMAGE_EDIT_ASSETS_PREFIX}${id}.${ext}`;
-      const buf = await file.arrayBuffer();
-      await container.writeFile(path, buf, file.type || undefined);
-      return path;
-    },
-    [container],
-  );
-
-  return {
-    state,
-    dispatch,
-    flush,
-    resolveAssetUrl,
-    uploadAsset,
-    versioning,
-    ready,
-    error,
-  };
-}
-
-// ============================================
-// Helpers
-// ============================================
-
-async function seedFromSource(
-  container: ContentContainer,
-  initialSrc: string | undefined,
-): Promise<ImageEditDoc> {
-  if (!initialSrc) {
-    return createEmptyImageEditDoc(800, 600);
-  }
-  // Fetch the source bytes (works for blob:, data:, http(s):, and same-origin
-  // relative URLs).
-  const resp = await fetch(initialSrc);
-  if (!resp.ok) throw new Error(`useImageEditor: failed to fetch initialSrc (${resp.status})`);
-  const blob = await resp.blob();
-  const ext = guessExtensionFromMime(blob.type) ?? 'png';
-  const assetPath = `${IMAGE_EDIT_ASSETS_PREFIX}source.${ext}`;
-  await container.writeFile(assetPath, await blob.arrayBuffer(), blob.type || undefined);
-
-  // Probe natural dimensions by loading into an Image.
-  const dims = await probeImageDimensions(initialSrc);
-  const w = dims?.width ?? 800;
-  const h = dims?.height ?? 600;
-
-  const layer: ImageEditLayer = {
-    id: 'base',
-    type: 'image',
-    name: 'Background',
-    position: { x: 0, y: 0, width: w, height: h },
-    content: { src: assetPath, alt: '', fit: 'fill' },
-  };
-  return {
-    version: 1,
-    canvas: { width: w, height: h, background: 'transparent' },
-    layers: [layer],
-    meta: {
-      sourcePath: assetPath,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-    },
-  };
-}
-
-function probeImageDimensions(src: string): Promise<{ width: number; height: number } | null> {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}
-
-function guessExtensionFromMime(mime: string | undefined): string | null {
-  if (!mime) return null;
-  if (mime.includes('png')) return 'png';
-  if (mime.includes('jpeg') || mime.includes('jpg')) return 'jpg';
-  if (mime.includes('webp')) return 'webp';
-  if (mime.includes('gif')) return 'gif';
-  if (mime.includes('svg')) return 'svg';
-  return null;
-}
-
-function extensionFromName(name: string | undefined): string | null {
-  if (!name) return null;
-  const dot = name.lastIndexOf('.');
-  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : null;
-}
-
-function randomId(): string {
-  return Math.random().toString(36).slice(2, 10);
-}