@grida/svg-editor 1.0.0-alpha.2 → 1.0.0-alpha.21

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.
@@ -0,0 +1,61 @@
1
+ import { c as SvgEditor } from "./editor-CcW4BVth.mjs";
2
+ import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-Dw2SPHgc.mjs";
3
+
4
+ //#region src/presets/keynote.d.ts
5
+ declare namespace keynote_d_exports {
6
+ export { KeynoteAttachOptions, KeynoteSurfaceHandle, attach };
7
+ }
8
+ type KeynoteAttachOptions = {
9
+ /** Container to mount the SVG into. */container: HTMLElement;
10
+ /**
11
+ * Screen-pixel breathing room between the slide and the viewport edge.
12
+ * Used for both initial fit and the cover-constraint clamp. Default 80.
13
+ */
14
+ padding?: number;
15
+ /**
16
+ * Screen-pixel scroll slack past the slide edge when zoomed in past fit.
17
+ * Forwarded to the cover constraint's `pan_overshoot`. Default 0 — strict
18
+ * cover behavior (no panning past the slide edge). Applies only when an
19
+ * axis is scrollable; a fitted axis stays locked at center.
20
+ */
21
+ pan_overshoot?: number;
22
+ /**
23
+ * Forward additional surface options (e.g. `gestures: false`). `container`,
24
+ * `fit`, and `initial_camera` are owned by the preset.
25
+ */
26
+ surface?: Omit<DomSurfaceOptions, "container" | "fit" | "initial_camera">;
27
+ };
28
+ /**
29
+ * Surface handle returned by `keynote.attach`. Extends `DomSurfaceHandle`
30
+ * with `set_padding` so hosts can vary the slide breathing room at runtime
31
+ * (e.g. on a "present mode" toggle that wants margin: 0 vs the default 80).
32
+ */
33
+ type KeynoteSurfaceHandle = DomSurfaceHandle & {
34
+ /**
35
+ * Update the slide padding and re-fit. Mutates the live constraint AND
36
+ * the captured padding used by load-triggered refits.
37
+ */
38
+ set_padding(p: number): void;
39
+ /**
40
+ * Update the scroll-past slack at runtime. Mutates the live constraint;
41
+ * `reenforce()` pulls a previously over-panned transform back into the
42
+ * new range when the value is decreased.
43
+ */
44
+ set_pan_overshoot(o: number): void;
45
+ };
46
+ /**
47
+ * Attach a keynote-shaped DOM surface:
48
+ * - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
49
+ * first frame).
50
+ * - Installs a `'cover'` camera constraint bound to the document root, so
51
+ * the user can't zoom out past the slide or pan past its edges.
52
+ * - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
53
+ * re-fits the camera to the new document.
54
+ *
55
+ * Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
56
+ * `set_padding` for present-mode toggles. The returned `detach()`
57
+ * additionally tears down the load subscription.
58
+ */
59
+ declare function attach(editor: SvgEditor, opts: KeynoteAttachOptions): KeynoteSurfaceHandle;
60
+ //#endregion
61
+ export { type KeynoteAttachOptions, type KeynoteSurfaceHandle, keynote_d_exports as keynote };
@@ -0,0 +1,61 @@
1
+ import { c as SvgEditor } from "./editor-CxqRhhzP.js";
2
+ import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-CQkWJNrK.js";
3
+
4
+ //#region \0rolldown/runtime.js
5
+ declare namespace keynote_d_exports {
6
+ export { KeynoteAttachOptions, KeynoteSurfaceHandle, attach };
7
+ }
8
+ type KeynoteAttachOptions = {
9
+ /** Container to mount the SVG into. */container: HTMLElement;
10
+ /**
11
+ * Screen-pixel breathing room between the slide and the viewport edge.
12
+ * Used for both initial fit and the cover-constraint clamp. Default 80.
13
+ */
14
+ padding?: number;
15
+ /**
16
+ * Screen-pixel scroll slack past the slide edge when zoomed in past fit.
17
+ * Forwarded to the cover constraint's `pan_overshoot`. Default 0 — strict
18
+ * cover behavior (no panning past the slide edge). Applies only when an
19
+ * axis is scrollable; a fitted axis stays locked at center.
20
+ */
21
+ pan_overshoot?: number;
22
+ /**
23
+ * Forward additional surface options (e.g. `gestures: false`). `container`,
24
+ * `fit`, and `initial_camera` are owned by the preset.
25
+ */
26
+ surface?: Omit<DomSurfaceOptions, "container" | "fit" | "initial_camera">;
27
+ };
28
+ /**
29
+ * Surface handle returned by `keynote.attach`. Extends `DomSurfaceHandle`
30
+ * with `set_padding` so hosts can vary the slide breathing room at runtime
31
+ * (e.g. on a "present mode" toggle that wants margin: 0 vs the default 80).
32
+ */
33
+ type KeynoteSurfaceHandle = DomSurfaceHandle & {
34
+ /**
35
+ * Update the slide padding and re-fit. Mutates the live constraint AND
36
+ * the captured padding used by load-triggered refits.
37
+ */
38
+ set_padding(p: number): void;
39
+ /**
40
+ * Update the scroll-past slack at runtime. Mutates the live constraint;
41
+ * `reenforce()` pulls a previously over-panned transform back into the
42
+ * new range when the value is decreased.
43
+ */
44
+ set_pan_overshoot(o: number): void;
45
+ };
46
+ /**
47
+ * Attach a keynote-shaped DOM surface:
48
+ * - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
49
+ * first frame).
50
+ * - Installs a `'cover'` camera constraint bound to the document root, so
51
+ * the user can't zoom out past the slide or pan past its edges.
52
+ * - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
53
+ * re-fits the camera to the new document.
54
+ *
55
+ * Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
56
+ * `set_padding` for present-mode toggles. The returned `detach()`
57
+ * additionally tears down the load subscription.
58
+ */
59
+ declare function attach(editor: SvgEditor, opts: KeynoteAttachOptions): KeynoteSurfaceHandle;
60
+ //#endregion
61
+ export { type KeynoteAttachOptions, type KeynoteSurfaceHandle, keynote_d_exports as keynote };
@@ -0,0 +1,60 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_model = require("./model-DVwjrVYp.js");
3
+ const require_dom = require("./dom-CuK0LFUY.js");
4
+ //#region src/presets/keynote.ts
5
+ var keynote_exports = /* @__PURE__ */ require_model.__exportAll({ attach: () => attach });
6
+ /**
7
+ * Attach a keynote-shaped DOM surface:
8
+ * - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
9
+ * first frame).
10
+ * - Installs a `'cover'` camera constraint bound to the document root, so
11
+ * the user can't zoom out past the slide or pan past its edges.
12
+ * - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
13
+ * re-fits the camera to the new document.
14
+ *
15
+ * Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
16
+ * `set_padding` for present-mode toggles. The returned `detach()`
17
+ * additionally tears down the load subscription.
18
+ */
19
+ function attach(editor, opts) {
20
+ const inner = require_dom.attach_dom_surface(editor, {
21
+ ...opts.surface,
22
+ container: opts.container,
23
+ fit: true
24
+ });
25
+ let padding = opts.padding ?? 80;
26
+ let pan_overshoot = opts.pan_overshoot ?? 0;
27
+ const apply = () => {
28
+ inner.camera.constraints = {
29
+ type: "cover",
30
+ bounds: "<root>",
31
+ padding,
32
+ pan_overshoot
33
+ };
34
+ };
35
+ apply();
36
+ const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: inner.camera.constraints?.padding ?? 0 }));
37
+ return {
38
+ ...inner,
39
+ set_padding(p) {
40
+ padding = p;
41
+ apply();
42
+ inner.camera.fit("<root>", { margin: p });
43
+ },
44
+ set_pan_overshoot(o) {
45
+ pan_overshoot = o;
46
+ apply();
47
+ },
48
+ detach: () => {
49
+ unsub_load();
50
+ inner.detach();
51
+ }
52
+ };
53
+ }
54
+ //#endregion
55
+ Object.defineProperty(exports, "keynote", {
56
+ enumerable: true,
57
+ get: function() {
58
+ return keynote_exports;
59
+ }
60
+ });
@@ -0,0 +1,54 @@
1
+ import { t as __exportAll } from "./chunk-D7D4PA-g.mjs";
2
+ import { t as attach_dom_surface } from "./dom-DHaTIObb.mjs";
3
+ //#region src/presets/keynote.ts
4
+ var keynote_exports = /* @__PURE__ */ __exportAll({ attach: () => attach });
5
+ /**
6
+ * Attach a keynote-shaped DOM surface:
7
+ * - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
8
+ * first frame).
9
+ * - Installs a `'cover'` camera constraint bound to the document root, so
10
+ * the user can't zoom out past the slide or pan past its edges.
11
+ * - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
12
+ * re-fits the camera to the new document.
13
+ *
14
+ * Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
15
+ * `set_padding` for present-mode toggles. The returned `detach()`
16
+ * additionally tears down the load subscription.
17
+ */
18
+ function attach(editor, opts) {
19
+ const inner = attach_dom_surface(editor, {
20
+ ...opts.surface,
21
+ container: opts.container,
22
+ fit: true
23
+ });
24
+ let padding = opts.padding ?? 80;
25
+ let pan_overshoot = opts.pan_overshoot ?? 0;
26
+ const apply = () => {
27
+ inner.camera.constraints = {
28
+ type: "cover",
29
+ bounds: "<root>",
30
+ padding,
31
+ pan_overshoot
32
+ };
33
+ };
34
+ apply();
35
+ const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: inner.camera.constraints?.padding ?? 0 }));
36
+ return {
37
+ ...inner,
38
+ set_padding(p) {
39
+ padding = p;
40
+ apply();
41
+ inner.camera.fit("<root>", { margin: p });
42
+ },
43
+ set_pan_overshoot(o) {
44
+ pan_overshoot = o;
45
+ apply();
46
+ },
47
+ detach: () => {
48
+ unsub_load();
49
+ inner.detach();
50
+ }
51
+ };
52
+ }
53
+ //#endregion
54
+ export { keynote_exports as keynote };
package/dist/react.d.mts CHANGED
@@ -1,39 +1,85 @@
1
- import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-BryibVvr.mjs";
1
+ import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CcW4BVth.mjs";
2
+ import { n as DomSurfaceHandle } from "./dom-Dw2SPHgc.mjs";
3
+ import cmath from "@grida/cmath";
2
4
  import { ReactNode } from "react";
