@1agh/maude 0.28.1 → 0.30.0

package/apps/studio/draw/test/animate.test.ts

@@ -0,0 +1,172 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  type CubicBezierHandles,
+  easeBezier,
+  LINEAR,
+  lerpValue,
+  lerpVertices,
+  parallel,
+  resolveStagger,
+  sampleTrack,
+  sequence,
+  shiftTrack,
+  stagger,
+  type Track,
+  timeline,
+  track,
+  trackSpan,
+} from '../animate.ts';
+
+describe('easeBezier', () => {
+  test('linear is the identity', () => {
+    for (const x of [0, 0.25, 0.5, 0.75, 1]) {
+      expect(easeBezier(LINEAR, x)).toBeCloseTo(x, 6);
+    }
+  });
+  test('clamps the endpoints exactly', () => {
+    const e: CubicBezierHandles = [0.42, 0, 0.58, 1];
+    expect(easeBezier(e, 0)).toBe(0);
+    expect(easeBezier(e, 1)).toBe(1);
+    expect(easeBezier(e, -0.5)).toBe(0);
+    expect(easeBezier(e, 1.5)).toBe(1);
+  });
+  test('ease-in-out is symmetric about the midpoint and monotone', () => {
+    const e: CubicBezierHandles = [0.42, 0, 0.58, 1];
+    expect(easeBezier(e, 0.5)).toBeCloseTo(0.5, 4);
+    let prev = -1;
+    for (let i = 0; i <= 20; i++) {
+      const y = easeBezier(e, i / 20);
+      expect(y).toBeGreaterThanOrEqual(prev - 1e-9);
+      prev = y;
+    }
+  });
+  test('preserves overshoot (y > 1) for a snap easing', () => {
+    const snap: CubicBezierHandles = [0.34, 1.42, 0.64, 1];
+    let maxY = 0;
+    for (let i = 0; i <= 100; i++) maxY = Math.max(maxY, easeBezier(snap, i / 100));
+    expect(maxY).toBeGreaterThan(1); // the overshoot the snap depends on
+  });
+  test('round-trips a known x→t→y solve (ease-out)', () => {
+    // cubic-bezier(0,0,0.58,1): solving x then evaluating y must land in (x,1).
+    const e: CubicBezierHandles = [0, 0, 0.58, 1];
+    const y = easeBezier(e, 0.5);
+    expect(y).toBeGreaterThan(0.5); // ease-out is ahead of linear at the midpoint
+    expect(y).toBeLessThan(1);
+  });
+});
+
+describe('lerpValue / lerpVertices', () => {
+  test('numbers lerp', () => {
+    expect(lerpValue(0, 10, 0.3)).toBeCloseTo(3, 6);
+  });
+  test('number arrays lerp element-wise', () => {
+    expect(lerpValue([0, 10], [10, 0], 0.5)).toEqual([5, 5]);
+  });
+  test('vertex arrays lerp by component', () => {
+    const out = lerpVertices([{ x: 0, y: 0 }], [{ x: 4, y: 8 }], 0.25);
+    expect(out).toEqual([{ x: 1, y: 2 }]);
+  });
+  test('strings are a discrete hold (no interpolation)', () => {
+    expect(lerpValue('rotate(0)', 'rotate(90)', 0.5)).toBe('rotate(0)');
+    expect(lerpValue('rotate(0)', 'rotate(90)', 1)).toBe('rotate(90)');
+  });
+  test('vertex count mismatch throws (interpolability constraint)', () => {
+    expect(() => lerpVertices([{ x: 0, y: 0 }], [], 0.5)).toThrow(/vertex count mismatch/);
+  });
+});
+
+describe('sampleTrack', () => {
+  const tr = track('opacity', [
+    { t: 0, value: 0, ease: LINEAR },
+    { t: 1, value: 1 },
+  ]);
+  test('holds before the first and after the last keyframe', () => {
+    expect(sampleTrack(tr, -1)).toBe(0);
+    expect(sampleTrack(tr, 5)).toBe(1);
+  });
+  test('linear interpolation mid-segment', () => {
+    expect(sampleTrack(tr, 0.5)).toBeCloseTo(0.5, 6);
+  });
+  test('applies the leading keyframe easing', () => {
+    const eased = track('opacity', [
+      { t: 0, value: 0, ease: [0, 0, 0.58, 1] }, // ease-out
+      { t: 1, value: 1 },
+    ]);
+    expect(sampleTrack(eased, 0.5) as number).toBeGreaterThan(0.5);
+  });
+  test('empty track samples undefined', () => {
+    expect(sampleTrack(track('opacity', []), 0)).toBeUndefined();
+  });
+});
+
+describe('combinators', () => {
+  const a = (): Track =>
+    track(
+      'opacity',
+      [
+        { t: 0, value: 0 },
+        { t: 1, value: 1 },
+      ],
+      'a'
+    );
+  const b = (): Track =>
+    track(
+      'opacity',
+      [
+        { t: 0, value: 1 },
+        { t: 2, value: 0 },
+      ],
+      'b'
+    );
+
+  test('trackSpan is the latest keyframe time', () => {
+    expect(trackSpan([a(), b()])).toBe(2);
+  });
+
+  test('shiftTrack offsets every keyframe', () => {
+    const s = shiftTrack(a(), 3);
+    expect(s.keyframes.map((k) => k.t)).toEqual([3, 4]);
+    expect(a().keyframes[0].t).toBe(0); // immutable
+  });
+
+  test('stagger offsets track i by i·delay', () => {
+    const out = stagger([a(), b(), a()], 0.5);
+    expect(out[0].keyframes[0].t).toBe(0);
+    expect(out[1].keyframes[0].t).toBe(0.5);
+    expect(out[2].keyframes[0].t).toBe(1);
+  });
+
+  test('resolveStagger bakes the declarative field and grows dur', () => {
+    const tl = timeline({ tracks: [a(), b()], dur: 2, stagger: 0.5 });
+    const r = resolveStagger(tl);
+    expect(r.stagger).toBeUndefined();
+    expect(r.tracks[1].keyframes[0].t).toBe(0.5);
+    expect(r.dur).toBe(2.5); // b ended at 2 → shifted to 2.5
+  });
+
+  test('parallel unions tracks and takes the max duration', () => {
+    const tl = parallel(
+      timeline({ tracks: [a()], dur: 1 }),
+      timeline({ tracks: [b()], dur: 2, begin: 0.5 })
+    );
+    expect(tl.tracks.length).toBe(2);
+    expect(tl.dur).toBe(2.5); // 0.5 begin + 2 dur
+    expect(tl.tracks[1].keyframes[0].t).toBe(0.5); // b shifted by its begin
+  });
+
+  test('sequence chains timelines end-to-start and sums durations', () => {
+    const tl = sequence(timeline({ tracks: [a()], dur: 1 }), timeline({ tracks: [b()], dur: 2 }));
+    expect(tl.dur).toBe(3);
+    expect(tl.tracks[0].keyframes.map((k) => k.t)).toEqual([0, 1]);
+    expect(tl.tracks[1].keyframes.map((k) => k.t)).toEqual([1, 3]); // shifted by first dur
+  });
+
+  test('sequence honors a per-timeline begin gap', () => {
+    const tl = sequence(
+      timeline({ tracks: [a()], dur: 1 }),
+      timeline({ tracks: [a()], dur: 1, begin: 0.5 })
+    );
+    expect(tl.tracks[1].keyframes[0].t).toBe(1.5); // 1 (cursor) + 0.5 (gap)
+    expect(tl.dur).toBe(2.5);
+  });
+});

