@grida/svg-editor 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/presets.d.mts

@@ -1,5 +1,5 @@
-import { c as SvgEditor } from "./editor-BH03X8cX.mjs";
-import { n as DomSurfaceOptions, t as DomSurfaceHandle } from "./dom-DgB4f-TE.mjs";
+import { c as SvgEditor } from "./editor-Dl7c0q5A.mjs";
+import { n as DomSurfaceOptions, t as DomSurfaceHandle } from "./dom-CK6GlgFF.mjs";
 
 //#region src/presets/keynote.d.ts
 declare namespace keynote_d_exports {

package/dist/presets.d.ts

@@ -1,5 +1,5 @@
-import { c as SvgEditor } from "./editor-Bd4-VCEJ.js";
-import { n as DomSurfaceOptions, t as DomSurfaceHandle } from "./dom-DCX-a8Kr.js";
+import { c as SvgEditor } from "./editor-BKoo9SPL.js";
+import { n as DomSurfaceOptions, t as DomSurfaceHandle } from "./dom-CsKXTaNw.js";
 
 //#region \0rolldown/runtime.js
 declare namespace keynote_d_exports {

package/dist/presets.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_insertions = require("./insertions-BJ-6o6o5.js");
-const require_dom = require("./dom-Cvm9Towu.js");
+const require_model = require("./model-CJ1Ctq14.js");
+const require_dom = require("./dom-Dee6FtgZ.js");
 //#region src/presets/keynote.ts
-var keynote_exports = /* @__PURE__ */ require_insertions.__exportAll({ attach: () => attach });
+var keynote_exports = /* @__PURE__ */ require_model.__exportAll({ attach: () => attach });
 /**
 * Attach a keynote-shaped DOM surface:
 * - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on

package/dist/presets.mjs

@@ -1,5 +1,5 @@
-import { t as __exportAll } from "./chunk-CfYAbeIz.mjs";
-import { t as attach_dom_surface } from "./dom-BlMk07oX.mjs";
+import { t as __exportAll } from "./chunk-D7D4PA-g.mjs";
+import { t as attach_dom_surface } from "./dom-DILY80j7.mjs";
 //#region src/presets/keynote.ts
 var keynote_exports = /* @__PURE__ */ __exportAll({ attach: () => attach });
 /**

package/dist/react.d.mts

@@ -1,8 +1,7 @@
-import { B as PaintPreviewSession, E as EditorStyle, G as Providers, H as PreviewSession, I as Mode, L as NodeId, T as EditorState, X as Tool, c as SvgEditor, t as Commands } from "./editor-BH03X8cX.mjs";
-import { t as DomSurfaceHandle } from "./dom-DgB4f-TE.mjs";
+import { A as EditorState, G as PaintPreviewSession, H as NodeId, V as Mode, X as Providers, c as SvgEditor, j as EditorStyle, q as PreviewSession, t as Commands, tt as Tool } from "./editor-Dl7c0q5A.mjs";
+import { t as DomSurfaceHandle } from "./dom-CK6GlgFF.mjs";
 import cmath from "@grida/cmath";
 import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react.d.ts
 type SvgEditorProviderProps = {
@@ -35,7 +34,7 @@ declare function SvgEditorProvider({
   providers,
   style,
   children
-}: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+}: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
 type SvgEditorCanvasProps = {
   className?: string;
   style?: React.CSSProperties;
@@ -73,7 +72,7 @@ declare function SvgEditorCanvas({
   fit,
   initial_camera,
   onAttach
-}: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
+}: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
 declare function useSvgEditor(): SvgEditor;
 /**
  * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
@@ -109,6 +108,19 @@ declare function useSelection(): readonly NodeId[];
 declare function useTool(): Tool;
 /** Current mode (`"select"` | `"edit-content"`). */
 declare function useMode(): 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.
+ */
+declare function useContentEditKind(): "path" | "text" | null;
 /** Whether the history stack has an undoable entry. */
 declare function useCanUndo(): boolean;
 /** Whether the history stack has a redoable entry. */
@@ -131,4 +143,4 @@ declare function useEditorSerialize(): () => string;
  */
 declare function useHoverOverride(): (id: NodeId | null) => void;
 //#endregion
-export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
+export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };

package/dist/react.d.ts

@@ -1,7 +1,6 @@
-import { B as PaintPreviewSession, E as EditorStyle, G as Providers, H as PreviewSession, I as Mode, L as NodeId, T as EditorState, X as Tool, c as SvgEditor, t as Commands } from "./editor-Bd4-VCEJ.js";
-import { t as DomSurfaceHandle } from "./dom-DCX-a8Kr.js";
+import { A as EditorState, G as PaintPreviewSession, H as NodeId, V as Mode, X as Providers, c as SvgEditor, j as EditorStyle, q as PreviewSession, t as Commands, tt as Tool } from "./editor-BKoo9SPL.js";
+import { t as DomSurfaceHandle } from "./dom-CsKXTaNw.js";
 import cmath from "@grida/cmath";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/react.d.ts
@@ -35,7 +34,7 @@ declare function SvgEditorProvider({
   providers,
   style,
   children
-}: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+}: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
 type SvgEditorCanvasProps = {
   className?: string;
   style?: React.CSSProperties;
@@ -73,7 +72,7 @@ declare function SvgEditorCanvas({
   fit,
   initial_camera,
   onAttach
-}: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
+}: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
 declare function useSvgEditor(): SvgEditor;
 /**
  * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
@@ -109,6 +108,19 @@ declare function useSelection(): readonly NodeId[];
 declare function useTool(): Tool;
 /** Current mode (`"select"` | `"edit-content"`). */
 declare function useMode(): 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.
+ */
+declare function useContentEditKind(): "path" | "text" | null;
 /** Whether the history stack has an undoable entry. */
 declare function useCanUndo(): boolean;
 /** Whether the history stack has a redoable entry. */
@@ -131,4 +143,4 @@ declare function useEditorSerialize(): () => string;
  */
 declare function useHoverOverride(): (id: NodeId | null) => void;
 //#endregion
-export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
+export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };

package/dist/react.js

@@ -1,8 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./insertions-BJ-6o6o5.js");
-const require_editor = require("./editor-CdyC3uAe.js");
-const require_dom = require("./dom-Cvm9Towu.js");
+const require_editor = require("./editor-F8ckj9X1.js");
+const require_dom = require("./dom-Dee6FtgZ.js");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react.tsx
@@ -137,6 +136,27 @@ function useTool() {
 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);
@@ -223,6 +243,7 @@ exports.useCameraSnapshot = useCameraSnapshot;
 exports.useCanRedo = useCanRedo;
 exports.useCanUndo = useCanUndo;
 exports.useCommands = useCommands;
+exports.useContentEditKind = useContentEditKind;
 exports.useEditorLoad = useEditorLoad;
 exports.useEditorSerialize = useEditorSerialize;
 exports.useEditorState = useEditorState;

package/dist/react.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { t as createSvgEditor } from "./editor-DtuRIs-Q.mjs";
-import { t as attach_dom_surface } from "./dom-BlMk07oX.mjs";
+import { t as createSvgEditor } from "./editor-CvWpD5mu.mjs";
+import { t as attach_dom_surface } from "./dom-DILY80j7.mjs";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react.tsx
@@ -135,6 +135,27 @@ function useTool() {
 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);
@@ -215,4 +236,4 @@ function useHoverOverride() {
 	}, [editor]);
 }
 //#endregion
