@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/src/__tests__/tiptapBridge.test.ts

@@ -1,4 +1,6 @@
 import { describe, it, expect } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
 import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
 
 // ---------------------------------------------------------------------------
@@ -66,25 +68,25 @@ describe('markdownToTiptap', () => {
   });
 
   it('converts mentions to chip spans', () => {
-    const html = markdownToTiptap('Hey @[Leo](gezel:leo), take a look.');
+    const html = markdownToTiptap('Hey @[Leo](person:leo), take a look.');
     expect(html).toContain('data-mention="true"');
-    expect(html).toContain('data-kind="gezel"');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
     expect(html).toContain('data-label="Leo"');
     // "@Leo" appears inside the chip — NOT as a broken link
-    expect(html).not.toContain('href="gezel:leo"');
+    expect(html).not.toContain('href="person:leo"');
   });
 
   it('tolerates the backslash-escaped colon remark emits', () => {
-    // remark-stringify sometimes emits `gezel\:leo` to disambiguate
+    // remark-stringify sometimes emits `person\:leo` to disambiguate
     // from autolink syntax. The bridge should still recognize it.
-    const html = markdownToTiptap('Hey @[Leo](gezel\\:leo).');
-    expect(html).toContain('data-kind="gezel"');
+    const html = markdownToTiptap('Hey @[Leo](person\\:leo).');
+    expect(html).toContain('data-kind="person"');
     expect(html).toContain('data-id="leo"');
   });
 
   it('round-trips mentions back to markdown', () => {
-    const md = 'Hey @[Leo](gezel:leo), ping @[Tess](gezel:tess) too.';
+    const md = 'Hey @[Leo](person:leo), ping @[Tess](person:tess) too.';
     const html = markdownToTiptap(md);
     const back = tiptapToMarkdown(html);
     expect(back.trim()).toBe(md);
@@ -158,6 +160,12 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('This is a quote');
   });
 
+  it('groups consecutive quote lines into one visual blockquote', () => {
+    const html = markdownToTiptap('> A wise quote\n> -- Ada');
+    expect(html.match(/<blockquote>/g)).toHaveLength(1);
+    expect(html).toContain('<blockquote><p>A wise quote</p><p>-- Ada</p></blockquote>');
+  });
+
   it('converts horizontal rules', () => {
     const md = 'Before\n\n---\n\nAfter';
     const html = markdownToTiptap(md);
@@ -312,6 +320,13 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('A wise quote');
   });
 
+  it('keeps adjacent blockquote nodes on adjacent markdown lines', () => {
+    const md = tiptapToMarkdown(
+      '<blockquote><p>A wise quote</p></blockquote><blockquote><p>-- Ada</p></blockquote>',
+    );
+    expect(md).toBe('> A wise quote\n> -- Ada\n');
+  });
+
   it('converts horizontal rules', () => {
     const md = tiptapToMarkdown('<p>Before</p><hr><p>After</p>');
     expect(md).toContain('---');
@@ -466,6 +481,32 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(roundTrip('> Important note')).toContain('> Important note');
   });
 
