@spotlab/hand-matrix 0.1.0 → 0.3.0

package/README.md

@@ -16,20 +16,111 @@ await initRange(); // once, at startup
 
 ## Exports
 
+Everything below is exported from the package root.
+
+### Display
+
 - `HandMatrix` — the bare 13x13 grid primitive. Takes no range data; styling
   is entirely the caller's job via `comboStyle`, keyed by combo string (e.g.
-  `"AKs"`).
+  `"AKs"`). Each cell carries a `data-combo` attribute. Props:
+  - `comboStyle?: (combo) => CSSProperties` — per-cell style.
+  - `onPointerDown?`, `onPointerEnter?: CellPointerHandler` — the
+    `(combo, event)` handlers to use for dragging across cells, with a mouse
+    or a finger. `onPointerDown` releases the implicit pointer capture a
+    touch takes on its first cell. `onPointerEnter` fires once each time the
+    pointer moves onto a new cell, found by hit-testing each `pointermove`
+    (`elementFromPoint`), so it also fires during a touch drag, where
+    enter events never reach the other cells. Passing `onPointerDown` sets
+    `touch-action: none` and `user-select: none` on the grid, so a drag
+    neither scrolls the page nor selects the combo text it crosses.
+  - `className?: string` — merged onto the `.spotlab-hm-root` wrapper.
 - `RangeGrid` — a read-only display component. Accepts the expanded
   `HandFrequency[]` form or a range string directly (parsed via
-  `@spotlab/range`), and fills each cell to its combo's mean weight.
-- `cellFillGradient` / `CELL_FILL_DIRECTION` — the canonical left-to-right
-  gradient helper used to render a cell's fill.
+  `@spotlab/range`), and fills each cell to its combo's mean weight. Props:
+  `range: HandFrequency[] | string`, `fill?: string` (a CSS color, defaulting
+  to `var(--spotlab-hm-fill)`), `className?: string`.
+- `cellFillGradient(stops: string[]): string` / `CELL_FILL_DIRECTION` — the
+  canonical left-to-right gradient helper used to render a cell's fill.
+  Returns `"transparent"` for no stops.
 
 `RangeGrid`'s combo collapse (`toComboWeights`) is a wasm call, so
 `initRange()` must have resolved before rendering it — see
 [`@spotlab/range`](../range)'s own README for why that call is explicit
 rather than automatic.
 
+### Editing
+
+The editor splits a parent range across a set of actions (e.g. fold, call,
+raise). Its state is an array of 169 `EditorCell`s, one per combo in
+`@spotlab/range`'s `COMBOS` order. Every component is fully controlled: state
+goes in as props and changes come out through `on*Change` callbacks.
+
+- `RangeMatrixEditor` — the paintable grid. Draws each cell's action bands,
+  hatches dead cells (`avail` 0), marks capped cells (`avail` below 1), and
+  wires brush/eyedropper painting onto `HandMatrix` for mouse and touch.
+  Props (`RangeMatrixEditorProps`):
+  - `cells: EditorCell[]` and `onCellsChange(cells)`.
+  - `actions: EditorActionSpec[]` — index-aligned with each cell's
+    `weights`.
+  - `order: number[]` — indices into `actions`, in the order bands stack.
+  - `brush: number[]` and `onBrushChange(brush)` — the weights a paint
+    stroke applies, index-aligned with `actions`.
+  - `tool: PaintTool` and `onToolChange(tool)` — `"brush"` paints on press
+    and drag; `"eyedropper"` loads a cell's weights onto the brush and
+    switches back to `"brush"`.
+  - `className?: string`.
+- `ActionWeightSliders` — one slider and numeric input per action for
+  editing a brush (or any weight row). Moving one action rebalances the
+  others so the row keeps summing to 100. Props (`ActionWeightSlidersProps`):
+  - `actions`, `order`, `weights: number[]` and `onWeightsChange(weights)`.
+  - `passive: number` — the index of the remainder action, which absorbs
+    whatever the others leave.
+  - `renderActionLabel?(action, index, isPassive)` — replaces a row's
+    default label.
+  - `renderActionExtra?(action, index)` — content after the label (e.g. a
+    remove button).
+  - `components?: { WeightInput?: ComponentType<WeightInputProps> }` — swap
+    the default `<input type="number">`.
+  - `className?: string`.
+- `useRangePainting(opts)` — the brush/eyedropper state machine behind
+  `RangeMatrixEditor`, for building your own grid. `opts` takes the editor's
+  `cells`, `brush`, `tool` and their three `on*Change` callbacks. Returns
+  `{ onCellDown(combo), onCellEnter(combo) }`; wire them to `HandMatrix`'s
+  `onPointerDown`/`onPointerEnter`. A stroke ends on any window `pointerup`
+  or `pointercancel`.
+- `seedCells(avail, actionWeights, passive): EditorCell[]` — build the
+  initial grid from a parent range's per-combo availability (`null` for
+  unconstrained) and each action's absolute per-combo weights (the
+  `Map<string, number>` that `toComboWeights` from `@spotlab/range`
+  produces).
+- `cellsToComboWeights(cells, actionIndex): Map<string, number>` — collapse
+  one action back to absolute per-combo weights, ready to save as a range.
+- `cellsToRanges(original, seed, cells): HandFrequency[][]` — turn the
+  edited grid back into one hand-keyed range per action. `original` holds
+  each action's range (or `null`) in editor action order, `seed` the cells
+  the editor opened with, and `cells` the cells after editing. Combos whose
+  cell still matches its seed keep each action's original hands verbatim;
+  changed combos, and every combo of a `null` action, are rebuilt from the
+  cells.
+- `comboWeightsToCells(cells, actionWeights, passive): EditorCell[]` — the
+  inverse: re-derive the cells' conditional weights from absolute
+  per-action ranges, keeping each cell's `avail`.
+- `rebalance(weights, index, value, passive): number[]` — set one action's
+  weight and rescale the rest so the row sums to 100. This is what
+  `ActionWeightSliders` uses.
+- Types: `EditorCell` (`{ avail: number; weights: number[] }`, where `avail`
+  is the combo's cap in the parent range and `weights` are each action's
+  share of it, summing to 100), `EditorActionSpec`
+  (`{ id: string; label: string; color: string }`), `PaintTool`,
+  `CellPointerHandler`, `RangeMatrixEditorProps`, `ActionWeightSlidersProps`,
+  `WeightInputProps`.
+
+**The editor works at combo level.** A cell is one of the 169 combos (`AKs`,
+`AKo`, `QQ`) at a whole-percent weight, so suit-specific hands such as
+`AsKd:0.7` and fractional weights such as `QQ:0.333` can't be shown exactly:
+`seedCells` takes combo weights, and `cellsToComboWeights` returns them. Save
+with `cellsToRanges` to keep them for every combo the user didn't repaint.
+
 ## Theming
 
 The package ships `hand-matrix.css` (`@spotlab/hand-matrix/style.css`),

