@weasel-js/core 1.7.0 → 1.7.2

package/dist/core/selection/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","names":["createLocalStore","ids","initial","listeners","next","l","useSelection","opts","local","useState","store","scene","initialRef","useRef","seeded","optsRef","useLatest","useMemo","get","set","dlog","without","x","id","m","key","modifiers"],"sources":["../../../src/core/selection/useSelection.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport type { NodeId } from 'core/scene/types';\nimport { dlog } from 'debug/flag';\n\n/**\n * `SelectionApi`, `SelectionMode` and `SelectionExtendKey` are declared in\n * `@weasel-js/routing` — the `selection` dep and half the kit's actions are\n * typed in them. Re-exported here, beside the hook that returns one.\n */\nimport type { SelectionApi, SelectionMode, SelectionExtendKey } from '@weasel-js/routing';\nexport type { SelectionApi, SelectionMode, SelectionExtendKey };\n\n/** Somewhere selection can live outside this hook. `Scene` satisfies it;\n *  so does any store with the same three methods. */\nexport interface SelectionStore {\n  getSelection(): readonly NodeId[];\n  setSelection(ids: readonly NodeId[]): void;\n  subscribe(listener: () => void): () => void;\n}\n\n/** Options for {@link useSelection}. */\nexport interface UseSelectionOptions {\n  /** Default `'single'`. */\n  mode?: SelectionMode;\n  /** Default `'shift'`. Ignored in single-mode. */\n  extend?: SelectionExtendKey;\n  /** Default `[]`. */\n  initial?: readonly NodeId[];\n  /** Keep the selection on this store rather than in the hook, so every\n   *  consumer of the same scene shares one selection and undo / redo can\n   *  restore it. `initial` then only seeds a store that has none yet.\n   *  Omit it and the hook owns a selection nobody else sees. */\n  scene?: SelectionStore;\n  /** When `true`, every mutator (`set`/`add`/`remove`/`toggle`/`clear`/\n   *  `applyClick`) is a no-op — selection stays at whatever `initial`\n   *  pinned it to. Useful for demos that exist to showcase a single\n   *  pre-selected node and don't want a\n   *  stray click to deselect. */\n  lock?: boolean;\n}\n\n/** Where a hook with no `scene` keeps its selection, so `get()` reads one\n *  store either way and a write is visible before the re-render it causes. */\nfunction createLocalStore(initial: readonly NodeId[]): SelectionStore {\n  let ids: readonly NodeId[] = initial;\n  const listeners = new Set<() => void>();\n  return {\n    getSelection: () => ids,\n    setSelection: (next) => {\n      ids = next;\n      for (const l of listeners) l();\n    },\n    subscribe: (l) => {\n      listeners.add(l);\n      return () => { listeners.delete(l); };\n    },\n  };\n}\n\n/**\n * Default implementation of the `getSelection` / `setSelection` adapter\n * contract every action hook (delete, duplicate, nudge, group, ...) requires.\n *\n * Owns selection state, exposes a click-policy helper (single vs multi with\n * an extend key), and pre-builds the two adapter methods consumers otherwise\n * hand-roll in every demo:\n *\n * ```tsx\n * const selection = useSelection({ mode: 'multi' });\n * const adapter = { ...arrayAdapter({...}), ...selection.adapterMethods };\n * ```\n *\n * Returns the same object for as long as `scene` is the same store, so it is\n * safe as a memo or effect dependency. The calling component re-renders when\n * the selection changes; key anything derived from the ids on\n * `selection.current`.\n */\nexport function useSelection(opts: UseSelectionOptions = {}): SelectionApi {\n  const { mode = 'single', extend = 'shift', initial = [], lock = false, scene } = opts;\n  const [local] = useState(() => createLocalStore([...initial]));\n  const store = scene ?? local;\n  const initialRef = useRef(initial);\n\n  useSyncExternalStore(store.subscribe, () => store.getSelection());\n\n  // A store that already holds a selection wins: the hook is joining it, not\n  // resetting it. In an effect, not during render — the store has other\n  // subscribers.\n  const seeded = useRef(false);\n  useLayoutEffect(() => {\n    if (!scene || seeded.current) return;\n    seeded.current = true;\n    if (initialRef.current.length > 0 && scene.getSelection().length === 0) {\n      scene.setSelection([...initialRef.current]);\n    }\n  }, [scene]);\n\n  const optsRef = useLatest({ mode, extend, lock });\n\n  return useMemo<SelectionApi>(() => {\n    const get = (): NodeId[] => store.getSelection() as NodeId[];\n    const set = (ids: NodeId[]): void => {\n      if (optsRef.current.lock) return;\n      dlog('selection', 'set', { from: get().length, to: ids.length, ids });\n      store.setSelection(ids);\n    };\n    const without = (id: NodeId) => get().filter((x) => x !== id);\n    return {\n      get current() { return get(); },\n      get,\n      set,\n      add(id) {\n        if (optsRef.current.mode === 'single') set([id]);\n        else if (!get().includes(id)) set([...get(), id]);\n      },\n      remove(id) {\n        if (get().includes(id)) set(without(id));\n      },\n      toggle(id) {\n        if (get().includes(id)) set(without(id));\n        else set(optsRef.current.mode === 'single' ? [id] : [...get(), id]);\n      },\n      clear() { set([]); },\n      contains: (id) => get().includes(id),\n      applyClick(id, modifiers) {\n        const { mode: m, extend: key } = optsRef.current;\n        if (m === 'multi' && modifiers[key]) set(get().includes(id) ? without(id) : [...get(), id]);\n        else set([id]);\n      },\n      adapterMethods: {\n        getSelection: () => get(),\n        setSelection: (ids: NodeId[]) => set(ids),\n      },\n    };\n  }, [store, optsRef]);\n}\n"],"mappings":";;;;AA4CA,SAASA,EAAiB,GAA4C;CACpE,IAAIC,IAAyBC,GACvBC,oBAAY,IAAI,IAAgB;CACtC,OAAO;EACL,oBAAoBF;EACpB,eAAe,MAAS;GACtB,IAAMG;GACN,KAAK,IAAMC,KAAKF,GAAW,EAAE;EAC/B;EACA,YAAY,OACVA,EAAU,IAAIE,CAAC,SACF;GAAE,EAAU,OAAOA,CAAC;EAAG;CAExC;AACF;AAoBA,SAAgBC,EAAa,IAA4B,CAAC,GAAiB;CACzE,IAAM,EAAE,UAAO,UAAU,YAAS,SAAS,aAAU,CAAC,GAAG,UAAO,IAAO,aAAUC,GAC3E,CAACC,KAASC,QAAeT,EAAiB,CAAC,GAAGE,CAAO,CAAC,CAAC,GACvDQ,IAAQC,KAASH,GACjBI,IAAaC,EAAOX,CAAO;CAEjC,EAAqBQ,EAAM,iBAAiBA,EAAM,aAAa,CAAC;CAKhE,IAAMI,IAASD,EAAO,EAAK;CAC3B,QAAsB;EACpB,AAAKF,KAAS,GAAO,YACrB,EAAO,UAAU,IACbC,EAAW,QAAQ,SAAS,KAAKD,EAAM,aAAa,CAAC,CAAC,WAAW,KACnEA,EAAM,aAAa,CAAC,GAAGC,EAAW,OAAO,CAAC;CAE9C,GAAG,CAACD,CAAK,CAAC;CAEV,IAAMI,IAAUC,EAAU;EAAE;EAAM;EAAQ;CAAK,CAAC;CAEhD,OAAOC,QAA4B;EACjC,IAAMC,UAAsBR,EAAM,aAAa,GACzCS,KAAO,MAAwB;GACnC,AAAIJ,EAAQ,QAAQ,SACpBK,EAAK,aAAa,OAAO;IAAE,MAAMF,EAAI,CAAC,CAAC;IAAQ,IAAIjB,EAAI;IAAQ;GAAI,CAAC,GACpES,EAAM,aAAaT,CAAG;EACxB,GACMoB,KAAW,MAAeH,EAAI,CAAC,CAAC,QAAQ,MAAMI,MAAMC,CAAE;EAC5D,OAAO;GACL,IAAI,UAAU;IAAE,OAAOL,EAAI;GAAG;GAC9B;GACA;GACA,IAAI,GAAI;IACN,AAAIH,EAAQ,QAAQ,SAAS,WAAUI,EAAI,CAACI,CAAE,CAAC,IACrCL,EAAI,CAAC,CAAC,SAASK,CAAE,KAAGJ,EAAI,CAAC,GAAGD,EAAI,GAAGK,CAAE,CAAC;GAClD;GACA,OAAO,GAAI;IACT,AAAIL,EAAI,CAAC,CAAC,SAASK,CAAE,KAAGJ,EAAIE,EAAQE,CAAE,CAAC;GACzC;GACA,OAAO,GAAI;IACT,AAAIL,EAAI,CAAC,CAAC,SAASK,CAAE,IAAGJ,EAAIE,EAAQE,CAAE,CAAC,IAClCJ,EAAIJ,EAAQ,QAAQ,SAAS,WAAW,CAACQ,CAAE,IAAI,CAAC,GAAGL,EAAI,GAAGK,CAAE,CAAC;GACpE;GACA,QAAQ;IAAE,EAAI,CAAC,CAAC;GAAG;GACnB,WAAW,MAAOL,EAAI,CAAC,CAAC,SAASK,CAAE;GACnC,WAAW,GAAI,GAAW;IACxB,IAAM,EAAE,MAAMC,GAAG,QAAQC,MAAQV,EAAQ;IACzC,AAAIS,MAAM,WAAWE,EAAUD,KAAMN,EAAID,EAAI,CAAC,CAAC,SAASK,CAAE,IAAIF,EAAQE,CAAE,IAAI,CAAC,GAAGL,EAAI,GAAGK,CAAE,CAAC,IACrFJ,EAAI,CAACI,CAAE,CAAC;GACf;GACA,gBAAgB;IACd,oBAAoBL,EAAI;IACxB,eAAe,MAAkBC,EAAIlB,CAAG;GAC1C;EACF;CACF,GAAG,CAACS,GAAOK,CAAO,CAAC;AACrB"}

package/dist/core/shapeKinds.js

@@ -0,0 +1,54 @@
+//#region src/core/shapeKinds.ts
+var e = {
+	rect: {
+		tool: !0,
+		insertPreview: !0
+	},
+	ellipse: {
+		tool: !0,
+		insertPreview: !0
+	},
+	line: {
+		tool: !0,
+		insertPreview: !0
+	},
+	polygon: {
+		tool: !0,
+		insertPreview: !0
+	},
+	star: {
+		tool: !0,
+		insertPreview: !0
+	},
+	pen: {
+		tool: !0,
+		insertPreview: !1
+	},
+	pencil: {
+		tool: !0,
+		insertPreview: !0
+	},
+	lasso: {
+		tool: !0,
+		insertPreview: !1
+	},
+	text: {
+		tool: !0,
+		insertPreview: !0
+	},
+	image: {
+		tool: !1,
+		insertPreview: !0
+	}
+};
+function t(e, t) {
+	return Object.keys(e).filter((n) => e[n][t]);
+}
+function n(t) {
+	return e[t];
+}
+var r = t(e, "tool");
+//#endregion
+export { r as KIT_SHAPE_KINDS, e as SHAPE_KINDS, n as shapeKindInfo, t as shapeKindsWhere };
+
+//# sourceMappingURL=shapeKinds.js.map

package/dist/core/shapeKinds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapeKinds.js","names":["SHAPE_KINDS","shapeKindsWhere","table","k","field","shapeKindInfo","kind","KIT_SHAPE_KINDS"],"sources":["../../src/core/shapeKinds.ts"],"sourcesContent":["/**\n * The kit's built-in shape kinds — one table, every other spelling derived.\n *\n * Lives in `core/` rather than beside the shape tools because both layers ask\n * questions of the same set: the interactions layer decides whether\n * `insertAction` can paint a live preview for a kind, and the canvas layer\n * decides which shape tools `useBuiltinShapeTools` mounts and what\n * `BUILTIN_TOOL_IDS` / `defaultNodeRouting` / `defaultNodeProperties` enumerate.\n *\n * This module imports nothing on purpose: `useBuiltinShapeTools` imports the\n * package barrel, so anything barrel-reachable that needs these lists at\n * module-evaluation time must not route through it.\n */\n\n/** What the kit knows about one built-in shape kind. */\nexport interface ShapeKindDescriptor {\n  /** Mounted as a built-in shape tool by `useBuiltinShapeTools`, and so a\n   *  member of `BuiltinShapeToolId` / `KIT_SHAPE_KINDS`. `image` is false:\n   *  `useImageTool` needs a `src` and can't be auto-mounted. */\n  readonly tool: boolean;\n  /** `insertAction` emits an `insertPreview` overlay for this kind, and the\n   *  dispatcher overlay layer knows how to draw it. Kinds without one still\n   *  commit; they just have no live drag preview (`pen` and `lasso` don't\n   *  route through `insertAction` at all). */\n  readonly insertPreview: boolean;\n}\n\n/**\n * Declaration order is the enumeration order of every derived list —\n * `KIT_SHAPE_KINDS`, and through it `defaultNodeRouting` /\n * `defaultNodeProperties` / `BUILTIN_TOOL_IDS`.\n */\nexport const SHAPE_KINDS = {\n  rect: { tool: true, insertPreview: true },\n  ellipse: { tool: true, insertPreview: true },\n  line: { tool: true, insertPreview: true },\n  polygon: { tool: true, insertPreview: true },\n  star: { tool: true, insertPreview: true },\n  pen: { tool: true, insertPreview: false },\n  pencil: { tool: true, insertPreview: true },\n  lasso: { tool: true, insertPreview: false },\n  text: { tool: true, insertPreview: true },\n  image: { tool: false, insertPreview: true },\n} as const satisfies Record<string, ShapeKindDescriptor>;\n\n/** Every kind in the table, tool or not. */\nexport type ShapeKind = keyof typeof SHAPE_KINDS;\n\n/** The keys of a shape-kind table whose descriptor sets `F` to `true`. */\nexport type ShapeKindsWhere<T, F extends keyof ShapeKindDescriptor> = {\n  [K in keyof T]: T[K] extends Record<F, true> ? K : never;\n}[keyof T];\n\n/**\n * Built-in shape tool ids handled by `useBuiltinShapeTools`. Each maps to a\n * kit tool hook + a default `create` that produces a leaf node compatible\n * with `PATH_PAINTER`.\n */\nexport type BuiltinShapeToolId = ShapeKindsWhere<typeof SHAPE_KINDS, 'tool'>;\n\n/** The insert kinds the kit's dispatcher overlay layer knows how to render.\n *  Consumer-defined kinds fall outside it: no live preview, commit unaffected. */\nexport type KitInsertShape = ShapeKindsWhere<typeof SHAPE_KINDS, 'insertPreview'>;\n\n/** Kinds in `table` whose descriptor sets `field`, in declaration order. */\nexport function shapeKindsWhere<T extends Record<string, ShapeKindDescriptor>>(\n  table: T,\n  field: keyof ShapeKindDescriptor,\n): (keyof T & string)[] {\n  return (Object.keys(table) as (keyof T & string)[]).filter((k) => table[k][field]);\n}\n\n/** The descriptor for `kind`, or `undefined` for a kind the kit doesn't ship.\n *  The one accessor: ask it rather than testing membership of a derived list. */\nexport function shapeKindInfo(kind: string): ShapeKindDescriptor | undefined {\n  return (SHAPE_KINDS as Record<string, ShapeKindDescriptor>)[kind];\n}\n\n/** Runtime, iterable list of the shape-tool ids in `BuiltinShapeToolId`.\n *  Surfaced so consumers (e.g. the Bundle Inspector) can enumerate the\n *  builtin shape kinds without re-encoding the union. */\nexport const KIT_SHAPE_KINDS: readonly BuiltinShapeToolId[] =\n  shapeKindsWhere(SHAPE_KINDS, 'tool') as BuiltinShapeToolId[];\n"],"mappings":";AAgCA,IAAaA,IAAc;CACzB,MAAM;EAAE,MAAM;EAAM,eAAe;CAAK;CACxC,SAAS;EAAE,MAAM;EAAM,eAAe;CAAK;CAC3C,MAAM;EAAE,MAAM;EAAM,eAAe;CAAK;CACxC,SAAS;EAAE,MAAM;EAAM,eAAe;CAAK;CAC3C,MAAM;EAAE,MAAM;EAAM,eAAe;CAAK;CACxC,KAAK;EAAE,MAAM;EAAM,eAAe;CAAM;CACxC,QAAQ;EAAE,MAAM;EAAM,eAAe;CAAK;CAC1C,OAAO;EAAE,MAAM;EAAM,eAAe;CAAM;CAC1C,MAAM;EAAE,MAAM;EAAM,eAAe;CAAK;CACxC,OAAO;EAAE,MAAM;EAAO,eAAe;CAAK;AAC5C;AAsBA,SAAgBC,EACd,GACA,GACsB;CACtB,OAAQ,OAAO,KAAKC,CAAK,CAAC,CAA0B,QAAQ,MAAMA,EAAMC,EAAE,CAACC,EAAM;AACnF;AAIA,SAAgBC,EAAc,GAA+C;CAC3E,OAAQL,EAAoDM;AAC9D;AAKA,IAAaC,IACXN,EAAgBD,GAAa,MAAM"}

package/dist/core/strokeMarkerShapes.js

@@ -0,0 +1,139 @@
+import { PATH_L as e, PATH_M as t, PATH_Z as n } from "@weasel-js/geom";
+//#region src/core/strokeMarkerShapes.ts
+function r(r, i, a = !0) {
+	let o = r.length / 2, s = new Uint8Array(a ? o + 1 : o);
+	s[0] = t;
+	for (let t = 1; t < o; t++) s[t] = e;
+	a && (s[o] = n);
+	let c = new Float32Array(r.length);
+	for (let e = 0; e < r.length; e++) c[e] = r[e] * i;
+	return {
+		kind: "polygon",
+		commands: s,
+		coords: c,
+		fillRule: "nonzero"
+	};
+}
+function i(e, t, n, i = 32) {
+	let a = [];
+	for (let n = 0; n < i; n++) {
+		let r = n / i * Math.PI * 2;
+		a.push(e + t * Math.cos(r), t * Math.sin(r));
+	}
+	return r(a, n);
+}
+var a = [
+	{
+		id: "arrow",
+		reads: [],
+		inset: 3,
+		path: ({ size: e }) => r([
+			0,
+			0,
+			-3,
+			-1.5,
+			-3,
+			1.5
+		], e)
+	},
+	{
+		id: "arrow-open",
+		reads: [],
+		inset: 0,
+		fill: "none",
+		outline: { width: 1 },
+		path: ({ size: e }) => r([
+			-2.867,
+			-2.007,
+			0,
+			0,
+			-2.867,
+			2.007
+		], e, !1)
+	},
+	{
+		id: "arrow-concave",
+		reads: [],
+		inset: 3,
+		path: ({ size: e }) => r([
+			0,
+			0,
+			-3,
+			-1.5,
+			-2,
+			0,
+			-3,
+			1.5
+		], e)
+	},
+	{
+		id: "diamond",
+		reads: [],
+		inset: 4,
+		path: ({ size: e }) => r([
+			0,
+			0,
+			-2,
+			-1.2,
+			-4,
+			0,
+			-2,
+			1.2
+		], e)
+	},
+	{
+		id: "diamond-hollow",
+		reads: [],
+		inset: 4,
+		fill: "none",
+		outline: { width: .5 },
+		path: ({ size: e }) => r([
+			0,
+			0,
+			-2,
+			-1.2,
+			-4,
+			0,
+			-2,
+			1.2
+		], e)
+	},
+	{
+		id: "circle",
+		reads: [],
+		inset: 2,
+		path: ({ size: e }) => i(-1, 1, e)
+	},
+	{
+		id: "square",
+		reads: [],
+		inset: 2,
+		path: ({ size: e }) => r([
+			0,
+			-1,
+			0,
+			1,
+			-2,
+			1,
+			-2,
+			-1
+		], e)
+	},
+	{
+		id: "bar",
+		reads: [],
+		inset: 0,
+		fill: "none",
+		outline: { width: 1 },
+		path: ({ size: e }) => r([
+			0,
+			-1.5,
+			0,
+			1.5
+		], e, !1)
+	}
+];
+//#endregion
+export { a as BUILTIN_MARKERS };
+
+//# sourceMappingURL=strokeMarkerShapes.js.map

package/dist/core/strokeMarkerShapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strokeMarkerShapes.js","names":["poly","n","pts","commands","close","PATH_M","i","PATH_L","PATH_Z","coords","size","circle","segments","theta","cx","r","BUILTIN_MARKERS"],"sources":["../../src/core/strokeMarkerShapes.ts"],"sourcesContent":["/**\n * The kit's built-in stroke-marker vocabulary.\n *\n * Every entry is authored with its anchor at the origin and pointing +X, so\n * the line arrives from -X and no geometry sits at positive X. Coordinates are\n * in units of `MarkerCtx.size`, which defaults to the resolved stroke width —\n * one definition is therefore correct at any line weight.\n *\n * Not to be confused with `features/paths/markers.ts`, which builds\n * decorative chrome shapes and is unrelated.\n */\n\nimport { PATH_M, PATH_L, PATH_Z, type PolygonPath } from '@weasel-js/geom';\nimport type { MarkerCtx, MarkerEntry } from './strokeMarkers';\n\nfunction poly(pts: readonly number[], size: number, close = true): PolygonPath {\n  const n = pts.length / 2;\n  const commands = new Uint8Array(close ? n + 1 : n);\n  commands[0] = PATH_M;\n  for (let i = 1; i < n; i++) commands[i] = PATH_L;\n  if (close) commands[n] = PATH_Z;\n  const coords = new Float32Array(pts.length);\n  for (let i = 0; i < pts.length; i++) coords[i] = pts[i] * size;\n  return { kind: 'polygon', commands, coords, fillRule: 'nonzero' };\n}\n\n/** Circle of radius `r` centred at `cx`, in marker units. */\nfunction circle(cx: number, r: number, size: number, segments = 32): PolygonPath {\n  const pts: number[] = [];\n  for (let i = 0; i < segments; i++) {\n    const theta = (i / segments) * Math.PI * 2;\n    pts.push(cx + r * Math.cos(theta), r * Math.sin(theta));\n  }\n  return poly(pts, size);\n}\n\n/** The markers the registry is seeded with: `arrow`, `arrow-open`,\n *  `arrow-concave`, `diamond`, `diamond-hollow`, `circle`, `square` and `bar`. */\nexport const BUILTIN_MARKERS: readonly MarkerEntry[] = [\n  {\n    id: 'arrow',\n    reads: [],\n    inset: 3,\n    path: ({ size }: MarkerCtx) => poly([0, 0, -3, -1.5, -3, 1.5], size),\n  },\n  {\n    id: 'arrow-open',\n    reads: [],\n    inset: 0,\n    fill: 'none',\n    outline: { width: 1 },\n    // Open at the back, so the ribbon runs to the vertex and the arms meet it.\n    // Arms 3.5 long at ±35°: the back opening is 4 units against 2 units of\n    // arm, so the V still reads open. Shorter or narrower and the two arms\n    // close the gap themselves and it paints as a solid triangle.\n    path: ({ size }: MarkerCtx) =>\n      poly([-2.867, -2.007, 0, 0, -2.867, 2.007], size, false),\n  },\n  {\n    id: 'arrow-concave',\n    reads: [],\n    inset: 3,\n    path: ({ size }: MarkerCtx) => poly([0, 0, -3, -1.5, -2, 0, -3, 1.5], size),\n  },\n  {\n    id: 'diamond',\n    reads: [],\n    inset: 4,\n    path: ({ size }: MarkerCtx) => poly([0, 0, -2, -1.2, -4, 0, -2, 1.2], size),\n  },\n  {\n    id: 'diamond-hollow',\n    reads: [],\n    inset: 4,\n    fill: 'none',\n    outline: { width: 0.5 },\n    path: ({ size }: MarkerCtx) => poly([0, 0, -2, -1.2, -4, 0, -2, 1.2], size),\n  },\n  {\n    id: 'circle',\n    reads: [],\n    inset: 2,\n    path: ({ size }: MarkerCtx) => circle(-1, 1, size),\n  },\n  {\n    id: 'square',\n    reads: [],\n    inset: 2,\n    path: ({ size }: MarkerCtx) => poly([0, -1, 0, 1, -2, 1, -2, -1], size),\n  },\n  {\n    id: 'bar',\n    reads: [],\n    inset: 0,\n    fill: 'none',\n    outline: { width: 1 },\n    path: ({ size }: MarkerCtx) => poly([0, -1.5, 0, 1.5], size, false),\n  },\n];\n"],"mappings":";;AAeA,SAASA,EAAK,GAAwB,GAAc,IAAQ,IAAmB;CAC7E,IAAMC,IAAIC,EAAI,SAAS,GACjBC,IAAW,IAAI,WAAWC,IAAQH,IAAI,IAAIA,CAAC;CACjD,EAAS,KAAKI;CACd,KAAK,IAAIC,IAAI,GAAGA,IAAIL,GAAG,KAAK,EAASK,KAAKC;CAC1C,AAAIH,MAAO,EAASH,KAAKO;CACzB,IAAMC,IAAS,IAAI,aAAaP,EAAI,MAAM;CAC1C,KAAK,IAAII,IAAI,GAAGA,IAAIJ,EAAI,QAAQ,KAAK,EAAOI,KAAKJ,EAAII,KAAKI;CAC1D,OAAO;EAAE,MAAM;EAAW;EAAU;EAAQ,UAAU;CAAU;AAClE;AAGA,SAASC,EAAO,GAAY,GAAW,GAAc,IAAW,IAAiB;CAC/E,IAAMT,IAAgB,CAAC;CACvB,KAAK,IAAII,IAAI,GAAGA,IAAIM,GAAU,KAAK;EACjC,IAAMC,IAASP,IAAIM,IAAY,KAAK,KAAK;EACzC,EAAI,KAAKE,IAAKC,IAAI,KAAK,IAAIF,CAAK,GAAGE,IAAI,KAAK,IAAIF,CAAK,CAAC;CACxD;CACA,OAAOb,EAAKE,GAAKQ,CAAI;AACvB;AAIA,IAAaM,IAA0C;CACrD;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,OAAO,EAAE,cAAsBhB,EAAK;GAAC;GAAG;GAAG;GAAI;GAAM;GAAI;EAAG,GAAGU,CAAI;CACrE;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,MAAM;EACN,SAAS,EAAE,OAAO,EAAE;EAKpB,OAAO,EAAE,cACPV,EAAK;GAAC;GAAQ;GAAQ;GAAG;GAAG;GAAQ;EAAK,GAAGU,GAAM,EAAK;CAC3D;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,OAAO,EAAE,cAAsBV,EAAK;GAAC;GAAG;GAAG;GAAI;GAAM;GAAI;GAAG;GAAI;EAAG,GAAGU,CAAI;CAC5E;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,OAAO,EAAE,cAAsBV,EAAK;GAAC;GAAG;GAAG;GAAI;GAAM;GAAI;GAAG;GAAI;EAAG,GAAGU,CAAI;CAC5E;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,MAAM;EACN,SAAS,EAAE,OAAO,GAAI;EACtB,OAAO,EAAE,cAAsBV,EAAK;GAAC;GAAG;GAAG;GAAI;GAAM;GAAI;GAAG;GAAI;EAAG,GAAGU,CAAI;CAC5E;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,OAAO,EAAE,cAAsBC,EAAO,IAAI,GAAGD,CAAI;CACnD;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,OAAO,EAAE,cAAsBV,EAAK;GAAC;GAAG;GAAI;GAAG;GAAG;GAAI;GAAG;GAAI;EAAE,GAAGU,CAAI;CACxE;CACA;EACE,IAAI;EACJ,OAAO,CAAC;EACR,OAAO;EACP,MAAM;EACN,SAAS,EAAE,OAAO,EAAE;EACpB,OAAO,EAAE,cAAsBV,EAAK;GAAC;GAAG;GAAM;GAAG;EAAG,GAAGU,GAAM,EAAK;CACpE;AACF"}

package/dist/core/strokeMarkers.js

@@ -0,0 +1,28 @@
+import { BUILTIN_MARKERS as e } from "./strokeMarkerShapes.js";
+import { createReflectable as t } from "@weasel-js/registry";
+//#region src/core/strokeMarkers.ts
+var n = t();
+function r() {
+	for (let t of e) n.push(t.id, t, { source: "kit" });
+}
+r();
+var i = n.reflection;
+function a() {
+	return n.getVersion();
+}
+function o(e) {
+	return n.push(e.id, e);
+}
+function s(e) {
+	return e === void 0 ? void 0 : n.get(e);
+}
+function c() {
+	return n.entries().map((e) => e.value);
+}
+function l() {
+	n.clear(), r();
+}
+//#endregion
+export { l as _resetMarkersForTests, s as getMarker, c as listMarkers, a as markerGeneration, i as markerRegistry, o as registerMarker };
+
+//# sourceMappingURL=strokeMarkers.js.map

package/dist/core/strokeMarkers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strokeMarkers.js","names":["MARKERS","createReflectable","seedBuiltins","entry","BUILTIN_MARKERS","markerRegistry","markerGeneration","registerMarker","getMarker","key","listMarkers","_resetMarkersForTests"],"sources":["../../src/core/strokeMarkers.ts"],"sourcesContent":["/**\n * The stroke-marker registry — arrowheads and other line terminators.\n *\n * Keyed by string, because a key is what sits in `stroke.markerEnd`. That is\n * the difference from `registerNodeShape`, which resolves by first-matching\n * predicate and whose `id` is only a label.\n *\n * A built-in's SVG slot lives in `@weasel-js/svg` and cannot be imported here\n * without inverting a package dependency, so an entry carries `toSvg` for that\n * package to consume — the same split `PaintKindEntry` uses.\n */\n\nimport type { FillStyle, MarkerKey, Stroke } from '@weasel-js/paint';\nimport type { Path } from '@weasel-js/geom';\nimport { createReflectable, type Reflection } from '@weasel-js/registry';\nimport { BUILTIN_MARKERS } from './strokeMarkerShapes';\n\n/** What an entry's `path` is given. Entries that ignore it may return a\n *  constant path. */\nexport interface MarkerCtx {\n  /** One geometry unit, in the same world units the ribbon is tessellated in.\n   *  Defaults to the resolved stroke width. */\n  readonly size: number;\n  /** The stroke this marker belongs to, already width-resolved. */\n  readonly stroke: Stroke;\n}\n\n/** `'line'` means the stroke's own paint — SVG 2's `context-stroke`, as the\n *  default rather than an opt-in. */\nexport type MarkerPaint = FillStyle | 'line' | 'none';\n\n/** A stroke-marker registry entry: a terminator's geometry, paint and inset. */\nexport interface MarkerEntry {\n  /** `'kit:'`-free for built-ins so the key matches the SVG attribute value;\n   *  consumers should prefix (`'app-my-head'`). A key becomes the `id` of the\n   *  emitted `<marker>` def, so it must be a valid XML name — no colons. */\n  id: MarkerKey;\n  /** Geometry with its anchor at the origin, pointing +X, in units of\n   *  `ctx.size`. An arbitrary anchor is expressed by where the geometry is\n   *  drawn, which is why there is no `refX`/`refY`. */\n  path(ctx: MarkerCtx): Path;\n  /** Default `'line'`. */\n  fill?: MarkerPaint;\n  /** Outline width is in the same units as `path`. `false` (the default)\n   *  means no outline. */\n  outline?: { width: number; paint?: MarkerPaint } | false;\n  /** How far back along the line the stroke stops, in units of `ctx.size`.\n   *  Default 0. A property of the shape, not a setting on the stroke: an open\n   *  V needs 0 or its arms stop meeting the line. */\n  inset?: number;\n  /** `'auto'` (default) follows the line; a number is a fixed angle in\n   *  radians, ignoring the line — SVG's `orient=\"<angle>\"`. */\n  orient?: 'auto' | number;\n  /** The stroke fields `path` reads besides `ctx.size` — `[]` for a shape\n   *  drawn from size alone. Declared, a head is reused across stroke objects\n   *  whose listed fields are equal; omitted, only across frames that pass the\n   *  same stroke object, since `path` might read any of it. */\n  reads?: readonly (keyof Stroke)[];\n  /** Emits the `<marker>` def. Consumed by `@weasel-js/svg`. */\n  toSvg?(id: string, entry: MarkerEntry): string;\n}\n\nconst MARKERS = createReflectable<MarkerEntry>();\n\nfunction seedBuiltins(): void {\n  for (const entry of BUILTIN_MARKERS) MARKERS.push(entry.id, entry, { source: 'kit' });\n}\nseedBuiltins();\n\n/** Every registered marker, with the overrides each displaced. */\nexport const markerRegistry: Reflection<MarkerEntry> = MARKERS.reflection;\n\n/** Bumped whenever the registered set changes, for caches of marker geometry. */\nexport function markerGeneration(): number {\n  return MARKERS.getVersion();\n}\n\n/** Register a marker. Returns a disposer. Re-registering an existing id is an\n *  override; disposing it uncovers whatever it displaced rather than deleting the key. */\nexport function registerMarker(entry: MarkerEntry): () => void {\n  return MARKERS.push(entry.id, entry);\n}\n\n/** The entry for `key`, or `undefined`. */\nexport function getMarker(key: string | undefined): MarkerEntry | undefined {\n  return key === undefined ? undefined : MARKERS.get(key);\n}\n\n/** Every registered marker, built-ins first, in registration order. */\nexport function listMarkers(): readonly MarkerEntry[] {\n  return MARKERS.entries().map((e) => e.value);\n}\n\n/** Test helper. Do not call from product code. */\nexport function _resetMarkersForTests(): void {\n  MARKERS.clear();\n  seedBuiltins();\n}\n"],"mappings":";;;AA8DA,IAAMA,IAAUC,EAA+B;AAE/C,SAASC,IAAqB;CAC5B,KAAK,IAAMC,KAASC,GAAiB,EAAQ,KAAKD,EAAM,IAAIA,GAAO,EAAE,QAAQ,MAAM,CAAC;AACtF;AACAD,EAAa;AAGb,IAAaG,IAA0CL,EAAQ;AAG/D,SAAgBM,IAA2B;CACzC,OAAON,EAAQ,WAAW;AAC5B;AAIA,SAAgBO,EAAe,GAAgC;CAC7D,OAAOP,EAAQ,KAAKG,EAAM,IAAIA,CAAK;AACrC;AAGA,SAAgBK,EAAU,GAAkD;CAC1E,OAAOC,MAAQ,KAAA,IAAY,KAAA,IAAYT,EAAQ,IAAIS,CAAG;AACxD;AAGA,SAAgBC,IAAsC;CACpD,OAAOV,EAAQ,QAAQ,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK;AAC7C;AAGA,SAAgBW,IAA8B;CAE5C,AADAX,EAAQ,MAAM,GACdE,EAAa;AACf"}

package/dist/core/stylus/stylus.js

@@ -0,0 +1,39 @@
+import { clientToWorld as e } from "../viewport/clientToWorld.js";
+//#region src/core/stylus/stylus.ts
+function t(e, t = {}) {
+	let n = t.minWidth ?? .5, r = t.maxWidth ?? 6, i = t.gamma ?? 1.6, a = Math.max(0, Math.min(1, e)) ** i;
+	return n + (r - n) * a;
+}
+function n(e) {
+	let t = e, n = e.pointerType ?? "";
+	return {
+		pressure: e.pressure,
+		tiltX: e.tiltX ?? 0,
+		tiltY: e.tiltY ?? 0,
+		altitudeAngle: typeof t.altitudeAngle == "number" ? t.altitudeAngle : void 0,
+		azimuthAngle: typeof t.azimuthAngle == "number" ? t.azimuthAngle : void 0,
+		twist: e.twist ?? 0,
+		pointerType: n,
+		isStylus: n === "pen"
+	};
+}
+function r(t, r, i) {
+	let a = t.getCoalescedEvents, o = typeof a == "function" ? a.call(t) : [], s = o.length > 0 ? o : [t];
+	for (let t of s) {
+		let [a, o] = [t.clientX - r.canvasRect.left, t.clientY - r.canvasRect.top], [s, c] = e(t.clientX, t.clientY, r.canvasRect, r.view);
+		i({
+			clientX: t.clientX,
+			clientY: t.clientY,
+			screenX: a,
+			screenY: o,
+			worldX: s,
+			worldY: c,
+			stylus: n(t),
+			event: t
+		});
+	}
+}
+//#endregion
+export { r as forEachCoalesced, n as getStylusData, t as pressureToWidth };
+
+//# sourceMappingURL=stylus.js.map

package/dist/core/stylus/stylus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylus.js","names":["pressureToWidth","minWidth","options","maxWidth","gamma","shaped","pressure","getStylusData","ext","pointerType","forEachCoalesced","get","event","sub","list","e","screenX","screenY","ctx","worldX","worldY","clientToWorld"],"sources":["../../../src/core/stylus/stylus.ts"],"sourcesContent":["import { clientToWorld } from 'core/viewport/clientToWorld';\n/**\n * Stylus / Pencil pointer-event helpers.\n *\n * Most stylus information (pressure, tilt, altitude/azimuth) is already on\n * the standard `PointerEvent`. These helpers normalize the surface across\n * browsers, fill in sensible defaults for non-stylus inputs, and provide\n * a coalesced-event iterator so tools can opt into high-frequency samples\n * (Apple Pencil reports up to ~240Hz; most browsers coalesce those samples\n * into per-frame `pointermove` events whose intermediate states are only\n * accessible via `getCoalescedEvents()`).\n *\n * Apple-specific note: `pointerType: 'pen'` covers Apple Pencil on iPad\n * Safari. The barrel-double-tap (Pencil 2) and barrel-squeeze (Pencil\n * Pro) gestures are NOT exposed to web pages — they remain\n * UIKit-only via `UIPencilInteraction`.\n */\n\n/** Normalized snapshot of stylus state at a single pointer sample. */\nexport interface StylusData {\n  /** 0..1. Mouse and ordinary touch report 0 when no button is held and 0.5\n   *  while a button is held (per the Pointer Events spec). Stylus inputs\n   *  report a true pressure curve. */\n  pressure: number;\n  /** Tilt of the pen in degrees from the surface normal, projected onto the\n   *  X axis. Range ±90. Zero for mouse/touch. */\n  tiltX: number;\n  /** Tilt projected onto the Y axis. Range ±90. Zero for mouse/touch. */\n  tiltY: number;\n  /** Newer (Pointer Events level 3) angle in radians between the surface\n   *  and the pen barrel. π/2 = perpendicular to the surface. Undefined on\n   *  browsers that haven't shipped the field yet. */\n  altitudeAngle: number | undefined;\n  /** Newer angle in radians around the Z axis. Undefined on browsers\n   *  without level-3 support. */\n  azimuthAngle: number | undefined;\n  /** Rotation of the pen barrel in degrees. Apple Pencil Pro reports this\n   *  natively but Safari does NOT yet surface it via PointerEvent.twist —\n   *  expect 0 there. Some Wacom stylus drivers do report it. */\n  twist: number;\n  /** Raw pointerType from the event ('mouse' | 'pen' | 'touch' | ''). */\n  pointerType: string;\n  /** Convenience: `pointerType === 'pen'`. */\n  isStylus: boolean;\n}\n\n/** Options for `pressureToWidth`. */\nexport interface PressureToWidthOptions {\n  /** Width returned at pressure 0. Default 0.5. */\n  minWidth?: number;\n  /** Width returned at pressure 1. Default 6. */\n  maxWidth?: number;\n  /** Response curve exponent applied to pressure before lerping\n   *  (`p ** gamma`). 1 = linear; >1 emphasizes light touches (sharper\n   *  thin → thick transition); <1 emphasizes heavy touches. Default 1.6,\n   *  a small bias toward heavy strokes that matches typical pencil feel\n   *  without crushing the dynamic range. */\n  gamma?: number;\n}\n\n/**\n * Map a 0..1 pressure value to a stroke width.\n *\n * `width(p) = minWidth + (maxWidth - minWidth) × p^gamma`\n *\n * Mouse / non-stylus inputs report `pressure === 0` (no button) or `0.5`\n * (button held); callers that don't want uniform 0.5-pressure widths on\n * mouse input should gate on `pointerType === 'pen'` upstream and feed a\n * constant width on the non-stylus path.\n */\nexport function pressureToWidth(\n  pressure: number,\n  options: PressureToWidthOptions = {},\n): number {\n  const minWidth = options.minWidth ?? 0.5;\n  const maxWidth = options.maxWidth ?? 6;\n  const gamma = options.gamma ?? 1.6;\n  const p = Math.max(0, Math.min(1, pressure));\n  const shaped = p ** gamma;\n  return minWidth + (maxWidth - minWidth) * shaped;\n}\n\n/** Extract a normalized stylus snapshot from any PointerEvent. Pure. */\nexport function getStylusData(e: PointerEvent): StylusData {\n  // `altitudeAngle` / `azimuthAngle` are Pointer Events level 3 — only\n  // present in newer browsers. Read defensively so the helper degrades\n  // gracefully on older runtimes.\n  const ext = e as PointerEvent & {\n    altitudeAngle?: number;\n    azimuthAngle?: number;\n  };\n  const pointerType = e.pointerType ?? '';\n  return {\n    pressure: e.pressure,\n    tiltX: e.tiltX ?? 0,\n    tiltY: e.tiltY ?? 0,\n    altitudeAngle: typeof ext.altitudeAngle === 'number' ? ext.altitudeAngle : undefined,\n    azimuthAngle: typeof ext.azimuthAngle === 'number' ? ext.azimuthAngle : undefined,\n    twist: e.twist ?? 0,\n    pointerType,\n    isStylus: pointerType === 'pen',\n  };\n}\n\n/** One enriched sample, ready for tools that want world coords + stylus\n *  data at every coalesced sub-frame. */\nexport interface PointerSample {\n  /** Client coords (relative to viewport). */\n  clientX: number;\n  clientY: number;\n  /** Canvas-relative CSS pixels. */\n  screenX: number;\n  screenY: number;\n  /** World coords, derived from `screenX/Y` via the supplied view. */\n  worldX: number;\n  worldY: number;\n  /** Stylus snapshot for this sample. */\n  stylus: StylusData;\n  /** Original event (may be the parent move or a coalesced sub-event). */\n  event: PointerEvent;\n}\n\n/** Context for `forEachCoalesced` — the kit's `ToolCtx` satisfies this. */\nexport interface CoalescedCtx {\n  canvasRect: { left: number; top: number };\n  view: { x: number; y: number; scale: { x: number; y: number } };\n}\n\n/**\n * Iterate coalesced sub-events of a `pointermove`, yielding a\n * `PointerSample` per sub-event with world coords already derived.\n *\n * Browsers that batch high-frequency samples (Apple Pencil, drawing\n * tablets) expose them through `event.getCoalescedEvents()`. Pen / pencil\n * tools should iterate them for smooth strokes; mouse tools usually only\n * need the parent event and can ignore this.\n *\n * Fallback: when `getCoalescedEvents` is unavailable or returns an empty\n * list, the parent event itself is yielded once so callers don't drop\n * samples on older browsers.\n */\nexport function forEachCoalesced(\n  event: PointerEvent,\n  ctx: CoalescedCtx,\n  cb: (sample: PointerSample) => void,\n): void {\n  // Cast through unknown — older lib.dom.d.ts in some toolchains omits the\n  // method even though every modern engine ships it.\n  const get = (event as unknown as { getCoalescedEvents?: () => PointerEvent[] })\n    .getCoalescedEvents;\n  const sub = typeof get === 'function' ? get.call(event) : [];\n  const list = sub.length > 0 ? sub : [event];\n  for (const e of list) {\n    const [screenX, screenY] = [e.clientX - ctx.canvasRect.left, e.clientY - ctx.canvasRect.top];\n    const [worldX, worldY] = clientToWorld(e.clientX, e.clientY, ctx.canvasRect, ctx.view);\n    cb({\n      clientX: e.clientX,\n      clientY: e.clientY,\n      screenX,\n      screenY,\n      worldX,\n      worldY,\n      stylus: getStylusData(e),\n      event: e,\n    });\n  }\n}\n"],"mappings":";;AAsEA,SAAgBA,EACd,GACA,IAAkC,CAAC,GAC3B;CACR,IAAMC,IAAWC,EAAQ,YAAY,IAC/BC,IAAWD,EAAQ,YAAY,GAC/BE,IAAQF,EAAQ,SAAS,KAEzBG,IADI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGC,CAAQ,CAC3B,KAAKF;CACpB,OAAOH,KAAYE,IAAWF,KAAYI;AAC5C;AAGA,SAAgBE,EAAc,GAA6B;CAIzD,IAAMC,IAAM,GAINC,IAAc,EAAE,eAAe;CACrC,OAAO;EACL,UAAU,EAAE;EACZ,OAAO,EAAE,SAAS;EAClB,OAAO,EAAE,SAAS;EAClB,eAAe,OAAOD,EAAI,iBAAkB,WAAWA,EAAI,gBAAgB,KAAA;EAC3E,cAAc,OAAOA,EAAI,gBAAiB,WAAWA,EAAI,eAAe,KAAA;EACxE,OAAO,EAAE,SAAS;EAClB;EACA,UAAUC,MAAgB;CAC5B;AACF;AAuCA,SAAgBC,EACd,GACA,GACA,GACM;CAGN,IAAMC,IAAOC,EACV,oBACGC,IAAM,OAAOF,KAAQ,aAAaA,EAAI,KAAKC,CAAK,IAAI,CAAC,GACrDE,IAAOD,EAAI,SAAS,IAAIA,IAAM,CAACD,CAAK;CAC1C,KAAK,IAAMG,KAAKD,GAAM;EACpB,IAAM,CAACE,GAASC,KAAW,CAACF,EAAE,UAAUG,EAAI,WAAW,MAAMH,EAAE,UAAUG,EAAI,WAAW,GAAG,GACrF,CAACC,GAAQC,KAAUC,EAAcN,EAAE,SAASA,EAAE,SAASG,EAAI,YAAYA,EAAI,IAAI;EACrF,EAAG;GACD,SAASH,EAAE;GACX,SAASA,EAAE;GACX;GACA;GACA;GACA;GACA,QAAQR,EAAcQ,CAAC;GACvB,OAAOA;EACT,CAAC;CACH;AACF"}

package/dist/core/stylus/usePointerStylus.js

@@ -0,0 +1,51 @@
+import { getStylusData as e } from "./stylus.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { useLatest as i } from "@weasel-js/react";
+//#region src/core/stylus/usePointerStylus.ts
+var a = {
+	pressure: 0,
+	tiltX: 0,
+	tiltY: 0,
+	altitudeAngle: void 0,
+	azimuthAngle: void 0,
+	twist: 0,
+	pointerType: "",
+	isStylus: !1,
+	hovering: !1
+};
+function o(o, s = {}) {
+	let { maxFps: c = 60, stylusOnly: l = !1 } = s, [u, d] = r(a), f = n(-Infinity), p = i({
+		maxFps: c,
+		stylusOnly: l
+	});
+	return t(() => {
+		let t = o == null ? window : o instanceof HTMLElement ? o : o.current ?? window, n = (t) => {
+			let n = t, { maxFps: r, stylusOnly: i } = p.current;
+			if (i && n.pointerType !== "pen") return;
+			let a = performance.now(), o = r > 0 && Number.isFinite(r) ? 1e3 / r : 0;
+			o > 0 && a - f.current < o || (f.current = a, d((t) => ({
+				...e(n),
+				hovering: t.hovering
+			})));
+		}, r = (e) => {
+			let t = e;
+			p.current.stylusOnly && t.pointerType !== "pen" || d((e) => ({
+				...e,
+				hovering: !0
+			}));
+		}, i = (e) => {
+			let t = e;
+			p.current.stylusOnly && t.pointerType !== "pen" || d((e) => ({
+				...e,
+				hovering: !1
+			}));
+		};
+		return t.addEventListener("pointermove", n), t.addEventListener("pointerenter", r), t.addEventListener("pointerleave", i), () => {
+			t.removeEventListener("pointermove", n), t.removeEventListener("pointerenter", r), t.removeEventListener("pointerleave", i);
+		};
+	}, [o, p]), u;
+}
+//#endregion
+export { o as usePointerStylus };
+
+//# sourceMappingURL=usePointerStylus.js.map

package/dist/core/stylus/usePointerStylus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePointerStylus.js","names":["IDLE","usePointerStylus","options","state","setState","useState","lastCommit","useRef","optsRef","useLatest","useEffect","el","target","onMove","e","raw","stylusOnly","now","minGap","maxFps","getStylusData","prev","onEnter","onLeave"],"sources":["../../../src/core/stylus/usePointerStylus.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { getStylusData, type StylusData } from './stylus';\n\n/** State exposed by `usePointerStylus` — the most recent stylus snapshot\n *  plus a `hovering` flag for the Pencil 2 / Pencil Pro \"near-surface but\n *  not touching\" event stream. */\nexport interface PointerStylusState extends StylusData {\n  /** True between `pointerenter` and `pointerleave` events on the target\n   *  element. iPad Safari fires these for Apple Pencil hover (on iPad Pro\n   *  / Pencil Pro), so this lights up when the pen is detected near the\n   *  glass without contact. */\n  hovering: boolean;\n}\n\nconst IDLE: PointerStylusState = {\n  pressure: 0,\n  tiltX: 0,\n  tiltY: 0,\n  altitudeAngle: undefined,\n  azimuthAngle: undefined,\n  twist: 0,\n  pointerType: '',\n  isStylus: false,\n  hovering: false,\n};\n\n/** Options for `usePointerStylus`. */\nexport interface UsePointerStylusOptions {\n  /** Throttle re-renders to ≈this many state updates per second. The latest\n   *  sample is always kept; intermediates are dropped. Default 60. Set to\n   *  `Infinity` (or 0) to emit every move. */\n  maxFps?: number;\n  /** When true, only emit updates while `pointerType === 'pen'`. Useful\n   *  for stylus-only UI that should freeze when the user reaches for a\n   *  mouse. Default false. */\n  stylusOnly?: boolean;\n}\n\n/**\n * Subscribe to pointer events on a target element (defaults to `window`)\n * and expose the most recent stylus snapshot.\n *\n * Reads pointer data via `pointermove` (button or no button) and tracks\n * `pointerenter` / `pointerleave` for the `hovering` flag. The hook does\n * NOT consume pointerdown / pointerup — leave gesture handling to the\n * Tool dispatcher.\n *\n * Re-renders are throttled by default to avoid storming the React scheduler\n * with 120–240Hz stylus updates. Consumers that need every sample (e.g.\n * recording for replay) should pass `maxFps: Infinity` and accept the\n * cost, or read a ref-backed snapshot in a `useFrame`-style loop instead.\n */\nexport function usePointerStylus(\n  target?: RefObject<HTMLElement | null> | HTMLElement | null,\n  options: UsePointerStylusOptions = {},\n): PointerStylusState {\n  const { maxFps = 60, stylusOnly = false } = options;\n  const [state, setState] = useState<PointerStylusState>(IDLE);\n  // Track the last commit time to throttle. A ref avoids re-creating the\n  // listener every render and avoids stale-closure read of an outer `let`.\n  const lastCommit = useRef(-Infinity);\n  const optsRef = useLatest({ maxFps, stylusOnly });\n\n  useEffect(() => {\n    const el: EventTarget =\n      target == null\n        ? window\n        : target instanceof HTMLElement\n          ? target\n          : target.current ?? window;\n\n    const onMove = (raw: Event) => {\n      const e = raw as PointerEvent;\n      const { maxFps, stylusOnly } = optsRef.current;\n      if (stylusOnly && e.pointerType !== 'pen') return;\n      const now = performance.now();\n      const minGap = maxFps > 0 && Number.isFinite(maxFps) ? 1000 / maxFps : 0;\n      if (minGap > 0 && now - lastCommit.current < minGap) return;\n      lastCommit.current = now;\n      setState((prev) => ({ ...getStylusData(e), hovering: prev.hovering }));\n    };\n    const onEnter = (raw: Event) => {\n      const e = raw as PointerEvent;\n      if (optsRef.current.stylusOnly && e.pointerType !== 'pen') return;\n      setState((prev) => ({ ...prev, hovering: true }));\n    };\n    const onLeave = (raw: Event) => {\n      const e = raw as PointerEvent;\n      if (optsRef.current.stylusOnly && e.pointerType !== 'pen') return;\n      setState((prev) => ({ ...prev, hovering: false }));\n    };\n\n    el.addEventListener('pointermove', onMove);\n    el.addEventListener('pointerenter', onEnter);\n    el.addEventListener('pointerleave', onLeave);\n    return () => {\n      el.removeEventListener('pointermove', onMove);\n      el.removeEventListener('pointerenter', onEnter);\n      el.removeEventListener('pointerleave', onLeave);\n    };\n  }, [target, optsRef]);\n\n  return state;\n}\n"],"mappings":";;;;AAeA,IAAMA,IAA2B;CAC/B,UAAU;CACV,OAAO;CACP,OAAO;CACP,eAAe,KAAA;CACf,cAAc,KAAA;CACd,OAAO;CACP,aAAa;CACb,UAAU;CACV,UAAU;AACZ;AA4BA,SAAgBC,EACd,GACA,IAAmC,CAAC,GAChB;CACpB,IAAM,EAAE,YAAS,IAAI,gBAAa,OAAUC,GACtC,CAACC,GAAOC,KAAYC,EAA6BL,CAAI,GAGrDM,IAAaC,EAAO,SAAS,GAC7BC,IAAUC,EAAU;EAAE;EAAQ;CAAW,CAAC;CAyChD,OAvCAC,QAAgB;EACd,IAAMC,IACJC,KAAU,OACN,SACAA,aAAkB,cAChBA,IACAA,EAAO,WAAW,QAEpBC,KAAU,MAAe;GAC7B,IAAMC,IAAIC,GACJ,EAAE,WAAQ,kBAAeP,EAAQ;GACvC,IAAIQ,KAAcF,EAAE,gBAAgB,OAAO;GAC3C,IAAMG,IAAM,YAAY,IAAI,GACtBC,IAASC,IAAS,KAAK,OAAO,SAASA,CAAM,IAAI,MAAOA,IAAS;GACvE,AAAID,IAAS,KAAKD,IAAMX,EAAW,UAAUY,MAC7C,EAAW,UAAUD,GACrBb,GAAU,OAAU;IAAE,GAAGgB,EAAcN,CAAC;IAAG,UAAUO,EAAK;GAAS,EAAE;EACvE,GACMC,KAAW,MAAe;GAC9B,IAAMR,IAAIC;GACV,AAAIP,EAAQ,QAAQ,cAAcM,EAAE,gBAAgB,SACpDV,GAAU,OAAU;IAAE,GAAGiB;IAAM,UAAU;GAAK,EAAE;EAClD,GACME,KAAW,MAAe;GAC9B,IAAMT,IAAIC;GACV,AAAIP,EAAQ,QAAQ,cAAcM,EAAE,gBAAgB,SACpDV,GAAU,OAAU;IAAE,GAAGiB;IAAM,UAAU;GAAM,EAAE;EACnD;EAKA,OAHAV,EAAG,iBAAiB,eAAeE,CAAM,GACzCF,EAAG,iBAAiB,gBAAgBW,CAAO,GAC3CX,EAAG,iBAAiB,gBAAgBY,CAAO,SAC9B;GAGX,AAFAZ,EAAG,oBAAoB,eAAeE,CAAM,GAC5CF,EAAG,oBAAoB,gBAAgBW,CAAO,GAC9CX,EAAG,oBAAoB,gBAAgBY,CAAO;EAChD;CACF,GAAG,CAACX,GAAQJ,CAAO,CAAC,GAEbL;AACT"}

package/dist/core/usePaintKinds.js

@@ -0,0 +1,17 @@
+import { getPaintKind as e, listGradientKinds as t, listPaintKinds as n, paintKindRegistry as r } from "./paintKinds.js";
+import { useCallback as i, useSyncExternalStore as a } from "react";
+//#region src/core/usePaintKinds.ts
+function o() {
+	return a(r.subscribe, n, n);
+}
+function s() {
+	return a(r.subscribe, t, t);
+}
+function c(t) {
+	let n = i(() => e(t), [t]);
+	return a(r.subscribe, n, n);
+}
+//#endregion
+export { s as useGradientKinds, c as usePaintKind, o as usePaintKinds };
+
+//# sourceMappingURL=usePaintKinds.js.map

package/dist/core/usePaintKinds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaintKinds.js","names":["usePaintKinds","useSyncExternalStore","paintKindRegistry","listPaintKinds","useGradientKinds","listGradientKinds","usePaintKind","read","useCallback","getPaintKind","kind"],"sources":["../../src/core/usePaintKinds.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\nimport {\n  getPaintKind, listGradientKinds, listPaintKinds, paintKindRegistry, type PaintKindEntry,\n} from './paintKinds';\n\n/** Every registered paint kind, as {@link listPaintKinds} returns it,\n *  re-rendering the caller whenever a kind is registered or removed. */\nexport function usePaintKinds(): readonly PaintKindEntry[] {\n  return useSyncExternalStore(paintKindRegistry.subscribe, listPaintKinds, listPaintKinds);\n}\n\n/** Every registered gradient kind, as {@link listGradientKinds} returns it,\n *  re-rendering the caller whenever a kind is registered or removed. */\nexport function useGradientKinds(): readonly PaintKindEntry[] {\n  return useSyncExternalStore(paintKindRegistry.subscribe, listGradientKinds, listGradientKinds);\n}\n\n/**\n * The entry for `kind`, as {@link getPaintKind} returns it — `undefined` until\n * it is registered, and the new entry once it is. A kind with a loader starts\n * loading on the first read.\n */\nexport function usePaintKind(kind: string | undefined): PaintKindEntry | undefined {\n  const read = useCallback(() => getPaintKind(kind), [kind]);\n  return useSyncExternalStore(paintKindRegistry.subscribe, read, read);\n}\n"],"mappings":";;;AAOA,SAAgBA,IAA2C;CACzD,OAAOC,EAAqBC,EAAkB,WAAWC,GAAgBA,CAAc;AACzF;AAIA,SAAgBC,IAA8C;CAC5D,OAAOH,EAAqBC,EAAkB,WAAWG,GAAmBA,CAAiB;AAC/F;AAOA,SAAgBC,EAAa,GAAsD;CACjF,IAAMC,IAAOC,QAAkBC,EAAaC,CAAI,GAAG,CAACA,CAAI,CAAC;CACzD,OAAOT,EAAqBC,EAAkB,WAAWK,GAAMA,CAAI;AACrE"}

package/dist/core/viewport/clampView.js

@@ -0,0 +1,24 @@
+//#region src/core/viewport/clampView.ts
+function e(e, t, n) {
+	let r = Math.abs(n.width / e.scale.x), i = Math.abs(n.height / e.scale.y), a = e.scale.x < 0, o = e.scale.y < 0, s;
+	if (r >= t.width) s = t.x + (t.width - r) / 2 + (a ? r : 0);
+	else {
+		let n = a ? t.x + r : t.x, i = a ? t.x + t.width : t.x + t.width - r;
+		s = e.x < n ? n : e.x > i ? i : e.x;
+	}
+	let c;
+	if (i >= t.height) c = t.y + (t.height - i) / 2 + (o ? i : 0);
+	else {
+		let n = o ? t.y + i : t.y, r = o ? t.y + t.height : t.y + t.height - i;
+		c = e.y < n ? n : e.y > r ? r : e.y;
+	}
+	return s === e.x && c === e.y ? e : {
+		x: s,
+		y: c,
+		scale: e.scale
+	};
+}
+//#endregion
+export { e as clampView };
+
+//# sourceMappingURL=clampView.js.map

package/dist/core/viewport/clampView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clampView.js","names":["clampView","visW","canvas","view","visH","flipX","flipY","x","bounds","minX","maxX","y","minY","maxY"],"sources":["../../../src/core/viewport/clampView.ts"],"sourcesContent":["import type { View } from './view';\n\n/** The world rect a view is not allowed to show outside of. */\nexport interface ClampBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/** Canvas dimensions in CSS pixels — needed to know how much world a view\n *  actually shows. */\nexport interface CanvasSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Clamp a `View` so the visible world rect stays within `bounds`.\n *\n * Visible world rect = `[view.x, view.x + canvas.width / view.scale.x]` ×\n * `[view.y, view.y + canvas.height / view.scale.y]`.\n *\n * If the visible rect is larger than `bounds` along an axis (zoomed out\n * past the bounds extent), the view is centered on that axis so bounds\n * sits in the middle of the canvas.\n */\nexport function clampView(view: View, bounds: ClampBounds, canvas: CanvasSize): View {\n  // A negative scale is a flipped axis, so the visible rect runs the other way\n  // from `view.x`/`view.y`: its extent is the magnitude, and the anchor is the\n  // rect's far edge rather than its near one.\n  const visW = Math.abs(canvas.width / view.scale.x);\n  const visH = Math.abs(canvas.height / view.scale.y);\n  const flipX = view.scale.x < 0;\n  const flipY = view.scale.y < 0;\n\n  let x: number;\n  if (visW >= bounds.width) {\n    x = bounds.x + (bounds.width - visW) / 2 + (flipX ? visW : 0);\n  } else {\n    const minX = flipX ? bounds.x + visW : bounds.x;\n    const maxX = flipX ? bounds.x + bounds.width : bounds.x + bounds.width - visW;\n    x = view.x < minX ? minX : view.x > maxX ? maxX : view.x;\n  }\n\n  let y: number;\n  if (visH >= bounds.height) {\n    y = bounds.y + (bounds.height - visH) / 2 + (flipY ? visH : 0);\n  } else {\n    const minY = flipY ? bounds.y + visH : bounds.y;\n    const maxY = flipY ? bounds.y + bounds.height : bounds.y + bounds.height - visH;\n    y = view.y < minY ? minY : view.y > maxY ? maxY : view.y;\n  }\n\n  return x === view.x && y === view.y ? view : { x, y, scale: view.scale };\n}\n"],"mappings":";AA2BA,SAAgBA,EAAU,GAAY,GAAqB,GAA0B;CAInF,IAAMC,IAAO,KAAK,IAAIC,EAAO,QAAQC,EAAK,MAAM,CAAC,GAC3CC,IAAO,KAAK,IAAIF,EAAO,SAASC,EAAK,MAAM,CAAC,GAC5CE,IAAQF,EAAK,MAAM,IAAI,GACvBG,IAAQH,EAAK,MAAM,IAAI,GAEzBI;CACJ,IAAIN,KAAQO,EAAO,OACjB,IAAIA,EAAO,KAAKA,EAAO,QAAQP,KAAQ,KAAKI,IAAQJ,IAAO;MACtD;EACL,IAAMQ,IAAOJ,IAAQG,EAAO,IAAIP,IAAOO,EAAO,GACxCE,IAAOL,IAAQG,EAAO,IAAIA,EAAO,QAAQA,EAAO,IAAIA,EAAO,QAAQP;EACzE,IAAIE,EAAK,IAAIM,IAAOA,IAAON,EAAK,IAAIO,IAAOA,IAAOP,EAAK;CACzD;CAEA,IAAIQ;CACJ,IAAIP,KAAQI,EAAO,QACjB,IAAIA,EAAO,KAAKA,EAAO,SAASJ,KAAQ,KAAKE,IAAQF,IAAO;MACvD;EACL,IAAMQ,IAAON,IAAQE,EAAO,IAAIJ,IAAOI,EAAO,GACxCK,IAAOP,IAAQE,EAAO,IAAIA,EAAO,SAASA,EAAO,IAAIA,EAAO,SAASJ;EAC3E,IAAID,EAAK,IAAIS,IAAOA,IAAOT,EAAK,IAAIU,IAAOA,IAAOV,EAAK;CACzD;CAEA,OAAOI,MAAMJ,EAAK,KAAKQ,MAAMR,EAAK,IAAIA,IAAO;EAAE;EAAG;EAAG,OAAOA,EAAK;CAAM;AACzE"}

package/dist/core/viewport/clientToWorld.js

@@ -0,0 +1,8 @@
+//#region src/core/viewport/clientToWorld.ts
+function e(e, t, n, r) {
+	return [(e - n.left) / r.scale.x + r.x, (t - n.top) / r.scale.y + r.y];
+}
+//#endregion
+export { e as clientToWorld };
+
+//# sourceMappingURL=clientToWorld.js.map

package/dist/core/viewport/clientToWorld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clientToWorld.js","names":["clientToWorld","clientX","origin","view","clientY"],"sources":["../../../src/core/viewport/clientToWorld.ts"],"sourcesContent":["/**\n * Convert client coords directly to world coords by subtracting the canvas\n * rect origin and then applying the inverse view transform.\n *\n * This is the composition of `clientToCanvas` + the view-inverse half of\n * `screenToWorld`, but expressed against the `ViewLike` shape used by\n * `SceneCanvas` / `ToolCtx` (`{ scale: { x, y }, x, y }`) rather than the\n * `ViewTransform` shape used by `screenToWorld` (`{ panX, panY, zoom }`).\n */\nexport interface ViewLike {\n  scale: { x: number; y: number };\n  x: number;\n  y: number;\n}\n\n/**\n * Map a browser client coord pair to world coords.\n *\n * @param clientX  - `event.clientX`\n * @param clientY  - `event.clientY`\n * @param origin   - client-space origin of the surface `view` is a camera on.\n *   For a whole canvas that is its bounding rect. For a viewport node it is\n *   the canvas rect offset by the viewport's own rect, so the same call maps\n *   into that viewport's inner world.\n * @param view     - current viewport transform\n */\nexport function clientToWorld(\n  clientX: number,\n  clientY: number,\n  origin: { left: number; top: number },\n  view: ViewLike,\n): [number, number] {\n  return [\n    (clientX - origin.left) / view.scale.x + view.x,\n    (clientY - origin.top) / view.scale.y + view.y,\n  ];\n}\n"],"mappings":";AA0BA,SAAgBA,EACd,GACA,GACA,GACA,GACkB;CAClB,OAAO,EACJC,IAAUC,EAAO,QAAQC,EAAK,MAAM,IAAIA,EAAK,IAC7CC,IAAUF,EAAO,OAAOC,EAAK,MAAM,IAAIA,EAAK,CAC/C;AACF"}

package/dist/core/viewport/createVelocityTracker.js

@@ -0,0 +1,39 @@
+//#region src/core/viewport/createVelocityTracker.ts
+function e() {
+	let e = [];
+	return {
+		record(t, n, r) {
+			e.push({
+				dx: t,
+				dy: n,
+				t: r
+			});
+			let i = r - 100;
+			e = e.filter((e) => e.t >= i);
+		},
+		getVelocity() {
+			let t = e;
+			if (t.length < 2) return {
+				vx: 0,
+				vy: 0
+			};
+			let n = t[t.length - 1].t - t[0].t;
+			if (n === 0) return {
+				vx: 0,
+				vy: 0
+			};
+			let r = t.slice(1).reduce((e, t) => e + t.dx, 0), i = t.slice(1).reduce((e, t) => e + t.dy, 0);
+			return {
+				vx: r / n,
+				vy: i / n
+			};
+		},
+		reset() {
+			e = [];
+		}
+	};
+}
+//#endregion
+export { e as createVelocityTracker };
+
+//# sourceMappingURL=createVelocityTracker.js.map

package/dist/core/viewport/createVelocityTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVelocityTracker.js","names":["createVelocityTracker","samples","cutoff","t","s","dt","totalDx","acc","p","totalDy"],"sources":["../../../src/core/viewport/createVelocityTracker.ts"],"sourcesContent":["interface Sample { dx: number; dy: number; t: number }\n\n/** Records recent deltas and reports the current velocity, averaged over the\n *  last 100ms — the throw speed a momentum decay starts from. */\nexport interface VelocityTracker {\n  record(dx: number, dy: number, t: number): void;\n  getVelocity(): { vx: number; vy: number };\n  reset(): void;\n}\n\n/** Hook-free velocity tracker. `useVelocityTracker` wraps one of these; the\n *  action layer builds its own, because an Action descriptor is a static\n *  object and cannot call hooks. */\nexport function createVelocityTracker(): VelocityTracker {\n  let samples: Sample[] = [];\n  return {\n    record(dx, dy, t) {\n      samples.push({ dx, dy, t });\n      const cutoff = t - 100;\n      samples = samples.filter(s => s.t >= cutoff);\n    },\n    getVelocity() {\n      const s = samples;\n      if (s.length < 2) return { vx: 0, vy: 0 };\n      const dt = s[s.length - 1].t - s[0].t;\n      if (dt === 0) return { vx: 0, vy: 0 };\n      const totalDx = s.slice(1).reduce((acc, p) => acc + p.dx, 0);\n      const totalDy = s.slice(1).reduce((acc, p) => acc + p.dy, 0);\n      return { vx: totalDx / dt, vy: totalDy / dt };\n    },\n    reset() { samples = []; },\n  };\n}\n"],"mappings":";AAaA,SAAgBA,IAAyC;CACvD,IAAIC,IAAoB,CAAC;CACzB,OAAO;EACL,OAAO,GAAI,GAAI,GAAG;GAChB,EAAQ,KAAK;IAAE;IAAI;IAAI;GAAE,CAAC;GAC1B,IAAMC,IAASC,IAAI;GACnB,IAAUF,EAAQ,QAAO,MAAKG,EAAE,KAAKF,CAAM;EAC7C;EACA,cAAc;GACZ,IAAME,IAAIH;GACV,IAAIG,EAAE,SAAS,GAAG,OAAO;IAAE,IAAI;IAAG,IAAI;GAAE;GACxC,IAAMC,IAAKD,EAAEA,EAAE,SAAS,EAAE,CAAC,IAAIA,EAAE,EAAE,CAAC;GACpC,IAAIC,MAAO,GAAG,OAAO;IAAE,IAAI;IAAG,IAAI;GAAE;GACpC,IAAMC,IAAUF,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAK,MAAMG,IAAMC,EAAE,IAAI,CAAC,GACrDC,IAAUL,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAK,MAAMG,IAAMC,EAAE,IAAI,CAAC;GAC3D,OAAO;IAAE,IAAIF,IAAUD;IAAI,IAAII,IAAUJ;GAAG;EAC9C;EACA,QAAQ;GAAE,IAAU,CAAC;EAAG;CAC1B;AACF"}

package/dist/core/viewport/fitToBounds.js

@@ -0,0 +1,18 @@
+import { normalizeZoom as e } from "./zoomBounds.js";
+//#region src/core/viewport/fitToBounds.ts
+function t(t, n, r, i, a) {
+	let o = Math.min(t / r, n / i), s = a?.min ?? -Infinity, c = a?.max ?? Infinity;
+	return e(Math.min(c, Math.max(s, o)));
+}
+function n(e, n, r, i, a = 0, o) {
+	let s = t(Math.max(1, e - a * 2), Math.max(1, n - a * 2), r, i, o), c = r * s, l = i * s;
+	return {
+		zoom: s,
+		panX: (e - c) / 2,
+		panY: (n - l) / 2
+	};
+}
+//#endregion
+export { n as fitToBounds, t as fitZoom };
+
+//# sourceMappingURL=fitToBounds.js.map

package/dist/core/viewport/fitToBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitToBounds.js","names":["fitZoom","raw","availW","contentW","availH","contentH","min","clamp","max","normalizeZoom","fitToBounds","zoom","viewportW","paddingPx","viewportH","contentPxW","contentPxH"],"sources":["../../../src/core/viewport/fitToBounds.ts"],"sourcesContent":["import { normalizeZoom } from './zoomBounds';\n\n/**\n * Compute the largest uniform zoom (px per content-unit) that fits a content\n * rect of `contentW x contentH` (in content units) into a viewport rect of\n * `availW x availH` (in pixels).\n *\n * `clamp` optionally bounds the resulting zoom to [min, max].\n */\nexport function fitZoom(\n  availW: number,\n  availH: number,\n  contentW: number,\n  contentH: number,\n  clamp?: { min?: number; max?: number },\n): number {\n  const raw = Math.min(availW / contentW, availH / contentH);\n  const min = clamp?.min ?? -Infinity;\n  const max = clamp?.max ?? Infinity;\n  return normalizeZoom(Math.min(max, Math.max(min, raw)));\n}\n\n/**\n * Compute zoom + pan that centers `contentW x contentH` (content units) inside\n * a `viewportW x viewportH` (pixel) rect. `paddingPx` is uniform pixel padding\n * on every side.\n */\nexport function fitToBounds(\n  viewportW: number,\n  viewportH: number,\n  contentW: number,\n  contentH: number,\n  paddingPx = 0,\n  clamp?: { min?: number; max?: number },\n): { zoom: number; panX: number; panY: number } {\n  const availW = Math.max(1, viewportW - paddingPx * 2);\n  const availH = Math.max(1, viewportH - paddingPx * 2);\n  const zoom = fitZoom(availW, availH, contentW, contentH, clamp);\n  const contentPxW = contentW * zoom;\n  const contentPxH = contentH * zoom;\n  return {\n    zoom,\n    panX: (viewportW - contentPxW) / 2,\n    panY: (viewportH - contentPxH) / 2,\n  };\n}\n"],"mappings":";;AASA,SAAgBA,EACd,GACA,GACA,GACA,GACA,GACQ;CACR,IAAMC,IAAM,KAAK,IAAIC,IAASC,GAAUC,IAASC,CAAQ,GACnDC,IAAMC,GAAO,OAAO,WACpBC,IAAMD,GAAO,OAAO;CAC1B,OAAOE,EAAc,KAAK,IAAID,GAAK,KAAK,IAAIF,GAAKL,CAAG,CAAC,CAAC;AACxD;AAOA,SAAgBS,EACd,GACA,GACA,GACA,GACA,IAAY,GACZ,GAC8C;CAG9C,IAAMC,IAAOX,EAFE,KAAK,IAAI,GAAGY,IAAYC,IAAY,CAE9B,GADN,KAAK,IAAI,GAAGC,IAAYD,IAAY,CACtB,GAAQV,GAAUE,GAAUE,CAAK,GACxDQ,IAAaZ,IAAWQ,GACxBK,IAAaX,IAAWM;CAC9B,OAAO;EACL;EACA,OAAOC,IAAYG,KAAc;EACjC,OAAOD,IAAYE,KAAc;CACnC;AACF"}

package/dist/core/viewport/fitViewToBounds.js

@@ -0,0 +1,36 @@
+import { DEFAULT_MAX_ZOOM as e, DEFAULT_MIN_ZOOM as t, normalizeZoom as n } from "./zoomBounds.js";
+//#region src/core/viewport/fitViewToBounds.ts
+function r(r, i, a, o = {}) {
+	let { padding: s = 16, maxScale: c = e, minScale: l = t } = o;
+	if (r.width <= 0 || r.height <= 0) return console.warn("[weasel] fitViewToBounds: bounds has zero or negative area; returning currentView unchanged.", r), a;
+	if (i.width <= 0 || i.height <= 0) return console.warn("[weasel] fitViewToBounds: viewport has zero or negative area; returning currentView unchanged.", i), a;
+	let u = Math.max(1, i.width - s * 2), d = Math.max(1, i.height - s * 2), f = u / r.width, p = d / r.height, m, h;
+	switch (o.mode ?? "contain") {
+		case "fill": {
+			let e = Math.max(f, p);
+			m = e, h = e;
+			break;
+		}
+		case "stretch":
+			m = f, h = p;
+			break;
+		default: {
+			let e = Math.min(f, p);
+			m = e, h = e;
+			break;
+		}
+	}
+	let g = n(Math.min(c, Math.max(l, m))), _ = n(Math.min(c, Math.max(l, h))), v = r.x + r.width / 2, y = r.y + r.height / 2;
+	return {
+		x: v - i.width / (2 * g),
+		y: y - i.height / (2 * _),
+		scale: {
+			x: g,
+			y: _
+		}
+	};
+}
+//#endregion
+export { r as fitViewToBounds };
+
+//# sourceMappingURL=fitViewToBounds.js.map

package/dist/core/viewport/fitViewToBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitViewToBounds.js","names":["fitViewToBounds","DEFAULT_MAX_ZOOM","DEFAULT_MIN_ZOOM","opts","bounds","currentView","viewportDims","availW","padding","availH","sx","sy","rawX","rawY","u","scaleX","normalizeZoom","maxScale","minScale","scaleY","worldCx","worldCy"],"sources":["../../../src/core/viewport/fitViewToBounds.ts"],"sourcesContent":["import type { View } from './view';\nimport { DEFAULT_MIN_ZOOM, DEFAULT_MAX_ZOOM, normalizeZoom } from './zoomBounds';\n\n/** `Bounds` is declared in `@weasel-js/routing`, which is typed in it\n *  throughout — every area-select, resize and preview surface names one.\n *  Re-exported here, where core's call sites have always looked. */\nimport type { Bounds } from '@weasel-js/routing';\nexport type { Bounds };\n\n/** Pixel dimensions of the canvas viewport. */\nexport interface ViewportDims {\n  width: number;\n  height: number;\n}\n\n/** Options for {@link fitViewToBounds}. */\nexport interface FitViewToBoundsOptions {\n  /** Inset (in CSS px) around the bounds. Default 16. */\n  padding?: number;\n  /**\n   * Override the kit's system max scale. Defaults to the kit-wide max zoom\n   * used by `computeWheelAction` (`DEFAULT_MAX_ZOOM`).\n   */\n  maxScale?: number;\n  /**\n   * Override the kit's system min scale. Defaults to the kit-wide min zoom\n   * used by `computeWheelAction` (`DEFAULT_MIN_ZOOM`).\n   */\n  minScale?: number;\n  /**\n   * Fit mode:\n   * - `'contain'` (default): uniform scale = `min(availW/w, availH/h)`. Bounds fit entirely; one axis has letterboxing.\n   * - `'fill'`: uniform scale = `max(...)`. Bounds overflow viewport on one axis.\n   * - `'stretch'`: per-axis scale. Bounds match viewport exactly; scale is non-uniform.\n   */\n  mode?: 'contain' | 'fill' | 'stretch';\n}\n\n/**\n * Compute the target {@link View} that fits `bounds` (world space) inside\n * `viewportDims` (CSS px). The bounds are centered in the viewport with\n * uniform padding on all sides; the resulting scale is clamped to the\n * configured min/max.\n *\n * View semantics: `view.x` / `view.y` is the world point currently drawn at\n * the canvas top-left, and `view.scale.{x,y}` is pixels per world unit on\n * each axis (see `view.ts`). So:\n *   screenX = (worldX - view.x) * view.scale.x\n *   screenY = (worldY - view.y) * view.scale.y\n *\n * Empty / zero-sized bounds or viewports cannot be fit — in that case this\n * returns `currentView` unchanged and logs a `console.warn`. Callers that\n * want to no-op silently can detect zero area themselves before calling.\n */\nexport function fitViewToBounds(\n  bounds: Bounds,\n  viewportDims: ViewportDims,\n  currentView: View,\n  opts: FitViewToBoundsOptions = {},\n): View {\n  const { padding = 16, maxScale = DEFAULT_MAX_ZOOM, minScale = DEFAULT_MIN_ZOOM } = opts;\n\n  if (bounds.width <= 0 || bounds.height <= 0) {\n    console.warn('[weasel] fitViewToBounds: bounds has zero or negative area; returning currentView unchanged.', bounds);\n    return currentView;\n  }\n  if (viewportDims.width <= 0 || viewportDims.height <= 0) {\n    console.warn('[weasel] fitViewToBounds: viewport has zero or negative area; returning currentView unchanged.', viewportDims);\n    return currentView;\n  }\n\n  const availW = Math.max(1, viewportDims.width - padding * 2);\n  const availH = Math.max(1, viewportDims.height - padding * 2);\n  const sx = availW / bounds.width;\n  const sy = availH / bounds.height;\n\n  let rawX: number;\n  let rawY: number;\n  switch (opts.mode ?? 'contain') {\n    case 'fill': {\n      const u = Math.max(sx, sy);\n      rawX = u;\n      rawY = u;\n      break;\n    }\n    case 'stretch':\n      rawX = sx;\n      rawY = sy;\n      break;\n    case 'contain':\n    default: {\n      const u = Math.min(sx, sy);\n      rawX = u;\n      rawY = u;\n      break;\n    }\n  }\n  const scaleX = normalizeZoom(Math.min(maxScale, Math.max(minScale, rawX)));\n  const scaleY = normalizeZoom(Math.min(maxScale, Math.max(minScale, rawY)));\n\n  // Center bounds in the viewport. With view-as-camera semantics:\n  //   screenCenter = (worldCenter - view.x) * scale\n  //   view.x = worldCenter - viewportCenter / scale\n  const worldCx = bounds.x + bounds.width / 2;\n  const worldCy = bounds.y + bounds.height / 2;\n  return {\n    x: worldCx - viewportDims.width / (2 * scaleX),\n    y: worldCy - viewportDims.height / (2 * scaleY),\n    scale: { x: scaleX, y: scaleY },\n  };\n}\n"],"mappings":";;AAsDA,SAAgBA,EACd,GACA,GACA,GACA,IAA+B,CAAC,GAC1B;CACN,IAAM,EAAE,aAAU,IAAI,cAAWC,GAAkB,cAAWC,MAAqBC;CAEnF,IAAIC,EAAO,SAAS,KAAKA,EAAO,UAAU,GAExC,OADA,QAAQ,KAAK,gGAAgGA,CAAM,GAC5GC;CAET,IAAIC,EAAa,SAAS,KAAKA,EAAa,UAAU,GAEpD,OADA,QAAQ,KAAK,kGAAkGA,CAAY,GACpHD;CAGT,IAAME,IAAS,KAAK,IAAI,GAAGD,EAAa,QAAQE,IAAU,CAAC,GACrDC,IAAS,KAAK,IAAI,GAAGH,EAAa,SAASE,IAAU,CAAC,GACtDE,IAAKH,IAASH,EAAO,OACrBO,IAAKF,IAASL,EAAO,QAEvBQ,GACAC;CACJ,QAAQV,EAAK,QAAQ,WAArB;EACE,KAAK,QAAQ;GACX,IAAMW,IAAI,KAAK,IAAIJ,GAAIC,CAAE;GAEzB,AADA,IAAOG,GACP,IAAOA;GACP;EACF;EACA,KAAK;GAEH,AADA,IAAOJ,GACP,IAAOC;GACP;EAEF,SAAS;GACP,IAAMG,IAAI,KAAK,IAAIJ,GAAIC,CAAE;GAEzB,AADA,IAAOG,GACP,IAAOA;GACP;EACF;CACF;CACA,IAAMC,IAASC,EAAc,KAAK,IAAIC,GAAU,KAAK,IAAIC,GAAUN,CAAI,CAAC,CAAC,GACnEO,IAASH,EAAc,KAAK,IAAIC,GAAU,KAAK,IAAIC,GAAUL,CAAI,CAAC,CAAC,GAKnEO,IAAUhB,EAAO,IAAIA,EAAO,QAAQ,GACpCiB,IAAUjB,EAAO,IAAIA,EAAO,SAAS;CAC3C,OAAO;EACL,GAAGgB,IAAUd,EAAa,SAAS,IAAIS;EACvC,GAAGM,IAAUf,EAAa,UAAU,IAAIa;EACxC,OAAO;GAAE,GAAGJ;GAAQ,GAAGI;EAAO;CAChC;AACF"}

package/dist/core/viewport/interpolateView.js

@@ -0,0 +1,34 @@
+//#region src/core/viewport/interpolateView.ts
+function e(e, t, n, r) {
+	let i = (i) => ({
+		x: e + (n - e) * i,
+		s: t + (r - t) * i
+	});
+	if (!(t > 0) || !(r > 0) || Math.abs(r - t) <= 1e-12 * Math.max(Math.abs(t), Math.abs(r), 1)) return i;
+	let a = (n - e) / (1 / t - 1 / r), o = a / t + e, s = r / t;
+	return (e) => {
+		let n = t * s ** +e;
+		return {
+			x: o - a / n,
+			s: n
+		};
+	};
+}
+function t(t, n) {
+	let r = e(t.x, t.scale.x, n.x, n.scale.x), i = e(t.y, t.scale.y, n.y, n.scale.y);
+	return (e) => {
+		let t = r(e), n = i(e);
+		return {
+			x: t.x,
+			y: n.x,
+			scale: {
+				x: t.s,
+				y: n.s
+			}
+		};
+	};
+}
+//#endregion
+export { t as interpolateView };
+
+//# sourceMappingURL=interpolateView.js.map