3
- import * as _$react_jsx_runtime0 from "react/jsx-runtime";
4
5
 
5
6
  //#region src/react.d.ts
6
7
  type SvgEditorProviderProps = {
7
- svg: string;
8
+ /**
9
+ * Initial document for the editor. Read **once** on first render —
10
+ * subsequent changes to this prop are silently ignored. For live updates
11
+ * (file open, page switch, reset to a snapshot), pull the editor from
12
+ * context with `useSvgEditor()` and call `editor.load(...)` imperatively.
13
+ *
14
+ * This is the same shape Lexical (`initialConfig.editorState`), Slate
15
+ * (`initialValue`), and TipTap (`content` option) settled on for the
16
+ * same reason: a reactive document prop creates a feedback loop with the
17
+ * editor's own emissions. The editor instance is the source of truth
18
+ * for the document during a session; React state is not.
19
+ */
20
+ initialSvg: string;
8
21
  providers?: Providers;
9
22
  style?: Partial<EditorStyle>;
10
23
  children: ReactNode;
11
24
  };
12
25
  /**
13
26
  * Owns the headless editor and exposes it via context. The editor is created
14
- * once on first render; subsequent prop changes to `svg` call `editor.load()`.
27
+ * once on first render with `initialSvg`; subsequent changes to that prop are
28
+ * silently ignored. To replace the document at runtime, call
29
+ * `useSvgEditor().load(...)` imperatively, or remount the provider with a
30
+ * different `key`.
15
31
  */
