@grida/svg-editor 1.0.0-alpha.1 → 1.0.0-alpha.12

package/dist/react.js

@@ -1,30 +1,27 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_dom = require("./dom-CfP_ZURh.js");
-const require_editor = require("./editor-DQWUWrVZ.js");
+require("./insertions-BJ-6o6o5.js");
+const require_editor = require("./editor-CdyC3uAe.js");
+const require_dom = require("./dom-Cvm9Towu.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react.tsx
 const SvgEditorContext = (0, react.createContext)(null);
 /**
 * Owns the headless editor and exposes it via context. The editor is created
-* once on first render; subsequent prop changes to `svg` call `editor.load()`.
+* once on first render with `initialSvg`; subsequent changes to that prop are
+* silently ignored. To replace the document at runtime, call
+* `useSvgEditor().load(...)` imperatively, or remount the provider with a
+* different `key`.
 */
-function SvgEditorProvider({ svg, providers, style, children }) {
+function SvgEditorProvider({ initialSvg, providers, style, children }) {
 	const editor_ref = (0, react.useRef)(null);
 	if (editor_ref.current === null) editor_ref.current = require_editor.createSvgEditor({
-		svg,
+		svg: initialSvg,
 		providers,
 		style
 	});
 	const editor = editor_ref.current;
-	const last_svg = (0, react.useRef)(svg);
-	(0, react.useEffect)(() => {
-		if (last_svg.current !== svg) {
-			editor.load(svg);
-			last_svg.current = svg;
-		}
-	}, [svg, editor]);
 	(0, react.useEffect)(() => {
 		return () => {
 			editor.dispose();
@@ -38,19 +35,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 +105,131 @@ 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);
+}
+/** Current selection (frozen, identity-stable across no-op emits). */
+function useSelection() {
+	return useEditorState((s) => s.selection);
+}
+/** Active tool. Identity-stable when `set_tool` is a no-op. */
+function useTool() {
+	return useEditorState((s) => s.tool);
+}
+/** Current mode (`"select"` | `"edit-content"`). */
+function useMode() {
+	return useEditorState((s) => s.mode);
+}
+/** Whether the history stack has an undoable entry. */
+function useCanUndo() {
+	return useEditorState((s) => s.can_undo);
+}
+/** Whether the history stack has a redoable entry. */
+function useCanRedo() {
+	return useEditorState((s) => s.can_redo);
+}
+function use_lifecycle_session(open, deps) {
+	const sessionRef = (0, react.useRef)(null);
+	const ops = (0, react.useMemo)(() => ({
+		ensure() {
+			if (!sessionRef.current) sessionRef.current = open();
+			return sessionRef.current;
+		},
+		finalize(action, commit) {
+			const s = sessionRef.current;
+			if (!s) return;
+			sessionRef.current = null;
+			if (action === "commit") commit(s);
+			else s.discard();
+		}
+	}), deps);
+	(0, react.useEffect)(() => {
+		return () => ops.finalize("discard", () => {});
+	}, [ops]);
+	return ops;
+}
+/** Hook-owned `PaintPreviewSession`. See block comment above. */
+function usePaintPreview(channel) {
+	const editor = useSvgEditor();
+	const lc = use_lifecycle_session(() => editor.commands.preview_paint(channel), [editor, channel]);
+	return (0, react.useMemo)(() => ({
+		update: (paint) => lc.ensure().update(paint),
+		commit: () => lc.finalize("commit", (s) => s.commit()),
+		discard: () => lc.finalize("discard", () => {})
+	}), [lc]);
+}
+/** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
+function usePropertyPreview(name) {
+	const editor = useSvgEditor();
+	const lc = use_lifecycle_session(() => editor.commands.preview_property(name), [editor, name]);
+	return (0, react.useMemo)(() => ({
+		update: (value) => lc.ensure().update(value),
+		commit: () => lc.finalize("commit", (s) => s.commit()),
+		discard: () => lc.finalize("discard", () => {})
+	}), [lc]);
+}
+/** Bound `editor.load(svg)`. Stable across renders. */
+function useEditorLoad() {
+	const editor = useSvgEditor();
+	return (0, react.useCallback)((svg) => editor.load(svg), [editor]);
+}
+/** Bound `editor.serialize()`. Stable across renders. */
+function useEditorSerialize() {
+	const editor = useSvgEditor();
+	return (0, react.useCallback)(() => editor.serialize(), [editor]);
+}
+/**
+* Push a hover override into the HUD surface — e.g. when the user hovers
+* a row in a layers panel. The HUD will render the override's outline.
+*
+* Pass `null` to clear and let the pointer pick take over again. On
+* unmount, the hook clears any override it set last so the canvas
+* doesn't stay highlighted on a node that no longer has a panel row.
+*/
+function useHoverOverride() {
+	const editor = useSvgEditor();
+	const lastSetRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		return () => {
+			if (lastSetRef.current !== null && editor.surface_hover() === lastSetRef.current) editor.set_surface_hover_override(null);
+		};
+	}, [editor]);
+	return (0, react.useCallback)((id) => {
+		lastSetRef.current = id;
+		editor.set_surface_hover_override(id);
+	}, [editor]);
+}
 //#endregion
 exports.SvgEditorCanvas = SvgEditorCanvas;
 exports.SvgEditorProvider = SvgEditorProvider;
+exports.useCameraSnapshot = useCameraSnapshot;
+exports.useCanRedo = useCanRedo;
+exports.useCanUndo = useCanUndo;
 exports.useCommands = useCommands;
+exports.useEditorLoad = useEditorLoad;
+exports.useEditorSerialize = useEditorSerialize;
 exports.useEditorState = useEditorState;
+exports.useHoverOverride = useHoverOverride;
+exports.useMode = useMode;
+exports.usePaintPreview = usePaintPreview;
+exports.usePropertyPreview = usePropertyPreview;
+exports.useSelection = useSelection;
 exports.useSvgEditor = useSvgEditor;
+exports.useTool = useTool;

package/dist/react.mjs

@@ -1,29 +1,25 @@
 "use client";
-import { t as createSvgEditor } from "./editor-B5z-gTML.mjs";
-import { t as attach_dom_surface } from "./dom-kA8NDuVh.mjs";
-import { createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { t as createSvgEditor } from "./editor-DtuRIs-Q.mjs";
+import { t as attach_dom_surface } from "./dom-BlMk07oX.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react.tsx
 const SvgEditorContext = createContext(null);
 /**
 * Owns the headless editor and exposes it via context. The editor is created
-* once on first render; subsequent prop changes to `svg` call `editor.load()`.
+* once on first render with `initialSvg`; subsequent changes to that prop are
+* silently ignored. To replace the document at runtime, call
+* `useSvgEditor().load(...)` imperatively, or remount the provider with a
+* different `key`.
 */
-function SvgEditorProvider({ svg, providers, style, children }) {
+function SvgEditorProvider({ initialSvg, providers, style, children }) {
 	const editor_ref = useRef(null);
 	if (editor_ref.current === null) editor_ref.current = createSvgEditor({
-		svg,
+		svg: initialSvg,
 		providers,
 		style
 	});
 	const editor = editor_ref.current;
-	const last_svg = useRef(svg);
-	useEffect(() => {
-		if (last_svg.current !== svg) {
-			editor.load(svg);
-			last_svg.current = svg;
-		}
-	}, [svg, editor]);
 	useEffect(() => {
 		return () => {
 			editor.dispose();
@@ -37,19 +33,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 +103,116 @@ 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);
+}
+/** Current selection (frozen, identity-stable across no-op emits). */
+function useSelection() {
+	return useEditorState((s) => s.selection);
+}
+/** Active tool. Identity-stable when `set_tool` is a no-op. */
+function useTool() {
+	return useEditorState((s) => s.tool);
+}
+/** Current mode (`"select"` | `"edit-content"`). */
+function useMode() {
+	return useEditorState((s) => s.mode);
+}
+/** Whether the history stack has an undoable entry. */
+function useCanUndo() {
+	return useEditorState((s) => s.can_undo);
+}
+/** Whether the history stack has a redoable entry. */
+function useCanRedo() {
+	return useEditorState((s) => s.can_redo);
+}
+function use_lifecycle_session(open, deps) {
+	const sessionRef = useRef(null);
+	const ops = useMemo(() => ({
+		ensure() {
+			if (!sessionRef.current) sessionRef.current = open();
+			return sessionRef.current;
+		},
+		finalize(action, commit) {
+			const s = sessionRef.current;
+			if (!s) return;
+			sessionRef.current = null;
+			if (action === "commit") commit(s);
+			else s.discard();
+		}
+	}), deps);
+	useEffect(() => {
+		return () => ops.finalize("discard", () => {});
+	}, [ops]);
+	return ops;
+}
+/** Hook-owned `PaintPreviewSession`. See block comment above. */
+function usePaintPreview(channel) {
+	const editor = useSvgEditor();
+	const lc = use_lifecycle_session(() => editor.commands.preview_paint(channel), [editor, channel]);
+	return useMemo(() => ({
+		update: (paint) => lc.ensure().update(paint),
+		commit: () => lc.finalize("commit", (s) => s.commit()),
+		discard: () => lc.finalize("discard", () => {})
+	}), [lc]);
+}
+/** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
+function usePropertyPreview(name) {
+	const editor = useSvgEditor();
+	const lc = use_lifecycle_session(() => editor.commands.preview_property(name), [editor, name]);
+	return useMemo(() => ({
+		update: (value) => lc.ensure().update(value),
+		commit: () => lc.finalize("commit", (s) => s.commit()),
+		discard: () => lc.finalize("discard", () => {})
+	}), [lc]);
+}
+/** Bound `editor.load(svg)`. Stable across renders. */
+function useEditorLoad() {
+	const editor = useSvgEditor();
+	return useCallback((svg) => editor.load(svg), [editor]);
+}
+/** Bound `editor.serialize()`. Stable across renders. */
+function useEditorSerialize() {
+	const editor = useSvgEditor();
+	return useCallback(() => editor.serialize(), [editor]);
+}
+/**
+* Push a hover override into the HUD surface — e.g. when the user hovers
+* a row in a layers panel. The HUD will render the override's outline.
+*
+* Pass `null` to clear and let the pointer pick take over again. On
+* unmount, the hook clears any override it set last so the canvas
+* doesn't stay highlighted on a node that no longer has a panel row.
+*/
+function useHoverOverride() {
+	const editor = useSvgEditor();
+	const lastSetRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (lastSetRef.current !== null && editor.surface_hover() === lastSetRef.current) editor.set_surface_hover_override(null);
+		};
+	}, [editor]);
+	return useCallback((id) => {
+		lastSetRef.current = id;
+		editor.set_surface_hover_override(id);
+	}, [editor]);
+}
 //#endregion
-export { SvgEditorCanvas, SvgEditorProvider, useCommands, useEditorState, useSvgEditor };
+export { SvgEditorCanvas, SvgEditorProvider, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grida/svg-editor",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.12",
   "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": {
@@ -33,12 +38,12 @@
     "tag": "alpha"
   },
   "dependencies": {
-    "svg-pathdata": "^7.2.0",
-    "@grida/hud": "0.1.0",
+    "@grida/cmath": "0.2.1",
+    "@grida/hud": "0.2.0",
+    "@grida/keybinding": "0.2.0",
     "@grida/history": "0.1.0",
-    "@grida/cmath": "0.1.0",
-    "@grida/keybinding": "0.1.0",
-    "@grida/text-editor": "0.1.0"
+    "@grida/svg": "0.1.0",
+    "@grida/text-editor": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19",