pmx-canvas 0.6.2 → 0.6.4

package/skills/pmx-canvas/references/installing-pmx-canvas.md

@@ -4,7 +4,7 @@ Use this reference when the `pmx-canvas` skill is installed but the `pmx-canvas`
 
 ## Prerequisites and version
 
-The examples pin **PMX Canvas 0.6.1**, which requires **Bun >=1.4.2** even when
+The examples pin **PMX Canvas 0.6.4**, which requires **Bun >=1.4.2** even when
 installed through npm: the CLI runs through Bun, not Node. Check `bun --version`
 first. If missing or older, follow the [Bun installation instructions](https://bun.sh/docs/installation)
 with the user's authorization. Ensure Bun is on the MCP host's PATH as well as the
@@ -17,11 +17,11 @@ in `SKILL.md`. Do not pair newer checkout guidance with an older runtime unknowi
 ## Install from npm
 
 ```bash
-npm install -g pmx-canvas@0.6.1
+npm install -g pmx-canvas@0.6.4
 pmx-canvas --version
 ```
 
-Without a global install, use `bunx pmx-canvas@0.6.1` in place of `pmx-canvas` in
+Without a global install, use `bunx pmx-canvas@0.6.4` in place of `pmx-canvas` in
 the commands below. Do not use unpinned `bunx pmx-canvas` for a version-specific check.
 
 ## Choose the workspace and target
@@ -73,7 +73,7 @@ bun run build
 bun run src/cli/index.ts --version
 ```
 
-This uses the checked-out source, not necessarily the published 0.6.1 package. Follow
+This uses the checked-out source, not necessarily the published package. Follow
 that checkout's `package.json` Bun requirement and bundled skill. Set the same root/port
 environment above; substitute `bun run /absolute/path/to/pmx-canvas/src/cli/index.ts`
 for `pmx-canvas` in startup and verification commands. The target workspace can be
@@ -91,7 +91,7 @@ discards empty env values, remove `PMX_CANVAS_URL` from its launch environment i
   "mcpServers": {
     "canvas": {
       "command": "bunx",
-      "args": ["pmx-canvas@0.6.1", "--mcp"],
+      "args": ["pmx-canvas@0.6.4", "--mcp"],
       "env": {
         "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
         "PMX_CANVAS_PORT": "14313",

package/src/client/canvas/FeedbackDialog.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState } from 'preact/hooks';
+import { useFocusTrap } from './use-focus-trap';
+
+/** Draft only: GitHub owns authentication and the final public submission. */
+export function FeedbackDialog({ onClose }: { onClose: () => void }) {
+  const ref = useRef<HTMLFormElement>(null);
+  const [kind, setKind] = useState('Bug report');
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  useFocusTrap(ref, true);
+
+  return (
+    <div class="text-prompt-backdrop feedback-backdrop" onPointerDown={onClose}>
+      <form
+        ref={ref}
+        class="text-prompt feedback-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="feedback-title"
+        aria-describedby="feedback-privacy"
+        action="https://github.com/pskoett/pmx-canvas/issues/new"
+        method="get"
+        target="_blank"
+        rel="noopener noreferrer"
+        onPointerDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+      >
+        <div id="feedback-title" class="text-prompt-title">
+          Bug and feedback
+        </div>
+        <p id="feedback-privacy" class="feedback-note">
+          Opens a draft issue in pskoett/pmx-canvas. Review and submit it on GitHub using your account. Issues are
+          public. Only what you enter below is included; no board contents, workspace paths, screenshots, or logs are
+          attached.
+        </p>
+        <label>
+          Feedback type
+          <select class="text-prompt-input" value={kind} onChange={(e) => setKind(e.currentTarget.value)}>
+            <option>Bug report</option>
+            <option>Feature request</option>
+            <option>General feedback</option>
+          </select>
+        </label>
+        <label>
+          Title
+          <input
+            class="text-prompt-input"
+            name="title"
+            required
+            maxLength={120}
+            value={title}
+            onInput={(e) => setTitle(e.currentTarget.value)}
+            placeholder="A short summary"
+          />
+        </label>
+        <label>
+          Description
+          <textarea
+            class="text-prompt-input"
+            required
+            maxLength={1200}
+            rows={6}
+            value={description}
+            onInput={(e) => setDescription(e.currentTarget.value)}
+            placeholder="What happened, what you expected, and steps to reproduce — or describe your idea."
+          />
+        </label>
+        <input type="hidden" name="body" value={`## ${kind}\n\n${description.trim()}`} />
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" onClick={onClose}>
+            Cancel
+          </button>
+          <button type="submit" class="text-prompt-confirm" disabled={!title.trim() || !description.trim()}>
+            Continue on GitHub ↗
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/client/canvas/ToolRail.tsx

@@ -34,6 +34,7 @@ import {
 import { saveCanvasTheme } from '../state/intent-bridge';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
+import { FeedbackDialog } from './FeedbackDialog';
 import { clearThemeOverride } from '../state/theme-override';
 import { invalidateTokenCache } from '../theme/tokens';
 import type { AnnotationTool } from '../types';
@@ -170,6 +171,7 @@ export function ToolRail({
   const isTraceOn = traceEnabled.value;
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
   const edgeCount = edges.value.size;
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
   const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
@@ -236,212 +238,246 @@ export function ToolRail({
   };
 
   return (
-    <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
-      <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
-        <IconLogo size={22} />
-      </span>
-
-      <div class="rail-divider" />
+    <>
+      <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
+        <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
+          <IconLogo size={22} />
+        </span>
 
-      <RailButton label="Select" shortcut="V" active={tool === 'select'} onClick={() => (canvasTool.value = 'select')}>
-        <IconCursorTool />
-      </RailButton>
-      <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
-        <IconHandTool />
-      </RailButton>
-      <RailButton
-        label="Connect"
-        shortcut="C"
-        active={tool === 'connect'}
-        onClick={() => (canvasTool.value = 'connect')}
-      >
-        <svg
-          width="15"
-          height="15"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          aria-hidden="true"
+        <RailButton
+          label="Bug and feedback"
+          menuOpen={feedbackOpen}
+          onClick={() => {
+            setOpenMenu(null);
+            setFeedbackOpen(true);
+          }}
         >
-          <circle cx="4" cy="4" r="2" />
-          <circle cx="12" cy="12" r="2" />
-          <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
-        </svg>
-      </RailButton>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="4.5" y="5" width="7" height="9" rx="3.5" />
+            <path d="M6 5V4a2 2 0 0 1 4 0v1M8 8v6M2 4l2.5 2M14 4l-2.5 2M1.5 9h3M11.5 9h3M2 14l2.5-2M14 14l-2.5-2" />
+          </svg>
+        </RailButton>
 
-      <div class="rail-divider" />
+        <div class="rail-divider" />
 
-      <RailButton
-        label="Markdown note"
-        shortcut="M"
-        onClick={() =>
-          void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
-            logRailError('create markdown', error),
-          )
-        }
-      >
-        <IconNodeMarkdown size={15} />
-      </RailButton>
-      <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
-        <IconNodeImage size={15} />
-      </RailButton>
-      <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
-        <IconNodeFile size={15} />
-      </RailButton>
-      <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
-        <IconNodeWebpage size={15} />
-      </RailButton>
-      <RailButton
-        label="HTML surface"
-        shortcut="H"
-        onClick={() =>
-          void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
-            logRailError('create html', error),
-          )
-        }
-      >
-        <IconNodeHtml />
-      </RailButton>
-      <RailButton
-        label="Group"
-        shortcut="G"
-        onClick={() =>
-          void createNodeInView({ type: 'group', title: 'Group' }).catch((error) => logRailError('create group', error))
-        }
-      >
-        <IconNodeGroup size={15} />
-      </RailButton>
-      <span class="toolbar-menu-anchor">
         <RailButton
-          label="Annotate"
-          shortcut="A"
-          detail="Draw · Text note · Eraser"
-          active={annotationTool !== null}
-          menuOpen={openMenu === 'annotate'}
-          onClick={toggleMenu('annotate')}
+          label="Select"
+          shortcut="V"
+          active={tool === 'select'}
+          onClick={() => (canvasTool.value = 'select')}
         >
-          {annotationTool === 'eraser' ? (
-            <IconEraser />
-          ) : annotationTool === 'text' ? (
-            <IconTextAnnotation />
-          ) : (
-            <IconPen />
-          )}
+          <IconCursorTool />
+        </RailButton>
+        <RailButton label="Pan" shortcut="Space" active={tool === 'pan'} onClick={() => (canvasTool.value = 'pan')}>
+          <IconHandTool />
+        </RailButton>
+        <RailButton
+          label="Connect"
+          shortcut="C"
+          active={tool === 'connect'}
+          onClick={() => (canvasTool.value = 'connect')}
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <circle cx="4" cy="4" r="2" />
+            <circle cx="12" cy="12" r="2" />
+            <path d="M5.5 5.5 C 8 8, 8 8, 10.5 10.5" />
+          </svg>
         </RailButton>
-        {openMenu === 'annotate' && (
-          <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
-                setOpenMenu(null);
-              }}
-            >
-              <IconPen />
-              <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
-            </button>
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
-                setOpenMenu(null);
-              }}
-            >
-              <IconTextAnnotation />
-              <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
-            </button>
-            <button
-              type="button"
-              class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
-              onClick={() => {
-                onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
-                setOpenMenu(null);
-              }}
-            >
-              <IconEraser />
-              <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
-            </button>
-          </div>
-        )}
-      </span>
 