package/apps/studio/draw/test/morph.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, test } from 'bun:test';
+import { sampleTrack } from '../animate.ts';
+import { blobPath } from '../geometry.ts';
+import { morphVariants, parseMorphPath, templateToPath } from '../morph.ts';
+import type { Point } from '../primitives.ts';
+
+describe('parseMorphPath', () => {
+  test('extracts vertices + a command template (M…C…Z)', () => {
+    const { template, vertices } = parseMorphPath('M0 0C1 1 2 2 3 3Z');
+    expect(template.commands.map((c) => c.cmd)).toEqual(['M', 'C', 'Z']);
+    expect(template.vertexCount).toBe(4); // M=1 + C=3
+    expect(vertices).toEqual([
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 },
+      { x: 3, y: 3 },
+    ]);
+  });
+  test('round-trips through templateToPath', () => {
+    const d = 'M0 0L10 0L10 10L0 10Z';
+    const { template, vertices } = parseMorphPath(d);
+    expect(templateToPath(template, vertices)).toBe(d);
+  });
+  test('parses negative + decimal + exponent numbers', () => {
+    const { vertices } = parseMorphPath('M-1.5 2e1L3 -4.25');
+    expect(vertices).toEqual([
+      { x: -1.5, y: 20 },
+      { x: 3, y: -4.25 },
+    ]);
+  });
+  test('rejects non-morph-safe commands (H/V/A)', () => {
+    expect(() => parseMorphPath('M0 0H10')).toThrow(/morph-safe/);
+    expect(() => parseMorphPath('M0 0A5 5 0 0 1 10 10')).toThrow(/morph-safe/);
+  });
+  test('rejects relative (lowercase) commands', () => {
+    expect(() => parseMorphPath('M0 0l10 10')).toThrow(/morph-safe/);
+  });
+  test('templateToPath enforces the vertex-count invariant', () => {
+    const { template } = parseMorphPath('M0 0L1 1');
+    expect(() => templateToPath(template, [{ x: 0, y: 0 }])).toThrow(/vertex count/);
+  });
+});
+
+describe('morphVariants', () => {
+  const base = blobPath(50, 50, 30, { lobes: 7, seed: 3 });
+
+  test('every keyframe shares the fixed vertex count (interpolability)', () => {
+    const { track, template } = morphVariants(base, { n: 4, jitter: 3, seed: 7 });
+    for (const kf of track.keyframes) {
+      expect((kf.value as Point[]).length).toBe(template.vertexCount);
+    }
+  });
+
+  test('is deterministic for a given seed', () => {
+    const a = morphVariants(base, { n: 3, jitter: 4, seed: 9 });
+    const b = morphVariants(base, { n: 3, jitter: 4, seed: 9 });
+    expect(a.track.keyframes).toEqual(b.track.keyframes);
+  });
+
+  test('different seeds produce different jitter', () => {
+    const a = morphVariants(base, { n: 3, jitter: 4, seed: 1 });
+    const b = morphVariants(base, { n: 3, jitter: 4, seed: 2 });
+    expect(a.track.keyframes[1].value).not.toEqual(b.track.keyframes[1].value);
+  });
+
+  test('jitter 0 keeps every keyframe equal to the base shape', () => {
+    const { track } = morphVariants(base, { n: 3, jitter: 0, seed: 5 });
+    const first = track.keyframes[0].value;
+    for (const kf of track.keyframes) expect(kf.value).toEqual(first);
+  });
+
+  test('loop (default) returns to the base on the final keyframe', () => {
+    const { track } = morphVariants(base, { n: 3, jitter: 5, seed: 5 });
+    const kfs = track.keyframes;
+    expect(kfs[kfs.length - 1].value).toEqual(kfs[0].value); // seamless repeat
+  });
+
+  test('loop:false drops the closing base keyframe', () => {
+    const loop = morphVariants(base, { n: 3, jitter: 5, loop: true });
+    const open = morphVariants(base, { n: 3, jitter: 5, loop: false });
+    expect(open.track.keyframes.length).toBe(loop.track.keyframes.length - 1);
+  });
+
+  test('keyframes span [0, dur] evenly', () => {
+    const { track } = morphVariants(base, { n: 2, dur: 2 });
+    const ts = track.keyframes.map((k) => k.t);
+    expect(ts[0]).toBe(0);
+    expect(ts[ts.length - 1]).toBe(2);
+  });
+
+  test('sampling + toPath yields a valid morph-safe d at mid-timeline', () => {
+    const { track, toPath } = morphVariants(base, { n: 3, jitter: 4, dur: 1, seed: 2 });
+    const mid = sampleTrack(track, 0.5) as Point[];
+    const d = toPath(mid);
+    expect(d.startsWith('M')).toBe(true);
+    // Re-parsing the rendered frame must keep the same vertex count.
+    expect(() => parseMorphPath(d)).not.toThrow();
+  });
+
+  test('ease is applied to all but the last keyframe', () => {
+    const ease = [0.34, 1.42, 0.64, 1] as const;
+    const { track } = morphVariants(base, { n: 2, ease });
+    const kfs = track.keyframes;
+    for (let i = 0; i < kfs.length - 1; i++) expect(kfs[i].ease).toEqual(ease);
+    expect(kfs[kfs.length - 1].ease).toBeUndefined();
+  });
+});