16
32
  declare function SvgEditorProvider({
17
- svg,
33
+ initialSvg,
18
34
  providers,
19
35
  style,
20
36
  children
21
- }: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
37
+ }: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
22
38
  type SvgEditorCanvasProps = {
23
39
  className?: string;
24
40
  style?: React.CSSProperties;
41
+ /**
42
+ * Install the default gesture set. Default `true`. See
43
+ * `DomSurfaceOptions.gestures`.
44
+ */
45
+ gestures?: boolean;
46
+ /**
47
+ * Auto-fit the document on initial attach. Default `false`. See
48
+ * `DomSurfaceOptions.fit`.
49
+ */
50
+ fit?: boolean;
51
+ /**
52
+ * Wire native ClipboardEvent transport (copy/cut/paste). Default `true`.
53
+ * Pass `false` to route all clipboard traffic through the
54
+ * `ClipboardProvider` seam. See `DomSurfaceOptions.clipboard`.
55
+ */
56
+ clipboard?: boolean; /** Initial camera transform. Default identity. */
57
+ initial_camera?: cmath.Transform;
58
+ /**
59
+ * Receives the `DomSurfaceHandle` once the surface is attached, and
60
+ * `null` on unmount/detach. Use this to thread `handle.camera` /
61
+ * `handle.gestures` into surrounding chrome (toolbars, badges, etc.).
62
+ */
63
+ onAttach?: (handle: DomSurfaceHandle | null) => void;
25
64
  };
