pmx-canvas 0.3.0 → 0.3.1

package/src/client/state/sse-bridge.ts

@@ -72,10 +72,8 @@ function applyLayoutOverrides(node: CanvasNodeState): CanvasNodeState {
 }
 
 // ── Default positions by type ─────────────────────────────────
-const DEFAULT_POSITIONS: Record<
-  CanvasNodeState['type'],
-  { x: number; y: number; w: number; h: number }
-> & Record<'prompt' | 'response', { x: number; y: number; w: number; h: number }> = {
+const DEFAULT_POSITIONS: Record<CanvasNodeState['type'], { x: number; y: number; w: number; h: number }> &
+  Record<'prompt' | 'response', { x: number; y: number; w: number; h: number }> = {
   status: { x: 40, y: 80, w: 300, h: 120 },
   markdown: { x: 380, y: 80, w: 720, h: 600 },
   context: { x: 1130, y: 80, w: 320, h: 400 },
@@ -114,11 +112,7 @@ function makeNode(
 }
 
 function getMarkdownPlacement(): { x: number; y: number } {
-  return findOpenCanvasPosition(
-    [...nodes.value.values()],
-    DEFAULT_POSITIONS.markdown.w,
-    DEFAULT_POSITIONS.markdown.h,
-  );
+  return findOpenCanvasPosition([...nodes.value.values()], DEFAULT_POSITIONS.markdown.w, DEFAULT_POSITIONS.markdown.h);
 }
 
 // ── Node ensure helpers ───────────────────────────────────────
@@ -243,11 +237,7 @@ function findExtAppNodeId(toolCallId: string): string | null {
   const legacyDirectId = `ext-app-${toolCallId}`;
   if (legacyDirectId !== directId && nodes.value.has(legacyDirectId)) return legacyDirectId;
   for (const [nodeId, node] of nodes.value.entries()) {
-    if (
-      node.type === 'mcp-app' &&
-      node.data.mode === 'ext-app' &&
-      node.data.toolCallId === toolCallId
-    ) {
+    if (node.type === 'mcp-app' && node.data.mode === 'ext-app' && node.data.toolCallId === toolCallId) {
       return nodeId;
     }
   }
@@ -301,28 +291,27 @@ function applyCanvasTheme(theme: string): void {
 }
 
 function isCanvasNodeType(value: unknown): value is CanvasNodeState['type'] {
-  return value === 'markdown'
-    || value === 'mcp-app'
-    || value === 'webpage'
-    || value === 'json-render'
-    || value === 'graph'
-    || value === 'prompt'
-    || value === 'response'
-    || value === 'status'
-    || value === 'context'
-    || value === 'ledger'
-    || value === 'trace'
-    || value === 'file'
-    || value === 'image'
-    || value === 'html'
-    || value === 'group';
+  return (
+    value === 'markdown' ||
+    value === 'mcp-app' ||
+    value === 'webpage' ||
+    value === 'json-render' ||
+    value === 'graph' ||
+    value === 'prompt' ||
+    value === 'response' ||
+    value === 'status' ||
+    value === 'context' ||
+    value === 'ledger' ||
+    value === 'trace' ||
+    value === 'file' ||
+    value === 'image' ||
+    value === 'html' ||
+    value === 'group'
+  );
 }
 
 function isCanvasEdgeType(value: unknown): value is CanvasEdge['type'] {
-  return value === 'relation'
-    || value === 'depends-on'
-    || value === 'flow'
-    || value === 'references';
+  return value === 'relation' || value === 'depends-on' || value === 'flow' || value === 'references';
 }
 
 function parseCanvasPosition(value: unknown): { x: number; y: number } | null {
@@ -353,10 +342,8 @@ function parseCanvasNode(raw: Record<string, unknown>): CanvasNodeState | null {
   const size = parseCanvasSize(raw.size);
   if (!position || !size) return null;
 
-  const dockPosition =
-    raw.dockPosition === 'left' || raw.dockPosition === 'right' ? raw.dockPosition : null;
-  const data =
-    raw.data && typeof raw.data === 'object' ? Object.fromEntries(Object.entries(raw.data)) : {};
+  const dockPosition = raw.dockPosition === 'left' || raw.dockPosition === 'right' ? raw.dockPosition : null;
+  const data = raw.data && typeof raw.data === 'object' ? Object.fromEntries(Object.entries(raw.data)) : {};
 
   return {
     id: raw.id,
@@ -383,9 +370,7 @@ function parseCanvasEdge(raw: Record<string, unknown>): CanvasEdge | null {
     to: raw.to,
     type: raw.type,
     ...(typeof raw.label === 'string' ? { label: raw.label } : {}),
-    ...(raw.style === 'solid' || raw.style === 'dashed' || raw.style === 'dotted'
-      ? { style: raw.style }
-      : {}),
+    ...(raw.style === 'solid' || raw.style === 'dashed' || raw.style === 'dotted' ? { style: raw.style } : {}),
     ...(raw.animated === true ? { animated: true } : {}),
   };
 }
@@ -429,8 +414,7 @@ function handleWorkbenchOpen(data: Record<string, unknown>): void {
   // H6: Guard — path must be a string for node ID stability
   if (typeof data.path !== 'string' || !data.path) return;
   const path = data.path;
-  const title =
-    (typeof data.title === 'string' ? data.title : '') || path.split('/').pop() || 'Untitled';
+  const title = (typeof data.title === 'string' ? data.title : '') || path.split('/').pop() || 'Untitled';
 
   ensureMarkdownNode(path, title);
   if (data.ledgerSummary) {
@@ -515,9 +499,7 @@ function handleAuxClose(data: Record<string, unknown>): void {
     } else {
       const existing = nodes.value.get(id);
       if (!existing) return;
-      const auxTabs = ((existing.data.auxTabs as Array<Record<string, unknown>>) ?? []).filter(
-        (t) => t.id !== data.id,
-      );
+      const auxTabs = ((existing.data.auxTabs as Array<Record<string, unknown>>) ?? []).filter((t) => t.id !== data.id);
       updateNodeData(id, { auxTabs });
     }
   }
@@ -587,8 +569,7 @@ function handleExtAppOpen(data: Record<string, unknown>): void {
 
 function handleExtAppUpdate(data: Record<string, unknown>): void {
   if (typeof data.toolCallId !== 'string' || !data.toolCallId) return;
-  const id =
-    findExtAppEventNodeId(data) ?? findOnlyPendingExtAppNodeId(data.serverName, data.toolName);
+  const id = findExtAppEventNodeId(data) ?? findOnlyPendingExtAppNodeId(data.serverName, data.toolName);
   if (!id) return;
   if (nodes.value.has(id)) {
     updateNodeData(id, { html: data.html });
@@ -597,8 +578,7 @@ function handleExtAppUpdate(data: Record<string, unknown>): void {
 
 function handleExtAppResult(data: Record<string, unknown>): void {
   if (typeof data.toolCallId !== 'string' || !data.toolCallId) return;
-  const id =
-    findExtAppEventNodeId(data) ?? findOnlyPendingExtAppNodeId(data.serverName, data.toolName);
+  const id = findExtAppEventNodeId(data) ?? findOnlyPendingExtAppNodeId(data.serverName, data.toolName);
   if (!id) return;
   if (nodes.value.has(id)) {
     if (data.success === false) {
@@ -611,8 +591,7 @@ function handleExtAppResult(data: Record<string, unknown>): void {
         success: typeof data.success === 'boolean' ? data.success : undefined,
         error: typeof data.error === 'string' ? data.error : undefined,
         content: typeof data.content === 'string' ? data.content : undefined,
-        detailedContent:
-          typeof data.detailedContent === 'string' ? data.detailedContent : undefined,
+        detailedContent: typeof data.detailedContent === 'string' ? data.detailedContent : undefined,
       }),
     });
   }
@@ -843,14 +822,14 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
   const shouldApplyViewport = !hasInitialServerLayout.value;
   hasInitialServerLayout.value = true;
 
-  const serverNodes = layout.nodes
-    .map(parseCanvasNode)
-    .filter((node): node is CanvasNodeState => node !== null);
+  const serverNodes = layout.nodes.map(parseCanvasNode).filter((node): node is CanvasNodeState => node !== null);
   const serverEdges = Array.isArray(layout.edges)
     ? layout.edges.map(parseCanvasEdge).filter((edge): edge is CanvasEdge => edge !== null)
     : Array.from(edges.value.values());
   const serverAnnotations = Array.isArray(layout.annotations)
-    ? layout.annotations.map(parseCanvasAnnotation).filter((annotation): annotation is CanvasAnnotation => annotation !== null)
+    ? layout.annotations
+        .map(parseCanvasAnnotation)
+        .filter((annotation): annotation is CanvasAnnotation => annotation !== null)
     : undefined;
   const nextViewport = layout.viewport
     ? {
@@ -861,12 +840,15 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
     : undefined;
 
   cancelViewportAnimation();
-  applyServerCanvasLayout({
-    ...(nextViewport ? { viewport: nextViewport } : {}),
-    nodes: serverNodes,
-    edges: serverEdges,
-    ...(serverAnnotations ? { annotations: serverAnnotations } : {}),
-  }, { applyViewport: shouldApplyViewport });
+  applyServerCanvasLayout(
+    {
+      ...(nextViewport ? { viewport: nextViewport } : {}),
+      nodes: serverNodes,
+      edges: serverEdges,
+      ...(serverAnnotations ? { annotations: serverAnnotations } : {}),
+    },
+    { applyViewport: shouldApplyViewport },
+  );
 
   syncAttentionFromSse({ event: 'canvas-layout-update', data });
 }
@@ -923,9 +905,7 @@ function handleThemeChanged(data: Record<string, unknown>): void {
 }
 
 function handleContextPinsChanged(data: Record<string, unknown>): void {
-  const nodeIds = Array.isArray(data.nodeIds)
-    ? data.nodeIds.filter((id): id is string => typeof id === 'string')
-    : [];
+  const nodeIds = Array.isArray(data.nodeIds) ? data.nodeIds.filter((id): id is string => typeof id === 'string') : [];
   replaceContextPinsFromServer(nodeIds);
   syncAttentionFromSse({ event: 'context-pins-changed', data });
 }
@@ -939,7 +919,9 @@ function handleAxStateChanged(): void {
   if (axRefreshTimer) clearTimeout(axRefreshTimer);
   axRefreshTimer = setTimeout(() => {
     axRefreshTimer = null;
-    void fetchAxSurfaceState().then((state) => { axSurfaceState.value = state; });
+    void fetchAxSurfaceState().then((state) => {
+      axSurfaceState.value = state;
+    });
   }, 150);
 }
 
@@ -951,11 +933,12 @@ function handleAxIntent(data: Record<string, unknown>): void {
   // be pruned if its `clear` frame were dropped. The server always sets it, so this
   // only rejects a malformed frame — keeping the backstop's guarantee real.
   if (
-    !intent
-    || typeof intent.id !== 'string'
-    || typeof intent.kind !== 'string'
-    || typeof intent.expiresAt !== 'number'
-  ) return;
+    !intent ||
+    typeof intent.id !== 'string' ||
+    typeof intent.kind !== 'string' ||
+    typeof intent.expiresAt !== 'number'
+  )
+    return;
   upsertIntent(intent);
 }
 

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: [