@braincrew-lab/langchain-canvas 0.2.0 → 0.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ChartRenderer-AAWVGKV5.js → ChartRenderer-JGRJ23OB.js} +10 -20
- package/dist/{DocumentRenderer-NBRBPYU6.js → DocumentRenderer-ZQDQMX7X.js} +8 -4
- package/dist/FileRenderer-3ZHNORZJ.js +39 -0
- package/dist/SlidesRenderer-56R3TNWN.js +496 -0
- package/dist/{TableRenderer-VKDD3CB6.js → TableRenderer-3ESF577F.js} +49 -193
- package/dist/chunk-7T5DRR3F.js +109 -0
- package/dist/{chunk-S54GJDSJ.js → chunk-EHW446VF.js} +62 -47
- package/dist/chunk-FTNRRJ3K.js +13 -0
- package/dist/chunk-IFNRLN4Y.js +137 -0
- package/dist/{chunk-UL5F66PN.js → chunk-K2UZAYW2.js} +1 -1
- package/dist/chunk-SGOPRUQ4.js +182 -0
- package/dist/formula-27TCEZI5.js +2 -0
- package/dist/formula-cli.d.ts +2 -0
- package/dist/formula-cli.js +37 -0
- package/dist/index.d.ts +201 -289
- package/dist/index.js +393 -860
- package/dist/langgraph/index.d.ts +68 -0
- package/dist/langgraph/index.js +111 -0
- package/dist/styles.css +125 -100
- package/dist/types-BfGP9R2I.d.ts +324 -0
- package/package.json +40 -5
- package/dist/PdfRenderer-DPQT4E7O.js +0 -97
- package/dist/SlidesRenderer-6ZGHXTQX.js +0 -877
package/dist/index.d.ts
CHANGED
|
@@ -1,278 +1,9 @@
|
|
|
1
|
+
import { A as Artifact, a as CanvasEvent, E as ElementSelection, S as StreamEvent, C as CanvasTransport, F as FileData, b as SlidesData, T as TableData, D as DocumentData, c as ChartData, H as HtmlData } from './types-BfGP9R2I.js';
|
|
2
|
+
export { d as ArtifactStatus, e as CanvasAppend, f as CanvasCommit, g as CanvasCreate, h as CanvasNodePatch, i as CanvasPatch, j as CanvasReplace, k as CanvasStatus, l as ChartArtifact, m as ChartOptions, n as ChartSeries, o as ChatEvent, p as DocumentArtifact, q as DoneEvent, r as ErrorEvent, s as FileArtifact, t as HtmlArtifact, K as KnownArtifact, M as MessageDelta, u as MessageEnd, v as Slide, w as SlideElement, x as SlidePage, y as SlidesArtifact, z as TableArtifact, B as TableColumn, G as ToolEnd, I as ToolStart, J as TransportRequest, L as isCanvasEvent, N as isChatEvent } from './types-BfGP9R2I.js';
|
|
1
3
|
import * as react from 'react';
|
|
2
4
|
import { ReactNode, ComponentType } from 'react';
|
|
3
5
|
import { StoreApi } from 'zustand/vanilla';
|
|
4
6
|
|
|
5
|
-
/**
|
|
6
|
-
* Artifact data shapes — mirror of `langchain_canvas/protocol/artifacts.py`.
|
|
7
|
-
*
|
|
8
|
-
* An `Artifact` is transport-agnostic: `{ id, type, title, version, status,
|
|
9
|
-
* data }`. `type` is a registry key resolved to a React component; `data` is the
|
|
10
|
-
* type-specific payload that component reads. Keep this file in lockstep with
|
|
11
|
-
* the Python module — a field here must exist there, and vice versa.
|
|
12
|
-
*/
|
|
13
|
-
type ArtifactStatus = "streaming" | "complete" | "error";
|
|
14
|
-
interface Artifact<TData = unknown> {
|
|
15
|
-
/** Stable identity — the reconciliation key. */
|
|
16
|
-
id: string;
|
|
17
|
-
/** Registry key: "document" | "chart" | ... */
|
|
18
|
-
type: string;
|
|
19
|
-
/** Shown in the canvas header / tab. */
|
|
20
|
-
title: string;
|
|
21
|
-
/** 1-based; bumped on every `canvas.replace`. */
|
|
22
|
-
version: number;
|
|
23
|
-
status: ArtifactStatus;
|
|
24
|
-
data: TData;
|
|
25
|
-
meta?: Record<string, unknown>;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* The base substrate: raw HTML, rendered in a sandboxed iframe. Everything a
|
|
29
|
-
* canvas can show is ultimately HTML; `document` / `chart` / `table` are
|
|
30
|
-
* structured conveniences the SDK renders for you, while `html` lets an agent
|
|
31
|
-
* emit an arbitrary self-contained page (the Claude-Artifacts / Genspark model).
|
|
32
|
-
*/
|
|
33
|
-
interface HtmlData {
|
|
34
|
-
html: string;
|
|
35
|
-
}
|
|
36
|
-
interface DocumentData {
|
|
37
|
-
format: "markdown";
|
|
38
|
-
content: string;
|
|
39
|
-
}
|
|
40
|
-
interface ChartSeries {
|
|
41
|
-
/** Column in `ChartData.rows` to plot. */
|
|
42
|
-
key: string;
|
|
43
|
-
label?: string;
|
|
44
|
-
color?: string;
|
|
45
|
-
}
|
|
46
|
-
interface ChartOptions {
|
|
47
|
-
stacked?: boolean;
|
|
48
|
-
yLabel?: string;
|
|
49
|
-
/** Chart title shown above the plot. */
|
|
50
|
-
title?: string;
|
|
51
|
-
/** Per-slice colors for pie charts, index-aligned to `rows`. */
|
|
52
|
-
colors?: string[];
|
|
53
|
-
}
|
|
54
|
-
interface ChartData {
|
|
55
|
-
chart: "line" | "bar" | "area" | "pie";
|
|
56
|
-
/** Tidy/long-form rows, consumed directly by the charting library. */
|
|
57
|
-
rows: Array<Record<string, string | number>>;
|
|
58
|
-
/** Category / x-axis field. */
|
|
59
|
-
xKey: string;
|
|
60
|
-
series: ChartSeries[];
|
|
61
|
-
options?: ChartOptions;
|
|
62
|
-
/**
|
|
63
|
-
* Optional raw ECharts `option`. When present it's rendered verbatim — an
|
|
64
|
-
* escape hatch for agents/apps that already produce a full ECharts config
|
|
65
|
-
* (the tidy `rows`/`series` model is ignored, and inline editing is disabled).
|
|
66
|
-
*/
|
|
67
|
-
echartsOption?: Record<string, unknown>;
|
|
68
|
-
}
|
|
69
|
-
interface TableColumn {
|
|
70
|
-
key: string;
|
|
71
|
-
label?: string;
|
|
72
|
-
align?: "left" | "right" | "center";
|
|
73
|
-
}
|
|
74
|
-
interface TableData {
|
|
75
|
-
columns: TableColumn[];
|
|
76
|
-
rows: Array<Record<string, string | number>>;
|
|
77
|
-
/**
|
|
78
|
-
* Opaque spreadsheet state (Fortune-sheet sheets) once the user has edited the
|
|
79
|
-
* grid — carries merges, per-cell fonts/formats, and formulas that the simple
|
|
80
|
-
* columns/rows shape can't hold. Present after the first interactive edit;
|
|
81
|
-
* exporters prefer it over columns/rows.
|
|
82
|
-
*/
|
|
83
|
-
sheet?: Array<Record<string, unknown>>;
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* A PDF shown in the browser's native viewer. `src` is a `data:application/pdf`
|
|
87
|
-
* URL (self-contained, the common case for agent/file-sourced PDFs), a `blob:`
|
|
88
|
-
* URL, or an `https:` URL the host is allowed to frame.
|
|
89
|
-
*/
|
|
90
|
-
interface PdfData {
|
|
91
|
-
src: string;
|
|
92
|
-
/** Optional original filename, used for the download attribute. */
|
|
93
|
-
filename?: string;
|
|
94
|
-
}
|
|
95
|
-
/** A freely-positioned element on a "blank" slide (percent geometry, 0–100). */
|
|
96
|
-
interface SlideElement {
|
|
97
|
-
id: string;
|
|
98
|
-
type: "text" | "image" | "shape";
|
|
99
|
-
x: number;
|
|
100
|
-
y: number;
|
|
101
|
-
w: number;
|
|
102
|
-
h: number;
|
|
103
|
-
text?: string;
|
|
104
|
-
src?: string;
|
|
105
|
-
fontSize?: number;
|
|
106
|
-
bold?: boolean;
|
|
107
|
-
color?: string;
|
|
108
|
-
align?: "left" | "center" | "right";
|
|
109
|
-
/** Shape kind for `type: "shape"`. */
|
|
110
|
-
shape?: "rect" | "ellipse" | "line";
|
|
111
|
-
/** Fill (rect/ellipse) or stroke (line) color for a shape. */
|
|
112
|
-
fill?: string;
|
|
113
|
-
/** Editor-only grouping: elements sharing a `group` id select and move as
|
|
114
|
-
* one. Purely additive — exporters and the presenter ignore it. */
|
|
115
|
-
group?: string;
|
|
116
|
-
}
|
|
117
|
-
interface Slide {
|
|
118
|
-
/** title · content (bullets) · section · image · two-column · blank (free canvas). */
|
|
119
|
-
layout?: "title" | "content" | "section" | "image" | "two-column" | "blank";
|
|
120
|
-
/** Freely-positioned elements for the "blank" layout. */
|
|
121
|
-
elements?: SlideElement[];
|
|
122
|
-
title?: string;
|
|
123
|
-
subtitle?: string;
|
|
124
|
-
bullets?: string[];
|
|
125
|
-
/** Right-hand bullets for the "two-column" layout. */
|
|
126
|
-
bullets2?: string[];
|
|
127
|
-
/** Image (data: URL or https URL) for the "image" layout. */
|
|
128
|
-
image?: string;
|
|
129
|
-
/** Slide background color (hex). */
|
|
130
|
-
background?: string;
|
|
131
|
-
/** Slide text color (hex). */
|
|
132
|
-
textColor?: string;
|
|
133
|
-
/** Theme accent color (hex) — used by quick layouts and new shapes for rules,
|
|
134
|
-
* section numbers, and stats. Set by the theme presets. */
|
|
135
|
-
accent?: string;
|
|
136
|
-
/** Font stack for the slide's text (system fonts only, no external loads).
|
|
137
|
-
* Set by the theme presets; cascades to every element. */
|
|
138
|
-
fontFamily?: string;
|
|
139
|
-
/** Speaker notes (not shown on the slide; exported to the .pptx notes pane). */
|
|
140
|
-
notes?: string;
|
|
141
|
-
/** Content padding as a percent of the slide width (a safe margin around the
|
|
142
|
-
* free canvas). Applied in the editor, present view, thumbnails, and export. */
|
|
143
|
-
padding?: number;
|
|
144
|
-
}
|
|
145
|
-
interface SlidesData {
|
|
146
|
-
slides: Slide[];
|
|
147
|
-
}
|
|
148
|
-
type HtmlArtifact = Artifact<HtmlData> & {
|
|
149
|
-
type: "html";
|
|
150
|
-
};
|
|
151
|
-
type DocumentArtifact = Artifact<DocumentData> & {
|
|
152
|
-
type: "document";
|
|
153
|
-
};
|
|
154
|
-
type ChartArtifact = Artifact<ChartData> & {
|
|
155
|
-
type: "chart";
|
|
156
|
-
};
|
|
157
|
-
type TableArtifact = Artifact<TableData> & {
|
|
158
|
-
type: "table";
|
|
159
|
-
};
|
|
160
|
-
type SlidesArtifact = Artifact<SlidesData> & {
|
|
161
|
-
type: "slides";
|
|
162
|
-
};
|
|
163
|
-
type PdfArtifact = Artifact<PdfData> & {
|
|
164
|
-
type: "pdf";
|
|
165
|
-
};
|
|
166
|
-
type KnownArtifact = HtmlArtifact | DocumentArtifact | ChartArtifact | TableArtifact | SlidesArtifact | PdfArtifact;
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Canvas Wire Protocol v1 — event envelopes. Mirror of
|
|
170
|
-
* `langchain_canvas/protocol/events.py`. Every SSE frame is one `StreamEvent`,
|
|
171
|
-
* discriminated by `type`. See `docs/02-protocol.md` for the specification.
|
|
172
|
-
*/
|
|
173
|
-
|
|
174
|
-
interface MessageDelta {
|
|
175
|
-
type: "message.delta";
|
|
176
|
-
messageId: string;
|
|
177
|
-
text: string;
|
|
178
|
-
}
|
|
179
|
-
interface MessageEnd {
|
|
180
|
-
type: "message.end";
|
|
181
|
-
messageId: string;
|
|
182
|
-
}
|
|
183
|
-
interface ToolStart {
|
|
184
|
-
type: "tool.start";
|
|
185
|
-
toolCallId: string;
|
|
186
|
-
name: string;
|
|
187
|
-
}
|
|
188
|
-
interface ToolEnd {
|
|
189
|
-
type: "tool.end";
|
|
190
|
-
toolCallId: string;
|
|
191
|
-
ok: boolean;
|
|
192
|
-
}
|
|
193
|
-
interface CanvasCreate {
|
|
194
|
-
type: "canvas.create";
|
|
195
|
-
artifact: Artifact;
|
|
196
|
-
}
|
|
197
|
-
/** Append `text` to the string at `data.<path>` (e.g. a document body). */
|
|
198
|
-
interface CanvasAppend {
|
|
199
|
-
type: "canvas.append";
|
|
200
|
-
id: string;
|
|
201
|
-
path: string;
|
|
202
|
-
text: string;
|
|
203
|
-
}
|
|
204
|
-
/** JSON-merge-patch (RFC 7386) `patch` into the artifact's `data`. */
|
|
205
|
-
interface CanvasPatch {
|
|
206
|
-
type: "canvas.patch";
|
|
207
|
-
id: string;
|
|
208
|
-
patch: Record<string, unknown>;
|
|
209
|
-
}
|
|
210
|
-
/**
|
|
211
|
-
* Replace a single element (by its `data-cid` tree path) inside an `html`
|
|
212
|
-
* artifact with new outer HTML — an O(1) surgical edit that avoids resending the
|
|
213
|
-
* whole page. The reconciler resolves the `cid` path against the source HTML.
|
|
214
|
-
*/
|
|
215
|
-
interface CanvasNodePatch {
|
|
216
|
-
type: "canvas.node_patch";
|
|
217
|
-
id: string;
|
|
218
|
-
cid: string;
|
|
219
|
-
html: string;
|
|
220
|
-
}
|
|
221
|
-
/** Replace wholesale — the reconciler snapshots a new version. */
|
|
222
|
-
interface CanvasReplace {
|
|
223
|
-
type: "canvas.replace";
|
|
224
|
-
id: string;
|
|
225
|
-
artifact: Artifact;
|
|
226
|
-
}
|
|
227
|
-
interface CanvasStatus {
|
|
228
|
-
type: "canvas.status";
|
|
229
|
-
id: string;
|
|
230
|
-
status: ArtifactStatus;
|
|
231
|
-
}
|
|
232
|
-
interface CanvasClose {
|
|
233
|
-
type: "canvas.close";
|
|
234
|
-
id: string;
|
|
235
|
-
}
|
|
236
|
-
interface ErrorEvent {
|
|
237
|
-
type: "error";
|
|
238
|
-
message: string;
|
|
239
|
-
}
|
|
240
|
-
interface DoneEvent {
|
|
241
|
-
type: "done";
|
|
242
|
-
}
|
|
243
|
-
type ChatEvent = MessageDelta | MessageEnd | ToolStart | ToolEnd;
|
|
244
|
-
type CanvasEvent = CanvasCreate | CanvasAppend | CanvasPatch | CanvasNodePatch | CanvasReplace | CanvasStatus | CanvasClose;
|
|
245
|
-
type StreamEvent = ChatEvent | CanvasEvent | ErrorEvent | DoneEvent;
|
|
246
|
-
/** Narrow a `StreamEvent` to the canvas family. */
|
|
247
|
-
declare function isCanvasEvent(event: StreamEvent): event is CanvasEvent;
|
|
248
|
-
/** Narrow a `StreamEvent` to the chat family. */
|
|
249
|
-
declare function isChatEvent(event: StreamEvent): event is ChatEvent;
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Element selection — a client→server concern (it rides the chat request, not
|
|
253
|
-
* the SSE wire). When the user clicks an element inside an `html` artifact, the
|
|
254
|
-
* inspector reports which element was chosen; an edit instruction then carries
|
|
255
|
-
* this context so the agent can make a targeted change.
|
|
256
|
-
*/
|
|
257
|
-
interface ElementSelection {
|
|
258
|
-
/** The `html` artifact the element belongs to. */
|
|
259
|
-
artifactId: string;
|
|
260
|
-
/** Deterministic path id assigned by the inspector (e.g. "e-0-2"). */
|
|
261
|
-
cid: string;
|
|
262
|
-
/** Human/agent-readable selector, e.g. "button.cta". */
|
|
263
|
-
selector: string;
|
|
264
|
-
/** Lowercased tag name. */
|
|
265
|
-
tag: string;
|
|
266
|
-
/** Short text preview of the element. */
|
|
267
|
-
text?: string;
|
|
268
|
-
/** The element's current outer HTML (truncated) — edit context for the agent. */
|
|
269
|
-
outerHtml?: string;
|
|
270
|
-
/** Snapshot of the element's key computed styles (for the style panel). */
|
|
271
|
-
styles?: Record<string, string>;
|
|
272
|
-
/** True when the element is a group wrapper (offers "Ungroup"). */
|
|
273
|
-
isGroup?: boolean;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
7
|
/**
|
|
277
8
|
* The reconciler — the single place artifact state is mutated.
|
|
278
9
|
*
|
|
@@ -349,8 +80,13 @@ declare const INSPECTOR_MARK = "langchain-canvas";
|
|
|
349
80
|
/** Inject the inspector into an HTML string, before `</body>` when present. The
|
|
350
81
|
* injected nodes are tagged `data-lcx` so a full-document save can strip them.
|
|
351
82
|
* Also ensures a responsive viewport meta so device-width media queries behave
|
|
352
|
-
* the same in the preview, in export, and on a real device.
|
|
353
|
-
|
|
83
|
+
* the same in the preview, in export, and on a real device.
|
|
84
|
+
*
|
|
85
|
+
* With `assetBaseUrl`, the inspector also resolves canvas-asset references
|
|
86
|
+
* (`src="assets/…"` / `src="sources/…"`) for display: the original relative
|
|
87
|
+
* src is kept in `data-lcx-src` and restored on every serialization, so the
|
|
88
|
+
* stored document never sees a resolved URL. */
|
|
89
|
+
declare function withInspector(html: string, assetBaseUrl?: string): string;
|
|
354
90
|
/** Computed-style properties surfaced to the style panel (camelCase). */
|
|
355
91
|
declare const STYLE_PROPS: readonly ["color", "backgroundColor", "fontSize", "fontWeight", "textAlign", "lineHeight", "letterSpacing", "padding", "borderRadius", "width"];
|
|
356
92
|
|
|
@@ -373,6 +109,35 @@ interface MockStreamOptions {
|
|
|
373
109
|
/** Yield a fixed list of events over time — a drop-in for `streamChat`. */
|
|
374
110
|
declare function mockStream(events: StreamEvent[], options?: MockStreamOptions): AsyncGenerator<StreamEvent>;
|
|
375
111
|
|
|
112
|
+
/**
|
|
113
|
+
* `sseTransport` — the default socket: the Canvas Wire Protocol over SSE.
|
|
114
|
+
*
|
|
115
|
+
* Speaks to a reference-style server (`POST endpoint` with
|
|
116
|
+
* `{thread_id, message, selections}`, answered by an SSE stream of
|
|
117
|
+
* `StreamEvent` frames). This is exactly what `useCanvasStream` always did;
|
|
118
|
+
* it is now one `CanvasTransport` implementation among several.
|
|
119
|
+
*/
|
|
120
|
+
|
|
121
|
+
interface SseTransportOptions {
|
|
122
|
+
/** Chat SSE endpoint. Defaults to `/api/chat`. */
|
|
123
|
+
endpoint?: string;
|
|
124
|
+
/** Extra request headers (e.g. auth). */
|
|
125
|
+
headers?: Record<string, string>;
|
|
126
|
+
}
|
|
127
|
+
declare function sseTransport(options?: SseTransportOptions): CanvasTransport;
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* `mockTransport` — scripted offline playback as a socket implementation.
|
|
131
|
+
*
|
|
132
|
+
* Wraps the `mockStream` player in the `CanvasTransport` contract: the script
|
|
133
|
+
* maps a user message to the `StreamEvent[]` to play. Returning `null` falls
|
|
134
|
+
* through to the wrapped transport (a live backend), which is how the demo
|
|
135
|
+
* mixes canned examples with real chat.
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
type MockScript = (message: string) => StreamEvent[] | null;
|
|
139
|
+
declare function mockTransport(script: MockScript, fallback?: CanvasTransport, options?: Pick<MockStreamOptions, "delayMs">): CanvasTransport;
|
|
140
|
+
|
|
376
141
|
/**
|
|
377
142
|
* The canvas store — chat transcript + reconciled canvas state in one place.
|
|
378
143
|
*
|
|
@@ -433,6 +198,11 @@ interface CanvasStore {
|
|
|
433
198
|
redoStack: CanvasState[];
|
|
434
199
|
/** Host callback fired after a user edit reconciles — the write-back hook. */
|
|
435
200
|
onUserEdit: UserEditHandler | null;
|
|
201
|
+
/** URL prefix that resolves a canvas-relative asset path (see `resolveAssetUrl`).
|
|
202
|
+
* Renderers use it to display `assets/` / `sources/` references live; the
|
|
203
|
+
* export menu uses it to inline them. Null = no file endpoint (references
|
|
204
|
+
* stay unresolved, everything else behaves as before). */
|
|
205
|
+
assetBaseUrl: string | null;
|
|
436
206
|
applyEvent: (event: StreamEvent) => void;
|
|
437
207
|
/** Apply a batch of events in a single store write (one re-render per frame). */
|
|
438
208
|
applyEvents: (events: StreamEvent[]) => void;
|
|
@@ -447,6 +217,7 @@ interface CanvasStore {
|
|
|
447
217
|
sendIframeCommand: (command: Omit<IframeCommand, "seq">) => void;
|
|
448
218
|
/** Register (or clear) the user-edit write-back handler. */
|
|
449
219
|
setOnUserEdit: (handler: UserEditHandler | null) => void;
|
|
220
|
+
setAssetBaseUrl: (url: string | null) => void;
|
|
450
221
|
reset: () => void;
|
|
451
222
|
}
|
|
452
223
|
/** Create an isolated canvas store. */
|
|
@@ -464,14 +235,21 @@ declare function useCanvasStoreApi(): StoreApi<CanvasStore>;
|
|
|
464
235
|
declare function useCanvasStore<T>(selector: (state: CanvasStore) => T): T;
|
|
465
236
|
|
|
466
237
|
interface UseCanvasStreamOptions {
|
|
467
|
-
/**
|
|
238
|
+
/**
|
|
239
|
+
* How to reach the agent backend. Defaults to the reference Canvas Wire
|
|
240
|
+
* Protocol over SSE (`sseTransport`); pass `langgraphTransport(...)` (from
|
|
241
|
+
* the `/langgraph` entry) or your own `CanvasTransport` to speak to a
|
|
242
|
+
* different backend.
|
|
243
|
+
*/
|
|
244
|
+
transport?: CanvasTransport;
|
|
245
|
+
/** Chat SSE endpoint for the default transport. Defaults to `/api/chat`. */
|
|
468
246
|
endpoint?: string;
|
|
469
247
|
/** Conversation thread id (for server-side memory). Defaults to a fresh uuid. */
|
|
470
248
|
threadId?: string;
|
|
471
249
|
/**
|
|
472
250
|
* Offline mock: given the user's message, return a scripted `StreamEvent[]`
|
|
473
251
|
* to play instead of hitting the network — an OpenAPI-style "try it" with no
|
|
474
|
-
* real LLM call. Return `null` to fall through to the live
|
|
252
|
+
* real LLM call. Return `null` to fall through to the live transport.
|
|
475
253
|
*/
|
|
476
254
|
mock?: (message: string) => StreamEvent[] | null;
|
|
477
255
|
}
|
|
@@ -508,6 +286,34 @@ declare function useCanvasReplay(): {
|
|
|
508
286
|
*/
|
|
509
287
|
declare function useArtifactPatch(id: string): (patch: Record<string, unknown>) => void;
|
|
510
288
|
|
|
289
|
+
/**
|
|
290
|
+
* `useCanvasSave` — debounced whole-artifact persistence for user edits.
|
|
291
|
+
*
|
|
292
|
+
* The store's `onUserEdit` handler fires per committed user edit (never for
|
|
293
|
+
* agent streaming). This hook turns an `onSave` handler into a debounced
|
|
294
|
+
* per-edit callback for that signal: after `debounceMs` of quiet it hands the
|
|
295
|
+
* latest reconciled artifact to `onSave`. The host decides where it goes — a
|
|
296
|
+
* `CanvasStore`-backed endpoint, local storage, anywhere.
|
|
297
|
+
*
|
|
298
|
+
* `<Canvas onSave={...}>` wires this automatically (composed with the host's
|
|
299
|
+
* own `onUserEdit`, both sharing the store's single user-edit slot). Headless
|
|
300
|
+
* hosts can call the hook themselves and register the returned callback via
|
|
301
|
+
* `setOnUserEdit`.
|
|
302
|
+
*
|
|
303
|
+
* `baseRevision` is the artifact's last known store revision (stamped into
|
|
304
|
+
* `meta.revision` by `canvas.commit` events); hosts pass it to their save
|
|
305
|
+
* endpoint so a stale write can be rejected instead of overwriting.
|
|
306
|
+
*/
|
|
307
|
+
|
|
308
|
+
interface CanvasSavePayload {
|
|
309
|
+
artifactId: string;
|
|
310
|
+
artifact: Artifact;
|
|
311
|
+
/** Store revision the user's edit is based on, when known. */
|
|
312
|
+
baseRevision: string | null;
|
|
313
|
+
}
|
|
314
|
+
type CanvasSaveHandler = (payload: CanvasSavePayload) => void | Promise<void>;
|
|
315
|
+
declare function useCanvasSave(onSave: CanvasSaveHandler | undefined, debounceMs?: number): ((artifact: Artifact) => void) | null;
|
|
316
|
+
|
|
511
317
|
/**
|
|
512
318
|
* Schema fixtures — scripted wire-event sequences that render the canvas with no
|
|
513
319
|
* backend. Feed one to `useCanvasReplay().play(scenario.events)`.
|
|
@@ -540,6 +346,28 @@ declare function useRenderer(type: string): ArtifactRenderer | undefined;
|
|
|
540
346
|
/** Merge registries — later entries win. Handy for extending the built-ins. */
|
|
541
347
|
declare function mergeRegistries(...registries: ArtifactRegistry[]): ArtifactRegistry;
|
|
542
348
|
|
|
349
|
+
/**
|
|
350
|
+
* `useCanvasImport` — open local files onto the canvas.
|
|
351
|
+
*
|
|
352
|
+
* Turns a `File` (from a file picker or a drag-and-drop) into canvas events and
|
|
353
|
+
* applies them through the store, so the imported document/sheet/page becomes a
|
|
354
|
+
* first-class artifact you can edit and re-export. Returns the id of the last
|
|
355
|
+
* artifact created so callers can focus it.
|
|
356
|
+
*/
|
|
357
|
+
|
|
358
|
+
interface CanvasImportOptions {
|
|
359
|
+
/**
|
|
360
|
+
* Fired once per successfully imported file with the artifact that now
|
|
361
|
+
* renders on the canvas — the hook for a host to persist an imported
|
|
362
|
+
* table/document to its store right away.
|
|
363
|
+
*/
|
|
364
|
+
onImported?: (artifact: Artifact, file: File) => void;
|
|
365
|
+
}
|
|
366
|
+
declare function useCanvasImport({ onImported }?: CanvasImportOptions): {
|
|
367
|
+
importFiles: (files: Iterable<File>) => Promise<string | null>;
|
|
368
|
+
canImport: (file: File) => boolean;
|
|
369
|
+
};
|
|
370
|
+
|
|
543
371
|
interface CanvasProps {
|
|
544
372
|
/** Renderer map. Defaults to the built-in html/document/chart/table renderers. */
|
|
545
373
|
registry?: ArtifactRegistry;
|
|
@@ -559,8 +387,33 @@ interface CanvasProps {
|
|
|
559
387
|
* debounce further on the host before hitting the network.
|
|
560
388
|
*/
|
|
561
389
|
onUserEdit?: (artifact: Artifact) => void;
|
|
390
|
+
/**
|
|
391
|
+
* Persist user edits: the debounced companion to `onUserEdit` (see
|
|
392
|
+
* `useCanvasSave`). Called after edits go quiet, with the artifact and the
|
|
393
|
+
* `baseRevision` to hand a store-backed save endpoint. When omitted, edits
|
|
394
|
+
* stay in-memory exactly as before.
|
|
395
|
+
*/
|
|
396
|
+
onSave?: CanvasSaveHandler;
|
|
397
|
+
/**
|
|
398
|
+
* Fired with the raw files whenever the user opens files (picker or drop),
|
|
399
|
+
* before any import parsing — the hook for a host to upload originals to
|
|
400
|
+
* its store so the agent can read them. When provided, the file picker
|
|
401
|
+
* accepts every file type (the canvas still previews only what it can
|
|
402
|
+
* import; the host decides what to do with the rest).
|
|
403
|
+
*/
|
|
404
|
+
onFilesOpened?: (files: File[]) => void;
|
|
405
|
+
/** Fired per successfully imported file with its canvas artifact (see `useCanvasImport`). */
|
|
406
|
+
onImported?: CanvasImportOptions["onImported"];
|
|
407
|
+
/**
|
|
408
|
+
* URL prefix that resolves a canvas-relative asset path (`assets/…`,
|
|
409
|
+
* `sources/…`) to fetchable bytes — the whole encoded path is appended, e.g.
|
|
410
|
+
* `http://host/api/canvas/<id>/file?path=`. With it, asset references in
|
|
411
|
+
* artifacts display live and export inlined as `data:` URIs. Omit it and
|
|
412
|
+
* references stay unresolved — everything else behaves exactly as before.
|
|
413
|
+
*/
|
|
414
|
+
assetBaseUrl?: string;
|
|
562
415
|
}
|
|
563
|
-
declare function Canvas({ registry, emptyState, onEditElement, onUserEdit }: CanvasProps): react.JSX.Element;
|
|
416
|
+
declare function Canvas({ registry, emptyState, onEditElement, onUserEdit, onSave, onFilesOpened, onImported, assetBaseUrl, }: CanvasProps): react.JSX.Element;
|
|
564
417
|
|
|
565
418
|
interface ExportMenuProps {
|
|
566
419
|
artifact: Artifact;
|
|
@@ -591,7 +444,7 @@ declare function ArtifactCard({ artifactId }: {
|
|
|
591
444
|
artifactId: string;
|
|
592
445
|
}): react.JSX.Element | null;
|
|
593
446
|
|
|
594
|
-
declare function
|
|
447
|
+
declare function FileRenderer$1({ artifact }: RendererProps<FileData>): react.JSX.Element;
|
|
595
448
|
|
|
596
449
|
declare function SlidesRenderer$1({ artifact }: RendererProps<SlidesData>): react.JSX.Element;
|
|
597
450
|
|
|
@@ -607,7 +460,7 @@ declare const ChartRenderer: react.LazyExoticComponent<typeof ChartRenderer$1>;
|
|
|
607
460
|
declare const DocumentRenderer: react.LazyExoticComponent<typeof DocumentRenderer$1>;
|
|
608
461
|
declare const TableRenderer: react.LazyExoticComponent<typeof TableRenderer$1>;
|
|
609
462
|
declare const SlidesRenderer: react.LazyExoticComponent<typeof SlidesRenderer$1>;
|
|
610
|
-
declare const
|
|
463
|
+
declare const FileRenderer: react.LazyExoticComponent<typeof FileRenderer$1>;
|
|
611
464
|
|
|
612
465
|
/**
|
|
613
466
|
* The batteries-included renderers. `html` is the base substrate (sandboxed
|
|
@@ -695,7 +548,7 @@ declare function printToPdf(html: string): void;
|
|
|
695
548
|
*/
|
|
696
549
|
|
|
697
550
|
/** Extensions we can turn into an artifact, for `accept="…"` and drop filtering. */
|
|
698
|
-
declare const IMPORTABLE_EXTENSIONS: readonly [".csv", ".md", ".markdown", ".txt", ".html", ".htm", ".json", ".xlsx"
|
|
551
|
+
declare const IMPORTABLE_EXTENSIONS: readonly [".csv", ".md", ".markdown", ".txt", ".html", ".htm", ".json", ".xlsx"];
|
|
699
552
|
/** True when the file has an extension we know how to import. */
|
|
700
553
|
declare const canImport: (file: File) => boolean;
|
|
701
554
|
/**
|
|
@@ -708,16 +561,75 @@ declare function importFile(file: File): Promise<StreamEvent[]>;
|
|
|
708
561
|
declare function parseCsv(text: string): TableData;
|
|
709
562
|
|
|
710
563
|
/**
|
|
711
|
-
*
|
|
564
|
+
* Canvas asset references — relative paths that point at files on the canvas.
|
|
712
565
|
*
|
|
713
|
-
*
|
|
714
|
-
*
|
|
715
|
-
*
|
|
716
|
-
*
|
|
566
|
+
* The reference contract: inside canvas content, a relative path starting with
|
|
567
|
+
* `assets/` (files brought in by the agent) or `sources/` (the user's uploads)
|
|
568
|
+
* points at a file on the *same* canvas — `<img src="assets/logo.png">` in an
|
|
569
|
+
* html page, `` in a document, `src: "assets/logo.png"`
|
|
570
|
+
* on a slide image element.
|
|
571
|
+
*
|
|
572
|
+
* Display resolves a reference against the host's file endpoint
|
|
573
|
+
* (`resolveAssetUrl`), keeping the stored content relative. Export restores
|
|
574
|
+
* self-containment at the door (`inlineArtifactAssets` / `inlineHtmlAssets`):
|
|
575
|
+
* every reference becomes a `data:` URI so the exported file carries its
|
|
576
|
+
* images. The unit of self-containment is the canvas folder while
|
|
577
|
+
* collaborating, and the single file once exported.
|
|
578
|
+
*
|
|
579
|
+
* The Python twin lives in `langchain_canvas/assets.py`; the prefix list below
|
|
580
|
+
* is compared against it by the protocol parity tests.
|
|
717
581
|
*/
|
|
718
|
-
declare function useCanvasImport(): {
|
|
719
|
-
importFiles: (files: Iterable<File>) => Promise<string | null>;
|
|
720
|
-
canImport: (file: File) => boolean;
|
|
721
|
-
};
|
|
722
582
|
|
|
723
|
-
|
|
583
|
+
declare const ASSET_REFERENCE_PREFIXES: readonly ["assets/", "sources/"];
|
|
584
|
+
/**
|
|
585
|
+
* The canvas-root-relative path `src` refers to, or `null`.
|
|
586
|
+
*
|
|
587
|
+
* References are root-relative by contract, but a model writing a page that
|
|
588
|
+
* lives in a folder often produces the document-relative form
|
|
589
|
+
* (`../sources/photo.png`). Store paths can never contain `..` (the store
|
|
590
|
+
* contract rejects them), and `assets/` / `sources/` exist only at the root —
|
|
591
|
+
* so folding leading `./` / `../` segments onto the root reading is lossless
|
|
592
|
+
* tolerance, not guesswork. Stored content is never rewritten; only consumers
|
|
593
|
+
* (display, export inlining) interpret leniently.
|
|
594
|
+
*/
|
|
595
|
+
declare function normalizeAssetReference(src: string | undefined | null): string | null;
|
|
596
|
+
declare function isAssetReference(src: string | undefined | null): src is string;
|
|
597
|
+
/**
|
|
598
|
+
* Absolute URL for a canvas-relative asset path. `assetBaseUrl` is a prefix the
|
|
599
|
+
* whole (URI-encoded) path is appended to — e.g. the reference server's
|
|
600
|
+
* `http://host/api/canvas/<id>/file?path=`.
|
|
601
|
+
*/
|
|
602
|
+
declare function resolveAssetUrl(src: string, assetBaseUrl: string): string;
|
|
603
|
+
/** Fetch one canvas asset and encode it as a `data:` URI (null on any failure). */
|
|
604
|
+
declare function fetchAssetDataUri(path: string, assetBaseUrl: string): Promise<string | null>;
|
|
605
|
+
/**
|
|
606
|
+
* Replace canvas-asset references in an HTML string with `data:` URIs.
|
|
607
|
+
*
|
|
608
|
+
* Handles both the stored form (`src="assets/logo.png"`) and the display form a
|
|
609
|
+
* rendered DOM serializes (`src="<assetBaseUrl><encoded path>"`). A reference
|
|
610
|
+
* that cannot be fetched is left untouched — honest: the export shows exactly
|
|
611
|
+
* what could be resolved. Only `src` attributes are rewritten; CSS `url(...)`
|
|
612
|
+
* references are out of contract.
|
|
613
|
+
*/
|
|
614
|
+
declare function inlineHtmlAssets(html: string, assetBaseUrl: string): Promise<string>;
|
|
615
|
+
/**
|
|
616
|
+
* An artifact with every canvas-asset reference inlined as a `data:` URI —
|
|
617
|
+
* the export chokepoint. `html` inlines its page source; `slides` inlines
|
|
618
|
+
* image elements and the image-layout `image`; other types (and a missing
|
|
619
|
+
* `assetBaseUrl`) pass through unchanged, so hosts without a file endpoint
|
|
620
|
+
* keep today's behavior exactly.
|
|
621
|
+
*/
|
|
622
|
+
declare function inlineArtifactAssets<T extends Artifact>(artifact: T, assetBaseUrl: string | null | undefined): Promise<T>;
|
|
623
|
+
|
|
624
|
+
/**
|
|
625
|
+
* Display-time resolver for canvas-asset references.
|
|
626
|
+
*
|
|
627
|
+
* Returns a function that maps a `src` to a displayable URL: a canvas-relative
|
|
628
|
+
* reference (`assets/…`, `sources/…`) resolves against the host's asset
|
|
629
|
+
* endpoint; anything else — and every reference when no endpoint is configured
|
|
630
|
+
* — passes through untouched. Resolution is display-only: stored artifact data
|
|
631
|
+
* always keeps the relative reference.
|
|
632
|
+
*/
|
|
633
|
+
declare function useAssetUrl(): (src: string | undefined) => string | undefined;
|
|
634
|
+
|
|
635
|
+
export { ASSET_REFERENCE_PREFIXES, Artifact, ArtifactCard, type ArtifactRegistry, type ArtifactRenderer, Canvas, CanvasEvent, type CanvasProps, CanvasProvider, type CanvasProviderProps, CanvasRegistryProvider, type CanvasSaveHandler, type CanvasSavePayload, type CanvasState, type CanvasStore, CanvasTransport, ChartData, ChartRenderer, type ChatMessage, type ChatRequest, DocumentData, DocumentRenderer, ElementSelection, ExportMenu, FileData, type FileExport, FileRenderer, HtmlData, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, type IframeCommand, type MockScript, type MockStreamOptions, type RendererProps, STYLE_PROPS, type Scenario, SelectionBar, SlidesData, SlidesRenderer, type SseTransportOptions, StreamEvent, type StreamOptions, StylePanel, TableData, TableRenderer, type UseCanvasStreamOptions, type UserEditHandler, builtinRenderers, canImport, createCanvasStore, dataExporters, downloadBlob, emptyCanvasState, fetchAssetDataUri, importFile, inlineArtifactAssets, inlineHtmlAssets, isAssetReference, mergePatch, mergeRegistries, mockStream, mockTransport, normalizeAssetReference, parseCsv, parseSSE, printToPdf, reduceCanvas, resolveAssetUrl, scenarios, slidesToPrintHtml, slugify, sseTransport, streamChat, toStandaloneHtml, useArtifactPatch, useAssetUrl, useCanvasImport, useCanvasReplay, useCanvasSave, useCanvasStore, useCanvasStoreApi, useCanvasStream, useRenderer, withInspector };
|