@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/customTemplates/TemplateDesigner.tsx

@@ -1,433 +0,0 @@
-/**
- * TemplateDesigner — modal Scene-backed editor for authoring a
- * `CustomTemplateDefinition`. Mounts the Scene with the in-memory
- * adapter, exposes a placeholder palette, and lets the user save the
- * result to either the current doc or the browser-local library.
- *
- * Responsiveness preview: a small viewport-aspect toggle (16:9 /
- * 9:16 / 1:1) re-mounts the Scene at the alternate viewport so the
- * author can see how their `%`-based layout will adapt. The
- * underlying layer array is the same; only the Scene's `viewport`
- * prop changes.
- *
- * Save flow: numeric position fields are normalized to `%`-strings
- * relative to the design canvas (always 1920×1080 in v1), then the
- * resulting Layer[] is bundled into a `CustomTemplateDefinition`
- * and handed to the host via `onSave`. The host decides whether to
- * persist to the doc, the library, or both.
- */
-
-import { useCallback, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { MediaContext } from '@bendyline/squisq-react';
-import type {
-  CustomTemplateDefinition,
-  ImageLayer,
-  Layer,
-  MediaProvider,
-  ViewportConfig,
-} from '@bendyline/squisq/schemas';
-import {
-  Scene,
-  SelectTool,
-  createTokenTool,
-  createPlaceTool,
-  buildTokenLayer,
-  type SceneTool,
-} from '../scene';
-import { useMemoryLayerAdapter } from './useMemoryLayerAdapter';
-import { normalizePositions } from './normalizePositions';
-import { AddBin } from './AddBin';
-import { TOKEN_DEFS, TOKEN_DRAG_MIME } from './tokenDefs';
-import { SHAPE_DEFS, SHAPE_DRAG_MIME, buildShapeLayer } from './shapeDefs';
-import { partitionFiles, processMediaFiles } from '../utils/dropUtils';
-import { LayerToolbar } from './LayerToolbar';
-
-export type DesignerSaveTarget = 'doc' | 'library';
-
-interface TemplateDesignerProps {
-  /** Optional initial template to edit (vs starting from scratch). */
-  initial?: CustomTemplateDefinition;
-  /**
-   * Called when the user clicks Save. The host decides where to
-   * persist (usually via `CustomTemplateContext.upsertDocTemplate`
-   * and/or `upsertLibraryTemplate`).
-   */
-  onSave: (def: CustomTemplateDefinition, target: DesignerSaveTarget) => void;
-  /** Called when the user dismisses the modal without saving. */
-  onClose: () => void;
-  /**
-   * Embedded mode: render the designer inline (no full-screen portal /
-   * backdrop, no close button, no Cancel) so a host frame — e.g. the
-   * Custom Layout Manager — can place it inside its own panel. The
-   * designer fills its container and does NOT call `onClose` after a
-   * save, so the host stays in control of selection.
-   */
-  embedded?: boolean;
-  /**
-   * Label for the primary (save-to-doc) button. Defaults to
-   * "Save to this doc"; the Custom Layout Manager passes a plain "Save"
-   * when the open layout already lives in the doc.
-   */
-  primarySaveLabel?: string;
-  /**
-   * Media storage. When provided, images dropped on the canvas (or
-   * picked via the Add bin's Media section) are uploaded and pinned as a
-   * full-bleed background layer, and the canvas resolves their URLs for
-   * preview. Omit to disable media in the bin.
-   */
-  mediaProvider?: MediaProvider | null;
-  /** Editor chrome scheme, copied onto the portal root for theme inheritance. */
-  colorScheme?: 'light' | 'dark';
-}
-
-const DESIGN_CANVAS = { width: 1920, height: 1080 };
-
-/**
- * Derive a technical name slug from a human label: lowercase, collapse
- * runs of non-alphanumerics to single hyphens, trim leading/trailing
- * hyphens, and drop any leading non-letter chars so the result matches
- * the `^[a-z][a-z0-9-]*$` rule enforced by `validate()`.
- */
-function slugifyLabel(label: string): string {
-  return label
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^[^a-z]+/, '')
-    .replace(/^-+|-+$/g, '');
-}
-
-const VIEWPORT_OPTIONS: {
-  id: 'landscape' | 'portrait' | 'square';
-  label: string;
-  viewport: ViewportConfig;
-}[] = [
-  { id: 'landscape', label: '16:9', viewport: { width: 1920, height: 1080, name: 'Landscape' } },
-  { id: 'portrait', label: '9:16', viewport: { width: 1080, height: 1920, name: 'Portrait' } },
-  { id: 'square', label: '1:1', viewport: { width: 1080, height: 1080, name: 'Square' } },
-];
-
-export function TemplateDesigner({
-  initial,
-  onSave,
-  onClose,
-  embedded = false,
-  primarySaveLabel = 'Save to this doc',
-  mediaProvider = null,
-  colorScheme = 'light',
-}: TemplateDesignerProps) {
-  const [name, setName] = useState(initial?.name ?? '');
-  const [label, setLabel] = useState(initial?.label ?? '');
-  const [description, setDescription] = useState(initial?.description ?? '');
-  // While true, the name auto-tracks the label (the 90% case). Editing
-  // the name field manually pins it; clearing the name resumes tracking.
-  const [nameAutoDerived, setNameAutoDerived] = useState(!initial?.name);
-
-  const handleLabelChange = useCallback(
-    (value: string) => {
-      setLabel(value);
-      if (nameAutoDerived) setName(slugifyLabel(value));
-    },
-    [nameAutoDerived],
-  );
-
-  const handleNameChange = useCallback(
-    (value: string) => {
-      // An empty name re-enables auto-derivation and re-syncs to the
-      // current label; any text pins the name to what the user typed.
-      if (value.trim() === '') {
-        setNameAutoDerived(true);
-        setName(slugifyLabel(label));
-      } else {
-        setNameAutoDerived(false);
-        setName(value);
-      }
-    },
-    [label],
-  );
-  const [previewViewportId, setPreviewViewportId] = useState<'landscape' | 'portrait' | 'square'>(
-    'landscape',
-  );
-
-  // Build the toolset once. Each bin entry — placeholder token or shape —
-  // gets a click-to-place tool. Gesture state is supplied by each Scene,
-  // so the reusable tool definitions remain instance-safe.
-  const tools: SceneTool[] = useMemo(
-    () => [
-      SelectTool,
-      ...TOKEN_DEFS.map((d) => createTokenTool(d)),
-      ...SHAPE_DEFS.map((s) =>
-        createPlaceTool({ id: s.id, label: s.label, build: (p) => buildShapeLayer(s, p) }),
-      ),
-    ],
-    [],
-  );
-
-  const adapter = useMemoryLayerAdapter({
-    initial: initial?.layers ?? [],
-    tools,
-  });
-
-  // Upload image files and pin each as a full-bleed background layer,
-  // prepended so it sits behind everything (layers composite back-to-front).
-  const addMediaBackgrounds = useCallback(
-    async (files: File[]) => {
-      if (!mediaProvider) return;
-      const { media } = partitionFiles(files);
-      if (media.length === 0) return;
-      const paths = await processMediaFiles(media, mediaProvider);
-      const backgrounds: ImageLayer[] = paths
-        .filter((p): p is string => !!p)
-        .map((src, i) => ({
-          id: `bg-${Date.now().toString(36)}-${i}`,
-          type: 'image',
-          position: { x: 0, y: 0, width: DESIGN_CANVAS.width, height: DESIGN_CANVAS.height },
-          content: { src, alt: '', fit: 'cover' },
-        }));
-      if (backgrounds.length === 0) return;
-      adapter.setLayers([...backgrounds, ...adapter.layers]);
-    },
-    [adapter, mediaProvider],
-  );
-
-  // Drag-and-drop onto the canvas. A dragged placeholder or shape adds the
-  // same layer its click-to-place tool would, at the drop point (`point`
-  // is already in viewport coordinates). Dropped image files become
-  // full-bleed background layers.
-  const handleCanvasDrop = useCallback(
-    (e: React.DragEvent, point: { x: number; y: number }) => {
-      const tokenDef = TOKEN_DEFS.find((d) => d.id === e.dataTransfer.getData(TOKEN_DRAG_MIME));
-      if (tokenDef) {
-        adapter.dispatch({ kind: 'addLayer', layer: buildTokenLayer(tokenDef, point) });
-        return;
-      }
-      const shapeDef = SHAPE_DEFS.find((s) => s.id === e.dataTransfer.getData(SHAPE_DRAG_MIME));
-      if (shapeDef) {
-        adapter.dispatch({ kind: 'addLayer', layer: buildShapeLayer(shapeDef, point) });
-        return;
-      }
-      const files = Array.from(e.dataTransfer.files ?? []);
-      if (files.length > 0) void addMediaBackgrounds(files);
-    },
-    [adapter, addMediaBackgrounds],
-  );
-
-  // Track the selected layer so the contextual styling toolbar can edit
-  // it. The Scene reports a set of ids; the designer is single-select for
-  // styling purposes, so we take the first.
-  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
-  const selectedLayer = adapter.layers.find((l) => l.id === selectedLayerId) ?? null;
-
-  const handleLayerAttr = useCallback(
-    (path: string, value: unknown) => {
-      if (!selectedLayerId) return;
-      adapter.dispatch({ kind: 'setLayerAttr', id: selectedLayerId, path, value });
-    },
-    [adapter, selectedLayerId],
-  );
-
-  const [activeToolId, setActiveToolId] = useState<string>('select');
-
-  const currentViewport =
-    VIEWPORT_OPTIONS.find((v) => v.id === previewViewportId)?.viewport ?? DESIGN_CANVAS;
-
-  const validate = (): string | null => {
-    const slug = name.trim();
-    if (!slug) return 'Name is required.';
-    if (!/^[a-z][a-z0-9-]*$/.test(slug)) {
-      return 'Name must be lowercase letters, digits, and hyphens (no spaces).';
-    }
-    if (!label.trim()) return 'Label is required.';
-    if (adapter.layers.length === 0) return 'Add at least one layer or placeholder.';
-    return null;
-  };
-
-  const handleSave = (target: DesignerSaveTarget) => {
-    const error = validate();
-    if (error) {
-      alert(error);
-      return;
-    }
-    // Normalize against the design canvas so the saved template is
-    // resolution-independent — see normalizePositions.ts.
-    const layers: Layer[] = normalizePositions(adapter.layers, DESIGN_CANVAS);
-    const def: CustomTemplateDefinition = {
-      name: name.trim(),
-      label: label.trim(),
-      viewport: DESIGN_CANVAS,
-      layers,
-      ...(description.trim() ? { description: description.trim() } : {}),
-    };
-    onSave(def, target);
-    // Embedded hosts (the Custom Layout Manager) own selection state, so
-    // staying mounted after a save lets the user keep editing.
-    if (!embedded) onClose();
-  };
-
-  const panel = (
-    <div
-      className={`squisq-template-designer-panel${
-        embedded ? ' squisq-template-designer-panel--embedded' : ''
-      }`}
-    >
-      {/* Standalone modal owns its title + close button. Embedded in the
-          Custom Layout Manager, the host frame provides both, so the
-          designer drops its header entirely. */}
-      {!embedded && (
-        <header className="squisq-template-designer-header">
-          <h2 className="squisq-template-designer-title">
-            {initial ? 'Edit layout' : 'New layout'}
-          </h2>
-          <button
-            type="button"
-            className="squisq-template-designer-close"
-            onClick={onClose}
-            aria-label="Close designer"
-            title="Close (Esc)"
-          >
-            ×
-          </button>
-        </header>
-      )}
-
-      <div className="squisq-template-designer-meta">
-        <label className="squisq-template-designer-field">
-          <span>Label</span>
-          <input
-            type="text"
-            value={label}
-            placeholder="Hero Section"
-            onChange={(e) => handleLabelChange(e.target.value)}
-          />
-        </label>
-        <label className="squisq-template-designer-field">
-          <span>Name</span>
-          <input
-            type="text"
-            value={name}
-            placeholder="auto from label"
-            onChange={(e) => handleNameChange(e.target.value)}
-            spellCheck={false}
-          />
-          <span className="squisq-template-designer-field-hint">
-            Auto-derived from the label — edit to override.
-          </span>
-        </label>
-        <label className="squisq-template-designer-field">
-          <span>Description</span>
-          <input
-            type="text"
-            value={description}
-            placeholder="One-sentence description (optional)"
-            onChange={(e) => setDescription(e.target.value)}
-          />
-        </label>
-      </div>
-
-      <div className="squisq-template-designer-body">
-        <AddBin
-          activeToolId={activeToolId}
-          onActivate={setActiveToolId}
-          canAddMedia={!!mediaProvider}
-          onAddMediaFiles={(files) => void addMediaBackgrounds(files)}
-        />
-        <div className="squisq-template-designer-stage">
-          {/* One controls row: the compact aspect-ratio dropdown plus the
-              contextual layer styling controls (when a layer is selected),
-              so the two share a row instead of stacking. */}
-          <div className="squisq-template-designer-stage-bar">
-            <span className="squisq-template-designer-viewport-label">Preview</span>
-            <select
-              className="squisq-layer-toolbar-select"
-              aria-label="Preview aspect ratio"
-              title="Preview aspect ratio"
-              value={previewViewportId}
-              onChange={(e) =>
-                setPreviewViewportId(e.target.value as 'landscape' | 'portrait' | 'square')
-              }
-            >
-              {VIEWPORT_OPTIONS.map((v) => (
-                <option key={v.id} value={v.id}>
-                  {v.label}
-                </option>
-              ))}
-            </select>
-            {/* Contextual styling controls — appear when a layer is selected. */}
-            {selectedLayer && (
-              <>
-                <div className="squisq-layer-toolbar-sep" aria-hidden="true" />
-                <LayerToolbar layer={selectedLayer} onAttr={handleLayerAttr} />
-              </>
-            )}
-          </div>
-          <div className="squisq-template-designer-scene">
-            {/* MediaContext lets image layers resolve uploaded media to
-                  displayable (blob) URLs in the canvas, matching preview. */}
-            <MediaContext.Provider value={mediaProvider}>
-              <Scene
-                viewport={currentViewport}
-                layers={adapter.layers}
-                tools={tools}
-                activeToolId={activeToolId}
-                onActiveToolIdChange={setActiveToolId}
-                onCommand={adapter.dispatch}
-                onSelectionChange={(ids) => setSelectedLayerId(ids.values().next().value ?? null)}
-                onDrop={handleCanvasDrop}
-                showToolbar={false}
-              />
-            </MediaContext.Provider>
-          </div>
-        </div>
-      </div>
-
-      <footer className="squisq-template-designer-footer">
-        <span className="squisq-template-designer-footer-hint">
-          Layers are saved as % of a 1920×1080 canvas so the layout adapts to any viewport.
-        </span>
-        <div className="squisq-template-designer-footer-actions">
-          {!embedded && (
-            <button type="button" className="squisq-template-designer-btn" onClick={onClose}>
-              Cancel
-            </button>
-          )}
-          <button
-            type="button"
-            className="squisq-template-designer-btn"
-            onClick={() => handleSave('library')}
-            title="Save to your browser-local library so other docs can use it"
-          >
-            Save to library
-          </button>
-          <button
-            type="button"
-            className="squisq-template-designer-btn squisq-template-designer-btn--primary"
-            onClick={() => handleSave('doc')}
-          >
-            {primarySaveLabel}
-          </button>
-        </div>
-      </footer>
-    </div>
-  );
-
-  // Embedded: hand the bare panel back so a host frame can place it.
-  if (embedded) return panel;
-
-  // Standalone: full-screen modal over a click-to-dismiss backdrop.
-  return createPortal(
-    <div
-      className="squisq-editor-shell squisq-template-designer-overlay"
-      data-theme={colorScheme}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Custom layout designer"
-      onClick={(e) => {
-        // Click on the backdrop (not the panel) closes the modal.
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      {panel}
-    </div>,
-    document.body,
-  );
-}

package/src/customTemplates/__tests__/library.test.ts

@@ -1,96 +0,0 @@
-/**
- * library — localStorage-backed library of user-defined templates.
- *
- * Verifies the CRUD shape (list / save / delete / clear), and that
- * each operation persists across reads. Uses jsdom's localStorage.
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import {
-  listLibraryTemplates,
-  saveLibraryTemplate,
-  deleteLibraryTemplate,
-  clearLibrary,
-  LIBRARY_STORAGE_KEY,
-} from '../library';
-import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
-
-function defn(name: string, label = name): CustomTemplateDefinition {
-  return {
-    name,
-    label,
-    viewport: { width: 1920, height: 1080 },
-    layers: [
-      {
-        id: 'a',
-        type: 'text',
-        position: { x: '0%', y: '0%', width: '100%' },
-        content: { text: name, style: { fontSize: 24, color: '#000' } },
-      },
-    ],
-  };
-}
-
-describe('library', () => {
-  beforeEach(() => {
-    clearLibrary();
-  });
-
-  it('returns an empty list when no templates are saved', () => {
-    expect(listLibraryTemplates()).toEqual([]);
-  });
-
-  it('saveLibraryTemplate persists across reads', () => {
-    saveLibraryTemplate(defn('a', 'Alpha'));
-    expect(listLibraryTemplates().map((t) => t.name)).toEqual(['a']);
-    expect(window.localStorage.getItem(LIBRARY_STORAGE_KEY)).toBeTruthy();
-  });
-
-  it('saving a template with an existing name replaces it', () => {
-    saveLibraryTemplate(defn('a', 'Alpha'));
-    saveLibraryTemplate({ ...defn('a', 'Alpha v2'), description: 'updated' });
-    const list = listLibraryTemplates();
-    expect(list).toHaveLength(1);
-    expect(list[0].label).toBe('Alpha v2');
-    expect(list[0].description).toBe('updated');
-  });
-
-  it('list sorts by label', () => {
-    saveLibraryTemplate(defn('z', 'Zebra'));
-    saveLibraryTemplate(defn('a', 'Aardvark'));
-    saveLibraryTemplate(defn('m', 'Mango'));
-    expect(listLibraryTemplates().map((t) => t.label)).toEqual(['Aardvark', 'Mango', 'Zebra']);
-  });
-
-  it('deleteLibraryTemplate removes by name and is a no-op for missing names', () => {
-    saveLibraryTemplate(defn('a'));
-    saveLibraryTemplate(defn('b'));
-    let after = deleteLibraryTemplate('a');
-    expect(after.map((t) => t.name)).toEqual(['b']);
-    after = deleteLibraryTemplate('not-there');
-    expect(after.map((t) => t.name)).toEqual(['b']);
-  });
-
-  it('clearLibrary wipes everything', () => {
-    saveLibraryTemplate(defn('a'));
-    saveLibraryTemplate(defn('b'));
-    clearLibrary();
-    expect(listLibraryTemplates()).toEqual([]);
-  });
-
-  it('gracefully recovers from a corrupt payload', () => {
-    window.localStorage.setItem(LIBRARY_STORAGE_KEY, '{not-valid-json');
-    expect(listLibraryTemplates()).toEqual([]);
-    // Subsequent save replaces the corrupt blob with a clean one.
-    saveLibraryTemplate(defn('a'));
-    expect(listLibraryTemplates().map((t) => t.name)).toEqual(['a']);
-  });
-
-  it('filters structurally invalid array entries instead of crashing sort', () => {
-    window.localStorage.setItem(
-      LIBRARY_STORAGE_KEY,
-      JSON.stringify({ version: 1, templates: [null, {}, defn('valid')] }),
-    );
-    expect(listLibraryTemplates().map((template) => template.name)).toEqual(['valid']);
-  });
-});

package/src/customTemplates/__tests__/normalizePositions.test.ts

@@ -1,109 +0,0 @@
-/**
- * normalizePositions — pixel → %-string conversion against the
- * designer canvas.
- */
-
-import { describe, it, expect } from 'vitest';
-import { normalizePositions } from '../normalizePositions';
-import type { Layer, ShapeLayer, TextLayer } from '@bendyline/squisq/schemas';
-
-const CANVAS = { width: 1920, height: 1080 };
-
-function shape(id: string, x: number, y: number, w: number, h: number): ShapeLayer {
-  return {
-    id,
-    type: 'shape',
-    position: { x, y, width: w, height: h },
-    content: { shape: 'rect' },
-  };
-}
-
-describe('normalizePositions', () => {
-  it('converts pixel positions to %-strings against the canvas', () => {
-    const layers: Layer[] = [shape('a', 192, 108, 960, 540)];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position.x).toBe('10%');
-    expect(out[0].position.y).toBe('10%');
-    expect(out[0].position.width).toBe('50%');
-    expect(out[0].position.height).toBe('50%');
-  });
-
-  it('width converts against width, height against height (not both against width)', () => {
-    // 1080 height; a 1080px tall layer should be 100% of height, not 56.25%.
-    const layers: Layer[] = [shape('a', 0, 0, 1920, 1080)];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position.width).toBe('100%');
-    expect(out[0].position.height).toBe('100%');
-  });
-
-  it('passes %-string values through unchanged', () => {
-    const layers: Layer[] = [
-      {
-        id: 'a',
-        type: 'shape',
-        position: { x: '10%', y: '20%', width: '30%', height: '40%' },
-        content: { shape: 'rect' },
-      },
-    ];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position).toEqual({ x: '10%', y: '20%', width: '30%', height: '40%' });
-  });
-
-  it('preserves anchor field', () => {
-    const layers: Layer[] = [
-      {
-        id: 'a',
-        type: 'shape',
-        position: { x: 100, y: 100, width: 200, height: 100, anchor: 'center' },
-        content: { shape: 'rect' },
-      },
-    ];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position.anchor).toBe('center');
-  });
-
-  it('handles mixed pixel + percent in the same layer', () => {
-    const layers: Layer[] = [
-      {
-        id: 'a',
-        type: 'shape',
-        // x pixel, y percent
-        position: { x: 192, y: '20%', width: 960, height: 540 },
-        content: { shape: 'rect' },
-      },
-    ];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position.x).toBe('10%');
-    expect(out[0].position.y).toBe('20%');
-    expect(out[0].position.width).toBe('50%');
-    expect(out[0].position.height).toBe('50%');
-  });
-
-  it('formats fractional percentages with up to 2 decimal places', () => {
-    // 100 / 1920 ≈ 5.208333…% → rounded to 5.21%.
-    const layers: Layer[] = [shape('a', 100, 100, 100, 100)];
-    const out = normalizePositions(layers, CANVAS);
-    expect(out[0].position.x).toBe('5.21%');
-  });
-
-  it('does not mutate the input layers', () => {
-    const layers: Layer[] = [shape('a', 100, 200, 300, 400)];
-    const before = JSON.stringify(layers);
-    normalizePositions(layers, CANVAS);
-    expect(JSON.stringify(layers)).toBe(before);
-  });
-
-  it('preserves non-position layer content (TextLayer)', () => {
-    const layers: Layer[] = [
-      {
-        id: 't',
-        type: 'text',
-        position: { x: 192, y: 108, width: 480 },
-        content: { text: '{title}', style: { fontSize: 36, color: '#000' } },
-      } as TextLayer,
-    ];
-    const out = normalizePositions(layers, CANVAS);
-    expect((out[0] as TextLayer).content.text).toBe('{title}');
-    expect((out[0] as TextLayer).content.style.fontSize).toBe(36);
-  });
-});