package/dist/editor/cells.d.ts

@@ -1,3 +1,4 @@
+import { HandFrequency } from '@spotlab/range';
 export declare const COMBO_INDEX: Map<string, number>;
 /**
  * One matrix cell's painted state: `avail` is the combo's cap (its weight in the
@@ -8,6 +9,8 @@ export type EditorCell = {
     avail: number;
     weights: number[];
 };
+/** A copy of `cells` with `combo`'s cell replaced by `cell`. */
+export declare const withCell: (cells: EditorCell[], combo: string, cell: EditorCell) => EditorCell[];
 /**
  * Seed the 169-cell grid from a parent range's per-combo availability and each
  * action's own per-combo range, both expressed as absolute weights (a share of
@@ -24,3 +27,21 @@ export declare function cellsToComboWeights(cells: EditorCell[], actionIndex: nu
  * `actionWeights` naming the remainder action.
  */
 export declare function comboWeightsToCells(cells: EditorCell[], actionWeights: (Map<string, number> | null)[], passive: number): EditorCell[];
+/**
+ * Turn an edited grid back into one hand-keyed range per action, keeping each
+ * action's original hands wherever the editor didn't touch them. `original`
+ * holds each action's range in editor action order, `seed` the cells the
+ * editor opened with, and `cells` the cells after editing.
+ *
+ * A combo whose cell still equals its seed cell (same `avail`, same weights)
+ * keeps every action's original hands verbatim, so input the whole-percent grid
+ * can't represent — a single suit (`AhKh:0.7`) or a fractional weight
+ * (`QQ:0.333`) — survives a save. A changed combo is rebuilt from the cells as
+ * `cellsToComboWeights` does. An action whose original is `null` (e.g. an
+ * implicit fold) is always rebuilt from the cells in full.
+ *
+ * Each rebuilt combo takes its first original hand's place, and combos the
+ * original didn't have follow in matrix order, so an unedited range formats
+ * back to the string it came from.
+ */
+export declare function cellsToRanges(original: (HandFrequency[] | null)[], seed: EditorCell[], cells: EditorCell[]): HandFrequency[][];

package/dist/editor/use-range-painting.d.ts

