canvu-react 0.3.6 → 0.3.8

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/react.d.cts CHANGED
@@ -1,224 +1,156 @@
1
- import * as react from 'react';
2
- import { CSSProperties, ReactNode, SVGProps } from 'react';
3
- import { C as Camera2D } from './camera-BwQjm5oh.cjs';
4
- import { S as StrokeStyle } from './shape-builders-DxPoOecg.cjs';
5
1
  import { V as VectorSceneItem } from './types-CB0TZZuk.cjs';
6
- import { V as VectorToolDefinition, C as CanvasPlugin } from './types-D1ftVsOQ.cjs';
7
- export { a as CanvasPluginComponentProps, b as CanvasPluginContribution, c as CanvasPluginItemsChangeMiddlewareContext, d as CanvasPluginRenderContext, e as CanvuPluginContext, f as CanvuPluginContextValue, g as CanvuPluginViewportSnapshot, h as CustomShapePlacementOptions, P as PlacementPreview, i as VectorViewport, j as VectorViewportHandle, k as VectorViewportProps, W as WorldPointerDownDetail, l as createCanvuPlugin, u as useCanvuDocumentContext, m as useCanvuPluginContext, n as useCanvuPluginContribution, o as useCanvuResolvedTools, p as useCanvuViewportContext } from './types-D1ftVsOQ.cjs';
8
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { V as VectorViewportAssetKind, a as VectorViewportAssetStore, b as VectorToolDefinition, C as CanvasPlugin, B as BoardComponentPosition } from './types-CW146bKP.cjs';
3
+ export { c as CanvasPluginComponentProps, d as CanvasPluginContribution, e as CanvasPluginItemsChangeMiddlewareContext, f as CanvasPluginRenderContext, g as CanvuChromeActiveToolStyle, h as CanvuChromeContext, i as CanvuChromeContextValue, j as CanvuChromeSelectionStyleChange, k as CanvuPluginContext, l as CanvuPluginContextValue, m as CanvuPluginViewportSnapshot, n as CustomShapePlacementOptions, N as NavMenu, o as NavMenuProps, P as PlacementPreview, p as VectorCanvas, q as VectorCanvasBody, r as VectorCanvasHeader, s as VectorCanvasMain, t as VectorCanvasRoot, u as VectorCanvasSlotProps, v as VectorCanvasSpacePosition, w as VectorCanvasSpaceProps, x as VectorCanvasToolbar, y as VectorCanvasToolbarProps, z as VectorCanvasViewportSurface, A as VectorSelectionInspector, D as VectorSelectionInspectorProps, E as VectorViewport, F as VectorViewportAssetResolveRequest, G as VectorViewportAssetResolveResult, H as VectorViewportAssetUploadRequest, I as VectorViewportAssetUploadResult, J as VectorViewportHandle, K as VectorViewportProps, W as WorldPointerDownDetail, L as createCanvuPlugin, M as getBoardPositionStyle, O as useCanvuChromeContext, Q as useCanvuDocumentContext, R as useCanvuPluginContext, S as useCanvuPluginContribution, T as useCanvuResolvedTools, U as useCanvuViewportContext } from './types-CW146bKP.cjs';
9
4
  import { V as VectorCanvasPersistenceAdapter, a as VectorCanvasRemoteAdapter } from './types-B58i5k-u.cjs';
10
5
  export { b as VectorCanvasSnapshot } from './types-B58i5k-u.cjs';
6
+ import * as react from 'react';
7
+ import { SVGProps, CSSProperties, ReactNode } from 'react';
8
+ import * as react_jsx_runtime from 'react/jsx-runtime';
9
+ import './camera-BwQjm5oh.cjs';
10
+ import './shape-builders-DxPoOecg.cjs';
11
11
 
