pmx-canvas 0.4.8 → 0.5.0

package/src/client/icons.tsx

@@ -34,20 +34,6 @@ export function IconFitAll(p: IconProps): JSX.Element {
   );
 }
 
-/** Framed crosshair — reset view 1:1 */
-export function IconResetView(p: IconProps): JSX.Element {
-  return (
-    <Icon {...p}>
-      <rect x="2" y="2" width="12" height="12" rx="2" />
-      <line x1="8" y1="4.5" x2="8" y2="6.5" />
-      <line x1="8" y1="9.5" x2="8" y2="11.5" />
-      <line x1="4.5" y1="8" x2="6.5" y2="8" />
-      <line x1="9.5" y1="8" x2="11.5" y2="8" />
-      <circle cx="8" cy="8" r="1" fill="currentColor" stroke="none" />
-    </Icon>
-  );
-}
-
 /** Magnifier with + */
 export function IconZoomIn(p: IconProps): JSX.Element {
   return (
@@ -214,12 +200,11 @@ export function IconShortcuts(p: IconProps): JSX.Element {
   );
 }
 
-/** Half-lit circle — theme toggle (generic). */
-export function IconTheme(p: IconProps): JSX.Element {
+/** Speech bubble — steer the agent (command bar composer). */
+export function IconSteer(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>
-      <circle cx="8" cy="8" r="6" />
-      <path d="M8 2 A 6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
+      <path d="M2 13 L2 4 A2 2 0 0 1 4 2 L12 2 A2 2 0 0 1 14 4 L14 9 A2 2 0 0 1 12 11 L5 11 Z" />
     </Icon>
   );
 }
@@ -277,6 +262,60 @@ export function IconLogo({ size = 22, class: className }: IconProps): JSX.Elemen
 /* ── Node-type icons · Focus Field family ─────────────────── */
 
 /** Framed document with lines — markdown */
+export function IconCursorTool({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M3 2l10 5.5-4.2 1.3L7.5 13z" />
+    </svg>
+  );
+}
+
+export function IconHandTool({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 7.5V3.8a1 1 0 0 1 2 0V7m0-3.9a1 1 0 0 1 2 0V7m0-2.7a1 1 0 0 1 2 0V7.4m0-.9a1 1 0 0 1 2 0v3.2A4.3 4.3 0 0 1 8.7 14H8a4.3 4.3 0 0 1-3.6-2L2.7 9.3a1 1 0 0 1 1.6-1.2L5 9.2" />
+    </svg>
+  );
+}
+
+export function IconNodeHtml({ size = 15 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6 4.5L2.5 8 6 11.5M10 4.5L13.5 8 10 11.5" />
+    </svg>
+  );
+}
+
 export function IconNodeMarkdown(p: IconProps): JSX.Element {
   return (
     <Icon {...p}>

package/src/client/nodes/GroupNode.tsx

@@ -1,37 +1,18 @@
-import type { CanvasNodeState } from '../types';
 import { nodes } from '../state/canvas-store';
+import type { CanvasNodeState } from '../types';
 
 interface GroupNodeProps {
   node: CanvasNodeState;
 }
 
+/**
+ * Group frame body (rail-chrome-v2 groups v2): the children live in the world
+ * layer and the name/count/actions sit on the frame edge, so the body is just
+ * the wash — plus a hint while the group is empty.
+ */
 export function GroupNode({ node }: GroupNodeProps) {
   const childIds = (node.data.children as string[]) ?? [];
-  const allNodes = nodes.value;
-
-  // Count how many children actually exist
-  const liveChildren = childIds.filter((id) => allNodes.has(id));
-  const childCount = liveChildren.length;
-
-  // Build a type summary for the collapsed view
-  const typeCounts: Record<string, number> = {};
-  for (const id of liveChildren) {
-    const child = allNodes.get(id);
-    if (child) typeCounts[child.type] = (typeCounts[child.type] ?? 0) + 1;
-  }
-  const typeSummary = Object.entries(typeCounts)
-    .map(([type, count]) => `${count} ${type}`)
-    .join(', ');
-
-  return (
-    <div class="group-node-body">
-      <div class="group-summary">
-        <span class="group-child-count">
-          {childCount} node{childCount !== 1 ? 's' : ''}
-        </span>
-        {typeSummary && <span class="group-type-summary">{typeSummary}</span>}
-      </div>
-      {childCount === 0 && <div class="group-empty-hint">Drag nodes here or use the selection bar to group nodes</div>}
-    </div>
-  );
+  const liveChildren = childIds.filter((id) => nodes.value.has(id));
+  if (liveChildren.length > 0) return null;
+  return <div class="group-empty-hint">Drop nodes here — release while the frame lights up to add them</div>;
 }

package/src/client/nodes/InlineFormatBar.tsx

@@ -1,5 +1,6 @@
 import type { RefObject } from 'preact';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { modChord } from '../utils/platform';
 import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-commands';
 
 const GAP = 8;
@@ -15,8 +16,8 @@ type Action =
   | { kind: 'link'; icon: string; title: string; dividerBefore?: boolean };
 
 const ACTIONS: Action[] = [
-  { kind: 'exec', command: 'bold', icon: 'B', title: 'Bold (⌘B)' },
-  { kind: 'exec', command: 'italic', icon: 'I', title: 'Italic (⌘I)' },
+  { kind: 'exec', command: 'bold', icon: 'B', title: `Bold (${modChord('B')})` },
+  { kind: 'exec', command: 'italic', icon: 'I', title: `Italic (${modChord('I')})` },
   { kind: 'exec', command: 'strikeThrough', icon: 'S', title: 'Strikethrough' },
   { kind: 'code', icon: '{ }', title: 'Inline code', dividerBefore: true },
   { kind: 'block', tag: 'H1', icon: 'H1', title: 'Heading 1', dividerBefore: true },
@@ -26,7 +27,7 @@ const ACTIONS: Action[] = [
   { kind: 'block', tag: 'BLOCKQUOTE', icon: '❝', title: 'Quote', dividerBefore: true },
   { kind: 'exec', command: 'insertUnorderedList', icon: '•', title: 'Bullet list' },
   { kind: 'exec', command: 'insertOrderedList', icon: '1.', title: 'Numbered list' },
-  { kind: 'link', icon: '🔗', title: 'Link (⌘K)', dividerBefore: true },
+  { kind: 'link', icon: '🔗', title: `Link (${modChord('K')})`, dividerBefore: true },
 ];
 
 function runAction(action: Action): void {

package/src/client/nodes/InlineMarkdownEditor.tsx

@@ -46,6 +46,11 @@ export function InlineMarkdownEditor({
     const el = rootRef.current;
     if (!el) return;
     el.innerHTML = initialHtmlRef.current;
+    // GFM task checkboxes are live in the editor too: marked emits them
+    // `disabled`, which also swallows clicks in the expanded view.
+    for (const box of el.querySelectorAll('input[type="checkbox"][disabled]')) {
+      box.removeAttribute('disabled');
+    }
   }, []);
 
   const serialize = useCallback((): string => {
@@ -59,6 +64,10 @@ export function InlineMarkdownEditor({
   }, [onChange, serialize]);
 
   const handleSave = useCallback(() => {
+    // A blur fired by unmounting (Esc closes the overlay while the editor is
+    // focused) reads back an empty tree — saving that would WIPE the document.
+    const el = rootRef.current;
+    if (!el || !el.isConnected || el.innerHTML === '') return;
     onSave?.(serialize());
   }, [onSave, serialize]);
 
@@ -91,6 +100,23 @@ export function InlineMarkdownEditor({
     [handleInput, handleSave],
   );
 
+  // A checkbox click inside contenteditable toggles the DOM property but
+  // fires no `input` event — serialize explicitly (turndown's GFM rule reads
+  // `node.checked`) so the tick persists like any other edit.
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target instanceof HTMLInputElement && target.type === 'checkbox') {
+        // Serialization parses innerHTML — a string, which carries ATTRIBUTES
+        // only. Mirror the clicked property onto the attribute or the tick
+        // vanishes on the next round-trip.
+        target.toggleAttribute('checked', target.checked);
+        handleInput();
+      }
+    },
+    [handleInput],
+  );
+
   // Arbitrary rich HTML (Word, the web) would force turndown to sanitize a
   // far wider surface and tends to lose fidelity — plain text is safer.
   const handlePaste = useCallback(
@@ -114,6 +140,7 @@ export function InlineMarkdownEditor({
         onInput={handleInput}
         onKeyDown={handleKeyDown}
         onPaste={handlePaste}
+        onClick={handleClick}
         onBlur={handleSave}
       />
       <InlineFormatBar hostRef={rootRef} onChange={handleInput} />

package/src/client/nodes/MarkdownNode.tsx

@@ -11,12 +11,23 @@ function RenderedMarkdown({
   html,
   className,
   style,
+  onTaskToggle,
 }: {
   html: string;
   className?: string;
   style?: string | JSX.CSSProperties;
+  /** Enables the GFM task checkboxes and reports which one was clicked (document order). */
+  onTaskToggle?: (index: number) => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
+  // The handler lives in a ref so the DOM effect depends on `html` ALONE. With
+  // the inline prop in the deps, every unrelated re-render (bring-to-front on
+  // pointerdown, presence frames) replaced the children — and a HUMAN press is
+  // ~100ms, so the checkbox under the finger was swapped mid-press and the
+  // click never fired. Synthetic test clicks are fast enough to win the race,
+  // which is exactly why this shipped "verified".
+  const onTaskToggleRef = useRef(onTaskToggle);
+  onTaskToggleRef.current = onTaskToggle;
 
   useEffect(() => {
     const container = containerRef.current;
@@ -26,9 +37,48 @@ function RenderedMarkdown({
     const template = document.createElement('template');
     template.innerHTML = html;
     container.append(template.content.cloneNode(true));
+    if (onTaskToggleRef.current) {
+      for (const box of container.querySelectorAll('input[type="checkbox"][disabled]')) {
+        box.removeAttribute('disabled');
+      }
+    }
   }, [html]);
 
-  return <div ref={containerRef} class={className} style={style} />;
+  const handleClick = onTaskToggle
+    ? (e: MouseEvent) => {
+        const onToggle = onTaskToggleRef.current;
+        const container = containerRef.current;
+        if (!container || !onToggle) return;
+        const target = e.target as HTMLElement;
+        // The box itself, or anywhere in the row's checkbox gutter — a 15px
+        // input alone is a miserable target at zoom and in embedded panes
+        // that forward clicks imprecisely.
+        let box: HTMLInputElement | null = null;
+        if (target instanceof HTMLInputElement && target.type === 'checkbox') {
+          box = target;
+        } else {
+          const row = target.closest('li');
+          const rowBox = row?.querySelector<HTMLInputElement>(':scope > input[type="checkbox"]');
+          if (rowBox && e.clientX <= rowBox.getBoundingClientRect().right + 6) box = rowBox;
+        }
+        if (!box) return;
+        e.stopPropagation();
+        const index = [...container.querySelectorAll('input[type="checkbox"]')].indexOf(box);
+        if (index >= 0) onToggle(index);
+      }
+    : undefined;
+
+  return <div ref={containerRef} class={className} style={style} onClick={handleClick} />;
+}
+
+/** Flip the index-th GFM task marker in the source (document order matches the rendered boxes). */
+export function toggleTaskMarker(markdown: string, index: number): string {
+  let seen = -1;
+  return markdown.replace(/^(\s*(?:[-*+]|\d+[.)])\s+\[)([ xX])(\])/gm, (match, pre, state, post) => {
+    seen += 1;
+    if (seen !== index) return match;
+    return `${pre}${state === ' ' ? 'x' : ' '}${post}`;
+  });
 }
 
 export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
@@ -317,34 +367,19 @@ export function MarkdownNode({ node, expanded = false }: { node: CanvasNodeState
       <RenderedMarkdown
         html={rendered}
         style={{ padding: rendered ? '0' : '12px', color: rendered ? undefined : 'var(--c-dim)' }}
+        // Task checkboxes are live on the card itself — no need to expand to tick one.
+        onTaskToggle={(index) => {
+          const next = toggleTaskMarker(content, index);
+          if (next !== content) handleInlineSave(next);
+        }}
       />
       {!loaded && <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Loading…</div>}
       {loaded && !rendered && (
         <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>Empty node</div>
       )}
-      <button
-        type="button"
-        onClick={() => expandNode(node.id)}
-        style={{
-          position: 'absolute',
-          top: '4px',
-          right: '4px',
-          padding: '3px 8px',
-          fontSize: '10px',
-          background: 'var(--c-panel-overlay)',
-          border: '1px solid var(--c-line)',
-          borderRadius: '4px',
-          color: 'var(--c-text-soft)',
-          cursor: 'pointer',
-          opacity: 0.7,
-        }}
-        onMouseEnter={(e) => {
-          (e.target as HTMLElement).style.opacity = '1';
-        }}
-        onMouseLeave={(e) => {
-          (e.target as HTMLElement).style.opacity = '0.7';
-        }}
-      >
+      {/* Hover-revealed, solid-backed chip — always-on it sat on the first
+          line of content (double-click edits inline; this is discovery). */}
+      <button type="button" class="md-edit-btn" onClick={() => expandNode(node.id)}>
         Edit
       </button>
     </div>

package/src/client/nodes/MdFormatBar.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { isMac } from '../utils/platform';
+import { modChord } from '../utils/platform';
 import { type FormatAction, FORMAT_ACTIONS, getSelectionRect } from './md-format';
 
 const PRIMARY_ACTIONS = FORMAT_ACTIONS.filter((a) => a.shortcut);
@@ -75,8 +75,6 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
 
   if (!visible) return null;
 
-  const modLabel = isMac ? '⌘' : 'Ctrl';
-
   return (
     <div
       ref={barRef}
@@ -89,7 +87,7 @@ export function MdFormatBar({ textareaRef }: { textareaRef: { current: HTMLTextA
           key={a.key}
           type="button"
           class={`md-format-btn md-format-btn-${a.key}`}
-          title={`${a.label} (${modLabel}+${a.shortcut!.toUpperCase()})`}
+          title={`${a.label} (${modChord(a.shortcut!.toUpperCase())})`}
           onClick={() => runAction(a)}
         >
           {a.icon}

package/src/client/nodes/inline-editor-commands.ts

@@ -1,16 +1,27 @@
 /** Shared contentEditable command helpers used by both the inline editor
  *  and its floating toolbar. Kept in a module that neither component
  *  depends on transitively so we don't get a circular import. */
+import { askText } from '../canvas/TextPrompt';
 
 /** Prompt for a URL and insert it as a link on the current selection.
  *  Rejects `javascript:` and `data:` schemes so a link can't execute script
- *  when clicked. */
+ *  when clicked. Uses the in-canvas prompt (`window.prompt` is a silent no-op
+ *  in embedded panes); the selection is saved before the dialog takes focus
+ *  and restored before inserting. */
 export function promptAndInsertLink(): void {
-  const url = window.prompt('Link URL:');
-  if (!url) return;
-  const trimmed = url.trim().toLowerCase();
-  if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:')) return;
-  document.execCommand('createLink', false, url);
+  const selection = window.getSelection();
+  const saved = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+  void askText('Link URL', 'https://example.com').then((url) => {
+    if (!url) return;
+    const trimmed = url.trim().toLowerCase();
+    if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:')) return;
+    if (saved) {
+      const restore = window.getSelection();
+      restore?.removeAllRanges();
+      restore?.addRange(saved);
+    }
+    document.execCommand('createLink', false, url);
+  });
 }
 
 /** Wrap the current non-empty selection in an inline `<code>` element and

package/src/client/nodes/use-surface-frame.ts

@@ -27,7 +27,9 @@ export function useSurfaceFrame(url: string): { src?: string; srcdoc?: string }
   useEffect(() => {
     if (!wantsSrcdoc) return;
     let cancelled = false;
-    void fetch(url, { credentials: 'same-origin' })
+    // Ask the server to inline bundle assets (the mermaid renderer): hosts
+    // that force srcdoc mode block sub-frame subresource requests too.
+    void fetch(`${url}${url.includes('?') ? '&' : '?'}inline-assets=1`, { credentials: 'same-origin' })
       .then((res) => (res.ok ? res.text() : Promise.reject(new Error(`HTTP ${res.status}`))))
       .then((html) => {
         if (!cancelled) setDoc({ url, html });

package/src/client/state/attention-bridge.ts

@@ -266,6 +266,9 @@ function flushToastQueue(): void {
 
 function enqueueToast(entry: AttentionEntry): void {
   toastQueue.push(entry);
+  // A burst of writes must not replay as a minute of stale toasts — keep the
+  // newest few; the history drawer still has every entry.
+  if (toastQueue.length > 3) toastQueue.splice(0, toastQueue.length - 3);
   flushToastQueue();
 }