@@ -2,9 +2,13 @@ import { EditorCell } from './cells';
 export type PaintTool = "brush" | "eyedropper";
 /**
  * The brush/eyedropper state machine behind `RangeMatrixEditor`: drag-painting
- * (tracked across `pointerdown`/mouse-enter without a React re-render per
- * cell) and eyedropping a cell's weights back onto the brush. Fully
- * controlled — all state changes go out through the `on*Change` callbacks.
+ * and eyedropping a cell's weights back onto the brush. Fully controlled — all
+ * state changes go out through the `on*Change` callbacks.
+ *
+ * Wire `onCellDown` to a cell's pointer-down and `onCellEnter` to the pointer
+ * moving onto a cell (`HandMatrix`'s `onPointerDown`/`onPointerEnter` do both,
+ * for mouse and touch alike). A stroke ends on any window `pointerup` or
+ * `pointercancel`.
  */
 export declare function useRangePainting(opts: {
     cells: EditorCell[];

package/dist/hand-matrix.d.ts

@@ -1,13 +1,33 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, FC, PointerEvent as ReactPointerEvent } from 'react';
 export declare const CELL_FILL_DIRECTION = "to right";
 export declare const cellFillGradient: (stops: string[]) => string;
-type ComboHandlers = {
-    onClick?: (combo: string) => void;
-    onMouseDown?: (combo: string) => void;
-    onMouseEnter?: (combo: string) => void;
+export type CellPointerHandler = (combo: string, event: ReactPointerEvent<HTMLDivElement>) => void;
+type ComboStyleProp = {
     comboStyle?: (combo: string) => CSSProperties;
 };
+type GridPointerHandlers = {
+    /**
+     * A pointer (mouse, pen or touch) went down on `combo`'s cell. The grid
+     * first releases the implicit pointer capture a touch takes on the element
+     * it starts on, so later moves can resolve to other cells. Passing this
+     * also makes the grid root a drag surface (see `dragSurfaceStyle`).
+     */
+    onPointerDown?: CellPointerHandler;
+    /**
+     * The pointer moved onto `combo`'s cell. Resolved by hit-testing each
+     * `pointermove` (`elementFromPoint`) rather than by enter events, so it
+     * fires across a touch drag, where `mouseenter`/`pointerenter` never reach
+     * the other cells, as well as for a mouse. Fires once per change of cell,
+     * whether or not a button is pressed.
+     */
+    onPointerEnter?: CellPointerHandler;
+};
+/**
+ * The bare 13x13 grid. Each cell carries a `data-combo` attribute. Passing
+ * `onPointerDown` marks the grid as a drag surface (`dragSurfaceStyle`): a
+ * drag reaches the handlers instead of scrolling the page or selecting text.
+ */
 export declare const HandMatrix: FC<{
     className?: string;
-} & ComboHandlers>;
+} & ComboStyleProp & GridPointerHandlers>;
 export {};

package/dist/index.d.ts

@@ -1,12 +1,7 @@
-export { HandMatrix, cellFillGradient, CELL_FILL_DIRECTION, } from './hand-matrix';
+export { HandMatrix, cellFillGradient, CELL_FILL_DIRECTION, type CellPointerHandler, } from './hand-matrix';
 export { RangeGrid } from './range-grid';
-export { RangeMatrixEditor } from './editor/matrix-editor';
-export type { RangeMatrixEditorProps } from './editor/matrix-editor';
-export { ActionWeightSliders } from './editor/action-sliders';
-export type { ActionWeightSlidersProps, WeightInputProps, } from './editor/action-sliders';
-export { useRangePainting } from './editor/use-range-painting';
-export type { PaintTool } from './editor/use-range-painting';
-export { seedCells, cellsToComboWeights, comboWeightsToCells, } from './editor/cells';
-export type { EditorCell } from './editor/cells';
-export { rebalance } from './editor/weights';
-export type { EditorActionSpec } from './editor/weights';
+export { RangeMatrixEditor, type RangeMatrixEditorProps, } from './editor/matrix-editor';
+export { ActionWeightSliders, type ActionWeightSlidersProps, type WeightInputProps, } from './editor/action-sliders';
+export { useRangePainting, type PaintTool } from './editor/use-range-painting';
+export { seedCells, cellsToComboWeights, cellsToRanges, comboWeightsToCells, type EditorCell, } from './editor/cells';
+export { rebalance, type EditorActionSpec } from './editor/weights';

package/dist/index.js

@@ -1,307 +1,356 @@
-import { COMBOS as g, parseRange as R, toComboWeights as x } from "@spotlab/range";
-import { jsx as p, jsxs as b } from "react/jsx-runtime";
-import { useCallback as v, useEffect as k, useMemo as L, useRef as w } from "react";
-var I = (e, t) => Array.from({ length: Math.ceil(e.length / t) }, (n, r) => e.slice(r * t, r * t + t)), D = "to right", $ = (e) => e.length === 0 ? "transparent" : `linear-gradient(${D}, ${e.join(", ")})`, B = ({ combo: e, onClick: t, onMouseDown: n, onMouseEnter: r, comboStyle: a }) => /* @__PURE__ */ p("div", {
+import { useCallback as g, useEffect as N, useLayoutEffect as S, useMemo as I, useRef as b } from "react";
+import { COMBOS as v, comboOf as A, expandComboWeights as M, parseRange as P, toComboWeights as W } from "@spotlab/range";
+import { jsx as p, jsxs as w } from "react/jsx-runtime";
+var D = (t, e) => Array.from({ length: Math.ceil(t.length / e) }, (n, r) => t.slice(r * e, r * e + e)), T = "to right", R = (t) => t.length === 0 ? "transparent" : `linear-gradient(${T}, ${t.join(", ")})`, O = (t) => {
+  const e = t.target;
+  e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId);
+}, $ = (t, e, n) => {
+  const r = t.ownerDocument.elementFromPoint(e, n)?.closest("[data-combo]");
+  return !r || !t.contains(r) ? null : r.getAttribute("data-combo");
+}, B = ({ combo: t, onPointerDown: e, comboStyle: n }) => /* @__PURE__ */ p("div", {
   className: "spotlab-hm-cell",
-  style: a?.(e),
-  onClick: () => t?.(e),
-  onMouseDown: () => n?.(e),
-  onMouseEnter: () => r?.(e),
+  "data-combo": t,
+  style: n?.(t),
+  onPointerDown: e && ((r) => {
+    O(r), e(t, r);
+  }),
   children: /* @__PURE__ */ p("div", {
     className: "spotlab-hm-cell-inner",
     children: /* @__PURE__ */ p("div", {
-      "data-combo": e,
-      children: e
+      "data-combo": t,
+      children: t
     })
   })
-}), O = ({ row: e, ...t }) => /* @__PURE__ */ p("div", {
+}), F = ({ row: t, ...e }) => /* @__PURE__ */ p("div", {
   className: "spotlab-hm-row",
-  children: e.map((n, r) => /* @__PURE__ */ p(B, {
+  children: t.map((n, r) => /* @__PURE__ */ p(B, {
     combo: n,
-    ...t
+    ...e
   }, r))
-}), N = ({ className: e, ...t }) => /* @__PURE__ */ p("div", {
-  className: ["spotlab-hm-root", e].filter(Boolean).join(" "),
-  children: I(g, 13).map((n, r) => /* @__PURE__ */ p(O, {
-    row: n,
-    ...t
-  }, r))
-}), S = (e, t) => ({ background: $([`${e} 0 ${t * 100}%`, `transparent ${t * 100}% 100%`]) }), H = ({ range: e, fill: t = "var(--spotlab-hm-fill)", className: n }) => {
-  const r = L(() => {
-    const a = typeof e == "string" ? R(e) : e;
-    return x(a);
-  }, [e]);
-  return /* @__PURE__ */ p(N, {
+}), X = {
+  touchAction: "none",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  WebkitTouchCallout: "none"
+}, x = ({ className: t, onPointerDown: e, onPointerEnter: n, ...r }) => {
+  const a = b(null), o = (s) => {
+    const l = $(s.currentTarget, s.clientX, s.clientY);
+    l !== a.current && (a.current = l, l && n?.(l, s));
+  };
+  return /* @__PURE__ */ p("div", {
+    className: ["spotlab-hm-root", t].filter(Boolean).join(" "),
+    style: e ? X : void 0,
+    onPointerDown: n && ((s) => {
+      a.current = $(s.currentTarget, s.clientX, s.clientY);
+    }),
+    onPointerMove: n && o,
+    onPointerLeave: n && (() => a.current = null),
+    children: D(v, 13).map((s, l) => /* @__PURE__ */ p(F, {
+      row: s,
+      onPointerDown: e,
+      ...r
+    }, l))
+  });
+}, _ = (t, e) => ({ background: R([`${t} 0 ${e * 100}%`, `transparent ${e * 100}% 100%`]) }), rt = ({ range: t, fill: e = "var(--spotlab-hm-fill)", className: n }) => {
+  const r = I(() => {
+    const a = typeof t == "string" ? P(t) : t;
+    return W(a);
+  }, [t]);
+  return /* @__PURE__ */ p(x, {
     className: n,
     comboStyle: (a) => {
       const o = r.get(a);
-      return o ? S(t, o) : {};
+      return o ? _(e, o) : {};
     }
   });
-}, W = (e) => Math.max(0, Math.min(100, Math.round(e))), F = (e, t) => {
-  const n = e.map(Math.round);
+}, j = (t) => Math.max(0, Math.min(100, Math.round(t))), q = (t, e) => {
+  const n = t.map(Math.round);
   let r = 100 - n.reduce((a, o) => a + o, 0);
   if (r !== 0) {
-    for (let a = 0; a < n.length; a++) if (a !== t && n[a] + r >= 0) {
+    for (let a = 0; a < n.length; a++) if (a !== e && n[a] + r >= 0) {
       n[a] += r, r = 0;
       break;
     }
     if (r !== 0) {
-      for (let a = 0; a < n.length; a++) if (a !== t && n[a] > 0) {
+      for (let a = 0; a < n.length; a++) if (a !== e && n[a] > 0) {
         const o = Math.min(n[a], -r);
         if (n[a] -= o, r += o, r === 0) break;
       }
-      n[t] = Math.max(0, n[t] + r);
+      n[e] = Math.max(0, n[e] + r);
     }
   }
   return n;
-}, j = (e, t, n, r) => {
-  const a = W(n), o = e.slice();
-  o[t] = a;
-  const i = 100 - a, l = [];
-  for (let s = 0; s < e.length; s++) s !== t && l.push(s);
-  const c = l.reduce((s, u) => s + e[u], 0);
+}, G = (t, e, n, r) => {
+  const a = j(n), o = t.slice();
+  o[e] = a;
+  const s = 100 - a, l = [];
+  for (let i = 0; i < t.length; i++) i !== e && l.push(i);
+  const c = l.reduce((i, d) => i + t[d], 0);
   if (c <= 0) {
-    l.forEach((u) => o[u] = 0);
-    const s = t === r ? l[0] : r;
-    s != null && (o[s] = i);
-  } else l.forEach((s) => o[s] = Math.round(e[s] / c * i));
-  return F(o, t);
-}, M = (e, t) => e.reduce((n, r, a) => a === t ? n : n + r, 0), C = new Map(g.map((e, t) => [e, t])), y = (e, t) => {
-  const n = e.slice();
-  let r = M(n, t);
+    l.forEach((d) => o[d] = 0);
+    const i = e === r ? l[0] : r;
+    i != null && (o[i] = s);
+  } else l.forEach((i) => o[i] = Math.round(t[i] / c * s));
+  return q(o, e);
+}, E = (t, e) => t.reduce((n, r, a) => a === e ? n : n + r, 0), C = new Map(v.map((t, e) => [t, e])), U = (t, e, n) => {
+  const r = t.slice();
+  return r[C.get(e)] = n, r;
+}, L = (t, e) => {
+  const n = t.slice();
+  let r = E(n, e);
   if (r > 100) {
     const a = 100 / r;
-    for (let o = 0; o < n.length; o++) o !== t && (n[o] = Math.round(n[o] * a));
-    r = M(n, t);
+    for (let o = 0; o < n.length; o++) o !== e && (n[o] = Math.round(n[o] * a));
+    r = E(n, e);
   }
-  return n[t] = Math.max(0, 100 - r), n;
+  return n[e] = Math.max(0, 100 - r), n;
 };
-function Q(e, t, n) {
-  return g.map((r) => {
-    const a = e ? e.get(r) ?? 0 : 1, o = t.map(() => 0);
+function nt(t, e, n) {
+  return v.map((r) => {
+    const a = t ? t.get(r) ?? 0 : 1, o = e.map(() => 0);
     return a <= 0 ? (o[n] = 100, {
       avail: 0,
       weights: o
-    }) : (t.forEach((i, l) => {
-      const c = i?.get(r) ?? 0;
+    }) : (e.forEach((s, l) => {
+      const c = s?.get(r) ?? 0;
       o[l] = Math.round(c / a * 100);
     }), {
       avail: a,
-      weights: y(o, n)
+      weights: L(o, n)
     });
   });
 }
-var T = 8;
-function Y(e, t) {
+var Y = 8;
+function H(t, e) {
   const n = /* @__PURE__ */ new Map();
-  return e.forEach((r, a) => {
+  return t.forEach((r, a) => {
     if (r.avail <= 0) return;
     const o = r.weights.reduce((l, c) => l + c, 0);
     if (!o) return;
-    const i = Number((r.weights[t] / o * r.avail).toFixed(T));
-    i && n.set(g[a], i);
+    const s = Number((r.weights[e] / o * r.avail).toFixed(Y));
+    s && n.set(v[a], s);
   }), n;
 }
-function J(e, t, n) {
-  return e.map((r, a) => {
-    const o = t.map(() => 0);
+function at(t, e, n) {
+  return t.map((r, a) => {
+    const o = e.map(() => 0);
     if (r.avail <= 0)
       return o[n] = 100, {
         avail: r.avail,
         weights: o
       };
-    const i = g[a];
-    return t.forEach((l, c) => {
-      const s = l?.get(i) ?? 0;
-      o[c] = Math.round(s / r.avail * 100);
+    const s = v[a];
+    return e.forEach((l, c) => {
+      const i = l?.get(s) ?? 0;
+      o[c] = Math.round(i / r.avail * 100);
     }), {
       avail: r.avail,
-      weights: y(o, n)
+      weights: L(o, n)
     };
   });
 }
-function _(e) {
-  const { cells: t, brush: n, tool: r, onCellsChange: a, onBrushChange: o, onToolChange: i } = e, l = w(!1);
-  k(() => {
-    const u = () => l.current = !1;
-    return window.addEventListener("pointerup", u), () => window.removeEventListener("pointerup", u);
+var Q = (t, e) => t.avail !== e.avail || t.weights.length !== e.weights.length || t.weights.some((n, r) => n !== e.weights[r]);
+function ot(t, e, n) {
+  const r = new Set(v.filter((a, o) => Q(e[o], n[o])));
+  return t.map((a, o) => {
+    const s = H(n, o);
+    if (a === null) return M(s);
+    const l = (d) => {
+      const h = s.get(d);
+      return h ? M(/* @__PURE__ */ new Map([[d, h]])) : [];
+    }, c = [], i = /* @__PURE__ */ new Set();
+    for (const d of a) {
+      const h = A(d.hand);
+      r.has(h) ? i.has(h) || (i.add(h), c.push(...l(h))) : c.push(d);
+    }
+    for (const d of r) i.has(d) || c.push(...l(d));
+    return c;
+  });
+}
+function J(t) {
+  const { cells: e, brush: n, tool: r, onCellsChange: a, onBrushChange: o, onToolChange: s } = t, l = b(null), c = g(() => {
+    l.current?.abort(), l.current = null;
   }, []);
-  const c = v((u) => {
-    const d = C.get(u);
-    if (t[d].avail <= 0) return;
-    const h = t.slice();
-    h[d] = {
-      avail: t[d].avail,
+  N(() => c, [c]);
+  const i = b(e);
+  S(() => {
+    i.current = e;
+  }, [e]);
+  const d = g((u) => {
+    const f = i.current, { avail: m } = f[C.get(u)];
+    if (m <= 0) return;
+    const k = U(f, u, {
+      avail: m,
       weights: [...n]
-    }, a(h);
-  }, [
-    t,
-    n,
-    a
-  ]), s = v((u) => {
-    const d = C.get(u);
-    t[d].avail <= 0 || (o([...t[d].weights]), i("brush"));
+    });
+    i.current = k, a(k);
+  }, [n, a]), h = g((u) => {
+    const f = C.get(u);
+    e[f].avail <= 0 || (o([...e[f].weights]), s("brush"));
   }, [
-    t,
+    e,
     o,
-    i
+    s
   ]);
   return {
-    onCellDown: v((u) => {
+    onCellDown: g((u) => {
       if (r === "eyedropper") {
-        s(u);
+        h(u);
         return;
       }
-      l.current = !0, c(u);
+      c();
+      const f = new AbortController();
+      l.current = f, window.addEventListener("pointerup", c, { signal: f.signal }), window.addEventListener("pointercancel", c, { signal: f.signal }), d(u);
     }, [
       r,
-      s,
+      h,
+      d,
       c
     ]),
-    onCellEnter: v((u) => {
-      l.current && r === "brush" && c(u);
-    }, [r, c])
+    onCellEnter: g((u) => {
+      l.current && r === "brush" && d(u);
+    }, [r, d])
   };
 }
-var E = (e, t, n) => {
+var y = (t, e, n) => {
   const r = [];
   let a = 0;
   return n.forEach((o) => {
-    const i = (e.weights[o] || 0) / 100 * e.avail;
-    if (i <= 0) return;
-    const l = t[o].color;
-    r.push(`${l} ${a * 100}%`), r.push(`${l} ${(a + i) * 100}%`), a += i;
-  }), $(r);
-}, K = ({ cells: e, actions: t, order: n, brush: r, tool: a, onCellsChange: o, onBrushChange: i, onToolChange: l, className: c }) => {
-  const { onCellDown: s, onCellEnter: u } = _({
-    cells: e,
+    const s = (t.weights[o] || 0) / 100;
+    if (s <= 0) return;
+    const l = e[o].color;
+    r.push(`${l} ${a * 100}%`), r.push(`${l} ${(a + s) * 100}%`), a += s;
+  }), r.length > 0 && a < 1 - 1e-9 && r.push(`transparent ${a * 100}% 100%`), R(r);
+}, lt = ({ cells: t, actions: e, order: n, brush: r, tool: a, onCellsChange: o, onBrushChange: s, onToolChange: l, className: c }) => {
+  const { onCellDown: i, onCellEnter: d } = J({
+    cells: t,
     brush: r,
     tool: a,
     onCellsChange: o,
-    onBrushChange: i,
+    onBrushChange: s,
     onToolChange: l
   });
-  return /* @__PURE__ */ p(N, {
+  return /* @__PURE__ */ p(x, {
     className: c,
-    comboStyle: (d) => {
-      const h = e[C.get(d)];
-      if (h.avail <= 0) return {
+    comboStyle: (h) => {
+      const u = t[C.get(h)];
+      if (u.avail <= 0) return {
         background: "var(--spotlab-hm-dead-hatch)",
         backgroundColor: "var(--spotlab-hm-muted-bg)",
         cursor: "not-allowed",
         color: "var(--spotlab-hm-muted-fg)"
       };
-      const m = a === "eyedropper" ? "copy" : "pointer";
-      if (h.avail < 1) {
-        const f = `${h.avail * 100}%`;
+      const f = a === "eyedropper" ? "copy" : "pointer";
+      if (u.avail < 1) {
+        const m = `${u.avail * 100}%`;
         return {
-          background: `repeating-linear-gradient(180deg, var(--spotlab-hm-muted-fg) 0 4px, transparent 4px 8px), var(--spotlab-hm-dead-hatch), ${E(h, t, n)}`,
-          backgroundSize: `1px 100%, ${(1 - h.avail) * 100}% 100%, ${h.avail * 100}% 100%`,
-          backgroundPosition: `${f} center, right center, left center`,
+          background: `repeating-linear-gradient(180deg, var(--spotlab-hm-muted-fg) 0 4px, transparent 4px 8px), var(--spotlab-hm-dead-hatch), ${y(u, e, n)}`,
+          backgroundSize: `1px 100%, ${(1 - u.avail) * 100}% 100%, ${u.avail * 100}% 100%`,
+          backgroundPosition: `${m} center, right center, left center`,
           backgroundRepeat: "no-repeat, no-repeat, no-repeat",
-          cursor: m
+          cursor: f
         };
       }
       return {
-        background: E(h, t, n),
-        cursor: m
+        background: y(u, e, n),
+        cursor: f
       };
     },
-    onMouseDown: s,
-    onMouseEnter: u
+    onPointerDown: i,
+    onPointerEnter: d
   });
-}, A = (e) => /* @__PURE__ */ p("input", {
+}, K = (t) => /* @__PURE__ */ p("input", {
   type: "number",
   className: "spotlab-hm-weight-input",
-  ...e
-}), P = ({ value: e, color: t, passive: n, onChange: r }) => {
-  const a = w(null), o = w(!1), i = v((l) => {
+  ...t
+}), V = ({ value: t, color: e, passive: n, onChange: r }) => {
+  const a = b(null), o = b(!1), s = g((l) => {
     const c = a.current;
     if (!c) return;
-    const s = c.getBoundingClientRect();
-    r((l - s.left) / s.width * 100);
+    const i = c.getBoundingClientRect();
+    r((l - i.left) / i.width * 100);
   }, [r]);
-  return k(() => {
-    const l = (s) => {
-      o.current && i(s.clientX);
+  return N(() => {
+    const l = (i) => {
+      o.current && s(i.clientX);
     }, c = () => o.current = !1;
     return window.addEventListener("pointermove", l), window.addEventListener("pointerup", c), () => {
       window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", c);
     };
-  }, [i]), /* @__PURE__ */ p("div", {
+  }, [s]), /* @__PURE__ */ p("div", {
     ref: a,
     role: "slider",
-    "aria-valuenow": e,
+    "aria-valuenow": t,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     className: "spotlab-hm-slider-track",
-    style: { background: `linear-gradient(to right, ${t} 0 ${e}%, var(--spotlab-hm-track-bg) ${e}% 100%)` },
+    style: { background: `linear-gradient(to right, ${e} 0 ${t}%, var(--spotlab-hm-track-bg) ${t}% 100%)` },
     onPointerDown: (l) => {
-      o.current = !0, i(l.clientX);
+      o.current = !0, s(l.clientX);
     },
     children: /* @__PURE__ */ p("div", {
       className: "spotlab-hm-slider-thumb",
       style: {
-        left: `${e}%`,
-        border: `2px solid ${n ? "var(--spotlab-hm-muted-fg)" : t}`
+        left: `${t}%`,
+        border: `2px solid ${n ? "var(--spotlab-hm-muted-fg)" : e}`
       }
     })
   });
-}, X = (e, t) => /* @__PURE__ */ b("span", {
+}, Z = (t, e) => /* @__PURE__ */ w("span", {
   className: "spotlab-hm-slider-label",
-  children: [e.label, t && /* @__PURE__ */ p("span", {
+  children: [t.label, e && /* @__PURE__ */ p("span", {
     className: "spotlab-hm-slider-remainder",
     children: " · remainder"
   })]
-}), V = ({ actions: e, order: t, weights: n, passive: r, onWeightsChange: a, renderActionLabel: o, renderActionExtra: i, components: l, className: c }) => {
-  const s = l?.WeightInput ?? A, u = (d, h) => {
-    a(j(n, d, h, r));
+}), st = ({ actions: t, order: e, weights: n, passive: r, onWeightsChange: a, renderActionLabel: o, renderActionExtra: s, components: l, className: c }) => {
+  const i = l?.WeightInput ?? K, d = (h, u) => {
+    a(G(n, h, u, r));
   };
   return /* @__PURE__ */ p("div", {
     className: ["spotlab-hm-root spotlab-hm-sliders", c].filter(Boolean).join(" "),
-    children: t.map((d) => {
-      const h = e[d], m = d === r;
-      return /* @__PURE__ */ b("div", {
+    children: e.map((h) => {
+      const u = t[h], f = h === r;
+      return /* @__PURE__ */ w("div", {
         className: "spotlab-hm-slider-row",
-        "data-passive": m,
-        children: [/* @__PURE__ */ b("div", {
+        "data-passive": f,
+        children: [/* @__PURE__ */ w("div", {
           className: "spotlab-hm-slider-header",
           children: [
             /* @__PURE__ */ p("span", {
               className: "spotlab-hm-slider-swatch",
-              style: { background: h.color }
+              style: { background: u.color }
             }),
-            o?.(h, d, m) ?? X(h, m),
-            i?.(h, d)
+            o?.(u, h, f) ?? Z(u, f),
+            s?.(u, h)
           ]
-        }), /* @__PURE__ */ b("div", {
+        }), /* @__PURE__ */ w("div", {
           className: "spotlab-hm-slider-track-row",
-          children: [/* @__PURE__ */ p(P, {
-            value: n[d],
-            color: h.color,
-            passive: m,
-            onChange: (f) => u(d, f)
-          }), /* @__PURE__ */ p(s, {
-            value: n[d],
-            "aria-label": `${h.label} weight`,
-            onChange: (f) => u(d, parseInt(f.target.value || "0", 10))
+          children: [/* @__PURE__ */ p(V, {
+            value: n[h],
+            color: u.color,
+            passive: f,
+            onChange: (m) => d(h, m)
+          }), /* @__PURE__ */ p(i, {
+            value: n[h],
+            "aria-label": `${u.label} weight`,
+            onChange: (m) => d(h, parseInt(m.target.value || "0", 10))
           })]
         })]
-      }, h.id);
+      }, u.id);
     })
   });
 };
 export {
-  V as ActionWeightSliders,
-  D as CELL_FILL_DIRECTION,
-  N as HandMatrix,
-  H as RangeGrid,
-  K as RangeMatrixEditor,
-  $ as cellFillGradient,
-  Y as cellsToComboWeights,
-  J as comboWeightsToCells,
-  j as rebalance,
-  Q as seedCells,
-  _ as useRangePainting
+  st as ActionWeightSliders,
+  T as CELL_FILL_DIRECTION,
+  x as HandMatrix,
+  rt as RangeGrid,
+  lt as RangeMatrixEditor,
+  R as cellFillGradient,
+  H as cellsToComboWeights,
+  ot as cellsToRanges,
+  at as comboWeightsToCells,
+  G as rebalance,
+  nt as seedCells,
+  J as useRangePainting
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spotlab/hand-matrix",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A 13x13 poker hand-matrix React component: the read-only grid primitive and a range-string-aware display component, themed through CSS custom properties.",
   "type": "module",
   "license": "MIT",
@@ -40,19 +40,19 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@spotlab/range": "^0.1.0",
+    "@spotlab/range": "^0.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@spotlab/range": "0.1.0",
+    "@spotlab/range": "0.3.0",
     "@storybook/addon-vitest": "^10.5.5",
     "@storybook/react-vite": "^10.5.5",
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser": "^4.1.4",
-    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/browser": "^5.0.0",
+    "@vitest/browser-playwright": "^5.0.0",
     "playwright": "^1.49.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -60,7 +60,7 @@
     "typescript": "^6.0.0",
     "vite": "^8.3.1",
     "vite-plugin-dts": "^5.1.2",
-    "vitest": "^4.1.4"
+    "vitest": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -73,6 +73,6 @@
     "test": "vitest run --project unit",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
-    "test-storybook": "vitest run --project storybook"
+    "test-storybook": "NODE_ENV=production vitest run --project storybook"
   }
 }