12
- type CanvuChromeActiveToolStyle = StrokeStyle & {
13
- toolKind: "draw" | "marker";
14
- label?: string;
15
- };
16
- type CanvuChromeSelectionStyleChange = (patch: {
17
- stroke: string;
18
- strokeWidth: number;
19
- strokeOpacity?: number;
20
- }) => void;
21
- /**
22
- * Runtime data and handlers shared with floating board chrome (e.g. {@link NavMenu},
23
- * {@link VectorSelectionInspector}). Populated by `VectorViewport` and consumed via
24
- * {@link useCanvuChromeContext}.
25
- */
26
- type CanvuChromeContextValue = {
27
- camera: Camera2D | null;
28
- viewportWidth: number;
29
- viewportHeight: number;
30
- items: readonly VectorSceneItem[];
31
- selectedItems: readonly VectorSceneItem[];
32
- interactive: boolean;
33
- canEditSelection: boolean;
34
- activeToolStyle: CanvuChromeActiveToolStyle | null;
35
- onSelectionStyleChange: CanvuChromeSelectionStyleChange | null;
36
- zoomPercent: number;
37
- onZoomIn: () => void;
38
- onZoomOut: () => void;
39
- onUndo: () => void;
40
- onRedo: () => void;
41
- canUndo: boolean;
42
- canRedo: boolean;
43
- onRequestRender: () => void;
44
- };
45
- declare const CanvuChromeContext: react.Context<CanvuChromeContextValue | null>;
46
- /** Returns the current chrome context or `null` when used outside `VectorViewport`. */
47
- declare function useCanvuChromeContext(): CanvuChromeContextValue | null;
12
+ declare class IndexedDbImageStore {
13
+ private dbPromise;
14
+ private getDb;
15
+ storeOriginal(blob: Blob): Promise<string>;
16
+ getOriginal(id: string): Promise<Blob | undefined>;
17
+ deleteOriginal(id: string): Promise<void>;
18
+ storeThumbnail(blob: Blob): Promise<string>;
19
+ getThumbnail(id: string): Promise<Blob | undefined>;
20
+ deleteThumbnail(id: string): Promise<void>;
21
+ }
48
22
 
49
- type ActiveToolStyle = StrokeStyle & {
50
- toolKind: "draw" | "marker";
51
- label?: string;
52
- };
53
23
  /**
54
- * Color + stroke-width inspector for the current selection (or active drawing tool style).
55
- * When rendered inside `VectorViewport` (e.g. via the `selectionInspector` slot), `items`,
56
- * `activeToolStyle`, and `onChange` default to values from {@link CanvuChromeContext};
57
- * pass any prop to override.
24
+ * Extra context for each item created by {@link ingestAssetFilesToSceneItems}.
25
+ *
26
+ * Use this when you need to lock imported pages, assign custom ids, or attach
27
+ * additional metadata beyond the `pluginData` returned by {@link VectorViewportAssetStore.upload}.
58
28
  */