+  it('does not add a blank line before a quote attribution', () => {
+    const md = [
+      '### A Famous Quote {[quote]}',
+      '',
+      '> "The best way to predict the future is to invent it."',
+      '> -- Alan Kay',
+    ].join('\n');
+
+    expect(roundTrip(md)).toBe(md + '\n');
+  });
+
+  it('does not add a blank line after Tiptap normalizes a quote attribution', () => {
+    const md = ['> "The best way to predict the future is to invent it."', '> -- Alan Kay'].join(
+      '\n',
+    );
+    const editor = new Editor({
+      extensions: [StarterKit],
+      content: markdownToTiptap(md),
+    });
+
+    const normalizedHtml = editor.getHTML();
+    expect(normalizedHtml.match(/<blockquote>/g)).toHaveLength(1);
+    expect(tiptapToMarkdown(normalizedHtml)).toBe(md + '\n');
+    editor.destroy();
+  });
+
   it('preserves unordered lists', () => {
     const result = roundTrip('- Alpha\n- Beta');
     expect(result).toContain('- Alpha');

package/src/__tests__/tiptapImageRoundTrip.test.ts

@@ -12,7 +12,7 @@ import { tiptapToMarkdown } from '../tiptapBridge';
  *   when a pasted / uploaded image is inserted into the tiptap
  *   editor via `setImage({src, alt})`, does the markdown we serialize
  *   out (via `getHTML()` + `tiptapToMarkdown`) contain
- *   `![alt](src)` — the shape the gezel service's image-attachment
+ *   `![alt](src)` — the shape the downstream service's image-attachment
  *   extractor expects?
  *
  * Unit tests on the regex alone have been green the whole time, and

package/src/__tests__/toolbarSelectionConversion.test.tsx

@@ -0,0 +1,164 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import { EditorProvider, useEditorContext, type EditorContextValue } from '../EditorContext';
+import { Toolbar } from '../Toolbar';
+import { tiptapToMarkdown } from '../tiptapBridge';
+
+let currentContext: EditorContextValue | null = null;
+
+function ContextProbe() {
+  currentContext = useEditorContext();
+  return null;
+}
+
+function context(): EditorContextValue {
+  if (!currentContext) throw new Error('EditorContext has not mounted');
+  return currentContext;
+}
+
+function monacoWithSelection(selectedText: string) {
+  const selection = {
+    startLineNumber: 1,
+    startColumn: 1,
+    endLineNumber: selectedText.split('\n').length,
+    endColumn: 1,
+  };
+  const model = {
+    getValueInRange: () => selectedText,
+    getLineContent: () => selectedText.split('\n')[0] ?? '',
+  };
+  const disposable = { dispose: vi.fn() };
+  const executeEdits = vi.fn();
+  const editor = {
+    getSelection: () => selection,
+    getModel: () => model,
+    getPosition: () => ({ lineNumber: 1, column: 1 }),
+    onDidChangeCursorPosition: () => disposable,
+    onDidChangeModelContent: () => disposable,
+    executeEdits,
+    focus: vi.fn(),
+  };
+  return { editor, executeEdits, selection };
+}
+
+beforeEach(() => {
+  currentContext = null;
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: () => ({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    globalThis.ResizeObserver = ResizeObserverStub as unknown as typeof ResizeObserver;
+  }
+});
+
+describe('<Toolbar> selection conversion menu', () => {
+  it('shows Convert above Insert and replaces a delimited Monaco selection', async () => {
+    const source = 'Name,Role\nAda,Engineer\n';
+    const { editor, executeEdits, selection } = monacoWithSelection(source);
+    render(
+      <EditorProvider initialMarkdown={source} initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(
+      within(menu)
+        .getAllByText(/^(Convert|Insert)$/)
+        .map((node) => node.textContent),
+    ).toEqual(['Convert', 'Insert']);
+
+    fireEvent.click(within(menu).getByRole('menuitem', { name: 'Convert selection to Table' }));
+
+    expect(executeEdits).toHaveBeenCalledWith('toolbar-convert-selection', [
+      {
+        range: selection,
+        text: '| Name | Role |\n| --- | --- |\n| Ada | Engineer |\n',
+      },
+    ]);
+  });
+
+  it('does not show Convert without selected text', async () => {
+    const { editor } = monacoWithSelection('');
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setMonacoEditor(editor as never));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const menu = await screen.findByRole('menu');
+    expect(within(menu).queryByText('Convert')).toBeNull();
+    expect(within(menu).queryByRole('menuitem', { name: 'Convert selection to Table' })).toBeNull();
+  });
+
+  it('replaces fully selected Write paragraphs without leaving a blank paragraph', async () => {
+    const editor = new Editor({
+      extensions: [StarterKit, TaskList, TaskItem],
+      content: '<p>First</p><p>Second</p><p>Third</p><h2>After</h2>',
+    });
+    const paragraphs: Array<{ pos: number; contentSize: number }> = [];
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'paragraph') {
+        paragraphs.push({ pos, contentSize: node.content.size });
+      }
+    });
+    const first = paragraphs[0];
+    const third = paragraphs[2];
+    expect(first).toBeDefined();
+    expect(third).toBeDefined();
+    editor.commands.setTextSelection({
+      from: first.pos + 1,
+      to: third.pos + 1 + third.contentSize,
+    });
+
+    render(
+      <EditorProvider
+        initialMarkdown="First\n\nSecond\n\nThird\n\n## After"
+        initialView="wysiwyg"
+        allowRecording={false}
+      >
+        <Toolbar />
+        <ContextProbe />
+      </EditorProvider>,
+    );
+    act(() => context().setTiptapEditor(editor));
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: 'Convert selection to Task List' }),
+    );
+
+    await waitFor(() => {
+      expect(editor.getJSON().content?.map((node) => node.type)).toEqual(['taskList', 'heading']);
+    });
+    expect(tiptapToMarkdown(editor.getHTML())).toBe(
+      '- [ ] First\n- [ ] Second\n- [ ] Third\n\n## After\n',
+    );
+    editor.destroy();
+  });
+});

