@1agh/maude 0.15.0

package/plugins/design/dev-server/test/use-tool-mode.test.tsx

@@ -0,0 +1,93 @@
+// use-tool-mode — Phase 4.1 Task 2. Provider transitions + cursor sync.
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import {
+  DEFAULT_TOOLS,
+  ToolProvider,
+  useToolMode,
+  useToolModeOptional,
+} from '../use-tool-mode.tsx';
+
+describe('use-tool-mode / static', () => {
+  test('DEFAULT_TOOLS exposes V/H/C + Phase 5.1 draw set B/R/O/A/E', () => {
+    expect(DEFAULT_TOOLS.map((t) => t.id)).toEqual([
+      'move',
+      'hand',
+      'comment',
+      'pen',
+      'rect',
+      'ellipse',
+      'arrow',
+      'eraser',
+    ]);
+    expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual(['V', 'H', 'C', 'B', 'R', 'O', 'A', 'E']);
+  });
+
+  test('DEFAULT_TOOLS is immutable (Object.freeze applied)', () => {
+    expect(Object.isFrozen(DEFAULT_TOOLS)).toBe(true);
+  });
+
+  test('default cursors per tool', () => {
+    const byId = Object.fromEntries(DEFAULT_TOOLS.map((t) => [t.id, t.cursor]));
+    expect(byId.move).toBe('default');
+    expect(byId.hand).toBe('grab');
+    expect(byId.comment).toBe('crosshair');
+    expect(byId.pen).toBe('crosshair');
+    expect(byId.rect).toBe('crosshair');
+    expect(byId.ellipse).toBe('crosshair');
+    expect(byId.arrow).toBe('crosshair');
+    expect(byId.eraser).toBe('cell');
+  });
+});
+
+describe('use-tool-mode / useToolModeOptional', () => {
+  test('returns null outside provider (SSR-safe path)', () => {
+    // useToolModeOptional uses useContext directly; outside a provider it
+    // returns the context's default value, which we set to null.
+    // We can't render hooks standalone without a renderer, but importing the
+    // module and calling useContext directly mirrors the runtime behavior.
+    // This documents the contract via the export shape.
+    expect(typeof useToolModeOptional).toBe('function');
+  });
+});
+
+describe('use-tool-mode / SSR render', () => {
+  test('ToolProvider with consumer renders without throwing', () => {
+    function Consumer() {
+      const { tool } = useToolMode();
+      return <span data-tool={tool}>{tool}</span>;
+    }
+    const html = renderToStaticMarkup(
+      <ToolProvider>
+        <Consumer />
+      </ToolProvider>
+    );
+    expect(html).toContain('data-tool="move"');
+  });
+
+  test('ToolProvider honors initial tool', () => {
+    function Consumer() {
+      const { tool } = useToolMode();
+      return <span>{tool}</span>;
+    }
+    const html = renderToStaticMarkup(
+      <ToolProvider initial="comment">
+        <Consumer />
+      </ToolProvider>
+    );
+    expect(html).toContain('comment');
+  });
+
+  test('useToolMode outside ToolProvider throws', () => {
+    function BareConsumer() {
+      useToolMode();
+      return null;
+    }
+    expect(() => renderToStaticMarkup(<BareConsumer />)).toThrow(
+      /useToolMode must be used inside <ToolProvider>/
+    );
+  });
+});

package/plugins/design/dev-server/test/ws-handshake.test.ts

