@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/customTemplates/TemplateDesigner.tsx

@@ -0,0 +1,430 @@
+/**
+ * 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;
+}
+
+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,
+}: 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; SelectTool is the singleton from
+  // scene/tools/SelectTool.ts. Tools are factories so each has its own
+  // state-free closure.
+  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-template-designer-overlay"
+      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

@@ -0,0 +1,88 @@
+/**
+ * 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']);
+  });
+});

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

@@ -0,0 +1,109 @@
+/**
+ * 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

@@ -0,0 +1,49 @@
+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);
+  });
+});