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

package/dist/react.d.ts

@@ -1,4 +1,6 @@
-import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-klT8wu-x.js";
+import { S as EditorStyle, o as SvgEditor, t as Commands, x as EditorState, z as Providers } from "./editor-Da446SPO.js";
+import { DomSurfaceHandle } from "./dom.js";
+import cmath from "@grida/cmath";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
@@ -22,17 +24,40 @@ declare function SvgEditorProvider({
 type SvgEditorCanvasProps = {
   className?: string;
   style?: React.CSSProperties;
+  /**
+   * Install the default gesture set. Default `true`. See
+   * `DomSurfaceOptions.gestures`.
+   */
+  gestures?: boolean;
+  /**
+   * Auto-fit the document on initial attach. Default `false`. See
+   * `DomSurfaceOptions.fit`.
+   */
+  fit?: boolean; /** Initial camera transform. Default identity. */
+  initial_camera?: cmath.Transform;
+  /**
+   * Receives the `DomSurfaceHandle` once the surface is attached, and
+   * `null` on unmount/detach. Use this to thread `handle.camera` /
+   * `handle.gestures` into surrounding chrome (toolbars, badges, etc.).
+   */
+  onAttach?: (handle: DomSurfaceHandle | null) => void;
 };
 /**
  * Renders the editor's SVG into a `div` and wires it to the DOM surface.
  *
- * Internally calls `attach_dom_surface(editor, { container })` on mount and
- * `handle.detach()` on unmount. This is the only UI component the package
- * ships; everything else (toolbar, property panel, etc.) is consumer-built.
+ * Internally calls `attach_dom_surface(editor, { container, ... })` on
+ * mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
+ * gestures) are reached via the `onAttach` callback — there is no global
+ * context for them, because a host may mount multiple canvases in the
+ * same editor session.
  */
 declare function SvgEditorCanvas({
   className,
-  style
+  style,
+  gestures,
+  fit,
+  initial_camera,
+  onAttach
 }: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
 declare function useSvgEditor(): SvgEditor;
 /**
@@ -45,5 +70,23 @@ declare function useEditorState<T>(selector: (state: EditorState) => T, equals?:
  * re-renders (commands themselves don't change identity).
  */
 declare function useCommands(): Commands;
+/**
+ * Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
+ * the handle (or null if it isn't attached yet) and a selector that reads
+ * what you need from the camera. The returned value updates on every
+ * camera mutation — does NOT bump `editor.state.version`.
+ *
+ * Typical use: zoom badge in a toolbar.
+ *
+ * ```tsx
+ * const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
+ * return <div>{Math.round(zoom * 100)}%</div>;
+ * ```
+ *
+ * The `fallback` is what's returned when `handle` is `null` (before mount /
+ * after detach). It's also the SSR snapshot value — anything that won't
+ * mismatch with the first client render.
+ */
+declare function useCameraSnapshot<T>(handle: DomSurfaceHandle | null, selector: (camera: DomSurfaceHandle["camera"]) => T, fallback: T): T;
 //#endregion
-export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };
+export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCommands, useEditorState, useSvgEditor };

package/dist/react.js

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dom = require("./dom-CfP_ZURh.js");
-const require_editor = require("./editor-DllAMsDu.js");
+const require_dom = require("./dom-BlJZWpR_.js");
+const require_editor = require("./editor-Eon0043Z.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react.tsx
@@ -38,19 +38,38 @@ function SvgEditorProvider({ svg, providers, style, children }) {
 /**
 * Renders the editor's SVG into a `div` and wires it to the DOM surface.
 *
-* Internally calls `attach_dom_surface(editor, { container })` on mount and
-* `handle.detach()` on unmount. This is the only UI component the package
-* ships; everything else (toolbar, property panel, etc.) is consumer-built.
+* Internally calls `attach_dom_surface(editor, { container, ... })` on
+* mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
+* gestures) are reached via the `onAttach` callback — there is no global
+* context for them, because a host may mount multiple canvases in the
+* same editor session.
 */
-function SvgEditorCanvas({ className, style }) {
+function SvgEditorCanvas({ className, style, gestures, fit, initial_camera, onAttach }) {
 	const editor = useSvgEditor();
 	const ref = (0, react.useRef)(null);
+	const on_attach_ref = (0, react.useRef)(onAttach);
+	on_attach_ref.current = onAttach;
+	const initial_camera_ref = (0, react.useRef)(initial_camera);
+	initial_camera_ref.current = initial_camera;
 	(0, react.useEffect)(() => {
 		const container = ref.current;
 		if (!container) return;
-		const handle = require_dom.attach_dom_surface(editor, { container });
-		return () => handle.detach();
-	}, [editor]);
+		const handle = require_dom.attach_dom_surface(editor, {
+			container,
+			gestures,
+			fit,
+			initial_camera: initial_camera_ref.current
+		});
+		on_attach_ref.current?.(handle);
+		return () => {
+			on_attach_ref.current?.(null);
+			handle.detach();
+		};
+	}, [
+		editor,
+		gestures,
+		fit
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		className,
@@ -89,9 +108,30 @@ function useCommands() {
 	const editor = useSvgEditor();
 	return (0, react.useMemo)(() => editor.commands, [editor]);
 }
+/**
+* Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
+* the handle (or null if it isn't attached yet) and a selector that reads
+* what you need from the camera. The returned value updates on every
+* camera mutation — does NOT bump `editor.state.version`.
+*
+* Typical use: zoom badge in a toolbar.
+*
+* ```tsx
+* const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
+* return <div>{Math.round(zoom * 100)}%</div>;
+* ```
+*
+* The `fallback` is what's returned when `handle` is `null` (before mount /
+* after detach). It's also the SSR snapshot value — anything that won't
+* mismatch with the first client render.
+*/
+function useCameraSnapshot(handle, selector, fallback) {
+	return (0, react.useSyncExternalStore)((cb) => handle?.camera.subscribe(cb) ?? (() => {}), () => handle ? selector(handle.camera) : fallback, () => fallback);
+}
 //#endregion
 exports.SvgEditorCanvas = SvgEditorCanvas;
 exports.SvgEditorProvider = SvgEditorProvider;
+exports.useCameraSnapshot = useCameraSnapshot;
 exports.useCommands = useCommands;
 exports.useEditorState = useEditorState;
 exports.useSvgEditor = useSvgEditor;

package/dist/react.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { t as createSvgEditor } from "./editor-M6j8XGO5.mjs";
-import { t as attach_dom_surface } from "./dom-kA8NDuVh.mjs";
+import { t as createSvgEditor } from "./editor-DP36h-SE.mjs";
+import { t as attach_dom_surface } from "./dom-D-5D_3o0.mjs";
 import { createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react.tsx
@@ -37,19 +37,38 @@ function SvgEditorProvider({ svg, providers, style, children }) {
 /**
 * Renders the editor's SVG into a `div` and wires it to the DOM surface.
 *
-* Internally calls `attach_dom_surface(editor, { container })` on mount and
-* `handle.detach()` on unmount. This is the only UI component the package
-* ships; everything else (toolbar, property panel, etc.) is consumer-built.
+* Internally calls `attach_dom_surface(editor, { container, ... })` on
+* mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
+* gestures) are reached via the `onAttach` callback — there is no global
+* context for them, because a host may mount multiple canvases in the
+* same editor session.
 */
-function SvgEditorCanvas({ className, style }) {
+function SvgEditorCanvas({ className, style, gestures, fit, initial_camera, onAttach }) {
 	const editor = useSvgEditor();
 	const ref = useRef(null);
+	const on_attach_ref = useRef(onAttach);
+	on_attach_ref.current = onAttach;
+	const initial_camera_ref = useRef(initial_camera);
+	initial_camera_ref.current = initial_camera;
 	useEffect(() => {
 		const container = ref.current;
 		if (!container) return;
-		const handle = attach_dom_surface(editor, { container });
-		return () => handle.detach();
-	}, [editor]);
+		const handle = attach_dom_surface(editor, {
+			container,
+			gestures,
+			fit,
+			initial_camera: initial_camera_ref.current
+		});
+		on_attach_ref.current?.(handle);
+		return () => {
+			on_attach_ref.current?.(null);
+			handle.detach();
+		};
+	}, [
+		editor,
+		gestures,
+		fit
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className,
@@ -88,5 +107,25 @@ function useCommands() {
 	const editor = useSvgEditor();
 	return useMemo(() => editor.commands, [editor]);
 }
+/**
+* Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
+* the handle (or null if it isn't attached yet) and a selector that reads
+* what you need from the camera. The returned value updates on every
+* camera mutation — does NOT bump `editor.state.version`.
+*
+* Typical use: zoom badge in a toolbar.
+*
+* ```tsx
+* const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
+* return <div>{Math.round(zoom * 100)}%</div>;
+* ```
+*
+* The `fallback` is what's returned when `handle` is `null` (before mount /
+* after detach). It's also the SSR snapshot value — anything that won't
+* mismatch with the first client render.
+*/
+function useCameraSnapshot(handle, selector, fallback) {
+	return useSyncExternalStore((cb) => handle?.camera.subscribe(cb) ?? (() => {}), () => handle ? selector(handle.camera) : fallback, () => fallback);
+}
 //#endregion
-export { SvgEditorCanvas, SvgEditorProvider, useCommands, useEditorState, useSvgEditor };
+export { SvgEditorCanvas, SvgEditorProvider, useCameraSnapshot, useCommands, useEditorState, useSvgEditor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grida/svg-editor",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Headless SVG editor (experimental).",
   "license": "MIT",
   "author": "Grida",
@@ -35,10 +35,10 @@
   "dependencies": {
     "svg-pathdata": "^7.2.0",
     "@grida/cmath": "0.1.0",
-    "@grida/history": "0.1.0",
-    "@grida/text-editor": "0.1.0",
     "@grida/hud": "0.1.0",
-    "@grida/keybinding": "0.1.0"
+    "@grida/keybinding": "0.1.0",
+    "@grida/history": "0.1.0",
+    "@grida/text-editor": "0.1.0"
   },
   "devDependencies": {
     "@types/react": "^19",