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

package/dist/react.js

@@ -1,30 +1,26 @@
 "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_editor = require("./editor-BlByfVyF.js");
+const require_dom = require("./dom-CuK0LFUY.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 +34,40 @@ 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, clipboard, 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,
+			clipboard,
+			initial_camera: initial_camera_ref.current
+		});
+		on_attach_ref.current?.(handle);
+		return () => {
+			on_attach_ref.current?.(null);
+			handle.detach();
+		};
+	}, [
+		editor,
+		gestures,
+		fit,
+		clipboard
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		className,
@@ -89,9 +106,187 @@ 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);
+}
+/**
+* What kind of content-edit is active, or `null` when not in content-edit.
+*
+* Symmetric with `useMode()` but at a finer grain — resolves whether the
+* single selected node is a path or a text node so consumers (e.g. the
+* vector-edit toolbar) can render the right affordances. Mirrors the
+* dispatch logic in the host's `enter_content_edit` router which checks
+* `tag_of(id) === "path"` vs `"text" / "tspan"`.
+*
+* Returns `null` for the (defensive) case of `edit-content` with no
+* selection, and for any tag that's neither path nor text.
+*/
+function useContentEditKind() {
+	const editor = useSvgEditor();
+	const [mode, id] = useEditorState((s) => `${s.mode}::${s.selection[0] ?? ""}`, (a, b) => a === b).split("::");
+	if (mode !== "edit-content" || !id) return null;
+	const tag = editor.tree().nodes.get(id)?.tag;
+	if (tag === "path") return "path";
+	if (tag === "text" || tag === "tspan") return "text";
+	return null;
+}
+/** 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?.live === false) sessionRef.current = null;
+			if (!sessionRef.current) sessionRef.current = open();
+			return sessionRef.current;
+		},
+		/** Non-creating read: is a gesture currently open underneath? */
+		live() {
+			return sessionRef.current?.live === true;
+		},
+		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)(() => ({
+		get live() {
+			return lc.live();
+		},
+		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)(() => ({
+		get live() {
+			return lc.live();
+		},
+		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]);
+}
+/**
+* Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
+* document-space `point`, the `node_id` under it (`null` for empty canvas),
+* the `button`, and `mods`. The handler fires once per tap, after the editor's
+* own selection handling. Observe-only: it cannot prevent or alter selection.
+*
+* This is the React edge-wire over `editor.subscribe_pick`. The handler is
+* kept in a ref so re-subscription is never triggered by handler identity —
+* pass an inline closure freely. Pick is editor-scoped (it survives surface
+* detach), so this is a hook, not a `SvgEditorCanvas` prop.
+*
+* Typical use: a comment / annotation tool anchors a popover at `e.point` and
+* scopes its action to `e.node_id` (or to the whole document when `null`).
+*
+* @unstable See {@link PickEvent}.
+*/
+function useEditorPick(handler) {
+	const editor = useSvgEditor();
+	const handler_ref = (0, react.useRef)(handler);
+	handler_ref.current = handler;
+	(0, react.useEffect)(() => editor.subscribe_pick((e) => handler_ref.current(e)), [editor]);
+}
 //#endregion
 exports.SvgEditorCanvas = SvgEditorCanvas;
 exports.SvgEditorProvider = SvgEditorProvider;
+exports.useCameraSnapshot = useCameraSnapshot;
+exports.useCanRedo = useCanRedo;
+exports.useCanUndo = useCanUndo;
 exports.useCommands = useCommands;
+exports.useContentEditKind = useContentEditKind;
+exports.useEditorLoad = useEditorLoad;
+exports.useEditorPick = useEditorPick;
+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-M6j8XGO5.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-CJ3ROm0G.mjs";
+import { t as attach_dom_surface } from "./dom-DHaTIObb.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,40 @@ 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, clipboard, 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,
+			clipboard,
+			initial_camera: initial_camera_ref.current
+		});
+		on_attach_ref.current?.(handle);
+		return () => {
+			on_attach_ref.current?.(null);
+			handle.detach();
+		};
+	}, [
+		editor,
+		gestures,
+		fit,
+		clipboard
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className,
@@ -88,5 +105,170 @@ 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);
+}
+/**
+* What kind of content-edit is active, or `null` when not in content-edit.
+*
+* Symmetric with `useMode()` but at a finer grain — resolves whether the
+* single selected node is a path or a text node so consumers (e.g. the
+* vector-edit toolbar) can render the right affordances. Mirrors the
+* dispatch logic in the host's `enter_content_edit` router which checks
+* `tag_of(id) === "path"` vs `"text" / "tspan"`.
+*
+* Returns `null` for the (defensive) case of `edit-content` with no
+* selection, and for any tag that's neither path nor text.
+*/
+function useContentEditKind() {
+	const editor = useSvgEditor();
+	const [mode, id] = useEditorState((s) => `${s.mode}::${s.selection[0] ?? ""}`, (a, b) => a === b).split("::");
+	if (mode !== "edit-content" || !id) return null;
+	const tag = editor.tree().nodes.get(id)?.tag;
+	if (tag === "path") return "path";
+	if (tag === "text" || tag === "tspan") return "text";
+	return null;
+}
+/** 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?.live === false) sessionRef.current = null;
+			if (!sessionRef.current) sessionRef.current = open();
+			return sessionRef.current;
+		},
+		/** Non-creating read: is a gesture currently open underneath? */
+		live() {
+			return sessionRef.current?.live === true;
+		},
+		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(() => ({
+		get live() {
+			return lc.live();
+		},
+		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(() => ({
+		get live() {
+			return lc.live();
+		},
+		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]);
+}
+/**
+* Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
+* document-space `point`, the `node_id` under it (`null` for empty canvas),
+* the `button`, and `mods`. The handler fires once per tap, after the editor's
+* own selection handling. Observe-only: it cannot prevent or alter selection.
+*
+* This is the React edge-wire over `editor.subscribe_pick`. The handler is
+* kept in a ref so re-subscription is never triggered by handler identity —
+* pass an inline closure freely. Pick is editor-scoped (it survives surface
+* detach), so this is a hook, not a `SvgEditorCanvas` prop.
+*
+* Typical use: a comment / annotation tool anchors a popover at `e.point` and
+* scopes its action to `e.node_id` (or to the whole document when `null`).
+*
+* @unstable See {@link PickEvent}.
+*/
+function useEditorPick(handler) {
+	const editor = useSvgEditor();
+	const handler_ref = useRef(handler);
+	handler_ref.current = handler;
+	useEffect(() => editor.subscribe_pick((e) => handler_ref.current(e)), [editor]);
+}
 //#endregion
-export { SvgEditorCanvas, SvgEditorProvider, useCommands, useEditorState, useSvgEditor };
+export { SvgEditorCanvas, SvgEditorProvider, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorPick, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };

package/package.json

@@ -1,10 +1,30 @@
 {
   "name": "@grida/svg-editor",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "description": "Headless SVG editor (experimental).",
+  "keywords": [
+    "bezier",
+    "design-tool",
+    "editor",
+    "grida",
+    "headless",
+    "path-editor",
+    "pen-tool",
+    "react",
+    "svg",
+    "svg-editor",
+    "typescript",
+    "vector",
+    "vector-editor",
+    "vector-graphics"
+  ],
+  "homepage": "https://grida.co/packages/@grida/svg-editor",
   "license": "MIT",
   "author": "Grida",
-  "repository": "https://github.com/gridaco/grida",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gridaco/grida"
+  },
   "files": [
     "dist"
   ],
@@ -26,6 +46,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,17 +58,22 @@
     "tag": "alpha"
   },
   "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/cmath": "0.2.3",
+    "@grida/keybinding": "0.2.1",
+    "@grida/history": "0.1.2",
+    "@grida/hud": "0.2.3",
+    "@grida/vn": "0.1.0",
+    "@grida/svg": "0.2.0",
+    "@grida/text-editor": "0.1.2",
+    "@grida/color": "0.1.0"
   },
   "devDependencies": {
     "@types/react": "^19",
+    "@vitest/browser": "4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "playwright": "^1.58.2",
     "react": "^19",
-    "tsdown": "^0.21.9",
+    "tsdown": "^0.22.1",
     "typescript": "^6",
     "vitest": "^4"
   },
@@ -60,6 +90,7 @@
     "build": "tsdown",
     "dev": "tsdown --watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }