@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.157.1 → 1.0.0-beta.158.1

package/dist/components/composed/PlateMapEditor/PlatePaintGrid.js

@@ -1,377 +1,592 @@
-import { jsx as g, jsxs as U, Fragment as we } from "react/jsx-runtime";
-import * as E from "react";
-import { rectPositions as te, pos as $, resolveDimensions as ye, rowLabel as _e } from "./wellGrid.js";
-import { parsePos as ze } from "./wellGrid.js";
-import { cn as oe } from "../../../lib/utils.js";
-const be = 34, Ae = 24, Me = 72, ke = 36, n = 26, z = 12, Fe = 1, le = 16, Te = 9, xe = 5, N = 1, Z = 4, se = 4, Re = 3, ne = 5, Y = 650, De = "var(--surface-container)", Oe = "var(--border)";
-function Se(i, l) {
-  const r = [];
-  for (let o = 0; o < i; o++)
-    r.push(
-      /* @__PURE__ */ g(
+import { jsx as v, jsxs as q, Fragment as Ke } from "react/jsx-runtime";
+import * as u from "react";
+import { rectPositions as ne, pos as D, parsePos as Xe, resolveDimensions as Be, rowLabel as Ye, allPositions as Ge } from "./wellGrid.js";
+import { cn as re } from "../../../lib/utils.js";
+const qe = 34, He = 24, Qe = 72, je = 36, a = 26, Z = 12, ge = 1, ke = 16, Ze = 9, Je = 5, G = 1, le = 4, ye = 4, Ee = 8, oe = 10, Ve = 3, Le = 5, se = 650, et = "var(--surface-container)", tt = /* @__PURE__ */ new Set();
+function ce(o, c, s) {
+  return `${o}-well-${c}-${s}`;
+}
+const nt = "var(--border)";
+function ot(o, c) {
+  const s = [];
+  for (let l = 0; l < o; l++)
+    s.push(
+      /* @__PURE__ */ v(
         "text",
         {
-          x: n + o * l + l / 2,
-          y: n / 2,
+          x: a + l * c + c / 2,
+          y: a / 2,
           textAnchor: "middle",
-          fontSize: le,
+          fontSize: ke,
           className: "fill-muted-foreground",
-          children: o + 1
+          children: l + 1
         },
-        `c${o}`
+        `c${l}`
       )
     );
-  return r;
+  return s;
 }
-function Ce(i, l) {
-  const r = [];
-  for (let o = 0; o < i; o++)
-    r.push(
-      /* @__PURE__ */ g(
+function st(o, c) {
+  const s = [];
+  for (let l = 0; l < o; l++)
+    s.push(
+      /* @__PURE__ */ v(
         "text",
         {
-          x: n - Te,
-          y: n + o * l + l / 2 + xe,
+          x: a - Ze,
+          y: a + l * c + c / 2 + Je,
           textAnchor: "end",
-          fontSize: le,
+          fontSize: ke,
           className: "fill-muted-foreground",
-          children: _e(o)
+          children: Ye(l)
         },
-        `r${o}`
+        `r${l}`
       )
     );
-  return r;
+  return s;
 }
-function We(i, l, r) {
+function rt(o, c, s) {
   const {
-    dims: o,
-    cellSize: e,
-    values: v,
-    selection: k,
-    dragPositions: L,
-    colorForWell: u,
-    emptyWellFillColor: f,
-    selectedFillColor: w,
-    selectedFillOpacity: _,
-    selectionFillMode: T,
-    wellShape: p
-  } = i, h = $(l, r, o.columns), b = v.get(h), y = k.has(h) || L.has(h), D = b === void 0 && f !== null ? f : u(b, h), F = y && !(y && T === "well" && b !== void 0), x = F ? w : D, R = F ? _ : void 0;
-  if (p === "circle") {
-    const O = n + r * e + e / 2, A = n + l * e + e / 2, S = e / 2 - N;
-    return /* @__PURE__ */ g(
+    dims: l,
+    cellSize: r,
+    values: d,
+    selection: E,
+    dragPositions: y,
+    colorForWell: h,
+    emptyWellFillColor: m,
+    selectedFillColor: P,
+    selectedFillOpacity: O,
+    selectionFillMode: F,
+    wellShape: g,
+    instanceId: L
+  } = o, w = D(c, s, l.columns), M = d.get(w), k = E.has(w) || y.has(w), N = M === void 0 && m !== null ? m : h(M, w), I = k && !(k && F === "well" && M !== void 0), C = I ? P : N, R = I ? O : void 0;
+  if (g === "circle") {
+    const _ = a + s * r + r / 2, z = a + c * r + r / 2, x = r / 2 - G;
+    return /* @__PURE__ */ v(
       "circle",
       {
-        cx: O,
-        cy: A,
-        r: S,
-        fill: x,
+        id: ce(L, c, s),
+        cx: _,
+        cy: z,
+        r: x,
+        fill: C,
         fillOpacity: R,
         stroke: "none",
-        "data-well": h,
-        "data-selected": y ? "true" : void 0
+        role: "gridcell",
+        "aria-colindex": s + 1,
+        "aria-label": w,
+        "aria-selected": k,
+        "data-well": w,
+        "data-selected": k ? "true" : void 0
       },
-      h
+      w
     );
   }
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ v(
     "rect",
     {
-      x: n + r * e,
-      y: n + l * e,
-      width: e,
-      height: e,
-      fill: x,
+      id: ce(L, c, s),
+      x: a + s * r,
+      y: a + c * r,
+      width: r,
+      height: r,
+      fill: C,
       fillOpacity: R,
       stroke: "none",
-      "data-well": h,
-      "data-selected": y ? "true" : void 0
+      role: "gridcell",
+      "aria-colindex": s + 1,
+      "aria-label": w,
+      "aria-selected": k,
+      "data-well": w,
+      "data-selected": k ? "true" : void 0
     },
-    h
+    w
   );
 }
-function Pe({ dims: i, ...l }) {
-  const r = [];
-  for (let o = 0; o < i.rows; o++)
-    for (let e = 0; e < i.columns; e++)
-      r.push(We({ dims: i, ...l }, o, e));
-  return r;
+function lt(o, c) {
+  const s = o.shiftKey;
+  switch (o.key) {
+    case "ArrowUp":
+      return { kind: "move", dr: -1, dc: 0, extend: s };
+    case "ArrowDown":
+      return { kind: "move", dr: 1, dc: 0, extend: s };
+    case "ArrowLeft":
+      return { kind: "move", dr: 0, dc: -1, extend: s };
+    case "ArrowRight":
+      return { kind: "move", dr: 0, dc: 1, extend: s };
+    case "Home":
+      return { kind: "move", dr: 0, dc: -c, extend: s };
+    case "End":
+      return { kind: "move", dr: 0, dc: c, extend: s };
+    case " ":
+    case "Enter":
+      return { kind: "toggle" };
+    case "Escape":
+      return { kind: "clear" };
+    case "a":
+    case "A":
+      return o.metaKey || o.ctrlKey ? { kind: "selectAll" } : null;
+    default:
+      return null;
+  }
+}
+function ct(o, c, s) {
+  if (!o) return null;
+  const { w: l, h: r } = c ?? { w: 0, h: 0 }, d = r + Ee, E = o.topY < d, y = E ? o.bottomY + Ee : o.topY - d;
+  if (l === 0)
+    return { left: o.anchorX, top: y, below: E, tailOffset: 0, ready: !1 };
+  const h = Math.min(Math.max(o.anchorX - l / 2, 0), Math.max(0, s - l)), m = Math.min(Math.max(o.anchorX - h, oe), Math.max(oe, l - oe));
+  return { left: h, top: y, below: E, tailOffset: m, ready: !0 };
+}
+function it({
+  placement: o,
+  children: c,
+  layerRef: s
+}) {
+  return o ? /* @__PURE__ */ v(
+    "div",
+    {
+      ref: s,
+      "data-slot": "plate-quick-paint-anchor",
+      "data-placement": o.below ? "below" : "above",
+      className: "pointer-events-none absolute z-10 w-max",
+      style: {
+        left: o.left,
+        top: o.top,
+        // Hidden for the first paint only, while the strip is measured, so it
+        // never flashes in the wrong place.
+        visibility: o.ready ? void 0 : "hidden"
+      },
+      children: /* @__PURE__ */ q("div", { className: "pointer-events-auto relative", children: [
+        c,
+        /* @__PURE__ */ v(
+          "span",
+          {
+            "aria-hidden": !0,
+            "data-slot": "plate-quick-paint-tail",
+            className: re(
+              "absolute size-2 rotate-45 bg-popover",
+              o.below ? "-top-1 border-t border-l" : "-bottom-1 border-r border-b"
+            ),
+            style: { left: o.tailOffset - 4 }
+          }
+        )
+      ] })
+    }
+  ) : null;
+}
+function at({ dims: o, ...c }) {
+  const s = [];
+  for (let l = 0; l < o.rows; l++) {
+    const r = [];
+    for (let d = 0; d < o.columns; d++)
+      r.push(rt({ dims: o, ...c }, l, d));
+    s.push(
+      /* @__PURE__ */ v("g", { role: "row", "aria-rowindex": l + 1, children: r }, `row-${l}`)
+    );
+  }
+  return s;
 }
-function Ne(i, l, r) {
-  const o = [], e = n, v = n, k = n + i.columns * l, L = n + i.rows * l;
-  for (let u = 0; u <= i.columns; u++) {
-    const f = n + u * l;
-    o.push(
-      /* @__PURE__ */ g(
+function ut(o, c, s) {
+  const l = [], r = a, d = a, E = a + o.columns * c, y = a + o.rows * c;
+  for (let h = 0; h <= o.columns; h++) {
+    const m = a + h * c;
+    l.push(
+      /* @__PURE__ */ v(
         "line",
         {
-          x1: f,
-          y1: v,
-          x2: f,
-          y2: L,
-          stroke: r,
-          strokeWidth: Z,
+          x1: m,
+          y1: d,
+          x2: m,
+          y2: y,
+          stroke: s,
+          strokeWidth: le,
           vectorEffect: "non-scaling-stroke",
           shapeRendering: "crispEdges",
           pointerEvents: "none",
-          "data-plate-grid-line": `column-${u}`
+          "data-plate-grid-line": `column-${h}`
         },
-        `grid-col-${u}`
+        `grid-col-${h}`
       )
     );
   }
-  for (let u = 0; u <= i.rows; u++) {
-    const f = n + u * l;
-    o.push(
-      /* @__PURE__ */ g(
+  for (let h = 0; h <= o.rows; h++) {
+    const m = a + h * c;
+    l.push(
+      /* @__PURE__ */ v(
         "line",
         {
-          x1: e,
-          y1: f,
-          x2: k,
-          y2: f,
-          stroke: r,
-          strokeWidth: Z,
+          x1: r,
+          y1: m,
+          x2: E,
+          y2: m,
+          stroke: s,
+          strokeWidth: le,
           vectorEffect: "non-scaling-stroke",
           shapeRendering: "crispEdges",
           pointerEvents: "none",
-          "data-plate-grid-line": `row-${u}`
+          "data-plate-grid-line": `row-${h}`
         },
-        `grid-row-${u}`
+        `grid-row-${h}`
       )
     );
   }
-  return o;
+  return l;
 }
-function $e(i, l, r) {
+function dt(o, c, s) {
   const {
-    dims: o,
-    cellSize: e,
-    selection: v,
-    dragPositions: k,
-    selectedBorderColor: L,
-    flashWellId: u,
-    flashWellKey: f,
-    wellShape: w,
-    highlightedWellIds: _,
-    highlightBorderColor: T
-  } = i, p = $(l, r, o.columns), h = v.has(p) || k.has(p), b = u === p, y = !h && _.has(p);
-  if (!h && !b && !y) return null;
-  const D = n + r * e + N, I = n + l * e + N, F = e - N * 2, x = n + r * e + e / 2, R = n + l * e + e / 2, O = e / 2 - N, A = w === "circle", S = A ? { cx: x, cy: R, r: O } : { x: D, y: I, width: F, height: F }, M = (s, C, W) => {
-    const a = { ...S, ...s, pointerEvents: "none" };
-    return A ? /* @__PURE__ */ g("circle", { ...a, children: C }, W) : /* @__PURE__ */ g("rect", { ...a, children: C }, W);
-  }, B = /* @__PURE__ */ U(we, { children: [
-    /* @__PURE__ */ g("animate", { attributeName: "fill-opacity", values: "0.24;0.1;0", dur: `${Y}ms`, fill: "freeze" }),
-    /* @__PURE__ */ g("animate", { attributeName: "stroke-opacity", values: "0.92;0.42;0", dur: `${Y}ms`, fill: "freeze" }),
-    /* @__PURE__ */ g(
+    dims: l,
+    cellSize: r,
+    selection: d,
+    dragPositions: E,
+    selectedBorderColor: y,
+    flashWellId: h,
+    flashWellKey: m,
+    wellShape: P,
+    highlightedWellIds: O,
+    highlightBorderColor: F
+  } = o, g = D(c, s, l.columns), L = d.has(g) || E.has(g), w = h === g, M = !L && O.has(g);
+  if (!L && !w && !M) return null;
+  const k = a + s * r + G, N = a + c * r + G, $ = r - G * 2, I = a + s * r + r / 2, C = a + c * r + r / 2, R = r / 2 - G, _ = P === "circle", z = _ ? { cx: I, cy: C, r: R } : { x: k, y: N, width: $, height: $ }, x = (J, t, U) => {
+    const K = { ...z, ...J, pointerEvents: "none" };
+    return _ ? /* @__PURE__ */ v("circle", { ...K, children: t }, U) : /* @__PURE__ */ v("rect", { ...K, children: t }, U);
+  }, W = /* @__PURE__ */ q(Ke, { children: [
+    /* @__PURE__ */ v("animate", { attributeName: "fill-opacity", values: "0.24;0.1;0", dur: `${se}ms`, fill: "freeze" }),
+    /* @__PURE__ */ v("animate", { attributeName: "stroke-opacity", values: "0.92;0.42;0", dur: `${se}ms`, fill: "freeze" }),
+    /* @__PURE__ */ v(
       "animate",
       {
         attributeName: "stroke-width",
-        values: `${ne};${se}`,
-        dur: `${Y}ms`,
+        values: `${Le};${ye}`,
+        dur: `${se}ms`,
         fill: "freeze"
       }
     )
   ] });
-  return /* @__PURE__ */ U("g", { children: [
-    h ? M({
+  return /* @__PURE__ */ q("g", { children: [
+    L ? x({
       fill: "none",
-      stroke: L,
-      strokeWidth: se,
-      "data-well-selection": p
+      stroke: y,
+      strokeWidth: ye,
+      "data-well-selection": g
     }) : null,
-    y ? M({
+    M ? x({
       fill: "none",
-      stroke: T,
-      strokeWidth: Re,
-      "data-well-highlight": p
+      stroke: F,
+      strokeWidth: Ve,
+      "data-well-highlight": g
     }) : null,
-    b ? M(
+    w ? x(
       {
-        fill: L,
+        fill: y,
         fillOpacity: 0.24,
-        stroke: L,
+        stroke: y,
         strokeOpacity: 0.92,
-        strokeWidth: ne,
-        "data-well-flash": p
+        strokeWidth: Le,
+        "data-well-flash": g
       },
-      B,
-      `${p}-${f}`
+      W,
+      `${g}-${m}`
     ) : null
-  ] }, `overlay-${p}`);
+  ] }, `overlay-${g}`);
 }
-function Ie({ dims: i, ...l }) {
-  const r = [];
-  for (let o = 0; o < i.rows; o++)
-    for (let e = 0; e < i.columns; e++) {
-      const v = $e({ dims: i, ...l }, o, e);
-      v && r.push(v);
+function ft({ dims: o, ...c }) {
+  const s = [];
+  for (let l = 0; l < o.rows; l++)
+    for (let r = 0; r < o.columns; r++) {
+      const d = dt({ dims: o, ...c }, l, r);
+      d && s.push(d);
     }
-  return r;
+  return s;
 }
-function Xe({
-  format: i,
-  rows: l,
-  columns: r,
-  values: o,
-  selection: e,
-  onSelectionChange: v,
-  colorForWell: k,
-  emptyWellFillColor: L = De,
-  wellShape: u = "rect",
-  framed: f = !1,
-  cellSize: w,
-  autoScale: _ = !0,
-  minCellSize: T = Ae,
-  maxCellSize: p,
-  borderColor: h = Oe,
-  selectedBorderColor: b = "var(--color-primary)",
-  selectedFillColor: y = "var(--color-primary)",
-  selectedFillOpacity: D = 0.18,
-  selectionFillMode: I = "selection",
-  flashWellId: F,
-  flashWellKey: x,
-  highlightedWellIds: R,
-  highlightBorderColor: O = "var(--color-primary)",
-  onWellHover: A,
-  onWellDoubleClick: S,
-  wrapWell: M,
-  className: B
+function wt({
+  format: o,
+  rows: c,
+  columns: s,
+  values: l,
+  selection: r,
+  onSelectionChange: d,
+  colorForWell: E,
+  emptyWellFillColor: y = et,
+  wellShape: h = "rect",
+  framed: m = !1,
+  cellSize: P,
+  autoScale: O = !0,
+  minCellSize: F = He,
+  maxCellSize: g,
+  borderColor: L = nt,
+  // Every blue in the palette shares one hue family (265-271), and wells are
+  // routinely filled from that same ramp (`--chart-1` is TS Blue 500, #2F45B5),
+  // so the selection separates on lightness rather than hue: #6C8DDB at L 0.65
+  // against the well's 0.45.
+  //
+  // An earlier attempt drew a background-coloured ring underneath for extra
+  // separation. SVG strokes centre on the path, so a wider under-stroke bleeds
+  // outside the selection ring as a white halo — which made adjacent wells look
+  // like they were floating apart rather than sitting on a plate. One stroke only.
+  selectedBorderColor: w = "var(--color-chart-seq-blue-06)",
+  selectedFillColor: M = "var(--color-chart-seq-blue-06)",
+  selectedFillOpacity: k = 0.26,
+  // "well" by default: a selected well keeps its own colour and the selection
+  // reads from the ring overlay instead. Replacing the fill hid the result of
+  // an Apply until the user deselected — no feedback on the action they just
+  // took. Empty selected wells still get the tint, since they have no colour
+  // of their own to show.
+  selectionFillMode: N = "well",
+  flashWellId: $,
+  flashWellKey: I,
+  highlightedWellIds: C,
+  highlightBorderColor: R = "var(--color-primary)",
+  onWellHover: _,
+  onWellDoubleClick: z,
+  wrapWell: x,
+  quickPaint: W,
+  className: J
 }) {
-  const s = ye(i, l, r), C = E.useRef(null), W = E.useRef(null), [a, H] = E.useState(null), [K, re] = E.useState();
-  E.useLayoutEffect(() => {
-    const c = C.current;
-    if (!c || !_ || w !== void 0) return;
-    const t = () => re(c.clientWidth);
-    if (t(), typeof ResizeObserver > "u") return;
-    const d = new ResizeObserver(t);
-    return d.observe(c), () => d.disconnect();
-  }, [_, w]);
-  const m = E.useMemo(() => {
-    if (!_ || w !== void 0 || !K)
-      return w ?? be;
-    const c = p ?? (s.columns > 12 ? ke : Me), t = f ? (z + Fe) * 2 : 0, d = Math.floor((K - n - t) / s.columns);
-    return Math.max(T, Math.min(c, d));
-  }, [_, w, K, s.columns, f, p, T]), X = E.useCallback(
-    (c) => {
-      const t = W.current;
-      if (!t) return null;
-      const d = t.getBoundingClientRect(), P = c.clientX - d.left - n, Le = c.clientY - d.top - n, G = Math.floor(P / m), j = Math.floor(Le / m);
-      return j < 0 || j >= s.rows || G < 0 || G >= s.columns ? null : { r: j, c: G };
+  const t = Be(o, c, s), U = u.useId(), K = u.useRef(null), ie = u.useRef(null), [p, V] = u.useState(null), [X, Ae] = u.useState();
+  u.useLayoutEffect(() => {
+    const n = K.current;
+    if (!n) return;
+    const e = () => Ae(n.clientWidth);
+    if (e(), typeof ResizeObserver > "u") return;
+    const i = new ResizeObserver(e);
+    return i.observe(n), () => i.disconnect();
+  }, []);
+  const f = u.useMemo(() => {
+    if (!O || P !== void 0 || !X)
+      return P ?? qe;
+    const n = g ?? (t.columns > 12 ? je : Qe), e = m ? (Z + ge) * 2 : 0, i = Math.floor((X - a - e) / t.columns);
+    return Math.max(F, Math.min(n, i));
+  }, [O, P, X, t.columns, m, g, F]), ee = u.useCallback(
+    (n) => {
+      const e = ie.current;
+      if (!e) return null;
+      const i = e.getBoundingClientRect(), A = n.clientX - i.left - a, b = n.clientY - i.top - a, S = Math.floor(A / f), te = Math.floor(b / f);
+      return te < 0 || te >= t.rows || S < 0 || S >= t.columns ? null : { r: te, c: S };
+    },
+    [f, t.rows, t.columns]
+  ), _e = (n) => {
+    const e = ee(n);
+    if (!e) return;
+    try {
+      n.currentTarget.setPointerCapture?.(n.pointerId);
+    } catch {
+    }
+    const i = n.shiftKey ? "add" : n.altKey ? "remove" : "replace";
+    V({ start: e, cur: e, mode: i }), H(e);
+  }, xe = (n) => {
+    const e = ee(n);
+    e && _ && _(D(e.r, e.c, t.columns)), !(!p || !e) && V({ ...p, cur: e });
+  }, [T, H] = u.useState(null), Q = u.useRef(null), Me = u.useCallback(
+    (n, e, i) => {
+      const A = T ?? { r: 0, c: 0 }, b = {
+        r: Math.min(t.rows - 1, Math.max(0, A.r + n)),
+        c: Math.min(t.columns - 1, Math.max(0, A.c + e))
+      };
+      if (i) {
+        const S = Q.current ?? A;
+        Q.current = S, d(new Set(ne(S.r, S.c, b.r, b.c, t.columns)));
+      } else
+        Q.current = b;
+      H(b), _?.(D(b.r, b.c, t.columns));
     },
-    [m, s.rows, s.columns]
-  ), ce = (c) => {
-    const t = X(c);
-    if (!t) return;
-    const d = c.shiftKey ? "add" : c.altKey ? "remove" : "replace";
-    H({ start: t, cur: t, mode: d });
-  }, ie = (c) => {
-    const t = X(c);
-    t && A && A($(t.r, t.c, s.columns)), !(!a || !t) && H({ ...a, cur: t });
-  }, q = E.useCallback(() => {
-    if (!a) return;
-    const c = te(a.start.r, a.start.c, a.cur.r, a.cur.c, s.columns);
-    let t;
-    a.mode === "replace" ? t = new Set(c) : a.mode === "add" ? (t = new Set(e), c.forEach((d) => t.add(d))) : (t = new Set(e), c.forEach((d) => t.delete(d))), v(t), H(null);
-  }, [a, s.columns, v, e]), ae = () => q(), ue = () => {
-    q(), A?.(null);
-  }, de = (c) => {
-    const t = X(c);
-    t && S?.($(t.r, t.c, s.columns));
-  }, fe = E.useMemo(() => a ? new Set(te(a.start.r, a.start.c, a.cur.r, a.cur.c, s.columns)) : /* @__PURE__ */ new Set(), [a, s.columns]), J = Z, Q = s.columns * m + n + J, V = s.rows * m + n + J, he = Se(s.columns, m), me = Ce(s.rows, m), ee = {
-    dims: s,
-    cellSize: m,
-    values: o,
-    selection: e,
-    dragPositions: fe,
-    colorForWell: k,
-    emptyWellFillColor: L,
-    borderColor: h,
-    selectedBorderColor: b,
-    selectedFillColor: y,
-    selectedFillOpacity: D,
-    selectionFillMode: I,
-    wellShape: u,
-    highlightedWellIds: R ?? /* @__PURE__ */ new Set(),
-    highlightBorderColor: O,
-    flashWellId: F,
-    flashWellKey: x
-  }, pe = Pe(ee), ge = u === "circle" ? [] : Ne(s, m, h), ve = Ie(ee), Ee = E.useMemo(() => {
-    if (!M) return [];
-    const c = [];
-    for (let t = 0; t < s.rows; t++)
-      for (let d = 0; d < s.columns; d++) {
-        const P = $(t, d, s.columns);
-        c.push(
-          /* @__PURE__ */ g(
+    [t.columns, t.rows, T, d, _]
+  ), Pe = u.useCallback(() => {
+    const n = T ?? { r: 0, c: 0 }, e = D(n.r, n.c, t.columns), i = new Set(r);
+    i.has(e) ? i.delete(e) : i.add(e), H(n), d(i);
+  }, [t.columns, T, d, r]), Ie = (n) => {
+    const e = lt(n, t.columns);
+    e && (n.preventDefault(), e.kind === "move" ? Me(e.dr, e.dc, e.extend) : e.kind === "toggle" ? Pe() : e.kind === "selectAll" ? d(new Set(Ge(t))) : (Q.current = null, d(/* @__PURE__ */ new Set())));
+  }, ae = u.useCallback(() => {
+    if (!p) return;
+    const n = ne(p.start.r, p.start.c, p.cur.r, p.cur.c, t.columns);
+    let e;
+    p.mode === "replace" ? e = new Set(n) : p.mode === "add" ? (e = new Set(r), n.forEach((i) => e.add(i))) : (e = new Set(r), n.forEach((i) => e.delete(i))), d(e), V(null);
+  }, [p, t.columns, d, r]), ue = (n) => {
+    try {
+      n.currentTarget.releasePointerCapture?.(n.pointerId);
+    } catch {
+    }
+    ae();
+  }, Re = () => {
+    ae(), _?.(null);
+  }, Te = (n) => {
+    const e = ee(n);
+    e && z?.(D(e.r, e.c, t.columns));
+  }, de = u.useMemo(() => p ? new Set(ne(p.start.r, p.start.c, p.cur.r, p.cur.c, t.columns)) : /* @__PURE__ */ new Set(), [p, t.columns]), fe = le, B = t.columns * f + a + fe, he = t.rows * f + a + fe, Se = B + (m ? (Z + ge) * 2 : 0), Y = X !== void 0 && Se > X + 1, De = `${t.rows} by ${t.columns} plate map, horizontally scrollable.`, me = u.useMemo(() => {
+    if (!W || r.size === 0) return null;
+    let n = 1 / 0, e = -1 / 0, i = 1 / 0;
+    for (const A of r) {
+      const b = Xe(A, t);
+      b && (b.row < n && (n = b.row), b.row > e && (e = b.row), b.col < i && (i = b.col));
+    }
+    return !Number.isFinite(n) || !Number.isFinite(i) ? null : {
+      anchorX: a + i * f + f / 2,
+      topY: a + n * f,
+      bottomY: a + (e + 1) * f
+    };
+  }, [t, W, r, f]), ve = u.useRef(null), [we, pe] = u.useState();
+  u.useLayoutEffect(() => {
+    const n = ve.current;
+    if (!n) {
+      pe(void 0);
+      return;
+    }
+    const e = () => pe({ w: n.offsetWidth, h: n.offsetHeight });
+    if (e(), typeof ResizeObserver > "u") return;
+    const i = new ResizeObserver(e);
+    return i.observe(n), () => i.disconnect();
+  }, [W]);
+  const Oe = u.useMemo(
+    () => ct(me, we, B),
+    [me, we, B]
+  ), Fe = `${t.rows} row by ${t.columns} column plate map. Drag to select wells, or use arrow keys to move and Space to toggle a well.`, Ne = u.useMemo(
+    () => ot(t.columns, f),
+    [t.columns, f]
+  ), $e = u.useMemo(
+    () => st(t.rows, f),
+    [t.rows, f]
+  ), be = C ?? tt, j = u.useMemo(
+    () => ({
+      dims: t,
+      cellSize: f,
+      values: l,
+      selection: r,
+      dragPositions: de,
+      colorForWell: E,
+      emptyWellFillColor: y,
+      borderColor: L,
+      selectedBorderColor: w,
+      selectedFillColor: M,
+      selectedFillOpacity: k,
+      selectionFillMode: N,
+      wellShape: h,
+      highlightedWellIds: be,
+      highlightBorderColor: R,
+      flashWellId: $,
+      flashWellKey: I,
+      instanceId: U
+    }),
+    [
+      U,
+      L,
+      E,
+      t,
+      de,
+      y,
+      $,
+      I,
+      R,
+      f,
+      be,
+      w,
+      M,
+      k,
+      r,
+      N,
+      l,
+      h
+    ]
+  ), Ce = u.useMemo(() => at(j), [j]), We = u.useMemo(
+    () => h === "circle" ? [] : ut(t, f, L),
+    [h, t, f, L]
+  ), Ue = u.useMemo(() => ft(j), [j]), ze = u.useMemo(() => {
+    if (!x) return [];
+    const n = [];
+    for (let e = 0; e < t.rows; e++)
+      for (let i = 0; i < t.columns; i++) {
+        const A = D(e, i, t.columns);
+        n.push(
+          /* @__PURE__ */ v(
             "div",
             {
               style: {
                 position: "absolute",
-                left: n + d * m,
-                top: n + t * m,
-                width: m,
-                height: m
+                left: a + i * f,
+                top: a + e * f,
+                width: f,
+                height: f
               },
-              "data-well-id": P,
-              children: M(P, m)
+              "data-well-id": A,
+              children: x(A, f)
             },
-            P
+            A
           )
         );
       }
-    return c;
-  }, [M, s.rows, s.columns, m]);
-  return /* @__PURE__ */ g(
+    return n;
+  }, [x, t.rows, t.columns, f]);
+  return /* @__PURE__ */ v(
     "div",
     {
-      ref: C,
-      className: oe("relative w-full select-none", B),
+      ref: K,
+      className: re(
+        // `overflow-x-auto` is load-bearing in narrow containers: once
+        // auto-scaling hits `minCellSize` the SVG stops shrinking, and a dense
+        // plate (384/1536) is wider than a phone. Without it the whole page
+        // scrolls sideways instead.
+        "relative w-full max-w-full select-none overflow-x-auto",
+        // Only a region that actually scrolls becomes a tab stop, so we don't
+        // add a dead stop to the tab order on roomy layouts.
+        Y && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+        J
+      ),
       "data-slot": "plate-paint-grid",
-      children: /* @__PURE__ */ U(
+      "data-scrollable": Y || void 0,
+      tabIndex: Y ? 0 : void 0,
+      role: Y ? "group" : void 0,
+      "aria-label": Y ? De : void 0,
+      children: /* @__PURE__ */ q(
         "div",
         {
-          className: oe(
-            "relative inline-block",
-            f && "rounded-xl border bg-card p-3 shadow-elevation-3"
-          ),
+          className: re("relative inline-block", m && "rounded-xl border bg-card p-3 shadow-elevation-3"),
           "data-slot": "plate-paint-grid-frame",
           children: [
-            /* @__PURE__ */ U(
+            /* @__PURE__ */ q(
               "svg",
               {
-                ref: W,
-                width: Q,
-                height: V,
+                ref: ie,
+                width: B,
+                height: he,
                 className: "block cursor-crosshair",
-                onMouseDown: ce,
-                onMouseMove: ie,
-                onMouseUp: ae,
-                onMouseLeave: ue,
-                onDoubleClick: de,
-                role: "group",
-                "aria-label": `${s.rows} row by ${s.columns} column plate map. Drag to select wells.`,
+                onPointerDown: _e,
+                onPointerMove: xe,
+                onPointerUp: ue,
+                onPointerCancel: ue,
+                onPointerLeave: Re,
+                onDoubleClick: Te,
+                onKeyDown: Ie,
+                onFocus: () => H((n) => n ?? { r: 0, c: 0 }),
+                style: { touchAction: "none" },
+                tabIndex: 0,
+                role: "grid",
+                "aria-label": Fe,
+                "aria-rowcount": t.rows,
+                "aria-colcount": t.columns,
+                "aria-activedescendant": T ? ce(U, T.r, T.c) : void 0,
                 children: [
-                  he,
-                  me,
-                  pe,
-                  ge,
-                  ve
+                  Ne,
+                  $e,
+                  Ce,
+                  We,
+                  Ue
                 ]
               }
             ),
-            M ? /* @__PURE__ */ g(
+            /* @__PURE__ */ v(it, { placement: Oe, layerRef: ve, children: W }),
+            x ? /* @__PURE__ */ v(
               "div",
               {
                 className: "pointer-events-none absolute",
                 style: {
-                  top: f ? z : 0,
-                  left: f ? z : 0,
-                  width: Q,
-                  height: V
+                  top: m ? Z : 0,
+                  left: m ? Z : 0,
+                  width: B,
+                  height: he
                 },
                 "aria-hidden": !0,
                 "data-slot": "plate-well-overlay",
-                children: Ee
+                children: ze
               }
             ) : null
           ]
@@ -381,9 +596,9 @@ function Xe({
   );
 }
 export {
-  Oe as PLATE_MAP_CELL_BORDER,
-  De as PLATE_MAP_EMPTY_WELL_FILL,
-  Xe as PlatePaintGrid,
-  ze as parsePos
+  nt as PLATE_MAP_CELL_BORDER,
+  et as PLATE_MAP_EMPTY_WELL_FILL,
+  wt as PlatePaintGrid,
+  Xe as parsePos
 };
 //# sourceMappingURL=PlatePaintGrid.js.map