package/src/asciiDiagram/AsciiDiagramWidget.tsx

@@ -22,7 +22,13 @@ import { SceneBlockToolbar, type SceneBlockAction } from '../scene/SceneBlockToo
 import { SceneSideToolbar } from '../scene/SceneSideToolbar';
 import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../scene';
 import { Icon } from '../Icon';
-import { useAsciiDiagramData } from './asciiDiagramData';
+import {
+  asciiDiagramToCanvas,
+  initialAsciiDiagramCanvasOffset,
+  offsetAsciiDiagram,
+  useAsciiDiagramData,
+  type AsciiDiagramCanvasOffset,
+} from './asciiDiagramData';
 import { applyAsciiDiagramCommand } from './asciiDiagramCommands';
 import { isAsciiSourceVisible, toggleAsciiSource } from './AsciiDiagramExtension';
 import type { SceneTextChannel } from '../scene/text/sceneTextChannel';
@@ -52,12 +58,36 @@ export function AsciiDiagramWidget({
   const [maximized, setMaximized] = useState(false);
   const [height, setHeight] = useState<number | null>(null);
   const [dragHeight, setDragHeight] = useState<number | null>(null);
+  const canvasOffsetRef = useRef<AsciiDiagramCanvasOffset | null>(null);
+  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState(0);
   const inlineRef = useRef<HTMLDivElement>(null);
   const effectiveHeight = dragHeight ?? height;
 
+  if (view && canvasOffsetRef.current === null) {
+    canvasOffsetRef.current = initialAsciiDiagramCanvasOffset(view.diagram);
+  }
+
+  const canvasView = useMemo(() => {
+    if (!view) return null;
+    const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+    return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
+    // The ref is intentionally versioned only when its value is consumed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, canvasOffsetVersion]);
+
   const dispatch = useCallback(
     (cmd: DiagramCommand) => {
-      applyAsciiDiagramCommand(editor, blockId, cmd);
+      const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+      const applied = applyAsciiDiagramCommand(editor, blockId, cmd, {
+        diagramOffset: offset,
+      });
+      if (applied && (offset.col !== 0 || offset.row !== 0)) {
+        // The same rewrite that applied the edit has now persisted the virtual
+        // gutter. Drop the projection offset so the on-screen coordinates do
+        // not change while the fence-backed view refreshes.
+        canvasOffsetRef.current = { col: 0, row: 0 };
+        setCanvasOffsetVersion((version) => version + 1);
+      }
     },
     [editor, blockId],
   );
@@ -169,8 +199,8 @@ export function AsciiDiagramWidget({
   const canvas = (
     <DiagramCanvas
       textChannel={textChannel}
-      nodes={view.nodes}
-      edges={view.edges}
+      nodes={canvasView?.nodes ?? view.nodes}
+      edges={canvasView?.edges ?? view.edges}
       onCommand={dispatch}
       showMaximize
       maximized={maximized}

package/src/asciiDiagram/__tests__/asciiDiagramCommands.test.ts

@@ -5,7 +5,7 @@
 
 import { Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import { ASCII_CHAR_H, ASCII_CHAR_W, parseAsciiDiagram } from '@bendyline/squisq/doc';
 import { markdownToTiptap } from '../../tiptapBridge';
 import { HeadingWithTemplate } from '../../TemplateAnnotation';
@@ -94,6 +94,63 @@ describe('applyAsciiDiagramCommand', () => {
     expect(reparsed.nodes.find((n) => n.id === 'beta')?.col).toBe(20);
   });
 
+  it('commits a north/west resize position and size in one fence rewrite', () => {
+    const editor = makeEditor('```\n' + ART + '\n```\n');
+    const id = firstBlockId(editor);
+    const onTransaction = vi.fn();
+    editor.on('transaction', onTransaction);
+
+    const ok = applyAsciiDiagramCommand(editor, id, {
+      kind: 'resizeNode',
+      nodeId: 'beta',
+      x: 18 * ASCII_CHAR_W,
+      y: 10 * ASCII_CHAR_H,
+      width: 14 * ASCII_CHAR_W,
+      height: 5 * ASCII_CHAR_H,
+    });
+
+    expect(ok).toBe(true);
+    expect(onTransaction).toHaveBeenCalledTimes(1);
+    const beta = parseAsciiDiagram(fenceOf(editor).text).nodes.find((n) => n.id === 'beta');
+    expect(beta).toMatchObject({ col: 18, row: 10, wCols: 14, hRows: 5 });
+
+    editor.commands.undo();
+    const restored = parseAsciiDiagram(fenceOf(editor).text).nodes.find((n) => n.id === 'beta');
+    expect(restored).toMatchObject({ col: 0, row: 5, wCols: 10, hRows: 3 });
+  });
+
+  it('persists a virtual gutter with the first edit of legacy origin-hugging art', () => {
+    const editor = makeEditor('```diagram\n' + ART + '\n```\n');
+    const id = firstBlockId(editor);
+
+    expect(
+      applyAsciiDiagramCommand(
+        editor,
+        id,
+        {
+          kind: 'resizeNode',
+          nodeId: 'alpha',
+          x: 6 * ASCII_CHAR_W,
+          y: 1 * ASCII_CHAR_H,
+          width: 12 * ASCII_CHAR_W,
+          height: 4 * ASCII_CHAR_H,
+        },
+        { diagramOffset: { col: 8, row: 2 } },
+      ),
+    ).toBe(true);
+
+    const nodes = parseAsciiDiagram(fenceOf(editor).text).nodes;
+    expect(nodes.find((node) => node.id === 'alpha')).toMatchObject({
+      col: 6,
+      row: 1,
+      wCols: 12,
+      hRows: 4,
+    });
+    // The untouched peer receives the persisted origin shift, preserving the
+    // same coordinates that were already projected on the canvas.
+    expect(nodes.find((node) => node.id === 'beta')).toMatchObject({ col: 8, row: 7 });
+  });
+
   it('addConnection adds a reciprocal edge (renders as a double arrow)', () => {
     const editor = makeEditor('```\n' + ART + '\n```\n');
     const id = firstBlockId(editor);

package/src/asciiDiagram/asciiDiagramCommands.ts

@@ -30,8 +30,17 @@ import {
   removeNodeOp,
   renameNodeOp,
   resizeNodeOp,
+  translateDiagramOp,
 } from './asciiDiagramOps';
 
+export interface ApplyAsciiDiagramCommandOptions {
+  /**
+   * Virtual grid offset currently shown by the canvas for legacy art. It is
+   * folded into the source in the same transaction as the user's first edit.
+   */
+  diagramOffset?: { col: number; row: number };
+}
+
 /**
  * Replace the TEXT inside the codeBlock at `pos` and, when `ensureLanguage`
  * is given, promote its `language` attribute in the SAME transaction (one
@@ -89,6 +98,7 @@ function applyOp(
   editor: Editor,
   blockId: string,
   op: (diagram: AsciiDiagram) => AsciiDiagram,
+  diagramOffset?: { col: number; row: number },
 ): boolean {
   // Resolve the position at dispatch time — captured positions go stale
   // the moment anything above the block changes.
@@ -96,11 +106,14 @@ function applyOp(
   if (pos === null) return false;
   const node = editor.state.doc.nodeAt(pos);
   if (!node || node.type.name !== 'codeBlock') return false;
-  const diagram = parseAsciiDiagramForNode(node);
-  if (!diagram) return false;
+  const sourceDiagram = parseAsciiDiagramForNode(node);
+  if (!sourceDiagram) return false;
+  const diagram = diagramOffset
+    ? translateDiagramOp(sourceDiagram, diagramOffset.col, diagramOffset.row)
+    : sourceDiagram;
 
   const next = op(diagram);
-  if (next === diagram) return false;
+  if (next === diagram && diagram === sourceDiagram) return false;
   const rendered = renderAsciiDiagram(next);
 
   // Verify before committing: the rendered art must re-parse to the same
@@ -118,29 +131,42 @@ export function applyAsciiDiagramCommand(
   editor: Editor,
   blockId: string,
   cmd: DiagramCommand,
+  options: ApplyAsciiDiagramCommandOptions = {},
 ): boolean {
+  const apply = (op: (diagram: AsciiDiagram) => AsciiDiagram) =>
+    applyOp(editor, blockId, op, options.diagramOffset);
   switch (cmd.kind) {
     case 'moveNode': {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => moveNodeOp(d, cmd.nodeId, col, row));
+      return apply((d) => moveNodeOp(d, cmd.nodeId, col, row));
     }
     case 'resizeNode': {
       const wCols = Math.max(3, Math.round(cmd.width / ASCII_CHAR_W));
       const hRows = Math.max(3, Math.round(cmd.height / ASCII_CHAR_H));
-      return applyOp(editor, blockId, (d) => resizeNodeOp(d, cmd.nodeId, wCols, hRows));
+      return apply((d) => {
+        // A north/west resize changes position and size. Apply both to the
+        // same parsed model and render once so collision/layout normalization
+        // cannot run between the two halves of one pointer gesture.
+        let next = d;
+        if (cmd.x !== undefined && cmd.y !== undefined) {
+          const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+          next = moveNodeOp(next, cmd.nodeId, col, row);
+        }
+        return resizeNodeOp(next, cmd.nodeId, wCols, hRows);
+      });
     }
     case 'addConnection':
-      return applyOp(editor, blockId, (d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case 'removeConnection':
-      return applyOp(editor, blockId, (d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case 'renameNode':
-      return applyOp(editor, blockId, (d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
+      return apply((d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
     case 'addNode': {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => addNodeOp(d, { col, row }).diagram);
+      return apply((d) => addNodeOp(d, { col, row }).diagram);
     }
     case 'removeNode':
-      return applyOp(editor, blockId, (d) => removeNodeOp(d, cmd.nodeId));
+      return apply((d) => removeNodeOp(d, cmd.nodeId));
   }
   const _exhaustive: never = cmd;
   void _exhaustive;

package/src/asciiDiagram/asciiDiagramData.ts

@@ -18,6 +18,16 @@ import {
 } from '@bendyline/squisq/doc';
 import type { DiagramEdge, DiagramNode } from '../diagram/types';
 import { findAsciiDiagramBlockPos, parseAsciiDiagramForNode } from './AsciiDiagramExtension';
+import { translateDiagramOp } from './asciiDiagramOps';
+
+/** Persisted grid space reserved north/west of legacy origin-hugging art. */
+export const ASCII_DIAGRAM_GUTTER_COLS = 8;
+export const ASCII_DIAGRAM_GUTTER_ROWS = 2;
+
+export interface AsciiDiagramCanvasOffset {
+  col: number;
+  row: number;
+}
 
 export interface AsciiDiagramView {
   /** Canvas nodes, containers ordered first so their cards paint behind. */
@@ -31,6 +41,29 @@ export interface AsciiDiagramView {
   diagram: AsciiDiagram;
 }
 
+/**
+ * Offset needed to give an existing diagram the same editing gutter as a
+ * newly inserted one. The widget applies this virtually until the first real
+ * canvas edit, which then writes the shifted coordinates into the fence.
+ */
+export function initialAsciiDiagramCanvasOffset(diagram: AsciiDiagram): AsciiDiagramCanvasOffset {
+  if (diagram.nodes.length === 0) return { col: 0, row: 0 };
+  const minCol = Math.min(...diagram.nodes.map((node) => node.col));
+  const minRow = Math.min(...diagram.nodes.map((node) => node.row));
+  return {
+    col: Math.max(0, ASCII_DIAGRAM_GUTTER_COLS - minCol),
+    row: Math.max(0, ASCII_DIAGRAM_GUTTER_ROWS - minRow),
+  };
+}
+
+/** Apply a canvas-only origin offset to a parsed grid model. */
+export function offsetAsciiDiagram(
+  diagram: AsciiDiagram,
+  offset: AsciiDiagramCanvasOffset,
+): AsciiDiagram {
+  return translateDiagramOp(diagram, offset.col, offset.row);
+}
+
 /** Grid model → canvas model, containers-first for paint order. */
 export function asciiDiagramToCanvas(
   diagram: AsciiDiagram,

package/src/asciiDiagram/asciiDiagramOps.ts

@@ -40,6 +40,25 @@ function descendantsOf(diagram: AsciiDiagram, nodeId: string): Set<string> {
   return out;
 }
 
+/** Translate every node by the same grid delta (edges/containment are unchanged). */
+export function translateDiagramOp(
+  diagram: AsciiDiagram,
+  dCol: number,
+  dRow: number,
+): AsciiDiagram {
+  const colDelta = Math.round(dCol);
+  const rowDelta = Math.round(dRow);
+  if (colDelta === 0 && rowDelta === 0) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((node) => ({
+      ...node,
+      col: Math.max(0, node.col + colDelta),
+      row: Math.max(0, node.row + rowDelta),
+    })),
+  };
+}
+
 /** Move a node to (col, row); a container drags its whole subtree along. */
 export function moveNodeOp(
   diagram: AsciiDiagram,

package/src/codeContext/types.ts

@@ -56,7 +56,7 @@ export interface CodeContext {
   /** Line-anchored sections. Array order is preserved for equal lines. */
   sections?: CodeContextSection[];
   /**
-   * Extra URI schemes section links may use (e.g. `['gezel-nav']`).
+   * Extra URI schemes section links may use (e.g. `['workspace-nav']`).
    * http/https/mailto/tel are always allowed; executable schemes
    * (javascript:, data:) are never allowed regardless.
    */

package/src/customTemplates/__tests__/useMemoryLayerAdapter.test.ts

@@ -34,6 +34,19 @@ describe('applyCommand', () => {
     expect(after[0].position.height).toBe(80);
   });
 
+  it('resizeLayer applies an optional north/west origin atomically', () => {
+    const before: Layer[] = [rect('a', 10, 20, 100, 50)];
+    const after = applyCommand(before, {
+      kind: 'resizeLayer',
+      id: 'a',
+      x: 0,
+      y: 5,
+      width: 110,
+      height: 65,
+    });
+    expect(after[0].position).toMatchObject({ x: 0, y: 5, width: 110, height: 65 });
+  });
+
   it('addLayer appends', () => {
     const before: Layer[] = [rect('a', 0, 0)];
     const newLayer = rect('b', 100, 100);

package/src/customTemplates/useMemoryLayerAdapter.ts

@@ -69,7 +69,13 @@ export function applyCommand(layers: readonly Layer[], cmd: SceneCommand): Layer
         l.id === cmd.id
           ? ({
               ...l,
-              position: { ...l.position, width: cmd.width, height: cmd.height },
+              position: {
+                ...l.position,
+                ...(cmd.x !== undefined ? { x: cmd.x } : {}),
+                ...(cmd.y !== undefined ? { y: cmd.y } : {}),
+                width: cmd.width,
+                height: cmd.height,
+              },
             } as Layer)
           : l,
       );

package/src/diagram/DiagramCanvas.tsx

@@ -29,7 +29,14 @@ import { DIAGRAM_VIEWPORT, DIAGRAM_TOOLS } from './diagramConstants';
 
 export type DiagramCommand =
   | { kind: 'moveNode'; nodeId: string; x: number; y: number }
-  | { kind: 'resizeNode'; nodeId: string; width: number; height: number }
+  | {
+      kind: 'resizeNode';
+      nodeId: string;
+      width: number;
+      height: number;
+      x?: number;
+      y?: number;
+    }
   | { kind: 'addConnection'; source: string; target: string; type?: string }
   | { kind: 'removeConnection'; source: string; target: string; type?: string }
   | { kind: 'renameNode'; nodeId: string; newLabel: string }
@@ -145,7 +152,14 @@ export function DiagramCanvas({
           if (!cmd.id.startsWith('node-card-')) return;
           const nodeId = nodeIdFromCardLayerId(cmd.id);
           if (!nodeId) return;
-          onCommand({ kind: 'resizeNode', nodeId, width: cmd.width, height: cmd.height });
+          onCommand({
+            kind: 'resizeNode',
+            nodeId,
+            width: cmd.width,
+            height: cmd.height,
+            ...(cmd.x !== undefined ? { x: cmd.x } : {}),
+            ...(cmd.y !== undefined ? { y: cmd.y } : {}),
+          });
           return;
         }
         case 'setLayerAttr':