@grida/svg-editor 1.0.0-alpha.1

package/dist/react.mjs

@@ -0,0 +1,92 @@
+"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 { 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()`.
+*/
+function SvgEditorProvider({ svg, providers, style, children }) {
+	const editor_ref = useRef(null);
+	if (editor_ref.current === null) editor_ref.current = createSvgEditor({
+		svg,
+		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();
+		};
+	}, [editor]);
+	return /* @__PURE__ */ jsx(SvgEditorContext.Provider, {
+		value: editor,
+		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.
+*/
+function SvgEditorCanvas({ className, style }) {
+	const editor = useSvgEditor();
+	const ref = useRef(null);
+	useEffect(() => {
+		const container = ref.current;
+		if (!container) return;
+		const handle = attach_dom_surface(editor, { container });
+		return () => handle.detach();
+	}, [editor]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className,
+		style
+	});
+}
+function useSvgEditor() {
+	const editor = useContext(SvgEditorContext);
+	if (editor === null) throw new Error("useSvgEditor must be used inside a <SvgEditorProvider>.");
+	return editor;
+}
+/**
+* Subscribe to a slice of `editor.state`. Re-renders when the selected slice
+* changes by reference (or by the supplied `equals` function).
+*/
+function useEditorState(selector, equals = Object.is) {
+	const editor = useSvgEditor();
+	const last_ref = useRef({
+		has: false,
+		value: void 0
+	});
+	return useSyncExternalStore((cb) => editor.subscribe(cb), () => {
+		const next = selector(editor.state);
+		if (!last_ref.current.has || !equals(last_ref.current.value, next)) last_ref.current = {
+			has: true,
+			value: next
+		};
+		return last_ref.current.value;
+	}, () => selector(editor.state));
+}
+/**
+* Sugar for `useSvgEditor().commands`. The returned object is stable across
+* re-renders (commands themselves don't change identity).
+*/
+function useCommands() {
+	const editor = useSvgEditor();
+	return useMemo(() => editor.commands, [editor]);
+}
+//#endregion
+export { SvgEditorCanvas, SvgEditorProvider, useCommands, useEditorState, useSvgEditor };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@grida/svg-editor",
+  "version": "1.0.0-alpha.1",
+  "description": "Headless SVG editor (experimental).",
+  "license": "MIT",
+  "author": "Grida",
+  "repository": "https://github.com/gridaco/grida",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dom": {
+      "types": "./dist/dom.d.ts",
+      "import": "./dist/dom.mjs",
+      "require": "./dist/dom.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "dependencies": {
+    "svg-pathdata": "^7.2.0",
+    "@grida/hud": "0.1.0",
+    "@grida/history": "0.1.0",
+    "@grida/cmath": "0.1.0",
+    "@grida/keybinding": "0.1.0",
+    "@grida/text-editor": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "tsdown": "^0.21.9",
+    "typescript": "^6",
+    "vitest": "^4"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "bench": "vitest bench --run",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}