pmx-canvas 0.1.0

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

@@ -0,0 +1,54 @@
+/** @jsxImportSource react */
+/**
+ * Chart component implementations for json-render.
+ *
+ * Built on Recharts, following the same pattern as the Vercel json-render
+ * chat example. Each component receives BaseComponentProps<T> and renders
+ * a responsive chart inside a styled container.
+ */
+import type { ReactNode } from 'react';
+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 interface CartesianChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    xKey: string;
+    yKey: string;
+    aggregate?: AggregateMode | null;
+    color?: string | null;
+    height?: number | null;
+}
+interface PieChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    nameKey: string;
+    valueKey: string;
+    height?: number | null;
+}
+export declare const axisStyle: {
+    fontSize: number;
+    fill: string;
+};
+export declare const tooltipStyle: {
+    backgroundColor: string;
+    border: string;
+    borderRadius: string;
+    color: string;
+    fontSize: number;
+};
+/** Shared wrapper for cartesian charts (Line + Bar). */
+export declare function CartesianChart({ props, children, }: {
+    props: CartesianChartProps;
+    children: (data: Record<string, unknown>[]) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ChartLineChart({ props }: BaseComponentProps<CartesianChartProps>): import("react/jsx-runtime").JSX.Element;
+declare function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>): import("react/jsx-runtime").JSX.Element;
+declare function ChartPieChart({ props }: BaseComponentProps<PieChartProps>): import("react/jsx-runtime").JSX.Element;
+export declare const chartComponents: {
+    LineChart: typeof ChartLineChart;
+    BarChart: typeof ChartBarChart;
+    PieChart: typeof ChartPieChart;
+};
+export {};

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

@@ -0,0 +1,103 @@
+/**
+ * Chart component definitions for json-render catalogs.
+ *
+ * Provides LineChart, BarChart, and PieChart components built on Recharts.
+ * Mirrors the chart definitions from the Vercel json-render chat example.
+ */
+import { z } from 'zod';
+export declare const chartComponentDefinitions: {
+    readonly LineChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            yKey: z.ZodString;
+            aggregate: z.ZodNullable<z.ZodEnum<{
+                count: "count";
+                sum: "sum";
+                avg: "avg";
+            }>>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Line chart for time-series or trend data. Provide data as an array of objects with xKey and yKey fields.";
+        readonly example: {
+            readonly title: "Weekly trend";
+            readonly data: readonly [{
+                readonly day: "Mon";
+                readonly value: 10;
+            }, {
+                readonly day: "Tue";
+                readonly value: 25;
+            }, {
+                readonly day: "Wed";
+                readonly value: 18;
+            }];
+            readonly xKey: "day";
+            readonly yKey: "value";
+            readonly aggregate: null;
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    readonly BarChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            yKey: z.ZodString;
+            aggregate: z.ZodNullable<z.ZodEnum<{
+                count: "count";
+                sum: "sum";
+                avg: "avg";
+            }>>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Bar chart for comparing categories. Provide data as an array of objects with xKey and yKey fields.";
+        readonly example: {
+            readonly title: "Sales by region";
+            readonly data: readonly [{
+                readonly region: "North";
+                readonly sales: 120;
+            }, {
+                readonly region: "South";
+                readonly sales: 98;
+            }, {
+                readonly region: "East";
+                readonly sales: 150;
+            }];
+            readonly xKey: "region";
+            readonly yKey: "sales";
+            readonly aggregate: null;
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    readonly PieChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            nameKey: z.ZodString;
+            valueKey: z.ZodString;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Pie chart for showing proportions. Provide data as an array of objects with nameKey and valueKey fields.";
+        readonly example: {
+            readonly title: "Market share";
+            readonly data: readonly [{
+                readonly name: "Product A";
+                readonly share: 45;
+            }, {
+                readonly name: "Product B";
+                readonly share: 30;
+            }, {
+                readonly name: "Product C";
+                readonly share: 25;
+            }];
+            readonly nameKey: "name";
+            readonly valueKey: "share";
+            readonly height: null;
+        };
+    };
+};

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

@@ -0,0 +1,58 @@
+/** @jsxImportSource react */
+/**
+ * Additional chart components for json-render.
+ *
+ * Lives alongside ./components.tsx so the original chart set stays
+ * unchanged and the merge point in ./catalog.ts is the only contact
+ * surface with the upstream `@json-render/*` packages.
+ */
+import type { BaseComponentProps } from '@json-render/react';
+import { type CartesianChartProps } from './components';
+type AreaChartProps = CartesianChartProps;
+declare function ChartAreaChart({ props }: BaseComponentProps<AreaChartProps>): import("react/jsx-runtime").JSX.Element;
+interface ScatterChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    xKey: string;
+    yKey: string;
+    zKey?: string | null;
+    color?: string | null;
+    height?: number | null;
+}
+declare function ChartScatterChart({ props }: BaseComponentProps<ScatterChartProps>): import("react/jsx-runtime").JSX.Element;
+interface RadarChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    axisKey: string;
+    metrics: string[];
+    height?: number | null;
+}
+declare function ChartRadarChart({ props }: BaseComponentProps<RadarChartProps>): import("react/jsx-runtime").JSX.Element;
+interface StackedBarChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: string[];
+    aggregate?: 'sum' | 'count' | 'avg' | null;
+    height?: number | null;
+}
+declare function ChartStackedBarChart({ props }: BaseComponentProps<StackedBarChartProps>): import("react/jsx-runtime").JSX.Element;
+interface ComposedChartProps {
+    title?: string | null;
+    data: Record<string, unknown>[];
+    xKey: string;
+    barKey: string;
+    lineKey: string;
+    barColor?: string | null;
+    lineColor?: string | null;
+    height?: number | null;
+}
+declare function ChartComposedChart({ props }: BaseComponentProps<ComposedChartProps>): import("react/jsx-runtime").JSX.Element;
+export declare const extraChartComponents: {
+    AreaChart: typeof ChartAreaChart;
+    ScatterChart: typeof ChartScatterChart;
+    RadarChart: typeof ChartRadarChart;
+    StackedBarChart: typeof ChartStackedBarChart;
+    ComposedChart: typeof ChartComposedChart;
+};
+export {};

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

