pmx-canvas 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Spatial canvas workbench for coding agents — infinite 2D canvas with agent-native CLI, MCP integration, nodes, edges, file watching, and snapshots",
   "type": "module",
   "main": "./src/server/index.ts",

package/src/cli/agent.ts

@@ -241,6 +241,14 @@ function optionalPositiveFiniteFlagWithAliases(
   return undefined;
 }
 
+function optionalBooleanFlag(flags: Record<string, string | true>, name: string, hint: string): boolean | undefined {
+  const val = flags[name];
+  if (val === undefined) return undefined;
+  if (val === true || val === 'true') return true;
+  if (val === 'false') return false;
+  die(`Invalid value for --${name}: ${String(val)}`, hint);
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object' && !Array.isArray(value);
 }
@@ -1216,6 +1224,7 @@ cmd('node update', 'Update a node by ID', [
   'pmx-canvas node update <node-id> --width 840 --height 620',
   'pmx-canvas node update <node-id> --spec-file ./dashboard.json',
   'pmx-canvas node update <graph-id> --data-file ./metrics.json --chart-height 420',
+  'pmx-canvas node update <node-id> --pinned true',
   'pmx-canvas node update <node-id> --lock-arrange',
 ], async (args) => {
   const { positional, flags } = parseFlags(args);
@@ -1234,6 +1243,17 @@ cmd('node update', 'Update a node by ID', [
   const y = optionalFiniteFlag(flags, 'y', 'Use a finite number, e.g. --y 300');
   const width = optionalPositiveFiniteFlag(flags, 'width', 'Use a positive number, e.g. --width 840');
   const height = optionalPositiveFiniteFlag(flags, 'height', 'Use a positive number, e.g. --height 620');
+  const nodeHeight = optionalPositiveFiniteFlagWithAliases(
+    flags,
+    'Use a positive number, e.g. --node-height 620',
+    'node-height',
+    'nodeHeight',
+  );
+  if (height !== undefined && nodeHeight !== undefined) {
+    die('Use either --height/--node-height, not both.');
+  }
+  const frameHeight = height ?? nodeHeight;
+  const pinned = optionalBooleanFlag(flags, 'pinned', 'Use --pinned true or --pinned false');
   if (flags['lock-arrange'] && flags['unlock-arrange']) {
     die('Use either --lock-arrange or --unlock-arrange, not both.');
   }
@@ -1243,7 +1263,7 @@ cmd('node update', 'Update a node by ID', [
       ? false
       : undefined;
 
-  if (x !== undefined || y !== undefined || width !== undefined || height !== undefined || arrangeLocked !== undefined) {
+  if (x !== undefined || y !== undefined || width !== undefined || frameHeight !== undefined || arrangeLocked !== undefined) {
     const existing = await api('GET', `/api/canvas/node/${encodeURIComponent(id)}`) as {
       position: { x: number; y: number };
       size: { width: number; height: number };
@@ -1257,10 +1277,10 @@ cmd('node update', 'Update a node by ID', [
       };
     }
 
-    if (width !== undefined || height !== undefined) {
+    if (width !== undefined || frameHeight !== undefined) {
       body.size = {
         width: width ?? existing.size.width,
-        height: height ?? existing.size.height,
+        height: frameHeight ?? existing.size.height,
       };
     }
 
@@ -1269,10 +1289,12 @@ cmd('node update', 'Update a node by ID', [
     }
   }
 
+  if (pinned !== undefined) body.pinned = pinned;
+
   if (Object.keys(body).length === 0) {
     die(
       'No updates specified',
-      'Use --title, --content, --x, --y, --width, --height, --lock-arrange, --unlock-arrange, or --stdin',
+      'Use --title, --content, --x, --y, --width, --height, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
     );
   }
 

package/src/cli/index.ts

@@ -30,7 +30,7 @@ if (args.includes('--version') || args.includes('-v')) {
 // If first arg is a known subcommand (not a --flag), route to the agent CLI.
 const AGENT_COMMANDS = new Set([
   'node', 'edge', 'search', 'layout', 'status', 'arrange', 'focus',
-  'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
+  'fit', 'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
   'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'external-app', 'graph', 'batch', 'validate', 'serve',
 ]);
 

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

@@ -1,14 +1,14 @@
 import type { CanvasNodeState } from '../types';
 
-export const AUTO_FIT_MAX_HEIGHT = 600;
 export const AUTO_FIT_TITLEBAR_HEIGHT = 37;
+export const AUTO_FIT_MAX_HEIGHT = 600;
 
 function isExtAppNode(node: CanvasNodeState): boolean {
   return node.type === 'mcp-app' && node.data.mode === 'ext-app';
 }
 
 function hasExplicitStructuredFrame(node: CanvasNodeState): boolean {
-  return (node.type === 'graph' || node.type === 'json-render') && node.size.height > AUTO_FIT_MAX_HEIGHT;
+  return node.type === 'graph' || node.type === 'json-render';
 }
 
 export function shouldAutoFitNode(node: CanvasNodeState): boolean {

package/src/json-render/catalog.ts

@@ -7,13 +7,22 @@
  */
 
 import { defineCatalog } from '@json-render/core';
+import { z } from 'zod';
 import { schema } from './schema.js';
 import { shadcnComponentDefinitions } from '@json-render/shadcn/catalog';
 import { chartComponentDefinitions } from './charts/definitions';
 import { extraChartComponentDefinitions } from './charts/extra-definitions';
 
+const badgeDefinition = shadcnComponentDefinitions.Badge;
+
 export const allComponentDefinitions = {
   ...shadcnComponentDefinitions,
+  Badge: {
+    ...badgeDefinition,
+    props: badgeDefinition.props.extend({
+      variant: z.enum(['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning', 'error', 'danger']).nullable(),
+    }),
+  },
   ...chartComponentDefinitions,
   ...extraChartComponentDefinitions,
 };

package/src/json-render/renderer/index.css

@@ -143,6 +143,67 @@ button {
   cursor: pointer;
 }
 
+.pmx-badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.pmx-badge--default {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.pmx-badge--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.pmx-badge--destructive {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+.pmx-badge--outline {
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.pmx-badge--success {
+  border-color: color-mix(in oklch, var(--chart-2) 45%, transparent);
+  background: color-mix(in oklch, var(--chart-2) 16%, transparent);
+  color: var(--chart-2);
+}
+
+.pmx-badge--info {
+  border-color: color-mix(in oklch, var(--chart-1) 45%, transparent);
+  background: color-mix(in oklch, var(--chart-1) 14%, transparent);
+  color: var(--chart-1);
+}
+
+.pmx-badge--warning {
+  border-color: color-mix(in oklch, var(--chart-3) 50%, transparent);
+  background: color-mix(in oklch, var(--chart-3) 18%, transparent);
+  color: var(--chart-3);
+}
+
+.pmx-badge--error,
+.pmx-badge--danger {
+  border-color: color-mix(in oklch, var(--destructive) 55%, transparent);
+  background: color-mix(in oklch, var(--destructive) 18%, transparent);
+  color: var(--destructive);
+}
+
 /* -- Chart components -- */
 
 .pmx-chart {

package/src/json-render/renderer/index.tsx

@@ -15,9 +15,31 @@ import { catalog } from '../catalog';
 import { chartComponents } from '../charts/components';
 import { extraChartComponents } from '../charts/extra-components';
 
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'info' | 'warning' | 'error' | 'danger';
+type BadgeProps = {
+  text: string;
+  variant?: BadgeVariant | null;
+  className?: string | null;
+};
+
+function Badge({ props }: { props: BadgeProps }) {
+  const variant = props.variant;
+  const resolvedVariant = variant ?? 'default';
+  return (
+    <span
+      data-slot="badge"
+      data-variant={resolvedVariant}
+      className={`pmx-badge pmx-badge--${resolvedVariant}`}
+    >
+      {props.text}
+    </span>
+  );
+}
+
 const { registry } = defineRegistry(catalog as never, {
   components: {
     ...shadcnComponents,
+    Badge,
     ...chartComponents,
     ...extraChartComponents,
   } as never,

package/src/json-render/server.ts

@@ -262,14 +262,6 @@ function normalizeButtonVariant(value: unknown): unknown {
   return value;
 }
 
-function normalizeBadgeVariant(value: unknown): unknown {
-  if (value === 'success') return 'default';
-  if (value === 'info') return 'secondary';
-  if (value === 'warning') return 'outline';
-  if (value === 'error' || value === 'danger') return 'destructive';
-  return value;
-}
-
 function deriveElementName(elementKey: string): string {
   const normalized = elementKey.replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '');
   return normalized || 'field';
@@ -344,9 +336,6 @@ function normalizeElementProps(
     if ('label' in props) {
       delete props.label;
     }
-    if ('variant' in props) {
-      props.variant = normalizeBadgeVariant(props.variant);
-    }
   }
 
   if (type === 'Select' || type === 'Radio') {

package/src/server/canvas-validation.ts

@@ -49,6 +49,13 @@ function fullyContains(group: CanvasNodeState, child: CanvasNodeState): boolean
   );
 }
 
+function isGroupChildPair(group: CanvasNodeState, child: CanvasNodeState): boolean {
+  if (group.type !== 'group') return false;
+  if (child.data.parentGroup === group.id) return true;
+  const children = group.data.children;
+  return Array.isArray(children) && children.includes(child.id);
+}
+
 function pair(a: CanvasNodeState, b: CanvasNodeState): CanvasValidationPair {
   return {
     aId: a.id,
@@ -78,11 +85,11 @@ export function validateCanvasLayout(layout: CanvasLayout): CanvasValidationResu
       const b = layout.nodes[j]!;
       if (!overlaps(a, b)) continue;
 
-      if (a.type === 'group' && b.data.parentGroup === a.id) {
+      if (isGroupChildPair(a, b)) {
         (fullyContains(a, b) ? containments : containmentViolations).push(containment(a, b));
         continue;
       }
-      if (b.type === 'group' && a.data.parentGroup === b.id) {
+      if (isGroupChildPair(b, a)) {
         (fullyContains(b, a) ? containments : containmentViolations).push(containment(b, a));
         continue;
       }

package/src/server/diagram-presets.ts

@@ -115,6 +115,52 @@ function elementHasCameraUpdate(elements: Array<Record<string, unknown>>): boole
   return elements.some((element) => element.type === 'cameraUpdate');
 }
 
+function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>): Array<Record<string, unknown>> {
+  const elementsById = new Map<string, Record<string, unknown>>();
+  for (const element of elements) {
+    if (typeof element.id === 'string') elementsById.set(element.id, element);
+  }
+
+  let changed = false;
+  const boundElementIdsByContainer = new Map<string, Set<string>>();
+
+  for (const element of elements) {
+    if (element.type !== 'text' || typeof element.id !== 'string' || typeof element.containerId !== 'string') continue;
+    if (!elementsById.has(element.containerId)) continue;
+    const ids = boundElementIdsByContainer.get(element.containerId) ?? new Set<string>();
+    ids.add(element.id);
+    boundElementIdsByContainer.set(element.containerId, ids);
+  }
+
+  const normalized = elements.map((element) => {
+    if (typeof element.id !== 'string') return element;
+    const boundTextIds = boundElementIdsByContainer.get(element.id);
+    if (!boundTextIds || boundTextIds.size === 0) return element;
+
+    const existing = Array.isArray(element.boundElements)
+      ? element.boundElements.filter(isRecord)
+      : [];
+    const existingTextIds = new Set(
+      existing
+        .filter((boundElement) => boundElement.type === 'text' && typeof boundElement.id === 'string')
+        .map((boundElement) => boundElement.id as string),
+    );
+    const missing = [...boundTextIds].filter((id) => !existingTextIds.has(id));
+    if (missing.length === 0) return element;
+
+    changed = true;
+    return {
+      ...element,
+      boundElements: [
+        ...existing,
+        ...missing.map((id) => ({ type: 'text', id })),
+      ],
+    };
+  });
+
+  return changed ? normalized : elements;
+}
+
 function resolveExcalidrawCameraSize(width: number, height: number): { width: number; height: number } {
   const requiredWidth = Math.max(EXCALIDRAW_MIN_CAMERA_WIDTH, width);
   const requiredHeight = Math.max(EXCALIDRAW_MIN_CAMERA_HEIGHT, height);
@@ -211,13 +257,13 @@ export function normalizeExcalidrawElements(elements: unknown): string {
 export function normalizeExcalidrawElementsForToolInput(elements: unknown): string {
   const parsed = parseExcalidrawElements(elements);
   const seeded = parsed.length > 0 ? parsed : [...DEFAULT_EXCALIDRAW_ELEMENTS];
-  return JSON.stringify(withInferredCameraUpdate(seeded));
+  return JSON.stringify(withInferredCameraUpdate(normalizeExcalidrawBoundText(seeded)));
 }
 
 export function normalizeExcalidrawCheckpointDataForToolInput(data: unknown): string | null {
   const elements = parseExcalidrawCheckpointElements(data);
 
-  return elements ? JSON.stringify(withInferredCameraUpdate(elements)) : null;
+  return elements ? JSON.stringify(withInferredCameraUpdate(normalizeExcalidrawBoundText(elements))) : null;
 }
 
 export function buildExcalidrawRestoreCheckpointToolInput(checkpointId: string, data?: unknown): string {