26
65
  /**
27
66
  * Renders the editor's SVG into a `div` and wires it to the DOM surface.
28
67
  *
29
- * Internally calls `attach_dom_surface(editor, { container })` on mount and
30
- * `handle.detach()` on unmount. This is the only UI component the package
31
- * ships; everything else (toolbar, property panel, etc.) is consumer-built.
68
+ * Internally calls `attach_dom_surface(editor, { container, ... })` on
69
+ * mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
70
+ * gestures) are reached via the `onAttach` callback — there is no global
71
+ * context for them, because a host may mount multiple canvases in the
72
+ * same editor session.
32
73
  */
33
74
  declare function SvgEditorCanvas({
34
75
  className,
35
- style
36
- }: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
76
+ style,
77
+ gestures,
78
+ fit,
79
+ clipboard,
80
+ initial_camera,
81
+ onAttach
82
+ }: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
37
83
  declare function useSvgEditor(): SvgEditor;
38
84
  /**
39
85
  * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
@@ -45,5 +91,80 @@ declare function useEditorState<T>(selector: (state: EditorState) => T, equals?:
45
91
  * re-renders (commands themselves don't change identity).
46
92
  */
47
93
  declare function useCommands(): Commands;
94
+ /**
95
+ * Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
96
+ * the handle (or null if it isn't attached yet) and a selector that reads
97
+ * what you need from the camera. The returned value updates on every
98
+ * camera mutation — does NOT bump `editor.state.version`.
99
+ *
100
+ * Typical use: zoom badge in a toolbar.
101
+ *
102
+ * ```tsx
103
+ * const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
104
+ * return <div>{Math.round(zoom * 100)}%</div>;
105
+ * ```
106
+ *
107
+ * The `fallback` is what's returned when `handle` is `null` (before mount /
108
+ * after detach). It's also the SSR snapshot value — anything that won't
109
+ * mismatch with the first client render.
110
+ */
111
+ declare function useCameraSnapshot<T>(handle: DomSurfaceHandle | null, selector: (camera: DomSurfaceHandle["camera"]) => T, fallback: T): T;
112
+ /** Current selection (frozen, identity-stable across no-op emits). */
113
+ declare function useSelection(): readonly NodeId[];
114
+ /** Active tool. Identity-stable when `set_tool` is a no-op. */
115
+ declare function useTool(): Tool;
116
+ /** Current mode (`"select"` | `"edit-content"`). */
117
+ declare function useMode(): Mode;
118
+ /**
119
+ * What kind of content-edit is active, or `null` when not in content-edit.
120
+ *
121
+ * Symmetric with `useMode()` but at a finer grain — resolves whether the
122
+ * single selected node is a path or a text node so consumers (e.g. the
123
+ * vector-edit toolbar) can render the right affordances. Mirrors the
124
+ * dispatch logic in the host's `enter_content_edit` router which checks
125
+ * `tag_of(id) === "path"` vs `"text" / "tspan"`.
126
+ *
127
+ * Returns `null` for the (defensive) case of `edit-content` with no
128
+ * selection, and for any tag that's neither path nor text.
129
+ */
130
+ declare function useContentEditKind(): "path" | "text" | null;
131
+ /** Whether the history stack has an undoable entry. */
132
+ declare function useCanUndo(): boolean;
133
+ /** Whether the history stack has a redoable entry. */
134
+ declare function useCanRedo(): boolean;
135
+ /** Hook-owned `PaintPreviewSession`. See block comment above. */
136
+ declare function usePaintPreview(channel: "fill" | "stroke"): PaintPreviewSession;
137
+ /** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
138
+ declare function usePropertyPreview(name: string): PreviewSession;
139
+ /** Bound `editor.load(svg)`. Stable across renders. */
140
+ declare function useEditorLoad(): (svg: string) => void;
141
+ /** Bound `editor.serialize()`. Stable across renders. */
142
+ declare function useEditorSerialize(): () => string;
143
+ /**
144
+ * Push a hover override into the HUD surface — e.g. when the user hovers
145
+ * a row in a layers panel. The HUD will render the override's outline.
146
+ *
147
+ * Pass `null` to clear and let the pointer pick take over again. On
148
+ * unmount, the hook clears any override it set last so the canvas
149
+ * doesn't stay highlighted on a node that no longer has a panel row.
150
+ */
151
+ declare function useHoverOverride(): (id: NodeId | null) => void;
152
+ /**
153
+ * Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
154
+ * document-space `point`, the `node_id` under it (`null` for empty canvas),
155
+ * the `button`, and `mods`. The handler fires once per tap, after the editor's
156
+ * own selection handling. Observe-only: it cannot prevent or alter selection.
157
+ *
158
+ * This is the React edge-wire over `editor.subscribe_pick`. The handler is
159
+ * kept in a ref so re-subscription is never triggered by handler identity —
160
+ * pass an inline closure freely. Pick is editor-scoped (it survives surface
161
+ * detach), so this is a hook, not a `SvgEditorCanvas` prop.
162
+ *
163
+ * Typical use: a comment / annotation tool anchors a popover at `e.point` and
164
+ * scopes its action to `e.node_id` (or to the whole document when `null`).
165
+ *
166
+ * @unstable See {@link PickEvent}.
167
+ */
168
+ declare function useEditorPick(handler: (e: PickEvent) => void): void;
48
169
  //#endregion