@@ -0,0 +1,181 @@
+/**
+ * Definitions for the extra chart components in ./extra-components.tsx.
+ *
+ * Kept separate from ./definitions.ts so the original chart catalog stays
+ * untouched and the merge in ./catalog.ts is the only contact surface.
+ */
+import { z } from 'zod';
+export declare const extraChartComponentDefinitions: {
+    readonly AreaChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            yKey: z.ZodString;
+            aggregate: z.ZodNullable<z.ZodEnum<{
+                count: "count";
+                sum: "sum";
+                avg: "avg";
+            }>>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Area chart for cumulative or trend data. Same shape as LineChart but draws a filled area under the line.";
+        readonly example: {
+            readonly title: "Daily signups";
+            readonly data: readonly [{
+                readonly day: "Mon";
+                readonly value: 12;
+            }, {
+                readonly day: "Tue";
+                readonly value: 24;
+            }, {
+                readonly day: "Wed";
+                readonly value: 19;
+            }, {
+                readonly day: "Thu";
+                readonly value: 31;
+            }];
+            readonly xKey: "day";
+            readonly yKey: "value";
+            readonly aggregate: null;
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    readonly ScatterChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            yKey: z.ZodString;
+            zKey: z.ZodNullable<z.ZodString>;
+            color: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Scatter plot for correlation or distribution. Both axes are numeric; optional zKey scales point size.";
+        readonly example: {
+            readonly title: "Latency vs payload size";
+            readonly data: readonly [{
+                readonly size: 10;
+                readonly latency: 25;
+            }, {
+                readonly size: 40;
+                readonly latency: 80;
+            }, {
+                readonly size: 80;
+                readonly latency: 110;
+            }, {
+                readonly size: 120;
+                readonly latency: 180;
+            }];
+            readonly xKey: "size";
+            readonly yKey: "latency";
+            readonly zKey: null;
+            readonly color: null;
+            readonly height: null;
+        };
+    };
+    readonly RadarChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            axisKey: z.ZodString;
+            metrics: z.ZodArray<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Radar chart for comparing multiple metrics across categories. Each metric in `metrics` is plotted as its own polygon.";
+        readonly example: {
+            readonly title: "Skill comparison";
+            readonly data: readonly [{
+                readonly skill: "Speed";
+                readonly alice: 80;
+                readonly bob: 60;
+            }, {
+                readonly skill: "Accuracy";
+                readonly alice: 70;
+                readonly bob: 90;
+            }, {
+                readonly skill: "Stamina";
+                readonly alice: 85;
+                readonly bob: 75;
+            }];
+            readonly axisKey: "skill";
+            readonly metrics: readonly ["alice", "bob"];
+            readonly height: null;
+        };
+    };
+    readonly StackedBarChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            series: z.ZodArray<z.ZodString>;
+            aggregate: z.ZodNullable<z.ZodEnum<{
+                count: "count";
+                sum: "sum";
+                avg: "avg";
+            }>>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Stacked bar chart for compositional data. Each entry in `series` is plotted as its own bar segment per x value.";
+        readonly example: {
+            readonly title: "Revenue by region";
+            readonly data: readonly [{
+                readonly quarter: "Q1";
+                readonly north: 30;
+                readonly south: 18;
+                readonly east: 22;
+            }, {
+                readonly quarter: "Q2";
+                readonly north: 42;
+                readonly south: 25;
+                readonly east: 28;
+            }, {
+                readonly quarter: "Q3";
+                readonly north: 38;
+                readonly south: 30;
+                readonly east: 26;
+            }];
+            readonly xKey: "quarter";
+            readonly series: readonly ["north", "south", "east"];
+            readonly aggregate: null;
+            readonly height: null;
+        };
+    };
+    readonly ComposedChart: {
+        readonly props: z.ZodObject<{
+            title: z.ZodNullable<z.ZodString>;
+            data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+            xKey: z.ZodString;
+            barKey: z.ZodString;
+            lineKey: z.ZodString;
+            barColor: z.ZodNullable<z.ZodString>;
+            lineColor: z.ZodNullable<z.ZodString>;
+            height: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        readonly description: "Combined bar + line chart for paired metrics (e.g. counts + a derived rate) on the same axis.";
+        readonly example: {
+            readonly title: "Visits and conversion";
+            readonly data: readonly [{
+                readonly day: "Mon";
+                readonly visits: 120;
+                readonly conversion: 4.2;
+            }, {
+                readonly day: "Tue";
+                readonly visits: 145;
+                readonly conversion: 3.8;
+            }, {
+                readonly day: "Wed";
+                readonly visits: 160;
+                readonly conversion: 5.1;
+            }];
+            readonly xKey: "day";
+            readonly barKey: "visits";
+            readonly lineKey: "conversion";
+            readonly barColor: null;
+            readonly lineColor: null;
+            readonly height: null;
+        };
+    };
+};

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

