@1agh/maude 0.28.0 → 0.29.0

package/{plugins/design/dev-server → apps/studio}/test/sync-hardening.test.ts

@@ -3,6 +3,7 @@
 // Targets the 8 quick-win fixes recorded in DDR-054 §2 against the findings
 // in `.ai/logs/security-reviews/phase-9-task-4-bidi-fs-sync-{defender,attacker}.md`.
 
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import {
   chmodSync,
   existsSync,
@@ -15,20 +16,18 @@ import {
 } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
-
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import * as Y from 'yjs';
 
 import { createCanvasSyncAgent } from '../sync/agent.ts';
 import { atomicWrite } from '../sync/atomic-write.ts';
 import {
-  MAX_ANNOTATIONS_BYTES,
-  MAX_COMMENTS_BYTES,
-  MAX_HTML_BYTES,
   applyAnnotationsToDoc,
   applyCommentsToDoc,
   applyHtmlToDoc,
   htmlFromDoc,
+  MAX_ANNOTATIONS_BYTES,
+  MAX_COMMENTS_BYTES,
+  MAX_HTML_BYTES,
 } from '../sync/codec.ts';
 import { createEchoGuard, hashBytes } from '../sync/echo-guard.ts';
 import { createFsReader } from '../sync/fs-mirror.ts';

package/{plugins/design/dev-server → apps/studio}/test/sync-hubs-config.test.ts

@@ -1,11 +1,10 @@
 // hubs-config reader tests — Phase 9 Task 4.
 
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import { chmodSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
-
 import { getHubToken, hubsConfigPath, loadHubsConfig, normalizeUrl } from '../sync/hubs-config.ts';
 
 let dir: string;

package/{plugins/design/dev-server → apps/studio}/test/sync-runtime.test.ts

@@ -5,6 +5,7 @@
 // honors linkedHub config, discovers canvases, wires up agents, and
 // dispatches fs events through the bus correctly.
 
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import {
   chmodSync,
   existsSync,
@@ -16,8 +17,6 @@ import {
 } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
-
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
@@ -29,10 +28,10 @@ import { createBus } from '../context.ts';
 import { createConnectionMonitor } from '../sync/connection-state.ts';
 import {
   type AwarenessRegistry,
-  type SyncProvider,
   buildNoSyncablePayload,
   createSyncRuntime,
   discoverCanvases,
+  type SyncProvider,
   scanCanvases,
   toWsUrl,
 } from '../sync/index.ts';
@@ -108,11 +107,7 @@ function makeCtx(linkedHub?: DevServerConfig['linkedHub'], canvasOrigin?: string
 }
 
 function inMemoryProviderFactory(): {
-  factory: (args: {
-    url: string;
-    token: string;
-    documentName: string;
-  }) => SyncProvider;
+  factory: (args: { url: string; token: string; documentName: string }) => SyncProvider;
   peerOf: (slug: string) => Y.Doc;
 } {
   // Map of slug -> { local, peer } Y.Docs cross-linked via applyUpdate.

package/{plugins/design/dev-server → apps/studio}/test/sync-status.test.ts

@@ -3,7 +3,7 @@
 import { describe, expect, test } from 'bun:test';
 
 import type { SyncStatusSnapshot } from '../sync/connection-state.ts';
-import { type SyncStatusPayload, createSyncStatusStore } from '../sync/status.ts';
+import { createSyncStatusStore, type SyncStatusPayload } from '../sync/status.ts';
 
 function snap(partial: Partial<SyncStatusSnapshot> = {}): SyncStatusSnapshot {
   return {

package/{plugins/design/dev-server → apps/studio}/test/sync-untrusted.test.ts

@@ -3,12 +3,11 @@
 // for the syncable set, cleared when empty, stale entries dropped on re-write,
 // and user-authored `.claudeignore` content outside the block preserved.
 
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
-
 import type { Context } from '../context.ts';
 import type { CanvasDescriptor } from '../sync/index.ts';
 import { clearUntrustedMarkers, writeUntrustedMarkers } from '../sync/untrusted.ts';

package/apps/studio/test/tour-overlay.test.tsx

@@ -0,0 +1,56 @@
+// tour-overlay — Phase 3. Render contract for the hand-rolled tour engine.
+//
+// renderToStaticMarkup doesn't run effects, so the rect stays null on the
+// server render → the overlay falls back to a centered card + scrim. We assert
+// the a11y dialog contract + step/nav wiring; keyboard/focus-trap behavior is a
+// live-only concern (verified via agent-browser).
+
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { TourOverlay } from '../client/tour/overlay.jsx';
+
+const STEP = { target: '.x', title: 'Welcome', body: 'Body copy here' };
+
+describe('TourOverlay', () => {
+  test('renders an accessible dialog with the first step', () => {
+    const html = renderToStaticMarkup(
+      <TourOverlay open steps={[STEP]} onClose={() => {}} onComplete={() => {}} />
+    );
+    expect(html).toContain('mdcc-tour');
+    expect(html).toContain('role="dialog"');
+    expect(html).toContain('aria-modal="true"');
+    expect(html).toContain('Welcome');
+    expect(html).toContain('Body copy here');
+    expect(html).toContain('1 / 1');
+    expect(html).toContain('mdcc-tour__scrim'); // no rect on the server → scrim, not spotlight
+  });
+
+  test('single step shows Done (not Next) and no Back', () => {
+    const html = renderToStaticMarkup(
+      <TourOverlay open steps={[STEP]} onClose={() => {}} onComplete={() => {}} />
+    );
+    expect(html).toContain('Done');
+    expect(html).not.toContain('mdcc-tour__back');
+  });
+
+  test('multi-step first page shows Next, the counter, and no Back yet', () => {
+    const steps = [STEP, { ...STEP, title: 'Two' }, { ...STEP, title: 'Three' }];
+    const html = renderToStaticMarkup(
+      <TourOverlay open steps={steps} onClose={() => {}} onComplete={() => {}} />
+    );
+    expect(html).toContain('1 / 3');
+    expect(html).toContain('Next');
+    expect(html).not.toContain('mdcc-tour__back'); // i === 0
+  });
+
+  test('closed or empty renders nothing', () => {
+    expect(
+      renderToStaticMarkup(
+        <TourOverlay open={false} steps={[STEP]} onClose={() => {}} onComplete={() => {}} />
+      )
+    ).toBe('');
+    expect(
+      renderToStaticMarkup(<TourOverlay open steps={[]} onClose={() => {}} onComplete={() => {}} />)
+    ).toBe('');
+  });
+});

package/{plugins/design/dev-server → apps/studio}/test/use-agent-presence.test.tsx

@@ -64,7 +64,10 @@ describe('use-agent-presence / provider gating', () => {
   function Wrap({
     initialAgent,
     children,
-  }: { initialAgent: AgentPresence | null; children: ReactNode }) {
+  }: {
+    initialAgent: AgentPresence | null;
+    children: ReactNode;
+  }) {
     return <AgentPresenceProvider initialAgent={initialAgent}>{children}</AgentPresenceProvider>;
   }
 

package/{plugins/design/dev-server → apps/studio}/test/use-annotation-resize.test.ts

@@ -10,6 +10,8 @@ import { describe, expect, test } from 'bun:test';
 import type {
   ArrowStroke,
   EllipseStroke,
+  ImageStroke,
+  LinkStroke,
   PenStroke,
   PolygonStroke,
   RectStroke,
@@ -123,6 +125,47 @@ describe('resizeStroke / sticky — always 1:1 square', () => {
   });
 });
 
+describe('resizeStroke / image — Phase 23 (aspect-lock by default, Shift frees)', () => {
+  const image: ImageStroke = {
+    id: 'im1',
+    tool: 'image',
+    x: 0,
+    y: 0,
+    w: 100,
+    h: 50, // 2:1 intrinsic aspect
+    href: 'assets/abcd1234.png',
+  };
+  test('no modifiers keeps the intrinsic aspect (the inverse of shapes)', () => {
+    // se → 120,80 would be 2.4:1 free, but the lock keeps 2:1 (dominant axis).
+    expect(resizeStroke(image, 'se', 120, 80)).toEqual({ x: 0, y: 0, w: 160, h: 80 });
+  });
+  test('Shift held inverts to a free (unconstrained) resize', () => {
+    expect(resizeStroke(image, 'se', 120, 80, { shift: true, alt: false })).toEqual({
+      x: 0,
+      y: 0,
+      w: 120,
+      h: 80,
+    });
+  });
+});
+
+describe('resizeStroke / link — Phase 23 (free-resizes like a rect)', () => {
+  const link: LinkStroke = {
+    id: 'lk1',
+    tool: 'link',
+    x: 0,
+    y: 0,
+    w: 200,
+    h: 80,
+    url: 'https://example.com',
+    title: 'Example',
+    domain: 'example.com',
+  };
+  test('no modifiers free-resizes (no forced aspect)', () => {
+    expect(resizeStroke(link, 'se', 300, 120)).toEqual({ x: 0, y: 0, w: 300, h: 120 });
+  });
+});
+
 describe('resizeStroke / ellipse — Alt keeps the center fixed', () => {
   const ell: EllipseStroke = {
     id: 'e1',

package/{plugins/design/dev-server → apps/studio}/test/use-snap-guides.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { type Rect, type SnapOptions, computeSnap } from '../use-snap-guides.tsx';
+import { computeSnap, type Rect, type SnapOptions } from '../use-snap-guides.tsx';
 
 const DEFAULTS: SnapOptions = { gridSize: 40, tolerance: 8, disabled: false };
 

package/{plugins/design/dev-server → apps/studio}/test/use-tool-mode.test.tsx

@@ -12,12 +12,13 @@ import {
 } from '../use-tool-mode.tsx';
 
 describe('use-tool-mode / static', () => {
-  test('DEFAULT_TOOLS exposes V/H/C + draw set B/R/N/A/T/E (Phase 24 single Shape tool)', () => {
+  test('DEFAULT_TOOLS exposes V/H/C + draw set B/I/R/N/A/T/E (single Shape tool + highlighter)', () => {
     expect(DEFAULT_TOOLS.map((t) => t.id)).toEqual([
       'move',
       'hand',
       'comment',
       'pen',
+      'highlighter',
       'shape',
       'sticky',
       'arrow',
@@ -29,6 +30,7 @@ describe('use-tool-mode / static', () => {
       'H',
       'C',
       'B',
+      'I',
       'R',
       'N',
       'A',
@@ -50,6 +52,7 @@ describe('use-tool-mode / static', () => {
       'hand',
       'comment',
       'pen',
+      'highlighter',
       'shape',
       'sticky',
       'arrow',

package/apps/studio/test/whats-new.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from 'bun:test';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { bestSeenVersion, computeUnseen, parseVer, verGt } from '../client/whats-new-seen.js';
+import { loadWhatsNew, resolveMaudeVersion } from '../whats-new.ts';
+
+describe('whats-new feed loader', () => {
+  test('loads the committed feed with a version + non-empty entries', () => {
+    const feed = loadWhatsNew({ fresh: true });
+    expect(typeof feed.version).toBe('string');
+    expect(Array.isArray(feed.entries)).toBe(true);
+    expect(feed.entries.length).toBeGreaterThan(0);
+  });
+
+  test('every entry has the required shape', () => {
+    for (const e of loadWhatsNew({ fresh: true }).entries) {
+      expect(typeof e.id).toBe('string');
+      expect(e.id).toMatch(/^[a-z0-9][a-z0-9-]*$/);
+      expect(['feature', 'improvement', 'usage', 'fix']).toContain(e.kind);
+      expect(e.title.length).toBeGreaterThan(0);
+      expect(e.summary.length).toBeGreaterThan(0);
+    }
+  });
+
+  test('resolveMaudeVersion reads the design plugin manifest', () => {
+    expect(resolveMaudeVersion()).toMatch(/^\d+\.\d+\.\d+/);
+  });
+
+  test('a missing feed dir yields empty entries and never throws', () => {
+    const feed = loadWhatsNew({ root: join(import.meta.dir, '__does-not-exist__'), fresh: true });
+    expect(feed.entries).toEqual([]);
+  });
+
+  // Security regression (ethical-hacker creativity finding): the feed MUST
+  // resolve from the maude package root, NEVER a served project's tree. A
+  // hostile served project dropping its own whats-new.json must not inject
+  // entries into the privileged main-origin UI. Pin the boundary so a future
+  // "project-overridable feed" change can't silently erode it.
+  test('default resolution ignores a feed planted in an arbitrary (served-project) dir', () => {
+    const hostile = mkdtempSync(join(tmpdir(), 'mdcc-served-'));
+    writeFileSync(
+      join(hostile, 'whats-new.json'),
+      JSON.stringify({
+        entries: [{ id: 'evil', kind: 'feature', title: 'pwn', summary: 'x' }],
+      })
+    );
+    const feed = loadWhatsNew({ fresh: true }); // no root → package root only
+    expect(feed.entries.some((e) => e.id === 'evil')).toBe(false);
+    expect(feed.entries.length).toBeGreaterThan(0); // still reads the real package feed
+  });
+
+  // Defense-in-depth contract: a rendered learnMore is always an http(s) URL.
+  test('every committed entry learnMore is http(s) (no javascript:/data: scheme)', () => {
+    for (const e of loadWhatsNew({ fresh: true }).entries) {
+      if (e.learnMore != null) expect(e.learnMore).toMatch(/^https?:\/\//);
+    }
+  });
+});
+
+describe('seen logic (browser-safe, shared with the client)', () => {
+  test('parseVer extracts a semver triple', () => {
+    expect(parseVer('0.28.1')).toEqual([0, 28, 1]);
+    expect(parseVer('1.2.3-beta.4')).toEqual([1, 2, 3]);
+    expect(parseVer('dev')).toBeNull();
+  });
+
+  test('verGt compares semver, treating unparseable seen as oldest', () => {
+    expect(verGt('0.29.0', '0.28.1')).toBe(true);
+    expect(verGt('0.28.1', '0.29.0')).toBe(false);
+    expect(verGt('1.0.0', '0.99.99')).toBe(true);
+    expect(verGt('0.28.1', '0.28.1')).toBe(false);
+    expect(verGt('0.28.1', 'dev')).toBe(true);
+    expect(verGt('dev', '0.28.1')).toBe(false);
+  });
+
+  test('pending (null version) entries are always unseen', () => {
+    const u = computeUnseen(
+      [{ id: 'a', version: null, kind: 'feature', title: 't', summary: 's' }],
+      '9.9.9'
+    );
+    expect(u.map((e) => e.id)).toEqual(['a']);
+  });
+
+  test('computeUnseen returns only entries newer than the seen version', () => {
+    const entries = [
+      { id: 'old', version: '0.27.0', kind: 'feature', title: 't', summary: 's' },
+      { id: 'new', version: '0.29.0', kind: 'feature', title: 't', summary: 's' },
+    ];
+    expect(computeUnseen(entries, '0.28.0').map((e) => e.id)).toEqual(['new']);
+    expect(computeUnseen(entries, '0.29.0')).toEqual([]);
+  });
+
+  test('bestSeenVersion picks the highest of feed + entry versions', () => {
+    expect(bestSeenVersion([{ version: '0.29.0' }, { version: '0.27.0' }], '0.28.1')).toBe(
+      '0.29.0'
+    );
+    expect(bestSeenVersion([{ version: '0.20.0' }], '0.28.1')).toBe('0.28.1');
+    expect(bestSeenVersion([{ version: null }], '0.28.1')).toBe('0.28.1');
+  });
+});

package/apps/studio/text-imports.d.ts

@@ -0,0 +1,9 @@
+// Ambient declarations for Bun text imports — `import x from './f.ext' with { type: 'text' }`.
+// The dev-server runs under Bun (which honors the import attribute) and ships as
+// a `bun --compile` binary (which inlines the text at build time). tsc only needs
+// to know the module resolves to a string default export.
+
+declare module '*.tsx.template' {
+  const content: string;
+  export default content;
+}

package/{plugins/design/dev-server → apps/studio}/tool-palette.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       tool-palette.tsx — Phase 5.1 centered icon toolbar
- * @scope      plugins/design/dev-server/tool-palette.tsx
+ * @scope      apps/studio/tool-palette.tsx
  * @purpose    Bottom-center floating chrome — navigate (V/H/C), draw
  *             (B/R/O/A/E), and zoom in one shell. Adopts the dev-server
  *             menubar's visual language (8 px radius, soft shadow, hairline
@@ -20,7 +20,6 @@ import {
   SHAPE_KIND_ICONS,
   TOOL_ICONS,
 } from './canvas-icons.tsx';
-import { useViewportControllerContext } from './canvas-lib.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
 
@@ -229,7 +228,7 @@ function ensurePaletteStyles(): void {
 const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
 // Phase 24 — the two rect/ellipse buttons collapse into one Shape tool (with a
 // kind popover); sticky/arrow/text/eraser keep their order.
-const DRAW_TOOLS = ['pen', 'shape', 'sticky', 'arrow', 'text', 'eraser'] as const;
+const DRAW_TOOLS = ['pen', 'highlighter', 'shape', 'sticky', 'arrow', 'text', 'eraser'] as const;
 
 // Phase 24 — the Shape tool's primitive picker (popover order matches FigJam).
 const SHAPE_KINDS: ReadonlyArray<{ kind: ShapeKind; label: string }> = [
@@ -247,25 +246,21 @@ const SHAPE_KINDS: ReadonlyArray<{ kind: ShapeKind; label: string }> = [
 export function ToolPalette() {
   ensurePaletteStyles();
   const { tool, setTool, tools, sticky, toggleSticky, shapeKind, setShapeKind } = useToolMode();
-  const controller = useViewportControllerContext();
   const visibilityCtx = useAnnotationsVisibility();
   const [mounted, setMounted] = useState(false);
-  const [zoomOpen, setZoomOpen] = useState(false);
   const [shapeOpen, setShapeOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => setMounted(true), []);
   useEffect(() => {
-    if (!zoomOpen && !shapeOpen) return;
+    if (!shapeOpen) return;
     const onDown = (e: PointerEvent) => {
       if (!containerRef.current?.contains(e.target as Node)) {
-        setZoomOpen(false);
         setShapeOpen(false);
       }
     };
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        setZoomOpen(false);
         setShapeOpen(false);
       }
     };
@@ -275,7 +270,7 @@ export function ToolPalette() {
       document.removeEventListener('pointerdown', onDown, true);
       document.removeEventListener('keydown', onKey, true);
     };
-  }, [zoomOpen, shapeOpen]);
+  }, [shapeOpen]);
   // Close the shape popover whenever the tool changes away from Shape.
   useEffect(() => {
     if (tool !== 'shape') setShapeOpen(false);
@@ -286,7 +281,6 @@ export function ToolPalette() {
   const byId = new Map(tools.map((t) => [t.id, t]));
   const navList = NAV_TOOLS.map((id) => byId.get(id)).filter(Boolean);
   const drawList = DRAW_TOOLS.map((id) => byId.get(id)).filter(Boolean);
-  const pct = controller ? Math.round(controller.viewport.zoom * 100) : 100;
   const annotationsHidden = visibilityCtx ? !visibilityCtx.visible : false;
 
   const renderToolButton = (id: string, label: string, shortcut: string) => {
@@ -417,66 +411,7 @@ export function ToolPalette() {
         >
           <IconPresentation />
         </button>
-        <button
-          type="button"
-          className="dc-tp-zoom"
-          aria-label={`Zoom ${pct}%, open zoom menu`}
-          aria-expanded={zoomOpen}
-          title={`Zoom ${pct}%`}
-          onClick={() => setZoomOpen((o) => !o)}
-        >
-          <span>{pct}%</span>
-          <IconChevronDown size={12} />
-        </button>
       </div>
-      {zoomOpen && controller ? (
-        <div className="dc-tp-popover" role="menu" aria-label="Zoom">
-          <button
-            type="button"
-            role="menuitem"
-            onClick={() => {
-              controller.zoomIn();
-              setZoomOpen(false);
-            }}
-          >
-            <span>Zoom In</span>
-            <span className="dc-tp-kbd">⌘ +</span>
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            onClick={() => {
-              controller.zoomOut();
-              setZoomOpen(false);
-            }}
-          >
-            <span>Zoom Out</span>
-            <span className="dc-tp-kbd">⌘ −</span>
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            onClick={() => {
-              controller.fit();
-              setZoomOpen(false);
-            }}
-          >
-            <span>Fit to Screen</span>
-            <span className="dc-tp-kbd">⌘ 0</span>
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            onClick={() => {
-              controller.reset();
-              setZoomOpen(false);
-            }}
-          >
-            <span>Actual Size 100%</span>
-            <span className="dc-tp-kbd">⌘ 1</span>
-          </button>
-        </div>
-      ) : null}
     </div>
   );
 }

package/{plugins/design/dev-server → apps/studio}/undo-hud.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       undo-hud.tsx — top-right toast announcing the last undo edit
- * @scope      plugins/design/dev-server/undo-hud.tsx
+ * @scope      apps/studio/undo-hud.tsx
  * @purpose    Subscribes to `useUndoStack().lastLabel` + `.lastTick` and
  *             surfaces a 1.2 s aria-live toast so the user (and a screen
  *             reader) knows which edit just got pushed / undone / redone.

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

@@ -1,6 +1,6 @@
 /**
  * @file       undo-stack.ts — per-canvas in-memory command stack
- * @scope      plugins/design/dev-server/undo-stack.ts
+ * @scope      apps/studio/undo-stack.ts
  * @purpose    Pure state + reducer for canvas Cmd+Z / Cmd+Shift+Z. No React,
  *             no DOM, no fetch — `EditCommand.do()` / `.undo()` are caller-
  *             supplied side-effects so this file stays trivially testable

package/{plugins/design/dev-server → apps/studio}/use-agent-presence.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-agent-presence.tsx — Phase 13.2 / DDR-078 agent presence.
- * @scope      plugins/design/dev-server/use-agent-presence.tsx
+ * @scope      apps/studio/use-agent-presence.tsx
  * @purpose    Turn the Phase 8 `ai-activity` heartbeat into a *presence* peer:
  *             when an agent (`/design:edit` / `/design:new`) is editing THIS
  *             canvas, surface it like another connected human — an avatar in the
@@ -21,7 +21,7 @@
  * same cross-bundle rule as the activity context (DDR-077 lesson).
  */
 
-import { type ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 
 import { colorForName } from './use-collab.tsx';
 

package/{plugins/design/dev-server → apps/studio}/use-annotation-resize.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       use-annotation-resize.tsx — Task 23 (Wave 2, G4)
- * @scope      plugins/design/dev-server/use-annotation-resize.tsx
+ * @scope      apps/studio/use-annotation-resize.tsx
  * @purpose    Screen-space corner / endpoint handles for the selected
  *             annotation. Per-tool resize math with FigJam resize modifiers:
  *             Shift = lock aspect ratio (45° angle snap for arrows), Alt =
@@ -22,6 +22,8 @@ import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   type ArrowStroke,
   type EllipseStroke,
+  type ImageStroke,
+  type LinkStroke,
   type PenStroke,
   type PolygonStroke,
   type RectStroke,
@@ -72,14 +74,24 @@ type Corner = 'nw' | 'ne' | 'sw' | 'se' | 'ep1' | 'ep2';
 /** Stroke types that expose resize handles. Text inherits its anchor bbox. */
 function isResizable(
   s: Stroke
-): s is RectStroke | EllipseStroke | PolygonStroke | ArrowStroke | PenStroke | StickyStroke {
+): s is
+  | RectStroke
+  | EllipseStroke
+  | PolygonStroke
+  | ArrowStroke
+  | PenStroke
+  | StickyStroke
+  | ImageStroke
+  | LinkStroke {
   return (
     s.tool === 'rect' ||
     s.tool === 'ellipse' ||
     s.tool === 'polygon' ||
     s.tool === 'arrow' ||
     s.tool === 'pen' ||
-    s.tool === 'sticky'
+    s.tool === 'sticky' ||
+    s.tool === 'image' ||
+    s.tool === 'link'
   );
 }
 
@@ -170,9 +182,15 @@ export function resizeStroke(
   wy: number,
   mods: ResizeMods = NO_MODS
 ): Partial<Stroke> | null {
-  if (start.tool === 'rect' || start.tool === 'sticky' || start.tool === 'polygon') {
-    // Rect / polygon / sticky all resize via their shared x / y / w / h bbox.
-    // Text re-wraps inside the foreignObject automatically. Sticky stays 1:1.
+  if (
+    start.tool === 'rect' ||
+    start.tool === 'sticky' ||
+    start.tool === 'polygon' ||
+    start.tool === 'link'
+  ) {
+    // Rect / polygon / sticky / link all resize via their shared x / y / w / h
+    // bbox. Text re-wraps inside the foreignObject automatically. Sticky stays
+    // 1:1; the link card free-resizes (Shift still locks its current ratio).
     const box = bboxResize(
       { x: start.x, y: start.y, w: start.w, h: start.h },
       corner,
@@ -181,7 +199,22 @@ export function resizeStroke(
       mods,
       start.tool === 'sticky'
     );
-    return box as Partial<RectStroke | StickyStroke | PolygonStroke>;
+    return box as Partial<RectStroke | StickyStroke | PolygonStroke | LinkStroke>;
+  }
+  if (start.tool === 'image') {
+    // Phase 23 — images aspect-LOCK by default and free-resize with Shift held
+    // (the inverse of the shape tools — Figma/FigJam image behaviour). Invert
+    // the Shift flag into bboxResize, which keeps the START ratio when shift is
+    // set; the start ratio IS the image's intrinsic aspect.
+    const box = bboxResize(
+      { x: start.x, y: start.y, w: start.w, h: start.h },
+      corner,
+      wx,
+      wy,
+      { shift: !mods.shift, alt: mods.alt },
+      false
+    );
+    return box as Partial<ImageStroke>;
   }
   if (start.tool === 'ellipse') {
     // Treat the four corners as the bbox of the ellipse, then derive cx/cy/rx/ry.
@@ -297,11 +330,7 @@ function handlePositions(s: Stroke): Array<{ corner: Corner; x: number; y: numbe
   ];
 }
 
-export function AnnotationResizeOverlay({
-  store,
-}: {
-  store: StrokesStoreValue | null;
-}): ReactNode {
+export function AnnotationResizeOverlay({ store }: { store: StrokesStoreValue | null }): ReactNode {
   ensureResizeStyles();
   const annotSel = useAnnotationSelection();
   const controller = useViewportControllerContext();