49
- export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };
170
+ export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorPick, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
package/dist/react.d.ts CHANGED
@@ -1,39 +1,85 @@
1
- import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-klT8wu-x.js";
2
- import * as _$react_jsx_runtime0 from "react/jsx-runtime";
1
+ import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CxqRhhzP.js";
2
+ import { n as DomSurfaceHandle } from "./dom-CQkWJNrK.js";
3
+ import cmath from "@grida/cmath";
3
4
  import { ReactNode } from "react";
4
5
 
5
6
  //#region src/react.d.ts
6
7
  type SvgEditorProviderProps = {
7
- svg: string;
8
+ /**
9
+ * Initial document for the editor. Read **once** on first render —
10
+ * subsequent changes to this prop are silently ignored. For live updates
11
+ * (file open, page switch, reset to a snapshot), pull the editor from
12
+ * context with `useSvgEditor()` and call `editor.load(...)` imperatively.
13
+ *
14
+ * This is the same shape Lexical (`initialConfig.editorState`), Slate
15
+ * (`initialValue`), and TipTap (`content` option) settled on for the
16
+ * same reason: a reactive document prop creates a feedback loop with the
17
+ * editor's own emissions. The editor instance is the source of truth
18
+ * for the document during a session; React state is not.
19
+ */
20
+ initialSvg: string;
8
21
  providers?: Providers;
9
22
  style?: Partial<EditorStyle>;
10
23
  children: ReactNode;
11
24
  };