-      <div class="rail-spacer" />
+        <div class="rail-divider" />
 
-      <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
-        <IconSearch />
-      </RailButton>
-      <RailButton
-        label="Arrange"
-        detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
-        onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
-      >
-        <IconArrange />
-      </RailButton>
-      <RailButton
-        label={isTraceOn ? 'Disable trace' : 'Enable trace'}
-        active={isTraceOn}
-        onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
-      >
-        <IconTrace />
-      </RailButton>
-      {(isTraceOn || traceNodeCount > 0) && (
-        <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
-          <IconClearTrace />
+        <RailButton
+          label="Markdown note"
+          shortcut="M"
+          onClick={() =>
+            void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch((error) =>
+              logRailError('create markdown', error),
+            )
+          }
+        >
+          <IconNodeMarkdown size={15} />
+        </RailButton>
+        <RailButton label="Image" shortcut="I" onClick={() => promptedCreate('image')}>
+          <IconNodeImage size={15} />
+        </RailButton>
+        <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
+          <IconNodeFile size={15} />
+        </RailButton>
+        <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
+          <IconNodeWebpage size={15} />
+        </RailButton>
+        <RailButton
+          label="HTML surface"
+          shortcut="H"
+          onClick={() =>
+            void createNodeInView({ type: 'html', title: 'HTML surface' }).catch((error) =>
+              logRailError('create html', error),
+            )
+          }
+        >
+          <IconNodeHtml />
         </RailButton>
-      )}
-      <RailButton
-        label={minimapVisible ? 'Hide minimap' : 'Show minimap'}
-        active={minimapVisible}
-        onClick={onToggleMinimap}
-      >
-        <IconMinimap />
-      </RailButton>
-      <RailButton label="Snapshots" active={snapshotOpen} onClick={onToggleSnapshot} btnRef={snapshotBtnRef}>
-        <IconSnapshot />
-      </RailButton>
-      <span class="toolbar-menu-anchor">
         <RailButton
