pmx-canvas 0.1.10 → 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/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 };
@@ -514,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': {
@@ -533,6 +539,7 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
       }
       chartProps.axisKey = axisKey;
       chartProps.metrics = metrics;
+      chartProps.showLegend = input.showLegend !== false;
       break;
     }
     case 'StackedBarChart': {
@@ -546,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': {
@@ -556,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':
@@ -613,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/diagram-presets.ts

@@ -115,6 +115,18 @@ function elementHasCameraUpdate(elements: Array<Record<string, unknown>>): boole
   return elements.some((element) => element.type === 'cameraUpdate');
 }
 
+function hasRenderableExcalidrawElement(elements: Array<Record<string, unknown>>): boolean {
+  return elements.some((element) => {
+    if (element.isDeleted === true) return false;
+    if (element.type === 'cameraUpdate' || element.type === 'restoreCheckpoint' || element.type === 'delete') return false;
+    if (typeof element.type !== 'string' || element.type.length === 0) return false;
+    if (element.type === 'text') {
+      return typeof element.text === 'string' && element.text.trim().length > 0;
+    }
+    return finiteNumber(element.x) !== null && finiteNumber(element.y) !== null;
+  });
+}
+
 function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>): Array<Record<string, unknown>> {
   const elementsById = new Map<string, Record<string, unknown>>();
   for (const element of elements) {
@@ -123,38 +135,58 @@ function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>):
 
   let changed = false;
   const boundElementIdsByContainer = new Map<string, Set<string>>();
+  const labelByContainer = new Map<string, Record<string, unknown>>();
+  const textIdsConvertedToLabels = new Set<string>();
 
   for (const element of elements) {
     if (element.type !== 'text' || typeof element.id !== 'string' || typeof element.containerId !== 'string') continue;
-    if (!elementsById.has(element.containerId)) continue;
+    const container = elementsById.get(element.containerId);
+    if (!container) continue;
     const ids = boundElementIdsByContainer.get(element.containerId) ?? new Set<string>();
     ids.add(element.id);
     boundElementIdsByContainer.set(element.containerId, ids);
+    const text = typeof element.text === 'string' ? element.text.trim() : '';
+    if (!isRecord(container.label) && text.length > 0) {
+      labelByContainer.set(element.containerId, {
+        text,
+        ...(typeof element.fontSize === 'number' && Number.isFinite(element.fontSize) ? { fontSize: element.fontSize } : {}),
+      });
+      textIdsConvertedToLabels.add(element.id);
+    }
   }
 
-  const normalized = elements.map((element) => {
+  const normalized = elements.flatMap<Record<string, unknown>>((element) => {
+    if (typeof element.id === 'string' && textIdsConvertedToLabels.has(element.id)) {
+      changed = true;
+      return [];
+    }
     if (typeof element.id !== 'string') return element;
     const boundTextIds = boundElementIdsByContainer.get(element.id);
-    if (!boundTextIds || boundTextIds.size === 0) return element;
+    const label = labelByContainer.get(element.id);
+    if ((!boundTextIds || boundTextIds.size === 0) && !label) return element;
 
     const existing = Array.isArray(element.boundElements)
       ? element.boundElements.filter(isRecord)
       : [];
+    const remainingExisting = existing.filter((boundElement) => {
+      return !(boundElement.type === 'text' && typeof boundElement.id === 'string' && textIdsConvertedToLabels.has(boundElement.id));
+    });
     const existingTextIds = new Set(
-      existing
+      remainingExisting
         .filter((boundElement) => boundElement.type === 'text' && typeof boundElement.id === 'string')
         .map((boundElement) => boundElement.id as string),
     );
-    const missing = [...boundTextIds].filter((id) => !existingTextIds.has(id));
-    if (missing.length === 0) return element;
+    const missing = [...(boundTextIds ?? [])]
+      .filter((id) => !textIdsConvertedToLabels.has(id) && !existingTextIds.has(id));
+    if (missing.length === 0 && !label && remainingExisting.length === existing.length) return element;
 
     changed = true;
     return {
       ...element,
-      boundElements: [
-        ...existing,
-        ...missing.map((id) => ({ type: 'text', id })),
-      ],
+      ...(label ? { label } : {}),
+      ...(remainingExisting.length > 0 || missing.length > 0
+        ? { boundElements: [...remainingExisting, ...missing.map((id) => ({ type: 'text', id }))] }
+        : {}),
     };
   });
 
@@ -251,12 +283,12 @@ function withInferredCameraUpdate(
 
 export function normalizeExcalidrawElements(elements: unknown): string {
   const parsed = parseExcalidrawElements(elements);
-  return JSON.stringify(parsed.length > 0 ? parsed : DEFAULT_EXCALIDRAW_ELEMENTS);
+  return JSON.stringify(hasRenderableExcalidrawElement(parsed) ? parsed : DEFAULT_EXCALIDRAW_ELEMENTS);
 }
 
 export function normalizeExcalidrawElementsForToolInput(elements: unknown): string {
   const parsed = parseExcalidrawElements(elements);
-  const seeded = parsed.length > 0 ? parsed : [...DEFAULT_EXCALIDRAW_ELEMENTS];
+  const seeded = hasRenderableExcalidrawElement(parsed) ? parsed : [...DEFAULT_EXCALIDRAW_ELEMENTS];
   return JSON.stringify(withInferredCameraUpdate(normalizeExcalidrawBoundText(seeded)));
 }
 

package/src/server/index.ts

@@ -162,6 +162,7 @@ export class PmxCanvas extends EventEmitter {
     y?: number;
     width?: number;
     height?: number;
+    strictSize?: boolean;
   }): string {
     if (input.type === 'webpage') {
       throw new Error('Use addWebpageNode for webpage nodes so page content is fetched and cached on the server.');
@@ -171,6 +172,7 @@ export class PmxCanvas extends EventEmitter {
       defaultWidth: 360,
       defaultHeight: 200,
       fileMode: 'path',
+      ...(input.strictSize ? { strictSize: true } : {}),
     });
 
     emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
@@ -191,6 +193,7 @@ export class PmxCanvas extends EventEmitter {
     y?: number;
     width?: number;
     height?: number;
+    strictSize?: boolean;
   }): Promise<{ ok: boolean; id: string; error?: string; fetch: { ok: boolean; error?: string } }> {
     const { id } = addCanvasNode({
       type: 'webpage',
@@ -200,6 +203,7 @@ export class PmxCanvas extends EventEmitter {
       ...(typeof input.y === 'number' ? { y: input.y } : {}),
       ...(typeof input.width === 'number' ? { width: input.width } : {}),
       ...(typeof input.height === 'number' ? { height: input.height } : {}),
+      ...(input.strictSize ? { strictSize: true } : {}),
       defaultWidth: 520,
       defaultHeight: 420,
     });
@@ -238,7 +242,8 @@ export class PmxCanvas extends EventEmitter {
       patch.data !== undefined ||
       patch.title !== undefined ||
       patch.content !== undefined ||
-      typeof patch.arrangeLocked === 'boolean'
+      typeof patch.arrangeLocked === 'boolean' ||
+      typeof patch.strictSize === 'boolean'
     ) {
       resolvedPatch.data = {
         ...existing.data,
@@ -246,6 +251,7 @@ export class PmxCanvas extends EventEmitter {
         ...(typeof patch.title === 'string' ? { title: patch.title } : {}),
         ...(typeof patch.content === 'string' ? { content: patch.content } : {}),
         ...(typeof patch.arrangeLocked === 'boolean' ? { arrangeLocked: patch.arrangeLocked } : {}),
+        ...(typeof patch.strictSize === 'boolean' ? { strictSize: patch.strictSize } : {}),
       };
     }