12
25
  /**
13
26
  * Owns the headless editor and exposes it via context. The editor is created
14
- * once on first render; subsequent prop changes to `svg` call `editor.load()`.
27
+ * once on first render with `initialSvg`; subsequent changes to that prop are
28
+ * silently ignored. To replace the document at runtime, call
29
+ * `useSvgEditor().load(...)` imperatively, or remount the provider with a
30
+ * different `key`.
15
31
  */
16
32
  declare function SvgEditorProvider({
17
- svg,
33
+ initialSvg,
18
34
  providers,
19
35
  style,
20
36
  children
21
- }: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
37
+ }: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
22
38
  type SvgEditorCanvasProps = {
23
39
  className?: string;
24
40
  style?: React.CSSProperties;
41
+ /**
42
+ * Install the default gesture set. Default `true`. See
43
+ * `DomSurfaceOptions.gestures`.
44
+ */
45
+ gestures?: boolean;
46
+ /**
47
+ * Auto-fit the document on initial attach. Default `false`. See
48
+ * `DomSurfaceOptions.fit`.
49
+ */
50
+ fit?: boolean;
51
+ /**
52
+ * Wire native ClipboardEvent transport (copy/cut/paste). Default `true`.
53
+ * Pass `false` to route all clipboard traffic through the
54
+ * `ClipboardProvider` seam. See `DomSurfaceOptions.clipboard`.
55
+ */
56
+ clipboard?: boolean; /** Initial camera transform. Default identity. */
57
+ initial_camera?: cmath.Transform;
58
+ /**
59
+ * Receives the `DomSurfaceHandle` once the surface is attached, and
60
+ * `null` on unmount/detach. Use this to thread `handle.camera` /
61
+ * `handle.gestures` into surrounding chrome (toolbars, badges, etc.).
62
+ */
63
+ onAttach?: (handle: DomSurfaceHandle | null) => void;
25
64
  };
26
65
  /**
27
66
  * Renders the editor's SVG into a `div` and wires it to the DOM surface.
28
67
  *
29
- * Internally calls `attach_dom_surface(editor, { container })` on mount and
30
- * `handle.detach()` on unmount. This is the only UI component the package
31
- * ships; everything else (toolbar, property panel, etc.) is consumer-built.
68
+ * Internally calls `attach_dom_surface(editor, { container, ... })` on
69
+ * mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
70
+ * gestures) are reached via the `onAttach` callback — there is no global
71
+ * context for them, because a host may mount multiple canvases in the
72
+ * same editor session.
32
73
  */
33
74
  declare function SvgEditorCanvas({
34
75
  className,
35
- style
36
- }: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
76
+ style,
77
+ gestures,
78
+ fit,
79
+ clipboard,
80
+ initial_camera,
81
+ onAttach
82
+ }: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
37
83
  declare function useSvgEditor(): SvgEditor;
38
84
  /**
39
85
  * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
@@ -45,5 +91,80 @@ declare function useEditorState<T>(selector: (state: EditorState) => T, equals?:
45
91
  * re-renders (commands themselves don't change identity).
46
92
  */
47
93
  declare function useCommands(): Commands;
