@1agh/maude 0.25.0 → 0.27.0

package/plugins/design/dev-server/draw/test/palette.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  CURRENT_COLOR,
+  colorDistribution,
+  contrastRatio,
+  isPerceptuallyEven,
+  meetsWcag,
+  oklchRamp,
+  oklchToRgb,
+  parseColor,
+  parseOklch,
+  relativeLuminance,
+  toHex,
+} from '../palette.ts';
+
+describe('parsing', () => {
+  test('hex (short + long)', () => {
+    expect(parseColor('#fff')).toEqual({ r: 255, g: 255, b: 255 });
+    expect(parseColor('#000000')).toEqual({ r: 0, g: 0, b: 0 });
+    expect(parseColor('#1a2b3c')).toEqual({ r: 26, g: 43, b: 60 });
+  });
+  test('rgb()', () => {
+    expect(parseColor('rgb(10, 20, 30)')).toEqual({ r: 10, g: 20, b: 30 });
+  });
+  test('rejects junk', () => {
+    expect(() => parseColor('chartreuse')).toThrow();
+  });
+  test('oklch', () => {
+    const o = parseOklch('oklch(70% 0.1 250)');
+    expect(o.l).toBeCloseTo(0.7, 6);
+    expect(o.c).toBeCloseTo(0.1, 6);
+    expect(o.h).toBeCloseTo(250, 6);
+  });
+});
+
+describe('WCAG contrast', () => {
+  test('black on white is 21:1', () => {
+    expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 1);
+  });
+  test('order independent', () => {
+    expect(contrastRatio('#ffffff', '#000000')).toBeCloseTo(21, 1);
+  });
+  test('#767676 on white ≈ 4.54 (the AA reference gray)', () => {
+    expect(contrastRatio('#767676', '#ffffff')).toBeCloseTo(4.54, 1);
+  });
+  test('relativeLuminance bounds', () => {
+    expect(relativeLuminance('#000000')).toBeCloseTo(0, 6);
+    expect(relativeLuminance('#ffffff')).toBeCloseTo(1, 6);
+  });
+  test('meetsWcag thresholds', () => {
+    expect(meetsWcag(4.5)).toBe(true);
+    expect(meetsWcag(4.49)).toBe(false);
+    expect(meetsWcag(3.2, { large: true })).toBe(true);
+    expect(meetsWcag(3.2, { nonText: true })).toBe(true);
+    expect(meetsWcag(6.9, { level: 'AAA' })).toBe(false);
+    expect(meetsWcag(7.1, { level: 'AAA' })).toBe(true);
+  });
+});
+
+describe('OKLCH → sRGB', () => {
+  test('achromatic extremes', () => {
+    expect(oklchToRgb({ l: 1, c: 0, h: 0 })).toEqual({ r: 255, g: 255, b: 255 });
+    expect(oklchToRgb({ l: 0, c: 0, h: 0 })).toEqual({ r: 0, g: 0, b: 0 });
+  });
+  test('mid achromatic is neutral gray (r=g=b)', () => {
+    const g = oklchToRgb({ l: 0.5, c: 0, h: 0 });
+    expect(g.r).toBe(g.g);
+    expect(g.g).toBe(g.b);
+    expect(g.r).toBeGreaterThan(70);
+    expect(g.r).toBeLessThan(150);
+  });
+  test('a red-ish hue makes red the dominant channel', () => {
+    const red = oklchToRgb({ l: 0.63, c: 0.25, h: 29 });
+    expect(red.r).toBeGreaterThan(red.g);
+    expect(red.r).toBeGreaterThan(red.b);
+  });
+  test('round-trips through hex', () => {
+    expect(toHex(oklchToRgb({ l: 1, c: 0, h: 0 }))).toBe('#ffffff');
+  });
+});
+
+describe('ramps', () => {
+  test('evenly spaced lightness', () => {
+    const ramp = oklchRamp({ hue: 250, chroma: 0.1, count: 5, lMax: 0.9, lMin: 0.3 });
+    expect(ramp).toHaveLength(5);
+    expect(ramp[0].l).toBeCloseTo(0.9, 6);
+    expect(ramp[4].l).toBeCloseTo(0.3, 6);
+    expect(isPerceptuallyEven(ramp)).toBe(true);
+  });
+  test('detects an uneven ramp', () => {
+    const uneven = [
+      { l: 0.9, c: 0.1, h: 0 },
+      { l: 0.85, c: 0.1, h: 0 },
+      { l: 0.4, c: 0.1, h: 0 },
+    ];
+    expect(isPerceptuallyEven(uneven)).toBe(false);
+  });
+});
+
+describe('60-30-10 distribution', () => {
+  test('passes when accent ≤ 15%', () => {
+    const r = colorDistribution([
+      { role: 'dominant', area: 60 },
+      { role: 'secondary', area: 30 },
+      { role: 'accent', area: 10 },
+    ]);
+    expect(r.ok).toBe(true);
+    expect(r.accentRatio).toBeCloseTo(0.1, 6);
+    expect(r.dominantRole).toBe('dominant');
+  });
+  test('fails when accent dominates', () => {
+    const r = colorDistribution([
+      { role: 'base', area: 50 },
+      { role: 'accent', area: 50 },
+    ]);
+    expect(r.ok).toBe(false);
+    expect(r.accentRatio).toBeCloseTo(0.5, 6);
+  });
+});
+
+test('CURRENT_COLOR constant', () => {
+  expect(CURRENT_COLOR).toBe('currentColor');
+});