package/apps/studio/draw/test/serialize-animate.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, test } from 'bun:test';
+import { parallel, type Timeline, timeline, track } from '../animate.ts';
+import { morphVariants } from '../morph.ts';
+import { circle, type DrawPrimitive, path } from '../primitives.ts';
+import { buildAnimPlan, toAnimatedJsx, toAnimatedSvg } from '../serialize-animate.ts';
+
+// An animated mark: a morphing blob + a blinking eye + a rotating blob.
+const blob = morphVariants('M10 50L50 10L90 50L50 90Z', {
+  n: 3,
+  jitter: 5,
+  seed: 4,
+  dur: 1.2,
+  ease: [0.34, 1.42, 0.64, 1], // snap with overshoot
+  target: 'blob',
+});
+
+const PRIMS: DrawPrimitive[] = [
+  path({ d: 'M10 50L50 10L90 50L50 90Z', id: 'blob', fill: '#e94' }),
+  circle({ cx: 50, cy: 45, r: 6, id: 'eye', fill: '#222' }),
+];
+
+const TL: Timeline = parallel(
+  timeline({ tracks: [blob.track], repeat: 'indefinite' }),
+  timeline({
+    tracks: [
+      track(
+        'opacity',
+        [
+          { t: 0, value: 1, ease: [0.42, 0, 0.58, 1] },
+          { t: 0.5, value: 0.1 },
+          { t: 1, value: 1 },
+        ],
+        'eye'
+      ),
+      track(
+        'rotate',
+        [
+          { t: 0, value: 0 },
+          { t: 1.2, value: 360 },
+        ],
+        'blob'
+      ),
+    ],
+    repeat: 'indefinite',
+  })
+);
+
+const OPTS = { viewBox: '0 0 100 100', pathRenderers: { blob: blob.toPath } };
+
+describe('buildAnimPlan', () => {
+  const plan = buildAnimPlan(TL, OPTS);
+  test('one entry per targeted, ≥2-keyframe track', () => {
+    expect(plan.length).toBe(3);
+  });
+  test('d-morph maps to <animate attributeName=d>', () => {
+    const d = plan.find((e) => e.property === 'd');
+    expect(d?.kind).toBe('animate');
+    expect(d?.attr).toBe('d');
+    expect(d?.values[0].startsWith('M')).toBe(true);
+  });
+  test('rotate maps to animateTransform', () => {
+    const r = plan.find((e) => e.property === 'rotate');
+    expect(r?.kind).toBe('animateTransform');
+    expect(r?.attr).toBe('rotate');
+  });
+  test('keyTimes are normalized 0→1', () => {
+    for (const e of plan) {
+      expect(e.keyTimes[0]).toBe(0);
+      expect(e.keyTimes[e.keyTimes.length - 1]).toBe(1);
+    }
+  });
+  test('eased track carries n-1 keySplines', () => {
+    const op = plan.find((e) => e.property === 'opacity');
+    expect(op).toBeDefined();
+    expect(op?.keySplines?.length).toBe((op?.values.length ?? 0) - 1);
+  });
+});
+
+describe('toAnimatedSvg (SMIL)', () => {
+  const svg = toAnimatedSvg(PRIMS, TL, OPTS);
+  test('injects SMIL d-morph with spline easing', () => {
+    expect(svg).toContain('<animate attributeName="d"');
+    expect(svg).toContain('calcMode="spline"');
+    expect(svg).toContain('keySplines=');
+  });
+  test('rotate is an additive animateTransform (no static-transform clobber)', () => {
+    expect(svg).toMatch(/<animateTransform[^>]*type="rotate"[^>]*additive="sum"/);
+  });
+  test('preserves the overshoot handle verbatim in keySplines', () => {
+    expect(svg).toContain('0.34 1.42 0.64 1');
+  });
+  test('emits a prefers-reduced-motion gate', () => {
+    expect(svg).toContain('prefers-reduced-motion: reduce');
+  });
+  test('is a complete SVG document', () => {
+    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    expect(svg).toContain('repeatCount="indefinite"');
+  });
+});
+
+describe('toAnimatedJsx (single-source parity)', () => {
+  const svg = toAnimatedSvg(PRIMS, TL, OPTS);
+  const jsx = toAnimatedJsx(PRIMS, TL, OPTS);
+  const count = (s: string, re: RegExp) => (s.match(re) ?? []).length;
+
+  test('same count of <animate> elements as the SVG form', () => {
+    expect(count(jsx, /<animate /g)).toBe(count(svg, /<animate /g));
+  });
+  test('same count of <animateTransform> elements as the SVG form', () => {
+    expect(count(jsx, /<animateTransform /g)).toBe(count(svg, /<animateTransform /g));
+  });
+  test('omits the xmlns document marker', () => {
+    expect(jsx).not.toContain('xmlns=');
+  });
+  test('keeps the SMIL animation attributes (host renders SMIL)', () => {
+    expect(jsx).toContain('attributeName="d"');
+    expect(jsx).toContain('keyTimes=');
+  });
+});
+
+describe('fail-loud', () => {
+  test('a track targeting a missing id throws', () => {
+    const bad = timeline({
+      tracks: [
+        track(
+          'opacity',
+          [
+            { t: 0, value: 0 },
+            { t: 1, value: 1 },
+          ],
+          'ghost'
+        ),
+      ],
+      repeat: 1,
+    });
+    expect(() => toAnimatedSvg(PRIMS, bad, { viewBox: '0 0 100 100' })).toThrow(/not found/);
+  });
+  test('a d-morph track without a pathRenderer throws', () => {
+    const tl = timeline({ tracks: [blob.track], repeat: 1 });
+    expect(() => toAnimatedSvg(PRIMS, tl, { viewBox: '0 0 100 100' })).toThrow(/pathRenderer/);
+  });
+});

