@reause/integrations 0.1.2

package/dist/useDrauu.d.ts

@@ -0,0 +1,152 @@
+import { Dispatch, SetStateAction } from "react";
+import { ListenerOn } from "@reause/shared";
+import { Brush, Drauu, Options } from "drauu";
+//#region useDrauu/index.d.ts
+/**
+ * Options accepted by `useDrauu` — drauu's own options minus `el`, which the
+ * hook supplies from the resolved target (upstream `UseDrauuOptions`).
+ */
+export type UseDrauuOptions = Omit<Options, 'el'>;
+export interface UseDrauuReturn {
+  /**
+   * The mounted drauu instance — `undefined` until the target resolves to an
+   * `<svg>` element (upstream writable `Ref<Drauu | undefined>`). The hook owns
+   * the instance lifecycle, so this is a read-only output and has no paired
+   * setter (precedent: `useFileSystemAccess`'s `file`, `useTextareaAutosize`'s
+   * `textarea`).
+   */
+  drauuInstance: Drauu | undefined;
+  /**
+   * Load an SVG string into the instance (upstream `Ref<Drauu>.load`).
+   */
+  load: (svg: string) => void;
+  /**
+   * Serialize the current canvas as an SVG string.
+   */
+  dump: () => string | undefined;
+  /**
+   * Clear the canvas and the operation stack.
+   */
+  clear: () => void;
+  /**
+   * Cancel the stroke in progress.
+   */
+  cancel: () => void;
+  /**
+   * Undo the last operation — `undefined` when there is no instance.
+   */
+  undo: () => boolean | undefined;
+  /**
+   * Redo the last undone operation — `undefined` when there is no instance.
+   */
+  redo: () => boolean | undefined;
+  /**
+   * Whether there is an operation to undo (upstream writable
+   * `ShallowRef<boolean>`). The hook re-reads it from the instance on every
+   * drauu `changed` event, so it is a read-only output and has no paired setter.
+   */
+  canUndo: boolean;
+  /**
+   * Whether there is an operation to redo (upstream writable
+   * `ShallowRef<boolean>`). The hook re-reads it from the instance on every
+   * drauu `changed` event, so it is a read-only output and has no paired setter.
+   */
+  canRedo: boolean;
+  /**
+   * The current brush (upstream writable `Ref<Brush>`) — the hook's only
+   * caller-writable value, paired with `setBrush`.
+   */
+  brush: Brush;
+  /**
+   * React writable-side analog of the upstream `brush` ref, paired with
+   * `brush`: `setBrush(next)` or `setBrush(prev => next)` (the React state
+   * setter protocol — `Dispatch<SetStateAction<Brush>>`). It writes the
+   * returned `brush` value AND the mounted instance's brush / mode.
+   */
+  setBrush: Dispatch<SetStateAction<Brush>>;
+  /**
+   * Register a listener for drauu's `changed` event — `useListener(onChanged, cb)`.
+   */
+  onChanged: ListenerOn<() => void>;
+  /**
+   * Register a listener for drauu's `committed` event — `useListener(onCommitted, cb)`.
+   * The callback receives the committed `<svg>` node (or `undefined`), matching
+   * drauu's `committed` event payload.
+   */
+  onCommitted: ListenerOn<(node: SVGElement | undefined) => void>;
+  /**
+   * Register a listener for drauu's `start` event — `useListener(onStart, cb)`.
+   */
+  onStart: ListenerOn<() => void>;
+  /**
+   * Register a listener for drauu's `end` event — `useListener(onEnd, cb)`.
+   */
+  onEnd: ListenerOn<() => void>;
+  /**
+   * Register a listener for drauu's `canceled` event — `useListener(onCanceled, cb)`.
+   */
+  onCanceled: ListenerOn<() => void>;
+}
+/** Accepted DOM target kinds — mirrors upstream's `MaybeElement`. */
+type MaybeElement = HTMLElement | SVGElement | null | undefined;
+/** A plain element or a React ref-like object (`{ current }`) — upstream `MaybeElementRef`. */
+type MaybeElementRef = MaybeElement | {
+  readonly current: MaybeElement;
+};
+/** Drauu target (upstream `MaybeComputedElementRef`, without its getter branch). */
+type DrauuTarget = MaybeElementRef;
+/**
+ * React port of VueUse's `useDrauu` — reactive instance for
+ * [drauu](https://github.com/antfu/drauu).
+ *
+ * Map from @vueuse/integrations `useDrauu`
+ * (`source/vueuse/packages/integrations/useDrauu/`), which creates a drauu
+ * instance for an `<svg>` element and exposes the drawing API plus its events.
+ * Upstream has no test file — the co-located `useDrauu.test.tsx` is authored
+ * for this port.
+ *
+ * Adjustment for React (upstream returns `Ref` / `ShallowRef` / `EventHookOn`):
+ * - the return is an OBJECT with a paired setter for every caller-writable
+ *   value (return-shape rule 5). `brush` is the only such value — upstream's
+ *   writable `Ref<Brush>` — and it is paired with `setBrush`, the React state
+ *   setter (`Dispatch<SetStateAction<Brush>>`), so `setBrush(next)` and
+ *   `setBrush(prev => next)` both work; `setBrush` writes the state AND the
+ *   mounted instance's brush / mode, mirroring upstream's deep watcher;
+ * - `drauuInstance`, `canUndo` and `canRedo` are plain values from state
+ *   instead of refs and stay read-only outputs without paired setters: the
+ *   hook owns the instance lifecycle and re-reads the undo / redo status from
+ *   the instance on every drauu `changed` event, so a caller write would be
+ *   overwritten (upstream returns them as writable `Ref` / `ShallowRef`s;
+ *   precedent: `useFileSystemAccess`'s `file`, `useAsyncState`'s `isReady` /
+ *   `error`, `useTextareaAutosize`'s `textarea`);
+ * - the five `on*` members are §2D registrars — `(fn) => ({ off })` typed
+ *   `ListenerOn<T>` (`@reause/shared`), consumable as
+ *   `useListener(onChanged, cb)` for automatic cleanup on unmount, and `off()`
+ *   removes exactly that listener and is idempotent;
+ * - the instance is created in an effect keyed on the resolved element's
+ *   identity (upstream: `watch(() => unrefElement(target), ..., { flush: 'post' })`)
+ *   and unmounted on cleanup (`tryOnScopeDispose`); an element-identity change
+ *   destroys and recreates the instance. **Divergence:** resolving to `null` —
+ *   a React ref whose element left the tree — destroys the instance and frees
+ *   drauu's window listeners, where upstream keeps the last instance alive
+ *   until scope dispose. Destroying is deliberate in React: a `null` ref means
+ *   the element is gone, and a stale live instance would keep drawing on a
+ *   detached `<svg>`; the co-located test pins this behavior;
+ * - the element is resolved locally from `@reause/shared`'s `toValue` /
+ *   `isRefLike` (precedent: `useFocusTrap.ts`), never from `@reause/core` —
+ *   `packages/integrations` must not depend on core (eslint
+ *   `no-restricted-imports`). Only an `SVGSVGElement` target mounts, matching
+ *   upstream's guard.
+ *
+ * @param target - the target `<svg>` element or a React ref-like object (`{ current }`)
+ * @param options - drauu options (`Omit<Options, 'el'>`); `brush` is merged over the defaults
+ *
+ * @__NO_SIDE_EFFECTS__
+ * @example
+ * const target = useRef<SVGSVGElement>(null)
+ * const { undo, redo, canUndo, canRedo, brush, setBrush } = useDrauu(target)
+ * setBrush(prev => ({ ...prev, color: '#ef4444' }))
+ * return <svg ref={target} />
+ */
+export declare function useDrauu(target: DrauuTarget, options?: UseDrauuOptions): UseDrauuReturn;
+//#endregion