package/plugins/design/dev-server/draw/test/primitives.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  VIEWBOX,
+  boxViewBox,
+  circle,
+  group,
+  line,
+  place,
+  polygon,
+  rect,
+  snap,
+  squareViewBox,
+  text,
+  transformString,
+  use,
+} from '../primitives.ts';
+
+describe('snap', () => {
+  test('grid 0 is a no-op (optical adjustments survive)', () => {
+    expect(snap(12.34)).toBe(12.34);
+    expect(snap(12.34, 0)).toBe(12.34);
+  });
+  test('snaps to nearest multiple', () => {
+    expect(snap(13, 8)).toBe(16);
+    expect(snap(11, 8)).toBe(8);
+    expect(snap(7, 4)).toBe(8);
+    expect(snap(5, 4)).toBe(4);
+  });
+});
+
+describe('constructors', () => {
+  test('rect carries geometry + style', () => {
+    const r = rect({ x: 1, y: 2, width: 10, height: 20, rx: 3, fill: '#abc' });
+    expect(r).toMatchObject({ el: 'rect', x: 1, y: 2, width: 10, height: 20, rx: 3, fill: '#abc' });
+  });
+  test('rect snaps geometry to grid when requested', () => {
+    const r = rect({ x: 3, y: 5, width: 13, height: 21, grid: 8 }) as {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+    expect(r.x).toBe(0);
+    expect(r.y).toBe(8);
+    expect(r.width).toBe(16);
+    expect(r.height).toBe(24);
+  });
+  test('grid is not leaked as a primitive field', () => {
+    const r = rect({ x: 0, y: 0, width: 8, height: 8, grid: 8 }) as Record<string, unknown>;
+    expect(r.grid).toBeUndefined();
+  });
+  test('circle / line / polygon shapes', () => {
+    expect(circle({ cx: 12, cy: 12, r: 6 })).toMatchObject({ el: 'circle', cx: 12, cy: 12, r: 6 });
+    expect(line({ x1: 0, y1: 0, x2: 4, y2: 4 })).toMatchObject({ el: 'line', x2: 4 });
+    const poly = polygon({
+      points: [
+        { x: 0, y: 0 },
+        { x: 4, y: 0 },
+        { x: 2, y: 4 },
+      ],
+    }) as {
+      points: Array<{ x: number }>;
+    };
+    expect(poly.points).toHaveLength(3);
+  });
+  test('text carries content + type attrs', () => {
+    const t = text({
+      x: 0,
+      y: 0,
+      content: 'Hi',
+      fontSize: 16,
+      fontWeight: 700,
+      textAnchor: 'middle',
+    });
+    expect(t).toMatchObject({
+      el: 'text',
+      content: 'Hi',
+      fontSize: 16,
+      fontWeight: 700,
+      textAnchor: 'middle',
+    });
+  });
+  test('use references a symbol id', () => {
+    expect(use({ href: '#leaf', x: 2, y: 4 })).toMatchObject({
+      el: 'use',
+      href: '#leaf',
+      x: 2,
+      y: 4,
+    });
+  });
+});
+
+describe('transform composition', () => {
+  test('transformString emits canonical translate→rotate→scale, skipping identity', () => {
+    expect(transformString({})).toBe('');
+    expect(transformString({ x: 4, y: 6 })).toBe('translate(4 6)');
+    expect(transformString({ rotate: 45 })).toBe('rotate(45)');
+    expect(transformString({ rotate: 45, originX: 12, originY: 12 })).toBe('rotate(45 12 12)');
+    expect(transformString({ x: 2, scale: 1.5, rotate: 90 })).toBe(
+      'translate(2 0) rotate(90) scale(1.5)'
+    );
+  });
+  test('place wraps children in a transformed group', () => {
+    const g = place([circle({ cx: 0, cy: 0, r: 1 })], { x: 10, y: 10 }) as {
+      el: string;
+      transform: string;
+      children: unknown[];
+    };
+    expect(g.el).toBe('group');
+    expect(g.transform).toBe('translate(10 10)');
+    expect(g.children).toHaveLength(1);
+  });
+  test('group passes opacity + id', () => {
+    const g = group([], { opacity: 0.5, id: 'x' }) as { opacity: number; id: string };
+    expect(g.opacity).toBe(0.5);
+    expect(g.id).toBe('x');
+  });
+});
+
+describe('viewBox presets', () => {
+  test('square / box helpers', () => {
+    expect(squareViewBox(24)).toBe('0 0 24 24');
+    expect(boxViewBox(1200, 630)).toBe('0 0 1200 630');
+  });
+  test('named presets', () => {
+    expect(VIEWBOX.icon).toBe('0 0 24 24');
+    expect(VIEWBOX.logo).toBe('0 0 64 64');
+  });
+});

package/plugins/design/dev-server/draw/test/serialize.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from 'bun:test';
+import { path, circle, group, line, rect, text } from '../primitives.ts';
+import type { DrawPrimitive } from '../primitives.ts';
+import { primitivesToNodes, toJsx, toSvg } from '../serialize.ts';
+
+const SAMPLE: DrawPrimitive[] = [
+  rect({ x: 2, y: 2, width: 20, height: 20, rx: 4 }), // fillable, no paint → currentColor
+  circle({ cx: 12, cy: 12, r: 6, stroke: '#333', strokeWidth: 1.5 }), // stroked → fill none
+  line({ x1: 0, y1: 0, x2: 24, y2: 24 }), // bare line → stroke currentColor
+  group([path({ d: 'M0 0 L4 4', fill: 'none', stroke: 'currentColor' })], {
+    transform: 'translate(1 1)',
+  }),
+  text({ x: 12, y: 20, content: 'Hi & <there>', fontSize: 8, textAnchor: 'middle' }),
+];
+
+const OPTS = { viewBox: '0 0 24 24', a11y: { title: 'Sample mark', desc: 'A test drawing' } };
+
+describe('toSvg', () => {
+  const svg = toSvg(SAMPLE, OPTS);
+  test('is a complete accessible document', () => {
+    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    expect(svg).toContain('viewBox="0 0 24 24"');
+    expect(svg).toContain('role="img"');
+    expect(svg).toContain('<title>Sample mark</title>');
+    expect(svg).toContain('<desc>A test drawing</desc>');
+  });
+  test('defaults a paint-less fillable shape to currentColor', () => {
+    expect(svg).toMatch(/<rect[^>]*fill="currentColor"/);
+  });
+  test('stroked shape with no fill gets fill="none"', () => {
+    expect(svg).toMatch(/<circle[^>]*fill="none"[^>]*stroke="#333"/);
+  });
+  test('bare line inherits stroke currentColor', () => {
+    expect(svg).toMatch(/<line[^>]*stroke="currentColor"/);
+  });
+  test('kebab-case attribute names + escaped text', () => {
+    expect(svg).toContain('stroke-width="1.5"');
+    expect(svg).toContain('text-anchor="middle"');
+    expect(svg).toContain('Hi &amp; &lt;there&gt;');
+  });
+  test('self-closes leaf shapes', () => {
+    expect(svg).toMatch(/<rect[^>]*\/>/);
+  });
+});
+
+describe('toJsx', () => {
+  const jsx = toJsx(SAMPLE, OPTS);
+  test('uses camelCase attribute dialect', () => {
+    expect(jsx).toContain('strokeWidth="1.5"');
+    expect(jsx).toContain('textAnchor="middle"');
+  });
+  test('omits the xmlns document marker', () => {
+    expect(jsx).not.toContain('xmlns=');
+  });
+  test('keeps viewBox + role + title', () => {
+    expect(jsx).toContain('viewBox="0 0 24 24"');
+    expect(jsx).toContain('role="img"');
+    expect(jsx).toContain('<title>Sample mark</title>');
+  });
+});
+
+describe('SVG ↔ JSX parity (the single-source invariant)', () => {
+  const svg = toSvg(SAMPLE, OPTS);
+  const jsx = toJsx(SAMPLE, OPTS);
+
+  const openTags = (s: string): string[] =>
+    Array.from(s.matchAll(/<([a-zA-Z][a-zA-Z0-9]*)/g), (m) => m[1]);
+  const numbers = (s: string): number[] =>
+    Array.from(s.replace(/\sxmlns="[^"]*"/, '').matchAll(/-?\d+\.?\d*/g), (m) => Number(m[0])).sort(
+      (a, b) => a - b
+    );
+
+  test('identical element sequence', () => {
+    expect(openTags(jsx)).toEqual(openTags(svg));
+  });
+  test('identical geometry (number multiset, ignoring xmlns)', () => {
+    expect(numbers(jsx)).toEqual(numbers(svg));
+  });
+  test('both built from one node tree (primitivesToNodes)', () => {
+    const root = primitivesToNodes(SAMPLE, OPTS);
+    expect(root.tag).toBe('svg');
+    // title + desc + 5 primitives
+    expect(root.children.map((c) => c.tag)).toEqual([
+      'title',
+      'desc',
+      'rect',
+      'circle',
+      'line',
+      'g',
+      'text',
+    ]);
+  });
+});
+
+describe('decorative a11y', () => {
+  test('decorative marks get aria-hidden and no title/desc/role', () => {
+    const svg = toSvg([circle({ cx: 12, cy: 12, r: 6 })], {
+      viewBox: '0 0 24 24',
+      a11y: { decorative: true },
+    });
+    expect(svg).toContain('aria-hidden="true"');
+    expect(svg).not.toContain('role="img"');
+    expect(svg).not.toContain('<title>');
+  });
+});

package/plugins/design/dev-server/sync/agent.ts

@@ -317,15 +317,30 @@ export function createCanvasSyncAgent(opts: CanvasSyncAgentOptions): CanvasSyncA
     lastMeta = docMeta;
     lastCss = docCss;
     if (localHtml !== docHtml) {
-      // Local had divergent, non-empty content that hub-wins is discarding —
-      // notify so the user knows their local edits were overwritten (Task 8).
-      // An absent/empty local file is a clean first-sync, not a conflict.
-      if (localHtml !== null && localHtml.trim() !== '') {
-        opts.onConflict?.({ slug, kind: 'cold-start-hub-wins' });
+      // DATA-LOSS GUARD: an EMPTY hub doc at cold-start means the hub holds no
+      // body for this slug yet (fresh / never-seeded hub) — NOT an authoritative
+      // "this canvas is blank". Overwriting a non-empty local body with it would
+      // silently destroy the canvas (observed in the wild: a fresh hub emptied
+      // every local .tsx on first connect). The comments/annotations/meta/css
+      // branches below already skip empty-doc writes, and the shared-doc
+      // projection path documents the same "never clobber non-empty local with
+      // an empty doc value" rule — the HTML body was the one branch missing it.
+      // Resolution: seed the doc FROM local instead, so the body survives AND
+      // the hub gets our content (local→doc, exactly like a first-sync seed).
+      if (docHtml === '' && localHtml !== null && localHtml.trim() !== '') {
+        applyHtmlToDoc(doc, localHtml, origin);
+        lastHtml = localHtml;
+      } else {
+        // Local had divergent, non-empty content that hub-wins is discarding —
+        // notify so the user knows their local edits were overwritten (Task 8).
+        // An absent/empty local file is a clean first-sync, not a conflict.
+        if (localHtml !== null && localHtml.trim() !== '') {
+          opts.onConflict?.({ slug, kind: 'cold-start-hub-wins' });
+        }
+        const hash = hashBytes(docHtml);
+        echoGuard.record(paths.html, hash);
+        writer(paths.html, docHtml);
       }
-      const hash = hashBytes(docHtml);
-      echoGuard.record(paths.html, hash);
-      writer(paths.html, docHtml);
     }
     if (docCommentsStr !== '' && localComments !== docCommentsStr) {
       const hash = hashBytes(docCommentsStr);

package/plugins/design/dev-server/sync/index.ts

@@ -246,6 +246,19 @@ export function createSyncRuntime(
       return;
     }
 
+    // DDR-072 — loud boot banner when the project-level TSX opt-in is on against
+    // a NON-loopback hub. Broadening from hand-picked canvases to "all .tsx"
+    // also broadens the WebRTC/self-nav exfil residual (the sandbox contains
+    // execution but not that lane) to every synced canvas, so this must never be
+    // silent: a sneaky PR that flips `linkedHub.syncTsx` surfaces here on the
+    // next `serve`. Loopback hubs (local dev) skip it — no remote exfil concern.
+    if (linkedHub.syncTsx === true && !isLoopbackHubUrl(linkedHub.url)) {
+      const tsxCount = canvases.filter((c) => c.html.toLowerCase().endsWith('.tsx')).length;
+      console.warn(
+        `[sync] syncTsx=true — ${tsxCount} TSX canvas BODIES will sync to ${linkedHub.url} (project-level opt-in, DDR-072). The sandbox contains execution, but the WebRTC/self-nav exfil residual now applies to ALL synced canvases — only for hubs you operate or fully trust. Set a canvas .meta.json "syncable": false to exclude it.`
+      );
+    }
+
     statusStore =
       opts.statusStore ??
       createSyncStatusStore({
@@ -599,6 +612,12 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
   // `.tsx` syncs — the per-canvas opt-in is inert without the sandbox, and
   // decoupling them would re-open the CRITICAL F1 RCE (DDR-060, DDR-054 §F1).
   const splitActive = !!ctx.canvasOrigin;
+  // DDR-072 — project-level TSX opt-in. When `linkedHub.syncTsx` is true, a
+  // `.tsx` with no explicit sidecar verdict defaults to syncable (the per-canvas
+  // sidecar still wins either way — see resolveSyncable). Coupled with the
+  // sandbox via `splitActive` exactly like the per-canvas opt-in, so the flag is
+  // inert without the F1 containment (DDR-060 Lock-2 invariant).
+  const projectSyncTsx = ctx.cfg.linkedHub?.syncTsx === true;
   for (const group of ctx.cfg.canvasGroups) {
     const groupAbs = path.join(ctx.paths.designRoot, group.path);
     if (!existsSync(groupAbs)) continue;
@@ -609,27 +628,37 @@ export async function scanCanvases(ctx: Context): Promise<CanvasScan> {
       ctx.paths.designRel,
       out,
       counter,
-      splitActive
+      splitActive,
+      projectSyncTsx
     );
   }
   return { canvases: out, tsxCount: counter.tsx };
 }
 
 /**
- * T3 (9.1-B) — per-canvas sync opt-in. A `.tsx` canvas is syncable only if its
- * sibling `<name>.meta.json` declares `"syncable": true`. The flag is set by a
- * human editing the sidecar; it is deliberately NOT in the untrusted
- * `/_api/canvas-meta` PATCH whitelist (api.ts), so a hostile canvas/hub cannot
- * flip its own body into the sync set. Missing sidecar / parse error → false.
+ * T3 (9.1-B) + DDR-072 — resolve whether a `.tsx` body is syncable.
+ *
+ * Tri-state precedence:
+ *  1. The sibling `<name>.meta.json` `"syncable"` boolean ALWAYS wins when
+ *     present (`true` opts in, `false` opts out) — set by a human editing the
+ *     sidecar; deliberately NOT in the untrusted `/_api/canvas-meta` PATCH
+ *     whitelist (api.ts), so a hostile canvas/hub cannot flip its own body into
+ *     or out of the sync set.
+ *  2. Otherwise fall back to the project-level `linkedHub.syncTsx` default.
+ *
+ * Missing sidecar / parse error → no explicit verdict → the project default.
  */
-function readSyncableFlag(bodyAbs: string): boolean {
+function resolveSyncable(bodyAbs: string, projectSyncTsx: boolean): boolean {
   const metaAbs = bodyAbs.replace(/\.(tsx|html)$/i, '.meta.json');
   try {
     const obj = JSON.parse(readFileSync(metaAbs, 'utf8'));
-    return obj && typeof obj === 'object' && obj.syncable === true;
+    if (obj && typeof obj === 'object' && typeof obj.syncable === 'boolean') {
+      return obj.syncable; // per-canvas verdict wins (true OR explicit false)
+    }
   } catch {
-    return false;
+    /* missing / unparseable sidecar → defer to the project default below */
   }
+  return projectSyncTsx;
 }
 
 async function walk(
@@ -639,7 +668,8 @@ async function walk(
   designRel: string,
   acc: CanvasDescriptor[],
   counter: { tsx: number },
-  splitActive: boolean
+  splitActive: boolean,
+  projectSyncTsx: boolean
 ): Promise<void> {
   let entries: import('node:fs').Dirent[];
   try {
@@ -652,16 +682,26 @@ async function walk(
     if (entry.isDirectory()) {
       // Skip plugin runtime dirs.
       if (entry.name.startsWith('_')) continue;
-      await walk(abs, designRoot, commentsDir, designRel, acc, counter, splitActive);
+      await walk(
+        abs,
+        designRoot,
+        commentsDir,
+        designRel,
+        acc,
+        counter,
+        splitActive,
+        projectSyncTsx
+      );
       continue;
     }
     const ext = path.extname(entry.name).toLowerCase();
-    // T3 (9.1-B) — a `.tsx` syncs ONLY when the sandbox is active AND the
-    // sidecar opts in (see readSyncableFlag + the splitActive coupling above).
-    // Otherwise tally it for 9.1-D's loud zero-syncable surface so the message
-    // can explain *why* it isn't syncing.
+    // T3 (9.1-B) + DDR-072 — a `.tsx` syncs ONLY when the sandbox is active AND
+    // it resolves to syncable (per-canvas sidecar verdict, else the project-level
+    // `linkedHub.syncTsx` default — see resolveSyncable + the splitActive
+    // coupling above). Otherwise tally it for 9.1-D's loud zero-syncable surface
+    // so the message can explain *why* it isn't syncing.
     if (ext === '.tsx') {
-      if (!(splitActive && readSyncableFlag(abs))) {
+      if (!(splitActive && resolveSyncable(abs, projectSyncTsx))) {
         counter.tsx += 1;
         continue;
       }
@@ -712,7 +752,7 @@ export function buildNoSyncablePayload(
 ): NoSyncablePayload {
   const reason =
     tsxCount > 0
-      ? `${tsxCount} TSX canvas(es) found but none are syncable — a TSX body syncs only when the canvas opts in (.meta.json "syncable": true). The canvas sandbox is on by default; MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it (and TSX sync with it). See DDR-060.`
+      ? `${tsxCount} TSX canvas(es) found but none are syncable — a TSX body syncs when the canvas opts in (.meta.json "syncable": true) OR the project opts in all of them (.design/config.json linkedHub.syncTsx: true, DDR-072). The canvas sandbox is on by default; MAUDE_CANVAS_ORIGIN_SPLIT=0 disables it (and TSX sync with it). See DDR-060.`
       : `no canvases found under ${designRoot}.`;
   return {
     linked: true,
@@ -916,3 +956,19 @@ export function checkUrlScheme(url: string): string | null {
   }
   return null;
 }
+
+/**
+ * DDR-072 — true when the hub URL points at a loopback host (localhost,
+ * 127.0.0.1, ::1). Used to suppress the `syncTsx` boot banner for local dev
+ * hubs (no remote exfil concern). Unparseable URL → treated as non-loopback
+ * (fail loud / show the banner). Mirrors checkUrlScheme's loopback host set.
+ */
+export function isLoopbackHubUrl(url: string): boolean {
+  let host: string;
+  try {
+    host = new URL(url).hostname.toLowerCase();
+  } catch {
+    return false;
+  }
+  return host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '[::1]';
+}

package/plugins/design/dev-server/test/sync-agent.test.ts

@@ -202,6 +202,34 @@ describe('CanvasSyncAgent — cold start reconciliation', () => {
     expect(htmlFromDoc(docB)).toBe('<button>hub-v2</button>');
   });
 
+  test('empty hub doc does NOT clobber a non-empty local body — seeds local up instead (data-loss guard)', async () => {
+    // Local holds the real canvas body; the hub is fresh — no state for this
+    // slug yet (docB starts empty → docHtml === ''). The old behaviour wrote
+    // the empty doc over disk and emptied the file; the guard must keep local.
+    writeFileSync(paths().html, '<button>real-canvas</button>');
+
+    let conflicts = 0;
+    agent = createCanvasSyncAgent({
+      slug: 'screen',
+      doc: docB,
+      paths: paths(),
+      echoGuard: createEchoGuard(),
+      flushMs: 0,
+      onConflict: () => {
+        conflicts++;
+      },
+    });
+    agent.start();
+    await agent.reconcile();
+
+    // The local body MUST survive — an empty hub must never empty a real canvas.
+    expect(readFileSync(paths().html, 'utf8')).toBe('<button>real-canvas</button>');
+    // …and it is seeded UP to the hub instead of being discarded (local→doc).
+    expect(htmlFromDoc(docA)).toBe('<button>real-canvas</button>');
+    // An empty-hub seed is not a "hub overwrote your local" conflict.
+    expect(conflicts).toBe(0);
+  });
+
   test('identical disk + doc states: no disk write', async () => {
     writeFileSync(paths().html, '<button>same</button>');
     applyHtmlToDoc(docA, '<button>same</button>');

package/plugins/design/dev-server/test/sync-runtime.test.ts

@@ -783,6 +783,58 @@ describe('scanCanvases', () => {
   });
 });
 
+// DDR-072 — project-level TSX opt-in (linkedHub.syncTsx). A .tsx with no
+// explicit sidecar verdict defaults to syncable when the project flag is on;
+// the per-canvas sidecar still wins; the sandbox coupling is preserved.
+describe('scanCanvases — project-level syncTsx (DDR-072)', () => {
+  test('syncTsx:true + sandbox ON admits a .tsx WITHOUT a per-canvas opt-in', async () => {
+    const ctx = makeCtx(
+      { url: 'https://h.example.com', linkedAt: 1, syncTsx: true },
+      'http://localhost:9'
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'free.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
+    const free = scan.canvases.find((c) => c.slug === 'ui-free');
+    expect(free).toBeDefined();
+    expect(free?.html).toBe(join(ctx.paths.designRoot, 'ui', 'free.tsx'));
+    expect(scan.tsxCount).toBe(0);
+  });
+
+  test('syncTsx:true is INERT when the sandbox split is OFF (Lock-2 coupling preserved)', async () => {
+    // canvasOrigin undefined → sandbox not in force → no .tsx syncs, flag or not.
+    const ctx = makeCtx({ url: 'https://h.example.com', linkedAt: 1, syncTsx: true });
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'free.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
+    expect(scan.canvases.map((c) => c.slug)).not.toContain('ui-free');
+    expect(scan.tsxCount).toBe(1);
+  });
+
+  test('per-canvas "syncable": false OVERRIDES syncTsx:true (sidecar wins)', async () => {
+    const ctx = makeCtx(
+      { url: 'https://h.example.com', linkedAt: 1, syncTsx: true },
+      'http://localhost:9'
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'secret.tsx'), 'export default () => null;');
+    writeFileSync(
+      join(ctx.paths.designRoot, 'ui', 'secret.meta.json'),
+      JSON.stringify({ syncable: false, title: 'Secret' })
+    );
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'open.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
+    const slugs = scan.canvases.map((c) => c.slug);
+    expect(slugs).toContain('ui-open'); // no sidecar → project default
+    expect(slugs).not.toContain('ui-secret'); // explicit opt-out wins
+  });
+
+  test('without the flag (syncTsx absent) a .tsx still needs the per-canvas opt-in', async () => {
+    const ctx = makeCtx({ url: 'https://h.example.com', linkedAt: 1 }, 'http://localhost:9');
+    writeFileSync(join(ctx.paths.designRoot, 'ui', 'plain.tsx'), 'export default () => null;');
+    const scan = await scanCanvases(ctx);
+    expect(scan.canvases.map((c) => c.slug)).not.toContain('ui-plain');
+    expect(scan.tsxCount).toBe(1);
+  });
+});
+
 describe('buildNoSyncablePayload', () => {
   test('TSX-only project: reason names the count + DDR-060', () => {
     const p = buildNoSyncablePayload('https://h.example.com', 3, '/proj/.design');

package/plugins/design/dev-server/tsconfig.json

@@ -21,6 +21,13 @@
     "forceConsistentCasingInFileNames": true,
     "allowImportingTsExtensions": true
   },
-  "include": ["*.ts", "client/**/*.ts", "client/**/*.tsx", "client/**/*.jsx", "test/**/*.ts"],
+  "include": [
+    "*.ts",
+    "draw/**/*.ts",
+    "client/**/*.ts",
+    "client/**/*.tsx",
+    "client/**/*.jsx",
+    "test/**/*.ts"
+  ],
   "exclude": ["node_modules", "dist", "**/*.test.ts"]
 }