package/{plugins/design/dev-server → apps/studio}/equal-spacing-detector.ts

@@ -1,6 +1,6 @@
 /**
  * @file       equal-spacing-detector.ts — T27 (Wave 3)
- * @scope      plugins/design/dev-server/equal-spacing-detector.ts
+ * @scope      apps/studio/equal-spacing-detector.ts
  * @purpose    Pure detector for Figma "Smart Selection" pink-dot affordance
  *             (Rasmus Andersson 2018). Given 3+ rects on a single axis,
  *             returns the equal gap + the screen-coord midpoints between

package/{plugins/design/dev-server → apps/studio}/equal-spacing-handles.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       equal-spacing-handles.tsx — T27 (Wave 3)
- * @scope      plugins/design/dev-server/equal-spacing-handles.tsx
+ * @scope      apps/studio/equal-spacing-handles.tsx
  * @purpose    Figma Smart Selection pink-dot affordance. When 3+ elements are
  *             selected AND their bounding rects are equally distributed on an
  *             axis, render small pink dots at the midpoints between adjacent
@@ -14,11 +14,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import {
-  detectEqualSpacing,
-  type EqualSpacingResult,
-  type SpacingAxis,
-} from './equal-spacing-detector.ts';
+import { resolveSelectionEl } from './dom-selection.ts';
+import { detectEqualSpacing, type EqualSpacingResult } from './equal-spacing-detector.ts';
 import { useSelectionSet } from './use-selection-set.tsx';
 
 const HOVER_PADDING_PX = 40;
@@ -77,25 +74,6 @@ function ensureStyles(): void {
   document.head.appendChild(s);
 }
 
-function cssEscape(s: string): string {
-  // CSS.escape is available everywhere we care; manual fallback handles the
-  // jsdom test path where it may be missing.
-  // biome-ignore lint/suspicious/noExplicitAny: feature detect
-  const ce = (typeof CSS !== 'undefined' ? (CSS as any).escape : null) as
-    | ((v: string) => string)
-    | null;
-  if (ce) return ce(s);
-  return s.replace(/(["\\\]])/g, '\\$1');
-}
-
-function safeQuery(selector: string): Element | null {
-  try {
-    return document.querySelector(selector);
-  } catch {
-    return null;
-  }
-}
-
 interface ScreenRect {
   x: number;
   y: number;
@@ -103,12 +81,12 @@ interface ScreenRect {
   h: number;
 }
 
-function resolveSelectionRects(sels: Array<{ id?: string; selector: string }>): ScreenRect[] {
+function resolveSelectionRects(
+  sels: Array<{ id?: string; selector: string; artboardId?: string | null }>
+): ScreenRect[] {
   const rects: ScreenRect[] = [];
   for (const s of sels) {
-    const el = s.id
-      ? document.querySelector(`[data-cd-id="${cssEscape(s.id)}"]`)
-      : safeQuery(s.selector);
+    const el = resolveSelectionEl(document, s);
     if (!el) continue;
     const b = (el as HTMLElement).getBoundingClientRect();
     if (b.width === 0 && b.height === 0) continue;

package/{plugins/design/dev-server → apps/studio}/export-dialog.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       export-dialog.tsx — Phase 6.5 T8 export dialog.
- * @scope      plugins/design/dev-server/export-dialog.tsx
+ * @scope      apps/studio/export-dialog.tsx
  * @purpose    Native `<dialog>`-based export modal. Three controls — format,
  *             scope, per-format options — plus a Recent tab populated by
  *             `/_api/export-history`. Submit fires `POST /_api/export`, the
@@ -321,6 +321,7 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
   }, [openState, loadHistory]);
 
   // ⌘E / Ctrl+E to open; ⌘⇧E / Ctrl+Shift+E to re-run last.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-bind on `open` only — rerunLast is stable per render; re-running on it would tear down the global hotkey listener needlessly.
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       const mod = e.metaKey || e.ctrlKey;
@@ -331,7 +332,6 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   // Phase 6.5 T9 — context-menu entries dispatch `maude:open-export` so they
@@ -339,6 +339,18 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
   useEffect(() => {
     function onCustom(e: Event) {
       const detail = (e as CustomEvent<{ scope?: Scope; format?: Format }>).detail ?? {};
+      // Plan C — route to the UNIFIED shell Export dialog (parent / main origin)
+      // so the in-canvas toolbar + context menu open the SAME modal as the
+      // menubar. Only fall back to this local dialog for a standalone canvas
+      // (handoff / exported embed) with no shell parent.
+      if (window.parent && window.parent !== window) {
+        try {
+          window.parent.postMessage({ dgn: 'open-export', detail }, '*');
+          return;
+        } catch {
+          /* fall through to local */
+        }
+      }
       open(detail);
     }
     window.addEventListener('maude:open-export', onCustom as EventListener);
