@canvus/react 0.1.0

package/dist/Canvus.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+import type { CanvusProps, CanvusContextValue } from "./types.js";
+/**
+ * Imperative handle exposed via `ref` on the `<Canvus />` component.
+ * Provides direct access to the workspace and React node methods.
+ */
+export type CanvusHandle = CanvusContextValue;
+/**
+ * The primary Canvus workspace component for React applications.
+ *
+ * Renders a container `<div>`, initializes the core `Workspace`
+ * engine on mount, and provides React node management methods
+ * via the `useCanvus()` hook.
+ *
+ * Children rendered inside `<Canvus>` can access the workspace
+ * and React node APIs via `useCanvus()`.
+ *
+ * @example
+ * ```tsx
+ * <Canvus
+ *   config={{ snapThreshold: 8 }}
+ *   onSelectionChange={(ids) => setSelected(ids)}
+ *   onReactNodeCommit={(id, snapshot) => save(id, snapshot)}
+ *   style={{ width: "100%", height: "100vh" }}
+ * >
+ *   <Toolbar />
+ * </Canvus>
+ * ```
+ *
+ * @example Imperative access via ref:
+ * ```tsx
+ * const canvusRef = useRef<CanvusHandle>(null);
+ *
+ * <Canvus ref={canvusRef}>
+ *   <button onClick={() => {
+ *     canvusRef.current?.addReactNode({ ... });
+ *   }}>
+ *     Add Node
+ *   </button>
+ * </Canvus>
+ * ```
+ */
+export declare const Canvus: import("react").ForwardRefExoticComponent<CanvusProps & {
+    children?: ReactNode;
+} & import("react").RefAttributes<CanvusContextValue>>;
+//# sourceMappingURL=Canvus.d.ts.map

package/dist/Canvus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvus.d.ts","sourceRoot":"","sources":["../src/Canvus.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAIlE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAwB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,MAAM;eAAuD,SAAS;sDAsDlF,CAAC"}

package/dist/Canvus.js

@@ -0,0 +1,90 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// ─────────────────────────────────────────────────────────────
+// @canvus/react — <Canvus /> Component
+//
+// The primary mount point for a Canvus workspace in React.
+// Renders a container div, initializes the Workspace via
+// CanvusProvider, and exposes the workspace through context.
+//
+// Usage:
+//   import { Canvus, useCanvus } from "@canvus/react";
+//
+//   function App() {
+//     return (
+//       <Canvus
+//         config={{ snapThreshold: 8 }}
+//         onSelectionChange={(ids) => console.log(ids)}
+//         style={{ width: "100%", height: "100vh" }}
+//       >
+//         <ToolPanel />
+//       </Canvus>
+//     );
+//   }
+//
+//   function ToolPanel() {
+//     const { addReactNode } = useCanvus();
+//     // ...
+//   }
+// ─────────────────────────────────────────────────────────────
+import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { CanvusProvider } from "./context.js";
+import { useCanvus } from "./useCanvus.js";
+// ── Internal Bridge ─────────────────────────────────────────
+/**
+ * Bridge component that exposes the context value via
+ * `useImperativeHandle` to the parent's forwarded ref.
+ */
+function CanvusBridge({ forwardedRef, children, }) {
+    const ctx = useCanvus();
+    useImperativeHandle(forwardedRef, () => ctx, [ctx]);
+    return _jsx(_Fragment, { children: children });
+}
+// ── Canvus Component ────────────────────────────────────────
+/**
+ * The primary Canvus workspace component for React applications.
+ *
+ * Renders a container `<div>`, initializes the core `Workspace`
+ * engine on mount, and provides React node management methods
+ * via the `useCanvus()` hook.
+ *
+ * Children rendered inside `<Canvus>` can access the workspace
+ * and React node APIs via `useCanvus()`.
+ *
+ * @example
+ * ```tsx
+ * <Canvus
+ *   config={{ snapThreshold: 8 }}
+ *   onSelectionChange={(ids) => setSelected(ids)}
+ *   onReactNodeCommit={(id, snapshot) => save(id, snapshot)}
+ *   style={{ width: "100%", height: "100vh" }}
+ * >
+ *   <Toolbar />
+ * </Canvus>
+ * ```
+ *
+ * @example Imperative access via ref:
+ * ```tsx
+ * const canvusRef = useRef<CanvusHandle>(null);
+ *
+ * <Canvus ref={canvusRef}>
+ *   <button onClick={() => {
+ *     canvusRef.current?.addReactNode({ ... });
+ *   }}>
+ *     Add Node
+ *   </button>
+ * </Canvus>
+ * ```
+ */
+export const Canvus = forwardRef(function Canvus({ config, style, className, children, 
+// Callbacks
+onHTMLCommit, onReactNodeCommit, onSelectionChange, onViewportChange, onOperationsGenerated, onNodeRectChange, onInteractionChange, onBreadcrumbChange, onTextEditRequest, }, ref) {
+    const containerRef = useRef(null);
+    return (_jsx("div", { ref: containerRef, className: className, style: {
+            position: "relative",
+            overflow: "hidden",
+            width: "100%",
+            height: "100%",
+            ...style,
+        }, children: _jsx(CanvusProvider, { containerRef: containerRef, config: config, onHTMLCommit: onHTMLCommit, onReactNodeCommit: onReactNodeCommit, onSelectionChange: onSelectionChange, onViewportChange: onViewportChange, onOperationsGenerated: onOperationsGenerated, onNodeRectChange: onNodeRectChange, onInteractionChange: onInteractionChange, onBreadcrumbChange: onBreadcrumbChange, onTextEditRequest: onTextEditRequest, children: _jsx(CanvusBridge, { forwardedRef: ref, children: children }) }) }));
+});
+//# sourceMappingURL=Canvus.js.map

