pmx-canvas 0.1.26 → 0.1.27

package/dist/types/json-render/catalog.d.ts

@@ -7,6 +7,160 @@
  */
 import { z } from 'zod';
 export declare const allComponentDefinitions: {
+    Sparkline: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            valueKey: z.ZodString;
+            color: z.ZodNullable<z.ZodString>;
+            fill: z.ZodNullable<z.ZodBoolean>;
+            showEndDot: z.ZodNullable<z.ZodBoolean>;
+            showMinMax: z.ZodNullable<z.ZodBoolean>;
+            showValue: z.ZodNullable<z.ZodBoolean>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "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.";
+        readonly example: {
+            readonly title: "Latency p95";
+            readonly data: readonly [{
+                readonly t: 0;
+                readonly ms: 120;
+            }, {
+                readonly t: 1;
+                readonly ms: 138;
+            }, {
+                readonly t: 2;
+                readonly ms: 117;
+            }, {
+                readonly t: 3;
+                readonly ms: 152;
+            }, {
+                readonly t: 4;
+                readonly ms: 109;
+            }];
+            readonly valueKey: "ms";
+            readonly color: null;
+            readonly fill: true;
+            readonly showEndDot: true;
+            readonly showMinMax: false;
+            readonly showValue: true;
+            readonly height: null;
+        };
+    };
+    DotPlot: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodString;
+            valueKey: z.ZodString;
+            color: z.ZodNullable<z.ZodString>;
+            sort: z.ZodNullable<z.ZodEnum<{
+                none: "none";
+                asc: "asc";
+                desc: "desc";
+            }>>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Cleveland dot plot: categorical labels down the Y axis, one dot per category positioned by value on X. Higher data-ink ratio than a bar chart for ranked comparison. Sorts descending by default.";
+        readonly example: {
+            readonly title: "Build time by package";
+            readonly data: readonly [{
+                readonly pkg: "core";
+                readonly seconds: 42;
+            }, {
+                readonly pkg: "client";
+                readonly seconds: 31;
+            }, {
+                readonly pkg: "mcp";
+                readonly seconds: 18;
+            }, {
+                readonly pkg: "cli";
+                readonly seconds: 9;
+            }];
+            readonly labelKey: "pkg";
+            readonly valueKey: "seconds";
+            readonly color: null;
+            readonly sort: "desc";
+            readonly height: null;
+        };
+    };
+    BulletChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodNullable<z.ZodString>;
+            valueKey: z.ZodString;
+            targetKey: z.ZodNullable<z.ZodString>;
+            rangesKey: z.ZodNullable<z.ZodString>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Stephen Few's bullet graph: a measure bar against grayscale qualitative bands with a target tick and per-row scale ticks. Compact KPI-vs-target display. Provide per-row `ranges` (ascending band thresholds) and `target`.";
+        readonly example: {
+            readonly title: "Quarterly KPIs vs target";
+            readonly data: readonly [{
+                readonly label: "Revenue";
+                readonly value: 84;
+                readonly target: 90;
+                readonly ranges: readonly [50, 75, 100];
+            }, {
+                readonly label: "NPS";
+                readonly value: 67;
+                readonly target: 60;
+                readonly ranges: readonly [40, 60, 80];
+            }, {
+                readonly label: "Uptime";
+                readonly value: 99;
+                readonly target: 99.9;
+                readonly ranges: readonly [95, 99, 100];
+            }];
+            readonly labelKey: "label";
+            readonly valueKey: "value";
+            readonly targetKey: "target";
+            readonly rangesKey: "ranges";
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    Slopegraph: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodString;
+            beforeKey: z.ZodString;
+            afterKey: z.ZodString;
+            beforeLabel: z.ZodNullable<z.ZodString>;
+            afterLabel: z.ZodNullable<z.ZodString>;
+            color: z.ZodNullable<z.ZodString>;
+            colorByDirection: z.ZodNullable<z.ZodBoolean>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly 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.";
+        readonly example: {
+            readonly title: "Coverage before/after refactor";
+            readonly data: readonly [{
+                readonly module: "auth";
+                readonly before: 62;
+                readonly after: 81;
+            }, {
+                readonly module: "canvas";
+                readonly before: 74;
+                readonly after: 78;
+            }, {
+                readonly module: "mcp";
+                readonly before: 55;
+                readonly after: 49;
+            }];
+            readonly labelKey: "module";
+            readonly beforeKey: "before";
+            readonly afterKey: "after";
+            readonly beforeLabel: "Before";
+            readonly afterLabel: "After";
+            readonly color: null;
+            readonly colorByDirection: null;
+            readonly height: null;
+        };
+    };
     AreaChart: {
         readonly props: z.ZodObject<{
             title: z.ZodNullable<z.ZodString>;
@@ -232,8 +386,18 @@ export declare const allComponentDefinitions: {
             }>>;
             color: z.ZodNullable<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            colorBy: z.ZodNullable<z.ZodEnum<{
+                value: "value";
+                series: "series";
+                category: "category";
+                none: "none";
+            }>>;
+            highlight: z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodEnum<{
+                max: "max";
+                min: "min";
+            }>]>>;
         }, z.core.$strip>;