59
- type VectorSelectionInspectorProps = {
60
- /** Selected items that support stroke/fill styling (caller may filter). */
61
- items?: readonly VectorSceneItem[];
62
- /** Optional active tool style shown even without a selection. */
63
- activeToolStyle?: ActiveToolStyle | null;
64
- /** Apply stroke / width / opacity to every item in `items`. */
65
- onChange?: CanvuChromeSelectionStyleChange;
66
- /** Anchor preset. Defaults to top-left. */
67
- position?: BoardComponentPosition;
68
- /** Distance (px) from anchored edges. @default 12 */
69
- inset?: number;
70
- /** @default 24 */
71
- zIndex?: number;
72
- className?: string;
73
- /** Merged on top of position-derived styles for custom tweaks. */
74
- style?: CSSProperties;
29
+ type IngestedAssetItemContext = {
30
+ file: File;
31
+ kind: VectorViewportAssetKind;
32
+ itemIndex: number;
33
+ pageNumber?: number;
75
34
  };
76
35
  /**
77
- * Color + stroke width for the current selection. Supports multiple selected shapes: one change applies to all.
36
+ * Structured error produced while ingesting a file into scene items.
37
+ *
38
+ * The helper keeps partial success by default: one file can fail without
39
+ * preventing the remaining files from being converted.
78
40
  */
79
- declare function VectorSelectionInspector({ items: itemsProp, activeToolStyle: activeToolStyleProp, onChange: onChangeProp, position, inset, zIndex, className, style, }: VectorSelectionInspectorProps): react_jsx_runtime.JSX.Element | null;
80
-
81
- type VectorCanvasSlotProps = {
82
- children?: ReactNode;
83
- className?: string;
84
- style?: CSSProperties;
41
+ type IngestAssetFileError = {
42
+ file: File;
43
+ kind?: VectorViewportAssetKind;
44
+ error: unknown;
85
45
  };
86
46
  /**
87
- * Anchor presets for floating board components.
47
+ * Options for {@link ingestAssetFilesToSceneItems}.
88
48
  *
89
- * Names are `<edge>-<position-along-edge>`:
90
- * - `top-*` / `bottom-*` anchor to the top or bottom edge.
91
- * - `left-*` / `right-*` anchor to the left or right edge.
49
+ * This is the shared ingestion pipeline used by canvu's built-in file flow.
50
+ * Use it when files originate outside the viewport, such as:
92
51
  *
93
- * Corner aliases are equivalent (e.g. `top-left` and `left-top` resolve to the same anchor),
94
- * but kept distinct so callers can pick whichever reads best in their layout (a vertical
95
- * strip might prefer `left-top`; a horizontal strip prefers `top-left`).
96
- */
97
- type BoardComponentPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | "center" | "fill";
98
- /** @deprecated Use {@link BoardComponentPosition}. */
99
- type VectorCanvasSpacePosition = BoardComponentPosition;
100
- /**
101
- * Compute absolute-position CSS for a board component anchor preset.
102
- * Returns `position`, `zIndex`, and the relevant edge offsets / transforms.
103
- * Callers merge the result with their own style/className overrides.
104
- */
105
- declare function getBoardPositionStyle(position: BoardComponentPosition, inset?: number, zIndex?: number): CSSProperties;
106
- type VectorCanvasSpaceProps = VectorCanvasSlotProps & {
107
- position?: BoardComponentPosition;
108
- /** @default 12 */
109
- inset?: number;
110
- /** @default 40 */
111
- zIndex?: number;
112
- /** Pointer events value on the content wrapper. @default "auto" */
113
- contentPointerEvents?: CSSProperties["pointerEvents"];
114
- };
115
- /**
116
- * Full-viewport column shell for a vector canvas (header + body with stage).
117
- * Use with {@link VectorCanvasBody}, {@link VectorCanvasMain}. Pass `toolbar` on {@link VectorViewport};
118
- * Compose the floating tool strip with {@link VectorCanvasToolbar} around {@link VectorToolbar} (see example below).
119
- */
120
- declare function VectorCanvasRoot({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
121
- /** Optional top chrome (title, hints, toggles). */
122
- declare function VectorCanvasHeader({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
123
- /** Fills remaining space below the header (typically one {@link VectorCanvasMain}). */
124
- declare function VectorCanvasBody({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
125
- /**
126
- * Stretch area for {@link VectorViewport} (or any child that should fill the stage).
127
- */
128
- declare function VectorCanvasMain({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
129
- /**
130
- * Flex child that fills {@link VectorCanvasMain} and gives {@link VectorViewport} a bounded height
131
- * (white surface by default). Omit if you set the background on `Main` or the viewport yourself.
132
- */
133
- declare function VectorCanvasViewportSurface({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
134
- type VectorCanvasToolbarProps = {
135
- children?: ReactNode;
136
- className?: string;
137
- style?: CSSProperties;
138
- /** Anchor preset. @default "bottom-center" */
139
- position?: BoardComponentPosition;
140
- /** Distance (px) from the anchored edge(s). @default 12 */
141
- inset?: number;
142
- /** @default 30 */
143
- zIndex?: number;
144
- };
145
- /**
146
- * Floating strip anchor for {@link VectorToolbar} or custom controls. Defaults to bottom-center.
147
- * Renders `pointer-events: none` on the shell and `auto` on children so the canvas keeps receiving hits outside the bar.
148
- * Pass as the `toolbar` prop of `VectorViewport`; pick a different `position` for top / side anchoring.
149
- * Z-index defaults to 30 so the strip stays above zoom controls.
150
- */
151
- declare function VectorCanvasToolbar({ children, className, style, position, inset, zIndex, }: VectorCanvasToolbarProps): react_jsx_runtime.JSX.Element;
152
- /**
153
- * Absolute canvas-aligned space for floating UI such as chats, rosters, inspectors, and overlays.
154
- * Use this instead of ad-hoc wrapper divs or plugin hosts when a feature can be expressed as React nodes.
155
- */
156
- declare function VectorCanvasSpace({ children, className, style, position, inset, zIndex, contentPointerEvents, }: VectorCanvasSpaceProps): react_jsx_runtime.JSX.Element;
157
- /**
158
- * Namespaced layout primitives for composing a vector canvas shell without ad-hoc wrapper divs.
52
+ * - custom upload dialogs
53
+ * - board/version creation flows
54
+ * - programmatic imports
55
+ * - legacy migrations
56
+ *
57
+ * Prefer passing `assetStore` directly to `VectorViewport` when the user is
58
+ * already interacting with canvu's native file picker or drag-and-drop UI.
159
59
  *
160
60
  * @example
161
- * ```tsx
162
- * <VectorCanvas.Root>
163
- * <VectorCanvas.Header>…</VectorCanvas.Header>
164
- * <VectorCanvas.Body>
165
- * <VectorCanvas.Main>
166
- * <VectorCanvas.ViewportSurface>
167
- * <VectorViewport
168
- * toolbar={
169
- * <VectorCanvas.Toolbar>
170
- * <VectorToolbar … />
171
- * </VectorCanvas.Toolbar>
172
- * }
173
- *
174
- * />
175
- * </VectorCanvas.ViewportSurface>
176
- * </VectorCanvas.Main>
177
- * </VectorCanvas.Body>
178
- * </VectorCanvas.Root>
61
+ * ```ts
62
+ * const result = await ingestAssetFilesToSceneItems({
63
+ * files: Array.from(input.files ?? []),
64
+ * worldCenter: { x: 0, y: 0 },
65
+ * assetStore,
66
+ * decorateItem(item) {
67
+ * return {
68
+ * ...item,
69
+ * locked: true,
70
+ * };
71
+ * },
72
+ * });
73
+ *
74
+ * doc.onItemsChange([...doc.items, ...result.items]);
179
75
  * ```
180
76
  */
181
- declare const VectorCanvas: {
182
- readonly Root: typeof VectorCanvasRoot;
183
- readonly Header: typeof VectorCanvasHeader;
184
- readonly Body: typeof VectorCanvasBody;
185
- readonly Main: typeof VectorCanvasMain;
186
- readonly ViewportSurface: typeof VectorCanvasViewportSurface;
187
- readonly Toolbar: typeof VectorCanvasToolbar;
188
- readonly Space: typeof VectorCanvasSpace;
189
- readonly NavMenu: typeof NavMenu;
190
- readonly SelectionInspector: typeof VectorSelectionInspector;
77
+ type IngestAssetFilesToSceneItemsOptions = {
78
+ files: readonly File[];
79
+ worldCenter: {
80
+ x: number;
81
+ y: number;
82
+ };
83
+ /**
84
+ * Optional binary persistence bridge shared with `VectorViewport`.
85
+ *
86
+ * When provided, `upload(...)` is called once per source file before canvu
87
+ * converts that file into one or more scene items.
88
+ */
89
+ assetStore?: VectorViewportAssetStore;
90
+ /**
91
+ * Optional local blob store used to keep canvu's default image/PDF runtime
92
+ * behavior consistent across reload-safe persistence adapters.
93
+ *
94
+ * Omit this unless you need to share an existing store instance.
95
+ */
96
+ imageStore?: IndexedDbImageStore;
97
+ /**
98
+ * Optional custom id factory for imported items.
99
+ *
100
+ * Defaults to `createShapeId()`.
101
+ */
102
+ createId?: () => string;
103
+ /**
104
+ * Vertical gap between stacked PDF pages.
105
+ *
106
+ * Defaults to `16`, matching the built-in viewport flow.
107
+ */
108
+ gapWorld?: number;
109
+ /**
110
+ * Offset step used when placing standalone raster images.
111
+ *
112
+ * Defaults to `48`, matching the built-in viewport flow.
113
+ */
114
+ stepWorld?: number;
115
+ /**
116
+ * PDF rasterization scale forwarded to `pdfjs-dist`.
117
+ *
118
+ * Defaults to `1.5` for crisp zoom while keeping payloads reasonable.
119
+ */
120
+ pdfScale?: number;
121
+ /**
122
+ * Final hook to customize each created item after canvu attaches its own
123
+ * image metadata and any `assetStore.upload(...)` `pluginData`.
124
+ */
125
+ decorateItem?: (item: VectorSceneItem, context: IngestedAssetItemContext) => VectorSceneItem;
126
+ /**
127
+ * Optional side-channel for per-file errors.
128
+ *
129
+ * This is useful for toasts or telemetry in addition to reading the returned
130
+ * `errors` array.
131
+ */
132
+ onError?: (error: IngestAssetFileError) => void;
191
133
  };
192
-
193
134
  /**
194
- * Floating bottom-bar combining zoom controls, undo/redo, and an expandable minimap.
195
- * When rendered inside `VectorViewport` (e.g. via the `navMenu` slot), data props default
196
- * to values from {@link CanvuChromeContext}; pass any prop to override.
135
+ * Result of {@link ingestAssetFilesToSceneItems}.
197
136
  */
198
- type NavMenuProps = {
199
- camera?: Camera2D;
200
- viewportWidth?: number;
201
- viewportHeight?: number;
202
- items?: readonly VectorSceneItem[];
203
- zoomPercent?: number;
204
- onZoomIn?: () => void;
205
- onZoomOut?: () => void;
206
- onUndo?: () => void;
207
- onRedo?: () => void;
208
- canUndo?: boolean;
209
- canRedo?: boolean;
210
- onRequestRender?: () => void;
211
- /** Anchor preset. Defaults to bottom-left. */
212
- position?: BoardComponentPosition;
213
- /** Distance (px) from anchored edges. @default 12 */
214
- inset?: number;
215
- /** @default 23 */
216
- zIndex?: number;
217
- className?: string;
218
- /** Merged on top of position-derived styles for custom tweaks. */
219
- style?: CSSProperties;
137
+ type IngestAssetFilesToSceneItemsResult = {
138
+ items: VectorSceneItem[];
139
+ errors: IngestAssetFileError[];
220
140
  };
221
- declare function NavMenu({ camera: cameraProp, viewportWidth: viewportWidthProp, viewportHeight: viewportHeightProp, items: itemsProp, zoomPercent: zoomPercentProp, onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onUndo: onUndoProp, onRedo: onRedoProp, canUndo: canUndoProp, canRedo: canRedoProp, onRequestRender: onRequestRenderProp, position, inset, zIndex, className, style, }: NavMenuProps): react_jsx_runtime.JSX.Element;
141
+ /**
142
+ * Converts browser files into `VectorSceneItem[]` using the same ingestion
143
+ * pipeline as canvu's built-in file flow.
144
+ *
145
+ * Use this for external imports that should behave like the native canvas
146
+ * upload experience without reimplementing PDF rasterization, image storage, or
147
+ * `pluginData` attachment in app code.
148
+ *
149
+ * Do not use this as a persistence layer by itself. It only produces runtime
150
+ * scene items. Persist the resulting snapshot with your existing
151
+ * `useVectorCanvasDocument(...)` adapter or another app-specific document store.
152
+ */
153
+ declare function ingestAssetFilesToSceneItems(options: IngestAssetFilesToSceneItemsOptions): Promise<IngestAssetFilesToSceneItemsResult>;
222
154
 
223
155
  /**
224
156
  * Persistence adapter that stores the document JSON in IndexedDB and manages
@@ -478,4 +410,4 @@ type ViewportZoomControlsProps = {
478
410
  */
479
411
  declare function ViewportZoomControls({ zoomPercent, onZoomIn, onZoomOut, className, position, inset, zIndex, style, }: ViewportZoomControlsProps): react_jsx_runtime.JSX.Element;
480
412
 
481
- export { type BoardComponentPosition, CanvasPlugin, type CanvuChromeActiveToolStyle, CanvuChromeContext, type CanvuChromeContextValue, type CanvuChromeSelectionStyleChange, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, NavMenu, type NavMenuProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpacePosition, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, type VectorSelectionInspectorProps, VectorToolDefinition, VectorToolbar, type VectorToolbarProps, type VectorToolbarRenderContext, ViewportZoomControls, type ViewportZoomControlsProps, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, getBoardPositionStyle, useCanvuChromeContext, useVectorCanvasDocument };
413
+ export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorToolDefinition, VectorToolbar, type VectorToolbarProps, type VectorToolbarRenderContext, VectorViewportAssetKind, VectorViewportAssetStore, ViewportZoomControls, type ViewportZoomControlsProps, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };