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

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

@@ -1,341 +1,423 @@
-import { jsxs as v, jsx as a } from "react/jsx-runtime";
-import * as o from "react";
-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 te(t, n) {
-  const l = `${t}${ee}`;
-  return n.startsWith(l) ? n.slice(l.length) : void 0;
-}
-function wt(t, n) {
-  return { ...t ?? {}, ...n };
-}
-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 At(t, n) {
-  const l = t.find((s) => s.id === n);
-  return l || (n ? void 0 : t[0]);
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as u from "react";
+import { PlateMapActionsMenu as ft } from "./PlateMapActionsMenu.js";
+import { PlateMapForm as ut } from "./PlateMapForm.js";
+import { PlateMapGrid as xt } from "./PlateMapGrid.js";
+import { PlateMapManifest as ht } from "./PlateMapManifest.js";
+import { PlateMapPlateSelector as gt } from "./PlateMapPlateSelector.js";
+import { usePlateMapEditorState as wt, defaultColorForWell as vt } from "./usePlateMapEditorState.js";
+import { getPlateMapScopedWellId as Yt } from "./usePlateMapEditorState.js";
+import { WellQuickPaint as St } from "./WellQuickPaint.js";
+import { Badge as bt } from "../../../ui/badge.js";
+import { Card as T, CardContent as W, CardHeader as K, CardTitle as Y, CardAction as Ct, CardFooter as Et } from "../../../ui/card.js";
+import { cn as w } from "../../../lib/utils.js";
+const Pt = "plateBarcode", yt = "Plate Barcode", Mt = "Sample manifest", Nt = "360px", Dt = {
+  sm: "@min-[640px]:flex-row @min-[640px]:items-start",
+  md: "@min-[768px]:flex-row @min-[768px]:items-start",
+  lg: "@min-[1024px]:flex-row @min-[1024px]:items-start",
+  xl: "@min-[1280px]:flex-row @min-[1280px]:items-start",
+  never: ""
+}, Tt = {
+  sm: "@min-[640px]:w-[var(--plate-map-form-width)] @min-[640px]:shrink-0",
+  md: "@min-[768px]:w-[var(--plate-map-form-width)] @min-[768px]:shrink-0",
+  lg: "@min-[1024px]:w-[var(--plate-map-form-width)] @min-[1024px]:shrink-0",
+  xl: "@min-[1280px]:w-[var(--plate-map-form-width)] @min-[1280px]:shrink-0",
+  never: ""
+};
+function Wt(r, a) {
+  return r > 0 || !!a;
 }
-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 At({ title: r, badges: a }) {
+  return !r && !a ? null : /* @__PURE__ */ x("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+    r ? /* @__PURE__ */ t("h2", { className: "text-lg font-semibold", children: r }) : /* @__PURE__ */ t("span", {}),
+    a ? /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: a }) : null
+  ] });
 }
-function Wt({
-  importedPlates: t,
-  selectedPlateId: n,
-  isControlled: l,
-  providedPlateCount: s
+function It({
+  visible: r,
+  ...a
 }) {
-  const m = t[0]?.id;
-  return m ? t.some((c) => c.id === n) ? void 0 : m : !l && s === 0 ? null : void 0;
-}
-function kt(t, n) {
-  return t > 0 || !!n;
+  return r ? /* @__PURE__ */ t(gt, { ...a }) : null;
 }
-function yt(t, n) {
-  return !t || !!n;
-}
-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 Lt({
+  hidden: r,
+  title: a,
+  cardClassName: b,
+  slot: v,
+  manifest: C
+}) {
+  return r ? null : /* @__PURE__ */ x(T, { size: "sm", "data-plate-map-region": "manifest", className: w("w-full min-w-0", b), children: [
+    a ? /* @__PURE__ */ t(K, { className: "border-b", children: /* @__PURE__ */ t(Y, { children: a }) }) : null,
+    /* @__PURE__ */ t(W, { className: "min-w-0", children: v ?? C })
   ] });
 }
-function $t({
-  format: t,
-  rows: n,
-  columns: l,
-  values: s,
-  onChange: m,
-  selection: c,
-  onSelectionChange: C,
-  fields: M,
-  tableColumns: S,
-  colorForWell: ne,
+function Ut({
+  format: r,
+  rows: a,
+  columns: b,
+  values: v,
+  onChange: C,
+  selection: n,
+  onSelectionChange: E,
+  fields: f,
+  tableColumns: h,
+  colorForWell: $ = vt,
   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,
+  mergeOnApply: J,
+  isPopulated: X,
+  cycleFieldOnWellDoubleClick: Z,
+  quickPaintField: i,
+  staged: q,
+  onStagedChange: ee,
+  title: te,
+  badges: le,
+  banner: ae,
+  legend: P,
+  legendPlacement: I = "form",
+  formExtras: re,
+  formSlot: oe,
+  hideForm: ne = !1,
+  formPlacement: S = "start",
+  stackAt: L = "md",
+  formWidth: y = Nt,
+  footer: _,
+  plateTitle: ie = "Plate",
+  plateToolbar: se,
+  plateBanner: pe,
+  plateFooter: z,
+  plates: de,
+  activePlateId: ce,
+  onPlateChange: me,
+  onAddPlate: F,
+  onRemovePlate: fe,
+  addPlateLabel: ue,
+  removePlateLabel: xe,
+  plateSelectorLabel: he,
+  plateSelectorVariant: ge,
+  plateBarcodeField: B,
+  applyScope: we,
+  plateBarcodeColumnHeader: k = yt,
   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,
+  groups: ve,
+  activeGroupId: Se,
+  onGroupClick: be,
+  renderHoverSummary: Ce,
+  cellSize: Ee,
+  emptyWellFillColor: Pe,
+  wellShape: ye,
+  selectionFillMode: Me,
+  framedPlate: Ne,
+  wrapWell: De,
+  highlightedWellIds: Te,
+  onHoveredWellChange: We,
+  hideSelectionControls: Ae,
+  labels: s,
+  hideManifest: Ie = !1,
+  manifestSlot: Le,
+  manifestTitle: _e = Mt,
+  manifest: M,
+  manifestFilterable: ze,
+  manifestGroupable: Fe,
+  autoScaleGrid: Be,
+  minCellSize: ke,
+  maxCellSize: He,
+  className: Oe,
+  style: Re,
+  classNames: p,
+  ref: Ve,
+  templates: je,
+  templateId: Ge,
+  onTemplateChange: Ue,
+  onClearTemplate: Qe,
+  onImportCsv: O,
+  onExportCsv: Ke,
+  onImportTemplate: Ye,
   onExportTemplate: $e,
-  csvAccept: je,
-  templateAccept: Oe,
-  label: Ue,
-  align: Ve,
-  side: Ge,
-  importTemplateLabel: Ye,
-  exportTemplateLabel: qe,
-  importCsvLabel: Je,
-  exportCsvLabel: Qe,
-  clearLabel: Xe
+  csvAccept: Je,
+  templateAccept: Xe,
+  label: Ze,
+  align: qe,
+  side: et,
+  importTemplateLabel: tt,
+  exportTemplateLabel: lt,
+  importCsvLabel: at,
+  exportCsvLabel: rt,
+  clearLabel: ot
 }) {
-  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) => {
-      P || G(e), E?.(e);
-    },
-    [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
-        });
-        f !== void 0 && (P || G(f ?? void 0), f && E?.(f));
-      }
-      await z?.(e, r);
-    },
-    [P, z, E, N, k]
-  ), b = o.useCallback(
-    (e) => !p || !h ? e : { ...e, [x]: h },
-    [h, x, p]
-  ), w = o.useCallback(
-    (e) => {
-      if (!p || !d) {
-        m(e);
-        return;
-      }
-      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);
-    },
-    [d, p, m, b, J, s]
+  const e = wt({
+    values: v,
+    onChange: C,
+    selection: n,
+    onSelectionChange: E,
+    emptyEntry: A,
+    mergeOnApply: J,
+    staged: q,
+    onStagedChange: ee,
+    fields: f,
+    cycleFieldOnWellDoubleClick: Z,
+    plates: de,
+    activePlateId: ce,
+    onPlateChange: me,
+    plateBarcodeField: B,
+    applyScope: we,
+    onImportCsv: O
+  });
+  u.useImperativeHandle(
+    Ve,
+    () => ({
+      apply: (l) => e.applyStagedToSelection(l),
+      clear: (l) => e.clearWells(l),
+      setStaged: (l) => e.setStaged(l),
+      getStaged: () => e.staged
+    }),
+    [e]
   );