package/src/customTemplates/__tests__/shapeDefs.test.ts

@@ -1,49 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { SHAPE_DEFS, buildShapeLayer } from '../shapeDefs';
-
-describe('buildShapeLayer', () => {
-  const point = { x: 100, y: 200 };
-
-  it('builds a native ShapeLayer for rect / circle / line', () => {
-    for (const kind of ['rect', 'circle', 'line'] as const) {
-      const def = SHAPE_DEFS.find((s) => s.kind === kind && !s.rounded)!;
-      const layer = buildShapeLayer(def, point);
-      expect(layer.type).toBe('shape');
-      if (layer.type === 'shape') {
-        expect(layer.content.shape).toBe(kind);
-      }
-      expect(layer.position.x).toBe(100);
-      expect(layer.position.y).toBe(200);
-    }
-  });
-
-  it('rounds the rounded-rectangle variant', () => {
-    const def = SHAPE_DEFS.find((s) => s.id === 'shape-rect-rounded')!;
-    const layer = buildShapeLayer(def, point);
-    expect(layer.type).toBe('shape');
-    if (layer.type === 'shape') {
-      expect(layer.content.borderRadius).toBeGreaterThan(0);
-    }
-  });
-
-  it('builds a computed PathLayer with non-empty geometry for non-native shapes', () => {
-    const def = SHAPE_DEFS.find((s) => s.kind === 'diamond')!;
-    const layer = buildShapeLayer(def, point);
-    expect(layer.type).toBe('path');
-    if (layer.type === 'path') {
-      expect(layer.content.d.length).toBeGreaterThan(0);
-      // Diamond path should reference the drop origin region.
-      expect(layer.content.d).toMatch(/^M /);
-      // The kind is recorded so the renderer can re-derive geometry on
-      // move/resize and adapt to the viewport.
-      expect(layer.content.shapeKind).toBe('diamond');
-    }
-  });
-
-  it('assigns unique ids across calls', () => {
-    const def = SHAPE_DEFS[0];
-    const a = buildShapeLayer(def, point);
-    const b = buildShapeLayer(def, point);
-    expect(a.id).not.toBe(b.id);
-  });
-});