pmx-canvas 0.3.0 → 0.3.2

package/src/json-render/catalog.ts

@@ -23,7 +23,9 @@ export const allComponentDefinitions = {
   Badge: {
     ...badgeDefinition,
     props: badgeDefinition.props.extend({
-      variant: z.enum(['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning', 'error', 'danger']).nullable(),
+      variant: z
+        .enum(['default', 'secondary', 'destructive', 'outline', 'success', 'info', 'warning', 'error', 'danger'])
+        .nullable(),
     }),
   },
   Button: {
@@ -40,9 +42,12 @@ export const allComponentDefinitions = {
   ...tufteChartComponentDefinitions,
 };
 
-export const catalog = defineCatalog(schema as never, {
-  components: allComponentDefinitions,
-} as never);
+export const catalog = defineCatalog(
+  schema as never,
+  {
+    components: allComponentDefinitions,
+  } as never,
+);
 
 export interface JsonRenderIssue {
   path?: PropertyKey[];
@@ -134,12 +139,7 @@ function unwrapSchema(value: unknown): {
 
     const record = asRecord(current);
     const def = asRecord(record?._def) ?? asRecord(record?.def);
-    const inner =
-      def?.innerType ??
-      def?.schema ??
-      def?.type ??
-      def?.out ??
-      def?.in;
+    const inner = def?.innerType ?? def?.schema ?? def?.type ?? def?.out ?? def?.in;
 
     if (!inner || inner === current || (!isOptionalSchema(current) && !isNullableSchema(current))) {
       break;
@@ -178,9 +178,7 @@ function schemaTypeLabel(value: unknown): string {
         : Array.isArray(def?.options)
           ? def.options
           : [];
-    label = rawValues.length > 0
-      ? rawValues.map((entry) => JSON.stringify(entry)).join(' | ')
-      : 'enum';
+    label = rawValues.length > 0 ? rawValues.map((entry) => JSON.stringify(entry)).join(' | ') : 'enum';
   } else if (typeName === 'ZodLiteral' || typeName === 'literal') {
     label = JSON.stringify(def?.value ?? def?.literal ?? 'literal');
   } else if (typeName === 'ZodAny' || typeName === 'any') {
@@ -255,9 +253,7 @@ export function validateShadcnElementProps(spec: unknown): JsonRenderValidationR
     if (!definition || !hasSafeParse(definition.props)) continue;
 
     const elementProps = asRecord(element.props) ?? {};
-    const parsed = definition.props.safeParse(
-      normalizePropsForSchema(definition.props, elementProps),
-    );
+    const parsed = definition.props.safeParse(normalizePropsForSchema(definition.props, elementProps));
     if (parsed.success) continue;
 
     for (const issue of parsed.error?.issues ?? []) {

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

@@ -120,8 +120,9 @@ export function useChartFrameHeight(explicitHeight: number | null | undefined, f
 
   // Standalone "Open as site" tab (#65): fill the full browser viewport — there is no
   // card chrome below the chart, so drop the ~44px reserve and use a larger floor.
-  const isSite = typeof window !== 'undefined'
-    && (window as { __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string }).__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
+  const isSite =
+    typeof window !== 'undefined' &&
+    (window as { __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string }).__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
 
   useEffect(() => {
     const frame = frameRef.current;
@@ -169,16 +170,21 @@ export function useChartFrameHeight(explicitHeight: number | null | undefined, f
   // the node/viewport height. That makes the document's scrollHeight stable so the
   // node can grow to it once and converge (no fill-down feedback loop). When NOT in
   // content-fit (strictSize / user-resized nodes), it fills the frame down as before.
-  const fitContent = typeof window !== 'undefined'
-    && (window as { __PMX_CANVAS_FIT_CONTENT__?: boolean }).__PMX_CANVAS_FIT_CONTENT__ === true;
+  const fitContent =
+    typeof window !== 'undefined' &&
+    (window as { __PMX_CANVAS_FIT_CONTENT__?: boolean }).__PMX_CANVAS_FIT_CONTENT__ === true;
   // Site mode (#65): fill the viewport (autoHeight), ignoring an explicit/configured
   // chart height that would otherwise cap it to a shallow card. Content-fit is off in
   // site mode (the server skips it), so site never takes the intrinsic-height branch.
   const height = isSite
     ? autoHeight
     : fitContent
-      ? (typeof explicitHeight === 'number' ? explicitHeight : fallbackHeight)
-      : (typeof explicitHeight === 'number' ? Math.min(explicitHeight, autoHeight) : autoHeight);
+      ? typeof explicitHeight === 'number'
+        ? explicitHeight
+        : fallbackHeight
+      : typeof explicitHeight === 'number'
+        ? Math.min(explicitHeight, autoHeight)
+        : autoHeight;
   return {
     frameRef,
     height,
@@ -251,11 +257,7 @@ function ChartLineChart({ props }: BaseComponentProps<CartesianChartProps>) {
  * 'max'/'min' pick the tallest/shortest yKey value; a number is used as-is
  * (clamped to range); null/out-of-range means no bar is emphasized.
  */
-function resolveHighlightIndex(
-  data: Record<string, unknown>[],
-  yKey: string,
-  highlight: BarHighlight,
-): number {
+function resolveHighlightIndex(data: Record<string, unknown>[], yKey: string, highlight: BarHighlight): number {
   if (highlight === null || data.length === 0) return -1;
   if (typeof highlight === 'number') {
     return highlight >= 0 && highlight < data.length ? highlight : -1;
@@ -299,9 +301,7 @@ function barCellFill(
     case 'series':
     default:
       // Tufte-safe emphasis: one accent bar, the rest a muted version of it.
-      return index === highlightIndex
-        ? accent
-        : `color-mix(in oklch, ${accent} 32%, transparent)`;
+      return index === highlightIndex ? accent : `color-mix(in oklch, ${accent} 32%, transparent)`;
   }
 }
 
@@ -317,8 +317,7 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
           min: values.length ? Math.min(...values) : 0,
           max: values.length ? Math.max(...values) : 0,
         };
-        const highlightIndex =
-          mode === 'series' ? resolveHighlightIndex(data, props.yKey, highlight) : -1;
+        const highlightIndex = mode === 'series' ? resolveHighlightIndex(data, props.yKey, highlight) : -1;
         return (
           <RechartsBarChart data={data} margin={chartMargin}>
             <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
@@ -327,10 +326,7 @@ function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
             <Tooltip contentStyle={tooltipStyle} cursor={false} />
             <Bar dataKey={props.yKey} radius={[4, 4, 0, 0]}>
               {data.map((_, i) => (
-                <Cell
-                  key={i}
-                  fill={barCellFill(mode, accent, i, values[i], range, highlightIndex)}
-                />
+                <Cell key={i} fill={barCellFill(mode, accent, i, values[i], range, highlightIndex)} />
               ))}
             </Bar>
           </RechartsBarChart>

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

@@ -136,16 +136,7 @@ function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>) {
           {props.showLegend !== false && <Legend wrapperStyle={legendMargin} />}
           {metrics.map((metric, i) => {
             const color = CHART_COLORS[i % CHART_COLORS.length];
-            return (
-              <Radar
-                key={metric}
-                name={metric}
-                dataKey={metric}
-                stroke={color}
-                fill={color}
-                fillOpacity={0.25}
-              />
-            );
+            return <Radar key={metric} name={metric} dataKey={metric} stroke={color} fill={color} fillOpacity={0.25} />;
           })}
         </RechartsRadarChart>
       </ResponsiveContainer>
@@ -167,7 +158,7 @@ function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps
   const series = (props.series ?? []).filter((s) => typeof s === 'string' && s.length > 0);
   const chartData = props.aggregate
     ? mergeAggregated(props.data ?? [], props.xKey, series, props.aggregate)
-    : props.data ?? [];
+    : (props.data ?? []);
   const { frameRef, height } = useChartFrameHeight(props.height, 300);
 
   return (
@@ -212,11 +203,12 @@ function mergeAggregated(
       bucket[s].push(Number.isNaN(n) ? 0 : n);
     }
   }
-  const reducer = aggregate === 'count'
-    ? (vs: number[]) => vs.length
-    : aggregate === 'avg'
-      ? (vs: number[]) => vs.reduce((a, b) => a + b, 0) / vs.length
-      : (vs: number[]) => vs.reduce((a, b) => a + b, 0);
+  const reducer =
+    aggregate === 'count'
+      ? (vs: number[]) => vs.length
+      : aggregate === 'avg'
+        ? (vs: number[]) => vs.reduce((a, b) => a + b, 0) / vs.length
+        : (vs: number[]) => vs.reduce((a, b) => a + b, 0);
   return Array.from(grouped.entries()).map(([key, buckets]) => {
     const out: Record<string, unknown> = { [xKey]: key };
     for (const s of series) out[s] = reducer(buckets[s] ?? []);

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

@@ -130,8 +130,7 @@ export const extraChartComponentDefinitions = {
       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.',
+    description: 'Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.',
     example: {
       title: 'Visits and conversion',
       data: [

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

@@ -100,9 +100,7 @@ function ChartSparkline({ props }: BaseComponentProps<SparklineProps>) {
           role="img"
           aria-label={props.title ?? 'sparkline'}
         >
-          {props.fill && areaPath && (
-            <path d={areaPath} fill={stroke} fillOpacity={0.12} stroke="none" />
-          )}
+          {props.fill && areaPath && <path d={areaPath} fill={stroke} fillOpacity={0.12} stroke="none" />}
           {points.length > 1 && (
             <path d={linePath} fill="none" stroke={stroke} strokeWidth={1.5} vectorEffect="non-scaling-stroke" />
           )}
@@ -166,7 +164,13 @@ function ChartDotPlot({ props }: BaseComponentProps<DotPlotProps>) {
   return (
     <div ref={frameRef} className="pmx-chart pmx-chart--dot-plot" style={{ height }}>
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <svg className="pmx-chart__dot-plot-svg" width="100%" height={rows.length * rowH} role="img" aria-label={props.title ?? 'dot plot'}>
+      <svg
+        className="pmx-chart__dot-plot-svg"
+        width="100%"
+        height={rows.length * rowH}
+        role="img"
+        aria-label={props.title ?? 'dot plot'}
+      >
         {rows.map((row, i) => {
           const cy = i * rowH + rowH / 2;
           // Reference rule runs from the axis origin to the dot, so the line's
@@ -245,12 +249,17 @@ function ChartBulletChart({ props }: BaseComponentProps<BulletChartProps>) {
   return (
     <div ref={frameRef} className="pmx-chart pmx-chart--bullet" style={{ height }}>
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <svg className="pmx-chart__bullet-svg" width="100%" height={rows.length * rowH} role="img" aria-label={props.title ?? 'bullet chart'}>
+      <svg
+        className="pmx-chart__bullet-svg"
+        width="100%"
+        height={rows.length * rowH}
+        role="img"
+        aria-label={props.title ?? 'bullet chart'}
+      >
         {rows.map((row, i) => {
           const top = i * rowH;
           const cy = top + rowH / 2;
-          const domainMax =
-            Math.max(row.value, row.target ?? 0, ...(row.ranges ?? [0])) || 1;
+          const domainMax = Math.max(row.value, row.target ?? 0, ...(row.ranges ?? [0])) || 1;
           const ranges = row.ranges ?? [];
           const left = labelW + padX;
           const rightInset = padX;
@@ -261,9 +270,11 @@ function ChartBulletChart({ props }: BaseComponentProps<BulletChartProps>) {
           const barH = Math.min(20, rowH * 0.5);
           const measureH = barH * 0.4;
           // Qualitative bands: lightest (worst) to darkest (best) grayscale.
-          const bandShades = ['color-mix(in oklch, var(--muted) 35%, transparent)',
-                              'color-mix(in oklch, var(--muted) 60%, transparent)',
-                              'color-mix(in oklch, var(--muted) 90%, transparent)'];
+          const bandShades = [
+            'color-mix(in oklch, var(--muted) 35%, transparent)',
+            'color-mix(in oklch, var(--muted) 60%, transparent)',
+            'color-mix(in oklch, var(--muted) 90%, transparent)',
+          ];
           return (
             <g key={`${row.label}-${i}`}>
               <text x={labelW} y={cy} textAnchor="end" dominantBaseline="central" fontSize={12} fill={INK}>
@@ -285,7 +296,14 @@ function ChartBulletChart({ props }: BaseComponentProps<BulletChartProps>) {
               {/* Per-row scale ticks at each band boundary so the reader does not
                   compare bar lengths across rows that may be independently scaled. */}
               {ranges.map((hi, idx) => (
-                <text key={`tick-${idx}`} x={xAt(hi)} y={cy + barH / 2 + 10} textAnchor="middle" fontSize={9} fill={MUTED}>
+                <text
+                  key={`tick-${idx}`}
+                  x={xAt(hi)}
+                  y={cy + barH / 2 + 10}
+                  textAnchor="middle"
+                  fontSize={9}
+                  fill={MUTED}
+                >
                   {hi}
                 </text>
               ))}
@@ -345,7 +363,13 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
   return (
     <div ref={frameRef} className="pmx-chart pmx-chart--slopegraph" style={{ height }}>
       {props.title && <div className="pmx-chart__title">{props.title}</div>}
-      <svg className="pmx-chart__slopegraph-svg" width="100%" height={plotH} role="img" aria-label={props.title ?? 'slopegraph'}>
+      <svg
+        className="pmx-chart__slopegraph-svg"
+        width="100%"
+        height={plotH}
+        role="img"
+        aria-label={props.title ?? 'slopegraph'}
+      >
         <text x={leftX} y={14} textAnchor="end" fontSize={12} fontWeight={600} fill={MUTED}>
           {props.beforeLabel ?? props.beforeKey}
         </text>
@@ -363,14 +387,7 @@ function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>) {
           const lineColor = props.colorByDirection ? (rose ? stroke : MUTED) : stroke;
           return (
             <g key={`${row.label}-${i}`}>
-              <line
-                x1={leftX}
-                y1={y1}
-                x2={rightX}
-                y2={y2}
-                stroke={lineColor}
-                strokeWidth={1.5}
-              />
+              <line x1={leftX} y1={y1} x2={rightX} y2={y2} stroke={lineColor} strokeWidth={1.5} />
               <circle cx={leftX} cy={y1} r={2.5} fill={lineColor} />
               <circle cx={rightX} cy={y2} r={2.5} fill={lineColor} />
               <text x={leftX - 8} y={y1} textAnchor="end" dominantBaseline="central" fontSize={11} fill={INK}>

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

@@ -25,7 +25,13 @@ export const tufteChartComponentDefinitions = {
       'Word-sized sparkline: a single trend line with no axes, grid, or labels. Optional end dot, min/max markers, light area fill, and an inline last value. The canonical Tufte primitive for showing a trajectory in minimal space.',
     example: {
       title: 'Latency p95',
-      data: [{ t: 0, ms: 120 }, { t: 1, ms: 138 }, { t: 2, ms: 117 }, { t: 3, ms: 152 }, { t: 4, ms: 109 }],
+      data: [
+        { t: 0, ms: 120 },
+        { t: 1, ms: 138 },
+        { t: 2, ms: 117 },
+        { t: 3, ms: 152 },
+        { t: 4, ms: 109 },
+      ],
       valueKey: 'ms',
       color: null,
       fill: true,
@@ -107,7 +113,7 @@ export const tufteChartComponentDefinitions = {
       height: z.number().nullable(),
     }),
     description:
-      "Tufte slopegraph: two value columns (before/after) with a connecting line per category. Lines use one neutral ink by default; set colorByDirection to accent rising lines and mute falling ones. Ideal for paired change across many items.",
+      'Tufte slopegraph: two value columns (before/after) with a connecting line per category. Lines use one neutral ink by default; set colorByDirection to accent rising lines and mute falling ones. Ideal for paired change across many items.',
     example: {
       title: 'Coverage before/after refactor',
       data: [

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

@@ -19,7 +19,16 @@ import { tufteChartComponents } from '../charts/tufte-components';
 import { pmxCanvasDirectives } from '../directives';
 import { JsonRenderDevtools } from '@json-render/devtools-react';
 
-type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'info' | 'warning' | 'error' | 'danger';
+type BadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'error'
+  | 'danger';
 type BadgeProps = {
   text: string;
   variant?: BadgeVariant | null;
@@ -30,11 +39,7 @@ 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}`}
-    >
+    <span data-slot="badge" data-variant={resolvedVariant} className={`pmx-badge pmx-badge--${resolvedVariant}`}>
       {props.text}
     </span>
   );
@@ -111,9 +116,17 @@ function AxStateSync() {
 // validates + submits through the capability-gated endpoint). Convention-based
 // opt-in: spec authors name the action handler after the AX interaction type.
 const AX_INTERACTION_HANDLER_NAMES = [
-  'ax.event.record', 'ax.steer', 'ax.work.create', 'ax.work.update',
-  'ax.evidence.add', 'ax.approval.request', 'ax.review.add', 'ax.focus.set',
-  'ax.elicitation.request', 'ax.mode.request', 'ax.command.invoke',
+  'ax.event.record',
+  'ax.steer',
+  'ax.work.create',
+  'ax.work.update',
+  'ax.evidence.add',
+  'ax.approval.request',
+  'ax.review.add',
+  'ax.focus.set',
+  'ax.elicitation.request',
+  'ax.mode.request',
+  'ax.command.invoke',
 ] as const;
 
 function buildAxHandlers(): Record<string, (params: Record<string, unknown>) => void> {
@@ -126,12 +139,15 @@ function buildAxHandlers(): Record<string, (params: Record<string, unknown>) =>
   // is no JS surface for a Promise-style ack here, so we don't stamp a correlationId.
   for (const type of AX_INTERACTION_HANDLER_NAMES) {
     handlers[type] = (params: Record<string, unknown>) => {
-      window.parent.postMessage({
-        source: 'pmx-canvas-ax',
-        token,
-        nodeId,
-        interaction: { type, payload: params && typeof params === 'object' ? params : {} },
-      }, '*');
+      window.parent.postMessage(
+        {
+          source: 'pmx-canvas-ax',
+          token,
+          nodeId,
+          interaction: { type, payload: params && typeof params === 'object' ? params : {} },
+        },
+        '*',
+      );
     };
   }
   return handlers;
@@ -176,16 +192,22 @@ function App() {
 
   // Seed AX state under a reserved `/ax` key so specs can bind { "$state": "/ax/workItems" }.
   const axState = window.__PMX_CANVAS_AX_STATE__;
-  const initialState = axState !== undefined && axState !== null
-    ? { ...(spec.state ?? {}), ax: axState }
-    : spec.state ?? undefined;
+  const initialState =
+    axState !== undefined && axState !== null ? { ...(spec.state ?? {}), ax: axState } : (spec.state ?? undefined);
 
   // Standalone "Open as site" tab (#65): fill the browser viewport instead of the
   // in-canvas card height. The chart child flex-grows; useChartFrameHeight measures
   // the full viewport in this mode. Embedded/expanded keep the padded min-height box.
   const isSite = window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ === 'site';
   const containerStyle = isSite
-    ? { display: 'flex', flexDirection: 'column' as const, height: '100dvh', minHeight: '100dvh', padding: 0, boxSizing: 'border-box' as const }
+    ? {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        height: '100dvh',
+        minHeight: '100dvh',
+        padding: 0,
+        boxSizing: 'border-box' as const,
+      }
     : { minHeight: '100vh', padding: 16, boxSizing: 'border-box' as const };
   return (
     <div style={containerStyle}>
@@ -199,9 +221,7 @@ function App() {
         <div style={isSite ? { flex: 1, minHeight: 0 } : undefined}>
           <Renderer spec={spec} registry={registry} loading={false} />
         </div>
-        {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? (
-          <JsonRenderDevtools position="right" />
-        ) : null}
+        {window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ ? <JsonRenderDevtools position="right" /> : null}
       </JSONUIProvider>
     </div>
   );

package/src/json-render/schema.ts

@@ -34,11 +34,13 @@ export const schema = defineSchema(
     builtInActions: [
       {
         name: 'setState',
-        description: 'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',
+        description:
+          'Update a value in the state model at the given statePath. Params: { statePath: string, value: any }',
       },
       {
         name: 'pushState',
-        description: 'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
+        description:
+          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
       },
       {
         name: 'removeState',
@@ -46,7 +48,8 @@ export const schema = defineSchema(
       },
       {
         name: 'validateForm',
-        description: 'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
+        description:
+          'Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.',
       },
     ],
     defaultRules: [

package/src/json-render/server.ts

@@ -212,9 +212,7 @@ async function ensureJsonRenderBundle(): Promise<void> {
   // Avoid live source-vs-dist rebuild checks here because Bun's bundler can stall on
   // the @json-render/shadcn dependency graph during request-time viewer generation.
   const needsBuild =
-    !existsSync(jsPath) ||
-    !existsSync(cssPath) ||
-    process.env.PMX_CANVAS_FORCE_JSON_RENDER_REBUILD === '1';
+    !existsSync(jsPath) || !existsSync(cssPath) || process.env.PMX_CANVAS_FORCE_JSON_RENDER_REBUILD === '1';
 
   if (needsBuild) {
     await rebuildJsonRenderBundle();
@@ -273,7 +271,7 @@ function normalizeItemArray(value: unknown): unknown {
     if (hasString(item)) return { label: item, value: item };
     const record = asRecord(item);
     const label = hasString(record?.label) ? record.label : hasString(record?.text) ? record.text : null;
-    const resolvedValue = hasString(record?.value) ? record.value : label ?? `option-${index + 1}`;
+    const resolvedValue = hasString(record?.value) ? record.value : (label ?? `option-${index + 1}`);
     return {
       label: label ?? resolvedValue,
       value: resolvedValue,
@@ -283,11 +281,7 @@ function normalizeItemArray(value: unknown): unknown {
 
 function normalizeStringMatrix(value: unknown): unknown {
   if (!Array.isArray(value)) return value;
-  return value.map((row) => (
-    Array.isArray(row)
-      ? row.map((cell) => String(cell ?? ''))
-      : [String(row ?? '')]
-  ));
+  return value.map((row) => (Array.isArray(row) ? row.map((cell) => String(cell ?? '')) : [String(row ?? '')]));
 }
 
 function normalizeButtonVariant(value: unknown): unknown {
@@ -347,12 +341,7 @@ function normalizeElementProps(
   const props = (stripNullishDeep(rawProps) as Record<string, unknown> | undefined) ?? {};
 
   for (const key of COERCIBLE_STRING_PROPS) {
-    if (
-      key in props &&
-      typeof props[key] !== 'string' &&
-      props[key] !== undefined &&
-      !isDynamicPropValue(props[key])
-    ) {
+    if (key in props && typeof props[key] !== 'string' && props[key] !== undefined && !isDynamicPropValue(props[key])) {
       props[key] = String(props[key]);
     }
   }
@@ -516,7 +505,9 @@ export function inferJsonRenderNodeTitle(spec: JsonRenderSpec, fallback = 'json-
 export function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpec {
   const specRecord = asRecord(normalizeJsonRenderInput(spec));
   if (!specRecord || typeof specRecord.root !== 'string' || !asRecord(specRecord.elements)) {
-    throw new Error('Missing root and elements in spec. Pass a complete {root, elements} document, or a single bare component object with a type field.');
+    throw new Error(
+      'Missing root and elements in spec. Pass a complete {root, elements} document, or a single bare component object with a type field.',
+    );
   }
 
   // Reject an unrecognized $-keyed expression object in any element prop BEFORE
@@ -576,10 +567,7 @@ function collectDataKeys(data: Array<Record<string, unknown>>): Set<string> {
  * as "value") without an explicit valueKey, instead of failing the data-key
  * check on a reasonable guess.
  */
-function firstPresentDataKey(
-  data: Array<Record<string, unknown>>,
-  candidates: string[],
-): string | undefined {
+function firstPresentDataKey(data: Array<Record<string, unknown>>, candidates: string[]): string | undefined {
   const keys = collectDataKeys(data);
   return candidates.find((key) => keys.has(key));
 }
@@ -653,7 +641,9 @@ function assertGraphDataKeys(
   const missing = [...required].filter((key) => !available.has(key));
   if (missing.length === 0) return;
   const availableList = [...available].sort().join(', ') || '(none)';
-  throw new Error(`Graph data key mismatch for ${chartType}: missing ${missing.join(', ')}. Available keys: ${availableList}.`);
+  throw new Error(
+    `Graph data key mismatch for ${chartType}: missing ${missing.join(', ')}. Available keys: ${availableList}.`,
+  );
 }
 
 export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
@@ -685,11 +675,11 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     }
     case 'RadarChart': {
       const axisKey = input.axisKey ?? input.xKey ?? 'axis';
-      const metrics = input.metrics?.length
-        ? input.metrics
-        : inferKeysFromData(input.data, [axisKey]);
+      const metrics = input.metrics?.length ? input.metrics : inferKeysFromData(input.data, [axisKey]);
       if (metrics.length === 0) {
-        throw new Error('RadarChart requires at least one metric key (provide `metrics` or include numeric columns in `data`).');
+        throw new Error(
+          'RadarChart requires at least one metric key (provide `metrics` or include numeric columns in `data`).',
+        );
       }
       chartProps.axisKey = axisKey;
       chartProps.metrics = metrics;
@@ -698,11 +688,11 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     }
     case 'StackedBarChart': {
       const xKey = input.xKey ?? 'label';
-      const series = input.series?.length
-        ? input.series
-        : inferKeysFromData(input.data, [xKey]);
+      const series = input.series?.length ? input.series : inferKeysFromData(input.data, [xKey]);
       if (series.length === 0) {
-        throw new Error('StackedBarChart requires at least one series key (provide `series` or include numeric columns in `data`).');
+        throw new Error(
+          'StackedBarChart requires at least one series key (provide `series` or include numeric columns in `data`).',
+        );
       }
       chartProps.xKey = xKey;
       chartProps.series = series;
@@ -713,9 +703,10 @@ export function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec {
     case 'ComposedChart': {
       chartProps.xKey = input.xKey ?? 'label';
       chartProps.barKey = input.barKey ?? input.yKey ?? 'value';
-      chartProps.lineKey = input.lineKey
-        ?? inferKeysFromData(input.data, [chartProps.xKey as string, chartProps.barKey as string])[0]
-        ?? 'rate';
+      chartProps.lineKey =
+        input.lineKey ??
+        inferKeysFromData(input.data, [chartProps.xKey as string, chartProps.barKey as string])[0] ??
+        'rate';
       chartProps.barColor = input.barColor ?? null;
       chartProps.lineColor = input.lineColor ?? null;
       chartProps.showLegend = input.showLegend !== false;
@@ -952,7 +943,8 @@ export async function buildJsonRenderViewerHtml(options: {
    *  node grows to it. Off for strictSize / user-resized nodes (they fill-down). */
   fitContent?: boolean;
 }): Promise<string> {
-  const sanitizeAxValue = (v?: string): string => (typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '');
+  const sanitizeAxValue = (v?: string): string =>
+    typeof v === 'string' ? v.replace(/[^A-Za-z0-9_-]/g, '').slice(0, 80) : '';
   try {
     await ensureJsonRenderBundle();
     const dir = bundleDir();
@@ -967,12 +959,14 @@ export async function buildJsonRenderViewerHtml(options: {
       ...(options.theme ? [`window.__PMX_CANVAS_JSON_RENDER_THEME__ = ${JSON.stringify(options.theme)};`] : []),
       ...(options.display ? [`window.__PMX_CANVAS_JSON_RENDER_DISPLAY__ = ${JSON.stringify(options.display)};`] : []),
       ...(options.devtools ? ['window.__PMX_CANVAS_JSON_RENDER_DEVTOOLS__ = true;'] : []),
-      ...(options.nodeId && options.axToken ? [
-        `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
-        `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
-        // Read-side AX state: seed for initial render + bound under /ax for specs.
-        `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,
-      ] : []),
+      ...(options.nodeId && options.axToken
+        ? [
+            `window.__PMX_CANVAS_JSON_RENDER_NODE_ID__ = ${JSON.stringify(sanitizeAxValue(options.nodeId))};`,
+            `window.__PMX_CANVAS_AX_TOKEN__ = ${JSON.stringify(sanitizeAxValue(options.axToken))};`,
+            // Read-side AX state: seed for initial render + bound under /ax for specs.
+            `window.__PMX_CANVAS_AX_STATE__ = ${JSON.stringify(options.axState ?? null).replace(/</g, '\\u003c')};`,
+          ]
+        : []),
       ...(options.fitContent ? ['window.__PMX_CANVAS_FIT_CONTENT__ = true;'] : []),
       jsBundle,
     ].join('\n');