-        readonly description: "Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields.";
+        readonly description: "Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields. Color encodes data, not decoration: by default one accent with the tallest bar highlighted (colorBy='series'). Set colorBy='category' only when the category itself is the message, 'value' to shade by magnitude, or 'none' for a flat fill.";
         readonly example: {
             readonly title: "Sales by region";
             readonly data: readonly [{
@@ -251,6 +415,8 @@ export declare const allComponentDefinitions: {
             readonly aggregate: null;
             readonly color: null;
             readonly height: null;
+            readonly colorBy: "series";
+            readonly highlight: "max";
         };
     };
     PieChart: {
@@ -288,13 +454,13 @@ export declare const allComponentDefinitions: {
             text: z.ZodString;
             variant: z.ZodNullable<z.ZodEnum<{
                 error: "error";
+                info: "info";
+                warning: "warning";
                 default: "default";
                 success: "success";
                 secondary: "secondary";
                 destructive: "destructive";
                 outline: "outline";
-                info: "info";
-                warning: "warning";
                 danger: "danger";
             }>>;
         }, z.core.$strip>;
@@ -304,6 +470,27 @@ export declare const allComponentDefinitions: {
             variant: string;
         };
     };
+    Button: {
+        props: z.ZodObject<{
+            label: z.ZodString;
+            disabled: z.ZodNullable<z.ZodBoolean>;
+            variant: z.ZodNullable<z.ZodEnum<{
+                success: "success";
+                secondary: "secondary";
+                destructive: "destructive";
+                outline: "outline";
+                danger: "danger";
+                primary: "primary";
+                ghost: "ghost";
+            }>>;
+        }, z.core.$strip>;
+        description: string;
+        example: {
+            label: string;
+            variant: string;
+        };
+        events: string[];
+    };
     Card: {
         props: z.ZodObject<{
             title: z.ZodNullable<z.ZodString>;
@@ -315,6 +502,7 @@ export declare const allComponentDefinitions: {
                 full: "full";
             }>>;
             centered: z.ZodNullable<z.ZodBoolean>;
+            className: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         slots: string[];
         description: string;
@@ -334,6 +522,7 @@ export declare const allComponentDefinitions: {
                 md: "md";
                 lg: "lg";
                 none: "none";
+                xl: "xl";
             }>>;
             align: z.ZodNullable<z.ZodEnum<{
                 start: "start";
@@ -348,6 +537,7 @@ export declare const allComponentDefinitions: {
                 between: "between";
                 around: "around";
             }>>;
+            className: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         slots: string[];
         description: string;
@@ -363,7 +553,9 @@ export declare const allComponentDefinitions: {
                 sm: "sm";
                 md: "md";
                 lg: "lg";
+                xl: "xl";
             }>>;
+            className: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>;
         slots: string[];
         description: string;
@@ -717,23 +909,6 @@ export declare const allComponentDefinitions: {
         events: string[];
         description: string;
     };
-    Button: {
-        props: z.ZodObject<{
-            label: z.ZodString;
-            variant: z.ZodNullable<z.ZodEnum<{
-                secondary: "secondary";
-                primary: "primary";
-                danger: "danger";
-            }>>;
-            disabled: z.ZodNullable<z.ZodBoolean>;
-        }, z.core.$strip>;
-        events: string[];
-        description: string;
-        example: {
-            label: string;
-            variant: string;
-        };
-    };
     Link: {
         props: z.ZodObject<{
             label: z.ZodString;

package/dist/types/json-render/charts/components.d.ts

@@ -11,6 +11,8 @@ import type { BaseComponentProps } from '@json-render/react';
 export declare const CHART_COLORS: string[];
 export type AggregateMode = 'sum' | 'count' | 'avg';
 export declare function processChartData(data: Record<string, unknown>[], xKey: string, yKey: string, aggregate: AggregateMode | null | undefined): Record<string, unknown>[];
+export type BarColorBy = 'series' | 'category' | 'value' | 'none';
+export type BarHighlight = number | 'max' | 'min' | null;
 export interface CartesianChartProps {
     title?: string | null;
     data: Record<string, unknown>[];
@@ -19,6 +21,10 @@ export interface CartesianChartProps {
     aggregate?: AggregateMode | null;
     color?: string | null;
     height?: number | null;
+    /** Bar-only: how bar fills are colored. Defaults to 'series'. Ignored by line charts. */
+    colorBy?: BarColorBy | null;
+    /** Bar-only: which bar gets the accent under colorBy='series'. Defaults to 'max'. */
+    highlight?: BarHighlight;
 }
 interface PieChartProps {
     title?: string | null;
@@ -59,6 +65,7 @@ export declare const legendMargin: {
 export declare function useChartFrameHeight(explicitHeight: number | null | undefined, fallbackHeight?: number): {
     frameRef: import("react").RefObject<HTMLDivElement | null>;
     height: number;
+    width: number;
 };
 /** Shared wrapper for cartesian charts (Line + Bar). */
 export declare function CartesianChart({ props, children, className, }: {

package/dist/types/json-render/charts/definitions.d.ts

@@ -53,8 +53,18 @@ export declare const chartComponentDefinitions: {
             }>>;
             color: z.ZodNullable<z.ZodString>;
             height: z.ZodNullable<z.ZodNumber>;
+            colorBy: z.ZodNullable<z.ZodEnum<{
+                value: "value";
+                series: "series";
+                category: "category";
+                none: "none";
+            }>>;
+            highlight: z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodEnum<{
+                max: "max";
+                min: "min";
+            }>]>>;
         }, z.core.$strip>;
-        readonly description: "Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields.";
+        readonly description: "Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields. Color encodes data, not decoration: by default one accent with the tallest bar highlighted (colorBy='series'). Set colorBy='category' only when the category itself is the message, 'value' to shade by magnitude, or 'none' for a flat fill.";
         readonly example: {
             readonly title: "Sales by region";
             readonly data: readonly [{
@@ -72,6 +82,8 @@ export declare const chartComponentDefinitions: {
             readonly aggregate: null;
             readonly color: null;
             readonly height: null;
+            readonly colorBy: "series";
+            readonly highlight: "max";
         };
     };
     readonly PieChart: {

package/dist/types/json-render/charts/tufte-components.d.ts

@@ -0,0 +1,65 @@
+/** @jsxImportSource react */
+/**
+ * Tufte primitive chart components for json-render.
+ *
+ * Word-sized / high-data-ink-ratio primitives that Recharts handles poorly:
+ * Sparkline, DotPlot (Cleveland), BulletChart (Few), and Slopegraph (Tufte).
+ * Hand-rolled SVG keeps the data-ink ratio high and avoids Recharts chartjunk.
+ *
+ * Lives alongside ./components.tsx and ./extra-components.tsx so the original
+ * chart sets stay unchanged; ./catalog.ts is the only merge surface.
+ */
+import type { BaseComponentProps } from '@json-render/react';
+interface SparklineProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    valueKey: string;
+    color?: string | null;
+    fill?: boolean | null;
+    showEndDot?: boolean | null;
+    showMinMax?: boolean | null;
+    showValue?: boolean | null;
+    height?: number | null;
+}
+declare function ChartSparkline({ props }: BaseComponentProps<SparklineProps>): import("react/jsx-runtime").JSX.Element;
+interface DotPlotProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    labelKey: string;
+    valueKey: string;
+    color?: string | null;
+    sort?: 'asc' | 'desc' | 'none' | null;
+    height?: number | null;
+}
+declare function ChartDotPlot({ props }: BaseComponentProps<DotPlotProps>): import("react/jsx-runtime").JSX.Element;
+interface BulletChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    labelKey?: string | null;
+    valueKey: string;
+    targetKey?: string | null;
+    rangesKey?: string | null;
+    color?: string | null;
+    height?: number | null;
+}
+declare function ChartBulletChart({ props }: BaseComponentProps<BulletChartProps>): import("react/jsx-runtime").JSX.Element;
+interface SlopegraphProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    labelKey: string;
+    beforeKey: string;
+    afterKey: string;
+    beforeLabel?: string | null;
+    afterLabel?: string | null;
+    color?: string | null;
+    colorByDirection?: boolean | null;
+    height?: number | null;
+}
+declare function ChartSlopegraph({ props }: BaseComponentProps<SlopegraphProps>): import("react/jsx-runtime").JSX.Element;
+export declare const tufteChartComponents: {
+    Sparkline: typeof ChartSparkline;
+    DotPlot: typeof ChartDotPlot;
+    BulletChart: typeof ChartBulletChart;
+    Slopegraph: typeof ChartSlopegraph;
+};
+export {};

package/dist/types/json-render/charts/tufte-definitions.d.ts

@@ -0,0 +1,164 @@
+/**
+ * Definitions for the Tufte primitive chart components in ./tufte-components.tsx.
+ *
+ * Kept separate from ./definitions.ts and ./extra-definitions.ts so the
+ * original chart catalogs stay untouched and the merge in ./catalog.ts is the
+ * only contact surface.
+ */
+import { z } from 'zod';
+export declare const tufteChartComponentDefinitions: {
+    readonly Sparkline: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            valueKey: z.ZodString;
+            color: z.ZodNullable<z.ZodString>;
+            fill: z.ZodNullable<z.ZodBoolean>;
+            showEndDot: z.ZodNullable<z.ZodBoolean>;
+            showMinMax: z.ZodNullable<z.ZodBoolean>;
+            showValue: z.ZodNullable<z.ZodBoolean>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "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.";
+        readonly example: {
+            readonly title: "Latency p95";
+            readonly data: readonly [{
+                readonly t: 0;
+                readonly ms: 120;
+            }, {
+                readonly t: 1;
+                readonly ms: 138;
+            }, {
+                readonly t: 2;
+                readonly ms: 117;
+            }, {
+                readonly t: 3;
+                readonly ms: 152;
+            }, {
+                readonly t: 4;
+                readonly ms: 109;
+            }];
+            readonly valueKey: "ms";
+            readonly color: null;
+            readonly fill: true;
+            readonly showEndDot: true;
+            readonly showMinMax: false;
+            readonly showValue: true;
+            readonly height: null;
+        };
+    };
+    readonly DotPlot: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodString;
+            valueKey: z.ZodString;
+            color: z.ZodNullable<z.ZodString>;
+            sort: z.ZodNullable<z.ZodEnum<{
+                none: "none";
+                asc: "asc";
+                desc: "desc";
+            }>>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Cleveland dot plot: categorical labels down the Y axis, one dot per category positioned by value on X. Higher data-ink ratio than a bar chart for ranked comparison. Sorts descending by default.";
+        readonly example: {
+            readonly title: "Build time by package";
+            readonly data: readonly [{
+                readonly pkg: "core";
+                readonly seconds: 42;
+            }, {
+                readonly pkg: "client";
+                readonly seconds: 31;
+            }, {
+                readonly pkg: "mcp";
+                readonly seconds: 18;
+            }, {
+                readonly pkg: "cli";
+                readonly seconds: 9;
+            }];
+            readonly labelKey: "pkg";
+            readonly valueKey: "seconds";
+            readonly color: null;
+            readonly sort: "desc";
+            readonly height: null;
+        };
+    };
+    readonly BulletChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodNullable<z.ZodString>;
+            valueKey: z.ZodString;
+            targetKey: z.ZodNullable<z.ZodString>;
+            rangesKey: z.ZodNullable<z.ZodString>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Stephen Few's bullet graph: a measure bar against grayscale qualitative bands with a target tick and per-row scale ticks. Compact KPI-vs-target display. Provide per-row `ranges` (ascending band thresholds) and `target`.";
+        readonly example: {
+            readonly title: "Quarterly KPIs vs target";
+            readonly data: readonly [{
+                readonly label: "Revenue";
+                readonly value: 84;
+                readonly target: 90;
+                readonly ranges: readonly [50, 75, 100];
+            }, {
+                readonly label: "NPS";
+                readonly value: 67;
+                readonly target: 60;
+                readonly ranges: readonly [40, 60, 80];
+            }, {
+                readonly label: "Uptime";
+                readonly value: 99;
+                readonly target: 99.9;
+                readonly ranges: readonly [95, 99, 100];
+            }];
+            readonly labelKey: "label";
+            readonly valueKey: "value";
+            readonly targetKey: "target";
+            readonly rangesKey: "ranges";
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    readonly Slopegraph: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            labelKey: z.ZodString;
+            beforeKey: z.ZodString;
+            afterKey: z.ZodString;
+            beforeLabel: z.ZodNullable<z.ZodString>;
+            afterLabel: z.ZodNullable<z.ZodString>;
+            color: z.ZodNullable<z.ZodString>;
+            colorByDirection: z.ZodNullable<z.ZodBoolean>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly 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.";
+        readonly example: {
+            readonly title: "Coverage before/after refactor";
+            readonly data: readonly [{
+                readonly module: "auth";
+                readonly before: 62;
+                readonly after: 81;
+            }, {
+                readonly module: "canvas";
+                readonly before: 74;
+                readonly after: 78;
+            }, {
+                readonly module: "mcp";
+                readonly before: 55;
+                readonly after: 49;
+            }];
+            readonly labelKey: "module";
+            readonly beforeKey: "before";
+            readonly afterKey: "after";
+            readonly beforeLabel: "Before";
+            readonly afterLabel: "After";
+            readonly color: null;
+            readonly colorByDirection: null;
+            readonly height: null;
+        };
+    };
+};

package/dist/types/json-render/directives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Custom json-render directives available in PMX Canvas specs.
+ *
+ * Directives let agent specs declare formatting/derivation ($format, $math,
+ * $concat, $count, $truncate, $pluralize, $join) instead of pre-formatting
+ * strings. Registered into the iframe renderer via <JSONUIProvider directives>.
+ */
+import type { DirectiveDefinition } from '@json-render/core';
+/**
+ * Directives enabled in the PMX Canvas viewer. `standardDirectives` covers the
+ * seven stateless directives. The $t i18n directive is intentionally omitted —
+ * it is a factory requiring locale config and PMX Canvas has no locale source.
+ */
+export declare const pmxCanvasDirectives: DirectiveDefinition[];
+/**
+ * True when a prop value is a render-time dynamic expression — a directive
+ * (`$format`/`$math`/…) or an existing binding (`$state`/`$item`/`$bindItem`/
+ * `$cond`/`$template`/`$computed`). These objects are resolved inside the
+ * renderer, so the server-side validators must leave them untouched instead of
+ * string-coercing them to `"[object Object]"` or rejecting them as the wrong
+ * primitive type.
+ */
+export declare function isDynamicPropValue(value: unknown): boolean;

package/dist/types/json-render/renderer/index.d.ts

@@ -13,5 +13,6 @@ declare global {
         };
         __PMX_CANVAS_JSON_RENDER_THEME__?: string;
         __PMX_CANVAS_JSON_RENDER_DISPLAY__?: string;
+        __PMX_CANVAS_JSON_RENDER_DEVTOOLS__?: boolean;
     }
 }

package/dist/types/json-render/server.d.ts

@@ -28,8 +28,23 @@ export interface GraphNodeInput {
     lineKey?: string;
     aggregate?: 'sum' | 'count' | 'avg';
     color?: string;
+    colorBy?: 'series' | 'category' | 'value' | 'none';
+    highlight?: number | 'max' | 'min' | null;
     barColor?: string;
     lineColor?: string;
+    labelKey?: string;
+    beforeKey?: string;
+    afterKey?: string;
+    beforeLabel?: string;
+    afterLabel?: string;
+    targetKey?: string;
+    rangesKey?: string;
+    sort?: 'asc' | 'desc' | 'none';
+    fill?: boolean;
+    showEndDot?: boolean;
+    showMinMax?: boolean;
+    showValue?: boolean;
+    colorByDirection?: boolean;
     height?: number;
     showLegend?: boolean;
     showLabels?: boolean;
@@ -47,16 +62,32 @@ export declare const GRAPH_NODE_SIZE: {
     width: number;
     height: number;
 };
-export type GraphChartType = 'LineChart' | 'BarChart' | 'PieChart' | 'AreaChart' | 'ScatterChart' | 'RadarChart' | 'StackedBarChart' | 'ComposedChart';
+export type GraphChartType = 'LineChart' | 'BarChart' | 'PieChart' | 'AreaChart' | 'ScatterChart' | 'RadarChart' | 'StackedBarChart' | 'ComposedChart' | 'Sparkline' | 'DotPlot' | 'BulletChart' | 'Slopegraph';
 export declare function inferJsonRenderNodeTitle(spec: JsonRenderSpec, fallback?: string): string;
 export declare function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpec;
 export declare function normalizeGraphType(value: string): GraphChartType;
 export declare function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec;
 export declare function buildGraphConfig(input: GraphNodeInput): Record<string, unknown>;
+/** The minimal spec a streaming json-render node starts from before any patches. */
+export declare function emptyStreamingSpec(): JsonRenderSpec;
+/**
+ * Apply a batch of SpecStream patches to the current spec, accumulating the
+ * result. The canvas is the source of truth — patches are applied server-side
+ * and the browser only renders the current accumulated spec, so there is no
+ * client-side reconciliation. Tolerant by design: malformed or inapplicable
+ * patches are skipped and counted, never thrown, so a partial stream keeps
+ * building toward the final spec.
+ */
+export declare function applyJsonRenderStreamPatches(currentSpec: JsonRenderSpec, items: unknown[]): {
+    spec: JsonRenderSpec;
+    applied: number;
+    skipped: number;
+};
 export declare function createJsonRenderNodeData(nodeId: string, title: string, spec: JsonRenderSpec, extra?: Record<string, unknown>): Record<string, unknown>;
 export declare function buildJsonRenderViewerHtml(options: {
     title: string;
     spec: JsonRenderSpec;
     theme?: 'dark' | 'light' | 'high-contrast';
     display?: 'expanded';
+    devtools?: boolean;
 }): Promise<string>;