package/dist/useDrauu.iife.js

@@ -0,0 +1,221 @@
+(function(exports, _reause_shared, drauu, react) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region useDrauu/index.tsx
+	/**
+	* Resolve the target to a DOM element — a plain element, a React ref-like
+	* object (`{ current }`), or `null` when it cannot be resolved. Upstream
+	* resolves elements with `unrefElement` (`@vueuse/core`); the React port
+	* composes the same unwrapping from `toValue` / `isRefLike` (`@reause/shared`)
+	* — one pass unwraps a ref-like object, a second one covers a ref-like object
+	* holding another ref-like (`{ current: { current: element } }`).
+	*/
+	function resolveElement(value) {
+		let el = (0, _reause_shared.toValue)(value);
+		if ((0, _reause_shared.isRefLike)(el)) el = (0, _reause_shared.toValue)(el);
+		if (typeof el === "object" && el !== null && (el instanceof HTMLElement || el instanceof SVGElement)) return el;
+		return null;
+	}
+	/** Default brush — upstream's `brush` ref defaults (draw / black / size 3). */
+	const DEFAULT_BRUSH = {
+		color: "black",
+		size: 3,
+		arrowEnd: false,
+		cornerRadius: 0,
+		dasharray: void 0,
+		fill: "transparent",
+		mode: "draw"
+	};
+	/**
+	* Minimal event hook — mirrors `@reause/shared`'s `createEventHook` shape
+	* (`on` / `trigger`) while staying identity-stable across renders: the
+	* listener set lives in a ref, so `on` never changes identity and
+	* `useListener(on, cb)` does not re-register on every render. Upstream
+	* allocates its `createEventHook()` once per setup; React has no setup phase,
+	* so the ref is the equivalent.
+	*/
+	function useEventHook() {
+		const fnsRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+		return {
+			on: (0, react.useCallback)((fn) => {
+				fnsRef.current.add(fn);
+				return { off: () => {
+					fnsRef.current.delete(fn);
+				} };
+			}, []),
+			trigger: (0, react.useCallback)((...args) => {
+				Array.from(fnsRef.current).forEach((fn) => fn(...args));
+			}, [])
+		};
+	}
+	/**
+	* React port of VueUse's `useDrauu` — reactive instance for
+	* [drauu](https://github.com/antfu/drauu).
+	*
+	* Map from @vueuse/integrations `useDrauu`
+	* (`source/vueuse/packages/integrations/useDrauu/`), which creates a drauu
+	* instance for an `<svg>` element and exposes the drawing API plus its events.
+	* Upstream has no test file — the co-located `useDrauu.test.tsx` is authored
+	* for this port.
+	*
+	* Adjustment for React (upstream returns `Ref` / `ShallowRef` / `EventHookOn`):
+	* - the return is an OBJECT with a paired setter for every caller-writable
+	*   value (return-shape rule 5). `brush` is the only such value — upstream's
+	*   writable `Ref<Brush>` — and it is paired with `setBrush`, the React state
+	*   setter (`Dispatch<SetStateAction<Brush>>`), so `setBrush(next)` and
+	*   `setBrush(prev => next)` both work; `setBrush` writes the state AND the
+	*   mounted instance's brush / mode, mirroring upstream's deep watcher;
+	* - `drauuInstance`, `canUndo` and `canRedo` are plain values from state
+	*   instead of refs and stay read-only outputs without paired setters: the
+	*   hook owns the instance lifecycle and re-reads the undo / redo status from
+	*   the instance on every drauu `changed` event, so a caller write would be
+	*   overwritten (upstream returns them as writable `Ref` / `ShallowRef`s;
+	*   precedent: `useFileSystemAccess`'s `file`, `useAsyncState`'s `isReady` /
+	*   `error`, `useTextareaAutosize`'s `textarea`);
+	* - the five `on*` members are §2D registrars — `(fn) => ({ off })` typed
+	*   `ListenerOn<T>` (`@reause/shared`), consumable as
+	*   `useListener(onChanged, cb)` for automatic cleanup on unmount, and `off()`
+	*   removes exactly that listener and is idempotent;
+	* - the instance is created in an effect keyed on the resolved element's
+	*   identity (upstream: `watch(() => unrefElement(target), ..., { flush: 'post' })`)
+	*   and unmounted on cleanup (`tryOnScopeDispose`); an element-identity change
+	*   destroys and recreates the instance. **Divergence:** resolving to `null` —
+	*   a React ref whose element left the tree — destroys the instance and frees
+	*   drauu's window listeners, where upstream keeps the last instance alive
+	*   until scope dispose. Destroying is deliberate in React: a `null` ref means
+	*   the element is gone, and a stale live instance would keep drawing on a
+	*   detached `<svg>`; the co-located test pins this behavior;
+	* - the element is resolved locally from `@reause/shared`'s `toValue` /
+	*   `isRefLike` (precedent: `useFocusTrap.ts`), never from `@reause/core` —
+	*   `packages/integrations` must not depend on core (eslint
+	*   `no-restricted-imports`). Only an `SVGSVGElement` target mounts, matching
+	*   upstream's guard.
+	*
+	* @param target - the target `<svg>` element or a React ref-like object (`{ current }`)
+	* @param options - drauu options (`Omit<Options, 'el'>`); `brush` is merged over the defaults
+	*
+	* @__NO_SIDE_EFFECTS__
+	* @example
+	* const target = useRef<SVGSVGElement>(null)
+	* const { undo, redo, canUndo, canRedo, brush, setBrush } = useDrauu(target)
+	* setBrush(prev => ({ ...prev, color: '#ef4444' }))
+	* return <svg ref={target} />
+	*/
+	function useDrauu(target, options) {
+		const [drauuInstance, setDrauuInstance] = (0, react.useState)(void 0);
+		const [canUndo, setCanUndo] = (0, react.useState)(false);
+		const [canRedo, setCanRedo] = (0, react.useState)(false);
+		const [brush, setBrushState] = (0, react.useState)(() => ({
+			...DEFAULT_BRUSH,
+			...options === null || options === void 0 ? void 0 : options.brush
+		}));
+		const instanceRef = (0, react.useRef)(null);
+		const disposablesRef = (0, react.useRef)([]);
+		const elementRef = (0, react.useRef)(null);
+		const targetRef = (0, react.useRef)(target);
+		targetRef.current = target;
+		const optionsRef = (0, react.useRef)(options);
+		optionsRef.current = options;
+		const brushRef = (0, react.useRef)(brush);
+		brushRef.current = brush;
+		const { on: onChanged, trigger: triggerChanged } = useEventHook();
+		const { on: onCommitted, trigger: triggerCommitted } = useEventHook();
+		const { on: onStart, trigger: triggerStart } = useEventHook();
+		const { on: onEnd, trigger: triggerEnd } = useEventHook();
+		const { on: onCanceled, trigger: triggerCanceled } = useEventHook();
+		const syncStatus = (0, react.useCallback)(() => {
+			const instance = instanceRef.current;
+			if (!instance) return;
+			setCanUndo(instance.canUndo());
+			setCanRedo(instance.canRedo());
+		}, []);
+		const destroyInstance = (0, react.useCallback)(() => {
+			const instance = instanceRef.current;
+			if (instance) {
+				disposablesRef.current.forEach((dispose) => dispose());
+				disposablesRef.current = [];
+				instance.unmount();
+				instanceRef.current = null;
+			}
+			setDrauuInstance(void 0);
+			setCanUndo(false);
+			setCanRedo(false);
+		}, []);
+		(0, react.useEffect)(() => {
+			const el = resolveElement(targetRef.current);
+			const svgEl = typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement) ? null : el;
+			if (svgEl === elementRef.current) return;
+			elementRef.current = svgEl;
+			destroyInstance();
+			if (!svgEl) return;
+			const instance = (0, drauu.createDrauu)({
+				...optionsRef.current,
+				el: svgEl,
+				brush: brushRef.current
+			});
+			instanceRef.current = instance;
+			disposablesRef.current = [
+				instance.on("canceled", () => triggerCanceled()),
+				instance.on("committed", (node) => triggerCommitted(node)),
+				instance.on("start", () => triggerStart()),
+				instance.on("end", () => triggerEnd()),
+				instance.on("changed", () => {
+					syncStatus();
+					triggerChanged();
+				})
+			];
+			syncStatus();
+			setDrauuInstance(instance);
+		});
+		(0, react.useEffect)(() => () => {
+			destroyInstance();
+			elementRef.current = null;
+		}, [destroyInstance]);
+		return {
+			drauuInstance,
+			load: (0, react.useCallback)((svg) => {
+				var _instanceRef$current;
+				(_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 || _instanceRef$current.load(svg);
+			}, []),
+			dump: (0, react.useCallback)(() => {
+				var _instanceRef$current2;
+				return (_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.dump();
+			}, []),
+			clear: (0, react.useCallback)(() => {
+				var _instanceRef$current3;
+				(_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 || _instanceRef$current3.clear();
+			}, []),
+			cancel: (0, react.useCallback)(() => {
+				var _instanceRef$current4;
+				(_instanceRef$current4 = instanceRef.current) === null || _instanceRef$current4 === void 0 || _instanceRef$current4.cancel();
+			}, []),
+			undo: (0, react.useCallback)(() => {
+				var _instanceRef$current5;
+				return (_instanceRef$current5 = instanceRef.current) === null || _instanceRef$current5 === void 0 ? void 0 : _instanceRef$current5.undo();
+			}, []),
+			redo: (0, react.useCallback)(() => {
+				var _instanceRef$current6;
+				return (_instanceRef$current6 = instanceRef.current) === null || _instanceRef$current6 === void 0 ? void 0 : _instanceRef$current6.redo();
+			}, []),
+			canUndo,
+			canRedo,
+			brush,
+			setBrush: (0, react.useCallback)((next) => {
+				const value = typeof next === "function" ? next(brushRef.current) : next;
+				brushRef.current = value;
+				setBrushState(value);
+				const instance = instanceRef.current;
+				if (instance) {
+					instance.brush = value;
+					if (value.mode) instance.mode = value.mode;
+				}
+			}, []),
+			onChanged,
+			onCommitted,
+			onStart,
+			onEnd,
+			onCanceled
+		};
+	}
+	//#endregion
+	exports.useDrauu = useDrauu;
+})(this.reause = this.reause || {}, reause, Drauu, React);

package/dist/useDrauu.iife.min.js

@@ -0,0 +1 @@
+(function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i(e){let n=(0,t.toValue)(e);return(0,t.isRefLike)(n)&&(n=(0,t.toValue)(n)),typeof n==`object`&&n&&(n instanceof HTMLElement||n instanceof SVGElement)?n:null}let a={color:`black`,size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:`transparent`,mode:`draw`};function o(){let e=(0,r.useRef)(new Set);return{on:(0,r.useCallback)(t=>(e.current.add(t),{off:()=>{e.current.delete(t)}}),[]),trigger:(0,r.useCallback)((...t)=>{Array.from(e.current).forEach(e=>e(...t))},[])}}function s(e,t){let[s,c]=(0,r.useState)(void 0),[l,u]=(0,r.useState)(!1),[d,f]=(0,r.useState)(!1),[p,m]=(0,r.useState)(()=>({...a,...t==null?void 0:t.brush})),h=(0,r.useRef)(null),g=(0,r.useRef)([]),_=(0,r.useRef)(null),v=(0,r.useRef)(e);v.current=e;let y=(0,r.useRef)(t);y.current=t;let b=(0,r.useRef)(p);b.current=p;let{on:x,trigger:S}=o(),{on:C,trigger:w}=o(),{on:T,trigger:E}=o(),{on:D,trigger:O}=o(),{on:k,trigger:A}=o(),j=(0,r.useCallback)(()=>{let e=h.current;e&&(u(e.canUndo()),f(e.canRedo()))},[]),M=(0,r.useCallback)(()=>{let e=h.current;e&&(g.current.forEach(e=>e()),g.current=[],e.unmount(),h.current=null),c(void 0),u(!1),f(!1)},[]);return(0,r.useEffect)(()=>{let e=i(v.current),t=typeof SVGSVGElement>`u`||!(e instanceof SVGSVGElement)?null:e;if(t===_.current||(_.current=t,M(),!t))return;let r=(0,n.createDrauu)({...y.current,el:t,brush:b.current});h.current=r,g.current=[r.on(`canceled`,()=>A()),r.on(`committed`,e=>w(e)),r.on(`start`,()=>E()),r.on(`end`,()=>O()),r.on(`changed`,()=>{j(),S()})],j(),c(r)}),(0,r.useEffect)(()=>()=>{M(),_.current=null},[M]),{drauuInstance:s,load:(0,r.useCallback)(e=>{var t;(t=h.current)==null||t.load(e)},[]),dump:(0,r.useCallback)(()=>{var e;return(e=h.current)==null?void 0:e.dump()},[]),clear:(0,r.useCallback)(()=>{var e;(e=h.current)==null||e.clear()},[]),cancel:(0,r.useCallback)(()=>{var e;(e=h.current)==null||e.cancel()},[]),undo:(0,r.useCallback)(()=>{var e;return(e=h.current)==null?void 0:e.undo()},[]),redo:(0,r.useCallback)(()=>{var e;return(e=h.current)==null?void 0:e.redo()},[]),canUndo:l,canRedo:d,brush:p,setBrush:(0,r.useCallback)(e=>{let t=typeof e==`function`?e(b.current):e;b.current=t,m(t);let n=h.current;n&&(n.brush=t,t.mode&&(n.mode=t.mode))},[]),onChanged:x,onCommitted:C,onStart:T,onEnd:D,onCanceled:k}}e.useDrauu=s})(this.reause=this.reause||{},reause,Drauu,React);