-export { SvgEditorCanvas, SvgEditorProvider, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
+export { SvgEditorCanvas, SvgEditorProvider, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "@grida/svg-editor",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "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",
@@ -38,17 +55,21 @@
     "tag": "alpha"
   },
   "dependencies": {
-    "@grida/cmath": "0.2.2",
-    "@grida/history": "0.1.0",
-    "@grida/hud": "0.2.0",
-    "@grida/keybinding": "0.2.0",
-    "@grida/svg": "0.1.0",
-    "@grida/text-editor": "0.1.1"
+    "@grida/cmath": "0.2.3",
+    "@grida/keybinding": "0.2.1",
+    "@grida/svg": "0.1.1",
+    "@grida/history": "0.1.1",
+    "@grida/hud": "0.2.1",
+    "@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 +86,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-DCX-a8Kr.d.ts

@@ -1,57 +0,0 @@
-import { c as SvgEditor, p as Gestures, s as SurfaceHandle, y as Camera } from "./editor-Bd4-VCEJ.js";
-import cmath from "@grida/cmath";
-//#region src/core/snap/options.d.ts
-type SnapOptions = {
-  /** When false, snap behavior and snap-guide rendering are both off. */enabled: boolean;
-  /** Snap threshold in HUD canvas pixels (container CSS px in svg-editor;
-   *  whatever space the consumer feeds in). Constant across zoom because
-   *  the input rects are already in screen-equivalent units. */
-  threshold_px: number;
-};
-declare const DEFAULT_SNAP_OPTIONS: SnapOptions;
-//#endregion
-//#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 { SnapOptions as a, DEFAULT_SNAP_OPTIONS as i, DomSurfaceOptions as n, attach_dom_surface as r, DomSurfaceHandle as t };

package/dist/dom-DgB4f-TE.d.mts

@@ -1,59 +0,0 @@
-import { c as SvgEditor, p as Gestures, s as SurfaceHandle, y as Camera } from "./editor-BH03X8cX.mjs";
-import cmath from "@grida/cmath";
-import { guide } from "@grida/cmath/_snap";
-
-//#region src/core/snap/options.d.ts
-type SnapOptions = {
-  /** When false, snap behavior and snap-guide rendering are both off. */enabled: boolean;
-  /** Snap threshold in HUD canvas pixels (container CSS px in svg-editor;
-   *  whatever space the consumer feeds in). Constant across zoom because
-   *  the input rects are already in screen-equivalent units. */
-  threshold_px: number;
-};
-declare const DEFAULT_SNAP_OPTIONS: SnapOptions;
-//#endregion
-//#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 { SnapOptions as a, DEFAULT_SNAP_OPTIONS as i, DomSurfaceOptions as n, attach_dom_surface as r, DomSurfaceHandle as t };