pmx-canvas 0.1.9 → 0.1.11

package/src/json-render/charts/extra-components.tsx

@@ -34,7 +34,11 @@ import {
 import {
   CHART_COLORS,
   CartesianChart,
+  axisTickMargin,
   axisStyle,
+  chartMargin,
+  legendMargin,
+  polarChartMargin,
   tooltipStyle,
   type CartesianChartProps,
 } from './components';
@@ -47,7 +51,7 @@ function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>) {
   return (
     <CartesianChart props={props} className="pmx-chart--area">
       {(data) => (
-        <RechartsAreaChart data={data}>
+        <RechartsAreaChart data={data} margin={chartMargin}>
           <defs>
             <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor={stroke} stopOpacity={0.45} />
@@ -55,8 +59,8 @@ function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>) {
             </linearGradient>
           </defs>
           <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} />
           <Area
             type="monotone"
@@ -91,10 +95,10 @@ function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>) {
     <div className="pmx-chart pmx-chart--scatter">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsScatterChart>
+        <RechartsScatterChart margin={chartMargin}>
           <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
-          <XAxis type="number" dataKey={props.xKey} tick={axisStyle} name={props.xKey} />
-          <YAxis type="number" dataKey={props.yKey} tick={axisStyle} name={props.yKey} />
+          <XAxis type="number" dataKey={props.xKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.xKey} />
+          <YAxis type="number" dataKey={props.yKey} tick={axisStyle} tickMargin={axisTickMargin} name={props.yKey} />
           {props.zKey && <ZAxis type="number" dataKey={props.zKey} range={[40, 400]} name={props.zKey} />}
           <Tooltip contentStyle={tooltipStyle} cursor={{ strokeDasharray: '3 3' }} />
           <Scatter data={data} fill={fill} />
@@ -110,6 +114,7 @@ interface RadarChartProps {
   axisKey: string;
   metrics: string[];
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
@@ -121,12 +126,12 @@ function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
     <div className="pmx-chart pmx-chart--radar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsRadarChart data={data} outerRadius="75%">
+        <RechartsRadarChart data={data} outerRadius="66%" margin={polarChartMargin}>
           <PolarGrid stroke="var(--border, #e5e5e5)" />
           <PolarAngleAxis dataKey={props.axisKey} tick={axisStyle} />
           <PolarRadiusAxis tick={axisStyle} />
           <Tooltip contentStyle={tooltipStyle} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           {metrics.map((metric, i) => {
             const color = CHART_COLORS[i % CHART_COLORS.length];
             return (
@@ -153,6 +158,7 @@ interface StackedBarChartProps {
   series: string[];
   aggregate?: 'sum' | 'count' | 'avg' | null;
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps>) {
@@ -166,12 +172,12 @@ function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps
     <div className="pmx-chart pmx-chart--stacked-bar">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsBarChart data={chartData}>
+        <RechartsBarChart data={chartData} 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} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           {series.map((key, i) => (
             <Bar
               key={key}
@@ -225,6 +231,7 @@ interface ComposedChartProps {
   barColor?: string | null;
   lineColor?: string | null;
   height?: number | null;
+  showLegend?: boolean | null;
 }
 
 function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
@@ -237,12 +244,12 @@ function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>) {
     <div className="pmx-chart pmx-chart--composed">
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
       <ResponsiveContainer width="100%" height={h}>
-        <RechartsComposedChart data={data}>
+        <RechartsComposedChart 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} />
-          <Legend />
+          {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           <Bar dataKey={props.barKey} fill={barFill} radius={[4, 4, 0, 0]} />
           <Line
             type="monotone"

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

@@ -73,6 +73,7 @@ export const extraChartComponentDefinitions = {
       axisKey: z.string(),
       metrics: z.array(z.string()),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.',
@@ -86,6 +87,7 @@ export const extraChartComponentDefinitions = {
       axisKey: 'skill',
       metrics: ['alice', 'bob'],
       height: null,
+      showLegend: true,
     },
   },
 
@@ -97,6 +99,7 @@ export const extraChartComponentDefinitions = {
       series: z.array(z.string()),
       aggregate: z.enum(['sum', 'count', 'avg']).nullable(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.',
@@ -111,6 +114,7 @@ export const extraChartComponentDefinitions = {
       series: ['north', 'south', 'east'],
       aggregate: null,
       height: null,
+      showLegend: true,
     },
   },
 
@@ -124,6 +128,7 @@ export const extraChartComponentDefinitions = {
       barColor: z.string().nullable(),
       lineColor: z.string().nullable(),
       height: z.number().nullable(),
+      showLegend: z.boolean().optional(),
     }),
     description:
       'Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.',
@@ -140,6 +145,7 @@ export const extraChartComponentDefinitions = {
       barColor: null,
       lineColor: null,
       height: null,
+      showLegend: true,
     },
   },
 } as const;

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

@@ -17,6 +17,7 @@ export interface JsonRenderNodeInput {
   y?: number;
   width?: number;
   height?: number;
+  strictSize?: boolean;
 }
 
 export interface GraphNodeInput {
@@ -38,10 +39,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 const JSON_RENDER_NODE_SIZE = { width: 840, height: 620 };
@@ -262,14 +266,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 +340,6 @@ function normalizeElementProps(
     if ('label' in props) {
       delete props.label;
     }
-    if ('variant' in props) {
-      props.variant = normalizeBadgeVariant(props.variant);
-    }
   }
 
   if (type === 'Select' || type === 'Radio') {
@@ -525,6 +518,8 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     case 'PieChart': {
       chartProps.nameKey = input.nameKey ?? 'name';
       chartProps.valueKey = input.valueKey ?? 'value';
+      chartProps.showLegend = input.showLegend !== false;
+      chartProps.showLabels = input.showLabels !== false;
       break;
     }
     case 'ScatterChart': {
@@ -544,6 +539,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
       }
       chartProps.axisKey = axisKey;
       chartProps.metrics = metrics;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'StackedBarChart': {
@@ -557,6 +553,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
       chartProps.xKey = xKey;
       chartProps.series = series;
       chartProps.aggregate = input.aggregate ?? null;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'ComposedChart': {
@@ -567,6 +564,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
         ?? 'rate';
       chartProps.barColor = input.barColor ?? null;
       chartProps.lineColor = input.lineColor ?? null;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'AreaChart':
@@ -624,6 +622,8 @@ export function buildGraphConfig(input: GraphNodeInput): Record<string, unknown>
     ...(input.barColor ? { barColor: input.barColor } : {}),
     ...(input.lineColor ? { lineColor: input.lineColor } : {}),
     ...(typeof input.height === 'number' ? { height: input.height } : {}),
+    ...(typeof input.showLegend === 'boolean' ? { showLegend: input.showLegend } : {}),
+    ...(typeof input.showLabels === 'boolean' ? { showLabels: input.showLabels } : {}),
   };
 }
 

package/src/mcp/server.ts

@@ -155,6 +155,7 @@ export async function startMcpServer(): Promise<void> {
       y: z.number().optional().describe('Y position (auto-placed if omitted)'),
       width: z.number().optional().describe('Width in pixels (default: 720)'),
       height: z.number().optional().describe('Height in pixels (default: 600)'),
+      strictSize: z.boolean().optional().describe('Keep explicit width/height fixed and scroll overflowing content instead of browser auto-fitting'),
     },
     async (input) => {
       const c = await ensureCanvas();
@@ -173,6 +174,7 @@ export async function startMcpServer(): Promise<void> {
           ...(typeof input.y === 'number' ? { y: input.y } : {}),
           ...(typeof input.width === 'number' ? { width: input.width } : {}),
           ...(typeof input.height === 'number' ? { height: input.height } : {}),
+          ...(input.strictSize === true ? { strictSize: true } : {}),
         });
         return {
           content: [{ type: 'text', text: JSON.stringify(result) }],
@@ -461,6 +463,7 @@ export async function startMcpServer(): Promise<void> {
       y: z.number().optional().describe('Optional Y position'),
       width: z.number().optional().describe('Optional node width'),
       height: z.number().optional().describe('Optional node height'),
+      strictSize: z.boolean().optional().describe('Keep explicit width/height fixed and scroll overflowing content instead of browser auto-fitting'),
     },
     async (input) => {
       const c = await ensureCanvas();
@@ -472,6 +475,7 @@ export async function startMcpServer(): Promise<void> {
           ...(typeof input.y === 'number' ? { y: input.y } : {}),
           ...(typeof input.width === 'number' ? { width: input.width } : {}),
           ...(typeof input.height === 'number' ? { height: input.height } : {}),
+          ...(input.strictSize === true ? { strictSize: true } : {}),
         });
         return {
           content: [{
@@ -515,10 +519,13 @@ export async function startMcpServer(): Promise<void> {
       barColor: z.string().optional().describe('Optional bar color for composed charts'),
       lineColor: z.string().optional().describe('Optional line color for composed charts'),
       height: z.number().optional().describe('Optional chart content height'),
+      showLegend: z.boolean().optional().describe('Show chart legend when supported; pass false for compact node layouts'),
+      showLabels: z.boolean().optional().describe('Show direct labels when supported, such as pie slice labels (defaults to true)'),
       x: z.number().optional().describe('Optional X position'),
       y: z.number().optional().describe('Optional Y position'),
       width: z.number().optional().describe('Optional node width'),
       nodeHeight: z.number().optional().describe('Optional node height'),
+      strictSize: z.boolean().optional().describe('Keep explicit node size fixed and scroll overflowing content instead of browser auto-fitting'),
     },
     async (input) => {
       const c = await ensureCanvas();
@@ -542,10 +549,13 @@ export async function startMcpServer(): Promise<void> {
           ...(typeof input.barColor === 'string' ? { barColor: input.barColor } : {}),
           ...(typeof input.lineColor === 'string' ? { lineColor: input.lineColor } : {}),
           ...(typeof input.height === 'number' ? { height: input.height } : {}),
+          ...(typeof input.showLegend === 'boolean' ? { showLegend: input.showLegend } : {}),
+          ...(typeof input.showLabels === 'boolean' ? { showLabels: input.showLabels } : {}),
           ...(typeof input.x === 'number' ? { x: input.x } : {}),
           ...(typeof input.y === 'number' ? { y: input.y } : {}),
           ...(typeof input.width === 'number' ? { width: input.width } : {}),
           ...(typeof input.nodeHeight === 'number' ? { heightPx: input.nodeHeight } : {}),
+          ...(input.strictSize === true ? { strictSize: true } : {}),
         });
         return {
           content: [{

package/src/server/canvas-operations.ts

@@ -67,6 +67,7 @@ export interface CanvasStructuredNodeUpdateInput extends Omit<CanvasGraphNodeUpd
   content?: unknown;
   data?: unknown;
   arrangeLocked?: unknown;
+  strictSize?: boolean;
   chartHeight?: unknown;
 }
 
@@ -82,6 +83,7 @@ interface CanvasAddNodeInput {
   defaultWidth?: number;
   defaultHeight?: number;
   fileMode?: 'path' | 'inline' | 'auto';
+  strictSize?: boolean;
 }
 
 interface CanvasCreateGroupInput {
@@ -164,6 +166,8 @@ function hasGraphUpdateFields(input: Record<string, unknown>): boolean {
     input.zKey !== undefined ||
     input.nameKey !== undefined ||
     input.valueKey !== undefined ||
+    input.showLegend !== undefined ||
+    input.showLabels !== undefined ||
     input.axisKey !== undefined ||
     input.metrics !== undefined ||
     input.series !== undefined ||
@@ -200,6 +204,7 @@ function mergeNodeDataFields(
     ...base,
     ...(isRecord(input.data) ? input.data : {}),
     ...(typeof input.arrangeLocked === 'boolean' ? { arrangeLocked: input.arrangeLocked } : {}),
+    ...(typeof input.strictSize === 'boolean' ? { strictSize: input.strictSize } : {}),
   };
 }
 
@@ -251,6 +256,8 @@ function graphConfigToInput(config: Record<string, unknown>, fallbackTitle: stri
     ...(pickString(config, 'zKey') ? { zKey: pickString(config, 'zKey') } : {}),
     ...(pickString(config, 'nameKey') ? { nameKey: pickString(config, 'nameKey') } : {}),
     ...(pickString(config, 'valueKey') ? { valueKey: pickString(config, 'valueKey') } : {}),
+    ...(typeof config.showLegend === 'boolean' ? { showLegend: config.showLegend } : {}),
+    ...(typeof config.showLabels === 'boolean' ? { showLabels: config.showLabels } : {}),
     ...(pickString(config, 'axisKey') ? { axisKey: pickString(config, 'axisKey') } : {}),
     ...(pickStringArray(config, 'metrics') ? { metrics: pickStringArray(config, 'metrics') } : {}),
     ...(pickStringArray(config, 'series') ? { series: pickStringArray(config, 'series') } : {}),
@@ -276,6 +283,12 @@ function mergeGraphInput(source: Record<string, unknown>, fallback: GraphNodeInp
     ...((pickString(source, 'zKey') ?? fallback?.zKey) ? { zKey: pickString(source, 'zKey') ?? fallback?.zKey } : {}),
     ...((pickString(source, 'nameKey') ?? fallback?.nameKey) ? { nameKey: pickString(source, 'nameKey') ?? fallback?.nameKey } : {}),
     ...((pickString(source, 'valueKey') ?? fallback?.valueKey) ? { valueKey: pickString(source, 'valueKey') ?? fallback?.valueKey } : {}),
+    ...(typeof source.showLegend === 'boolean' || typeof fallback?.showLegend === 'boolean'
+      ? { showLegend: typeof source.showLegend === 'boolean' ? source.showLegend : fallback?.showLegend }
+      : {}),
+    ...(typeof source.showLabels === 'boolean' || typeof fallback?.showLabels === 'boolean'
+      ? { showLabels: typeof source.showLabels === 'boolean' ? source.showLabels : fallback?.showLabels }
+      : {}),
     ...((pickString(source, 'axisKey') ?? fallback?.axisKey) ? { axisKey: pickString(source, 'axisKey') ?? fallback?.axisKey } : {}),
     ...((pickStringArray(source, 'metrics') ?? fallback?.metrics) ? { metrics: pickStringArray(source, 'metrics') ?? fallback?.metrics } : {}),
     ...((pickStringArray(source, 'series') ?? fallback?.series) ? { series: pickStringArray(source, 'series') ?? fallback?.series } : {}),
@@ -752,6 +765,7 @@ function buildNodeData(input: CanvasAddNodeInput): Record<string, unknown> {
     ...(input.data ?? {}),
     ...(input.title ? { title: input.title } : {}),
     ...(input.content ? { content: input.content } : {}),
+    ...(input.strictSize ? { strictSize: true } : {}),
   };
 }
 
@@ -1271,6 +1285,7 @@ export function createCanvasJsonRenderNode(
     dockPosition: null,
     data: createJsonRenderNodeData(id, input.title?.trim() || inferJsonRenderNodeTitle(spec), spec, {
       viewerType: 'json-render',
+      ...(input.strictSize ? { strictSize: true } : {}),
     }),
   };
 
@@ -1302,6 +1317,7 @@ export function createCanvasGraphNode(
     data: createJsonRenderNodeData(id, title, spec, {
       viewerType: 'graph',
       graphConfig: buildGraphConfig(input),
+      ...(input.strictSize ? { strictSize: true } : {}),
     }),
   };
 
@@ -1418,6 +1434,7 @@ export async function executeCanvasBatch(
               ...(typeof args.y === 'number' ? { y: args.y } : {}),
               ...(typeof args.width === 'number' ? { width: args.width } : {}),
               ...(typeof args.height === 'number' ? { height: args.height } : {}),
+              ...(args.strictSize === true ? { strictSize: true } : {}),
               defaultWidth: 520,
               defaultHeight: 420,
             });
@@ -1441,6 +1458,7 @@ export async function executeCanvasBatch(
               ...(typeof args.y === 'number' ? { y: args.y } : {}),
               ...(typeof args.width === 'number' ? { width: args.width } : {}),
               ...(typeof args.height === 'number' ? { height: args.height } : {}),
+              ...(args.strictSize === true ? { strictSize: true } : {}),
               defaultWidth: 360,
               defaultHeight: 200,
               fileMode: 'auto',
@@ -1471,12 +1489,13 @@ export async function executeCanvasBatch(
           if (args.dockPosition === null || args.dockPosition === 'left' || args.dockPosition === 'right') {
             patch.dockPosition = args.dockPosition;
           }
-          if (typeof args.title === 'string' || typeof args.content === 'string' || typeof args.arrangeLocked === 'boolean' || isPlainRecord(args.data)) {
+          if (typeof args.title === 'string' || typeof args.content === 'string' || typeof args.arrangeLocked === 'boolean' || typeof args.strictSize === 'boolean' || isPlainRecord(args.data)) {
             patch.data = {
               ...node.data,
               ...(typeof args.title === 'string' ? { title: args.title } : {}),
               ...(typeof args.content === 'string' ? { content: args.content } : {}),
               ...(typeof args.arrangeLocked === 'boolean' ? { arrangeLocked: args.arrangeLocked } : {}),
+              ...(typeof args.strictSize === 'boolean' ? { strictSize: args.strictSize } : {}),
               ...(isPlainRecord(args.data) ? args.data : {}),
             };
           }
@@ -1511,6 +1530,7 @@ export async function executeCanvasBatch(
             ...(typeof args.y === 'number' ? { y: args.y } : {}),
             ...(typeof args.width === 'number' ? { width: args.width } : {}),
             ...(typeof args.nodeHeight === 'number' ? { heightPx: args.nodeHeight } : {}),
+            ...(args.strictSize === true ? { strictSize: true } : {}),
           });
           result = {
             ok: true,

package/src/server/canvas-schema.ts

@@ -72,6 +72,7 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
       { name: 'y', type: 'number', required: false, description: 'Optional Y position.' },
       { name: 'width', type: 'number', required: false, description: 'Optional node width.' },
       { name: 'height', type: 'number', required: false, description: 'Optional node height.' },
+      { name: 'strictSize', type: 'boolean', required: false, description: 'Keep explicit width/height fixed and scroll overflowing content instead of browser auto-fitting.', aliases: ['strict-size', 'scroll-overflow'] },
     ],
     example: {
       type: 'markdown',
@@ -203,6 +204,7 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
       { name: 'y', type: 'number', required: false, description: 'Optional Y position.' },
       { name: 'width', type: 'number', required: false, description: 'Optional node width.' },
       { name: 'height', type: 'number', required: false, description: 'Optional node height.' },
+      { name: 'strictSize', type: 'boolean', required: false, description: 'Keep explicit width/height fixed and scroll overflowing content instead of browser auto-fitting.', aliases: ['strict-size', 'scroll-overflow'] },
     ],
     example: {
       type: 'webpage',
@@ -337,8 +339,11 @@ const CANVAS_CREATE_TYPES: CanvasCreateTypeSchema[] = [
       { name: 'barColor', type: 'string', required: false, description: 'Optional bar color for composed charts.', aliases: ['bar-color'] },
       { name: 'lineColor', type: 'string', required: false, description: 'Optional line color for composed charts.', aliases: ['line-color'] },
       { name: 'height', type: 'number', required: false, description: 'Optional chart content height.', aliases: ['chart-height'] },
+      { name: 'showLegend', type: 'boolean', required: false, description: 'Show chart legend when supported; pass false for compact node layouts.', aliases: ['show-legend'] },
+      { name: 'showLabels', type: 'boolean', required: false, description: 'Show direct labels when supported, such as pie slice labels; defaults to true.', aliases: ['show-labels'] },
       { name: 'width', type: 'number', required: false, description: 'Optional node width.' },
       { name: 'nodeHeight', type: 'number', required: false, description: 'Optional node height (canvas frame). Distinct from `height`, which sets only the chart content height inside the node.', aliases: ['node-height'] },
+      { name: 'strictSize', type: 'boolean', required: false, description: 'Keep explicit node size fixed and scroll overflowing content instead of browser auto-fitting.', aliases: ['strict-size', 'scroll-overflow'] },
     ],
     example: {
       title: 'Deploy Trend',

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;
       }