package/dist/useDrauu.js

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isRefLike, toValue } from "@reause/shared";
+import { createDrauu } from "drauu";
+//#region useDrauu/index.tsx
+/**
+* Resolve the target to a DOM element — a plain element, a React ref-like
+* object (`{ current }`), or `null` when it cannot be resolved. Upstream
+* resolves elements with `unrefElement` (`@vueuse/core`); the React port
+* composes the same unwrapping from `toValue` / `isRefLike` (`@reause/shared`)
+* — one pass unwraps a ref-like object, a second one covers a ref-like object
+* holding another ref-like (`{ current: { current: element } }`).
+*/
+function resolveElement(value) {
+	let el = toValue(value);
+	if (isRefLike(el)) el = toValue(el);
+	if (typeof el === "object" && el !== null && (el instanceof HTMLElement || el instanceof SVGElement)) return el;
+	return null;
+}
+/** Default brush — upstream's `brush` ref defaults (draw / black / size 3). */
+const DEFAULT_BRUSH = {
+	color: "black",
+	size: 3,
+	arrowEnd: false,
+	cornerRadius: 0,
+	dasharray: void 0,
+	fill: "transparent",
+	mode: "draw"
+};
+/**
+* Minimal event hook — mirrors `@reause/shared`'s `createEventHook` shape
+* (`on` / `trigger`) while staying identity-stable across renders: the
+* listener set lives in a ref, so `on` never changes identity and
+* `useListener(on, cb)` does not re-register on every render. Upstream
+* allocates its `createEventHook()` once per setup; React has no setup phase,
+* so the ref is the equivalent.
+*/
+function useEventHook() {
+	const fnsRef = useRef(/* @__PURE__ */ new Set());
+	return {
+		on: useCallback((fn) => {
+			fnsRef.current.add(fn);
+			return { off: () => {
+				fnsRef.current.delete(fn);
+			} };
+		}, []),
+		trigger: useCallback((...args) => {
+			Array.from(fnsRef.current).forEach((fn) => fn(...args));
+		}, [])
+	};
+}
+/**
+* React port of VueUse's `useDrauu` — reactive instance for
+* [drauu](https://github.com/antfu/drauu).
+*
+* Map from @vueuse/integrations `useDrauu`
+* (`source/vueuse/packages/integrations/useDrauu/`), which creates a drauu
+* instance for an `<svg>` element and exposes the drawing API plus its events.
+* Upstream has no test file — the co-located `useDrauu.test.tsx` is authored
+* for this port.
+*
+* Adjustment for React (upstream returns `Ref` / `ShallowRef` / `EventHookOn`):
+* - the return is an OBJECT with a paired setter for every caller-writable
+*   value (return-shape rule 5). `brush` is the only such value — upstream's
+*   writable `Ref<Brush>` — and it is paired with `setBrush`, the React state
+*   setter (`Dispatch<SetStateAction<Brush>>`), so `setBrush(next)` and
+*   `setBrush(prev => next)` both work; `setBrush` writes the state AND the
+*   mounted instance's brush / mode, mirroring upstream's deep watcher;
+* - `drauuInstance`, `canUndo` and `canRedo` are plain values from state
+*   instead of refs and stay read-only outputs without paired setters: the
+*   hook owns the instance lifecycle and re-reads the undo / redo status from
+*   the instance on every drauu `changed` event, so a caller write would be
+*   overwritten (upstream returns them as writable `Ref` / `ShallowRef`s;
+*   precedent: `useFileSystemAccess`'s `file`, `useAsyncState`'s `isReady` /
+*   `error`, `useTextareaAutosize`'s `textarea`);
+* - the five `on*` members are §2D registrars — `(fn) => ({ off })` typed
+*   `ListenerOn<T>` (`@reause/shared`), consumable as
+*   `useListener(onChanged, cb)` for automatic cleanup on unmount, and `off()`
+*   removes exactly that listener and is idempotent;
+* - the instance is created in an effect keyed on the resolved element's
+*   identity (upstream: `watch(() => unrefElement(target), ..., { flush: 'post' })`)
+*   and unmounted on cleanup (`tryOnScopeDispose`); an element-identity change
+*   destroys and recreates the instance. **Divergence:** resolving to `null` —
+*   a React ref whose element left the tree — destroys the instance and frees
+*   drauu's window listeners, where upstream keeps the last instance alive
+*   until scope dispose. Destroying is deliberate in React: a `null` ref means
+*   the element is gone, and a stale live instance would keep drawing on a
+*   detached `<svg>`; the co-located test pins this behavior;
+* - the element is resolved locally from `@reause/shared`'s `toValue` /
+*   `isRefLike` (precedent: `useFocusTrap.ts`), never from `@reause/core` —
+*   `packages/integrations` must not depend on core (eslint
+*   `no-restricted-imports`). Only an `SVGSVGElement` target mounts, matching
+*   upstream's guard.
+*
+* @param target - the target `<svg>` element or a React ref-like object (`{ current }`)
+* @param options - drauu options (`Omit<Options, 'el'>`); `brush` is merged over the defaults
+*
+* @__NO_SIDE_EFFECTS__
+* @example
+* const target = useRef<SVGSVGElement>(null)
+* const { undo, redo, canUndo, canRedo, brush, setBrush } = useDrauu(target)
+* setBrush(prev => ({ ...prev, color: '#ef4444' }))
+* return <svg ref={target} />
+*/
+function useDrauu(target, options) {
+	const [drauuInstance, setDrauuInstance] = useState(void 0);
+	const [canUndo, setCanUndo] = useState(false);
+	const [canRedo, setCanRedo] = useState(false);
+	const [brush, setBrushState] = useState(() => ({
+		...DEFAULT_BRUSH,
+		...options === null || options === void 0 ? void 0 : options.brush
+	}));
+	const instanceRef = useRef(null);
+	const disposablesRef = useRef([]);
+	const elementRef = useRef(null);
+	const targetRef = useRef(target);
+	targetRef.current = target;
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const brushRef = useRef(brush);
+	brushRef.current = brush;
+	const { on: onChanged, trigger: triggerChanged } = useEventHook();
+	const { on: onCommitted, trigger: triggerCommitted } = useEventHook();
+	const { on: onStart, trigger: triggerStart } = useEventHook();
+	const { on: onEnd, trigger: triggerEnd } = useEventHook();
+	const { on: onCanceled, trigger: triggerCanceled } = useEventHook();
+	const syncStatus = useCallback(() => {
+		const instance = instanceRef.current;
+		if (!instance) return;
+		setCanUndo(instance.canUndo());
+		setCanRedo(instance.canRedo());
+	}, []);
+	const destroyInstance = useCallback(() => {
+		const instance = instanceRef.current;
+		if (instance) {
+			disposablesRef.current.forEach((dispose) => dispose());
+			disposablesRef.current = [];
+			instance.unmount();
+			instanceRef.current = null;
+		}
+		setDrauuInstance(void 0);
+		setCanUndo(false);
+		setCanRedo(false);
+	}, []);
+	useEffect(() => {
+		const el = resolveElement(targetRef.current);
+		const svgEl = typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement) ? null : el;
+		if (svgEl === elementRef.current) return;
+		elementRef.current = svgEl;
+		destroyInstance();
+		if (!svgEl) return;
+		const instance = createDrauu({
+			...optionsRef.current,
+			el: svgEl,
+			brush: brushRef.current
+		});
+		instanceRef.current = instance;
+		disposablesRef.current = [
+			instance.on("canceled", () => triggerCanceled()),
+			instance.on("committed", (node) => triggerCommitted(node)),
+			instance.on("start", () => triggerStart()),
+			instance.on("end", () => triggerEnd()),
+			instance.on("changed", () => {
+				syncStatus();
+				triggerChanged();
+			})
+		];
+		syncStatus();
+		setDrauuInstance(instance);
+	});
+	useEffect(() => () => {
+		destroyInstance();
+		elementRef.current = null;
+	}, [destroyInstance]);
+	return {
+		drauuInstance,
+		load: useCallback((svg) => {
+			var _instanceRef$current;
+			(_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 || _instanceRef$current.load(svg);
+		}, []),
+		dump: useCallback(() => {
+			var _instanceRef$current2;
+			return (_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.dump();
+		}, []),
+		clear: useCallback(() => {
+			var _instanceRef$current3;
+			(_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 || _instanceRef$current3.clear();
+		}, []),
+		cancel: useCallback(() => {
+			var _instanceRef$current4;
+			(_instanceRef$current4 = instanceRef.current) === null || _instanceRef$current4 === void 0 || _instanceRef$current4.cancel();
+		}, []),
+		undo: useCallback(() => {
+			var _instanceRef$current5;
+			return (_instanceRef$current5 = instanceRef.current) === null || _instanceRef$current5 === void 0 ? void 0 : _instanceRef$current5.undo();
+		}, []),
+		redo: useCallback(() => {
+			var _instanceRef$current6;
+			return (_instanceRef$current6 = instanceRef.current) === null || _instanceRef$current6 === void 0 ? void 0 : _instanceRef$current6.redo();
+		}, []),
+		canUndo,
+		canRedo,
+		brush,
+		setBrush: useCallback((next) => {
+			const value = typeof next === "function" ? next(brushRef.current) : next;
+			brushRef.current = value;
+			setBrushState(value);
+			const instance = instanceRef.current;
+			if (instance) {
+				instance.brush = value;
+				if (value.mode) instance.mode = value.mode;
+			}
+		}, []),
+		onChanged,
+		onCommitted,
+		onStart,
+		onEnd,
+		onCanceled
+	};
+}
+//#endregion
+export { useDrauu };