@@ -0,0 +1,33 @@
+// Smoke: WebSocket upgrade against Bun.serve's native handler.
+
+import { describe, expect, test } from 'bun:test';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+describe('ws handshake', () => {
+  test('upgrades and receives initial snapshot', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const ws = new WebSocket(`ws://localhost:${port}/_ws`);
+      const first = await new Promise<string>((resolve, reject) => {
+        const t = setTimeout(() => reject(new Error('no message')), 2000);
+        ws.addEventListener('message', (e) => {
+          clearTimeout(t);
+          resolve(
+            typeof e.data === 'string' ? e.data : new TextDecoder().decode(e.data as ArrayBuffer)
+          );
+        });
+        ws.addEventListener('error', (e) => reject(e));
+      });
+      const parsed = JSON.parse(first);
+      expect(parsed.type).toBe('snapshot');
+      expect(parsed.state).toBeDefined();
+      expect(parsed.state.session_started).toBeTypeOf('string');
+      ws.close();
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

package/plugins/design/dev-server/tool-palette.tsx

@@ -0,0 +1,278 @@
+/**
+ * @file       tool-palette.tsx — Phase 5.1 centered icon toolbar
+ * @scope      plugins/design/dev-server/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
+ *             border) so canvas chrome and app chrome read as one product.
+ *
+ *             The zoom popover lazy-mounts on demand and groups Fit / Reset
+ *             / Zoom In / Zoom Out from `useViewportControllerContext`. The
+ *             presentation toggle posts upstream so the dev-server's
+ *             `view-annotations` state stays in sync.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { IconChevronDown, IconPresentation, TOOL_ICONS } from './canvas-icons.tsx';
+import { useViewportControllerContext } from './canvas-lib.tsx';
+import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Styles — pulled from menubar tokens (`.mb` family). Centered bottom toolbar,
+// 32 × 32 buttons with iconography. Grouped pill segments separated by 1 px
+// dividers — visual cue that nav / draw / view-controls are distinct kinds.
+
+const PALETTE_CSS = `
+.dc-tool-palette {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: stretch;
+  background: var(--bg-1, rgba(255,255,255,0.98));
+  border: 1px solid var(--u-border-2, rgba(0,0,0,0.08));
+  border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: 12px;
+  color: var(--fg-0, #1a1a1a);
+  z-index: 6;
+  user-select: none;
+  /* Intentionally NO overflow:hidden — the zoom popover (.dc-tp-popover) is
+     a position:absolute child anchored above the toolbar; clipping the
+     parent would hide it. Inner buttons have their own border-radius so the
+     rounded outer corners are preserved by content shape, not overflow. */
+}
+.dc-tool-palette .dc-tp-group {
+  display: flex;
+  align-items: stretch;
+  padding: 4px;
+  gap: 2px;
+}
+.dc-tool-palette .dc-tp-sep {
+  width: 1px;
+  background: var(--u-border-3, rgba(0,0,0,0.08));
+  margin: 6px 0;
+}
+.dc-tool-palette button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-1, rgba(40,30,20,0.75));
+  cursor: pointer;
+  transition: background-color 80ms linear, color 80ms linear;
+}
+.dc-tool-palette button:hover { background: rgba(0,0,0,0.04); color: var(--fg-0, #1a1a1a); }
+.dc-tool-palette button:focus-visible {
+  outline: 2px solid var(--accent, #d63b1f);
+  outline-offset: -2px;
+}
+.dc-tool-palette button[aria-pressed="true"] {
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #fff);
+}
+.dc-tool-palette .dc-tp-zoom {
+  min-width: 56px;
+  padding: 0 8px;
+  font-variant-numeric: tabular-nums;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.dc-tool-palette .dc-tp-zoom svg { opacity: 0.6; }
+.dc-tp-popover {
+  position: absolute;
+  right: 4px;
+  bottom: 44px;
+  background: var(--bg-1, rgba(255,255,255,0.98));
+  border: 1px solid var(--u-border-2, rgba(0,0,0,0.08));
+  border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  min-width: 160px;
+  z-index: 7;
+}
+.dc-tp-popover button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  padding: 6px 10px;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  width: 100%;
+}
+.dc-tp-popover button:hover { background: rgba(0,0,0,0.04); }
+.dc-tp-popover .dc-tp-kbd {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  opacity: 0.55;
+}
+`.trim();
+
+function ensurePaletteStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-tool-palette-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-tool-palette-css';
+  s.textContent = PALETTE_CSS;
+  document.head.appendChild(s);
+}
+
+const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
+const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'arrow', 'eraser'] as const;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+
+export function ToolPalette() {
+  ensurePaletteStyles();
+  const { tool, setTool, tools } = useToolMode();
+  const controller = useViewportControllerContext();
+  const visibilityCtx = useAnnotationsVisibility();
+  const [mounted, setMounted] = useState(false);
+  const [zoomOpen, setZoomOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (!zoomOpen) return;
+    const onDown = (e: PointerEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) setZoomOpen(false);
+    };
+    document.addEventListener('pointerdown', onDown, true);
+    return () => document.removeEventListener('pointerdown', onDown, true);
+  }, [zoomOpen]);
+
+  if (!mounted) return null;
+
+  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) => {
+    const Icon = TOOL_ICONS[id];
+    return (
+      <button
+        key={id}
+        type="button"
+        aria-label={`${label} (${shortcut})`}
+        aria-pressed={tool === id}
+        title={`${label} (${shortcut})`}
+        onClick={() => setTool(id as never)}
+      >
+        {Icon ? <Icon /> : <span style={{ fontSize: 11 }}>{shortcut}</span>}
+      </button>
+    );
+  };
+
+  return (
+    <div ref={containerRef} className="dc-tool-palette" role="toolbar" aria-label="Canvas tools">
+      <div className="dc-tp-group">
+        {navList.map((t) => (t ? renderToolButton(t.id, t.label, t.shortcut) : null))}
+      </div>
+      <div className="dc-tp-sep" />
+      <div className="dc-tp-group">
+        {drawList.map((t) => (t ? renderToolButton(t.id, t.label, t.shortcut) : null))}
+      </div>
+      <div className="dc-tp-sep" />
+      <div className="dc-tp-group">
+        <button
+          type="button"
+          aria-label={
+            annotationsHidden ? 'Show annotations (Shift+P)' : 'Hide annotations (Shift+P)'
+          }
+          aria-pressed={annotationsHidden}
+          title="Presentation (Shift+P)"
+          onClick={() => visibilityCtx?.setVisible(!visibilityCtx.visible)}
+        >
+          <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>
+  );
+}
+ToolPalette.displayName = 'ToolPalette';

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

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "types": ["bun-types"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "strict": true,
+    "noUncheckedIndexedAccess": false,
+    "noImplicitOverride": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": false,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["*.ts", "client/**/*.ts", "client/**/*.tsx", "client/**/*.jsx", "test/**/*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

package/plugins/design/dev-server/use-annotation-selection.tsx

@@ -0,0 +1,92 @@
+/**
+ * @file       use-annotation-selection.tsx — Phase 5.1 annotation selection store
+ * @scope      plugins/design/dev-server/use-annotation-selection.tsx
+ * @purpose    Parallel to `use-selection-set`, but holds annotation stroke IDs
+ *             instead of DOM-element selections. Annotation IDs are local
+ *             identifiers (`s_*`) generated by `rid()` — they never live in
+ *             `_active.json` and don't post upstream to the dev-server shell.
+ *
+ * In-memory only. Scope is per canvas mount: when the iframe reloads, the
+ * selection resets (the strokes themselves persist via `.annotations.svg`).
+ */
+
+import { type ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+export interface AnnotationSelectionValue {
+  selectedIds: string[];
+  replace: (id: string | string[]) => void;
+  add: (id: string | string[]) => void;
+  toggle: (id: string) => void;
+  clear: () => void;
+  contains: (id: string) => boolean;
+}
+
+const AnnotationSelectionContext = createContext<AnnotationSelectionValue | null>(null);
+
+function dedupe(ids: string[]): string[] {
+  const out: string[] = [];
+  const seen = new Set<string>();
+  for (const id of ids) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    out.push(id);
+  }
+  return out;
+}
+
+export function AnnotationSelectionProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  const replace = useCallback((id: string | string[]) => {
+    const next = dedupe(Array.isArray(id) ? id : [id]);
+    setSelectedIds(next);
+  }, []);
+
+  const add = useCallback((id: string | string[]) => {
+    const incoming = Array.isArray(id) ? id : [id];
+    setSelectedIds((prev) => dedupe([...prev, ...incoming]));
+  }, []);
+
+  const toggle = useCallback((id: string) => {
+    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+  }, []);
+
+  const clear = useCallback(() => {
+    setSelectedIds([]);
+  }, []);
+
+  // Read live from state at call time so multi-step flows in the same tick
+  // (e.g. a router callback that adds then asks `contains`) see the staged
+  // result instead of a stale closure capture.
+  const containsRef = { current: selectedIds };
+  containsRef.current = selectedIds;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ref read intentionally
+  const contains = useCallback((id: string) => containsRef.current.includes(id), []);
+
+  const value = useMemo<AnnotationSelectionValue>(
+    () => ({ selectedIds, replace, add, toggle, clear, contains }),
+    [selectedIds, replace, add, toggle, clear, contains]
+  );
+
+  return (
+    <AnnotationSelectionContext.Provider value={value}>
+      {children}
+    </AnnotationSelectionContext.Provider>
+  );
+}
+
+export function useAnnotationSelection(): AnnotationSelectionValue {
+  const ctx = useContext(AnnotationSelectionContext);
+  if (!ctx) {
+    throw new Error('useAnnotationSelection must be used inside <AnnotationSelectionProvider>');
+  }
+  return ctx;
+}
+
+export function useAnnotationSelectionOptional(): AnnotationSelectionValue | null {
+  return useContext(AnnotationSelectionContext);
+}

package/plugins/design/dev-server/use-annotations-visibility.tsx

@@ -0,0 +1,43 @@
+/**
+ * @file       use-annotations-visibility.tsx — Phase 5.1 visibility store
+ * @scope      plugins/design/dev-server/use-annotations-visibility.tsx
+ * @purpose    Tiny boolean store shared by AnnotationsLayer (render gate),
+ *             ToolPalette (presentation toggle button), and the menubar
+ *             bridge (`view-annotations` postMessage handler in
+ *             AnnotationsLayer). Mounted by CanvasShell so the layer + its
+ *             siblings under CanvasRouter all consume the same value.
+ */
+
+import { type ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+export interface AnnotationsVisibilityValue {
+  visible: boolean;
+  setVisible: (v: boolean) => void;
+  toggle: () => void;
+}
+
+const AnnotationsVisibilityContext = createContext<AnnotationsVisibilityValue | null>(null);
+
+export function AnnotationsVisibilityProvider({
+  children,
+  initial = true,
+}: {
+  children: ReactNode;
+  initial?: boolean;
+}) {
+  const [visible, setVisible] = useState<boolean>(initial);
+  const toggle = useCallback(() => setVisible((v) => !v), []);
+  const value = useMemo<AnnotationsVisibilityValue>(
+    () => ({ visible, setVisible, toggle }),
+    [visible, toggle]
+  );
+  return (
+    <AnnotationsVisibilityContext.Provider value={value}>
+      {children}
+    </AnnotationsVisibilityContext.Provider>
+  );
+}
+
+export function useAnnotationsVisibility(): AnnotationsVisibilityValue | null {
+  return useContext(AnnotationsVisibilityContext);
+}