package/dist/Canvus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvus.js","sourceRoot":"","sources":["../src/Canvus.tsx"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,uCAAuC;AACvC,EAAE;AACF,2DAA2D;AAC3D,yDAAyD;AACzD,6DAA6D;AAC7D,EAAE;AACF,SAAS;AACT,uDAAuD;AACvD,EAAE;AACF,qBAAqB;AACrB,eAAe;AACf,gBAAgB;AAChB,wCAAwC;AACxC,wDAAwD;AACxD,qDAAqD;AACrD,UAAU;AACV,wBAAwB;AACxB,kBAAkB;AAClB,SAAS;AACT,MAAM;AACN,EAAE;AACF,2BAA2B;AAC3B,4CAA4C;AAC5C,aAAa;AACb,MAAM;AACN,gEAAgE;AAEhE,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,MAAM,GAEP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAW3C,+DAA+D;AAE/D;;;GAGG;AACH,SAAS,YAAY,CAAC,EACpB,YAAY,EACZ,QAAQ,GAIT;IACC,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IAExB,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpD,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAED,+DAA+D;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,SAAS,MAAM,CACb,EACE,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ;AACR,YAAY;AACZ,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,GAClB,EACD,GAAG;IAEH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,KAAK;SACT,YAED,KAAC,cAAc,IACb,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,qBAAqB,EAAE,qBAAqB,EAC5C,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,YAEpC,KAAC,YAAY,IAAC,YAAY,EAAE,GAAG,YAC5B,QAAQ,GACI,GACA,GACb,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { CanvusContextValue, CanvusProps } from "./types.js";
+/**
+ * React context for accessing the Canvus workspace and
+ * React node management methods.
+ *
+ * @internal — consumers should use `useCanvus()` instead.
+ */
+export declare const CanvusContext: import("react").Context<CanvusContextValue | null>;
+interface CanvusProviderProps extends CanvusProps {
+    /** The container element to mount the Workspace into. */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    children?: ReactNode;
+}
+/**
+ * Internal provider that manages the Workspace lifecycle
+ * and React node mounting. Wrapped by `<Canvus />`.
+ *
+ * @internal
+ */
+export declare function CanvusProvider({ containerRef, config, onHTMLCommit, onReactNodeCommit, onSelectionChange, onViewportChange, onOperationsGenerated, onNodeRectChange, onInteractionChange, onBreadcrumbChange, onTextEditRequest, children, }: CanvusProviderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAWA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EAGZ,MAAM,YAAY,CAAC;AAIpB;;;;;GAKG;AACH,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAI5E,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,yDAAyD;IACzD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,mBAAmB,+BAwSrB"}

package/dist/context.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// ─────────────────────────────────────────────────────────────
+// @canvus/react — React Context & Provider
+//
+// Manages the Workspace lifecycle and React node mounting.
+// The CanvusProvider owns:
+//   1. The Workspace instance (created on mount, disposed on unmount)
+//   2. A Map<string, Root> of active React roots for mounted nodes
+//   3. A Map<string, ReactNodeDescriptor> tracking React node metadata
+//   4. The onHTMLCommit interception logic for commit routing
+// ─────────────────────────────────────────────────────────────
+import { createContext, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { createRoot } from "react-dom/client";
+import { Workspace } from "@canvus/core";
+// ── Context ─────────────────────────────────────────────────
+/**
+ * React context for accessing the Canvus workspace and
+ * React node management methods.
+ *
+ * @internal — consumers should use `useCanvus()` instead.
+ */
+export const CanvusContext = createContext(null);
+// ── Provider Component ──────────────────────────────────────
+/**
+ * Internal provider that manages the Workspace lifecycle
+ * and React node mounting. Wrapped by `<Canvus />`.
+ *
+ * @internal
+ */
+export function CanvusProvider({ containerRef, config, onHTMLCommit, onReactNodeCommit, onSelectionChange, onViewportChange, onOperationsGenerated, onNodeRectChange, onInteractionChange, onBreadcrumbChange, onTextEditRequest, children, }) {
+    const [workspace, setWorkspace] = useState(null);
+    // ── Stable refs for mutable tracking state ──────────
+    // These maps persist across renders without causing re-renders.
+    /** Active React roots indexed by node ID. */
+    const activeRootsRef = useRef(new Map());
+    /** React node metadata indexed by node ID. */
+    const reactNodeMetaRef = useRef(new Map());
+    /** Temporary store for recently deleted React node descriptors (for Undo/Redo restoration). */
+    const deletedReactNodesRef = useRef(new Map());
+    // ── Stable callback refs ────────────────────────────
+    // Store callbacks in refs so the Workspace doesn't need to
+    // be re-created when callbacks change.
+    const onHTMLCommitRef = useRef(onHTMLCommit);
+    onHTMLCommitRef.current = onHTMLCommit;
+    const onReactNodeCommitRef = useRef(onReactNodeCommit);
+    onReactNodeCommitRef.current = onReactNodeCommit;
+    const onSelectionChangeRef = useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    const onViewportChangeRef = useRef(onViewportChange);
+    onViewportChangeRef.current = onViewportChange;
+    const onOperationsGeneratedRef = useRef(onOperationsGenerated);
+    onOperationsGeneratedRef.current = onOperationsGenerated;
+    const onNodeRectChangeRef = useRef(onNodeRectChange);
+    onNodeRectChangeRef.current = onNodeRectChange;
+    const onInteractionChangeRef = useRef(onInteractionChange);
+    onInteractionChangeRef.current = onInteractionChange;
+    const onBreadcrumbChangeRef = useRef(onBreadcrumbChange);
+    onBreadcrumbChangeRef.current = onBreadcrumbChange;
+    const onTextEditRequestRef = useRef(onTextEditRequest);
+    onTextEditRequestRef.current = onTextEditRequest;
+    // ── Workspace Lifecycle ─────────────────────────────
+    // Store config in a ref — it's only consumed at workspace
+    // creation time and should not trigger re-creation.
+    const configRef = useRef(config);
+    configRef.current = config;
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const ws = new Workspace(container, {
+            onHTMLCommit: (id, html) => {
+                // Route commits: React nodes → onReactNodeCommit,
+                // vanilla HTML nodes → onHTMLCommit
+                const meta = reactNodeMetaRef.current.get(id);
+                if (meta) {
+                    // This is a React-managed node — build snapshot
+                    const node = ws.getNodeTree().get(id);
+                    const snapshot = {
+                        component: meta.component,
+                        componentName: meta.component.displayName ||
+                            meta.component.name ||
+                            "Unknown",
+                        props: meta.props,
+                        rect: node?.currentRect ?? meta.currentRect,
+                    };
+                    onReactNodeCommitRef.current?.(id, snapshot);
+                }
+                else {
+                    // Vanilla HTML node — pass through
+                    onHTMLCommitRef.current?.(id, html);
+                }
+            },
+            onSelectionChange: (ids) => onSelectionChangeRef.current?.(ids),
+            onViewportChange: (vp) => onViewportChangeRef.current?.(vp),
+            onOperationsGenerated: (ops) => onOperationsGeneratedRef.current?.(ops),
+            onNodeRectChange: (id, rect) => onNodeRectChangeRef.current?.(id, rect),
+            onInteractionChange: (mode) => onInteractionChangeRef.current?.(mode),
+            onBreadcrumbChange: (path) => onBreadcrumbChangeRef.current?.(path),
+            onTextEditRequest: onTextEditRequest
+                ? (nodeId, element, commit) => onTextEditRequestRef.current?.(nodeId, element, commit)
+                : undefined,
+            onNodeAdded: (id) => {
+                const deletedMeta = deletedReactNodesRef.current.get(id);
+                if (deletedMeta) {
+                    const container = ws.getContentRoot(id);
+                    if (container) {
+                        const root = createRoot(container);
+                        root.render(_jsx(deletedMeta.component, { ...deletedMeta.props }));
+                        activeRootsRef.current.set(id, root);
+                        reactNodeMetaRef.current.set(id, deletedMeta);
+                        deletedReactNodesRef.current.delete(id);
+                        const node = ws.getNodeTree().get(id);
+                        const snapshot = {
+                            component: deletedMeta.component,
+                            componentName: deletedMeta.component.displayName ||
+                                deletedMeta.component.name ||
+                                "Unknown",
+                            props: deletedMeta.props,
+                            rect: node?.currentRect ?? deletedMeta.currentRect,
+                        };
+                        onReactNodeCommitRef.current?.(id, snapshot);
+                    }
+                }
+            },
+            onNodeRemoved: (id) => {
+                const root = activeRootsRef.current.get(id);
+                if (root) {
+                    try {
+                        root.unmount();
+                    }
+                    catch {
+                        // Silently ignore
+                    }
+                    activeRootsRef.current.delete(id);
+                }
+                const meta = reactNodeMetaRef.current.get(id);
+                if (meta) {
+                    deletedReactNodesRef.current.set(id, meta);
+                    reactNodeMetaRef.current.delete(id);
+                }
+            },
+            onNodeCloned: (originalId, cloneId) => {
+                const meta = reactNodeMetaRef.current.get(originalId);
+                if (meta) {
+                    const container = ws.getContentRoot(cloneId);
+                    if (container) {
+                        const root = createRoot(container);
+                        root.render(_jsx(meta.component, { ...meta.props }));
+                        activeRootsRef.current.set(cloneId, root);
+                        const clonedMeta = {
+                            id: cloneId,
+                            component: meta.component,
+                            props: { ...meta.props },
+                            currentRect: ws.getNodeTree().get(cloneId)?.currentRect ?? meta.currentRect,
+                            parentId: ws.getNodeTree().get(cloneId)?.parentId ?? null,
+                        };
+                        reactNodeMetaRef.current.set(cloneId, clonedMeta);
+                    }
+                }
+            },
+        }, configRef.current);
+        setWorkspace(ws);
+        return () => {
+            // Unmount all React roots before disposing workspace
+            for (const root of activeRootsRef.current.values()) {
+                try {
+                    root.unmount();
+                }
+                catch {
+                    // Silently handle unmount errors during teardown
+                }
+            }
+            activeRootsRef.current.clear();
+            reactNodeMetaRef.current.clear();
+            ws.dispose();
+            setWorkspace(null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef]);
+    // ── React Node Lifecycle Methods ────────────────────
+    const addReactNode = useCallback((descriptor) => {
+        if (!workspace) {
+            console.warn("[@canvus/react] addReactNode called before workspace is ready.");
+            return;
+        }
+        const { id, component: Component, props, currentRect, parentId } = descriptor;
+        // 1. Create an empty shell in the core workspace
+        workspace.addNode({ id, rawMarkup: '<div data-canvus-react="true"></div>', currentRect }, parentId ?? null);
+        // 2. Get the content root (the inner <div>)
+        const container = workspace.getContentRoot(id);
+        if (!container) {
+            console.warn(`[@canvus/react] Could not find content root for node "${id}".`);
+            return;
+        }
+        // 3. Mount React component into the container
+        const root = createRoot(container);
+        root.render(_jsx(Component, { ...props }));
+        // 4. Track for updates and cleanup
+        activeRootsRef.current.set(id, root);
+        reactNodeMetaRef.current.set(id, descriptor);
+    }, [workspace]);
+    const updateReactNode = useCallback((id, props) => {
+        const root = activeRootsRef.current.get(id);
+        const meta = reactNodeMetaRef.current.get(id);
+        if (!root || !meta) {
+            console.warn(`[@canvus/react] Cannot update node "${id}" — not a React-managed node.`);
+            return;
+        }
+        // Update stored props
+        const updatedMeta = {
+            ...meta,
+            props: { ...meta.props, ...props },
+        };
+        reactNodeMetaRef.current.set(id, updatedMeta);
+        // Re-render with merged props
+        const Component = updatedMeta.component;
+        root.render(_jsx(Component, { ...updatedMeta.props }));
+    }, []);
+    const removeReactNode = useCallback((id) => {
+        const meta = reactNodeMetaRef.current.get(id);
+        if (meta) {
+            deletedReactNodesRef.current.set(id, meta);
+        }
+        // Unmount the React root first
+        const root = activeRootsRef.current.get(id);
+        if (root) {
+            root.unmount();
+            activeRootsRef.current.delete(id);
+        }
+        reactNodeMetaRef.current.delete(id);
+        // Then remove from the core workspace
+        workspace?.removeNode(id);
+    }, [workspace]);
+    const addNode = useCallback((...args) => {
+        if (!workspace) {
+            throw new Error("[@canvus/react] addNode called before workspace is ready.");
+        }
+        return workspace.addNode(...args);
+    }, [workspace]);
+    // ── Context Value ───────────────────────────────────
+    const contextValue = useMemo(() => ({
+        workspace,
+        addReactNode,
+        updateReactNode,
+        removeReactNode,
+        addNode,
+    }), [workspace, addReactNode, updateReactNode, removeReactNode, addNode]);
+    return (_jsx(CanvusContext.Provider, { value: contextValue, children: children }));
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Canvus } from "./Canvus.js";
+export type { CanvusHandle } from "./Canvus.js";
+export { useCanvus } from "./useCanvus.js";
+export { CanvusProvider, CanvusContext } from "./context.js";
+export type { CanvusProps, CanvusContextValue, ReactNodeDescriptor, ReactNodeSnapshot, } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7D,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+// ─────────────────────────────────────────────────────────────
+// @canvus/react — Public API Barrel Export
+// ─────────────────────────────────────────────────────────────
+// ── Components ──────────────────────────────────────────────
+export { Canvus } from "./Canvus.js";
+// ── Hooks ───────────────────────────────────────────────────
+export { useCanvus } from "./useCanvus.js";
+// ── Context (for advanced usage) ────────────────────────────
+export { CanvusProvider, CanvusContext } from "./context.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2CAA2C;AAC3C,gEAAgE;AAEhE,+DAA+D;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,+DAA+D;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,+DAA+D;AAE/D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,97 @@
+import type { Rect, WorkspaceConfig, WorkspaceCallbacks, WebHTMLNode, Workspace } from "@canvus/core";
+import type { ComponentType, CSSProperties } from "react";
+/**
+ * Descriptor for mounting a live React component as a canvas node.
+ *
+ * Instead of providing raw HTML markup, you provide a React component
+ * and its props. The `@canvus/react` layer will create an empty
+ * container in the core workspace and mount the component into it
+ * using React's `createRoot` API.
+ */
+export interface ReactNodeDescriptor {
+    /** Unique node identifier. */
+    id: string;
+    /** The React component to render inside the canvas node. */
+    component: ComponentType<any>;
+    /** Props to pass to the component. */
+    props: Record<string, any>;
+    /** Initial position and dimensions in canvas-space. */
+    currentRect: Rect;
+    /** Optional parent node ID for nested mounting. */
+    parentId?: string | null;
+}
+/**
+ * Snapshot emitted when a React-managed node is committed
+ * after a visual gesture (drag, resize, etc.).
+ *
+ * This replaces the Flat String Bridge's HTML output for
+ * React nodes, giving the host application structured data
+ * instead of rendered HTML markup.
+ */
+export interface ReactNodeSnapshot {
+    /** The React component reference. */
+    component: ComponentType<any>;
+    /** String name of the component (for serialization). */
+    componentName: string;
+    /** Current props at the time of commit. */
+    props: Record<string, any>;
+    /** Current canvas-space bounding rect after the gesture. */
+    rect: Rect;
+}
+/**
+ * Props for the `<Canvus />` component.
+ *
+ * Accepts workspace configuration, visual styling, and all
+ * workspace callbacks. React-managed node commits are routed
+ * to `onReactNodeCommit` instead of `onHTMLCommit`.
+ */
+export interface CanvusProps {
+    /** Workspace configuration (snap threshold, overlay styles, etc.). */
+    config?: WorkspaceConfig;
+    /** CSS styles applied to the container div. */
+    style?: CSSProperties;
+    /** CSS class name for the container div. */
+    className?: string;
+    /**
+     * Fired for vanilla HTML node commits only.
+     * React-managed nodes are filtered out and routed
+     * to `onReactNodeCommit` instead.
+     */
+    onHTMLCommit?: WorkspaceCallbacks["onHTMLCommit"];
+    /**
+     * Fired when a React-managed node is committed after
+     * a visual gesture (drag, resize, spacing adjustment).
+     * Provides the component reference, current props, and
+     * updated rect for host-side state management.
+     */
+    onReactNodeCommit?: (id: string, snapshot: ReactNodeSnapshot) => void;
+    onSelectionChange?: WorkspaceCallbacks["onSelectionChange"];
+    onViewportChange?: WorkspaceCallbacks["onViewportChange"];
+    onOperationsGenerated?: WorkspaceCallbacks["onOperationsGenerated"];
+    onNodeRectChange?: WorkspaceCallbacks["onNodeRectChange"];
+    onInteractionChange?: WorkspaceCallbacks["onInteractionChange"];
+    onBreadcrumbChange?: WorkspaceCallbacks["onBreadcrumbChange"];
+    onTextEditRequest?: WorkspaceCallbacks["onTextEditRequest"];
+}
+/**
+ * Value returned by the `useCanvus()` hook.
+ *
+ * Provides both the raw `Workspace` instance for imperative
+ * access and convenience methods for React node lifecycle.
+ */
+export interface CanvusContextValue {
+    /** The raw Workspace instance for imperative access, or null before mount. */
+    workspace: Workspace | null;
+    /** Mount a React component as a canvas node. */
+    addReactNode: (descriptor: ReactNodeDescriptor) => void;
+    /** Update props of a mounted React node (triggers re-render). */
+    updateReactNode: (id: string, props: Record<string, any>) => void;
+    /** Remove a React node from the canvas and unmount its React root. */
+    removeReactNode: (id: string) => void;
+    /**
+     * Add a vanilla HTML node (pass-through to core).
+     * For standard raw-markup nodes that don't use React rendering.
+     */
+    addNode: (node: Readonly<WebHTMLNode>, parentId?: string | null, index?: number) => Rect;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,IAAI,EACJ,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI1D;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,uDAAuD;IACvD,WAAW,EAAE,IAAI,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAID;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,wDAAwD;IACxD,aAAa,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,4DAA4D;IAC5D,IAAI,EAAE,IAAI,CAAC;CACZ;AAID;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB;;;;OAIG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAElD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAItE,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC1D,qBAAqB,CAAC,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACpE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;IAChE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CAC7D;AAID;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAE5B,gDAAgD;IAChD,YAAY,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAExD,iEAAiE;IACjE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAElE,sEAAsE;IACtE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;;OAGG;IACH,OAAO,EAAE,CACP,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC,EAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EACxB,KAAK,CAAC,EAAE,MAAM,KACX,IAAI,CAAC;CACX"}

package/dist/types.js

@@ -0,0 +1,6 @@
+// ─────────────────────────────────────────────────────────────
+// @canvus/react — Type Definitions
+// React-specific types for the Canvus React bindings package.
+// ─────────────────────────────────────────────────────────────
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,mCAAmC;AACnC,8DAA8D;AAC9D,gEAAgE"}

package/dist/useCanvus.d.ts

@@ -0,0 +1,31 @@
+import type { CanvusContextValue } from "./types.js";
+/**
+ * Hook to access the Canvus workspace and React node APIs.
+ *
+ * Must be called from a component rendered inside a `<Canvus />`
+ * component tree.
+ *
+ * @returns The workspace instance and React node lifecycle methods.
+ *
+ * @example
+ * ```tsx
+ * function Toolbar() {
+ *   const { workspace, addReactNode, updateReactNode, removeReactNode } = useCanvus();
+ *
+ *   const handleAddCard = () => {
+ *     addReactNode({
+ *       id: `card-${Date.now()}`,
+ *       component: DashboardCard,
+ *       props: { title: "New Card" },
+ *       currentRect: { x: 100, y: 100, width: 300, height: 200 },
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleAddCard}>Add Card</button>;
+ * }
+ * ```
+ *
+ * @throws Error if called outside of a `<Canvus />` component tree.
+ */
+export declare function useCanvus(): CanvusContextValue;
+//# sourceMappingURL=useCanvus.d.ts.map

package/dist/useCanvus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvus.d.ts","sourceRoot":"","sources":["../src/useCanvus.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAW9C"}

package/dist/useCanvus.js

@@ -0,0 +1,46 @@
+// ─────────────────────────────────────────────────────────────
+// @canvus/react — useCanvus() Hook
+//
+// Provides access to the Canvus workspace and React node
+// management methods from any component rendered inside
+// a <Canvus /> component.
+// ─────────────────────────────────────────────────────────────
+import { useContext } from "react";
+import { CanvusContext } from "./context.js";
+/**
+ * Hook to access the Canvus workspace and React node APIs.
+ *
+ * Must be called from a component rendered inside a `<Canvus />`
+ * component tree.
+ *
+ * @returns The workspace instance and React node lifecycle methods.
+ *
+ * @example
+ * ```tsx
+ * function Toolbar() {
+ *   const { workspace, addReactNode, updateReactNode, removeReactNode } = useCanvus();
+ *
+ *   const handleAddCard = () => {
+ *     addReactNode({
+ *       id: `card-${Date.now()}`,
+ *       component: DashboardCard,
+ *       props: { title: "New Card" },
+ *       currentRect: { x: 100, y: 100, width: 300, height: 200 },
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleAddCard}>Add Card</button>;
+ * }
+ * ```
+ *
+ * @throws Error if called outside of a `<Canvus />` component tree.
+ */
+export function useCanvus() {
+    const context = useContext(CanvusContext);
+    if (context === null) {
+        throw new Error("useCanvus() must be used within a <Canvus /> component. " +
+            "Wrap your component tree with <Canvus /> to provide the workspace context.");
+    }
+    return context;
+}
+//# sourceMappingURL=useCanvus.js.map

package/dist/useCanvus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvus.js","sourceRoot":"","sources":["../src/useCanvus.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,mCAAmC;AACnC,EAAE;AACF,yDAAyD;AACzD,wDAAwD;AACxD,0BAA0B;AAC1B,gEAAgE;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CACb,0DAA0D;YACxD,4EAA4E,CAC/E,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@canvus/react",
+  "version": "0.1.0",
+  "description": "React bindings for the Canvus visual layout SDK",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@canvus/core": ">=0.1.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@canvus/core": ">=0.1.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^5.8.3"
+  },
+  "license": "MIT"
+}