@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+/**
+ * json-render iframe renderer entry point.
+ *
+ * Runs inside a pmx-canvas iframe and reads the normalized json-render spec
+ * from an inline global injected by the server-side viewer route.
+ */
+import type { Spec } from '@json-render/core';
+declare global {
+    interface Window {
+        __PMX_CANVAS_JSON_RENDER_SPEC__?: Spec & {
+            state?: Record<string, unknown>;
+        };
+        __PMX_CANVAS_JSON_RENDER_THEME__?: string;
+    }
+}

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

@@ -0,0 +1,46 @@
+export declare const schema: import("@json-render/core").Schema<{
+    spec: import("@json-render/core").SchemaType<"object", {
+        root: import("@json-render/core").SchemaType<"string", unknown>;
+        elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
+            type: import("@json-render/core").SchemaType<"ref", string>;
+            props: import("@json-render/core").SchemaType<"propsOf", string>;
+            children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            visible: import("@json-render/core").SchemaType<"any", unknown>;
+        }>>;
+    }>;
+    catalog: import("@json-render/core").SchemaType<"object", {
+        components: import("@json-render/core").SchemaType<"map", {
+            props: import("@json-render/core").SchemaType<"zod", unknown>;
+            slots: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            description: import("@json-render/core").SchemaType<"string", unknown>;
+            example: import("@json-render/core").SchemaType<"any", unknown>;
+        }>;
+        actions: import("@json-render/core").SchemaType<"map", {
+            params: import("@json-render/core").SchemaType<"zod", unknown>;
+            description: import("@json-render/core").SchemaType<"string", unknown>;
+        }>;
+    }>;
+}>;
+export declare const elementTreeSchema: import("@json-render/core").Schema<{
+    spec: import("@json-render/core").SchemaType<"object", {
+        root: import("@json-render/core").SchemaType<"string", unknown>;
+        elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
+            type: import("@json-render/core").SchemaType<"ref", string>;
+            props: import("@json-render/core").SchemaType<"propsOf", string>;
+            children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            visible: import("@json-render/core").SchemaType<"any", unknown>;
+        }>>;
+    }>;
+    catalog: import("@json-render/core").SchemaType<"object", {
+        components: import("@json-render/core").SchemaType<"map", {
+            props: import("@json-render/core").SchemaType<"zod", unknown>;
+            slots: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            description: import("@json-render/core").SchemaType<"string", unknown>;
+            example: import("@json-render/core").SchemaType<"any", unknown>;
+        }>;
+        actions: import("@json-render/core").SchemaType<"map", {
+            params: import("@json-render/core").SchemaType<"zod", unknown>;
+            description: import("@json-render/core").SchemaType<"string", unknown>;
+        }>;
+    }>;
+}>;

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

