@1agh/maude 0.28.1 → 0.29.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
@@ -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);

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

@@ -20,6 +20,7 @@ import type { Inspect } from './inspect.ts';
 import { canvasSlug, writeLocator } from './locator.ts';
 import { DEV_SERVER_ROOT } from './paths.ts';
 import { getRuntimeBundle, packageForSlug, RUNTIME_PACKAGES, slugFor } from './runtime-bundle.ts';
+import { loadWhatsNew } from './whats-new.ts';
 
 // Real disk install root — never the virtual `/$bunfs/root` of compiled bins.
 // See paths.ts for the resolution logic + Phase 19.1 / v0.18.1 rationale.
@@ -131,7 +132,10 @@ function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
 // and inside the standalone binary's embedded FS in --compile mode.
 const DIST_DIR = join(HERE, 'dist');
 const CLIENT_DIR = join(HERE, 'client');
-const TEMPLATES_DIR = join(HERE, '..', 'templates');
+// Templates stayed under the design *plugin* (plugins/design/templates) when the
+// dev-server moved to apps/studio (DDR-095) — both ship in the npm tarball, so
+// from DEV_SERVER_ROOT (apps/studio) reach across with ../../plugins/design.
+const TEMPLATES_DIR = join(HERE, '..', '..', 'plugins', 'design', 'templates');
 
 // In-memory transpile cache. Key = absolute canvas path. Repeat GETs against an
 // unchanged source skip the parse + ID-injection + Bun.Transpiler + Bun.build
@@ -424,6 +428,12 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
     '/_config': () => Response.json({ ...ctx.cfg, canvasOrigin: ctx.canvasOrigin }),
 
+    // What's New feed (DDR-A) — read-only product-update list surfaced in the
+    // Maude UI chrome. Main-origin only by omission from the canvas-origin
+    // allowlist below (the untrusted canvas iframe never needs it).
+    '/_api/whats-new': () =>
+      Response.json(loadWhatsNew(), { headers: { 'Cache-Control': 'no-store' } }),
+
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
 
@@ -582,6 +592,91 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/canvas': async (req: Request) => {
+      // Phase 22 — create + soft-delete a canvas from the browser file tree.
+      // POST   body { name, kind?: "brief-board", group? } → 201 { file, rel, slug }
+      // DELETE ?file=<rel>                                 → 200 { rel, slug, trashed[] }
+      // MAIN ORIGIN ONLY: this route is intentionally absent from
+      // startCanvasServer's allowlist (DDR-054) — the untrusted canvas iframe
+      // origin must never reach a file-write/-delete endpoint. Validation lives in
+      // api.createCanvas / api.deleteCanvas (containment + group allowlist).
+      if (req.method === 'DELETE') {
+        const file = new URL(req.url).searchParams.get('file');
+        const result = await api.deleteCanvas({ file });
+        if (!result.ok) {
+          return Response.json(
+            { ok: false, error: result.error },
+            { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+          );
+        }
+        return Response.json(
+          {
+            ok: true,
+            rel: result.rel,
+            slug: result.slug,
+            trashed: result.trashed,
+            trashDir: result.trashDir,
+          },
+          { status: 200, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      const body = await readJson<{ name?: unknown; kind?: unknown; group?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.createCanvas(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, file: result.file, rel: result.rel, slug: result.slug },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/asset': async (req: Request) => {
+      // Phase 23 — binary image upload from the canvas (drag-drop / paste / the
+      // a11y file picker). POST raw image bytes → content-addressed write under
+      // <designRoot>/assets/<sha8>.<ext>, returns 201 { path }. This route is on
+      // the canvas-origin allowlist (CANVAS_SAFE_API below) — a bigger grant than
+      // the inert annotation-SVG write (binary, disk) — so the caps in
+      // api.saveAsset (magic-byte sniff, 10 MB ceiling, content-addressed name,
+      // traversal guard, no-SVG, dedupe) are the load-bearing trust mitigation,
+      // NOT optional. See DDR (Task 9).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      // Early reject on a declared oversize body (the post-read length check in
+      // saveAsset is the authoritative gate — Content-Length can be omitted/lied).
+      const declared = Number(req.headers.get('content-length') || '0');
+      if (Number.isFinite(declared) && declared > 10 * 1024 * 1024) {
+        return Response.json(
+          { ok: false, error: 'asset exceeds the 10 MB cap' },
+          { status: 413, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      let bytes: Uint8Array;
+      try {
+        bytes = new Uint8Array(await req.arrayBuffer());
+      } catch {
+        return new Response('could not read request body', { status: 400 });
+      }
+      const result = await api.saveAsset(bytes);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status ?? 400, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { path: result.path },
+        { status: 201, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/export-history': async (req: Request) => {
       // Phase 6.5 T10 — read-only recent-exports feed for the dialog's
       // Recent tab. Writes happen as a side-effect of `/_api/export`.
@@ -791,6 +886,11 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         headers: {
           'Content-Type': MIME[e] || 'application/octet-stream',
           'Cache-Control': 'no-store',
+          // DDR-088 follow-up — never let a browser MIME-sniff a served file
+          // (e.g. an uploaded GIF/WEBP polyglot) into a richer type. Assets are
+          // only referenced via <image href> + the canvas CSP blocks script, so
+          // this is defense-in-depth on the static lane.
+          'X-Content-Type-Options': 'nosniff',
         },
       });
     } catch (err) {
@@ -837,6 +937,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     '/_api/git-user', // presence display name
     '/_api/canvas-meta', // layout/viewport sidecar (GET + PATCH)
     '/_api/annotations', // annotation SVG (GET + PUT) — drives the collab bridge
+    '/_api/asset', // Phase 23 — capped binary image upload (sniff+10MB+sha8 name+no-SVG)
     '/_api/git-committers', // @mention autocomplete
     '/_api/ai', // AI-activity banner
     '/_comments', // per-file comment list (renders pins)