pmx-canvas 0.1.10 → 0.1.12

package/dist/types/json-render/catalog.d.ts

@@ -84,6 +84,7 @@ export declare const allComponentDefinitions: {
             axisKey: z.ZodString;
             metrics: z.ZodArray<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.";
         readonly example: {
@@ -104,6 +105,7 @@ export declare const allComponentDefinitions: {
             readonly axisKey: "skill";
             readonly metrics: readonly ["alice", "bob"];
             readonly height: null;
+            readonly showLegend: true;
         };
     };
     StackedBarChart: {
@@ -118,6 +120,7 @@ export declare const allComponentDefinitions: {
                 avg: "avg";
             }>>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.";
         readonly example: {
@@ -142,6 +145,7 @@ export declare const allComponentDefinitions: {
             readonly series: readonly ["north", "south", "east"];
             readonly aggregate: null;
             readonly height: null;
+            readonly showLegend: true;
         };
     };
     ComposedChart: {
@@ -154,6 +158,7 @@ export declare const allComponentDefinitions: {
             barColor: z.ZodNullable<z.ZodString>;
             lineColor: z.ZodNullable<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.";
         readonly example: {
@@ -177,6 +182,7 @@ export declare const allComponentDefinitions: {
             readonly barColor: null;
             readonly lineColor: null;
             readonly height: null;
+            readonly showLegend: true;
         };
     };
     LineChart: {
@@ -254,6 +260,8 @@ export declare const allComponentDefinitions: {
             nameKey: z.ZodString;
             valueKey: z.ZodString;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
+            showLabels: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.";
         readonly example: {
@@ -271,6 +279,8 @@ export declare const allComponentDefinitions: {
             readonly nameKey: "name";
             readonly valueKey: "share";
             readonly height: null;
+            readonly showLegend: true;
+            readonly showLabels: true;
         };
     };
     Badge: {

package/dist/types/json-render/charts/components.d.ts

@@ -26,6 +26,8 @@ interface PieChartProps {
     nameKey: string;
     valueKey: string;
     height?: number | null;
+    showLegend?: boolean | null;
+    showLabels?: boolean | null;
 }
 export declare const axisStyle: {
     fontSize: number;
@@ -38,6 +40,22 @@ export declare const tooltipStyle: {
     color: string;
     fontSize: number;
 };
+export declare const chartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const polarChartMargin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const axisTickMargin = 8;
+export declare const legendMargin: {
+    top: number;
+};
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export declare function CartesianChart({ props, children, className, }: {
     props: CartesianChartProps;

package/dist/types/json-render/charts/definitions.d.ts

@@ -81,6 +81,8 @@ export declare const chartComponentDefinitions: {
             nameKey: z.ZodString;
             valueKey: z.ZodString;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
+            showLabels: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.";
         readonly example: {
@@ -98,6 +100,8 @@ export declare const chartComponentDefinitions: {
             readonly nameKey: "name";
             readonly valueKey: "share";
             readonly height: null;
+            readonly showLegend: true;
+            readonly showLabels: true;
         };
     };
 };

package/dist/types/json-render/charts/extra-components.d.ts

@@ -26,6 +26,7 @@ interface RadarChartProps {
     axisKey: string;
     metrics: string[];
     height?: number | null;
+    showLegend?: boolean | null;
 }
 declare function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>): import("react/jsx-runtime").JSX.Element;
 interface StackedBarChartProps {
@@ -35,6 +36,7 @@ interface StackedBarChartProps {
     series: string[];
     aggregate?: 'sum' | 'count' | 'avg' | null;
     height?: number | null;
+    showLegend?: boolean | null;
 }
 declare function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps>): import("react/jsx-runtime").JSX.Element;
 interface ComposedChartProps {
@@ -46,6 +48,7 @@ interface ComposedChartProps {
     barColor?: string | null;
     lineColor?: string | null;
     height?: number | null;
+    showLegend?: boolean | null;
 }
 declare function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>): import("react/jsx-runtime").JSX.Element;
 export declare const extraChartComponents: {

package/dist/types/json-render/charts/extra-definitions.d.ts

@@ -83,6 +83,7 @@ export declare const extraChartComponentDefinitions: {
             axisKey: z.ZodString;
             metrics: z.ZodArray<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.";
         readonly example: {
@@ -103,6 +104,7 @@ export declare const extraChartComponentDefinitions: {
             readonly axisKey: "skill";
             readonly metrics: readonly ["alice", "bob"];
             readonly height: null;
+            readonly showLegend: true;
         };
     };
     readonly StackedBarChart: {
@@ -117,6 +119,7 @@ export declare const extraChartComponentDefinitions: {
                 avg: "avg";
             }>>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.";
         readonly example: {
@@ -141,6 +144,7 @@ export declare const extraChartComponentDefinitions: {
             readonly series: readonly ["north", "south", "east"];
             readonly aggregate: null;
             readonly height: null;
+            readonly showLegend: true;
         };
     };
     readonly ComposedChart: {
@@ -153,6 +157,7 @@ export declare const extraChartComponentDefinitions: {
             barColor: z.ZodNullable<z.ZodString>;
             lineColor: z.ZodNullable<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            showLegend: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
         readonly description: "Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.";
         readonly example: {
@@ -176,6 +181,7 @@ export declare const extraChartComponentDefinitions: {
             readonly barColor: null;
             readonly lineColor: null;
             readonly height: null;
+            readonly showLegend: true;
         };
     };
 };

package/dist/types/json-render/server.d.ts

@@ -10,6 +10,7 @@ export interface JsonRenderNodeInput {
     y?: number;
     width?: number;
     height?: number;
+    strictSize?: boolean;
 }
 export interface GraphNodeInput {
     title?: string;
@@ -30,10 +31,13 @@ export interface GraphNodeInput {
     barColor?: string;
     lineColor?: string;
     height?: number;
+    showLegend?: boolean;
+    showLabels?: boolean;
     x?: number;
     y?: number;
     width?: number;
     heightPx?: number;
+    strictSize?: boolean;
 }
 export declare const JSON_RENDER_NODE_SIZE: {
     width: number;

package/dist/types/mcp/canvas-access.d.ts

@@ -0,0 +1,87 @@
+import { type CanvasLayout, type CanvasNodeState, type CanvasSnapshot, type PmxCanvas } from '../server/index.js';
+type AddNodeInput = Parameters<PmxCanvas['addNode']>[0];
+type AddWebpageNodeInput = Parameters<PmxCanvas['addWebpageNode']>[0];
+type RefreshWebpageNodeResult = Awaited<ReturnType<PmxCanvas['refreshWebpageNode']>>;
+type OpenMcpAppInput = Parameters<PmxCanvas['openMcpApp']>[0];
+type OpenMcpAppResult = Awaited<ReturnType<PmxCanvas['openMcpApp']>>;
+type AddDiagramInput = Parameters<PmxCanvas['addDiagram']>[0];
+type AddJsonRenderNodeInput = Parameters<PmxCanvas['addJsonRenderNode']>[0];
+type AddJsonRenderNodeResult = ReturnType<PmxCanvas['addJsonRenderNode']>;
+type AddGraphNodeInput = Parameters<PmxCanvas['addGraphNode']>[0];
+type AddGraphNodeResult = ReturnType<PmxCanvas['addGraphNode']>;
+type UpdateNodePatch = Parameters<PmxCanvas['updateNode']>[1];
+type AddEdgeInput = Parameters<PmxCanvas['addEdge']>[0];
+type CreateGroupInput = Parameters<PmxCanvas['createGroup']>[0];
+type GroupNodesOptions = Parameters<PmxCanvas['groupNodes']>[2];
+type ArrangeLayout = Parameters<PmxCanvas['arrange']>[0];
+type FocusNodeResult = ReturnType<PmxCanvas['focusNode']>;
+type FitViewOptions = Parameters<PmxCanvas['fitView']>[0];
+type FitViewResult = ReturnType<PmxCanvas['fitView']>;
+type SearchResult = ReturnType<PmxCanvas['search']>;
+type UndoRedoResult = Awaited<ReturnType<PmxCanvas['undo']>>;
+type HistoryResult = ReturnType<PmxCanvas['getHistory']>;
+type SetContextPinsResult = ReturnType<PmxCanvas['setContextPins']>;
+type RunBatchInput = Parameters<PmxCanvas['runBatch']>[0];
+type RunBatchResult = Awaited<ReturnType<PmxCanvas['runBatch']>>;
+type SnapshotList = ReturnType<PmxCanvas['listSnapshots']>;
+type DeleteSnapshotResult = ReturnType<PmxCanvas['deleteSnapshot']>;
+type DiffSnapshotResult = ReturnType<PmxCanvas['diffSnapshot']>;
+type CodeGraphResult = ReturnType<PmxCanvas['getCodeGraph']>;
+type ValidationResult = ReturnType<PmxCanvas['validate']>;
+type WebArtifactInput = Parameters<PmxCanvas['buildWebArtifact']>[0];
+type WebArtifactResult = Awaited<ReturnType<PmxCanvas['buildWebArtifact']>>;
+type AutomationWebViewOptions = Parameters<PmxCanvas['startAutomationWebView']>[0];
+type AutomationWebViewStatus = Awaited<ReturnType<PmxCanvas['startAutomationWebView']>>;
+type AutomationEvaluateResult = Awaited<ReturnType<PmxCanvas['evaluateAutomationWebView']>>;
+type AutomationScreenshotOptions = Parameters<PmxCanvas['screenshotAutomationWebView']>[0];
+export interface CanvasAccess {
+    readonly port: number;
+    readonly remoteBaseUrl: string | null;
+    getLayout(): Promise<CanvasLayout>;
+    getNode(id: string): Promise<CanvasNodeState | undefined>;
+    addNode(input: AddNodeInput): Promise<string>;
+    addWebpageNode(input: AddWebpageNodeInput): Promise<Awaited<ReturnType<PmxCanvas['addWebpageNode']>>>;
+    refreshWebpageNode(id: string, url?: string): Promise<RefreshWebpageNodeResult>;
+    openMcpApp(input: OpenMcpAppInput): Promise<OpenMcpAppResult>;
+    addDiagram(input: AddDiagramInput): Promise<OpenMcpAppResult>;
+    addJsonRenderNode(input: AddJsonRenderNodeInput): Promise<AddJsonRenderNodeResult>;
+    addGraphNode(input: AddGraphNodeInput): Promise<AddGraphNodeResult>;
+    buildWebArtifact(input: WebArtifactInput): Promise<WebArtifactResult>;
+    updateNode(id: string, patch: UpdateNodePatch): Promise<void>;
+    removeNode(id: string): Promise<void>;
+    addEdge(input: AddEdgeInput): Promise<string>;
+    removeEdge(id: string): Promise<void>;
+    createGroup(input: CreateGroupInput): Promise<string>;
+    groupNodes(groupId: string, childIds: string[], options?: GroupNodesOptions): Promise<boolean>;
+    ungroupNodes(groupId: string): Promise<boolean>;
+    arrange(layout?: ArrangeLayout): Promise<void>;
+    focusNode(id: string, options?: {
+        noPan?: boolean;
+    }): Promise<FocusNodeResult>;
+    fitView(options?: FitViewOptions): Promise<FitViewResult>;
+    clear(): Promise<void>;
+    search(query: string): Promise<SearchResult>;
+    undo(): Promise<UndoRedoResult>;
+    redo(): Promise<UndoRedoResult>;
+    getHistory(): Promise<HistoryResult>;
+    setContextPins(nodeIds: string[], mode?: 'set' | 'add' | 'remove'): Promise<SetContextPinsResult>;
+    getPinnedNodeIds(): Promise<string[]>;
+    runBatch(operations: RunBatchInput): Promise<RunBatchResult>;
+    listSnapshots(): Promise<SnapshotList>;
+    saveSnapshot(name: string): Promise<CanvasSnapshot | null>;
+    restoreSnapshot(id: string): Promise<{
+        ok: boolean;
+    }>;
+    deleteSnapshot(id: string): Promise<DeleteSnapshotResult>;
+    diffSnapshot(idOrName: string): Promise<DiffSnapshotResult>;
+    getCodeGraph(): Promise<CodeGraphResult>;
+    validate(): Promise<ValidationResult>;
+    getAutomationWebViewStatus(): Promise<AutomationWebViewStatus>;
+    startAutomationWebView(options?: AutomationWebViewOptions): Promise<AutomationWebViewStatus>;
+    stopAutomationWebView(): Promise<boolean>;
+    evaluateAutomationWebView(expression: string): Promise<AutomationEvaluateResult>;
+    resizeAutomationWebView(width: number, height: number): Promise<AutomationWebViewStatus>;
+    screenshotAutomationWebView(options?: AutomationScreenshotOptions): Promise<Uint8Array>;
+}
+export declare function createCanvasAccess(): Promise<CanvasAccess>;
+export {};

package/dist/types/server/canvas-operations.d.ts

@@ -32,6 +32,7 @@ export interface CanvasStructuredNodeUpdateInput extends Omit<CanvasGraphNodeUpd
     content?: unknown;
     data?: unknown;
     arrangeLocked?: unknown;
+    strictSize?: boolean;
     chartHeight?: unknown;
 }
 interface CanvasAddNodeInput {
@@ -46,6 +47,7 @@ interface CanvasAddNodeInput {
     defaultWidth?: number;
     defaultHeight?: number;
     fileMode?: 'path' | 'inline' | 'auto';
+    strictSize?: boolean;
 }
 interface CanvasCreateGroupInput {
     title?: string;

package/dist/types/server/index.d.ts

@@ -27,6 +27,7 @@ export declare class PmxCanvas extends EventEmitter {
         y?: number;
         width?: number;
         height?: number;
+        strictSize?: boolean;
     }): string;
     addWebpageNode(input: {
         title?: string;
@@ -35,6 +36,7 @@ export declare class PmxCanvas extends EventEmitter {
         y?: number;
         width?: number;
         height?: number;
+        strictSize?: boolean;
     }): Promise<{
         ok: boolean;
         id: string;

package/dist/types/server/server.d.ts

@@ -96,6 +96,7 @@ export interface CanvasServerOptions {
     port?: number;
     workspaceRoot?: string;
     autoOpenBrowser?: boolean;
+    allowPortFallback?: boolean;
 }
 export declare function startCanvasServer(options?: CanvasServerOptions): string | null;
 export declare function stopCanvasServer(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "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/skills/pmx-canvas/SKILL.md

@@ -144,6 +144,11 @@ pmx-canvas open
 pmx-canvas arrange --layout flow
 pmx-canvas focus <node-id> --no-pan             # Select/raise without moving the user's viewport
 pmx-canvas fit --width 1440 --height 900        # Fit the whole board for screenshots/review
+pmx-canvas screenshot --output ./canvas.png     # Shorthand for `webview screenshot`
+pmx-canvas json-render --schema --summary       # Inspect json-render component catalog
+pmx-canvas json-render --example --component Table
+pmx-canvas node add --type markdown --title "Long doc" --strict-size  # Scroll instead of auto-fit
+pmx-canvas node add --type graph --graphType pie --data-file metrics.json --show-legend false --show-labels false
 pmx-canvas node update <node-id> --spec-file ./dashboard.json
 pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary
 pmx-canvas web-artifact build --title "Dashboard" --app-file ./App.tsx --deps recharts --include-logs
@@ -170,6 +175,10 @@ pmx-canvas spatial
 - `search`, `layout`, `status`, `arrange`, `focus` — inspect and navigate the canvas. Prefer
   `focus --no-pan` when you only need to select/raise a node without hijacking the human's camera.
 - `fit [id ...]` — set the server viewport to fit the whole canvas or selected nodes before screenshots or whole-board review
+- `screenshot --output <path>` — top-level shortcut for `webview screenshot`; supports `--format png|jpeg|webp` and `--quality`
+- `json-render --schema|--examples` — inspect the json-render component catalog with `--component`/`--field` filters; same data as `node schema --type json-render` in a more direct shape
+- `--strict-size` (alias `--scroll-overflow`) on `node add`/`node update` — keep explicit width/height fixed and scroll overflowing content instead of letting the renderer auto-fit. Useful for long markdown, dense webpages, and dashboards that should fit a tile-sized frame.
+- `--show-legend false` / `--show-labels false` on `node add --type graph` and `graph add` — hide chart legends and pie slice labels for compact graph nodes in tile-style boards.
 - `open` — open the current workbench in the browser
 - `pin --list|--clear|<ids...>` — manage context pins
 - `undo`, `redo`, `history` — time travel

package/src/cli/agent.ts

@@ -155,7 +155,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
   const BOOL_FLAGS = new Set([
     'help', 'h', 'ids', 'stdin', 'yes', 'list', 'clear', 'set', 'animated', 'dry-run',
     'no-open-in-canvas', 'lock-arrange', 'unlock-arrange', 'json', 'compact', 'summary',
-    'verbose', 'include-logs', 'no-pan',
+    'verbose', 'include-logs', 'no-pan', 'schema', 'example', 'examples', 'strict-size', 'scroll-overflow',
   ]);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
@@ -249,6 +249,10 @@ function optionalBooleanFlag(flags: Record<string, string | true>, name: string,
   die(`Invalid value for --${name}: ${String(val)}`, hint);
 }
 
+function applyStrictSizeFlags(body: Record<string, unknown>, flags: Record<string, string | true>): void {
+  if (flags['strict-size'] || flags['scroll-overflow']) body.strictSize = true;
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object' && !Array.isArray(value);
 }
@@ -606,6 +610,7 @@ async function buildJsonRenderRequestBody(
     width: 'Use a positive number, e.g. --width 840',
     height: 'Use a positive number, e.g. --height 620',
   });
+  applyStrictSizeFlags(body, flags);
   return body;
 }
 
@@ -665,6 +670,10 @@ async function buildGraphRequestBody(
   if (color) body.color = color;
   if (barColor) body.barColor = barColor;
   if (lineColor) body.lineColor = lineColor;
+  const showLegend = optionalBooleanFlag(flags, 'show-legend', 'Use --show-legend true or --show-legend false');
+  const showLabels = optionalBooleanFlag(flags, 'show-labels', 'Use --show-labels true or --show-labels false');
+  if (showLegend !== undefined) body.showLegend = showLegend;
+  if (showLabels !== undefined) body.showLabels = showLabels;
 
   const chartHeight = optionalPositiveFiniteFlag(flags, 'chart-height', 'Use a positive number, e.g. --chart-height 300');
   const x = optionalFiniteFlag(flags, 'x', 'Use a finite number, e.g. --x 500');
@@ -682,6 +691,7 @@ async function buildGraphRequestBody(
   if (y !== undefined) body.y = y;
   if (width !== undefined) body.width = width;
   if (nodeHeight !== undefined) body.nodeHeight = nodeHeight;
+  applyStrictSizeFlags(body, flags);
   return body;
 }
 
@@ -1067,6 +1077,7 @@ cmd('node add', 'Add a node to the canvas', [
     width: 'Use a positive number, e.g. --width 500',
     height: 'Use a positive number, e.g. --height 280',
   });
+  applyStrictSizeFlags(body, flags);
 
   // Support --stdin for piping content
   if (flags.stdin) {
@@ -1081,6 +1092,37 @@ cmd('node add', 'Add a node to the canvas', [
   output(result);
 });
 
+cmd('json-render', 'Show json-render schema and canonical examples', [
+  'pmx-canvas json-render --schema --summary',
+  'pmx-canvas json-render --examples',
+  'pmx-canvas json-render --example --component Table',
+  'pmx-canvas json-render --schema --component Badge --field variant',
+], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('json-render');
+
+  const schema = await loadCanvasSchema();
+  const componentName = getStringFlag(flags, 'component');
+  const fieldName = getStringFlag(flags, 'field');
+
+  if (flags.example || flags.examples) {
+    if (fieldName) die('--field is only supported with --schema.', 'Use: pmx-canvas json-render --schema --component Table --field rows');
+    if (componentName) {
+      const component = schema.jsonRender.components.find((entry) => entry.type === componentName);
+      if (!component) die(`Unknown json-render component: ${componentName}`, 'Run: pmx-canvas json-render --schema --summary');
+      output({ component: component.type, example: component.example });
+      return;
+    }
+    output({
+      rootShape: schema.jsonRender.rootShape,
+      examples: Object.fromEntries(schema.jsonRender.components.map((entry) => [entry.type, entry.example])),
+    });
+    return;
+  }
+
+  output(filterJsonRenderSchemaView(schema.jsonRender, flags));
+});
+
 cmd('graph add', 'Add a graph node to the canvas', [
   'pmx-canvas graph add --graph-type bar --data-file ./metrics.json --x-key label --y-key value',
   'pmx-canvas graph add --graphType composed --data \'[{"day":"Mon","visits":10,"conversion":0.4}]\' --xKey day --barKey visits --lineKey conversion',
@@ -1097,6 +1139,7 @@ cmd('node schema', 'Describe server-supported node create schemas and canonical
   'pmx-canvas node schema',
   'pmx-canvas node schema --type webpage',
   'pmx-canvas node schema --type json-render',
+  'pmx-canvas json-render --schema --summary',
   'pmx-canvas node schema --type json-render --component Table',
   'pmx-canvas node schema --type webpage --field url',
   'pmx-canvas node schema --summary',
@@ -1263,6 +1306,8 @@ cmd('node update', 'Update a node by ID', [
       ? false
       : undefined;
 
+  applyStrictSizeFlags(body, flags);
+
   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 };
@@ -1294,7 +1339,7 @@ cmd('node update', 'Update a node by ID', [
   if (Object.keys(body).length === 0) {
     die(
       'No updates specified',
-      'Use --title, --content, --x, --y, --width, --height, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
+      'Use --title, --content, --x, --y, --width, --height, --strict-size, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
     );
   }
 
@@ -2057,6 +2102,16 @@ cmd('webview screenshot', 'Capture a screenshot from the active Bun.WebView auto
   });
 });
 
+cmd('screenshot', 'Capture a screenshot from the active Bun.WebView automation session', [
+  'pmx-canvas screenshot --output ./canvas.png',
+  'pmx-canvas screenshot --output ./canvas.webp --format webp --quality 80',
+], async (args) => {
+  if (args.includes('--help') || args.includes('-h')) return showCommandHelp('screenshot');
+  const screenshotCommand = COMMANDS['webview screenshot'];
+  if (!screenshotCommand) die('Internal error: webview screenshot command is unavailable.');
+  await screenshotCommand.run(args);
+});
+
 // ── code-graph ───────────────────────────────────────────────
 cmd('code-graph', 'Show auto-detected file dependency graph', [
   'pmx-canvas code-graph',
@@ -2193,11 +2248,21 @@ function showCommandHelp(name: string): void {
     console.log('  pmx-canvas node add --help --type json-render --component Table');
     console.log('  pmx-canvas node add --help --type graph');
     console.log('  pmx-canvas node add --help --type webpage --json');
+    console.log('  Use --strict-size to keep explicit width/height fixed and scroll overflowing content.');
+  }
+  if (name === 'json-render') {
+    console.log('\nOptions:');
+    console.log('  --schema                  Show json-render catalog schema (default)');
+    console.log('  --summary                 Show compact component summaries');
+    console.log('  --component <name>        Focus on one component');
+    console.log('  --field <name>            Focus on one component prop');
+    console.log('  --example, --examples     Print canonical component examples');
   }
   if (name === 'node add' || name === 'graph add' || name === 'validate spec') {
     console.log('\nGraph flags:');
     console.log('  Graph fields accept kebab-case CLI flags and camelCase schema names, e.g. --graph-type/--graphType and --x-key/--xKey');
     console.log('  Use --node-height/--nodeHeight for canvas frame height; use --chart-height for chart content height. --height is kept as a frame-height alias for compatibility.');
+    console.log('  Pass --show-legend false to hide legends in compact node layouts.');
   }
   if (name === 'node schema') {
     console.log('\nFilters:');
@@ -2227,6 +2292,13 @@ function showCommandHelp(name: string): void {
     console.log('  --padding <px>            World-space padding around fitted nodes (default 60)');
     console.log('  --max-scale <scale>       Maximum zoom scale (default 1)');
   }
+  if (name === 'screenshot' || name === 'webview screenshot') {
+    console.log('\nOptions:');
+    console.log('  --output <path>           Required output image path');
+    console.log('  --format <type>           png, jpeg, or webp');
+    console.log('  --quality <number>        Encoder quality for lossy formats');
+    console.log('  Requires an active automation session: pmx-canvas webview start');
+  }
   if (name === 'external-app add') {
     console.log('\nOptions:');
     console.log('  --kind excalidraw          External app kind to create');
@@ -2258,6 +2330,7 @@ Node commands:
   pmx-canvas node get <id>            Get a node by ID
   pmx-canvas node update <id> [opts]  Update a node
   pmx-canvas node remove <id>         Remove a node
+  pmx-canvas json-render              Show json-render schema/examples
   pmx-canvas graph add [options]      Add a graph node
 
 Edge commands:
@@ -2277,6 +2350,7 @@ Canvas commands:
   pmx-canvas watch [options]          Watch semantic canvas changes over SSE
   pmx-canvas focus <id>               Pan viewport to node
   pmx-canvas fit [id ...]             Fit viewport to canvas or selected nodes
+  pmx-canvas screenshot               Save automation screenshot to disk
   pmx-canvas external-app add          Add hosted external apps like Excalidraw
   pmx-canvas webview status           Show WebView automation status
   pmx-canvas webview start [options]  Start or replace automation session
@@ -2325,6 +2399,8 @@ Examples:
   pmx-canvas node add --type markdown --title "API Design" --content "# REST API"
   pmx-canvas node add --type webpage --url "https://example.com/docs"
   pmx-canvas node add --type json-render --title "Dashboard" --spec-file ./dashboard.json
+  pmx-canvas json-render --schema --summary
+  pmx-canvas json-render --example --component Table
   pmx-canvas node add --type web-artifact --title "Dashboard" --app-file ./App.tsx
   pmx-canvas node add --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value
   pmx-canvas graph add --graph-type bar --data-file ./metrics.json --x-key label --y-key value

package/src/cli/index.ts

@@ -29,8 +29,8 @@ if (args.includes('--version') || args.includes('-v')) {
 // ── Agent CLI subcommands ────────────────────────────────────
 // 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',
-  'fit', 'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
+  'node', 'edge', 'json-render', 'search', 'layout', 'status', 'arrange', 'focus',
+  'fit', 'screenshot', 'pin', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
   'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'external-app', 'graph', 'batch', 'validate', 'serve',
 ]);
 
@@ -486,8 +486,10 @@ Server options:
 
 Agent CLI (works against running server):
   node add|list|get|update|remove     Manage nodes
+  json-render                          Show json-render schema/examples
   graph add                           Add graph nodes (alias for node add --type graph)
   edge add|list|remove                Manage edges
+  screenshot                           Save a WebView automation screenshot
   webview status|start|evaluate|resize|screenshot|stop
                                       Manage Bun.WebView automation session
   search <query>                      Search nodes
@@ -540,6 +542,7 @@ Examples:
   pmx-canvas node add --type markdown --title "Hello World"   Add a node
   pmx-canvas node add --type webpage --url "https://example.com"  Add a webpage node
   pmx-canvas node add --type json-render --title "Dashboard" --spec-file ./dashboard.json
+  pmx-canvas json-render --schema --summary                   Show json-render schema info
   pmx-canvas node add --type web-artifact --title "Dashboard" --app-file ./App.tsx
   pmx-canvas graph add --graph-type bar --data-file ./metrics.json --x-key label --y-key value
   pmx-canvas node list                                        List all nodes
@@ -549,7 +552,7 @@ Examples:
   pmx-canvas validate spec --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value
   pmx-canvas open                                             Open the workbench in a browser
   pmx-canvas webview status                                   Show WebView automation status
-  pmx-canvas webview screenshot --output ./canvas.png         Save a WebView screenshot
+  pmx-canvas screenshot --output ./canvas.png                 Save a WebView screenshot
   pmx-canvas search "auth"                                    Find nodes
   pmx-canvas arrange --layout column                          Auto-arrange
   pmx-canvas batch --file ./canvas-ops.json                   Run batch canvas ops

package/src/client/canvas/CanvasNode.tsx

@@ -179,12 +179,13 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         autoFitPersistTimer.current = null;
       }
     };
-  }, [node.id, node.type, node.data.mode, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
+  }, [node.id, node.type, node.data.mode, node.data.strictSize, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
 
   const isPinned = node.pinned;
   const isTrace = node.type === 'trace';
   const isTraceRunning = isTrace && node.data.status === 'running';
   const isGroup = node.type === 'group';
+  const isStrictSize = node.data.strictSize === true;
   const viewportScale = Math.max(viewport.value.scale, 0.01);
   const chromeScale = viewportScale < 1 ? Math.min(2.2, 1 / viewportScale) : 1;
 
@@ -213,6 +214,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isTrace ? 'trace-node' : '',
     isTraceRunning ? 'trace-running' : '',
     isGroup ? 'group-node' : '',
+    isStrictSize ? 'strict-size' : '',
   ]
     .filter(Boolean)
     .join(' ');

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

@@ -12,7 +12,7 @@ function hasExplicitStructuredFrame(node: CanvasNodeState): boolean {
 }
 
 export function shouldAutoFitNode(node: CanvasNodeState): boolean {
-  return !node.collapsed && !node.dockPosition && node.type !== 'group' && !isExtAppNode(node) && !hasExplicitStructuredFrame(node);
+  return !node.collapsed && !node.dockPosition && node.data.strictSize !== true && node.type !== 'group' && !isExtAppNode(node) && !hasExplicitStructuredFrame(node);
 }
 
 export function computeAutoFitHeight(node: CanvasNodeState, contentHeight: number): number | null {