@1agh/maude 0.15.0

package/plugins/design/dev-server/test/input-router.test.ts

@@ -0,0 +1,316 @@
+// input-router — Phase 4.1 Task 1. Pure classifier table tests.
+
+import { describe, expect, test } from 'bun:test';
+
+import { type ClassifyInput, type Tool, classify, isEditableTarget } from '../input-router.tsx';
+
+const base = (over: Partial<ClassifyInput>): ClassifyInput => ({
+  type: 'pointermove',
+  activeTool: 'move' as Tool,
+  ...over,
+});
+
+describe('input-router / pointermove — move tool', () => {
+  test('bare hover → no-op (native interactions pass through)', () => {
+    const action = classify(base({ type: 'pointermove', clientX: 10, clientY: 20 }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('cmd-hover → hover preview with deep=true', () => {
+    const action = classify(base({ type: 'pointermove', metaKey: true, clientX: 5, clientY: 6 }));
+    expect(action).toMatchObject({ kind: 'hover', deep: true });
+  });
+
+  test('ctrl-hover (windows/linux) → hover with deep=true', () => {
+    const action = classify(base({ type: 'pointermove', ctrlKey: true }));
+    expect(action).toMatchObject({ kind: 'hover', deep: true });
+  });
+
+  test('hover in hand tool → no-op', () => {
+    const action = classify(base({ type: 'pointermove', activeTool: 'hand' }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('hover in comment tool → hover with deep=true (preview deepest)', () => {
+    const action = classify(
+      base({ type: 'pointermove', activeTool: 'comment', clientX: 1, clientY: 2 })
+    );
+    expect(action).toEqual({ kind: 'hover', deep: true, clientX: 1, clientY: 2 });
+  });
+});
+
+describe('input-router / pointerdown — move tool select', () => {
+  test('bare left-click → no-op (native interactions pass through)', () => {
+    const action = classify(base({ type: 'pointerdown', button: 0, clientX: 100, clientY: 200 }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('shift+left-click (no cmd) → no-op (no select without Cmd)', () => {
+    const action = classify(base({ type: 'pointerdown', button: 0, shiftKey: true }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('cmd+left-click → select replace, deep=true (nested single)', () => {
+    const action = classify(
+      base({ type: 'pointerdown', button: 0, metaKey: true, clientX: 11, clientY: 22 })
+    );
+    expect(action).toEqual({
+      kind: 'select',
+      mode: 'replace',
+      deep: true,
+      clientX: 11,
+      clientY: 22,
+    });
+  });
+
+  test('cmd+shift+left-click → select add, deep=true (multi nested)', () => {
+    const action = classify(
+      base({ type: 'pointerdown', button: 0, metaKey: true, shiftKey: true })
+    );
+    expect(action).toMatchObject({ kind: 'select', mode: 'add', deep: true });
+  });
+
+  test('ctrl+left-click (linux/windows cmd-equivalent) → select replace deep', () => {
+    const action = classify(base({ type: 'pointerdown', button: 0, ctrlKey: true }));
+    expect(action).toMatchObject({ kind: 'select', mode: 'replace', deep: true });
+  });
+});
+
+describe('input-router / pointerdown — non-left buttons', () => {
+  test('middle-button → no-op (viewport-controller owns it)', () => {
+    const action = classify(base({ type: 'pointerdown', button: 1 }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('right-button → context-menu', () => {
+    const action = classify(base({ type: 'pointerdown', button: 2, clientX: 50, clientY: 60 }));
+    expect(action).toEqual({ kind: 'context-menu', clientX: 50, clientY: 60 });
+  });
+
+  test('space-held + left-click → no-op (viewport-controller pans)', () => {
+    const action = classify(base({ type: 'pointerdown', button: 0, spaceHeld: true }));
+    expect(action.kind).toBe('no-op');
+  });
+});
+
+describe('input-router / pointerdown — tool-aware', () => {
+  test('comment tool + bare click → drop-comment', () => {
+    const action = classify(
+      base({ type: 'pointerdown', button: 0, activeTool: 'comment', clientX: 12, clientY: 34 })
+    );
+    expect(action).toEqual({ kind: 'drop-comment', clientX: 12, clientY: 34 });
+  });
+
+  test('comment tool + shift+click → drop-comment (modifier ignored for now)', () => {
+    const action = classify(
+      base({ type: 'pointerdown', button: 0, activeTool: 'comment', shiftKey: true })
+    );
+    expect(action.kind).toBe('drop-comment');
+  });
+
+  test('hand tool + bare click → no-op (viewport-controller claims the drag)', () => {
+    const action = classify(base({ type: 'pointerdown', button: 0, activeTool: 'hand' }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('hand tool + cmd+click → still no-op (no select in hand mode)', () => {
+    const action = classify(
+      base({ type: 'pointerdown', button: 0, activeTool: 'hand', metaKey: true })
+    );
+    expect(action.kind).toBe('no-op');
+  });
+});
+
+describe('input-router / contextmenu event', () => {
+  test('always opens menu + carries cursor coords', () => {
+    const action = classify(base({ type: 'contextmenu', clientX: 77, clientY: 88 }));
+    expect(action).toEqual({ kind: 'context-menu', clientX: 77, clientY: 88 });
+  });
+});
+
+describe('input-router / keydown — tool letters', () => {
+  test('V → tool move', () => {
+    const action = classify(base({ type: 'keydown', key: 'v' }));
+    expect(action).toEqual({ kind: 'tool', tool: 'move' });
+  });
+
+  test('uppercase V (Shift held during letter)', () => {
+    const action = classify(base({ type: 'keydown', key: 'V' }));
+    expect(action).toEqual({ kind: 'tool', tool: 'move' });
+  });
+
+  test('H → tool hand', () => {
+    expect(classify(base({ type: 'keydown', key: 'h' }))).toEqual({
+      kind: 'tool',
+      tool: 'hand',
+    });
+  });
+
+  test('C → tool comment', () => {
+    expect(classify(base({ type: 'keydown', key: 'c' }))).toEqual({
+      kind: 'tool',
+      tool: 'comment',
+    });
+  });
+
+  test('Escape → escape action', () => {
+    expect(classify(base({ type: 'keydown', key: 'Escape' }))).toEqual({
+      kind: 'escape',
+    });
+  });
+
+  test('Cmd+C with modifier → no-op (browser copy / viewport-controller)', () => {
+    const action = classify(base({ type: 'keydown', key: 'c', metaKey: true }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('Cmd+V with modifier → no-op', () => {
+    const action = classify(base({ type: 'keydown', key: 'v', metaKey: true }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('Cmd+Escape → escape (cancels regardless of modifiers)', () => {
+    const action = classify(base({ type: 'keydown', key: 'Escape', metaKey: true }));
+    expect(action.kind).toBe('escape');
+  });
+
+  test('V in input field → no-op', () => {
+    const action = classify(base({ type: 'keydown', key: 'v', isEditable: true }));
+    expect(action.kind).toBe('no-op');
+  });
+
+  test('Other letters → no-op', () => {
+    expect(classify(base({ type: 'keydown', key: 'x' })).kind).toBe('no-op');
+    expect(classify(base({ type: 'keydown', key: 'Tab' })).kind).toBe('no-op');
+    expect(classify(base({ type: 'keydown', key: 'Enter' })).kind).toBe('no-op');
+  });
+});
+
+describe('input-router / keydown — Phase 5 draw tools', () => {
+  test('B → tool pen', () => {
+    expect(classify(base({ type: 'keydown', key: 'b' }))).toEqual({
+      kind: 'tool',
+      tool: 'pen',
+    });
+  });
+
+  test('R → tool rect', () => {
+    expect(classify(base({ type: 'keydown', key: 'r' }))).toEqual({
+      kind: 'tool',
+      tool: 'rect',
+    });
+  });
+
+  test('A → tool arrow', () => {
+    expect(classify(base({ type: 'keydown', key: 'a' }))).toEqual({
+      kind: 'tool',
+      tool: 'arrow',
+    });
+  });
+
+  test('E → tool eraser', () => {
+    expect(classify(base({ type: 'keydown', key: 'e' }))).toEqual({
+      kind: 'tool',
+      tool: 'eraser',
+    });
+  });
+
+  test('O → tool ellipse (Phase 5.1)', () => {
+    expect(classify(base({ type: 'keydown', key: 'o' }))).toEqual({
+      kind: 'tool',
+      tool: 'ellipse',
+    });
+  });
+
+  test('uppercase B (shift held) — still maps to pen (lowercased)', () => {
+    expect(classify(base({ type: 'keydown', key: 'B', shiftKey: true }))).toEqual({
+      kind: 'tool',
+      tool: 'pen',
+    });
+  });
+
+  test('Cmd+B (modifier-held) → no-op so the browser keeps it', () => {
+    expect(classify(base({ type: 'keydown', key: 'b', metaKey: true })).kind).toBe('no-op');
+  });
+});
+
+describe('input-router / pointer events — Phase 5 annotation tools', () => {
+  test('pointermove in pen tool → no-op (SVG overlay owns it)', () => {
+    expect(
+      classify(base({ type: 'pointermove', activeTool: 'pen', clientX: 1, clientY: 2 })).kind
+    ).toBe('no-op');
+  });
+
+  test('pointermove in eraser tool → no-op', () => {
+    expect(classify(base({ type: 'pointermove', activeTool: 'eraser' })).kind).toBe('no-op');
+  });
+
+  test('bare left-click in rect tool → no-op (SVG overlay claims)', () => {
+    expect(classify(base({ type: 'pointerdown', activeTool: 'rect', button: 0 })).kind).toBe(
+      'no-op'
+    );
+  });
+
+  test('bare left-click in ellipse tool → no-op (Phase 5.1)', () => {
+    expect(classify(base({ type: 'pointerdown', activeTool: 'ellipse', button: 0 })).kind).toBe(
+      'no-op'
+    );
+  });
+
+  test('pointermove in ellipse tool → no-op (SVG overlay owns it)', () => {
+    expect(classify(base({ type: 'pointermove', activeTool: 'ellipse' })).kind).toBe('no-op');
+  });
+
+  test('cmd+left-click in arrow tool → select replace (escape hatch to move)', () => {
+    expect(
+      classify(
+        base({
+          type: 'pointerdown',
+          activeTool: 'arrow',
+          button: 0,
+          metaKey: true,
+          clientX: 4,
+          clientY: 5,
+        })
+      )
+    ).toEqual({
+      kind: 'select',
+      mode: 'replace',
+      deep: true,
+      clientX: 4,
+      clientY: 5,
+    });
+  });
+
+  test('right-click in pen tool → context-menu (unchanged)', () => {
+    expect(classify(base({ type: 'pointerdown', activeTool: 'pen', button: 2 })).kind).toBe(
+      'context-menu'
+    );
+  });
+});
+
+describe('input-router / isEditableTarget', () => {
+  test('null target → false', () => {
+    expect(isEditableTarget(null)).toBe(false);
+  });
+
+  test('plain div → false', () => {
+    const el = { tagName: 'DIV', isContentEditable: false } as HTMLElement;
+    expect(isEditableTarget(el)).toBe(false);
+  });
+
+  test('INPUT → true', () => {
+    const el = { tagName: 'INPUT', isContentEditable: false } as HTMLElement;
+    expect(isEditableTarget(el)).toBe(true);
+  });
+
+  test('TEXTAREA → true', () => {
+    const el = { tagName: 'TEXTAREA', isContentEditable: false } as HTMLElement;
+    expect(isEditableTarget(el)).toBe(true);
+  });
+
+  test('contentEditable=true → true', () => {
+    const el = { tagName: 'DIV', isContentEditable: true } as HTMLElement;
+    expect(isEditableTarget(el)).toBe(true);
+  });
+});

package/plugins/design/dev-server/test/locator.test.ts

@@ -0,0 +1,214 @@
+import { describe, expect, test } from 'bun:test';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import {
+  type LocatorMap,
+  canvasSlug,
+  clearLocatorSlug,
+  readLocator,
+  readLocatorFile,
+  writeLocator,
+} from '../locator.ts';
+
+function tmp(): { dir: string; locFile: string; cleanup: () => void } {
+  const dir = mkdtempSync(path.join(tmpdir(), 'mdcc-locator-'));
+  const locFile = path.join(dir, '_locator.json');
+  return { dir, locFile, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
+}
+
+const entry = (canvas: string, line: number): LocatorMap[string] => ({
+  canvas,
+  line,
+  col: 0,
+  jsxPath: ['section'],
+  componentName: 'X',
+});
+
+describe('canvasSlug', () => {
+  test('strips designRoot prefix and file extension', () => {
+    expect(canvasSlug('/proj/.design/ui/Docs Site.tsx', '/proj/.design')).toBe('ui/Docs Site');
+  });
+
+  test('handles nested paths', () => {
+    expect(canvasSlug('/proj/.design/system/project/preview/btn.tsx', '/proj/.design')).toBe(
+      'system/project/preview/btn'
+    );
+  });
+
+  test('files without extension are returned as-is', () => {
+    expect(canvasSlug('/proj/.design/ui/no-ext', '/proj/.design')).toBe('ui/no-ext');
+  });
+});
+
+describe('readLocatorFile / readLocator', () => {
+  test('returns empty object when the file does not exist', async () => {
+    const t = tmp();
+    try {
+      expect(await readLocatorFile(t.locFile)).toEqual({});
+      expect(await readLocator(t.locFile, 'ui/anything')).toBeNull();
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('treats malformed JSON as empty without throwing', async () => {
+    const t = tmp();
+    try {
+      await Bun.write(t.locFile, '{ not valid');
+      expect(await readLocatorFile(t.locFile)).toEqual({});
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('treats a top-level array as empty (defensive against bad shape)', async () => {
+    const t = tmp();
+    try {
+      await Bun.write(t.locFile, '[]');
+      expect(await readLocatorFile(t.locFile)).toEqual({});
+    } finally {
+      t.cleanup();
+    }
+  });
+});
+
+describe('writeLocator — roundtrip + atomicity', () => {
+  test('round-trip a single slug', async () => {
+    const t = tmp();
+    try {
+      const map: LocatorMap = { aaaaaaaa: entry('/c/X.tsx', 4) };
+      await writeLocator(t.locFile, 'ui/X', map);
+      const back = await readLocator(t.locFile, 'ui/X');
+      expect(back).toEqual({ aaaaaaaa: entry('/c/X.tsx', 4) });
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('multiple slugs share the same _locator.json without trampling', async () => {
+    const t = tmp();
+    try {
+      await writeLocator(t.locFile, 'ui/A', { aaaaaaaa: entry('/c/A.tsx', 1) });
+      await writeLocator(t.locFile, 'ui/B', { bbbbbbbb: entry('/c/B.tsx', 2) });
+      const file = await readLocatorFile(t.locFile);
+      expect(Object.keys(file).sort()).toEqual(['ui/A', 'ui/B']);
+      expect(file['ui/A']).toEqual({ aaaaaaaa: entry('/c/A.tsx', 1) });
+      expect(file['ui/B']).toEqual({ bbbbbbbb: entry('/c/B.tsx', 2) });
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('updating an existing slug overwrites its map but leaves siblings intact', async () => {
+    const t = tmp();
+    try {
+      await writeLocator(t.locFile, 'ui/A', { aaaaaaaa: entry('/c/A.tsx', 1) });
+      await writeLocator(t.locFile, 'ui/B', { bbbbbbbb: entry('/c/B.tsx', 2) });
+      await writeLocator(t.locFile, 'ui/A', { cccccccc: entry('/c/A.tsx', 9) });
+      const file = await readLocatorFile(t.locFile);
+      expect(file['ui/A']).toEqual({ cccccccc: entry('/c/A.tsx', 9) });
+      expect(file['ui/B']).toEqual({ bbbbbbbb: entry('/c/B.tsx', 2) });
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('on-disk JSON is deterministic (sorted keys, trailing newline)', async () => {
+    const t = tmp();
+    try {
+      const big: LocatorMap = {
+        zzzzzzzz: entry('/c/X.tsx', 9),
+        aaaaaaaa: entry('/c/X.tsx', 1),
+        mmmmmmmm: entry('/c/X.tsx', 5),
+      };
+      await writeLocator(t.locFile, 'ui/X', big);
+      const raw = await Bun.file(t.locFile).text();
+      // top-level + nested keys should be sorted
+      const aIdx = raw.indexOf('aaaaaaaa');
+      const mIdx = raw.indexOf('mmmmmmmm');
+      const zIdx = raw.indexOf('zzzzzzzz');
+      expect(aIdx).toBeGreaterThan(-1);
+      expect(aIdx).toBeLessThan(mIdx);
+      expect(mIdx).toBeLessThan(zIdx);
+      expect(raw.endsWith('\n')).toBe(true);
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('concurrent writes against the same file do not corrupt JSON', async () => {
+    const t = tmp();
+    try {
+      // Fire 20 writes in parallel, each against a distinct slug. The
+      // per-path mutex must serialise them; the final file must contain all 20.
+      const writes: Promise<void>[] = [];
+      for (let i = 0; i < 20; i++) {
+        const slug = `ui/slug-${String(i).padStart(2, '0')}`;
+        const map: LocatorMap = {
+          [`id${String(i).padStart(5, '0')}`]: entry(`/c/${slug}.tsx`, i + 1),
+        };
+        writes.push(writeLocator(t.locFile, slug, map));
+      }
+      await Promise.all(writes);
+      const file = await readLocatorFile(t.locFile);
+      expect(Object.keys(file).length).toBe(20);
+      for (let i = 0; i < 20; i++) {
+        const slug = `ui/slug-${String(i).padStart(2, '0')}`;
+        expect(file[slug]).toBeDefined();
+      }
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('concurrent writes against the SAME slug end up with the last writer winning, no partial state', async () => {
+    const t = tmp();
+    try {
+      const writes: Promise<void>[] = [];
+      // 10 writes to the same slug, each with a different singleton map.
+      for (let i = 0; i < 10; i++) {
+        const map: LocatorMap = { [`id-${i}`]: entry('/c/X.tsx', i) };
+        writes.push(writeLocator(t.locFile, 'ui/X', map));
+      }
+      await Promise.all(writes);
+      const back = await readLocator(t.locFile, 'ui/X');
+      expect(back).not.toBeNull();
+      // Each writer fully replaces the slug map, so the final state has exactly
+      // one entry. Which entry won is implementation-defined (FIFO via mutex),
+      // but the file shape is well-formed.
+      expect(Object.keys(back as LocatorMap).length).toBe(1);
+    } finally {
+      t.cleanup();
+    }
+  });
+});
+
+describe('clearLocatorSlug', () => {
+  test('removes one slug and leaves siblings', async () => {
+    const t = tmp();
+    try {
+      await writeLocator(t.locFile, 'ui/A', { aaaaaaaa: entry('/c/A.tsx', 1) });
+      await writeLocator(t.locFile, 'ui/B', { bbbbbbbb: entry('/c/B.tsx', 2) });
+      await clearLocatorSlug(t.locFile, 'ui/A');
+      const file = await readLocatorFile(t.locFile);
+      expect(file['ui/A']).toBeUndefined();
+      expect(file['ui/B']).toBeDefined();
+    } finally {
+      t.cleanup();
+    }
+  });
+
+  test('is a no-op when slug missing', async () => {
+    const t = tmp();
+    try {
+      await writeLocator(t.locFile, 'ui/A', { aaaaaaaa: entry('/c/A.tsx', 1) });
+      await clearLocatorSlug(t.locFile, 'ui/Nope');
+      const file = await readLocatorFile(t.locFile);
+      expect(file['ui/A']).toBeDefined();
+    } finally {
+      t.cleanup();
+    }
+  });
+});