pmx-canvas 0.1.9 → 0.1.11

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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];
@@ -241,6 +241,18 @@ 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 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);
 }
@@ -598,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;
 }
 
@@ -657,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');
@@ -674,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;
 }
 
@@ -1059,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) {
@@ -1073,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',
@@ -1089,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',
@@ -1216,6 +1267,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 +1286,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 +1306,9 @@ cmd('node update', 'Update a node by ID', [
       ? false
       : undefined;
 
-  if (x !== undefined || y !== undefined || width !== undefined || height !== undefined || arrangeLocked !== 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 };
       size: { width: number; height: number };
@@ -1257,10 +1322,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 +1334,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, --strict-size, --pinned, --lock-arrange, --unlock-arrange, or --stdin',
     );
   }
 
@@ -2035,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',
@@ -2171,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:');
@@ -2205,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');
@@ -2236,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:
@@ -2255,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
@@ -2303,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',
-  '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

@@ -1,18 +1,18 @@
 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 {
-  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 {

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/charts/components.tsx

@@ -84,6 +84,8 @@ interface PieChartProps {
   nameKey: string;
   valueKey: string;
   height?: number | null;
+  showLegend?: boolean | null;
+  showLabels?: boolean | null;
 }
 
 export const axisStyle = {
@@ -99,6 +101,11 @@ export const tooltipStyle = {
   fontSize: 13,
 };
 
+export const chartMargin = { top: 14, right: 28, bottom: 28, left: 10 };
+export const polarChartMargin = { top: 18, right: 40, bottom: 30, left: 40 };
+export const axisTickMargin = 8;
+export const legendMargin = { top: 10 };
+
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export function CartesianChart({
   props,
@@ -127,10 +134,10 @@ function ChartLineChart({ props }: BaseComponentProps<CartesianChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--line">
       {(data) => (
-        <RechartsLineChart data={data}>
+        <RechartsLineChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} />
           <Line
             type="monotone"
@@ -151,10 +158,10 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--bar">
       {(data) => (
-        <RechartsBarChart data={data}>
+        <RechartsBarChart data={data} margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis dataKey={props.xKey} tick={axisStyle} />
-          <YAxis tick={axisStyle} />
+          <XAxis dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} />
+          <YAxis tick={axisStyle} tickMargin={axisTickMargin} />
           <Tooltip contentStyle={tooltipStyle} cursor={false} />
           <Bar dataKey={props.yKey} fill={fill} radius={[4, 4, 0, 0]} />
         </RechartsBarChart>
@@ -171,17 +178,18 @@ function ChartPieChart({ props }: BaseComponentProps<PieChartProps>) {
     <div className="pmx-chart pmx-chart--pie">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsPieChart>
+        <RechartsPieChart margin={polarChartMargin}>
           <Tooltip contentStyle={tooltipStyle} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           <Pie
             data={data}
             dataKey={props.valueKey}
             nameKey={props.nameKey}
             cx="50%"
             cy="50%"
-            outerRadius="80%"
-            label
+            outerRadius="64%"
+            label={props.showLabels !== false}
+            labelLine={false}
           >
             {data.map((_, i) => (
               <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />

package/src/json-render/charts/definitions.ts

@@ -63,6 +63,8 @@ export const chartComponentDefinitions = {
       nameKey: z.string(),
       valueKey: z.string(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
+      showLabels: z.boolean().optional(),
     }),
     description:
       'Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.',
@@ -76,6 +78,8 @@ export const chartComponentDefinitions = {
       nameKey: 'name',
       valueKey: 'share',
       height: null,
+      showLegend: true,
+      showLabels: true,
     },
   },
 } as const;