@@ -0,0 +1,55 @@
+export interface JsonRenderSpec {
+    root: string;
+    elements: Record<string, unknown>;
+    state?: Record<string, unknown>;
+}
+export interface JsonRenderNodeInput {
+    title: string;
+    spec: unknown;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+export interface GraphNodeInput {
+    title?: string;
+    graphType: string;
+    data: Array<Record<string, unknown>>;
+    xKey?: string;
+    yKey?: string;
+    zKey?: string;
+    nameKey?: string;
+    valueKey?: string;
+    axisKey?: string;
+    metrics?: string[];
+    series?: string[];
+    barKey?: string;
+    lineKey?: string;
+    aggregate?: 'sum' | 'count' | 'avg';
+    color?: string;
+    barColor?: string;
+    lineColor?: string;
+    height?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    heightPx?: number;
+}
+export declare const JSON_RENDER_NODE_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const GRAPH_NODE_SIZE: {
+    width: number;
+    height: number;
+};
+export type GraphChartType = 'LineChart' | 'BarChart' | 'PieChart' | 'AreaChart' | 'ScatterChart' | 'RadarChart' | 'StackedBarChart' | 'ComposedChart';
+export declare function normalizeAndValidateJsonRenderSpec(spec: unknown): JsonRenderSpec;
+export declare function normalizeGraphType(value: string): GraphChartType;
+export declare function buildGraphSpec(input: GraphNodeInput): JsonRenderSpec;
+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';
+}): Promise<string>;

package/dist/types/mcp/server.d.ts

@@ -0,0 +1,22 @@
+/**
+ * PMX Canvas MCP Server
+ *
+ * Exposes the canvas as an MCP tool server so any MCP-capable agent
+ * (Claude Code, Codex, Cursor, Windsurf, pi, etc.) can control the
+ * canvas with zero configuration beyond adding the server to their config.
+ *
+ * Auto-starts the HTTP server and opens the browser on first tool call.
+ *
+ * Usage in agent MCP config:
+ * ```json
+ * {
+ *   "mcpServers": {
+ *     "canvas": {
+ *       "command": "bunx",
+ *       "args": ["pmx-canvas", "--mcp"]
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare function startMcpServer(): Promise<void>;

package/dist/types/server/agent-context.d.ts

@@ -0,0 +1,21 @@
+import type { CanvasNodeState } from './canvas-state.js';
+export interface AgentContextNode {
+    id: string;
+    type: CanvasNodeState['type'];
+    title: string | null;
+    content: string | null;
+    metadata?: Record<string, unknown>;
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+interface AgentContextOptions {
+    defaultTextLength?: number;
+    webpageTextLength?: number;
+    includePosition?: boolean;
+}
+export declare function summarizeNodeForAgentContext(node: CanvasNodeState, options?: AgentContextOptions): string;
+export declare function serializeNodeForAgentContext(node: CanvasNodeState, options?: AgentContextOptions): AgentContextNode;
+export declare function buildAgentContextPreamble(nodes: CanvasNodeState[], options?: AgentContextOptions): string;
+export {};

package/dist/types/server/artifact-paths.d.ts

@@ -0,0 +1,3 @@
+export declare function getWorkspaceRoot(cwd?: string): string;
+export declare function getArtifactsDir(cwd?: string): string;
+export declare function ensureArtifactsDir(cwd?: string): string;