94
+ /**
95
+ * Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
96
+ * the handle (or null if it isn't attached yet) and a selector that reads
97
+ * what you need from the camera. The returned value updates on every
98
+ * camera mutation — does NOT bump `editor.state.version`.
99
+ *
100
+ * Typical use: zoom badge in a toolbar.
101
+ *
102
+ * ```tsx
103
+ * const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
104
+ * return <div>{Math.round(zoom * 100)}%</div>;
105
+ * ```
106
+ *
107
+ * The `fallback` is what's returned when `handle` is `null` (before mount /
108
+ * after detach). It's also the SSR snapshot value — anything that won't
109
+ * mismatch with the first client render.
110
+ */
111
+ declare function useCameraSnapshot<T>(handle: DomSurfaceHandle | null, selector: (camera: DomSurfaceHandle["camera"]) => T, fallback: T): T;
112
+ /** Current selection (frozen, identity-stable across no-op emits). */
113
+ declare function useSelection(): readonly NodeId[];
114
+ /** Active tool. Identity-stable when `set_tool` is a no-op. */
115
+ declare function useTool(): Tool;
116
+ /** Current mode (`"select"` | `"edit-content"`). */
117
+ declare function useMode(): Mode;
118
+ /**
119
+ * What kind of content-edit is active, or `null` when not in content-edit.
120
+ *
121
+ * Symmetric with `useMode()` but at a finer grain — resolves whether the
122
+ * single selected node is a path or a text node so consumers (e.g. the
123
+ * vector-edit toolbar) can render the right affordances. Mirrors the
124
+ * dispatch logic in the host's `enter_content_edit` router which checks
125
+ * `tag_of(id) === "path"` vs `"text" / "tspan"`.
126
+ *
127
+ * Returns `null` for the (defensive) case of `edit-content` with no
128
+ * selection, and for any tag that's neither path nor text.
129
+ */
130
+ declare function useContentEditKind(): "path" | "text" | null;
131
+ /** Whether the history stack has an undoable entry. */
132
+ declare function useCanUndo(): boolean;
133
+ /** Whether the history stack has a redoable entry. */
134
+ declare function useCanRedo(): boolean;
135
+ /** Hook-owned `PaintPreviewSession`. See block comment above. */
136
+ declare function usePaintPreview(channel: "fill" | "stroke"): PaintPreviewSession;
137
+ /** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
138
+ declare function usePropertyPreview(name: string): PreviewSession;
139
+ /** Bound `editor.load(svg)`. Stable across renders. */
140
+ declare function useEditorLoad(): (svg: string) => void;
141
+ /** Bound `editor.serialize()`. Stable across renders. */
142
+ declare function useEditorSerialize(): () => string;
143
+ /**
144
+ * Push a hover override into the HUD surface — e.g. when the user hovers
145
+ * a row in a layers panel. The HUD will render the override's outline.
146
+ *
147
+ * Pass `null` to clear and let the pointer pick take over again. On
148
+ * unmount, the hook clears any override it set last so the canvas
149
+ * doesn't stay highlighted on a node that no longer has a panel row.
150
+ */
151
+ declare function useHoverOverride(): (id: NodeId | null) => void;
152
+ /**
153
+ * Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
154
+ * document-space `point`, the `node_id` under it (`null` for empty canvas),
155
+ * the `button`, and `mods`. The handler fires once per tap, after the editor's
156
+ * own selection handling. Observe-only: it cannot prevent or alter selection.
157
+ *
158
+ * This is the React edge-wire over `editor.subscribe_pick`. The handler is
159
+ * kept in a ref so re-subscription is never triggered by handler identity —
160
+ * pass an inline closure freely. Pick is editor-scoped (it survives surface
161
+ * detach), so this is a hook, not a `SvgEditorCanvas` prop.
162
+ *
163
+ * Typical use: a comment / annotation tool anchors a popover at `e.point` and
164
+ * scopes its action to `e.node_id` (or to the whole document when `null`).
165
+ *
166
+ * @unstable See {@link PickEvent}.
167
+ */
168
+ declare function useEditorPick(handler: (e: PickEvent) => void): void;
48
169
  //#endregion
49
- export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };
170
+ export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorPick, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };