@tetrascience-npm/tetrascience-react-ui 0.5.0 → 0.6.0-beta.79.1

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

@@ -0,0 +1,389 @@
+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(
+        "text",
+        {
+          x: n + o * l + l / 2,
+          y: n / 2,
+          textAnchor: "middle",
+          fontSize: le,
+          className: "fill-muted-foreground",
+          children: o + 1
+        },
+        `c${o}`
+      )
+    );
+  return r;
+}
+function Ce(i, l) {
+  const r = [];
+  for (let o = 0; o < i; o++)
+    r.push(
+      /* @__PURE__ */ g(
+        "text",
+        {
+          x: n - Te,
+          y: n + o * l + l / 2 + xe,
+          textAnchor: "end",
+          fontSize: le,
+          className: "fill-muted-foreground",
+          children: _e(o)
+        },
+        `r${o}`
+      )
+    );
+  return r;
+}
+function We(i, l, r) {
+  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(
+      "circle",
+      {
+        cx: O,
+        cy: A,
+        r: S,
+        fill: x,
+        fillOpacity: R,
+        stroke: "none",
+        "data-well": h,
+        "data-selected": y ? "true" : void 0
+      },
+      h
+    );
+  }
+  return /* @__PURE__ */ g(
+    "rect",
+    {
+      x: n + r * e,
+      y: n + l * e,
+      width: e,
+      height: e,
+      fill: x,
+      fillOpacity: R,
+      stroke: "none",
+      "data-well": h,
+      "data-selected": y ? "true" : void 0
+    },
+    h
+  );
+}
+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 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(
+        "line",
+        {
+          x1: f,
+          y1: v,
+          x2: f,
+          y2: L,
+          stroke: r,
+          strokeWidth: Z,
+          vectorEffect: "non-scaling-stroke",
+          shapeRendering: "crispEdges",
+          pointerEvents: "none",
+          "data-plate-grid-line": `column-${u}`
+        },
+        `grid-col-${u}`
+      )
+    );
+  }
+  for (let u = 0; u <= i.rows; u++) {
+    const f = n + u * l;
+    o.push(
+      /* @__PURE__ */ g(
+        "line",
+        {
+          x1: e,
+          y1: f,
+          x2: k,
+          y2: f,
+          stroke: r,
+          strokeWidth: Z,
+          vectorEffect: "non-scaling-stroke",
+          shapeRendering: "crispEdges",
+          pointerEvents: "none",
+          "data-plate-grid-line": `row-${u}`
+        },
+        `grid-row-${u}`
+      )
+    );
+  }
+  return o;
+}
+function $e(i, l, r) {
+  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(
+      "animate",
+      {
+        attributeName: "stroke-width",
+        values: `${ne};${se}`,
+        dur: `${Y}ms`,
+        fill: "freeze"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ U("g", { children: [
+    h ? M({
+      fill: "none",
+      stroke: L,
+      strokeWidth: se,
+      "data-well-selection": p
+    }) : null,
+    y ? M({
+      fill: "none",
+      stroke: T,
+      strokeWidth: Re,
+      "data-well-highlight": p
+    }) : null,
+    b ? M(
+      {
+        fill: L,
+        fillOpacity: 0.24,
+        stroke: L,
+        strokeOpacity: 0.92,
+        strokeWidth: ne,
+        "data-well-flash": p
+      },
+      B,
+      `${p}-${f}`
+    ) : null
+  ] }, `overlay-${p}`);
+}
+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);
+    }
+  return r;
+}
+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
+}) {
+  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 };
+    },
+    [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(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: n + d * m,
+                top: n + t * m,
+                width: m,
+                height: m
+              },
+              "data-well-id": P,
+              children: M(P, m)
+            },
+            P
+          )
+        );
+      }
+    return c;
+  }, [M, s.rows, s.columns, m]);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: C,
+      className: oe("relative w-full select-none", B),
+      "data-slot": "plate-paint-grid",
+      children: /* @__PURE__ */ U(
+        "div",
+        {
+          className: oe(
+            "relative inline-block",
+            f && "rounded-xl border bg-card p-3 shadow-sm"
+          ),
+          "data-slot": "plate-paint-grid-frame",
+          children: [
+            /* @__PURE__ */ U(
+              "svg",
+              {
+                ref: W,
+                width: Q,
+                height: V,
+                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.`,
+                children: [
+                  he,
+                  me,
+                  pe,
+                  ge,
+                  ve
+                ]
+              }
+            ),
+            M ? /* @__PURE__ */ g(
+              "div",
+              {
+                className: "pointer-events-none absolute",
+                style: {
+                  top: f ? z : 0,
+                  left: f ? z : 0,
+                  width: Q,
+                  height: V
+                },
+                "aria-hidden": !0,
+                "data-slot": "plate-well-overlay",
+                children: Ee
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Oe as PLATE_MAP_CELL_BORDER,
+  De as PLATE_MAP_EMPTY_WELL_FILL,
+  Xe as PlatePaintGrid,
+  ze as parsePos
+};
+//# sourceMappingURL=PlatePaintGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlatePaintGrid.js","sources":["../../../../src/components/composed/PlateMapEditor/PlatePaintGrid.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { parsePos, pos, rectPositions, resolveDimensions, rowLabel } from \"./wellGrid\";\n\nimport type { PlateDimensions, PlateFormat, WellId, WellRecord } from \"./types\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst DEFAULT_CELL = 34;\nconst DEFAULT_MIN_AUTO_CELL = 24;\nconst DEFAULT_MAX_AUTO_CELL = 72;\nconst DEFAULT_MAX_DENSE_AUTO_CELL = 36;\nconst LABEL_PAD = 26;\nconst FRAME_PADDING_PX = 12;\nconst FRAME_BORDER_PX = 1;\nconst LABEL_FONT_SIZE = 16;\nconst LABEL_TEXT_INSET = 9;\nconst LABEL_BASELINE_OFFSET = 5;\nconst WELL_INSET = 1;\nconst STROKE_DEFAULT = 4;\nconst STROKE_SELECTED = 4;\nconst STROKE_HIGHLIGHT = 3;\nconst STROKE_FLASH = 5;\nconst FLASH_DURATION_MS = 650;\nexport const PLATE_MAP_EMPTY_WELL_FILL = \"var(--surface-container)\";\nexport const PLATE_MAP_CELL_BORDER = \"var(--border)\";\n\nexport type WellShape = \"rect\" | \"circle\";\n\nexport interface PlatePaintGridProps<T extends WellRecord = WellRecord> {\n  format: PlateFormat;\n  rows?: number;\n  columns?: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  onSelectionChange: (next: Set<WellId>) => void;\n  /** Returns the fill color for a given well record (or undefined if empty). */\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */\n  emptyWellFillColor?: string | null;\n  /** Geometric shape of each well. `\"circle\"` matches scientific plate visuals. Defaults to `\"rect\"`. */\n  wellShape?: WellShape;\n  /**\n   * When true, wraps the grid in a card-like surface (rounded, bordered,\n   * padded, soft shadow) so it reads as a physical plate. Pairs well with\n   * `wellShape=\"circle\"`.\n   */\n  framed?: boolean;\n  /** Pixel size of each well cell. Defaults to 34 when fixed. */\n  cellSize?: number;\n  /** Resize wells to fill available width when `cellSize` is not fixed. */\n  autoScale?: boolean;\n  minCellSize?: number;\n  /** Defaults to 72 for 96-well style plates and 36 for denser plates. */\n  maxCellSize?: number;\n  /** Stroke color for non-selected wells. Defaults to a light border. */\n  borderColor?: string;\n  /** Stroke color for selected wells. Defaults to the kit primary blue. */\n  selectedBorderColor?: string;\n  /** Fill color for selected wells. Defaults to the kit primary blue. */\n  selectedFillColor?: string;\n  /** Selected fill opacity. */\n  selectedFillOpacity?: number;\n  /** Whether selected wells use the selection fill or keep their assigned well color. */\n  selectionFillMode?: \"selection\" | \"well\";\n  /** Well id that should briefly flash, usually after a double-click assignment. */\n  flashWellId?: WellId;\n  /** Changing this value restarts the flash animation for the same well. */\n  flashWellKey?: number;\n  /**\n   * Well ids that should render with a highlight ring. Used for cross-component\n   * hover sync (e.g. hovering a legend item to highlight matching wells).\n   */\n  highlightedWellIds?: ReadonlySet<WellId>;\n  /** Stroke color for highlighted wells. Defaults to the kit primary blue. */\n  highlightBorderColor?: string;\n  onWellHover?: (wellId: WellId | null) => void;\n  onWellDoubleClick?: (wellId: WellId) => void;\n  /**\n   * Optional render-prop invoked once per well. The returned node is placed\n   * inside an absolutely-positioned cell on top of the SVG, sized to\n   * `cellSize`. The wrapper layer is `pointer-events: none` so the SVG keeps\n   * pointer interaction by default; consumers wiring drop targets are expected\n   * to set `pointer-events: auto` on their own element while a drag is active.\n   */\n  wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;\n  className?: string;\n}\n\ntype DragMode = \"replace\" | \"add\" | \"remove\";\n\ninterface DragState {\n  start: { r: number; c: number };\n  cur: { r: number; c: number };\n  mode: DragMode;\n}\n\nfunction buildColumnLabels(columns: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let c = 0; c < columns; c++) {\n    labels.push(\n      <text\n        key={`c${c}`}\n        x={LABEL_PAD + c * cellSize + cellSize / 2}\n        y={LABEL_PAD / 2}\n        textAnchor=\"middle\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {c + 1}\n      </text>,\n    );\n  }\n  return labels;\n}\n\nfunction buildRowLabels(rows: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let r = 0; r < rows; r++) {\n    labels.push(\n      <text\n        key={`r${r}`}\n        x={LABEL_PAD - LABEL_TEXT_INSET}\n        y={LABEL_PAD + r * cellSize + cellSize / 2 + LABEL_BASELINE_OFFSET}\n        textAnchor=\"end\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {rowLabel(r)}\n      </text>,\n    );\n  }\n  return labels;\n}\n\ninterface BuildWellCellsArgs<T extends WellRecord> {\n  dims: PlateDimensions;\n  cellSize: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  dragPositions: Set<WellId>;\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  emptyWellFillColor: string | null;\n  borderColor: string;\n  selectedBorderColor: string;\n  selectedFillColor: string;\n  selectedFillOpacity: number;\n  selectionFillMode: \"selection\" | \"well\";\n  wellShape: WellShape;\n  highlightedWellIds: ReadonlySet<WellId>;\n  highlightBorderColor: string;\n  flashWellId?: WellId;\n  flashWellKey?: number;\n}\n\nfunction buildWellCell<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const entry = values.get(id);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const wellFill = entry === undefined && emptyWellFillColor !== null ? emptyWellFillColor : colorForWell(entry, id);\n  const usesWellFill = isSelected && selectionFillMode === \"well\" && entry !== undefined;\n  const usesSelectionFill = isSelected && !usesWellFill;\n  const fill = usesSelectionFill ? selectedFillColor : wellFill;\n  const fillOpacity = usesSelectionFill ? selectedFillOpacity : undefined;\n\n  if (wellShape === \"circle\") {\n    const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n    const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n    const r = cellSize / 2 - WELL_INSET;\n    return (\n      <circle\n        key={id}\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        stroke=\"none\"\n        data-well={id}\n        data-selected={isSelected ? \"true\" : undefined}\n      />\n    );\n  }\n\n  return (\n    <rect\n      key={id}\n      x={LABEL_PAD + column * cellSize}\n      y={LABEL_PAD + row * cellSize}\n      width={cellSize}\n      height={cellSize}\n      fill={fill}\n      fillOpacity={fillOpacity}\n      stroke=\"none\"\n      data-well={id}\n      data-selected={isSelected ? \"true\" : undefined}\n    />\n  );\n}\n\nfunction buildWellCells<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const cells: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      cells.push(buildWellCell({ dims, ...args }, r, c));\n    }\n  }\n  return cells;\n}\n\nfunction buildGridLines(dims: PlateDimensions, cellSize: number, borderColor: string): React.ReactNode[] {\n  const lines: React.ReactNode[] = [];\n  const left = LABEL_PAD;\n  const top = LABEL_PAD;\n  const right = LABEL_PAD + dims.columns * cellSize;\n  const bottom = LABEL_PAD + dims.rows * cellSize;\n\n  for (let c = 0; c <= dims.columns; c++) {\n    const x = LABEL_PAD + c * cellSize;\n    lines.push(\n      <line\n        key={`grid-col-${c}`}\n        x1={x}\n        y1={top}\n        x2={x}\n        y2={bottom}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`column-${c}`}\n      />,\n    );\n  }\n\n  for (let r = 0; r <= dims.rows; r++) {\n    const y = LABEL_PAD + r * cellSize;\n    lines.push(\n      <line\n        key={`grid-row-${r}`}\n        x1={left}\n        y1={y}\n        x2={right}\n        y2={y}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`row-${r}`}\n      />,\n    );\n  }\n\n  return lines;\n}\n\nfunction buildWellOverlay<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    selection,\n    dragPositions,\n    selectedBorderColor,\n    flashWellId,\n    flashWellKey,\n    wellShape,\n    highlightedWellIds,\n    highlightBorderColor,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const isFlashing = flashWellId === id;\n  const isHighlighted = !isSelected && highlightedWellIds.has(id);\n\n  if (!isSelected && !isFlashing && !isHighlighted) return null;\n\n  const x = LABEL_PAD + column * cellSize + WELL_INSET;\n  const y = LABEL_PAD + row * cellSize + WELL_INSET;\n  const size = cellSize - WELL_INSET * 2;\n  const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n  const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n  const r = cellSize / 2 - WELL_INSET;\n  const isCircle = wellShape === \"circle\";\n\n  type WellShapeProps = Record<string, string | number | undefined>;\n  const shapeProps: WellShapeProps = isCircle\n    ? { cx, cy, r }\n    : { x, y, width: size, height: size };\n\n  const renderShape = (\n    extraProps: Record<string, string | number | undefined>,\n    children?: React.ReactNode,\n    elementKey?: string | number,\n  ): React.ReactNode => {\n    const props = { ...shapeProps, ...extraProps, pointerEvents: \"none\" as const };\n    return isCircle ? (\n      <circle key={elementKey} {...props}>\n        {children}\n      </circle>\n    ) : (\n      <rect key={elementKey} {...props}>\n        {children}\n      </rect>\n    );\n  };\n\n  const flashAnimations = (\n    <>\n      <animate attributeName=\"fill-opacity\" values=\"0.24;0.1;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate attributeName=\"stroke-opacity\" values=\"0.92;0.42;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate\n        attributeName=\"stroke-width\"\n        values={`${STROKE_FLASH};${STROKE_SELECTED}`}\n        dur={`${FLASH_DURATION_MS}ms`}\n        fill=\"freeze\"\n      />\n    </>\n  );\n\n  return (\n    <g key={`overlay-${id}`}>\n      {isSelected\n        ? renderShape({\n            fill: \"none\",\n            stroke: selectedBorderColor,\n            strokeWidth: STROKE_SELECTED,\n            \"data-well-selection\": id,\n          })\n        : null}\n      {isHighlighted\n        ? renderShape({\n            fill: \"none\",\n            stroke: highlightBorderColor,\n            strokeWidth: STROKE_HIGHLIGHT,\n            \"data-well-highlight\": id,\n          })\n        : null}\n      {isFlashing\n        ? renderShape(\n            {\n              fill: selectedBorderColor,\n              fillOpacity: 0.24,\n              stroke: selectedBorderColor,\n              strokeOpacity: 0.92,\n              strokeWidth: STROKE_FLASH,\n              \"data-well-flash\": id,\n            },\n            flashAnimations,\n            `${id}-${flashWellKey}`,\n          )\n        : null}\n    </g>\n  );\n}\n\nfunction buildWellOverlays<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const overlays: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      const overlay = buildWellOverlay({ dims, ...args }, r, c);\n      if (overlay) overlays.push(overlay);\n    }\n  }\n  return overlays;\n}\n\n/**\n * Interactive plate grid with drag-rectangle selection.\n * - Click & drag: replace selection\n * - Shift + drag: add to selection\n * - Alt + drag: remove from selection\n */\nexport function PlatePaintGrid<T extends WellRecord = WellRecord>({\n  format,\n  rows,\n  columns,\n  values,\n  selection,\n  onSelectionChange,\n  colorForWell,\n  emptyWellFillColor = PLATE_MAP_EMPTY_WELL_FILL,\n  wellShape = \"rect\",\n  framed = false,\n  cellSize,\n  autoScale = true,\n  minCellSize = DEFAULT_MIN_AUTO_CELL,\n  maxCellSize,\n  borderColor = PLATE_MAP_CELL_BORDER,\n  selectedBorderColor = \"var(--color-primary)\",\n  selectedFillColor = \"var(--color-primary)\",\n  selectedFillOpacity = 0.18,\n  selectionFillMode = \"selection\",\n  flashWellId,\n  flashWellKey,\n  highlightedWellIds,\n  highlightBorderColor = \"var(--color-primary)\",\n  onWellHover,\n  onWellDoubleClick,\n  wrapWell,\n  className,\n}: PlatePaintGridProps<T>) {\n  const dims = resolveDimensions(format, rows, columns);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n  const [drag, setDrag] = React.useState<DragState | null>(null);\n  const [containerWidth, setContainerWidth] = React.useState<number>();\n\n  React.useLayoutEffect(() => {\n    const node = containerRef.current;\n    if (!node || !autoScale || cellSize !== undefined) return;\n\n    const update = () => setContainerWidth(node.clientWidth);\n    update();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [autoScale, cellSize]);\n\n  const resolvedCellSize = React.useMemo(() => {\n    if (!autoScale || cellSize !== undefined || !containerWidth) {\n      return cellSize ?? DEFAULT_CELL;\n    }\n    const autoMaxCellSize = maxCellSize ?? (dims.columns > 12 ? DEFAULT_MAX_DENSE_AUTO_CELL : DEFAULT_MAX_AUTO_CELL);\n    const frameAdjust = framed ? (FRAME_PADDING_PX + FRAME_BORDER_PX) * 2 : 0;\n    const fitSize = Math.floor((containerWidth - LABEL_PAD - frameAdjust) / dims.columns);\n    return Math.max(minCellSize, Math.min(autoMaxCellSize, fitSize));\n  }, [autoScale, cellSize, containerWidth, dims.columns, framed, maxCellSize, minCellSize]);\n\n  const cellAt = React.useCallback(\n    (evt: React.MouseEvent): { r: number; c: number } | null => {\n      const svg = svgRef.current;\n      if (!svg) return null;\n      const rect = svg.getBoundingClientRect();\n      const x = evt.clientX - rect.left - LABEL_PAD;\n      const y = evt.clientY - rect.top - LABEL_PAD;\n      const c = Math.floor(x / resolvedCellSize);\n      const r = Math.floor(y / resolvedCellSize);\n      if (r < 0 || r >= dims.rows || c < 0 || c >= dims.columns) return null;\n      return { r, c };\n    },\n    [resolvedCellSize, dims.rows, dims.columns],\n  );\n\n  const handleDown = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    const mode: DragMode = e.shiftKey ? \"add\" : e.altKey ? \"remove\" : \"replace\";\n    setDrag({ start: cell, cur: cell, mode });\n  };\n\n  const handleMove = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (cell && onWellHover) {\n      onWellHover(pos(cell.r, cell.c, dims.columns));\n    }\n    if (!drag || !cell) return;\n    setDrag({ ...drag, cur: cell });\n  };\n\n  const commitDrag = React.useCallback(() => {\n    if (!drag) return;\n    const positions = rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns);\n    let next: Set<WellId>;\n    if (drag.mode === \"replace\") {\n      next = new Set(positions);\n    } else if (drag.mode === \"add\") {\n      next = new Set(selection);\n      positions.forEach((p) => next.add(p));\n    } else {\n      next = new Set(selection);\n      positions.forEach((p) => next.delete(p));\n    }\n    onSelectionChange(next);\n    setDrag(null);\n  }, [drag, dims.columns, onSelectionChange, selection]);\n\n  const handleUp = () => commitDrag();\n  const handleLeave = () => {\n    commitDrag();\n    onWellHover?.(null);\n  };\n  const handleDoubleClick = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    onWellDoubleClick?.(pos(cell.r, cell.c, dims.columns));\n  };\n\n  const dragPositions = React.useMemo(() => {\n    if (!drag) return new Set<WellId>();\n    return new Set(rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns));\n  }, [drag, dims.columns]);\n\n  // Right and bottom edge strokes sit on the plate boundary; give the SVG room so they are not clipped.\n  const edgeStrokePadding = STROKE_DEFAULT;\n  const width = dims.columns * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n  const height = dims.rows * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n\n  const colLabels = buildColumnLabels(dims.columns, resolvedCellSize);\n  const rowLabels = buildRowLabels(dims.rows, resolvedCellSize);\n  const resolvedHighlightedWellIds: ReadonlySet<WellId> = highlightedWellIds ?? new Set();\n  const wellRenderArgs = {\n    dims,\n    cellSize: resolvedCellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    borderColor,\n    selectedBorderColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n    highlightedWellIds: resolvedHighlightedWellIds,\n    highlightBorderColor,\n    flashWellId,\n    flashWellKey,\n  };\n  const wellCells = buildWellCells(wellRenderArgs);\n  const gridLines = wellShape === \"circle\" ? [] : buildGridLines(dims, resolvedCellSize, borderColor);\n  const wellOverlays = buildWellOverlays(wellRenderArgs);\n\n  const overlayCells = React.useMemo<React.ReactNode[]>(() => {\n    if (!wrapWell) return [];\n    const cells: React.ReactNode[] = [];\n    for (let r = 0; r < dims.rows; r++) {\n      for (let c = 0; c < dims.columns; c++) {\n        const id = pos(r, c, dims.columns);\n        cells.push(\n          <div\n            key={id}\n            style={{\n              position: \"absolute\",\n              left: LABEL_PAD + c * resolvedCellSize,\n              top: LABEL_PAD + r * resolvedCellSize,\n              width: resolvedCellSize,\n              height: resolvedCellSize,\n            }}\n            data-well-id={id}\n          >\n            {wrapWell(id, resolvedCellSize)}\n          </div>,\n        );\n      }\n    }\n    return cells;\n  }, [wrapWell, dims.rows, dims.columns, resolvedCellSize]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full select-none\", className)}\n      data-slot=\"plate-paint-grid\"\n    >\n      <div\n        className={cn(\n          \"relative inline-block\",\n          framed && \"rounded-xl border bg-card p-3 shadow-sm\",\n        )}\n        data-slot=\"plate-paint-grid-frame\"\n      >\n        <svg\n          ref={svgRef}\n          width={width}\n          height={height}\n          className=\"block cursor-crosshair\"\n          onMouseDown={handleDown}\n          onMouseMove={handleMove}\n          onMouseUp={handleUp}\n          onMouseLeave={handleLeave}\n          onDoubleClick={handleDoubleClick}\n          role=\"group\"\n          aria-label={`${dims.rows} row by ${dims.columns} column plate map. Drag to select wells.`}\n        >\n          {colLabels}\n          {rowLabels}\n          {wellCells}\n          {gridLines}\n          {wellOverlays}\n        </svg>\n        {wrapWell ? (\n          <div\n            className=\"pointer-events-none absolute\"\n            style={{\n              top: framed ? FRAME_PADDING_PX : 0,\n              left: framed ? FRAME_PADDING_PX : 0,\n              width,\n              height,\n            }}\n            aria-hidden\n            data-slot=\"plate-well-overlay\"\n          >\n            {overlayCells}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { parsePos };\n"],"names":["DEFAULT_CELL","DEFAULT_MIN_AUTO_CELL","DEFAULT_MAX_AUTO_CELL","DEFAULT_MAX_DENSE_AUTO_CELL","LABEL_PAD","FRAME_PADDING_PX","FRAME_BORDER_PX","LABEL_FONT_SIZE","LABEL_TEXT_INSET","LABEL_BASELINE_OFFSET","WELL_INSET","STROKE_DEFAULT","STROKE_SELECTED","STROKE_HIGHLIGHT","STROKE_FLASH","FLASH_DURATION_MS","PLATE_MAP_EMPTY_WELL_FILL","PLATE_MAP_CELL_BORDER","buildColumnLabels","columns","cellSize","labels","c","jsx","buildRowLabels","rows","r","buildWellCell","args","row","column","dims","values","selection","dragPositions","colorForWell","emptyWellFillColor","selectedFillColor","selectedFillOpacity","selectionFillMode","wellShape","id","pos","entry","isSelected","wellFill","usesSelectionFill","fill","fillOpacity","cx","cy","buildWellCells","cells","buildGridLines","borderColor","lines","left","top","right","bottom","x","y","buildWellOverlay","selectedBorderColor","flashWellId","flashWellKey","highlightedWellIds","highlightBorderColor","isFlashing","isHighlighted","size","isCircle","shapeProps","renderShape","extraProps","children","elementKey","props","flashAnimations","jsxs","Fragment","buildWellOverlays","overlays","overlay","PlatePaintGrid","format","onSelectionChange","framed","autoScale","minCellSize","maxCellSize","onWellHover","onWellDoubleClick","wrapWell","className","resolveDimensions","containerRef","React","svgRef","drag","setDrag","containerWidth","setContainerWidth","node","update","observer","resolvedCellSize","autoMaxCellSize","frameAdjust","fitSize","cellAt","evt","svg","rect","handleDown","e","cell","mode","handleMove","commitDrag","positions","rectPositions","next","p","handleUp","handleLeave","handleDoubleClick","edgeStrokePadding","width","height","colLabels","rowLabels","wellRenderArgs","wellCells","gridLines","wellOverlays","overlayCells","cn"],"mappings":";;;;;AAQA,MAAMA,KAAe,IACfC,KAAwB,IACxBC,KAAwB,IACxBC,KAA8B,IAC9BC,IAAY,IACZC,IAAmB,IACnBC,KAAkB,GAClBC,KAAkB,IAClBC,KAAmB,GACnBC,KAAwB,GACxBC,IAAa,GACbC,IAAiB,GACjBC,KAAkB,GAClBC,KAAmB,GACnBC,KAAe,GACfC,IAAoB,KACbC,KAA4B,4BAC5BC,KAAwB;AAwErC,SAASC,GAAkBC,GAAiBC,GAAqC;AAC/E,QAAMC,IAA4B,CAAA;AAClC,WAASC,IAAI,GAAGA,IAAIH,GAASG;AAC3B,IAAAD,EAAO;AAAA,MACL,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,GAAGnB,IAAYkB,IAAIF,IAAWA,IAAW;AAAA,UACzC,GAAGhB,IAAY;AAAA,UACf,YAAW;AAAA,UACX,UAAUG;AAAA,UACV,WAAU;AAAA,UAET,UAAAe,IAAI;AAAA,QAAA;AAAA,QAPA,IAAIA,CAAC;AAAA,MAAA;AAAA,IAQZ;AAGJ,SAAOD;AACT;AAEA,SAASG,GAAeC,GAAcL,GAAqC;AACzE,QAAMC,IAA4B,CAAA;AAClC,WAASK,IAAI,GAAGA,IAAID,GAAMC;AACxB,IAAAL,EAAO;AAAA,MACL,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,GAAGnB,IAAYI;AAAA,UACf,GAAGJ,IAAYsB,IAAIN,IAAWA,IAAW,IAAIX;AAAA,UAC7C,YAAW;AAAA,UACX,UAAUF;AAAA,UACV,WAAU;AAAA,UAET,aAASmB,CAAC;AAAA,QAAA;AAAA,QAPN,IAAIA,CAAC;AAAA,MAAA;AAAA,IAQZ;AAGJ,SAAOL;AACT;AAsBA,SAASM,GACPC,GACAC,GACAC,GACiB;AACjB,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,UAAAX;AAAA,IACA,QAAAY;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACEZ,GACEa,IAAKC,EAAIb,GAAKC,GAAQC,EAAK,OAAO,GAClCY,IAAQX,EAAO,IAAIS,CAAE,GACrBG,IAAaX,EAAU,IAAIQ,CAAE,KAAKP,EAAc,IAAIO,CAAE,GACtDI,IAAWF,MAAU,UAAaP,MAAuB,OAAOA,IAAqBD,EAAaQ,GAAOF,CAAE,GAE3GK,IAAoBF,KAAc,EADnBA,KAAcL,MAAsB,UAAUI,MAAU,SAEvEI,IAAOD,IAAoBT,IAAoBQ,GAC/CG,IAAcF,IAAoBR,IAAsB;AAE9D,MAAIE,MAAc,UAAU;AAC1B,UAAMS,IAAK7C,IAAY0B,IAASV,IAAWA,IAAW,GAChD8B,IAAK9C,IAAYyB,IAAMT,IAAWA,IAAW,GAC7CM,IAAIN,IAAW,IAAIV;AACzB,WACE,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAA0B;AAAA,QACA,IAAAC;AAAA,QACA,GAAAxB;AAAA,QACA,MAAAqB;AAAA,QACA,aAAAC;AAAA,QACA,QAAO;AAAA,QACP,aAAWP;AAAA,QACX,iBAAeG,IAAa,SAAS;AAAA,MAAA;AAAA,MARhCH;AAAA,IAAA;AAAA,EAWX;AAEA,SACE,gBAAAlB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,GAAGnB,IAAY0B,IAASV;AAAA,MACxB,GAAGhB,IAAYyB,IAAMT;AAAA,MACrB,OAAOA;AAAA,MACP,QAAQA;AAAA,MACR,MAAA2B;AAAA,MACA,aAAAC;AAAA,MACA,QAAO;AAAA,MACP,aAAWP;AAAA,MACX,iBAAeG,IAAa,SAAS;AAAA,IAAA;AAAA,IAThCH;AAAA,EAAA;AAYX;AAEA,SAASU,GAAqC,EAAE,MAAApB,GAAM,GAAGH,KAAkD;AACzG,QAAMwB,IAA2B,CAAA;AACjC,WAAS1B,IAAI,GAAGA,IAAIK,EAAK,MAAML;AAC7B,aAASJ,IAAI,GAAGA,IAAIS,EAAK,SAAST;AAChC,MAAA8B,EAAM,KAAKzB,GAAc,EAAE,MAAAI,GAAM,GAAGH,EAAA,GAAQF,GAAGJ,CAAC,CAAC;AAGrD,SAAO8B;AACT;AAEA,SAASC,GAAetB,GAAuBX,GAAkBkC,GAAwC;AACvG,QAAMC,IAA2B,CAAA,GAC3BC,IAAOpD,GACPqD,IAAMrD,GACNsD,IAAQtD,IAAY2B,EAAK,UAAUX,GACnCuC,IAASvD,IAAY2B,EAAK,OAAOX;AAEvC,WAASE,IAAI,GAAGA,KAAKS,EAAK,SAAST,KAAK;AACtC,UAAMsC,IAAIxD,IAAYkB,IAAIF;AAC1B,IAAAmC,EAAM;AAAA,MACJ,gBAAAhC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,IAAIqC;AAAA,UACJ,IAAIH;AAAA,UACJ,IAAIG;AAAA,UACJ,IAAID;AAAA,UACJ,QAAQL;AAAA,UACR,aAAa3C;AAAA,UACb,cAAa;AAAA,UACb,gBAAe;AAAA,UACf,eAAc;AAAA,UACd,wBAAsB,UAAUW,CAAC;AAAA,QAAA;AAAA,QAV5B,YAAYA,CAAC;AAAA,MAAA;AAAA,IAWpB;AAAA,EAEJ;AAEA,WAASI,IAAI,GAAGA,KAAKK,EAAK,MAAML,KAAK;AACnC,UAAMmC,IAAIzD,IAAYsB,IAAIN;AAC1B,IAAAmC,EAAM;AAAA,MACJ,gBAAAhC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,IAAIiC;AAAA,UACJ,IAAIK;AAAA,UACJ,IAAIH;AAAA,UACJ,IAAIG;AAAA,UACJ,QAAQP;AAAA,UACR,aAAa3C;AAAA,UACb,cAAa;AAAA,UACb,gBAAe;AAAA,UACf,eAAc;AAAA,UACd,wBAAsB,OAAOe,CAAC;AAAA,QAAA;AAAA,QAVzB,YAAYA,CAAC;AAAA,MAAA;AAAA,IAWpB;AAAA,EAEJ;AAEA,SAAO6B;AACT;AAEA,SAASO,GACPlC,GACAC,GACAC,GACiB;AACjB,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,UAAAX;AAAA,IACA,WAAAa;AAAA,IACA,eAAAC;AAAA,IACA,qBAAA6B;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAzB;AAAA,IACA,oBAAA0B;AAAA,IACA,sBAAAC;AAAA,EAAA,IACEvC,GACEa,IAAKC,EAAIb,GAAKC,GAAQC,EAAK,OAAO,GAClCa,IAAaX,EAAU,IAAIQ,CAAE,KAAKP,EAAc,IAAIO,CAAE,GACtD2B,IAAaJ,MAAgBvB,GAC7B4B,IAAgB,CAACzB,KAAcsB,EAAmB,IAAIzB,CAAE;AAE9D,MAAI,CAACG,KAAc,CAACwB,KAAc,CAACC,EAAe,QAAO;AAEzD,QAAMT,IAAIxD,IAAY0B,IAASV,IAAWV,GACpCmD,IAAIzD,IAAYyB,IAAMT,IAAWV,GACjC4D,IAAOlD,IAAWV,IAAa,GAC/BuC,IAAK7C,IAAY0B,IAASV,IAAWA,IAAW,GAChD8B,IAAK9C,IAAYyB,IAAMT,IAAWA,IAAW,GAC7CM,IAAIN,IAAW,IAAIV,GACnB6D,IAAW/B,MAAc,UAGzBgC,IAA6BD,IAC/B,EAAE,IAAAtB,GAAI,IAAAC,GAAI,GAAAxB,EAAA,IACV,EAAE,GAAAkC,GAAG,GAAAC,GAAG,OAAOS,GAAM,QAAQA,EAAA,GAE3BG,IAAc,CAClBC,GACAC,GACAC,MACoB;AACpB,UAAMC,IAAQ,EAAE,GAAGL,GAAY,GAAGE,GAAY,eAAe,OAAA;AAC7D,WAAOH,IACL,gBAAAhD,EAAC,UAAA,EAAyB,GAAGsD,GAC1B,UAAAF,EAAA,GADUC,CAEb,IAEA,gBAAArD,EAAC,QAAA,EAAuB,GAAGsD,GACxB,UAAAF,KADQC,CAEX;AAAA,EAEJ,GAEME,IACJ,gBAAAC,EAAAC,IAAA,EACE,UAAA;AAAA,IAAA,gBAAAzD,EAAC,WAAA,EAAQ,eAAc,gBAAe,QAAO,cAAa,KAAK,GAAGR,CAAiB,MAAM,MAAK,SAAA,CAAS;AAAA,IACvG,gBAAAQ,EAAC,WAAA,EAAQ,eAAc,kBAAiB,QAAO,eAAc,KAAK,GAAGR,CAAiB,MAAM,MAAK,SAAA,CAAS;AAAA,IAC1G,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAc;AAAA,QACd,QAAQ,GAAGT,EAAY,IAAIF,EAAe;AAAA,QAC1C,KAAK,GAAGG,CAAiB;AAAA,QACzB,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP,GACF;AAGF,2BACG,KAAA,EACE,UAAA;AAAA,IAAA6B,IACG6B,EAAY;AAAA,MACV,MAAM;AAAA,MACN,QAAQV;AAAA,MACR,aAAanD;AAAA,MACb,uBAAuB6B;AAAA,IAAA,CACxB,IACD;AAAA,IACH4B,IACGI,EAAY;AAAA,MACV,MAAM;AAAA,MACN,QAAQN;AAAA,MACR,aAAatD;AAAA,MACb,uBAAuB4B;AAAA,IAAA,CACxB,IACD;AAAA,IACH2B,IACGK;AAAA,MACE;AAAA,QACE,MAAMV;AAAA,QACN,aAAa;AAAA,QACb,QAAQA;AAAA,QACR,eAAe;AAAA,QACf,aAAajD;AAAA,QACb,mBAAmB2B;AAAA,MAAA;AAAA,MAErBqC;AAAA,MACA,GAAGrC,CAAE,IAAIwB,CAAY;AAAA,IAAA,IAEvB;AAAA,EAAA,EAAA,GA9BE,WAAWxB,CAAE,EA+BrB;AAEJ;AAEA,SAASwC,GAAwC,EAAE,MAAAlD,GAAM,GAAGH,KAAkD;AAC5G,QAAMsD,IAA8B,CAAA;AACpC,WAASxD,IAAI,GAAGA,IAAIK,EAAK,MAAML;AAC7B,aAASJ,IAAI,GAAGA,IAAIS,EAAK,SAAST,KAAK;AACrC,YAAM6D,IAAUrB,GAAiB,EAAE,MAAA/B,GAAM,GAAGH,EAAA,GAAQF,GAAGJ,CAAC;AACxD,MAAI6D,KAASD,EAAS,KAAKC,CAAO;AAAA,IACpC;AAEF,SAAOD;AACT;AAQO,SAASE,GAAkD;AAAA,EAChE,QAAAC;AAAA,EACA,MAAA5D;AAAA,EACA,SAAAN;AAAA,EACA,QAAAa;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAqD;AAAA,EACA,cAAAnD;AAAA,EACA,oBAAAC,IAAqBpB;AAAA,EACrB,WAAAwB,IAAY;AAAA,EACZ,QAAA+C,IAAS;AAAA,EACT,UAAAnE;AAAA,EACA,WAAAoE,IAAY;AAAA,EACZ,aAAAC,IAAcxF;AAAA,EACd,aAAAyF;AAAA,EACA,aAAApC,IAAcrC;AAAA,EACd,qBAAA8C,IAAsB;AAAA,EACtB,mBAAA1B,IAAoB;AAAA,EACpB,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC,IAAoB;AAAA,EACpB,aAAAyB;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,aAAAwB;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA2B;AACzB,QAAM/D,IAAOgE,GAAkBV,GAAQ5D,GAAMN,CAAO,GAC9C6E,IAAeC,EAAM,OAAuB,IAAI,GAChDC,IAASD,EAAM,OAAsB,IAAI,GACzC,CAACE,GAAMC,CAAO,IAAIH,EAAM,SAA2B,IAAI,GACvD,CAACI,GAAgBC,EAAiB,IAAIL,EAAM,SAAA;AAElD,EAAAA,EAAM,gBAAgB,MAAM;AAC1B,UAAMM,IAAOP,EAAa;AAC1B,QAAI,CAACO,KAAQ,CAACf,KAAapE,MAAa,OAAW;AAEnD,UAAMoF,IAAS,MAAMF,GAAkBC,EAAK,WAAW;AAGvD,QAFAC,EAAA,GAEI,OAAO,iBAAmB,IAAa;AAE3C,UAAMC,IAAW,IAAI,eAAeD,CAAM;AAC1C,WAAAC,EAAS,QAAQF,CAAI,GACd,MAAME,EAAS,WAAA;AAAA,EACxB,GAAG,CAACjB,GAAWpE,CAAQ,CAAC;AAExB,QAAMsF,IAAmBT,EAAM,QAAQ,MAAM;AAC3C,QAAI,CAACT,KAAapE,MAAa,UAAa,CAACiF;AAC3C,aAAOjF,KAAYpB;AAErB,UAAM2G,IAAkBjB,MAAgB3D,EAAK,UAAU,KAAK5B,KAA8BD,KACpF0G,IAAcrB,KAAUlF,IAAmBC,MAAmB,IAAI,GAClEuG,IAAU,KAAK,OAAOR,IAAiBjG,IAAYwG,KAAe7E,EAAK,OAAO;AACpF,WAAO,KAAK,IAAI0D,GAAa,KAAK,IAAIkB,GAAiBE,CAAO,CAAC;AAAA,EACjE,GAAG,CAACrB,GAAWpE,GAAUiF,GAAgBtE,EAAK,SAASwD,GAAQG,GAAaD,CAAW,CAAC,GAElFqB,IAASb,EAAM;AAAA,IACnB,CAACc,MAA2D;AAC1D,YAAMC,IAAMd,EAAO;AACnB,UAAI,CAACc,EAAK,QAAO;AACjB,YAAMC,IAAOD,EAAI,sBAAA,GACXpD,IAAImD,EAAI,UAAUE,EAAK,OAAO7G,GAC9ByD,KAAIkD,EAAI,UAAUE,EAAK,MAAM7G,GAC7BkB,IAAI,KAAK,MAAMsC,IAAI8C,CAAgB,GACnChF,IAAI,KAAK,MAAMmC,KAAI6C,CAAgB;AACzC,aAAIhF,IAAI,KAAKA,KAAKK,EAAK,QAAQT,IAAI,KAAKA,KAAKS,EAAK,UAAgB,OAC3D,EAAE,GAAAL,GAAG,GAAAJ,EAAA;AAAA,IACd;AAAA,IACA,CAACoF,GAAkB3E,EAAK,MAAMA,EAAK,OAAO;AAAA,EAAA,GAGtCmF,KAAa,CAACC,MAAwB;AAC1C,UAAMC,IAAON,EAAOK,CAAC;AACrB,QAAI,CAACC,EAAM;AACX,UAAMC,IAAiBF,EAAE,WAAW,QAAQA,EAAE,SAAS,WAAW;AAClE,IAAAf,EAAQ,EAAE,OAAOgB,GAAM,KAAKA,GAAM,MAAAC,GAAM;AAAA,EAC1C,GAEMC,KAAa,CAACH,MAAwB;AAC1C,UAAMC,IAAON,EAAOK,CAAC;AAIrB,IAHIC,KAAQzB,KACVA,EAAYjD,EAAI0E,EAAK,GAAGA,EAAK,GAAGrF,EAAK,OAAO,CAAC,GAE3C,GAACoE,KAAQ,CAACiB,MACdhB,EAAQ,EAAE,GAAGD,GAAM,KAAKiB,GAAM;AAAA,EAChC,GAEMG,IAAatB,EAAM,YAAY,MAAM;AACzC,QAAI,CAACE,EAAM;AACX,UAAMqB,IAAYC,GAActB,EAAK,MAAM,GAAGA,EAAK,MAAM,GAAGA,EAAK,IAAI,GAAGA,EAAK,IAAI,GAAGpE,EAAK,OAAO;AAChG,QAAI2F;AACJ,IAAIvB,EAAK,SAAS,YAChBuB,IAAO,IAAI,IAAIF,CAAS,IACfrB,EAAK,SAAS,SACvBuB,IAAO,IAAI,IAAIzF,CAAS,GACxBuF,EAAU,QAAQ,CAACG,MAAMD,EAAK,IAAIC,CAAC,CAAC,MAEpCD,IAAO,IAAI,IAAIzF,CAAS,GACxBuF,EAAU,QAAQ,CAACG,MAAMD,EAAK,OAAOC,CAAC,CAAC,IAEzCrC,EAAkBoC,CAAI,GACtBtB,EAAQ,IAAI;AAAA,EACd,GAAG,CAACD,GAAMpE,EAAK,SAASuD,GAAmBrD,CAAS,CAAC,GAE/C2F,KAAW,MAAML,EAAA,GACjBM,KAAc,MAAM;AACxB,IAAAN,EAAA,GACA5B,IAAc,IAAI;AAAA,EACpB,GACMmC,KAAoB,CAACX,MAAwB;AACjD,UAAMC,IAAON,EAAOK,CAAC;AACrB,IAAKC,KACLxB,IAAoBlD,EAAI0E,EAAK,GAAGA,EAAK,GAAGrF,EAAK,OAAO,CAAC;AAAA,EACvD,GAEMG,KAAgB+D,EAAM,QAAQ,MAC7BE,IACE,IAAI,IAAIsB,GAActB,EAAK,MAAM,GAAGA,EAAK,MAAM,GAAGA,EAAK,IAAI,GAAGA,EAAK,IAAI,GAAGpE,EAAK,OAAO,CAAC,IAD5E,oBAAI,IAAA,GAErB,CAACoE,GAAMpE,EAAK,OAAO,CAAC,GAGjBgG,IAAoBpH,GACpBqH,IAAQjG,EAAK,UAAU2E,IAAmBtG,IAAY2H,GACtDE,IAASlG,EAAK,OAAO2E,IAAmBtG,IAAY2H,GAEpDG,KAAYhH,GAAkBa,EAAK,SAAS2E,CAAgB,GAC5DyB,KAAY3G,GAAeO,EAAK,MAAM2E,CAAgB,GAEtD0B,KAAiB;AAAA,IACrB,MAAArG;AAAA,IACA,UAAU2E;AAAA,IACV,QAAA1E;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAkB;AAAA,IACA,qBAAAS;AAAA,IACA,mBAAA1B;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAfsD0B,KAAsB,oBAAI,IAAA;AAAA,IAgBhF,sBAAAC;AAAA,IACA,aAAAH;AAAA,IACA,cAAAC;AAAA,EAAA,GAEIoE,KAAYlF,GAAeiF,EAAc,GACzCE,KAAY9F,MAAc,WAAW,CAAA,IAAKa,GAAetB,GAAM2E,GAAkBpD,CAAW,GAC5FiF,KAAetD,GAAkBmD,EAAc,GAE/CI,KAAevC,EAAM,QAA2B,MAAM;AAC1D,QAAI,CAACJ,EAAU,QAAO,CAAA;AACtB,UAAMzC,IAA2B,CAAA;AACjC,aAAS1B,IAAI,GAAGA,IAAIK,EAAK,MAAML;AAC7B,eAASJ,IAAI,GAAGA,IAAIS,EAAK,SAAST,KAAK;AACrC,cAAMmB,IAAKC,EAAIhB,GAAGJ,GAAGS,EAAK,OAAO;AACjC,QAAAqB,EAAM;AAAA,UACJ,gBAAA7B;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,MAAMnB,IAAYkB,IAAIoF;AAAA,gBACtB,KAAKtG,IAAYsB,IAAIgF;AAAA,gBACrB,OAAOA;AAAA,gBACP,QAAQA;AAAA,cAAA;AAAA,cAEV,gBAAcjE;AAAA,cAEb,UAAAoD,EAASpD,GAAIiE,CAAgB;AAAA,YAAA;AAAA,YAVzBjE;AAAA,UAAA;AAAA,QAWP;AAAA,MAEJ;AAEF,WAAOW;AAAA,EACT,GAAG,CAACyC,GAAU9D,EAAK,MAAMA,EAAK,SAAS2E,CAAgB,CAAC;AAExD,SACE,gBAAAnF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKyE;AAAA,MACL,WAAWyC,GAAG,+BAA+B3C,CAAS;AAAA,MACtD,aAAU;AAAA,MAEV,UAAA,gBAAAf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW0D;AAAA,YACT;AAAA,YACAlD,KAAU;AAAA,UAAA;AAAA,UAEZ,aAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAR;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKmB;AAAA,gBACL,OAAA8B;AAAA,gBACA,QAAAC;AAAA,gBACA,WAAU;AAAA,gBACV,aAAaf;AAAA,gBACb,aAAaI;AAAA,gBACb,WAAWM;AAAA,gBACX,cAAcC;AAAA,gBACd,eAAeC;AAAA,gBACf,MAAK;AAAA,gBACL,cAAY,GAAG/F,EAAK,IAAI,WAAWA,EAAK,OAAO;AAAA,gBAE9C,UAAA;AAAA,kBAAAmG;AAAA,kBACAC;AAAA,kBACAE;AAAA,kBACAC;AAAA,kBACAC;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF1C,IACC,gBAAAtE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,KAAKgE,IAASlF,IAAmB;AAAA,kBACjC,MAAMkF,IAASlF,IAAmB;AAAA,kBAClC,OAAA2H;AAAA,kBACA,QAAAC;AAAA,gBAAA;AAAA,gBAEF,eAAW;AAAA,gBACX,aAAU;AAAA,gBAET,UAAAO;AAAA,cAAA;AAAA,YAAA,IAED;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/components/composed/PlateMapEditor/PlateZoomControl.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("lucide-react"),s=require("../../ui/button.cjs"),l=require("../../ui/button-group.cjs"),b=require("../../../lib/utils.cjs"),x=2;function h(t,o,n){return Math.min(n,Math.max(o,t))}function j({zoom:t,onZoomChange:o,step:n=.1,min:r=.5,max:i=2,showReadout:c=!0,className:d}){const u=m=>o(h(Number(m.toFixed(x)),r,i));return e.jsxs(l.ButtonGroup,{className:b.cn(d),"data-slot":"plate-zoom-control",children:[e.jsx(s.Button,{type:"button",variant:"outline",size:"icon-sm","aria-label":"Zoom out",disabled:t<=r,onClick:()=>u(t-n),children:e.jsx(a.ZoomOut,{"aria-hidden":!0})}),c?e.jsxs(l.ButtonGroupText,{className:"min-w-[3.25rem] justify-center text-xs tabular-nums",children:[Math.round(t*100),"%"]}):null,e.jsx(s.Button,{type:"button",variant:"outline",size:"icon-sm","aria-label":"Zoom in",disabled:t>=i,onClick:()=>u(t+n),children:e.jsx(a.ZoomIn,{"aria-hidden":!0})})]})}exports.PlateZoomControl=j;
+//# sourceMappingURL=PlateZoomControl.cjs.map

package/dist/components/composed/PlateMapEditor/PlateZoomControl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlateZoomControl.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateZoomControl.tsx"],"sourcesContent":["import { ZoomIn, ZoomOut } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupText } from \"@/components/ui/button-group\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlateZoomControlProps {\n  zoom: number;\n  onZoomChange: (next: number) => void;\n  /** Increment per click. Defaults to 0.1. */\n  step?: number;\n  min?: number;\n  max?: number;\n  /** Render a percentage readout between the buttons. Defaults to true. */\n  showReadout?: boolean;\n  className?: string;\n}\n\nconst ZOOM_DECIMALS = 2;\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function PlateZoomControl({\n  zoom,\n  onZoomChange,\n  step = 0.1,\n  min = 0.5,\n  max = 2,\n  showReadout = true,\n  className,\n}: PlateZoomControlProps) {\n  const setZoom = (next: number) => onZoomChange(clamp(Number(next.toFixed(ZOOM_DECIMALS)), min, max));\n\n  return (\n    <ButtonGroup className={cn(className)} data-slot=\"plate-zoom-control\">\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        aria-label=\"Zoom out\"\n        disabled={zoom <= min}\n        onClick={() => setZoom(zoom - step)}\n      >\n        <ZoomOut aria-hidden />\n      </Button>\n      {showReadout ? (\n        <ButtonGroupText className=\"min-w-[3.25rem] justify-center text-xs tabular-nums\">\n          {Math.round(zoom * 100)}%\n        </ButtonGroupText>\n      ) : null}\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        aria-label=\"Zoom in\"\n        disabled={zoom >= max}\n        onClick={() => setZoom(zoom + step)}\n      >\n        <ZoomIn aria-hidden />\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["ZOOM_DECIMALS","clamp","value","min","max","PlateZoomControl","zoom","onZoomChange","step","showReadout","className","setZoom","next","ButtonGroup","cn","jsx","Button","ZoomOut","jsxs","ButtonGroupText","ZoomIn"],"mappings":"2PAkBMA,EAAgB,EAEtB,SAASC,EAAMC,EAAeC,EAAaC,EAAqB,CAC9D,OAAO,KAAK,IAAIA,EAAK,KAAK,IAAID,EAAKD,CAAK,CAAC,CAC3C,CAEO,SAASG,EAAiB,CAC/B,KAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,GACP,IAAAL,EAAM,GACN,IAAAC,EAAM,EACN,YAAAK,EAAc,GACd,UAAAC,CACF,EAA0B,CACxB,MAAMC,EAAWC,GAAiBL,EAAaN,EAAM,OAAOW,EAAK,QAAQZ,CAAa,CAAC,EAAGG,EAAKC,CAAG,CAAC,EAEnG,cACGS,cAAA,CAAY,UAAWC,EAAAA,GAAGJ,CAAS,EAAG,YAAU,qBAC/C,SAAA,CAAAK,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,UACL,aAAW,WACX,SAAUV,GAAQH,EAClB,QAAS,IAAMQ,EAAQL,EAAOE,CAAI,EAElC,SAAAO,EAAAA,IAACE,EAAAA,QAAA,CAAQ,cAAW,EAAA,CAAC,CAAA,CAAA,EAEtBR,EACCS,EAAAA,KAACC,EAAAA,gBAAA,CAAgB,UAAU,sDACxB,SAAA,CAAA,KAAK,MAAMb,EAAO,GAAG,EAAE,GAAA,CAAA,CAC1B,EACE,KACJS,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,UACL,aAAW,UACX,SAAUV,GAAQF,EAClB,QAAS,IAAMO,EAAQL,EAAOE,CAAI,EAElC,SAAAO,EAAAA,IAACK,EAAAA,OAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CAAA,CACtB,EACF,CAEJ"}

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

@@ -0,0 +1,54 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { ZoomOut as d, ZoomIn as p } from "lucide-react";
+import { Button as u } from "../../ui/button.js";
+import { ButtonGroup as h, ButtonGroupText as b } from "../../ui/button-group.js";
+import { cn as f } from "../../../lib/utils.js";
+const x = 2;
+function Z(t, r, o) {
+  return Math.min(o, Math.max(r, t));
+}
+function N({
+  zoom: t,
+  onZoomChange: r,
+  step: o = 0.1,
+  min: e = 0.5,
+  max: i = 2,
+  showReadout: m = !0,
+  className: s
+}) {
+  const a = (c) => r(Z(Number(c.toFixed(x)), e, i));
+  return /* @__PURE__ */ l(h, { className: f(s), "data-slot": "plate-zoom-control", children: [
+    /* @__PURE__ */ n(
+      u,
+      {
+        type: "button",
+        variant: "outline",
+        size: "icon-sm",
+        "aria-label": "Zoom out",
+        disabled: t <= e,
+        onClick: () => a(t - o),
+        children: /* @__PURE__ */ n(d, { "aria-hidden": !0 })
+      }
+    ),
+    m ? /* @__PURE__ */ l(b, { className: "min-w-[3.25rem] justify-center text-xs tabular-nums", children: [
+      Math.round(t * 100),
+      "%"
+    ] }) : null,
+    /* @__PURE__ */ n(
+      u,
+      {
+        type: "button",
+        variant: "outline",
+        size: "icon-sm",
+        "aria-label": "Zoom in",
+        disabled: t >= i,
+        onClick: () => a(t + o),
+        children: /* @__PURE__ */ n(p, { "aria-hidden": !0 })
+      }
+    )
+  ] });
+}
+export {
+  N as PlateZoomControl
+};
+//# sourceMappingURL=PlateZoomControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlateZoomControl.js","sources":["../../../../src/components/composed/PlateMapEditor/PlateZoomControl.tsx"],"sourcesContent":["import { ZoomIn, ZoomOut } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupText } from \"@/components/ui/button-group\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlateZoomControlProps {\n  zoom: number;\n  onZoomChange: (next: number) => void;\n  /** Increment per click. Defaults to 0.1. */\n  step?: number;\n  min?: number;\n  max?: number;\n  /** Render a percentage readout between the buttons. Defaults to true. */\n  showReadout?: boolean;\n  className?: string;\n}\n\nconst ZOOM_DECIMALS = 2;\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function PlateZoomControl({\n  zoom,\n  onZoomChange,\n  step = 0.1,\n  min = 0.5,\n  max = 2,\n  showReadout = true,\n  className,\n}: PlateZoomControlProps) {\n  const setZoom = (next: number) => onZoomChange(clamp(Number(next.toFixed(ZOOM_DECIMALS)), min, max));\n\n  return (\n    <ButtonGroup className={cn(className)} data-slot=\"plate-zoom-control\">\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        aria-label=\"Zoom out\"\n        disabled={zoom <= min}\n        onClick={() => setZoom(zoom - step)}\n      >\n        <ZoomOut aria-hidden />\n      </Button>\n      {showReadout ? (\n        <ButtonGroupText className=\"min-w-[3.25rem] justify-center text-xs tabular-nums\">\n          {Math.round(zoom * 100)}%\n        </ButtonGroupText>\n      ) : null}\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"icon-sm\"\n        aria-label=\"Zoom in\"\n        disabled={zoom >= max}\n        onClick={() => setZoom(zoom + step)}\n      >\n        <ZoomIn aria-hidden />\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["ZOOM_DECIMALS","clamp","value","min","max","PlateZoomControl","zoom","onZoomChange","step","showReadout","className","setZoom","next","ButtonGroup","cn","jsx","Button","ZoomOut","jsxs","ButtonGroupText","ZoomIn"],"mappings":";;;;;AAkBA,MAAMA,IAAgB;AAEtB,SAASC,EAAMC,GAAeC,GAAaC,GAAqB;AAC9D,SAAO,KAAK,IAAIA,GAAK,KAAK,IAAID,GAAKD,CAAK,CAAC;AAC3C;AAEO,SAASG,EAAiB;AAAA,EAC/B,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,KAAAL,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,aAAAK,IAAc;AAAA,EACd,WAAAC;AACF,GAA0B;AACxB,QAAMC,IAAU,CAACC,MAAiBL,EAAaN,EAAM,OAAOW,EAAK,QAAQZ,CAAa,CAAC,GAAGG,GAAKC,CAAG,CAAC;AAEnG,2BACGS,GAAA,EAAY,WAAWC,EAAGJ,CAAS,GAAG,aAAU,sBAC/C,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAUV,KAAQH;AAAA,QAClB,SAAS,MAAMQ,EAAQL,IAAOE,CAAI;AAAA,QAElC,UAAA,gBAAAO,EAACE,GAAA,EAAQ,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtBR,IACC,gBAAAS,EAACC,GAAA,EAAgB,WAAU,uDACxB,UAAA;AAAA,MAAA,KAAK,MAAMb,IAAO,GAAG;AAAA,MAAE;AAAA,IAAA,EAAA,CAC1B,IACE;AAAA,IACJ,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAUV,KAAQF;AAAA,QAClB,SAAS,MAAMO,EAAQL,IAAOE,CAAI;AAAA,QAElC,UAAA,gBAAAO,EAACK,GAAA,EAAO,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GACF;AAEJ;"}

package/dist/components/composed/PlateMapEditor/TemplateIOPanel.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("lucide-react"),O=require("react"),q=require("./csvPlateTriage.cjs"),P=require("./helpers.cjs"),m=require("../../ui/button.cjs"),k=require("../../ui/label.cjs"),s=require("../../ui/select.cjs"),f=require("../../ui/separator.cjs"),y=require("../../../lib/utils.cjs");function w(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(a,l,i.get?i:{enumerable:!0,get:()=>t[l]})}}return a.default=t,Object.freeze(a)}const g=w(O);function h({label:t,accept:a,onPick:l,disabled:i,triageCsv:o}){const r=g.useRef(null);return e.jsxs(e.Fragment,{children:[e.jsxs(m.Button,{type:"button",variant:"outline",size:"sm",disabled:i,onClick:()=>r.current?.click(),children:[e.jsx(j.Upload,{"aria-hidden":!0})," ",t]}),e.jsx("input",{ref:r,type:"file",accept:a,hidden:!0,onChange:c=>{const u=c.currentTarget,n=c.target.files?.[0];if(!n){u.value="";return}(async()=>{const x=o?await q.triagePlateMapCsvFile(n):void 0;await(x?l(n,x):l(n)),u.value=""})()}})]})}function z({templates:t,templateId:a,onTemplateChange:l,onClearTemplate:i,hasEntries:o,onImportCsv:r,onExportCsv:c,onImportTemplate:u,onExportTemplate:n,className:x,csvAccept:v=".csv,text/csv",templateAccept:b="application/json"}){const S=g.useMemo(()=>P.groupTemplateOptions(t),[t]);return e.jsxs("div",{"data-slot":"template-io-panel",className:y.cn("flex flex-col gap-3",x),children:[e.jsx("div",{className:"text-sm font-medium",children:"Template & import / export"}),t&&l?e.jsxs("div",{className:"flex flex-col gap-1.5",children:[e.jsx(k.Label,{htmlFor:"plate-template",children:"Template"}),e.jsxs(s.Select,{value:a??"",onValueChange:d=>l(d),children:[e.jsx(s.SelectTrigger,{id:"plate-template",size:"sm",className:"w-full",children:e.jsx(s.SelectValue,{placeholder:"Select template…"})}),e.jsx(s.SelectContent,{children:S.map(([d,N])=>e.jsxs(s.SelectGroup,{children:[d?e.jsx(s.SelectLabel,{children:d}):null,N.map(p=>e.jsx(s.SelectItem,{value:p.id,children:p.label},p.id))]},d||"_"))})]}),i?e.jsx(m.Button,{variant:"outline",size:"sm",onClick:i,disabled:!a&&!o,children:"Clear template"}):null]}):null,u||n?e.jsxs(e.Fragment,{children:[e.jsx(f.Separator,{}),e.jsx("div",{className:"text-xs font-medium text-muted-foreground",children:"Template"}),e.jsxs("div",{className:"flex flex-col gap-2",children:[u?e.jsx(h,{label:"Import template (JSON)",accept:b,onPick:u}):null,n?e.jsxs(m.Button,{variant:"outline",size:"sm",disabled:!o,onClick:n,children:[e.jsx(j.Download,{"aria-hidden":!0})," Export template (JSON)"]}):null]})]}):null,r||c?e.jsxs(e.Fragment,{children:[e.jsx(f.Separator,{}),e.jsx("div",{className:"text-xs font-medium text-muted-foreground",children:"Plate map"}),e.jsxs("div",{className:"flex flex-col gap-2",children:[r?e.jsx(h,{label:"Import plate map (CSV)",accept:v,onPick:r,triageCsv:!0}):null,c?e.jsxs(m.Button,{variant:"outline",size:"sm",disabled:!o,onClick:c,children:[e.jsx(j.Download,{"aria-hidden":!0})," Export plate map (CSV)"]}):null]})]}):null]})}exports.TemplateIOPanel=z;
+//# sourceMappingURL=TemplateIOPanel.cjs.map

package/dist/components/composed/PlateMapEditor/TemplateIOPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateIOPanel.cjs","sources":["../../../../src/components/composed/PlateMapEditor/TemplateIOPanel.tsx"],"sourcesContent":["import { Download, Upload } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { triagePlateMapCsvFile } from \"./csvPlateTriage\";\nimport { groupTemplateOptions } from \"./helpers\";\n\nimport type { ImportExportHandlers, PlateMapCsvTriage, TemplateOption } from \"./types\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TemplateIOPanelProps extends ImportExportHandlers {\n  templates?: TemplateOption[];\n  templateId?: string;\n  onTemplateChange?: (id: string) => void;\n  onClearTemplate?: () => void;\n  /** Disable export buttons when there's nothing to export. */\n  hasEntries?: boolean;\n  className?: string;\n  csvAccept?: string;\n  templateAccept?: string;\n}\n\ninterface FilePickerButtonProps {\n  label: string;\n  accept: string;\n  onPick: (file: File, triage?: PlateMapCsvTriage) => void | Promise<void>;\n  disabled?: boolean;\n  triageCsv?: boolean;\n}\n\nfunction FilePickerButton({ label, accept, onPick, disabled, triageCsv }: FilePickerButtonProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  return (\n    <>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" disabled={disabled} onClick={() => inputRef.current?.click()}>\n        <Upload aria-hidden /> {label}\n      </Button>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        hidden\n        onChange={(e) => {\n          const input = e.currentTarget;\n          const f = e.target.files?.[0];\n          if (!f) {\n            input.value = \"\";\n            return;\n          }\n\n          void (async () => {\n            const triage = triageCsv ? await triagePlateMapCsvFile(f) : undefined;\n            await (triage ? onPick(f, triage) : onPick(f));\n            input.value = \"\";\n          })();\n        }}\n      />\n    </>\n  );\n}\n\nexport function TemplateIOPanel({\n  templates,\n  templateId,\n  onTemplateChange,\n  onClearTemplate,\n  hasEntries,\n  onImportCsv,\n  onExportCsv,\n  onImportTemplate,\n  onExportTemplate,\n  className,\n  csvAccept = \".csv,text/csv\",\n  templateAccept = \"application/json\",\n}: TemplateIOPanelProps) {\n  const groups = React.useMemo(() => groupTemplateOptions(templates), [templates]);\n\n  return (\n    <div data-slot=\"template-io-panel\" className={cn(\"flex flex-col gap-3\", className)}>\n      <div className=\"text-sm font-medium\">Template &amp; import / export</div>\n\n      {templates && onTemplateChange ? (\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"plate-template\">Template</Label>\n          <Select value={templateId ?? \"\"} onValueChange={(v) => onTemplateChange(v)}>\n            <SelectTrigger id=\"plate-template\" size=\"sm\" className=\"w-full\">\n              <SelectValue placeholder=\"Select template…\" />\n            </SelectTrigger>\n            <SelectContent>\n              {groups.map(([group, opts]) => (\n                <SelectGroup key={group || \"_\"}>\n                  {group ? <SelectLabel>{group}</SelectLabel> : null}\n                  {opts.map((t) => (\n                    <SelectItem key={t.id} value={t.id}>\n                      {t.label}\n                    </SelectItem>\n                  ))}\n                </SelectGroup>\n              ))}\n            </SelectContent>\n          </Select>\n          {onClearTemplate ? (\n            <Button variant=\"outline\" size=\"sm\" onClick={onClearTemplate} disabled={!templateId && !hasEntries}>\n              Clear template\n            </Button>\n          ) : null}\n        </div>\n      ) : null}\n\n      {onImportTemplate || onExportTemplate ? (\n        <>\n          <Separator />\n          <div className=\"text-xs font-medium text-muted-foreground\">Template</div>\n          <div className=\"flex flex-col gap-2\">\n            {onImportTemplate ? (\n              <FilePickerButton label=\"Import template (JSON)\" accept={templateAccept} onPick={onImportTemplate} />\n            ) : null}\n            {onExportTemplate ? (\n              <Button variant=\"outline\" size=\"sm\" disabled={!hasEntries} onClick={onExportTemplate}>\n                <Download aria-hidden /> Export template (JSON)\n              </Button>\n            ) : null}\n          </div>\n        </>\n      ) : null}\n\n      {onImportCsv || onExportCsv ? (\n        <>\n          <Separator />\n          <div className=\"text-xs font-medium text-muted-foreground\">Plate map</div>\n          <div className=\"flex flex-col gap-2\">\n            {onImportCsv ? (\n              <FilePickerButton label=\"Import plate map (CSV)\" accept={csvAccept} onPick={onImportCsv} triageCsv />\n            ) : null}\n            {onExportCsv ? (\n              <Button variant=\"outline\" size=\"sm\" disabled={!hasEntries} onClick={onExportCsv}>\n                <Download aria-hidden /> Export plate map (CSV)\n              </Button>\n            ) : null}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["FilePickerButton","label","accept","onPick","disabled","triageCsv","inputRef","React","jsxs","Fragment","Button","jsx","Upload","e","input","f","triage","triagePlateMapCsvFile","TemplateIOPanel","templates","templateId","onTemplateChange","onClearTemplate","hasEntries","onImportCsv","onExportCsv","onImportTemplate","onExportTemplate","className","csvAccept","templateAccept","groups","groupTemplateOptions","cn","Label","Select","v","SelectTrigger","SelectValue","SelectContent","group","opts","SelectGroup","SelectLabel","t","SelectItem","Separator","Download"],"mappings":"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"}