pmx-canvas 0.1.0

package/src/client/nodes/FileNode.tsx

@@ -0,0 +1,256 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { updateNodeData } from '../state/canvas-store';
+import { fetchFile, updateNodeFromClient } from '../state/intent-bridge';
+import type { CanvasNodeState } from '../types';
+
+/** Guess a language label from a file extension for display. */
+function langFromPath(path: string): string {
+  const ext = path.split('.').pop()?.toLowerCase() ?? '';
+  const map: Record<string, string> = {
+    ts: 'TypeScript', tsx: 'TSX', js: 'JavaScript', jsx: 'JSX',
+    py: 'Python', rs: 'Rust', go: 'Go', rb: 'Ruby',
+    java: 'Java', kt: 'Kotlin', swift: 'Swift', c: 'C', cpp: 'C++', h: 'C/C++',
+    css: 'CSS', html: 'HTML', json: 'JSON', yaml: 'YAML', yml: 'YAML',
+    md: 'Markdown', toml: 'TOML', sql: 'SQL', sh: 'Shell', bash: 'Shell',
+    xml: 'XML', graphql: 'GraphQL', proto: 'Protobuf',
+  };
+  return map[ext] ?? (ext.toUpperCase() || 'Text');
+}
+
+export function FileNode({
+  node,
+  expanded = false,
+}: { node: CanvasNodeState; expanded?: boolean }) {
+  const filePath = (node.data.path as string) || (node.data.content as string) || '';
+  const title = (node.data.title as string) || filePath.split('/').pop() || 'File';
+  const cachedContent = node.data.fileContent as string | undefined;
+  const updatedAt = node.data.updatedAt as string | undefined;
+  const lineCount = node.data.lineCount as number | undefined;
+
+  const [content, setContent] = useState<string>(cachedContent ?? '');
+  const [loading, setLoading] = useState(!cachedContent && !!filePath);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load file content on mount or when path changes
+  useEffect(() => {
+    if (!filePath) return;
+    // If we already have cached content from SSE, use it
+    if (cachedContent !== undefined) {
+      setContent(cachedContent);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchFile(filePath).then(({ content: fileText }) => {
+      if (cancelled) return;
+      if (!fileText && fileText !== '') {
+        setError('File not found');
+        setLoading(false);
+        return;
+      }
+      setContent(fileText);
+      setLoading(false);
+      // Cache content in node data so it survives re-renders
+      const lines = fileText.split('\n').length;
+      updateNodeData(node.id, { fileContent: fileText, lineCount: lines });
+      void updateNodeFromClient(node.id, { data: { fileContent: fileText, lineCount: lines } });
+    }).catch(() => {
+      if (!cancelled) {
+        setError('Failed to load file');
+        setLoading(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [filePath, cachedContent]);
+
+  // Sync content when server pushes updates via SSE
+  useEffect(() => {
+    if (cachedContent !== undefined && cachedContent !== content) {
+      setContent(cachedContent);
+    }
+  }, [cachedContent]);
+
+  const handleReload = useCallback(() => {
+    if (!filePath) return;
+    setLoading(true);
+    setError(null);
+    // Clear cached content to force a fresh fetch
+    updateNodeData(node.id, { fileContent: undefined });
+    void updateNodeFromClient(node.id, { data: { fileContent: undefined } });
+    fetchFile(filePath).then(({ content: fileText }) => {
+      setContent(fileText);
+      setLoading(false);
+      const lines = fileText.split('\n').length;
+      const updatedAt = new Date().toISOString();
+      updateNodeData(node.id, {
+        fileContent: fileText,
+        lineCount: lines,
+        updatedAt,
+      });
+      void updateNodeFromClient(node.id, {
+        data: {
+          fileContent: fileText,
+          lineCount: lines,
+          updatedAt,
+        },
+      });
+    }).catch(() => {
+      setError('Failed to reload');
+      setLoading(false);
+    });
+  }, [filePath, node.id]);
+
+  const lang = langFromPath(filePath);
+  const lines = content.split('\n');
+  const gutterWidth = `${String(lines.length).length + 1}ch`;
+
+  if (!filePath) {
+    return (
+      <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>
+        No file path set
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        fontFamily: 'var(--mono)',
+        fontSize: expanded ? '13px' : '11px',
+      }}
+    >
+      {/* Header bar */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '6px 10px',
+          borderBottom: '1px solid var(--c-line)',
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            fontSize: '9px',
+            padding: '1px 5px',
+            background: 'var(--c-accent-12)',
+            color: 'var(--c-accent)',
+            borderRadius: '3px',
+            fontWeight: 600,
+          }}
+        >
+          {lang}
+        </span>
+        <span
+          style={{
+            color: 'var(--c-text-soft)',
+            fontSize: expanded ? '12px' : '10px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            flex: 1,
+          }}
+          title={filePath}
+        >
+          {filePath}
+        </span>
+        {lineCount !== undefined && (
+          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
+            {lineCount} lines
+          </span>
+        )}
+        {updatedAt && (
+          <span style={{ color: 'var(--c-dim)', fontSize: '10px', flexShrink: 0 }}>
+            {new Date(updatedAt).toLocaleTimeString()}
+          </span>
+        )}
+        <button
+          type="button"
+          onClick={handleReload}
+          title="Reload file"
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'var(--c-muted)',
+            cursor: 'pointer',
+            padding: '2px 4px',
+            fontSize: '12px',
+            flexShrink: 0,
+          }}
+        >
+          ↻
+        </button>
+      </div>
+
+      {/* Content area */}
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: '8px 0',
+          background: expanded ? 'var(--c-panel-soft)' : undefined,
+          borderRadius: expanded ? '0 0 8px 8px' : undefined,
+        }}
+      >
+        {loading && (
+          <div style={{ color: 'var(--c-dim)', padding: '12px', fontStyle: 'italic' }}>
+            Loading…
+          </div>
+        )}
+        {error && (
+          <div style={{ color: 'var(--c-danger)', padding: '12px' }}>{error}</div>
+        )}
+        {!loading && !error && (
+          <pre
+            style={{
+              margin: 0,
+              lineHeight: '1.55',
+              tabSize: 2,
+            }}
+          >
+            {lines.map((line, i) => (
+              <div
+                key={i}
+                style={{
+                  display: 'flex',
+                  minHeight: '1.55em',
+                }}
+              >
+                <span
+                  style={{
+                    width: gutterWidth,
+                    minWidth: gutterWidth,
+                    textAlign: 'right',
+                    color: 'var(--c-dim)',
+                    paddingRight: '12px',
+                    paddingLeft: '10px',
+                    userSelect: 'none',
+                    flexShrink: 0,
+                    opacity: 0.6,
+                  }}
+                >
+                  {i + 1}
+                </span>
+                <code
+                  style={{
+                    color: 'var(--c-text)',
+                    whiteSpace: 'pre',
+                    paddingRight: '10px',
+                  }}
+                >
+                  {line || '\n'}
+                </code>
+              </div>
+            ))}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/nodes/GroupNode.tsx

@@ -0,0 +1,39 @@
+import type { CanvasNodeState } from '../types';
+import { nodes } from '../state/canvas-store';
+
+interface GroupNodeProps {
+  node: CanvasNodeState;
+}
+
+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>
+  );
+}

package/src/client/nodes/ImageNode.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { CanvasNodeState } from '../types';
+import { getImageNodeWarnings } from './image-warnings';
+
+/**
+ * Image node renderer.
+ * Supports: file paths (served via /api/canvas/image/:nodeId), data URIs, and URLs.
+ * Features: fit-to-container, zoom in/out within node, pan when zoomed.
+ */
+export function ImageNode({
+  node,
+  expanded = false,
+}: { node: CanvasNodeState; expanded?: boolean }) {
+  const src = (node.data.src as string) || '';
+  const alt = (node.data.alt as string) || (node.data.title as string) || 'Image';
+  const caption = (node.data.caption as string) || '';
+  const warnings = getImageNodeWarnings(node);
+
+  // Determine the image source URL
+  const imageSrc = src.startsWith('data:') || src.startsWith('http://') || src.startsWith('https://')
+    ? src
+    : `/api/canvas/image/${node.id}`;
+
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [naturalSize, setNaturalSize] = useState({ w: 0, h: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const lastPos = useRef({ x: 0, y: 0 });
+
+  const handleLoad = useCallback((e: Event) => {
+    const img = e.target as HTMLImageElement;
+    setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+    setLoaded(true);
+    setError(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setError(true);
+    setLoaded(false);
+  }, []);
+
+  useEffect(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [src]);
+
+  const handleWheel = useCallback((e: WheelEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const delta = e.deltaY > 0 ? 0.9 : 1.1;
+    setZoom((z) => Math.max(0.25, Math.min(10, z * delta)));
+  }, []);
+
+  const handlePointerDown = useCallback((e: PointerEvent) => {
+    if (zoom <= 1) return;
+    e.stopPropagation();
+    dragging.current = true;
+    lastPos.current = { x: e.clientX, y: e.clientY };
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  }, [zoom]);
+
+  const handlePointerMove = useCallback((e: PointerEvent) => {
+    if (!dragging.current) return;
+    const dx = e.clientX - lastPos.current.x;
+    const dy = e.clientY - lastPos.current.y;
+    lastPos.current = { x: e.clientX, y: e.clientY };
+    setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+  }, []);
+
+  const handlePointerUp = useCallback(() => {
+    dragging.current = false;
+  }, []);
+
+  const resetView = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  if (!src) {
+    return (
+      <div class="image-node-empty">
+        <div class="image-node-empty-icon">🖼</div>
+        <div class="image-node-empty-text">No image source</div>
+      </div>
+    );
+  }
+
+  const sizeLabel = naturalSize.w > 0 ? `${naturalSize.w}×${naturalSize.h}` : '';
+  const zoomPct = Math.round(zoom * 100);
+
+  return (
+    <div
+      class={`image-node ${expanded ? 'image-node-expanded' : ''}`}
+      ref={containerRef}
+    >
+      {warnings.length > 0 && (
+        <div class="image-node-warning-stack">
+          {warnings.map((warning) => (
+            <div class="image-node-warning" key={`${warning.title}-${warning.detail}`}>
+              <span class="image-node-warning-title">{warning.title}</span>
+              <span class="image-node-warning-detail">{warning.detail}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div
+        class="image-node-viewport"
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        style={{ cursor: zoom > 1 ? 'grab' : 'default' }}
+      >
+        {!loaded && !error && (
+          <div class="image-node-loading">Loading…</div>
+        )}
+        {error && (
+          <div class="image-node-error">
+            <div class="image-node-error-icon">⚠</div>
+            <div>Failed to load image</div>
+            <div class="image-node-error-path">{src}</div>
+          </div>
+        )}
+        <img
+          src={imageSrc}
+          alt={alt}
+          onLoad={handleLoad}
+          onError={handleError}
+          draggable={false}
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            opacity: loaded ? 1 : 0,
+            display: error ? 'none' : 'block',
+          }}
+        />
+      </div>
+      {(caption || sizeLabel || zoom !== 1) && (
+        <div class="image-node-footer">
+          {caption && <span class="image-node-caption">{caption}</span>}
+          <span class="image-node-meta">
+            {sizeLabel && <span>{sizeLabel}</span>}
+            {zoom !== 1 && (
+              <button
+                type="button"
+                class="image-node-zoom-reset"
+                onClick={resetView}
+                title="Reset zoom"
+              >
+                {zoomPct}% ↺
+              </button>
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/nodes/InlineFormatBar.tsx

@@ -0,0 +1,169 @@
+import type { RefObject } from 'preact';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { promptAndInsertLink, wrapSelectionInCode } from './inline-editor-commands';
+
+const GAP = 8;
+
+type ExecCommand =
+  | 'bold'
+  | 'italic'
+  | 'strikeThrough'
+  | 'formatBlock'
+  | 'insertUnorderedList'
+  | 'insertOrderedList';
+
+type BlockTag = 'H1' | 'H2' | 'H3' | 'P' | 'BLOCKQUOTE';
+
+type Action =
+  | { kind: 'exec'; command: Exclude<ExecCommand, 'formatBlock'>; icon: string; title: string; dividerBefore?: boolean }
+  | { kind: 'block'; tag: BlockTag; icon: string; title: string; dividerBefore?: boolean }
+  | { kind: 'code'; icon: string; title: string; dividerBefore?: boolean }
+  | { 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: 'strikeThrough', icon: 'S', title: 'Strikethrough' },
+  { kind: 'code', icon: '{ }', title: 'Inline code', dividerBefore: true },
+  { kind: 'block', tag: 'H1', icon: 'H1', title: 'Heading 1', dividerBefore: true },
+  { kind: 'block', tag: 'H2', icon: 'H2', title: 'Heading 2' },
+  { kind: 'block', tag: 'H3', icon: 'H3', title: 'Heading 3' },
+  { kind: 'block', tag: 'P', icon: '¶', title: 'Paragraph' },
+  { 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 },
+];
+
+function runAction(action: Action): void {
+  switch (action.kind) {
+    case 'exec':
+      document.execCommand(action.command);
+      return;
+    case 'block':
+      document.execCommand('formatBlock', false, action.tag);
+      return;
+    case 'code':
+      wrapSelectionInCode();
+      return;
+    case 'link':
+      promptAndInsertLink();
+      return;
+  }
+}
+
+/** Floating selection toolbar for a contentEditable host. Mounts once; while
+ *  visible, positions itself above the current selection's viewport rect. */
+export function InlineFormatBar({
+  hostRef,
+  onChange,
+}: {
+  hostRef: RefObject<HTMLElement>;
+  onChange: () => void;
+}) {
+  const [visible, setVisible] = useState(false);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+  const [barWidth, setBarWidth] = useState(0);
+  const barRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number | null>(null);
+
+  const recompute = useCallback(() => {
+    const host = hostRef.current;
+    if (!host) {
+      setVisible(false);
+      return;
+    }
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
+      setVisible(false);
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    if (!host.contains(range.commonAncestorContainer)) {
+      setVisible(false);
+      return;
+    }
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      setVisible(false);
+      return;
+    }
+    // Use measured width if we have it; fall back to a conservative estimate
+    // on the very first show before layout completes.
+    const width = barWidth || 420;
+    const left = Math.max(
+      GAP,
+      Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - GAP),
+    );
+    const top = Math.max(GAP, rect.top - GAP - 36);
+    setPos({ top, left });
+    setVisible(true);
+  }, [hostRef, barWidth]);
+
+  // Coalesce selection/scroll/resize into at most one recompute per frame.
+  const schedule = useCallback(() => {
+    if (rafRef.current !== null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      recompute();
+    });
+  }, [recompute]);
+
+  useEffect(() => {
+    document.addEventListener('selectionchange', schedule);
+    window.addEventListener('scroll', schedule, true);
+    window.addEventListener('resize', schedule);
+    return () => {
+      document.removeEventListener('selectionchange', schedule);
+      window.removeEventListener('scroll', schedule, true);
+      window.removeEventListener('resize', schedule);
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [schedule]);
+
+  // Measure the bar once visible so subsequent shows use the real width.
+  useLayoutEffect(() => {
+    if (!visible) return;
+    const el = barRef.current;
+    if (!el) return;
+    const measured = el.getBoundingClientRect().width;
+    if (measured && Math.abs(measured - barWidth) > 1) setBarWidth(measured);
+  }, [visible, barWidth]);
+
+  const handleClick = useCallback(
+    (action: Action) => {
+      runAction(action);
+      onChange();
+      recompute();
+    },
+    [onChange, recompute],
+  );
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={barRef}
+      class="md-inline-format-bar"
+      style={{ top: `${pos.top}px`, left: `${pos.left}px` }}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      {ACTIONS.flatMap((a, i) => {
+        const btn = (
+          <button
+            key={`btn-${i}`}
+            type="button"
+            class="md-inline-format-btn"
+            title={a.title}
+            onClick={() => handleClick(a)}
+          >
+            {a.icon}
+          </button>
+        );
+        return a.dividerBefore
+          ? [<span key={`div-${i}`} class="md-inline-format-divider" />, btn]
+          : [btn];
+      })}
+    </div>
+  );
+}