-  o.useEffect(() => {
-    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;
-  }, [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 (!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 }));
-    },
-    [w, u, A, g, b]
-  ), it = o.useMemo(() => !p || !h || H || S.some(
-    (i) => i.field === x || i.id === x
-  ) ? S : [{
-    id: x,
-    header: D,
+  const d = {
+    ...M,
+    filterable: ze ?? M?.filterable,
+    groupable: Fe ?? M?.groupable
+  }, g = B ?? Pt, N = e.activePlate?.barcode, nt = u.useMemo(() => !e.isPlateScoped || !N || H || h.some(
+    (o) => o.field === g || o.id === g
+  ) ? h : [{
+    id: g,
+    header: k,
     minWidth: 150,
-    render: ({ row: i }) => {
-      const f = i[x] ?? h;
-      return /* @__PURE__ */ a(Pt, { variant: "outline", children: String(f) });
+    render: ({ row: o }) => {
+      const m = o[g] ?? N;
+      return /* @__PURE__ */ t(bt, { variant: "outline", children: String(m) });
+    }
+  }, ...h], [
+    N,
+    g,
+    H,
+    e.isPlateScoped,
+    k,
+    h
+  ]), [R, D] = u.useState(!1);
+  u.useEffect(() => D(!1), [n]), u.useEffect(() => {
+    if (!i) return;
+    const l = (c) => {
+      const o = c.target;
+      o?.closest?.("[data-well]") || o?.closest?.('[data-slot="well-quick-paint"]') || D(!0);
+    };
+    return document.addEventListener("pointerdown", l, !0), () => document.removeEventListener("pointerdown", l, !0);
+  }, [i]);
+  const it = u.useMemo(() => {
+    if (!i || n.size === 0 || R) return;
+    const l = f.find((m) => m.key === i);
+    if (l?.kind !== "select" || !l.options?.length) return;
+    let c, o = !0;
+    for (const m of n) {
+      const U = e.scopedValues.get(m)?.[i], Q = typeof U == "string" ? U : void 0;
+      if (o)
+        c = Q, o = !1;
+      else if (c !== Q) {
+        c = void 0;
+        break;
+      }
     }
-  }, ...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,
+    return /* @__PURE__ */ t(
+      St,
+      {
+        options: l.options,
+        activeValue: c,
+        selectionSize: n.size,
+        onPick: (m) => {
+          e.applyToSelection({ [i]: m }), D(!0);
+        }
+      }
+    );
+  }, [f, R, i, n, e]), st = Wt(e.availablePlates.length, F), pt = I === "plate" && P ? /* @__PURE__ */ t("div", { className: "mt-3 border-t pt-3", children: P }) : void 0, V = S === "top" || S === "bottom", dt = S === "start" || S === "top", ct = typeof y == "number" ? `${y}px` : y, j = ne ? null : /* @__PURE__ */ t(
+    T,
+    {
+      "data-plate-map-region": "form",
+      className: w(
+        // Full-width and free to shrink by default; the fixed column width only
+        // applies from `stackAt` up, which is what keeps narrow viewports clean.
+        "flex w-full min-w-0 flex-col",
+        !V && Tt[L],
+        p?.formCard
+      ),
+      size: "sm",
+      children: /* @__PURE__ */ t(W, { className: "flex h-full flex-1 flex-col gap-3", children: /* @__PURE__ */ t(
+        ut,
         {
-          fields: M,
-          value: K,
-          onChange: $,
-          selectionSize: c.size,
-          onApply: ot,
-          onClear: st,
-          extras: ce,
-          legend: ie,
-          formSlot: de
+          fields: f,
+          value: e.staged,
+          onChange: e.setStaged,
+          selectionSize: n.size,
+          onApply: e.applyStagedToSelection,
+          onClear: e.clearWells,
+          applyLabel: s?.apply,
+          clearLabel: s?.clearWells,
+          selectionEmptyLabel: s?.selectionEmpty,
+          selectionCountLabel: s?.selectionCount,
+          extras: re,
+          legend: I === "form" ? P : void 0,
+          formSlot: oe,
+          className: p?.form
         }
-      ) }) }),
-      /* @__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,
+      ) })
+    },
+    "form"
+  ), G = /* @__PURE__ */ x(
+    T,
+    {
+      "data-plate-map-region": "plate",
+      className: w("flex w-full min-w-0 flex-1 flex-col", p?.plateCard),
+      size: "sm",
+      children: [
+        /* @__PURE__ */ x(K, { className: "border-b", children: [
+          /* @__PURE__ */ x("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ t(Y, { className: "min-w-0", children: ie }),
+            /* @__PURE__ */ t(
+              It,
               {
-                plates: W,
-                activePlateId: Y?.id,
-                onPlateChange: dt ? rt : void 0,
-                onAddPlate: I,
-                onRemovePlate: me,
-                addPlateLabel: pe,
-                removePlateLabel: he,
-                label: xe,
-                variant: ve
+                visible: st,
+                plates: e.availablePlates,
+                activePlateId: e.activePlate?.id,
+                onPlateChange: e.canChangePlate ? e.handlePlateChange : void 0,
+                onAddPlate: F,
+                onRemovePlate: fe,
+                addPlateLabel: ue,
+                removePlateLabel: xe,
+                label: he,
+                variant: ge
               }
-            ) : null
+            )
           ] }),
-          /* @__PURE__ */ a(gt, { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ a(
-            mt,
+          /* @__PURE__ */ t(Ct, { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ t(
+            ft,
             {
-              templates: Le,
-              templateId: Re,
-              onTemplateChange: Ie,
-              onClearTemplate: De,
-              hasEntries: s.size > 0,
-              onImportCsv: z ? at : void 0,
-              onExportCsv: He,
-              onImportTemplate: Ke,
+              templates: je,
+              templateId: Ge,
+              onTemplateChange: Ue,
+              onClearTemplate: Qe,
+              hasEntries: v.size > 0,
+              onImportCsv: O ? e.handleImportCsv : void 0,
+              onExportCsv: Ke,
+              onImportTemplate: Ye,
               onExportTemplate: $e,
-              csvAccept: je,
-              templateAccept: Oe,
-              label: Ue,
-              align: Ve,
-              side: Ge,
-              importTemplateLabel: Ye,
-              exportTemplateLabel: qe,
-              importCsvLabel: Je,
-              exportCsvLabel: Qe,
-              clearLabel: Xe
+              csvAccept: Je,
+              templateAccept: Xe,
+              label: Ze,
+              align: qe,
+              side: et,
+              importTemplateLabel: tt,
+              exportTemplateLabel: lt,
+              importCsvLabel: at,
+              exportCsvLabel: rt,
+              clearLabel: ot
             }
           ) })
         ] }),
-        /* @__PURE__ */ a(_, { children: /* @__PURE__ */ a(
-          ht,
+        /* @__PURE__ */ t(W, { className: "min-w-0", children: /* @__PURE__ */ t(
+          xt,
           {
-            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);
+            format: r,
+            rows: a,
+            columns: b,
+            values: e.scopedValues,
+            selection: n,
+            onSelectionChange: E,
+            colorForWell: $,
+            fields: f,
+            renderHoverSummary: Ce,
+            hoveredWellId: e.hoveredWellId,
+            onHoveredWellChange: (l) => {
+              e.setHoveredWellId(l), We?.(l);
             },
-            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
+            banner: pe,
+            toolbar: se,
+            footer: pt,
+            hideSelectionControls: Ae,
+            selectAllLabel: s?.selectAll,
+            deselectAllLabel: s?.deselectAll,
+            emptyWellFillColor: Pe,
+            wellShape: ye,
+            framed: Ne,
+            wrapWell: De,
+            quickPaint: it,
+            highlightedWellIds: Te,
+            onWellDoubleClick: e.cycleWellField,
+            selectionFillMode: Me,
+            flashWellId: e.flashWell?.wellId,
+            flashWellKey: e.flashWell?.key,
+            cellSize: Ee,
+            autoScale: Be,
+            minCellSize: ke,
+            maxCellSize: He,
+            groups: ve,
+            activeGroupId: Se,
+            onGroupClick: be,
+            className: p?.grid
           }
-        ) })
-      ] })
-    ] }),
-    /* @__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: g,
-          onChange: w,
-          columns: it,
-          fields: M,
-          selection: c,
-          onSelectionChange: C,
-          emptyEntry: A,
-          isPopulated: ae,
-          filterable: ye,
-          groupable: ze
-        }
-      ) })
-    ] }),
-    L ? /* @__PURE__ */ a("div", { className: "flex justify-end gap-2 pt-2", children: L }) : null
+        ) }),
+        z ? /* @__PURE__ */ t(Et, { className: "flex flex-wrap items-center gap-2 border-t", children: z }) : null
+      ]
+    },
+    "plate"
+  ), mt = dt ? [j, G] : [G, j];
+  return /* @__PURE__ */ x("div", { "data-slot": "plate-map-editor", className: w("flex w-full min-w-0 flex-col gap-4", Oe), style: Re, children: [
+    /* @__PURE__ */ t(At, { title: te, badges: le }),
+    ae,
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "data-slot": "plate-map-editor-container",
+        className: "@container w-full min-w-0",
+        style: { "--plate-map-form-width": ct },
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "plate-map-editor-layout",
+            className: w(
+              "flex w-full min-w-0 flex-col gap-3",
+              !V && Dt[L],
+              p?.layout
+            ),
+            children: mt
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      Lt,
+      {
+        hidden: Ie,
+        title: _e,
+        cardClassName: p?.manifestCard,
+        slot: Le,
+        manifest: /* @__PURE__ */ t(
+          ht,
+          {
+            values: e.scopedValues,
+            onChange: e.commitScopedValues,
+            columns: nt,
+            fields: f,
+            selection: n,
+            onSelectionChange: E,
+            emptyEntry: A,
+            isPopulated: X,
+            filterable: d.filterable,
+            filterColumns: d.filterColumns,
+            groupable: d.groupable,
+            defaultGroupBy: d.defaultGroupBy,
+            pageSize: d.pageSize,
+            pageSizeOptions: d.pageSizeOptions,
+            enableFillDown: d.enableFillDown,
+            labels: s,
+            className: p?.manifest
+          }
+        )
+      }
+    ),
+    _ ? /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-end gap-2 pt-2", children: _ }) : null
   ] });
 }
 export {
-  Pt as PlateBadge,
-  $t as PlateMapEditor,
-  bt as getPlateMapScopedWellId
+  bt as PlateBadge,
+  Ut as PlateMapEditor,
+  Yt as getPlateMapScopedWellId
 };
 //# sourceMappingURL=PlateMapEditor.js.map