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

package/dist/presets.js

@@ -0,0 +1,55 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dom = require("./dom-CoVZzFqy.js");
+//#region src/presets/keynote.ts
+var keynote_exports = /* @__PURE__ */ require_dom.__exportAll({ attach: () => attach });
+/**
+* Attach a keynote-shaped DOM surface:
+* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
+*   first frame).
+* - Installs a `'cover'` camera constraint bound to the document root, so
+*   the user can't zoom out past the slide or pan past its edges.
+* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
+*   re-fits the camera to the new document.
+*
+* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
+* `set_padding` for present-mode toggles. The returned `detach()`
+* additionally tears down the load subscription.
+*/
+function attach(editor, opts) {
+	let padding = opts.padding ?? 80;
+	const inner = require_dom.attach_dom_surface(editor, {
+		...opts.surface,
+		container: opts.container,
+		fit: true
+	});
+	inner.camera.constraints = {
+		type: "cover",
+		bounds: "<root>",
+		padding
+	};
+	const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: padding }));
+	return {
+		camera: inner.camera,
+		gestures: inner.gestures,
+		set_padding(p) {
+			padding = p;
+			inner.camera.constraints = {
+				type: "cover",
+				bounds: "<root>",
+				padding: p
+			};
+			inner.camera.fit("<root>", { margin: p });
+		},
+		detach: () => {
+			unsub_load();
+			inner.detach();
+		}
+	};
+}
+//#endregion
+Object.defineProperty(exports, "keynote", {
+	enumerable: true,
+	get: function() {
+		return keynote_exports;
+	}
+});

package/dist/presets.mjs

@@ -0,0 +1,50 @@
+import { t as __exportAll } from "./chunk-CfYAbeIz.mjs";
+import { t as attach_dom_surface } from "./dom-CmOu0HvI.mjs";
+//#region src/presets/keynote.ts
+var keynote_exports = /* @__PURE__ */ __exportAll({ attach: () => attach });
+/**
+* Attach a keynote-shaped DOM surface:
+* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
+*   first frame).
+* - Installs a `'cover'` camera constraint bound to the document root, so
+*   the user can't zoom out past the slide or pan past its edges.
+* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
+*   re-fits the camera to the new document.
+*
+* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
+* `set_padding` for present-mode toggles. The returned `detach()`
+* additionally tears down the load subscription.
+*/
+function attach(editor, opts) {
+	let padding = opts.padding ?? 80;
+	const inner = attach_dom_surface(editor, {
+		...opts.surface,
+		container: opts.container,
+		fit: true
+	});
+	inner.camera.constraints = {
+		type: "cover",
+		bounds: "<root>",
+		padding
+	};
+	const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: padding }));
+	return {
+		camera: inner.camera,
+		gestures: inner.gestures,
+		set_padding(p) {
+			padding = p;
+			inner.camera.constraints = {
+				type: "cover",
+				bounds: "<root>",
+				padding: p
+			};
+			inner.camera.fit("<root>", { margin: p });
+		},
+		detach: () => {
+			unsub_load();
+			inner.detach();
+		}
+	};
+}
+//#endregion
+export { keynote_exports as keynote };

package/dist/react.d.mts

@@ -1,4 +1,6 @@
-import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-BryibVvr.mjs";
+import { B as Providers, C as EditorStyle, S as EditorState, o as SvgEditor, t as Commands } from "./editor-Uu6dZX4y.mjs";
+import { t as DomSurfaceHandle } from "./dom-DJnZhtOd.mjs";
+import cmath from "@grida/cmath";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -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.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 { B as Providers, C as EditorStyle, S as EditorState, o as SvgEditor, t as Commands } from "./editor-D2l_CDr0.js";
+import { t as DomSurfaceHandle } from "./dom-Cn-RtjRL.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-CoVZzFqy.js");
+const require_editor = require("./editor-D2zZAyny.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-CjK56cgb.mjs";
+import { t as attach_dom_surface } from "./dom-CmOu0HvI.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.4",
   "description": "Headless SVG editor (experimental).",
   "license": "MIT",
   "author": "Grida",
@@ -26,6 +26,11 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.mjs",
       "require": "./dist/react.js"
+    },
+    "./presets": {
+      "types": "./dist/presets.d.ts",
+      "import": "./dist/presets.mjs",
+      "require": "./dist/presets.js"
     }
   },
   "publishConfig": {
@@ -34,11 +39,11 @@
   },
   "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/text-editor": "0.1.0",
+    "@grida/keybinding": "0.1.0",
+    "@grida/cmath": "0.1.0"
   },
   "devDependencies": {
     "@types/react": "^19",