@grida/svg-editor 1.0.0-alpha.5 → 1.0.0

package/dist/react.mjs

@@ -1,29 +1,25 @@
 "use client";
-import { t as createSvgEditor } from "./editor-CRflVqEz.mjs";
-import { t as attach_dom_surface } from "./dom-l5Y1Wf8C.mjs";
-import { createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { t as createSvgEditor } from "./editor-CWNtt1vu.mjs";
+import { t as attach_dom_surface } from "./dom-tM3Dr1EK.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();
@@ -43,7 +39,7 @@ function SvgEditorProvider({ svg, providers, style, children }) {
 * context for them, because a host may mount multiple canvases in the
 * same editor session.
 */
-function SvgEditorCanvas({ className, style, gestures, fit, initial_camera, onAttach }) {
+function SvgEditorCanvas({ className, style, gestures, fit, clipboard, initial_camera, onAttach }) {
 	const editor = useSvgEditor();
 	const ref = useRef(null);
 	const on_attach_ref = useRef(onAttach);
@@ -57,6 +53,7 @@ function SvgEditorCanvas({ className, style, gestures, fit, initial_camera, onAt
 			container,
 			gestures,
 			fit,
+			clipboard,
 			initial_camera: initial_camera_ref.current
 		});
 		on_attach_ref.current?.(handle);
@@ -67,7 +64,8 @@ function SvgEditorCanvas({ className, style, gestures, fit, initial_camera, onAt
 	}, [
 		editor,
 		gestures,
-		fit
+		fit,
+		clipboard
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -127,5 +125,150 @@ function useCommands() {
 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, useCameraSnapshot, 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.5",
+  "version": "1.0.0",
   "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"
   ],
@@ -38,17 +58,22 @@
     "tag": "alpha"
   },
   "dependencies": {
-    "svg-pathdata": "^7.2.0",
-    "@grida/cmath": "0.1.0",
-    "@grida/history": "0.1.0",
-    "@grida/hud": "0.1.0",
-    "@grida/keybinding": "0.1.0",
-    "@grida/text-editor": "0.1.0"
+    "@grida/cmath": "0.2.3",
+    "@grida/color": "0.1.0",
+    "@grida/history": "0.1.2",
+    "@grida/hud": "0.4.0",
+    "@grida/keybinding": "0.2.2",
+    "@grida/svg": "0.3.0",
+    "@grida/text-editor": "0.1.2",
+    "@grida/vn": "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"
   },
@@ -65,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"
   }

package/dist/dom-CMXNUMjP.d.mts

@@ -1,48 +0,0 @@
-import { _ as Camera, f as Gestures, o as SurfaceHandle, s as SvgEditor } from "./editor-KRAmUodY.mjs";
-import cmath from "@grida/cmath";
-
-//#region src/dom.d.ts
-type DomSurfaceOptions = {
-  /** Mount the SVG inside this container. */container: HTMLElement;
-  /**
-   * Install the default gesture set (wheel-pan/zoom, space-drag, middle-mouse,
-   * keyboard zoom). Default `true`. Pass `false` to start blank and bind à la
-   * carte via `handle.gestures.bind(...)`.
-   */
-  gestures?: boolean;
-  /**
-   * Auto-fit the document into the viewport on initial attach. Default
-   * `false`. Mirrors Excalidraw's `initialData.scrollToContent`.
-   * Subsequent `editor.load()` calls do NOT re-fit — call
-   * `handle.camera.fit("<root>")` yourself if you want that behavior.
-   */
-  fit?: boolean;
-  /**
-   * Initial camera transform. Default `cmath.transform.identity`. Ignored
-   * when `fit: true`.
-   */
-  initial_camera?: cmath.Transform;
-};
-/**
- * Surface handle for the DOM surface. Extends the editor's core
- * `SurfaceHandle` with the viewport-scoped concerns: pan/zoom (`camera`)
- * and pointer/wheel/keyboard gesture bindings (`gestures`).
- *
- * Camera + gestures are **surface-scoped**: detaching the surface drops
- * both. They never appear on the headless `SvgEditor`.
- */
-type DomSurfaceHandle = SurfaceHandle & {
-  camera: Camera;
-  gestures: Gestures;
-};
-/**
- * Attach a DOM surface to a headless editor. Returns a `DomSurfaceHandle`
- * whose `detach()` is the inverse — DOM cleared, listeners removed,
- * gestures uninstalled.
- *
- * Usage is one-shot per container: the surface owns the container's children
- * for its lifetime, and `detach()` restores it to empty.
- */
-declare function attach_dom_surface(editor: SvgEditor, options: DomSurfaceOptions): DomSurfaceHandle;
-//#endregion
-export { DomSurfaceOptions as n, attach_dom_surface as r, DomSurfaceHandle as t };