@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/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
- declare function withInspector(html: string): string;
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
- /** Chat SSE endpoint. Defaults to `/api/chat`. */
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 endpoint.
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 PdfRenderer$1({ artifact }: RendererProps<PdfData>): react.JSX.Element;
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 PdfRenderer: react.LazyExoticComponent<typeof PdfRenderer$1>;
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", ".pdf", ".hwpx", ".hwp"];
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
- * `useCanvasImport`open local files onto the canvas.
564
+ * Canvas asset references relative paths that point at files on the canvas.
712
565
  *
713
- * Turns a `File` (from a file picker or a drag-and-drop) into canvas events and
714
- * applies them through the store, so the imported document/sheet/page becomes a
715
- * first-class artifact you can edit and re-export. Returns the id of the last
716
- * artifact created so callers can focus it.
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, `![logo](assets/logo.png)` 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
- export { type Artifact, ArtifactCard, type ArtifactRegistry, type ArtifactRenderer, type ArtifactStatus, Canvas, type CanvasAppend, type CanvasClose, type CanvasCreate, type CanvasEvent, type CanvasNodePatch, type CanvasPatch, type CanvasProps, CanvasProvider, type CanvasProviderProps, CanvasRegistryProvider, type CanvasReplace, type CanvasState, type CanvasStatus, type CanvasStore, type ChartArtifact, type ChartData, type ChartOptions, ChartRenderer, type ChartSeries, type ChatEvent, type ChatMessage, type ChatRequest, type DocumentArtifact, type DocumentData, DocumentRenderer, type DoneEvent, type ElementSelection, type ErrorEvent, ExportMenu, type FileExport, type HtmlArtifact, type HtmlData, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, type IframeCommand, type KnownArtifact, type MessageDelta, type MessageEnd, type MockStreamOptions, type PdfArtifact, type PdfData, PdfRenderer, type RendererProps, STYLE_PROPS, type Scenario, SelectionBar, type Slide, type SlideElement, type SlidesArtifact, type SlidesData, SlidesRenderer, type StreamEvent, type StreamOptions, StylePanel, type TableArtifact, type TableColumn, type TableData, TableRenderer, type ToolEnd, type ToolStart, type UseCanvasStreamOptions, type UserEditHandler, builtinRenderers, canImport, createCanvasStore, dataExporters, downloadBlob, emptyCanvasState, importFile, isCanvasEvent, isChatEvent, mergePatch, mergeRegistries, mockStream, parseCsv, parseSSE, printToPdf, reduceCanvas, scenarios, slidesToPrintHtml, slugify, streamChat, toStandaloneHtml, useArtifactPatch, useCanvasImport, useCanvasReplay, useCanvasStore, useCanvasStoreApi, useCanvasStream, useRenderer, withInspector };
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 };