-          label="Theme"
-          detail={CANVAS_THEME_META[activeTheme].label}
-          menuOpen={openMenu === 'theme'}
-          ariaLabel="Choose theme"
-          active={openMenu === 'theme'}
-          onClick={toggleMenu('theme')}
+          label="Group"
+          shortcut="G"
+          onClick={() =>
+            void createNodeInView({ type: 'group', title: 'Group' }).catch((error) =>
+              logRailError('create group', error),
+            )
+          }
         >
-          {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+          <IconNodeGroup size={15} />
         </RailButton>
-        {openMenu === 'theme' && (
-          <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
-            {CANVAS_THEMES.map((name) => (
+        <span class="toolbar-menu-anchor">
+          <RailButton
+            label="Annotate"
+            shortcut="A"
+            detail="Draw · Text note · Eraser"
+            active={annotationTool !== null}
+            menuOpen={openMenu === 'annotate'}
+            onClick={toggleMenu('annotate')}
+          >
+            {annotationTool === 'eraser' ? (
+              <IconEraser />
+            ) : annotationTool === 'text' ? (
+              <IconTextAnnotation />
+            ) : (
+              <IconPen />
+            )}
+          </RailButton>
+          {openMenu === 'annotate' && (
+            <div class="toolbar-menu" style={sideMenuStyle(false)} role="menu" aria-label="Annotate">
               <button
-                key={name}
                 type="button"
-                role="menuitemradio"
-                aria-checked={activeTheme === name}
-                class={`toolbar-menu-item${activeTheme === name ? ' active' : ''}`}
-                onClick={() => applyTheme(name)}
+                class={`toolbar-menu-item${annotationTool === 'pen' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'pen' ? null : 'pen');
+                  setOpenMenu(null);
+                }}
               >
-                <span class="theme-swatch" style={{ background: CANVAS_THEME_META[name].swatchBg }}>
-                  <span class="theme-swatch-dot" style={{ background: CANVAS_THEME_META[name].swatchAccent }} />
-                </span>
-                <span>{CANVAS_THEME_META[name].label}</span>
-                {activeTheme === name && (
-                  <span class="toolbar-menu-check" aria-hidden="true">
-                    ✓
-                  </span>
-                )}
+                <IconPen />
+                <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Draw (A)'}</span>
+              </button>
+              <button
+                type="button"
+                class={`toolbar-menu-item${annotationTool === 'text' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'text' ? null : 'text');
+                  setOpenMenu(null);
+                }}
+              >
+                <IconTextAnnotation />
+                <span>{annotationTool === 'text' ? 'Stop text notes' : 'Text note'}</span>
               </button>
-            ))}
-          </div>
+              <button
+                type="button"
+                class={`toolbar-menu-item${annotationTool === 'eraser' ? ' active' : ''}`}
+                onClick={() => {
+                  onSetAnnotationTool(annotationTool === 'eraser' ? null : 'eraser');
+                  setOpenMenu(null);
+                }}
+              >
+                <IconEraser />
+                <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Eraser'}</span>
+              </button>
+            </div>
+          )}
+        </span>
+
+        <div class="rail-spacer" />
+
+        <RailButton label="Search & commands" shortcut={modChord('K')} onClick={onOpenPalette}>
+          <IconSearch />
+        </RailButton>
+        <RailButton
+          label="Arrange"
+          detail={edgeCount > 0 ? 'graph-aware' : 'grid'}
+          onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
+        >
+          <IconArrange />
+        </RailButton>
+        <RailButton
+          label={isTraceOn ? 'Disable trace' : 'Enable trace'}
+          active={isTraceOn}
+          onClick={() => sendIntent('trace-toggle', { enabled: !isTraceOn })}
+        >
+          <IconTrace />
+        </RailButton>
+        {(isTraceOn || traceNodeCount > 0) && (
+          <RailButton label="Clear trace" onClick={() => sendIntent('trace-clear')}>
+            <IconClearTrace />
+          </RailButton>
         )}
-      </span>
-      <RailButton label="Shortcuts" shortcut="?" onClick={onOpenShortcuts}>
-        <IconShortcuts />
-      </RailButton>
-    </div>
+        <RailButton
+          label={minimapVisible ? 'Hide minimap' : 'Show minimap'}
+          active={minimapVisible}
+          onClick={onToggleMinimap}
+        >
+          <IconMinimap />
+        </RailButton>
+        <RailButton label="Snapshots" active={snapshotOpen} onClick={onToggleSnapshot} btnRef={snapshotBtnRef}>
+          <IconSnapshot />
+        </RailButton>
+        <span class="toolbar-menu-anchor">
+          <RailButton
+            label="Theme"
+            detail={CANVAS_THEME_META[activeTheme].label}
+            menuOpen={openMenu === 'theme'}
+            ariaLabel="Choose theme"
+            active={openMenu === 'theme'}
+            onClick={toggleMenu('theme')}
+          >
+            {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+          </RailButton>
+          {openMenu === 'theme' && (
+            <div class="toolbar-menu" style={sideMenuStyle(true)} role="menu" aria-label="Theme">
+              {CANVAS_THEMES.map((name) => (
+                <button
+                  key={name}
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={activeTheme === name}
+                  class={`toolbar-menu-item${activeTheme === name ? ' active' : ''}`}
+                  onClick={() => applyTheme(name)}
+                >
+                  <span class="theme-swatch" style={{ background: CANVAS_THEME_META[name].swatchBg }}>
+                    <span class="theme-swatch-dot" style={{ background: CANVAS_THEME_META[name].swatchAccent }} />
+                  </span>
+                  <span>{CANVAS_THEME_META[name].label}</span>
+                  {activeTheme === name && (
+                    <span class="toolbar-menu-check" aria-hidden="true">
+                      ✓
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </span>
+        <RailButton label="Shortcuts" shortcut="?" onClick={onOpenShortcuts}>
+          <IconShortcuts />
+        </RailButton>
+      </div>
+      {feedbackOpen && <FeedbackDialog onClose={() => setFeedbackOpen(false)} />}
+    </>
   );
 }

package/src/client/canvas/auto-fit.ts

@@ -1,5 +1,6 @@
 import type { CanvasNodeState } from '../types';
 import { nodeMinSize } from '../../shared/node-sizes.js';
+import { findBlocker } from '../../shared/placement.js';
 
 export const AUTO_FIT_TITLEBAR_HEIGHT = 37;
 export const AUTO_FIT_MAX_HEIGHT = 600;
@@ -81,7 +82,25 @@ export function shouldContentFitIframeNode(node: CanvasNodeState): boolean {
  * capped at the iframe ceiling.
  */
 export function computeContentGrowHeight(node: CanvasNodeState, contentHeight: number): number | null {
-  if (!shouldContentFitIframeNode(node) || contentHeight <= 0) return null;
+  if (!shouldContentFitIframeNode(node) || !Number.isFinite(contentHeight) || contentHeight <= 0) return null;
   const want = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT + AUTO_FIT_BODY_PADDING, AUTO_FIT_MAX_HEIGHT_IFRAME);
   return want > node.size.height + 8 ? want : null;
 }
+
+/** Keep an automatically growing card clear without moving its neighbors or
+ * changing its column. Groups and screen-pinned cards retain authored placement. */
+export function contentFitPosition(
+  node: CanvasNodeState,
+  height: number,
+  allNodes: CanvasNodeState[],
+): CanvasNodeState['position'] {
+  if (height <= node.size.height || node.pinned || node.data.parentGroup) return node.position;
+  const obstacles = allNodes.filter((other) => other.id !== node.id && !other.pinned && other.type !== 'group');
+  const position = { ...node.position };
+  let blocker = findBlocker(position, node.size.width, height, obstacles, 24);
+  while (blocker) {
+    position.y = blocker.position.y + blocker.size.height + 24;
+    blocker = findBlocker(position, node.size.width, height, obstacles, 24);
+  }
+  return position;
+}