@@ -547,8 +559,8 @@ const DialogShell = (() => {
           <div className="dc-ed-recent">
             <h3>Recent</h3>
             <ul>
-              {history.slice(0, 5).map((h, i) => (
-                <li key={`${h.at}-${i}`}>
+              {history.slice(0, 5).map((h) => (
+                <li key={`${h.at}-${h.filename}`}>
                   <button
                     type="button"
                     onClick={() => {

package/{plugins/design/dev-server → apps/studio}/history.ts

@@ -5,6 +5,7 @@
 // from the WS layer and from a future server-driven auto-snapshot hook.
 
 import type { Dirent } from 'node:fs';
+import { existsSync } from 'node:fs';
 import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 
@@ -37,10 +38,14 @@ function fileSlug(file: string, designRel: string): string {
   }
   const prefix = `${designRel.replace(/^\/+|\/+$/g, '')}/`;
   if (p.startsWith(prefix)) p = p.slice(prefix.length);
+  // Extension strip mirrors bin/slug.sh (the canonical `_history/<slug>/`
+  // recipe) — previously only `.html` was stripped, so `.tsx` canvases got a
+  // `ui-foo.tsx` history dir that /design:rollback (slug.sh: `ui-foo`) could
+  // never find. DDR-102 conflict snapshots rely on the dirs matching.
   return p
     .replace(/\//g, '-')
     .replace(/\s+/g, '_')
-    .replace(/\.html$/i, '')
+    .replace(/\.(tsx|jsx|html?|css|json|md)$/i, '')
     .replace(/^\.+/, '')
     .toLowerCase();
 }
@@ -60,8 +65,20 @@ export function createHistory(ctx: Context): History {
 
   async function writeSnapshot(file: string, contentBytes: Uint8Array | string, reason: string) {
     const slug = fileSlug(file, ctx.paths.designRel);
-    const ts = new Date().toISOString();
-    const contentPath = snapshotPath(slug, ts);
+    // Snapshot blob keeps the source file's extension (a `.tsx` body snapshot
+    // is a `.tsx` blob); unknown/absent extension falls back to `.html`.
+    const extMatch = /\.(tsx|jsx|html?|css|json|svg|md)$/i.exec(file);
+    const ext = extMatch ? extMatch[0].toLowerCase() : '.html';
+    // Two snapshots can land within the same millisecond (the DDR-102 dual
+    // pre-sync pair does) — toISOString() would collide and the second blob
+    // would overwrite the first. Bump by 1 ms until the slot is free.
+    let tsMs = Date.now();
+    let ts = new Date(tsMs).toISOString();
+    while (existsSync(snapshotPath(slug, ts, ext)) || existsSync(metaPath(slug, ts))) {
+      tsMs += 1;
+      ts = new Date(tsMs).toISOString();
+    }
+    const contentPath = snapshotPath(slug, ts, ext);
     const meta: Snapshot = {
       slug,
       ts,