@weasel-js/core 1.10.1 → 1.11.1

package/dist/canvas/useLateContentRedraw.js

@@ -1,21 +1,28 @@
-import { paintKindRegistry as e } from "../core/paint/paintKinds.js";
-import { subscribeImageReady as t } from "@weasel-js/renderer";
-import { useEffect as n } from "react";
-import { subscribeGlyphReady as r } from "@weasel-js/font";
+import { paintKindRegistry } from "../core/paint/paintKinds.js";
+import { subscribeImageReady } from "@weasel-js/renderer";
+import { useEffect } from "react";
+import { subscribeGlyphReady } from "@weasel-js/font";
+
 //#region src/canvas/useLateContentRedraw.ts
-function i(i) {
-	n(() => {
-		let n = [
-			t(i),
-			r(i),
-			e.subscribe(i)
+/**
+* Repaint whenever something a frame could not draw becomes drawable: an image
+* finishes decoding, a deferred glyph bake or font load lands, or a paint kind
+* registers late. Each of these drew nothing (or a placeholder) on the frame
+* that asked for it and says nothing further unless a surface is listening.
+*/
+function useLateContentRedraw(requestRedraw) {
+	useEffect(() => {
+		const offs = [
+			subscribeImageReady(requestRedraw),
+			subscribeGlyphReady(requestRedraw),
+			paintKindRegistry.subscribe(requestRedraw)
 		];
 		return () => {
-			for (let e of n) e();
+			for (const off of offs) off();
 		};
-	}, [i]);
+	}, [requestRedraw]);
 }
-//#endregion
-export { i as useLateContentRedraw };
 
+//#endregion
+export { useLateContentRedraw };
 //# sourceMappingURL=useLateContentRedraw.js.map

package/dist/canvas/useLateContentRedraw.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLateContentRedraw.js","names":["useLateContentRedraw","offs","subscribeImageReady","requestRedraw","subscribeGlyphReady","paintKindRegistry","off"],"sources":["../../src/canvas/useLateContentRedraw.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { subscribeGlyphReady } from '@weasel-js/font';\nimport { subscribeImageReady } from '@weasel-js/renderer';\nimport { paintKindRegistry } from 'core/paint/paintKinds';\n\n/**\n * Repaint whenever something a frame could not draw becomes drawable: an image\n * finishes decoding, a deferred glyph bake or font load lands, or a paint kind\n * registers late. Each of these drew nothing (or a placeholder) on the frame\n * that asked for it and says nothing further unless a surface is listening.\n */\nexport function useLateContentRedraw(requestRedraw: () => void): void {\n  useEffect(() => {\n    const offs = [\n      subscribeImageReady(requestRedraw),\n      subscribeGlyphReady(requestRedraw),\n      paintKindRegistry.subscribe(requestRedraw),\n    ];\n    return () => { for (const off of offs) off(); };\n  }, [requestRedraw]);\n}\n"],"mappings":";;;;;AAWA,SAAgBA,EAAqB,GAAiC;CACpE,QAAgB;EACd,IAAMC,IAAO;GACXC,EAAoBC,CAAa;GACjCC,EAAoBD,CAAa;GACjCE,EAAkB,UAAUF,CAAa;EAC3C;EACA,aAAa;GAAE,KAAK,IAAMG,KAAOL,GAAM,EAAI;EAAG;CAChD,GAAG,CAACE,CAAa,CAAC;AACpB"}
+{"version":3,"file":"useLateContentRedraw.js","names":[],"sources":["../../src/canvas/useLateContentRedraw.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { subscribeGlyphReady } from '@weasel-js/font';\nimport { subscribeImageReady } from '@weasel-js/renderer';\nimport { paintKindRegistry } from 'core/paint/paintKinds';\n\n/**\n * Repaint whenever something a frame could not draw becomes drawable: an image\n * finishes decoding, a deferred glyph bake or font load lands, or a paint kind\n * registers late. Each of these drew nothing (or a placeholder) on the frame\n * that asked for it and says nothing further unless a surface is listening.\n */\nexport function useLateContentRedraw(requestRedraw: () => void): void {\n  useEffect(() => {\n    const offs = [\n      subscribeImageReady(requestRedraw),\n      subscribeGlyphReady(requestRedraw),\n      paintKindRegistry.subscribe(requestRedraw),\n    ];\n    return () => { for (const off of offs) off(); };\n  }, [requestRedraw]);\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,qBAAqB,eAAiC;CACpE,gBAAgB;EACd,MAAM,OAAO;GACX,oBAAoB,aAAa;GACjC,oBAAoB,aAAa;GACjC,kBAAkB,UAAU,aAAa;EAC3C;EACA,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,aAAa,CAAC;AACpB"}

package/dist/canvas/useLayerStack.js

@@ -0,0 +1,72 @@
+import { createBackgroundFillLayer } from "../core/layers/backgroundFill.js";
+import { isCustomEntry } from "./layerSlots.js";
+import { composeOrderedLayers, placeToolOverlays } from "./layerOrder.js";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+
+//#region src/canvas/useLayerStack.ts
+/** The `layers` prop's slots and custom entries in draw order, with the background fill beneath,
+*  the decoration layer above, and the active tool's overlays placed among them. */
+function useSlotLayers(layersMap, tools, backgroundFill, decorationLayer) {
+	const backgroundLayer = useMemo(() => backgroundFill ? createBackgroundFillLayer(backgroundFill) : void 0, [backgroundFill]);
+	return useMemo(() => {
+		const standardLayers = {};
+		for (const slot of [
+			"grid",
+			"cellHighlight",
+			"selectionOverlay"
+		]) {
+			const entry = layersMap[slot];
+			if (isCustomEntry(entry)) standardLayers[slot] = entry.layer;
+		}
+		const out = composeOrderedLayers(decorationLayer ? {
+			...layersMap,
+			decorationLayer: { layer: decorationLayer }
+		} : layersMap, standardLayers, layersMap.scene?.layers, backgroundLayer);
+		if (tools) placeToolOverlays(out, standardLayers.selectionOverlay, tools.getActiveOverlays);
+		return out;
+	}, [
+		layersMap,
+		tools,
+		backgroundLayer,
+		decorationLayer
+	]);
+}
+/**
+* The full stack the canvas paints: its slot layers, then registered views, the debug overlay,
+* externally registered layers, and the cursor. Every layer that can change on its own
+* repaints the canvas through `requestRedraw`.
+*/
+function useComposedLayers(layers, above, requestRedraw) {
+	const { viewRegistry, debugOverlay, extrasRef, extrasVersion, cursorLayer } = above;
+	const viewRegistryVersion = useSyncExternalStore(useCallback((cb) => viewRegistry?.subscribe(cb) ?? (() => {}), [viewRegistry]), () => viewRegistry?.getVersion() ?? 0, () => 0);
+	const composed = useMemo(() => {
+		const withViews = viewRegistry ? [...layers, ...viewRegistry.list().filter((r) => r.paint).map((r) => r.layer)] : layers;
+		return [
+			...debugOverlay ? [...withViews, debugOverlay] : withViews,
+			...extrasRef.current,
+			cursorLayer
+		];
+	}, [
+		layers,
+		debugOverlay,
+		extrasVersion,
+		viewRegistry,
+		viewRegistryVersion,
+		cursorLayer
+	]);
+	useEffect(() => {
+		const redraw = () => {
+			requestRedraw();
+		};
+		const offs = [];
+		for (const layer of composed) if (layer.subscribe) offs.push(layer.subscribe(redraw));
+		return () => {
+			for (const off of offs) off();
+		};
+	}, [composed, requestRedraw]);
+	return composed;
+}
+
+//#endregion
+export { useComposedLayers, useSlotLayers };
+//# sourceMappingURL=useLayerStack.js.map

package/dist/canvas/useLayerStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayerStack.js","names":[],"sources":["../../src/canvas/useLayerStack.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';\nimport type { RenderLayer } from 'core/layers/render';\nimport type { Paint } from '@weasel-js/paint';\nimport { createBackgroundFillLayer } from 'core/layers/backgroundFill';\nimport { composeOrderedLayers, placeToolOverlays } from './layerOrder';\nimport { STANDARD_SLOTS, isCustomEntry } from './layerSlots';\nimport type { CanvasProps } from './canvasProps';\nimport type { ViewRegistry } from './viewRegistry';\n\n/** The `layers` prop's slots and custom entries in draw order, with the background fill beneath,\n *  the decoration layer above, and the active tool's overlays placed among them. */\nexport function useSlotLayers(\n  layersMap: CanvasProps<unknown>['layers'],\n  tools: CanvasProps<unknown>['tools'],\n  backgroundFill: Paint | undefined,\n  decorationLayer: RenderLayer<unknown> | undefined,\n): RenderLayer<unknown>[] {\n  const backgroundLayer = useMemo(\n    () => (backgroundFill ? createBackgroundFillLayer(backgroundFill) : undefined),\n    [backgroundFill],\n  );\n\n  return useMemo<RenderLayer<unknown>[]>(() => {\n    const standardLayers: Partial<\n      Record<(typeof STANDARD_SLOTS)[number], RenderLayer<unknown>>\n    > = {};\n    for (const slot of ['grid', 'cellHighlight', 'selectionOverlay'] as const) {\n      const entry = layersMap[slot];\n      if (isCustomEntry(entry)) standardLayers[slot] = entry.layer;\n    }\n    const out: RenderLayer<unknown>[] = composeOrderedLayers(\n      decorationLayer ? { ...layersMap, decorationLayer: { layer: decorationLayer } } : layersMap,\n      standardLayers, layersMap.scene?.layers, backgroundLayer,\n    );\n    if (tools) {\n      placeToolOverlays(out, standardLayers.selectionOverlay, tools.getActiveOverlays);\n    }\n    return out;\n  }, [layersMap, tools, backgroundLayer, decorationLayer]);\n}\n\n/** What the canvas paints on top of its slot layers. */\nexport interface StackAbove {\n  viewRegistry: ViewRegistry | null;\n  debugOverlay: RenderLayer<unknown> | null | undefined;\n  /** Registered layers; re-read whenever `extrasVersion` changes. */\n  extrasRef: { readonly current: ReadonlySet<RenderLayer<unknown>> };\n  extrasVersion: number;\n  cursorLayer: RenderLayer<unknown>;\n}\n\n/**\n * The full stack the canvas paints: its slot layers, then registered views, the debug overlay,\n * externally registered layers, and the cursor. Every layer that can change on its own\n * repaints the canvas through `requestRedraw`.\n */\nexport function useComposedLayers(\n  layers: readonly RenderLayer<unknown>[],\n  above: StackAbove,\n  requestRedraw: () => void,\n): RenderLayer<unknown>[] {\n  const { viewRegistry, debugOverlay, extrasRef, extrasVersion, cursorLayer } = above;\n  const viewRegistryVersion = useSyncExternalStore(\n    useCallback((cb: () => void) => viewRegistry?.subscribe(cb) ?? (() => {}), [viewRegistry]),\n    () => viewRegistry?.getVersion() ?? 0,\n    () => 0,\n  );\n\n  const composed = useMemo(() => {\n    // Views paint through the surface's own stack, so they sit above it and\n    // below both the debug overlay and externally-registered layers.\n    const withViews = viewRegistry\n      ? [...layers, ...viewRegistry.list().filter((r) => r.paint).map((r) => r.layer as RenderLayer<unknown>)]\n      : layers;\n    const base = debugOverlay ? [...withViews, debugOverlay] : withViews;\n    // The cursor goes last: it is the one thing that is always in front of\n    // everything, including a consumer's own registered layers.\n    return [...base, ...extrasRef.current, cursorLayer];\n    // extrasVersion drives re-reads of extrasRef when layers are registered/detached;\n    // viewRegistryVersion does the same for registered views.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [layers, debugOverlay, extrasVersion, viewRegistry, viewRegistryVersion,\n      cursorLayer]);\n\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs: (() => void)[] = [];\n    for (const layer of composed) if (layer.subscribe) offs.push(layer.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [composed, requestRedraw]);\n\n  return composed;\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,cACd,WACA,OACA,gBACA,iBACwB;CACxB,MAAM,kBAAkB,cACf,iBAAiB,0BAA0B,cAAc,IAAI,QACpE,CAAC,cAAc,CACjB;CAEA,OAAO,cAAsC;EAC3C,MAAM,iBAEF,CAAC;EACL,KAAK,MAAM,QAAQ;GAAC;GAAQ;GAAiB;EAAkB,GAAY;GACzE,MAAM,QAAQ,UAAU;GACxB,IAAI,cAAc,KAAK,GAAG,eAAe,QAAQ,MAAM;EACzD;EACA,MAAM,MAA8B,qBAClC,kBAAkB;GAAE,GAAG;GAAW,iBAAiB,EAAE,OAAO,gBAAgB;EAAE,IAAI,WAClF,gBAAgB,UAAU,OAAO,QAAQ,eAC3C;EACA,IAAI,OACF,kBAAkB,KAAK,eAAe,kBAAkB,MAAM,iBAAiB;EAEjF,OAAO;CACT,GAAG;EAAC;EAAW;EAAO;EAAiB;CAAe,CAAC;AACzD;;;;;;AAiBA,SAAgB,kBACd,QACA,OACA,eACwB;CACxB,MAAM,EAAE,cAAc,cAAc,WAAW,eAAe,gBAAgB;CAC9E,MAAM,sBAAsB,qBAC1B,aAAa,OAAmB,cAAc,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,SACnF,cAAc,WAAW,KAAK,SAC9B,CACR;CAEA,MAAM,WAAW,cAAc;EAG7B,MAAM,YAAY,eACd,CAAC,GAAG,QAAQ,GAAG,aAAa,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE,KAAK,CAAC,CAAC,KAAK,MAAM,EAAE,KAA6B,CAAC,IACrG;EAIJ,OAAO;GAAC,GAHK,eAAe,CAAC,GAAG,WAAW,YAAY,IAAI;GAG1C,GAAG,UAAU;GAAS;EAAW;CAIpD,GAAG;EAAC;EAAQ;EAAc;EAAe;EAAc;EACnD;CAAW,CAAC;CAEhB,gBAAgB;EACd,MAAM,eAAqB;GAAE,cAAc;EAAG;EAC9C,MAAM,OAAuB,CAAC;EAC9B,KAAK,MAAM,SAAS,UAAU,IAAI,MAAM,WAAW,KAAK,KAAK,MAAM,UAAU,MAAM,CAAC;EACpF,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,OAAO;AACT"}

package/dist/canvas/usePaintedCursor.js

@@ -0,0 +1,28 @@
+import { createPaintedCursorLayer } from "./paintedCursorLayer.js";
+import { useEffect, useMemo } from "react";
+import { createCursorSink, createPaintedCursorState } from "@weasel-js/cursor";
+
+//#region src/canvas/usePaintedCursor.ts
+/**
+* The painted cursor tier's channel. The canvas owns it because it owns both ends: the tool
+* cursor that feeds it and the frame loop that has to repaint when it changes.
+*/
+function usePaintedCursor(canvasRef, requestRedraw) {
+	const paintedCursor = useMemo(() => createPaintedCursorState(), []);
+	const paintedCursorLayer = useMemo(() => createPaintedCursorLayer(paintedCursor), [paintedCursor]);
+	useEffect(() => paintedCursor.subscribe(() => {
+		requestRedraw();
+	}), [paintedCursor, requestRedraw]);
+	return {
+		paintedCursor,
+		paintedCursorLayer,
+		cursorSink: useMemo(() => createCursorSink({
+			element: () => canvasRef.current,
+			painted: () => paintedCursor
+		}), [canvasRef, paintedCursor])
+	};
+}
+
+//#endregion
+export { usePaintedCursor };
+//# sourceMappingURL=usePaintedCursor.js.map

package/dist/canvas/usePaintedCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaintedCursor.js","names":[],"sources":["../../src/canvas/usePaintedCursor.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { createCursorSink, createPaintedCursorState } from '@weasel-js/cursor';\nimport type { CursorSink, PaintedCursorState } from '@weasel-js/cursor';\nimport type { RenderLayer } from 'core/layers/render';\nimport { createPaintedCursorLayer } from './paintedCursorLayer';\n\nexport interface CanvasCursor {\n  paintedCursor: PaintedCursorState;\n  paintedCursorLayer: RenderLayer<unknown>;\n  /** The one writer of the input element's `cursor` style: the tool's cursor\n   *  from the canvas, a hover cursor from the pump, which reaches it through the handle. */\n  cursorSink: CursorSink;\n}\n\n/**\n * The painted cursor tier's channel. The canvas owns it because it owns both ends: the tool\n * cursor that feeds it and the frame loop that has to repaint when it changes.\n */\nexport function usePaintedCursor(\n  canvasRef: { readonly current: HTMLElement | null },\n  requestRedraw: () => void,\n): CanvasCursor {\n  const paintedCursor = useMemo<PaintedCursorState>(() => createPaintedCursorState(), []);\n  const paintedCursorLayer = useMemo(\n    () => createPaintedCursorLayer(paintedCursor),\n    [paintedCursor],\n  );\n  // An idle pointermove repaints nothing on its own, so a cursor the compositor\n  // is not drawing needs its own pump. The store stays quiet unless something\n  // painted is actually on screen.\n  useEffect(() => paintedCursor.subscribe(() => { requestRedraw(); }), [paintedCursor, requestRedraw]);\n  const cursorSink = useMemo(\n    () => createCursorSink({ element: () => canvasRef.current, painted: () => paintedCursor }),\n    [canvasRef, paintedCursor],\n  );\n  return { paintedCursor, paintedCursorLayer, cursorSink };\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,iBACd,WACA,eACc;CACd,MAAM,gBAAgB,cAAkC,yBAAyB,GAAG,CAAC,CAAC;CACtF,MAAM,qBAAqB,cACnB,yBAAyB,aAAa,GAC5C,CAAC,aAAa,CAChB;CAIA,gBAAgB,cAAc,gBAAgB;EAAE,cAAc;CAAG,CAAC,GAAG,CAAC,eAAe,aAAa,CAAC;CAKnG,OAAO;EAAE;EAAe;EAAoB,YAJzB,cACX,iBAAiB;GAAE,eAAe,UAAU;GAAS,eAAe;EAAc,CAAC,GACzF,CAAC,WAAW,aAAa,CAEiB;CAAW;AACzD"}

package/dist/canvas/useRedrawOn.js

@@ -1,21 +1,31 @@
-import { useEffect as e, useState as t } from "react";
+import { useEffect, useState } from "react";
+
 //#region src/canvas/useRedrawOn.ts
-function n(t, n) {
-	let i = r(t);
-	e(() => {
-		let e = () => {
-			n();
-		}, t = (i ?? []).map((t) => t.subscribe(e));
+/** Subscribe `requestRedraw` to each source while mounted. An inline array
+*  holding the same sources does not resubscribe. */
+function useRedrawOn(sources, requestRedraw) {
+	const kept = useSameElements(sources);
+	useEffect(() => {
+		const redraw = () => {
+			requestRedraw();
+		};
+		const offs = (kept ?? []).map((src) => src.subscribe(redraw));
 		return () => {
-			for (let e of t) e();
+			for (const off of offs) off();
 		};
-	}, [i, n]);
+	}, [kept, requestRedraw]);
 }
-function r(e) {
-	let [n, r] = t(e);
-	return n !== e && !(n && e && n.length === e.length && n.every((t, n) => t === e[n])) ? (r(e), e) : n;
+/** `list` as last passed, kept by identity while it holds the same elements —
+*  so an inline array prop does not read as a change every render. */
+function useSameElements(list) {
+	const [kept, setKept] = useState(list);
+	if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {
+		setKept(list);
+		return list;
+	}
+	return kept;
 }
-//#endregion
-export { n as useRedrawOn };
 
+//#endregion
+export { useRedrawOn };
 //# sourceMappingURL=useRedrawOn.js.map

package/dist/canvas/useRedrawOn.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRedrawOn.js","names":["useRedrawOn","kept","useSameElements","sources","redraw","offs","src","off","requestRedraw","setKept","useState","list","x","i"],"sources":["../../src/canvas/useRedrawOn.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { RedrawSource } from '../core/layers/render';\n\n/** Subscribe `requestRedraw` to each source while mounted. An inline array\n *  holding the same sources does not resubscribe. */\nexport function useRedrawOn(sources: readonly RedrawSource[] | undefined, requestRedraw: () => void): void {\n  const kept = useSameElements(sources);\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs = (kept ?? []).map((src) => src.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [kept, requestRedraw]);\n}\n\n/** `list` as last passed, kept by identity while it holds the same elements —\n *  so an inline array prop does not read as a change every render. */\nfunction useSameElements<T>(list: readonly T[] | undefined): readonly T[] | undefined {\n  // Derived state rather than a ref, so a render React throws away can't\n  // leave its list behind as the one the next render compares against.\n  const [kept, setKept] = useState(list);\n  if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {\n    setKept(list);\n    return list;\n  }\n  return kept;\n}\n"],"mappings":";;AAKA,SAAgBA,EAAY,GAA8C,GAAiC;CACzG,IAAMC,IAAOC,EAAgBC,CAAO;CACpC,QAAgB;EACd,IAAMC,UAAqB;GAAE,EAAc;EAAG,GACxCC,KAAQJ,KAAQ,CAAC,EAAA,CAAG,KAAK,MAAQK,EAAI,UAAUF,CAAM,CAAC;EAC5D,aAAa;GAAE,KAAK,IAAMG,KAAOF,GAAM,EAAI;EAAG;CAChD,GAAG,CAACJ,GAAMO,CAAa,CAAC;AAC1B;AAIA,SAASN,EAAmB,GAA0D;CAGpF,IAAM,CAACD,GAAMQ,KAAWC,EAASC,CAAI;CAKrC,OAJIV,MAASU,KAAQ,EAAEV,KAAQU,KAAQV,EAAK,WAAWU,EAAK,UAAUV,EAAK,OAAO,GAAG,MAAMW,MAAMD,EAAKE,EAAE,MACtGJ,EAAQE,CAAI,GACLA,KAEFV;AACT"}
+{"version":3,"file":"useRedrawOn.js","names":[],"sources":["../../src/canvas/useRedrawOn.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { RedrawSource } from '../core/layers/render';\n\n/** Subscribe `requestRedraw` to each source while mounted. An inline array\n *  holding the same sources does not resubscribe. */\nexport function useRedrawOn(sources: readonly RedrawSource[] | undefined, requestRedraw: () => void): void {\n  const kept = useSameElements(sources);\n  useEffect(() => {\n    const redraw = (): void => { requestRedraw(); };\n    const offs = (kept ?? []).map((src) => src.subscribe(redraw));\n    return () => { for (const off of offs) off(); };\n  }, [kept, requestRedraw]);\n}\n\n/** `list` as last passed, kept by identity while it holds the same elements —\n *  so an inline array prop does not read as a change every render. */\nfunction useSameElements<T>(list: readonly T[] | undefined): readonly T[] | undefined {\n  // Derived state rather than a ref, so a render React throws away can't\n  // leave its list behind as the one the next render compares against.\n  const [kept, setKept] = useState(list);\n  if (kept !== list && !(kept && list && kept.length === list.length && kept.every((x, i) => x === list[i]))) {\n    setKept(list);\n    return list;\n  }\n  return kept;\n}\n"],"mappings":";;;;;AAKA,SAAgB,YAAY,SAA8C,eAAiC;CACzG,MAAM,OAAO,gBAAgB,OAAO;CACpC,gBAAgB;EACd,MAAM,eAAqB;GAAE,cAAc;EAAG;EAC9C,MAAM,QAAQ,QAAQ,CAAC,EAAA,CAAG,KAAK,QAAQ,IAAI,UAAU,MAAM,CAAC;EAC5D,aAAa;GAAE,KAAK,MAAM,OAAO,MAAM,IAAI;EAAG;CAChD,GAAG,CAAC,MAAM,aAAa,CAAC;AAC1B;;;AAIA,SAAS,gBAAmB,MAA0D;CAGpF,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CACrC,IAAI,SAAS,QAAQ,EAAE,QAAQ,QAAQ,KAAK,WAAW,KAAK,UAAU,KAAK,OAAO,GAAG,MAAM,MAAM,KAAK,EAAE,IAAI;EAC1G,QAAQ,IAAI;EACZ,OAAO;CACT;CACA,OAAO;AACT"}

package/dist/canvas/useSceneAdapter.js

@@ -1,22 +1,27 @@
-import { sceneToAdapter as e } from "./sceneAdapter.js";
-import { useMemo as t } from "react";
+import { sceneToAdapter } from "./sceneAdapter.js";
+import { useMemo } from "react";
+
 //#region src/canvas/useSceneAdapter.ts
-function n(n, r = {}) {
-	let { selection: i, commitInsert: a, insertLayer: o, poseDescriptor: s } = r;
-	return t(() => e(n, {
-		selection: i,
-		commitInsert: a,
-		insertLayer: o,
-		poseDescriptor: s
+/**
+* React-hook wrapper around `sceneToAdapter`. Memoizes on every option, so
+* the adapter keeps its identity across renders unless one of them changes.
+*/
+function useSceneAdapter(scene, options = {}) {
+	const { selection, commitInsert, insertLayer, poseDescriptor } = options;
+	return useMemo(() => sceneToAdapter(scene, {
+		selection,
+		commitInsert,
+		insertLayer,
+		poseDescriptor
 	}), [
-		n,
-		i,
-		a,
-		o,
-		s
+		scene,
+		selection,
+		commitInsert,
+		insertLayer,
+		poseDescriptor
 	]);
 }
-//#endregion
-export { n as useSceneAdapter };
 
+//#endregion
+export { useSceneAdapter };
 //# sourceMappingURL=useSceneAdapter.js.map

package/dist/canvas/useSceneAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSceneAdapter.js","names":["useSceneAdapter","options","useMemo","sceneToAdapter","scene","selection","commitInsert","insertLayer","poseDescriptor"],"sources":["../../src/canvas/useSceneAdapter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Scene } from 'core/scene/types';\nimport {\n  sceneToAdapter,\n  type SceneCanvasAdapter,\n  type SceneToAdapterOptions,\n} from './sceneAdapter';\n\n/**\n * React-hook wrapper around `sceneToAdapter`. Memoizes on every option, so\n * the adapter keeps its identity across renders unless one of them changes.\n */\nexport function useSceneAdapter<TData, TLayer extends string, TPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  options: SceneToAdapterOptions<TData, TLayer, TPose> = {},\n): SceneCanvasAdapter<TData, TLayer, TPose> {\n  const {\n    selection, commitInsert, insertLayer, poseDescriptor,\n  } = options;\n  return useMemo(\n    () => sceneToAdapter(scene, {\n      selection, commitInsert, insertLayer, poseDescriptor,\n    }),\n    [scene, selection, commitInsert, insertLayer, poseDescriptor],\n  );\n}\n"],"mappings":";;;AAYA,SAAgBA,EACd,GACA,IAAuD,CAAC,GACd;CAC1C,IAAM,EACJ,cAAW,iBAAc,gBAAa,sBACpCC;CACJ,OAAOC,QACCC,EAAeC,GAAO;EAC1B;EAAW;EAAc;EAAa;CACxC,CAAC,GACD;EAACA;EAAOC;EAAWC;EAAcC;EAAaC;CAAc,CAC9D;AACF"}
+{"version":3,"file":"useSceneAdapter.js","names":[],"sources":["../../src/canvas/useSceneAdapter.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Scene } from 'core/scene/types';\nimport {\n  sceneToAdapter,\n  type SceneCanvasAdapter,\n  type SceneToAdapterOptions,\n} from './sceneAdapter';\n\n/**\n * React-hook wrapper around `sceneToAdapter`. Memoizes on every option, so\n * the adapter keeps its identity across renders unless one of them changes.\n */\nexport function useSceneAdapter<TData, TLayer extends string, TPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  options: SceneToAdapterOptions<TData, TLayer, TPose> = {},\n): SceneCanvasAdapter<TData, TLayer, TPose> {\n  const {\n    selection, commitInsert, insertLayer, poseDescriptor,\n  } = options;\n  return useMemo(\n    () => sceneToAdapter(scene, {\n      selection, commitInsert, insertLayer, poseDescriptor,\n    }),\n    [scene, selection, commitInsert, insertLayer, poseDescriptor],\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,gBACd,OACA,UAAuD,CAAC,GACd;CAC1C,MAAM,EACJ,WAAW,cAAc,aAAa,mBACpC;CACJ,OAAO,cACC,eAAe,OAAO;EAC1B;EAAW;EAAc;EAAa;CACxC,CAAC,GACD;EAAC;EAAO;EAAW;EAAc;EAAa;CAAc,CAC9D;AACF"}

package/dist/canvas/useSceneLayerList.js

@@ -1,11 +1,19 @@
-import { useCallback as e, useSyncExternalStore as t } from "react";
+import { useCallback, useSyncExternalStore } from "react";
+
 //#region src/canvas/useSceneLayerList.ts
-var n = () => {}, r = (e) => typeof e?.getLayers == "function" ? e.getLayers().map((e) => e.id).join("\n") : "";
-function i(i) {
-	let a = e((e) => i?.subscribeLayers?.(e) ?? n, [i]), o = e(() => r(i), [i]);
-	return t(a, o, o);
+var UNSUBSCRIBED = () => {};
+var read = (adapter) => typeof adapter?.getLayers === "function" ? adapter.getLayers().map((l) => l.id).join("\n") : "";
+/**
+* The adapter's scene-layer ids as a render input: a string that changes when
+* a layer is added, removed, or reordered. A scene write repaints without
+* re-rendering, so the adapter's `subscribeLayers` is what tells React.
+*/
+function useSceneLayerList(adapter) {
+	const subscribe = useCallback((listener) => adapter?.subscribeLayers?.(listener) ?? UNSUBSCRIBED, [adapter]);
+	const snapshot = useCallback(() => read(adapter), [adapter]);
+	return useSyncExternalStore(subscribe, snapshot, snapshot);
 }
-//#endregion
-export { i as useSceneLayerList };
 
+//#endregion
+export { useSceneLayerList };
 //# sourceMappingURL=useSceneLayerList.js.map

package/dist/canvas/useSceneLayerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSceneLayerList.js","names":["UNSUBSCRIBED","read","adapter","l","useSceneLayerList","subscribe","useCallback","listener","snapshot","useSyncExternalStore"],"sources":["../../src/canvas/useSceneLayerList.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\ninterface LayerListSource {\n  getLayers?: () => readonly { id: string }[];\n  subscribeLayers?: (listener: () => void) => () => void;\n}\n\nconst UNSUBSCRIBED = (): void => {};\n\nconst read = (adapter: LayerListSource | undefined): string =>\n  typeof adapter?.getLayers === 'function' ? adapter.getLayers().map((l) => l.id).join('\\n') : '';\n\n/**\n * The adapter's scene-layer ids as a render input: a string that changes when\n * a layer is added, removed, or reordered. A scene write repaints without\n * re-rendering, so the adapter's `subscribeLayers` is what tells React.\n */\nexport function useSceneLayerList(adapter: LayerListSource | undefined): string {\n  const subscribe = useCallback(\n    (listener: () => void) => adapter?.subscribeLayers?.(listener) ?? UNSUBSCRIBED,\n    [adapter],\n  );\n  const snapshot = useCallback(() => read(adapter), [adapter]);\n  return useSyncExternalStore(subscribe, snapshot, snapshot);\n}\n"],"mappings":";;AAOA,IAAMA,UAA2B,CAAC,GAE5BC,KAAQ,MACZ,OAAOC,GAAS,aAAc,aAAaA,EAAQ,UAAU,CAAC,CAAC,KAAK,MAAMC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;AAO/F,SAAgBC,EAAkB,GAA8C;CAC9E,IAAMC,IAAYC,GACf,MAAyBJ,GAAS,kBAAkBK,CAAQ,KAAKP,GAClE,CAACE,CAAO,CACV,GACMM,IAAWF,QAAkBL,EAAKC,CAAO,GAAG,CAACA,CAAO,CAAC;CAC3D,OAAOO,EAAqBJ,GAAWG,GAAUA,CAAQ;AAC3D"}
+{"version":3,"file":"useSceneLayerList.js","names":[],"sources":["../../src/canvas/useSceneLayerList.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\ninterface LayerListSource {\n  getLayers?: () => readonly { id: string }[];\n  subscribeLayers?: (listener: () => void) => () => void;\n}\n\nconst UNSUBSCRIBED = (): void => {};\n\nconst read = (adapter: LayerListSource | undefined): string =>\n  typeof adapter?.getLayers === 'function' ? adapter.getLayers().map((l) => l.id).join('\\n') : '';\n\n/**\n * The adapter's scene-layer ids as a render input: a string that changes when\n * a layer is added, removed, or reordered. A scene write repaints without\n * re-rendering, so the adapter's `subscribeLayers` is what tells React.\n */\nexport function useSceneLayerList(adapter: LayerListSource | undefined): string {\n  const subscribe = useCallback(\n    (listener: () => void) => adapter?.subscribeLayers?.(listener) ?? UNSUBSCRIBED,\n    [adapter],\n  );\n  const snapshot = useCallback(() => read(adapter), [adapter]);\n  return useSyncExternalStore(subscribe, snapshot, snapshot);\n}\n"],"mappings":";;;AAOA,IAAM,qBAA2B,CAAC;AAElC,IAAM,QAAQ,YACZ,OAAO,SAAS,cAAc,aAAa,QAAQ,UAAU,CAAC,CAAC,KAAK,MAAM,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;;;;;;AAO/F,SAAgB,kBAAkB,SAA8C;CAC9E,MAAM,YAAY,aACf,aAAyB,SAAS,kBAAkB,QAAQ,KAAK,cAClE,CAAC,OAAO,CACV;CACA,MAAM,WAAW,kBAAkB,KAAK,OAAO,GAAG,CAAC,OAAO,CAAC;CAC3D,OAAO,qBAAqB,WAAW,UAAU,QAAQ;AAC3D"}

package/dist/canvas/useSurfaceInput.js

@@ -1,39 +1,58 @@
-import { useLayoutEffect as e, useRef as t } from "react";
-import { useLatest as n } from "@weasel-js/react";
-import { heldPointers as r } from "@weasel-js/gestures";
+import { useLayoutEffect, useRef } from "react";
+import { useLatest } from "@weasel-js/react";
+import { heldPointers } from "@weasel-js/gestures";
+
 //#region src/canvas/useSurfaceInput.ts
-function i(r, i) {
-	let o = n(i), s = t(null);
-	e(() => {
-		let e = r.current;
-		s.current?.element !== e && (s.current?.detach(), s.current = e ? {
-			element: e,
-			detach: a(e, o)
-		} : null);
-	}), e(() => () => {
-		s.current?.detach(), s.current = null;
+/**
+* Listen on whichever element `elementRef` holds, moving the listeners when
+* it holds another. Handlers are read at event time, so a new set never
+* re-attaches.
+*
+* Hover stands down while a pointer is held on the element, which
+* `heldPointers` answers for this and the gesture dispatcher alike. Everything
+* else about a press is the dispatcher's, which listens on this same element.
+*
+* Suppresses the browser's context menu: right-click is a gesture surface
+* tools may consume.
+*/
+function useSurfaceInput(elementRef, handlers) {
+	const live = useLatest(handlers);
+	const attached = useRef(null);
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (attached.current?.element === element) return;
+		attached.current?.detach();
+		attached.current = element ? {
+			element,
+			detach: listen(element, live)
+		} : null;
+	});
+	useLayoutEffect(() => () => {
+		attached.current?.detach();
+		attached.current = null;
 	}, []);
 }
-function a(e, t) {
-	let n = r(e), i = {
+function listen(element, live) {
+	const held = heldPointers(element);
+	const listeners = {
 		pointerdown: () => {
-			t.current.focusOnPress && e.focus();
+			if (live.current.focusOnPress) element.focus();
 		},
-		pointermove: (r) => {
-			n.count() === 0 && t.current.onHover(e, r);
+		pointermove: (event) => {
+			if (held.count() === 0) live.current.onHover(element, event);
 		},
-		pointerleave: () => t.current.onLeave(),
-		contextmenu: (e) => e.preventDefault(),
-		focus: (e) => t.current.onFocus?.(e),
-		blur: (e) => t.current.onBlur?.(e)
+		pointerleave: () => live.current.onLeave(),
+		contextmenu: (event) => event.preventDefault(),
+		focus: (event) => live.current.onFocus?.(event),
+		blur: (event) => live.current.onBlur?.(event)
 	};
-	for (let [t, n] of Object.entries(i)) e.addEventListener(t, n);
+	for (const [type, fn] of Object.entries(listeners)) element.addEventListener(type, fn);
 	return () => {
-		for (let [t, n] of Object.entries(i)) e.removeEventListener(t, n);
-		n.release();
+		for (const [type, fn] of Object.entries(listeners)) element.removeEventListener(type, fn);
+		held.release();
 	};
 }
-//#endregion
-export { i as useSurfaceInput };
 
+//#endregion
+export { useSurfaceInput };
 //# sourceMappingURL=useSurfaceInput.js.map

package/dist/canvas/useSurfaceInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSurfaceInput.js","names":["useSurfaceInput","live","useLatest","handlers","attached","useRef","useLayoutEffect","element","elementRef","listen","held","heldPointers","listeners","event","type","fn"],"sources":["../../src/canvas/useSurfaceInput.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { heldPointers } from '@weasel-js/gestures';\nimport { useLatest } from '@weasel-js/react';\n\n/** What a surface does with the input its element receives. */\nexport interface SurfaceInputHandlers {\n  /** Focus the element on a press, so keys reach it without a click first. */\n  focusOnPress: boolean;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  /** The pointer moved over the element with no button held. */\n  onHover(element: HTMLElement, event: PointerEvent): void;\n  /** The pointer left the element. */\n  onLeave(): void;\n}\n\n/**\n * Listen on whichever element `elementRef` holds, moving the listeners when\n * it holds another. Handlers are read at event time, so a new set never\n * re-attaches.\n *\n * Hover stands down while a pointer is held on the element, which\n * `heldPointers` answers for this and the gesture dispatcher alike. Everything\n * else about a press is the dispatcher's, which listens on this same element.\n *\n * Suppresses the browser's context menu: right-click is a gesture surface\n * tools may consume.\n */\nexport function useSurfaceInput(\n  elementRef: { readonly current: HTMLElement | null },\n  handlers: SurfaceInputHandlers,\n): void {\n  const live = useLatest(handlers);\n  const attached = useRef<{ element: HTMLElement; detach: () => void } | null>(null);\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (attached.current?.element === element) return;\n    attached.current?.detach();\n    attached.current = element ? { element, detach: listen(element, live) } : null;\n  });\n  useLayoutEffect(() => () => {\n    attached.current?.detach();\n    attached.current = null;\n  }, []);\n}\n\nfunction listen(element: HTMLElement, live: { readonly current: SurfaceInputHandlers }): () => void {\n  const held = heldPointers(element);\n  const listeners: Record<string, (event: Event) => void> = {\n    pointerdown: () => {\n      if (live.current.focusOnPress) element.focus();\n    },\n    pointermove: (event) => {\n      if (held.count() === 0) live.current.onHover(element, event as PointerEvent);\n    },\n    pointerleave: () => live.current.onLeave(),\n    contextmenu: (event) => event.preventDefault(),\n    focus: (event) => live.current.onFocus?.(event as FocusEvent),\n    blur: (event) => live.current.onBlur?.(event as FocusEvent),\n  };\n  for (const [type, fn] of Object.entries(listeners)) element.addEventListener(type, fn);\n  return () => {\n    for (const [type, fn] of Object.entries(listeners)) element.removeEventListener(type, fn);\n    held.release();\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgBA,EACd,GACA,GACM;CACN,IAAMC,IAAOC,EAAUC,CAAQ,GACzBC,IAAWC,EAA4D,IAAI;CAQjF,AANAC,QAAsB;EACpB,IAAMC,IAAUC,EAAW;EAC3B,AAAIJ,EAAS,SAAS,YAAYG,MAClCH,EAAS,SAAS,OAAO,GACzB,EAAS,UAAUG,IAAU;GAAE;GAAS,QAAQE,EAAOF,GAASN,CAAI;EAAE,IAAI;CAC5E,CAAC,GACDK,cAA4B;EAE1B,AADAF,EAAS,SAAS,OAAO,GACzB,EAAS,UAAU;CACrB,GAAG,CAAC,CAAC;AACP;AAEA,SAASK,EAAO,GAAsB,GAA8D;CAClG,IAAMC,IAAOC,EAAaJ,CAAO,GAC3BK,IAAoD;EACxD,mBAAmB;GACjB,AAAIX,EAAK,QAAQ,gBAAcM,EAAQ,MAAM;EAC/C;EACA,cAAc,MAAU;GACtB,AAAIG,EAAK,MAAM,MAAM,KAAGT,EAAK,QAAQ,QAAQM,GAASM,CAAqB;EAC7E;EACA,oBAAoBZ,EAAK,QAAQ,QAAQ;EACzC,cAAc,MAAUY,EAAM,eAAe;EAC7C,QAAQ,MAAUZ,EAAK,QAAQ,UAAUY,CAAmB;EAC5D,OAAO,MAAUZ,EAAK,QAAQ,SAASY,CAAmB;CAC5D;CACA,KAAK,IAAM,CAACC,GAAMC,MAAO,OAAO,QAAQH,CAAS,GAAG,EAAQ,iBAAiBE,GAAMC,CAAE;CACrF,aAAa;EACX,KAAK,IAAM,CAACD,GAAMC,MAAO,OAAO,QAAQH,CAAS,GAAG,EAAQ,oBAAoBE,GAAMC,CAAE;EACxF,EAAK,QAAQ;CACf;AACF"}
+{"version":3,"file":"useSurfaceInput.js","names":[],"sources":["../../src/canvas/useSurfaceInput.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\nimport { heldPointers } from '@weasel-js/gestures';\nimport { useLatest } from '@weasel-js/react';\n\n/** What a surface does with the input its element receives. */\nexport interface SurfaceInputHandlers {\n  /** Focus the element on a press, so keys reach it without a click first. */\n  focusOnPress: boolean;\n  onFocus?: (event: FocusEvent) => void;\n  onBlur?: (event: FocusEvent) => void;\n  /** The pointer moved over the element with no button held. */\n  onHover(element: HTMLElement, event: PointerEvent): void;\n  /** The pointer left the element. */\n  onLeave(): void;\n}\n\n/**\n * Listen on whichever element `elementRef` holds, moving the listeners when\n * it holds another. Handlers are read at event time, so a new set never\n * re-attaches.\n *\n * Hover stands down while a pointer is held on the element, which\n * `heldPointers` answers for this and the gesture dispatcher alike. Everything\n * else about a press is the dispatcher's, which listens on this same element.\n *\n * Suppresses the browser's context menu: right-click is a gesture surface\n * tools may consume.\n */\nexport function useSurfaceInput(\n  elementRef: { readonly current: HTMLElement | null },\n  handlers: SurfaceInputHandlers,\n): void {\n  const live = useLatest(handlers);\n  const attached = useRef<{ element: HTMLElement; detach: () => void } | null>(null);\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (attached.current?.element === element) return;\n    attached.current?.detach();\n    attached.current = element ? { element, detach: listen(element, live) } : null;\n  });\n  useLayoutEffect(() => () => {\n    attached.current?.detach();\n    attached.current = null;\n  }, []);\n}\n\nfunction listen(element: HTMLElement, live: { readonly current: SurfaceInputHandlers }): () => void {\n  const held = heldPointers(element);\n  const listeners: Record<string, (event: Event) => void> = {\n    pointerdown: () => {\n      if (live.current.focusOnPress) element.focus();\n    },\n    pointermove: (event) => {\n      if (held.count() === 0) live.current.onHover(element, event as PointerEvent);\n    },\n    pointerleave: () => live.current.onLeave(),\n    contextmenu: (event) => event.preventDefault(),\n    focus: (event) => live.current.onFocus?.(event as FocusEvent),\n    blur: (event) => live.current.onBlur?.(event as FocusEvent),\n  };\n  for (const [type, fn] of Object.entries(listeners)) element.addEventListener(type, fn);\n  return () => {\n    for (const [type, fn] of Object.entries(listeners)) element.removeEventListener(type, fn);\n    held.release();\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,SAAgB,gBACd,YACA,UACM;CACN,MAAM,OAAO,UAAU,QAAQ;CAC/B,MAAM,WAAW,OAA4D,IAAI;CAEjF,sBAAsB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,SAAS,SAAS,YAAY,SAAS;EAC3C,SAAS,SAAS,OAAO;EACzB,SAAS,UAAU,UAAU;GAAE;GAAS,QAAQ,OAAO,SAAS,IAAI;EAAE,IAAI;CAC5E,CAAC;CACD,4BAA4B;EAC1B,SAAS,SAAS,OAAO;EACzB,SAAS,UAAU;CACrB,GAAG,CAAC,CAAC;AACP;AAEA,SAAS,OAAO,SAAsB,MAA8D;CAClG,MAAM,OAAO,aAAa,OAAO;CACjC,MAAM,YAAoD;EACxD,mBAAmB;GACjB,IAAI,KAAK,QAAQ,cAAc,QAAQ,MAAM;EAC/C;EACA,cAAc,UAAU;GACtB,IAAI,KAAK,MAAM,MAAM,GAAG,KAAK,QAAQ,QAAQ,SAAS,KAAqB;EAC7E;EACA,oBAAoB,KAAK,QAAQ,QAAQ;EACzC,cAAc,UAAU,MAAM,eAAe;EAC7C,QAAQ,UAAU,KAAK,QAAQ,UAAU,KAAmB;EAC5D,OAAO,UAAU,KAAK,QAAQ,SAAS,KAAmB;CAC5D;CACA,KAAK,MAAM,CAAC,MAAM,OAAO,OAAO,QAAQ,SAAS,GAAG,QAAQ,iBAAiB,MAAM,EAAE;CACrF,aAAa;EACX,KAAK,MAAM,CAAC,MAAM,OAAO,OAAO,QAAQ,SAAS,GAAG,QAAQ,oBAAoB,MAAM,EAAE;EACxF,KAAK,QAAQ;CACf;AACF"}

package/dist/canvas/useSurfaceSize.js

@@ -0,0 +1,43 @@
+import { useElementSize } from "../core/viewport/useCanvasSize.js";
+import { useLayoutEffect, useRef } from "react";
+import { useLatest } from "@weasel-js/react";
+
+//#region src/canvas/useSurfaceSize.ts
+var NO_ELEMENT = { current: null };
+/**
+* The CSS-pixel size a canvas host paints at: its `width` and `height`, with
+* an axis left out measured off `element`, which fills its parent on it.
+*/
+function useSurfaceSize(props, element) {
+	const fills = props.width === void 0 || props.height === void 0;
+	const measured = useElementSize(fills ? element : NO_ELEMENT);
+	const width = props.width ?? measured.width;
+	const height = props.height ?? measured.height;
+	const onResize = useLatest(props.onResize);
+	const reported = useRef(null);
+	useLayoutEffect(() => {
+		if (width === 0 || height === 0) return;
+		const was = reported.current;
+		if (was && was.width === width && was.height === height) return;
+		reported.current = {
+			width,
+			height
+		};
+		onResize.current?.({
+			width,
+			height
+		});
+	}, [
+		width,
+		height,
+		onResize
+	]);
+	return {
+		width,
+		height
+	};
+}
+
+//#endregion
+export { useSurfaceSize };
+//# sourceMappingURL=useSurfaceSize.js.map

package/dist/canvas/useSurfaceSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurfaceSize.js","names":[],"sources":["../../src/canvas/useSurfaceSize.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { CanvasSize } from 'core/viewport/clampView';\nimport { useElementSize } from 'core/viewport/useCanvasSize';\n\n/** The size props every canvas host takes. */\nexport interface SurfaceSizeProps {\n  /** CSS-pixel width. Omit it, or `height`, and the element fills its parent\n   *  on that axis and is measured: the parent's box decides the size, and the\n   *  canvas adds nothing to it, so the parent needs a size of its own. Nothing\n   *  paints until the measurement lands. */\n  width?: number;\n  /** CSS-pixel height. Omit it to fill, as `width`. */\n  height?: number;\n  /** Every size the surface takes, once at mount and again on each change —\n   *  the measured one for an axis left to fill. */\n  onResize?: (size: CanvasSize) => void;\n}\n\nconst NO_ELEMENT: RefObject<HTMLElement | null> = { current: null };\n\n/**\n * The CSS-pixel size a canvas host paints at: its `width` and `height`, with\n * an axis left out measured off `element`, which fills its parent on it.\n */\nexport function useSurfaceSize(props: SurfaceSizeProps, element: RefObject<HTMLElement | null>): CanvasSize {\n  const fills = props.width === undefined || props.height === undefined;\n  const measured = useElementSize(fills ? element : NO_ELEMENT);\n  const width = props.width ?? measured.width;\n  const height = props.height ?? measured.height;\n\n  const onResize = useLatest(props.onResize);\n  const reported = useRef<CanvasSize | null>(null);\n  useLayoutEffect(() => {\n    // A filling axis reads 0 until measured, and that is no size to report.\n    if (width === 0 || height === 0) return;\n    const was = reported.current;\n    if (was && was.width === width && was.height === height) return;\n    reported.current = { width, height };\n    onResize.current?.({ width, height });\n  }, [width, height, onResize]);\n\n  return { width, height };\n}\n"],"mappings":";;;;;AAmBA,IAAM,aAA4C,EAAE,SAAS,KAAK;;;;;AAMlE,SAAgB,eAAe,OAAyB,SAAoD;CAC1G,MAAM,QAAQ,MAAM,UAAU,UAAa,MAAM,WAAW;CAC5D,MAAM,WAAW,eAAe,QAAQ,UAAU,UAAU;CAC5D,MAAM,QAAQ,MAAM,SAAS,SAAS;CACtC,MAAM,SAAS,MAAM,UAAU,SAAS;CAExC,MAAM,WAAW,UAAU,MAAM,QAAQ;CACzC,MAAM,WAAW,OAA0B,IAAI;CAC/C,sBAAsB;EAEpB,IAAI,UAAU,KAAK,WAAW,GAAG;EACjC,MAAM,MAAM,SAAS;EACrB,IAAI,OAAO,IAAI,UAAU,SAAS,IAAI,WAAW,QAAQ;EACzD,SAAS,UAAU;GAAE;GAAO;EAAO;EACnC,SAAS,UAAU;GAAE;GAAO;EAAO,CAAC;CACtC,GAAG;EAAC;EAAO;EAAQ;CAAQ,CAAC;CAE5B,OAAO;EAAE;EAAO;CAAO;AACzB"}

package/dist/canvas/useToolCursor.js

@@ -1,29 +1,38 @@
-import { useLayoutEffect as e } from "react";
-import { resolveCursorTier as t } from "@weasel-js/cursor";
+import { useLayoutEffect } from "react";
+import { resolveCursorTier } from "@weasel-js/cursor";
+
 //#region src/canvas/useToolCursor.ts
-function n(e) {
-	let n = e.hotkeyEngaged ?? e.active, r = n === null ? void 0 : e.registry[n];
-	if (r?.cursor) {
-		if (typeof r.cursor != "function") return t(r.cursor);
-		try {
-			return t(r.cursor());
-		} catch {
-			return;
-		}
+function resolveToolsCursor(tools) {
+	const id = tools.hotkeyEngaged ?? tools.active;
+	const tool = id === null ? void 0 : tools.registry[id];
+	if (!tool?.cursor) return void 0;
+	if (typeof tool.cursor !== "function") return resolveCursorTier(tool.cursor);
+	try {
+		return resolveCursorTier(tool.cursor());
+	} catch {
+		return;
 	}
 }
-function r(t, r, i, a) {
-	let o = r ? n(r) : void 0, s = o === void 0 ? "" : o.kind === "css" ? `css|${o.css}` : `${o.glyph}|${o.angle}|${o.size}|${o.worldRadius}`;
-	e(() => {
-		t.setBase(o ?? null, a ?? "");
+/**
+* Writes the active tool's cursor to `sink` as its base, and `rest` (the
+* element's own cursor) for when the tool declares none.
+*
+* `element` is what the sink writes to, named so the base is written again
+* when a detached surface's input element arrives a render late.
+*/
+function useToolCursor(sink, tools, element, rest) {
+	const tier = tools ? resolveToolsCursor(tools) : void 0;
+	const key = tier === void 0 ? "" : tier.kind === "css" ? `css|${tier.css}` : `${tier.glyph}|${tier.angle}|${tier.size}|${tier.worldRadius}`;
+	useLayoutEffect(() => {
+		sink.setBase(tier ?? null, rest ?? "");
 	}, [
-		t,
-		s,
-		i,
-		a
+		sink,
+		key,
+		element,
+		rest
 	]);
 }
-//#endregion
-export { r as useToolCursor };
 
+//#endregion
+export { useToolCursor };
 //# sourceMappingURL=useToolCursor.js.map

package/dist/canvas/useToolCursor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolCursor.js","names":["resolveToolsCursor","id","tools","tool","resolveCursorTier","useToolCursor","tier","key","rest","sink","element"],"sources":["../../src/canvas/useToolCursor.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { resolveCursorTier, type CursorSink, type ResolvedCursor } from '@weasel-js/cursor';\nimport type { ToolsApi } from '../tools/overlayBinding';\n\nfunction resolveToolsCursor(tools: ToolsApi): ResolvedCursor | undefined {\n  const id = tools.hotkeyEngaged ?? tools.active;\n  const tool = id === null ? undefined : tools.registry[id];\n  if (!tool?.cursor) return undefined;\n  if (typeof tool.cursor !== 'function') return resolveCursorTier(tool.cursor);\n  try {\n    return resolveCursorTier(tool.cursor());\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Writes the active tool's cursor to `sink` as its base, and `rest` (the\n * element's own cursor) for when the tool declares none.\n *\n * `element` is what the sink writes to, named so the base is written again\n * when a detached surface's input element arrives a render late.\n */\nexport function useToolCursor(\n  sink: CursorSink,\n  tools: ToolsApi | undefined,\n  element: HTMLElement | null | undefined,\n  rest: string | undefined,\n): void {\n  const tier = tools ? resolveToolsCursor(tools) : undefined;\n  // Keyed on the value, not the object: the tier is rebuilt every render.\n  const key = tier === undefined\n    ? ''\n    : tier.kind === 'css'\n      ? `css|${tier.css}`\n      : `${tier.glyph}|${tier.angle}|${tier.size}|${tier.worldRadius}`;\n  useLayoutEffect(() => {\n    sink.setBase(tier ?? null, rest ?? '');\n    // `tier` is a fresh object each render; the key is its identity.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sink, key, element, rest]);\n}\n"],"mappings":";;;AAIA,SAASA,EAAmB,GAA6C;CACvE,IAAMC,IAAKC,EAAM,iBAAiBA,EAAM,QAClCC,IAAOF,MAAO,OAAO,KAAA,IAAYC,EAAM,SAASD;CACtD,IAAKE,GAAM,QACX;MAAI,OAAOA,EAAK,UAAW,YAAY,OAAOC,EAAkBD,EAAK,MAAM;EAC3E,IAAI;GACF,OAAOC,EAAkBD,EAAK,OAAO,CAAC;EACxC,QAAQ;GACN;EACF;CAL2E;AAM7E;AASA,SAAgBE,EACd,GACA,GACA,GACA,GACM;CACN,IAAMC,IAAOJ,IAAQF,EAAmBE,CAAK,IAAI,KAAA,GAE3CK,IAAMD,MAAS,KAAA,IACjB,KACAA,EAAK,SAAS,QACZ,OAAOA,EAAK,QACZ,GAAGA,EAAK,MAAM,GAAGA,EAAK,MAAM,GAAGA,EAAK,KAAK,GAAGA,EAAK;CACvD,QAAsB;EACpB,EAAK,QAAQA,KAAQ,MAAME,KAAQ,EAAE;CAGvC,GAAG;EAACC;EAAMF;EAAKG;EAASF;CAAI,CAAC;AAC/B"}
+{"version":3,"file":"useToolCursor.js","names":[],"sources":["../../src/canvas/useToolCursor.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { resolveCursorTier, type CursorSink, type ResolvedCursor } from '@weasel-js/cursor';\nimport type { ToolsApi } from '../tools/overlayBinding';\n\nfunction resolveToolsCursor(tools: ToolsApi): ResolvedCursor | undefined {\n  const id = tools.hotkeyEngaged ?? tools.active;\n  const tool = id === null ? undefined : tools.registry[id];\n  if (!tool?.cursor) return undefined;\n  if (typeof tool.cursor !== 'function') return resolveCursorTier(tool.cursor);\n  try {\n    return resolveCursorTier(tool.cursor());\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Writes the active tool's cursor to `sink` as its base, and `rest` (the\n * element's own cursor) for when the tool declares none.\n *\n * `element` is what the sink writes to, named so the base is written again\n * when a detached surface's input element arrives a render late.\n */\nexport function useToolCursor(\n  sink: CursorSink,\n  tools: ToolsApi | undefined,\n  element: HTMLElement | null | undefined,\n  rest: string | undefined,\n): void {\n  const tier = tools ? resolveToolsCursor(tools) : undefined;\n  // Keyed on the value, not the object: the tier is rebuilt every render.\n  const key = tier === undefined\n    ? ''\n    : tier.kind === 'css'\n      ? `css|${tier.css}`\n      : `${tier.glyph}|${tier.angle}|${tier.size}|${tier.worldRadius}`;\n  useLayoutEffect(() => {\n    sink.setBase(tier ?? null, rest ?? '');\n    // `tier` is a fresh object each render; the key is its identity.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sink, key, element, rest]);\n}\n"],"mappings":";;;;AAIA,SAAS,mBAAmB,OAA6C;CACvE,MAAM,KAAK,MAAM,iBAAiB,MAAM;CACxC,MAAM,OAAO,OAAO,OAAO,SAAY,MAAM,SAAS;CACtD,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,IAAI,OAAO,KAAK,WAAW,YAAY,OAAO,kBAAkB,KAAK,MAAM;CAC3E,IAAI;EACF,OAAO,kBAAkB,KAAK,OAAO,CAAC;CACxC,QAAQ;EACN;CACF;AACF;;;;;;;;AASA,SAAgB,cACd,MACA,OACA,SACA,MACM;CACN,MAAM,OAAO,QAAQ,mBAAmB,KAAK,IAAI;CAEjD,MAAM,MAAM,SAAS,SACjB,KACA,KAAK,SAAS,QACZ,OAAO,KAAK,QACZ,GAAG,KAAK,MAAM,GAAG,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG,KAAK;CACvD,sBAAsB;EACpB,KAAK,QAAQ,QAAQ,MAAM,QAAQ,EAAE;CAGvC,GAAG;EAAC;EAAM;EAAK;EAAS;CAAI,CAAC;AAC/B"}