@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.71.1 → 0.5.0-beta.72.1

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

@@ -1,422 +1,341 @@
-import { jsxs as d, jsx as l, Fragment as le } from "react/jsx-runtime";
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
 import * as o from "react";
-import { plateOptionsFromCsvTriage as yt } from "./csvPlateTriage.js";
-import { PlateMapActionsMenu as St } from "./PlateMapActionsMenu.js";
-import { PlateMapPlateSelector as Nt } from "./PlateMapPlateSelector.js";
-import { PlatePaintGrid as wt } from "./PlatePaintGrid.js";
-import { allPositions as Et, resolveDimensions as At } from "./wellGrid.js";
-import { WellManifestTable as Mt } from "./WellManifestTable.js";
-import { WellMetadataForm as Ct } from "./WellMetadataForm.js";
-import { Badge as kt } from "../../ui/badge.js";
-import { Card as j, CardContent as D, CardHeader as te, CardTitle as ne, CardAction as Wt } from "../../ui/card.js";
-import { Separator as ae } from "../../ui/separator.js";
-import { cn as re } from "../../../lib/utils.js";
-const oe = "::", zt = "plateBarcode", Ft = "Plate Barcode";
-function Tt(n, r) {
-  return `${n}${oe}${r}`;
+import { plateOptionsFromCsvTriage as ut } from "./csvPlateTriage.js";
+import { PlateMapActionsMenu as mt } from "./PlateMapActionsMenu.js";
+import { PlateMapForm as pt } from "./PlateMapForm.js";
+import { PlateMapGrid as ht } from "./PlateMapGrid.js";
+import { PlateMapManifest as xt } from "./PlateMapManifest.js";
+import { PlateMapPlateSelector as vt } from "./PlateMapPlateSelector.js";
+import { Badge as Pt } from "../../ui/badge.js";
+import { Card as F, CardContent as _, CardHeader as X, CardTitle as Z, CardAction as gt } from "../../ui/card.js";
+import { cn as Mt } from "../../../lib/utils.js";
+const ee = "::", St = "plateBarcode", Et = "Plate Barcode";
+function bt(t, n) {
+  return `${t}${ee}${n}`;
 }
-function se(n, r) {
-  const s = `${n}${oe}`;
-  return r.startsWith(s) ? r.slice(s.length) : void 0;
+function te(t, n) {
+  const l = `${t}${ee}`;
+  return n.startsWith(l) ? n.slice(l.length) : void 0;
 }
-function Bt(n, r) {
-  return { ...n ?? {}, ...r };
+function wt(t, n) {
+  return { ...t ?? {}, ...n };
 }
-function Lt(n, r) {
-  const s = /* @__PURE__ */ new Map();
-  return n.forEach((i) => s.set(i.id, i)), (r ?? []).forEach((i) => s.set(i.id, i)), [...s.values()];
+function Ct(t, n) {
+  const l = /* @__PURE__ */ new Map();
+  return t.forEach((s) => l.set(s.id, s)), (n ?? []).forEach((s) => l.set(s.id, s)), [...l.values()];
 }
-function _t(n, r) {
-  const s = n.find((i) => i.id === r);
-  return s || (r ? void 0 : n[0]);
+function At(t, n) {
+  const l = t.find((s) => s.id === n);
+  return l || (n ? void 0 : t[0]);
 }
-function jt(n, r) {
-  if (!r) return n;
-  const s = /* @__PURE__ */ new Map();
-  return n.forEach((i, p) => {
-    const u = se(r, p);
-    u && s.set(u, i);
-  }), s;
+function Nt(t, n) {
+  if (!n) return t;
+  const l = /* @__PURE__ */ new Map();
+  return t.forEach((s, m) => {
+    const c = te(n, m);
+    c && l.set(c, s);
+  }), l;
 }
-function Dt({
-  importedPlates: n,
-  selectedPlateId: r,
-  isControlled: s,
-  providedPlateCount: i
+function Wt({
+  importedPlates: t,
+  selectedPlateId: n,
+  isControlled: l,
+  providedPlateCount: s
 }) {
-  const p = n[0]?.id;
-  return p ? n.some((u) => u.id === r) ? void 0 : p : !s && i === 0 ? null : void 0;
+  const m = t[0]?.id;
+  return m ? t.some((c) => c.id === n) ? void 0 : m : !l && s === 0 ? null : void 0;
 }
-function Rt(n, r) {
-  return n > 0 || !!r;
+function kt(t, n) {
+  return t > 0 || !!n;
 }
-function It(n, r) {
-  return !n || !!r;
+function yt(t, n) {
+  return !t || !!n;
 }
-function Ht({ title: n, badges: r }) {
-  return !n && !r ? null : /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-    n ? /* @__PURE__ */ l("h2", { className: "text-lg font-semibold", children: n }) : /* @__PURE__ */ l("span", {}),
-    r ? /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-2", children: r }) : null
+function zt({ title: t, badges: n }) {
+  return !t && !n ? null : /* @__PURE__ */ v("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+    t ? /* @__PURE__ */ a("h2", { className: "text-lg font-semibold", children: t }) : /* @__PURE__ */ a("span", {}),
+    n ? /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2", children: n }) : null
   ] });
 }
-function Kt({ legend: n }) {
-  return n ? /* @__PURE__ */ d(le, { children: [
-    /* @__PURE__ */ l(ae, {}),
-    n
-  ] }) : null;
-}
-function tn({
-  format: n,
-  rows: r,
-  columns: s,
-  values: i,
-  onChange: p,
-  selection: u,
-  onSelectionChange: P,
-  fields: y,
+function $t({
+  format: t,
+  rows: n,
+  columns: l,
+  values: s,
+  onChange: m,
+  selection: c,
+  onSelectionChange: C,
+  fields: M,
   tableColumns: S,
-  colorForWell: ie,
-  emptyEntry: C,
-  mergeOnApply: ce,
-  isPopulated: de,
-  cycleFieldOnWellDoubleClick: F,
-  title: ue,
-  badges: fe,
-  banner: me,
-  legend: pe,
-  formExtras: xe,
-  formSlot: he,
-  footer: R,
-  plateTitle: ve = "Plate",
-  plateToolbar: be,
-  plates: k,
-  activePlateId: I,
-  onPlateChange: N,
-  onAddPlate: H,
-  onRemovePlate: Pe,
-  addPlateLabel: ge,
-  removePlateLabel: ye,
-  plateSelectorLabel: Se,
-  plateSelectorVariant: Ne,
-  plateBarcodeField: we,
-  plateBarcodeColumnHeader: K = Ft,
-  hidePlateBarcodeColumn: $ = !1,
-  groups: T,
-  activeGroupId: Ee,
-  onGroupClick: Ae,
-  renderHoverSummary: Me,
-  cellSize: Ce,
-  emptyWellFillColor: ke,
-  wellShape: We,
-  framedPlate: ze,
-  wrapWell: Fe,
-  highlightedWellIds: Te,
-  onHoveredWellChange: Be,
-  manifestFilterable: Le,
-  manifestGroupable: _e,
-  autoScaleGrid: je,
-  minCellSize: De,
-  maxCellSize: Re,
-  className: Ie,
-  templates: He,
-  templateId: Ke,
-  onTemplateChange: $e,
-  onClearTemplate: Oe,
-  onImportCsv: B,
-  onExportCsv: Ue,
-  onImportTemplate: Ve,
-  onExportTemplate: Ge,
-  csvAccept: Ye,
-  templateAccept: qe,
-  label: Je,
-  align: Qe,
-  side: Xe,
-  importTemplateLabel: Ze,
-  exportTemplateLabel: et,
-  importCsvLabel: tt,
-  exportCsvLabel: nt,
-  clearLabel: rt
+  colorForWell: ne,
+  emptyEntry: A,
+  mergeOnApply: re,
+  isPopulated: ae,
+  cycleFieldOnWellDoubleClick: y,
+  title: oe,
+  badges: se,
+  banner: le,
+  legend: ie,
+  formExtras: ce,
+  formSlot: de,
+  footer: L,
+  plateTitle: fe = "Plate",
+  plateToolbar: ue,
+  plates: N,
+  activePlateId: R,
+  onPlateChange: E,
+  onAddPlate: I,
+  onRemovePlate: me,
+  addPlateLabel: pe,
+  removePlateLabel: he,
+  plateSelectorLabel: xe,
+  plateSelectorVariant: ve,
+  plateBarcodeField: Pe,
+  plateBarcodeColumnHeader: D = Et,
+  hidePlateBarcodeColumn: H = !1,
+  groups: ge,
+  activeGroupId: Me,
+  onGroupClick: Se,
+  renderHoverSummary: Ee,
+  cellSize: be,
+  emptyWellFillColor: we,
+  wellShape: Ce,
+  framedPlate: Ae,
+  wrapWell: Ne,
+  highlightedWellIds: We,
+  onHoveredWellChange: ke,
+  manifestFilterable: ye,
+  manifestGroupable: ze,
+  autoScaleGrid: Te,
+  minCellSize: Be,
+  maxCellSize: Fe,
+  className: _e,
+  templates: Le,
+  templateId: Re,
+  onTemplateChange: Ie,
+  onClearTemplate: De,
+  onImportCsv: z,
+  onExportCsv: He,
+  onImportTemplate: Ke,
+  onExportTemplate: $e,
+  csvAccept: je,
+  templateAccept: Oe,
+  label: Ue,
+  align: Ve,
+  side: Ge,
+  importTemplateLabel: Ye,
+  exportTemplateLabel: qe,
+  importCsvLabel: Je,
+  exportCsvLabel: Qe,
+  clearLabel: Xe
 }) {
-  const lt = At(n, r, s), [O, U] = o.useState({}), [w, V] = o.useState(null), [G, Y] = o.useState(), [q, at] = o.useState([]), [ot, J] = o.useState(), st = ce ?? Bt, W = o.useMemo(() => Lt(q, k), [q, k]), g = I !== void 0, z = I ?? ot, Q = o.useMemo(
-    () => _t(W, z),
-    [W, z]
-  ), h = Q?.barcode, f = h, x = !!f, v = we ?? zt, X = o.useRef(f), b = o.useMemo(() => jt(i, f), [f, i]), Z = o.useCallback(
-    (e) => !x || !f ? e : Tt(f, e),
-    [f, x]
-  ), it = o.useCallback(
+  const [K, $] = o.useState({}), [Ze, j] = o.useState(null), [O, U] = o.useState(), [V, et] = o.useState([]), [tt, G] = o.useState(), nt = re ?? wt, W = o.useMemo(() => Ct(V, N), [V, N]), P = R !== void 0, k = R ?? tt, Y = o.useMemo(
+    () => At(W, k),
+    [W, k]
+  ), h = Y?.barcode, d = h, p = !!d, x = Pe ?? St, q = o.useRef(d), g = o.useMemo(() => Nt(s, d), [d, s]), J = o.useCallback(
+    (e) => !p || !d ? e : bt(d, e),
+    [d, p]
+  ), rt = o.useCallback(
     (e) => {
-      g || J(e), N?.(e);
+      P || G(e), E?.(e);
     },
-    [g, N]
-  ), ct = o.useCallback(
-    async (e, t) => {
-      if (t) {
-        const a = yt(t);
-        at(a);
-        const c = Dt({
-          importedPlates: a,
-          selectedPlateId: z,
-          isControlled: g,
-          providedPlateCount: k?.length ?? 0
+    [P, E]
+  ), at = o.useCallback(
+    async (e, r) => {
+      if (r) {
+        const i = ut(r);
+        et(i);
+        const f = Wt({
+          importedPlates: i,
+          selectedPlateId: k,
+          isControlled: P,
+          providedPlateCount: N?.length ?? 0
         });
-        c !== void 0 && (g || J(c ?? void 0), c && N?.(c));
+        f !== void 0 && (P || G(f ?? void 0), f && E?.(f));
       }
-      await B?.(e, t);
+      await z?.(e, r);
     },
-    [g, B, N, k, z]
-  ), E = o.useCallback(
-    (e) => !x || !h ? e : { ...e, [v]: h },
-    [h, v, x]
-  ), A = o.useCallback(
+    [P, z, E, N, k]
+  ), b = o.useCallback(
+    (e) => !p || !h ? e : { ...e, [x]: h },
+    [h, x, p]
+  ), w = o.useCallback(
     (e) => {
-      if (!x || !f) {
-        p(e);
+      if (!p || !d) {
+        m(e);
         return;
       }
-      const t = new Map(i);
-      [...t.keys()].forEach((a) => {
-        se(f, a) && t.delete(a);
-      }), e.forEach((a, c) => {
-        t.set(Z(c), E(a));
-      }), p(t);
+      const r = new Map(s);
+      [...r.keys()].forEach((i) => {
+        te(d, i) && r.delete(i);
+      }), e.forEach((i, f) => {
+        r.set(J(f), b(i));
+      }), m(r);
     },
-    [f, x, p, E, Z, i]
+    [d, p, m, b, J, s]
   );
   o.useEffect(() => {
-    X.current !== f && (X.current = f, U({}), V(null), Y(void 0), u.size > 0 && P(/* @__PURE__ */ new Set()));
-  }, [f, P, u.size]);
-  const m = o.useMemo(() => {
-    if (!F) return;
-    const e = y.find((t) => t.key === F);
+    q.current !== d && (q.current = d, $({}), j(null), U(void 0), c.size > 0 && C(/* @__PURE__ */ new Set()));
+  }, [d, C, c.size]);
+  const u = o.useMemo(() => {
+    if (!y) return;
+    const e = M.find((r) => r.key === y);
     if (!(e?.kind !== "select" || !e.options?.length))
       return e;
-  }, [F, y]), dt = () => {
-    if (u.size === 0) return;
-    const e = new Map(b);
-    u.forEach((t) => {
-      const c = e.get(t) ?? C(t), M = E(st(c, O, t));
-      e.set(t, M);
-    }), A(e);
-  }, ut = () => {
-    if (u.size === 0) return;
-    const e = new Map(b);
-    u.forEach((t) => e.delete(t)), A(e);
-  }, ft = o.useCallback(
+  }, [y, M]), ot = () => {
+    if (c.size === 0) return;
+    const e = new Map(g);
+    c.forEach((r) => {
+      const f = e.get(r) ?? A(r), T = b(nt(f, K, r));
+      e.set(r, T);
+    }), w(e);
+  }, st = () => {
+    if (c.size === 0) return;
+    const e = new Map(g);
+    c.forEach((r) => e.delete(r)), w(e);
+  }, lt = o.useCallback(
     (e) => {
-      if (!m?.options?.length) return;
-      const t = new Map(b), a = t.get(e), c = a?.[m.key], M = m.options.findIndex((_) => _.value === c), ee = m.options[(M + 1) % m.options.length];
-      if (!ee) return;
-      const gt = a ?? C(e);
-      t.set(e, E({ ...gt, [m.key]: ee.value })), A(t), Y((_) => ({ wellId: e, key: (_?.key ?? 0) + 1 }));
+      if (!u?.options?.length) return;
+      const r = new Map(g), i = r.get(e), f = i?.[u.key], T = u.options.findIndex((B) => B.value === f), Q = u.options[(T + 1) % u.options.length];
+      if (!Q) return;
+      const ft = i ?? A(e);
+      r.set(e, b({ ...ft, [u.key]: Q.value })), w(r), U((B) => ({ wellId: e, key: (B?.key ?? 0) + 1 }));
     },
-    [A, m, C, b, E]
-  ), mt = () => {
-    P(new Set(Et(lt)));
-  }, pt = () => P(/* @__PURE__ */ new Set()), L = w ? b.get(w) : void 0, xt = L ? y.map((e) => {
-    const t = L[e.key];
-    if (t == null || t === "") return null;
-    if (e.kind === "select")
-      return (e.options ?? []).find((c) => c.value === t)?.label ?? String(t);
-    if (e.kind === "multiselect") {
-      const a = Array.isArray(t) ? t : [];
-      return a.length === 0 ? null : a.map((c) => (e.options ?? []).find((M) => M.value === c)?.label ?? c).join(", ");
-    }
-    return e.kind === "boolean" ? t ? e.label : null : String(t);
-  }).filter(Boolean) : [], ht = w ? Me?.(L, w) ?? [w, ...xt].join(" • ") : " ", vt = o.useMemo(() => !x || !h || $ || S.some(
-    (a) => a.field === v || a.id === v
+    [w, u, A, g, b]
+  ), it = o.useMemo(() => !p || !h || H || S.some(
+    (i) => i.field === x || i.id === x
   ) ? S : [{
-    id: v,
-    header: K,
+    id: x,
+    header: D,
     minWidth: 150,
-    render: ({ row: a }) => {
-      const c = a[v] ?? h;
-      return /* @__PURE__ */ l(kt, { variant: "outline", children: String(c) });
+    render: ({ row: i }) => {
+      const f = i[x] ?? h;
+      return /* @__PURE__ */ a(Pt, { variant: "outline", children: String(f) });
     }
-  }, ...S], [h, v, $, x, K, S]), bt = Rt(W.length, H), Pt = It(g, N);
-  return /* @__PURE__ */ d("div", { "data-slot": "plate-map-editor", className: re("flex flex-col gap-4", Ie), children: [
-    /* @__PURE__ */ l(Ht, { title: ue, badges: fe }),
-    me,
-    /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-3 md:flex-nowrap", children: [
-      /* @__PURE__ */ l(j, { className: "flex w-full max-w-[360px] min-w-[300px] basis-[360px] flex-col", size: "sm", children: /* @__PURE__ */ d(D, { className: "flex h-full flex-1 flex-col gap-3", children: [
-        he ?? /* @__PURE__ */ l(
-          Ct,
-          {
-            fields: y,
-            value: O,
-            onChange: U,
-            selectionSize: u.size,
-            onApply: dt,
-            onClear: ut,
-            extras: xe
-          }
-        ),
-        /* @__PURE__ */ l(Kt, { legend: pe })
-      ] }) }),
-      /* @__PURE__ */ d(j, { className: "flex min-w-[360px] flex-1 flex-col", size: "sm", children: [
-        /* @__PURE__ */ d(te, { className: "border-b", children: [
-          /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ l(ne, { className: "min-w-0", children: ve }),
-            bt ? /* @__PURE__ */ l(
-              Nt,
+  }, ...S], [h, x, H, p, D, S]), ct = kt(W.length, I), dt = yt(P, E);
+  return /* @__PURE__ */ v("div", { "data-slot": "plate-map-editor", className: Mt("flex flex-col gap-4", _e), children: [
+    /* @__PURE__ */ a(zt, { title: oe, badges: se }),
+    le,
+    /* @__PURE__ */ v("div", { className: "flex flex-wrap gap-3 md:flex-nowrap", children: [
+      /* @__PURE__ */ a(F, { className: "flex w-full max-w-[360px] min-w-[300px] basis-[360px] flex-col", size: "sm", children: /* @__PURE__ */ a(_, { className: "flex h-full flex-1 flex-col gap-3", children: /* @__PURE__ */ a(
+        pt,
+        {
+          fields: M,
+          value: K,
+          onChange: $,
+          selectionSize: c.size,
+          onApply: ot,
+          onClear: st,
+          extras: ce,
+          legend: ie,
+          formSlot: de
+        }
+      ) }) }),
+      /* @__PURE__ */ v(F, { className: "flex min-w-[360px] flex-1 flex-col", size: "sm", children: [
+        /* @__PURE__ */ v(X, { className: "border-b", children: [
+          /* @__PURE__ */ v("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ a(Z, { className: "min-w-0", children: fe }),
+            ct ? /* @__PURE__ */ a(
+              vt,
               {
                 plates: W,
-                activePlateId: Q?.id,
-                onPlateChange: Pt ? it : void 0,
-                onAddPlate: H,
-                onRemovePlate: Pe,
-                addPlateLabel: ge,
-                removePlateLabel: ye,
-                label: Se,
-                variant: Ne
+                activePlateId: Y?.id,
+                onPlateChange: dt ? rt : void 0,
+                onAddPlate: I,
+                onRemovePlate: me,
+                addPlateLabel: pe,
+                removePlateLabel: he,
+                label: xe,
+                variant: ve
               }
             ) : null
           ] }),
-          /* @__PURE__ */ l(Wt, { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ l(
-            St,
+          /* @__PURE__ */ a(gt, { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ a(
+            mt,
             {
-              templates: He,
-              templateId: Ke,
-              onTemplateChange: $e,
-              onClearTemplate: Oe,
-              hasEntries: i.size > 0,
-              onImportCsv: B ? ct : void 0,
-              onExportCsv: Ue,
-              onImportTemplate: Ve,
-              onExportTemplate: Ge,
-              csvAccept: Ye,
-              templateAccept: qe,
-              label: Je,
-              align: Qe,
-              side: Xe,
-              importTemplateLabel: Ze,
-              exportTemplateLabel: et,
-              importCsvLabel: tt,
-              exportCsvLabel: nt,
-              clearLabel: rt
+              templates: Le,
+              templateId: Re,
+              onTemplateChange: Ie,
+              onClearTemplate: De,
+              hasEntries: s.size > 0,
+              onImportCsv: z ? at : void 0,
+              onExportCsv: He,
+              onImportTemplate: Ke,
+              onExportTemplate: $e,
+              csvAccept: je,
+              templateAccept: Oe,
+              label: Ue,
+              align: Ve,
+              side: Ge,
+              importTemplateLabel: Ye,
+              exportTemplateLabel: qe,
+              importCsvLabel: Je,
+              exportCsvLabel: Qe,
+              clearLabel: Xe
             }
           ) })
         ] }),
-        /* @__PURE__ */ d(D, { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center justify-start gap-3", children: [
-            be,
-            /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-xs", children: [
-              /* @__PURE__ */ l(
-                "button",
-                {
-                  type: "button",
-                  className: "font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",
-                  onClick: mt,
-                  children: "Select all"
-                }
-              ),
-              /* @__PURE__ */ l("span", { className: "text-muted-foreground/60", children: "·" }),
-              /* @__PURE__ */ l(
-                "button",
-                {
-                  type: "button",
-                  className: "font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",
-                  onClick: pt,
-                  children: "Deselect all"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ l("div", { className: "h-5 text-xs text-muted-foreground", children: ht }),
-          /* @__PURE__ */ l(
-            wt,
-            {
-              format: n,
-              rows: r,
-              columns: s,
-              values: b,
-              selection: u,
-              onSelectionChange: P,
-              colorForWell: ie,
-              emptyWellFillColor: ke,
-              wellShape: We,
-              framed: ze,
-              wrapWell: Fe,
-              highlightedWellIds: Te,
-              onWellHover: (e) => {
-                V(e), Be?.(e);
-              },
-              onWellDoubleClick: m ? ft : void 0,
-              selectionFillMode: m ? "well" : "selection",
-              flashWellId: G?.wellId,
-              flashWellKey: G?.key,
-              cellSize: Ce,
-              autoScale: je,
-              minCellSize: De,
-              maxCellSize: Re
-            }
-          ),
-          T && T.length > 0 ? /* @__PURE__ */ d(le, { children: [
-            /* @__PURE__ */ l(ae, { className: "mt-2" }),
-            /* @__PURE__ */ l("div", { className: "flex max-h-28 flex-wrap gap-3 overflow-y-auto pt-1", children: T.map((e) => {
-              const t = e.id === Ee, a = e.count ?? e.wellIds?.length;
-              return /* @__PURE__ */ d(
-                "button",
-                {
-                  type: "button",
-                  disabled: e.disabled,
-                  onClick: () => Ae?.(e),
-                  className: re(
-                    "flex w-16 flex-col items-center gap-1 rounded-md px-1 py-1 text-center text-xs transition-colors",
-                    "text-muted-foreground hover:bg-muted/60",
-                    t && "bg-muted text-foreground ring-1 ring-primary/40",
-                    e.disabled && "pointer-events-none opacity-50"
-                  ),
-                  title: e.label,
-                  children: [
-                    /* @__PURE__ */ l(
-                      "span",
-                      {
-                        className: "size-7 rounded-full border",
-                        style: {
-                          backgroundColor: e.color,
-                          borderColor: e.borderColor
-                        },
-                        "aria-hidden": !0
-                      }
-                    ),
-                    /* @__PURE__ */ l("span", { className: "w-full truncate text-foreground", children: e.label }),
-                    a === void 0 ? null : /* @__PURE__ */ d("span", { className: "text-[0.7rem] leading-none text-muted-foreground", children: [
-                      a,
-                      " wells"
-                    ] })
-                  ]
-                },
-                e.id
-              );
-            }) })
-          ] }) : null
-        ] })
+        /* @__PURE__ */ a(_, { children: /* @__PURE__ */ a(
+          ht,
+          {
+            format: t,
+            rows: n,
+            columns: l,
+            values: g,
+            selection: c,
+            onSelectionChange: C,
+            colorForWell: ne,
+            fields: M,
+            renderHoverSummary: Ee,
+            hoveredWellId: Ze,
+            onHoveredWellChange: (e) => {
+              j(e), ke?.(e);
+            },
+            toolbar: ue,
+            emptyWellFillColor: we,
+            wellShape: Ce,
+            framed: Ae,
+            wrapWell: Ne,
+            highlightedWellIds: We,
+            onWellDoubleClick: u ? lt : void 0,
+            selectionFillMode: u ? "well" : "selection",
+            flashWellId: O?.wellId,
+            flashWellKey: O?.key,
+            cellSize: be,
+            autoScale: Te,
+            minCellSize: Be,
+            maxCellSize: Fe,
+            groups: ge,
+            activeGroupId: Me,
+            onGroupClick: Se
+          }
+        ) })
       ] })
     ] }),
-    /* @__PURE__ */ d(j, { size: "sm", children: [
-      /* @__PURE__ */ l(te, { className: "border-b", children: /* @__PURE__ */ l(ne, { children: "Sample manifest" }) }),
-      /* @__PURE__ */ l(D, { children: /* @__PURE__ */ l(
-        Mt,
+    /* @__PURE__ */ v(F, { size: "sm", children: [
+      /* @__PURE__ */ a(X, { className: "border-b", children: /* @__PURE__ */ a(Z, { children: "Sample manifest" }) }),
+      /* @__PURE__ */ a(_, { children: /* @__PURE__ */ a(
+        xt,
         {
-          values: b,
-          onChange: A,
-          columns: vt,
-          fields: y,
-          selection: u,
-          onSelectionChange: P,
-          emptyEntry: C,
-          isPopulated: de,
-          filterable: Le,
-          groupable: _e
+          values: g,
+          onChange: w,
+          columns: it,
+          fields: M,
+          selection: c,
+          onSelectionChange: C,
+          emptyEntry: A,
+          isPopulated: ae,
+          filterable: ye,
+          groupable: ze
         }
       ) })
     ] }),
-    R ? /* @__PURE__ */ l("div", { className: "flex justify-end gap-2 pt-2", children: R }) : null
+    L ? /* @__PURE__ */ a("div", { className: "flex justify-end gap-2 pt-2", children: L }) : null
   ] });
 }
 export {
-  kt as PlateBadge,
-  tn as PlateMapEditor,
-  Tt as getPlateMapScopedWellId
+  Pt as PlateBadge,
+  $t as PlateMapEditor,
+  bt as getPlateMapScopedWellId
 };
 //# sourceMappingURL=PlateMapEditor.js.map