@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.129.1 → 0.7.0-beta.131.1

package/dist/components/composed/PlateMapEditor/PlateMapEditor.d.ts

@@ -0,0 +1,106 @@
+import { PlateMapActionsMenuProps } from './PlateMapActionsMenu';
+import { PlateMapPlateSelectorVariant } from './PlateMapPlateSelector';
+import { WellShape } from './PlatePaintGrid';
+import { PlateFormat, PlateMapGroupOption, PlateMapPlateOption, WellColumn, WellField, WellId, WellRecord } from './types';
+import { Badge } from '../../ui/badge';
+import * as React from "react";
+export declare function getPlateMapScopedWellId(plateBarcode: string, wellId: WellId): WellId;
+export interface PlateMapEditorProps<T extends WellRecord = WellRecord> extends Omit<PlateMapActionsMenuProps, "hasEntries" | "className"> {
+    format: PlateFormat;
+    rows?: number;
+    columns?: number;
+    values: Map<WellId, T>;
+    onChange: (next: Map<WellId, T>) => void;
+    selection: Set<WellId>;
+    onSelectionChange: (next: Set<WellId>) => void;
+    fields: WellField<T>[];
+    tableColumns: WellColumn<T>[];
+    /** Resolves the SVG fill color for a well. */
+    colorForWell: (well: T | undefined, wellId: WellId) => string;
+    /** Builds an empty record when a well is freshly created. */
+    emptyEntry: (wellId: WellId) => T;
+    /**
+     * Merges the staged form record onto an existing well record on Apply.
+     * Defaults to a shallow merge (form keys overwrite existing keys when set).
+     */
+    mergeOnApply?: (existing: T | undefined, staged: Partial<T>, wellId: WellId) => T;
+    /** Filter for the manifest's "hide empty" mode. */
+    isPopulated?: (row: T) => boolean;
+    /** Select field cycled when double-clicking a single well, e.g. role painting. */
+    cycleFieldOnWellDoubleClick?: keyof T & string;
+    /** Optional header title (e.g. plate set name). */
+    title?: string;
+    /** Optional badges shown in the header next to the title. */
+    badges?: React.ReactNode;
+    /** Optional banner (e.g. import/error alert) shown above the layout. */
+    banner?: React.ReactNode;
+    /** Legend block rendered under the form column. */
+    legend?: React.ReactNode;
+    /** Form helper slot rendered between fields and the action row. */
+    formExtras?: React.ReactNode;
+    /**
+     * Fully replaces the left column. When set, the built-in `WellMetadataForm`
+     * is omitted — use this for alternative workflows like a drag-and-drop
+     * source palette. The legend slot still renders beneath the replacement.
+     */
+    formSlot?: React.ReactNode;
+    /** Footer actions (e.g. Save, Back). */
+    footer?: React.ReactNode;
+    /** Title for the plate grid panel. */
+    plateTitle?: React.ReactNode;
+    /** Optional controls shown next to the built-in actions menu. */
+    plateToolbar?: React.ReactNode;
+    /** User-provided plates available for this editor. Barcodes are never generated by the editor. */
+    plates?: PlateMapPlateOption[];
+    activePlateId?: string;
+    onPlateChange?: (plateId: string) => void;
+    /** Opens the host app's manual barcode entry flow for creating a plate. */
+    onAddPlate?: () => void;
+    /** Removes a plate (typically when using `plateSelectorVariant="tabs"`). */
+    onRemovePlate?: (plateId: string) => void;
+    addPlateLabel?: string;
+    removePlateLabel?: string;
+    plateSelectorLabel?: string;
+    /** Layout of the plate selector. Defaults to `"dropdown"`. */
+    plateSelectorVariant?: PlateMapPlateSelectorVariant;
+    /** Row field used to stamp the active user-provided barcode onto edited wells. Defaults to `plateBarcode`. */
+    plateBarcodeField?: keyof T & string;
+    /** Header for the automatic manifest barcode column. */
+    plateBarcodeColumnHeader?: string;
+    /** Hide the automatic manifest barcode column when plate-scoped editing is active. */
+    hidePlateBarcodeColumn?: boolean;
+    /** Optional grouped well shortcuts rendered under the grid. */
+    groups?: PlateMapGroupOption[];
+    activeGroupId?: string;
+    onGroupClick?: (group: PlateMapGroupOption) => void;
+    /** Custom hover summary for the strip above the grid. */
+    renderHoverSummary?: (well: T | undefined, wellId: WellId) => React.ReactNode;
+    /** Fixed well size. When unset, the grid grows with the available width. */
+    cellSize?: number;
+    /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */
+    emptyWellFillColor?: string | null;
+    /** Well shape forwarded to `PlatePaintGrid`. Defaults to `"rect"`. */
+    wellShape?: WellShape;
+    /** When true, wraps the grid in a card-like plate frame (rounded + border + soft shadow). */
+    framedPlate?: boolean;
+    /**
+     * Forwarded to `PlatePaintGrid`. Render-prop that places a node inside each
+     * absolute-positioned well cell — used to wire drop targets without binding
+     * the kit to a specific DnD library.
+     */
+    wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;
+    /** Wells to highlight (e.g. when hovering a legend item externally). */
+    highlightedWellIds?: ReadonlySet<WellId>;
+    /** Fires whenever the currently hovered well changes (null on leave). */
+    onHoveredWellChange?: (wellId: WellId | null) => void;
+    /** Enables the filter popover on the manifest table. */
+    manifestFilterable?: boolean;
+    /** Enables the group-by selector on the manifest table. */
+    manifestGroupable?: boolean;
+    autoScaleGrid?: boolean;
+    minCellSize?: number;
+    maxCellSize?: number;
+    className?: string;
+}
+export declare function PlateMapEditor<T extends WellRecord = WellRecord>({ format, rows, columns, values, onChange, selection, onSelectionChange, fields, tableColumns, colorForWell, emptyEntry, mergeOnApply, isPopulated, cycleFieldOnWellDoubleClick, title, badges, banner, legend, formExtras, formSlot, footer, plateTitle, plateToolbar, plates, activePlateId, onPlateChange, onAddPlate, onRemovePlate, addPlateLabel, removePlateLabel, plateSelectorLabel, plateSelectorVariant, plateBarcodeField, plateBarcodeColumnHeader, hidePlateBarcodeColumn, groups, activeGroupId, onGroupClick, renderHoverSummary, cellSize, emptyWellFillColor, wellShape, framedPlate, wrapWell, highlightedWellIds, onHoveredWellChange, manifestFilterable, manifestGroupable, autoScaleGrid, minCellSize, maxCellSize, className, templates, templateId, onTemplateChange, onClearTemplate, onImportCsv, onExportCsv, onImportTemplate, onExportTemplate, csvAccept, templateAccept, label, align, side, importTemplateLabel, exportTemplateLabel, importCsvLabel, exportCsvLabel, clearLabel, }: PlateMapEditorProps<T>): import("react/jsx-runtime").JSX.Element;
+export { Badge as PlateBadge };

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

@@ -6,8 +6,8 @@ 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 { 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) {

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("./WellMetadataForm.cjs"),x=require("../../ui/separator.cjs"),j=require("../../../lib/utils.cjs");function f({fields:t,value:a,onChange:l,selectionSize:o,onApply:s,onClear:n,applyLabel:i,clearLabel:c,extras:u,legend:r,formSlot:m,className:p}){return e.jsxs("div",{"data-slot":"plate-map-form",className:j.cn("flex flex-col gap-3",p),children:[m??e.jsx(d.WellMetadataForm,{fields:t,value:a,onChange:l,selectionSize:o,onApply:s,onClear:n,applyLabel:i,clearLabel:c,extras:u}),r?e.jsxs(e.Fragment,{children:[e.jsx(x.Separator,{}),r]}):null]})}exports.PlateMapForm=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("./WellMetadataForm.cjs"),x=require("../../../ui/separator.cjs"),j=require("../../../lib/utils.cjs");function f({fields:t,value:a,onChange:l,selectionSize:o,onApply:s,onClear:i,applyLabel:n,clearLabel:u,extras:c,legend:r,formSlot:m,className:p}){return e.jsxs("div",{"data-slot":"plate-map-form",className:j.cn("flex flex-col gap-3",p),children:[m??e.jsx(d.WellMetadataForm,{fields:t,value:a,onChange:l,selectionSize:o,onApply:s,onClear:i,applyLabel:n,clearLabel:u,extras:c}),r?e.jsxs(e.Fragment,{children:[e.jsx(x.Separator,{}),r]}):null]})}exports.PlateMapForm=f;
 //# sourceMappingURL=PlateMapForm.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMapForm.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapForm.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { WellMetadataForm } from \"./WellMetadataForm\";\n\nimport type { WellField, WellRecord } from \"./types\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlateMapFormProps<T extends WellRecord = WellRecord> {\n  fields: WellField<T>[];\n  /** Staged values applied across the current selection on Apply. */\n  value: Partial<T>;\n  onChange: (next: Partial<T>) => void;\n  selectionSize: number;\n  onApply: () => void;\n  onClear: () => void;\n  applyLabel?: string;\n  clearLabel?: string;\n  /** Helper slot rendered between the fields and the action row. */\n  extras?: React.ReactNode;\n  /** Legend block rendered beneath the form, separated by a divider. */\n  legend?: React.ReactNode;\n  /**\n   * Fully replaces the built-in `WellMetadataForm` — e.g. a drag-and-drop\n   * source palette. The legend slot still renders beneath the replacement.\n   */\n  formSlot?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Card-agnostic metadata form panel. Renders the staged-value form (or a\n * caller-supplied `formSlot`) plus an optional legend. Bring your own\n * container — drop it bare into a sidebar, wrap it in a `Card`, or stack it\n * above the grid.\n */\nexport function PlateMapForm<T extends WellRecord = WellRecord>({\n  fields,\n  value,\n  onChange,\n  selectionSize,\n  onApply,\n  onClear,\n  applyLabel,\n  clearLabel,\n  extras,\n  legend,\n  formSlot,\n  className,\n}: PlateMapFormProps<T>) {\n  return (\n    <div data-slot=\"plate-map-form\" className={cn(\"flex flex-col gap-3\", className)}>\n      {formSlot ?? (\n        <WellMetadataForm<T>\n          fields={fields}\n          value={value}\n          onChange={onChange}\n          selectionSize={selectionSize}\n          onApply={onApply}\n          onClear={onClear}\n          applyLabel={applyLabel}\n          clearLabel={clearLabel}\n          extras={extras}\n        />\n      )}\n      {legend ? (\n        <>\n          <Separator />\n          {legend}\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["PlateMapForm","fields","value","onChange","selectionSize","onApply","onClear","applyLabel","clearLabel","extras","legend","formSlot","className","jsxs","cn","jsx","WellMetadataForm","Fragment","Separator"],"mappings":"iOAqCO,SAASA,EAAgD,CAC9D,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,OAAAC,EACA,OAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAyB,CACvB,OACEC,OAAC,OAAI,YAAU,iBAAiB,UAAWC,EAAAA,GAAG,sBAAuBF,CAAS,EAC3E,SAAA,CAAAD,GACCI,EAAAA,IAACC,EAAAA,iBAAA,CACC,OAAAf,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,OAAAC,CAAA,CAAA,EAGHC,EACCG,EAAAA,KAAAI,WAAA,CACE,SAAA,CAAAF,EAAAA,IAACG,EAAAA,UAAA,EAAU,EACVR,CAAA,CAAA,CACH,EACE,IAAA,EACN,CAEJ"}
+{"version":3,"file":"PlateMapForm.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapForm.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { WellMetadataForm } from \"./WellMetadataForm\";\n\nimport type { WellField, WellRecord } from \"./types\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlateMapFormProps<T extends WellRecord = WellRecord> {\n  fields: WellField<T>[];\n  /** Staged values applied across the current selection on Apply. */\n  value: Partial<T>;\n  onChange: (next: Partial<T>) => void;\n  selectionSize: number;\n  onApply: () => void;\n  onClear: () => void;\n  applyLabel?: string;\n  clearLabel?: string;\n  /** Helper slot rendered between the fields and the action row. */\n  extras?: React.ReactNode;\n  /** Legend block rendered beneath the form, separated by a divider. */\n  legend?: React.ReactNode;\n  /**\n   * Fully replaces the built-in `WellMetadataForm` — e.g. a drag-and-drop\n   * source palette. The legend slot still renders beneath the replacement.\n   */\n  formSlot?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Card-agnostic metadata form panel. Renders the staged-value form (or a\n * caller-supplied `formSlot`) plus an optional legend. Bring your own\n * container — drop it bare into a sidebar, wrap it in a `Card`, or stack it\n * above the grid.\n */\nexport function PlateMapForm<T extends WellRecord = WellRecord>({\n  fields,\n  value,\n  onChange,\n  selectionSize,\n  onApply,\n  onClear,\n  applyLabel,\n  clearLabel,\n  extras,\n  legend,\n  formSlot,\n  className,\n}: PlateMapFormProps<T>) {\n  return (\n    <div data-slot=\"plate-map-form\" className={cn(\"flex flex-col gap-3\", className)}>\n      {formSlot ?? (\n        <WellMetadataForm<T>\n          fields={fields}\n          value={value}\n          onChange={onChange}\n          selectionSize={selectionSize}\n          onApply={onApply}\n          onClear={onClear}\n          applyLabel={applyLabel}\n          clearLabel={clearLabel}\n          extras={extras}\n        />\n      )}\n      {legend ? (\n        <>\n          <Separator />\n          {legend}\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["PlateMapForm","fields","value","onChange","selectionSize","onApply","onClear","applyLabel","clearLabel","extras","legend","formSlot","className","jsxs","cn","jsx","WellMetadataForm","Fragment","Separator"],"mappings":"oOAqCO,SAASA,EAAgD,CAC9D,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,OAAAC,EACA,OAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAyB,CACvB,OACEC,OAAC,OAAI,YAAU,iBAAiB,UAAWC,EAAAA,GAAG,sBAAuBF,CAAS,EAC3E,SAAA,CAAAD,GACCI,EAAAA,IAACC,EAAAA,iBAAA,CACC,OAAAf,EACA,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,OAAAC,CAAA,CAAA,EAGHC,EACCG,EAAAA,KAAAI,WAAA,CACE,SAAA,CAAAF,EAAAA,IAACG,EAAAA,UAAA,EAAU,EACVR,CAAA,CAAA,CACH,EACE,IAAA,EACN,CAEJ"}

package/dist/components/composed/PlateMapEditor/PlateMapForm.d.ts

@@ -0,0 +1,30 @@
+import { WellField, WellRecord } from './types';
+import * as React from "react";
+export interface PlateMapFormProps<T extends WellRecord = WellRecord> {
+    fields: WellField<T>[];
+    /** Staged values applied across the current selection on Apply. */
+    value: Partial<T>;
+    onChange: (next: Partial<T>) => void;
+    selectionSize: number;
+    onApply: () => void;
+    onClear: () => void;
+    applyLabel?: string;
+    clearLabel?: string;
+    /** Helper slot rendered between the fields and the action row. */
+    extras?: React.ReactNode;
+    /** Legend block rendered beneath the form, separated by a divider. */
+    legend?: React.ReactNode;
+    /**
+     * Fully replaces the built-in `WellMetadataForm` — e.g. a drag-and-drop
+     * source palette. The legend slot still renders beneath the replacement.
+     */
+    formSlot?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Card-agnostic metadata form panel. Renders the staged-value form (or a
+ * caller-supplied `formSlot`) plus an optional legend. Bring your own
+ * container — drop it bare into a sidebar, wrap it in a `Card`, or stack it
+ * above the grid.
+ */
+export declare function PlateMapForm<T extends WellRecord = WellRecord>({ fields, value, onChange, selectionSize, onApply, onClear, applyLabel, clearLabel, extras, legend, formSlot, className, }: PlateMapFormProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as a, Fragment as d } from "react/jsx-runtime";
 import { WellMetadataForm as u } from "./WellMetadataForm.js";
-import { Separator as F } from "../../ui/separator.js";
+import { Separator as F } from "../../../ui/separator.js";
 import { cn as h } from "../../../lib/utils.js";
 function N({
   fields: t,

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),X=require("react"),Y=require("./PlatePaintGrid.cjs"),h=require("./wellGrid.cjs"),Z=require("../../ui/separator.cjs"),j=require("../../../lib/utils.cjs");function $(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const ee=$(X);function te(l,s){return s.map(t=>{const n=l[t.key];if(n==null||n==="")return null;if(t.kind==="select")return(t.options??[]).find(o=>o.value===n)?.label??String(n);if(t.kind==="multiselect"){const i=Array.isArray(n)?n:[];return i.length===0?null:i.map(o=>(t.options??[]).find(c=>c.value===o)?.label??o).join(", ")}return t.kind==="boolean"?n?t.label:null:String(n)}).filter(Boolean)}function ne({format:l,rows:s,columns:t,values:n,selection:i,onSelectionChange:o,colorForWell:c,fields:m,renderHoverSummary:y,onHoveredWellChange:g,hoveredWellId:x,toolbar:f,hideSelectionControls:N=!1,selectAllLabel:P="Select all",deselectAllLabel:w="Deselect all",emptyWellFillColor:S,wellShape:k,framed:q,wrapWell:C,highlightedWellIds:O,onWellDoubleClick:A,selectionFillMode:G,flashWellId:H,flashWellKey:D,cellSize:M,autoScale:R,minCellSize:F,maxCellSize:T,groups:d,activeGroupId:_,onGroupClick:z,className:B}){const E=h.resolveDimensions(l,s,t),[I,J]=ee.useState(null),p=x!==void 0,a=p?x:I,K=()=>o(new Set(h.allPositions(E))),L=()=>o(new Set),u=a?n.get(a):void 0,Q=u&&m?te(u,m):[],U=a?y?.(u,a)??[a,...Q].join(" • "):" ",v=!N,V=!!f||v;return e.jsxs("div",{"data-slot":"plate-map-grid",className:j.cn("flex flex-col gap-1.5",B),children:[V?e.jsxs("div",{className:"flex flex-wrap items-center justify-start gap-3",children:[f,v?e.jsxs("div",{className:"flex items-center gap-2 text-xs",children:[e.jsx("button",{type:"button",className:"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",onClick:K,children:P}),e.jsx("span",{className:"text-muted-foreground/60",children:"·"}),e.jsx("button",{type:"button",className:"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",onClick:L,children:w})]}):null]}):null,e.jsx("div",{className:"h-5 text-xs text-muted-foreground",children:U}),e.jsx(Y.PlatePaintGrid,{format:l,rows:s,columns:t,values:n,selection:i,onSelectionChange:o,colorForWell:c,emptyWellFillColor:S,wellShape:k,framed:q,wrapWell:C,highlightedWellIds:O,onWellHover:r=>{p||J(r),g?.(r)},onWellDoubleClick:A,selectionFillMode:G,flashWellId:H,flashWellKey:D,cellSize:M,autoScale:R,minCellSize:F,maxCellSize:T}),d&&d.length>0?e.jsxs(e.Fragment,{children:[e.jsx(Z.Separator,{className:"mt-2"}),e.jsx("div",{className:"flex max-h-28 flex-wrap gap-3 overflow-y-auto pt-1",children:d.map(r=>{const W=r.id===_,b=r.count??r.wellIds?.length;return e.jsxs("button",{type:"button",disabled:r.disabled,onClick:()=>z?.(r),className:j.cn("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-accent/60",W&&"bg-muted text-foreground ring-1 ring-primary/40",r.disabled&&"pointer-events-none opacity-50"),title:r.label,children:[e.jsx("span",{className:"size-7 rounded-full border",style:{backgroundColor:r.color,borderColor:r.borderColor},"aria-hidden":!0}),e.jsx("span",{className:"w-full truncate text-foreground",children:r.label}),b===void 0?null:e.jsxs("span",{className:"text-[0.7rem] leading-none text-muted-foreground",children:[b," wells"]})]},r.id)})})]}):null]})}exports.PlateMapGrid=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),X=require("react"),Y=require("./PlatePaintGrid.cjs"),h=require("./wellGrid.cjs"),Z=require("../../../ui/separator.cjs"),j=require("../../../lib/utils.cjs");function $(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const ee=$(X);function te(l,s){return s.map(t=>{const n=l[t.key];if(n==null||n==="")return null;if(t.kind==="select")return(t.options??[]).find(o=>o.value===n)?.label??String(n);if(t.kind==="multiselect"){const i=Array.isArray(n)?n:[];return i.length===0?null:i.map(o=>(t.options??[]).find(c=>c.value===o)?.label??o).join(", ")}return t.kind==="boolean"?n?t.label:null:String(n)}).filter(Boolean)}function ne({format:l,rows:s,columns:t,values:n,selection:i,onSelectionChange:o,colorForWell:c,fields:m,renderHoverSummary:y,onHoveredWellChange:g,hoveredWellId:x,toolbar:f,hideSelectionControls:N=!1,selectAllLabel:P="Select all",deselectAllLabel:w="Deselect all",emptyWellFillColor:S,wellShape:k,framed:q,wrapWell:C,highlightedWellIds:O,onWellDoubleClick:A,selectionFillMode:G,flashWellId:H,flashWellKey:D,cellSize:M,autoScale:R,minCellSize:_,maxCellSize:F,groups:d,activeGroupId:T,onGroupClick:z,className:B}){const E=h.resolveDimensions(l,s,t),[I,J]=ee.useState(null),p=x!==void 0,a=p?x:I,K=()=>o(new Set(h.allPositions(E))),L=()=>o(new Set),u=a?n.get(a):void 0,Q=u&&m?te(u,m):[],U=a?y?.(u,a)??[a,...Q].join(" • "):" ",v=!N,V=!!f||v;return e.jsxs("div",{"data-slot":"plate-map-grid",className:j.cn("flex flex-col gap-1.5",B),children:[V?e.jsxs("div",{className:"flex flex-wrap items-center justify-start gap-3",children:[f,v?e.jsxs("div",{className:"flex items-center gap-2 text-xs",children:[e.jsx("button",{type:"button",className:"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",onClick:K,children:P}),e.jsx("span",{className:"text-muted-foreground/60",children:"·"}),e.jsx("button",{type:"button",className:"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline",onClick:L,children:w})]}):null]}):null,e.jsx("div",{className:"h-5 text-xs text-muted-foreground",children:U}),e.jsx(Y.PlatePaintGrid,{format:l,rows:s,columns:t,values:n,selection:i,onSelectionChange:o,colorForWell:c,emptyWellFillColor:S,wellShape:k,framed:q,wrapWell:C,highlightedWellIds:O,onWellHover:r=>{p||J(r),g?.(r)},onWellDoubleClick:A,selectionFillMode:G,flashWellId:H,flashWellKey:D,cellSize:M,autoScale:R,minCellSize:_,maxCellSize:F}),d&&d.length>0?e.jsxs(e.Fragment,{children:[e.jsx(Z.Separator,{className:"mt-2"}),e.jsx("div",{className:"flex max-h-28 flex-wrap gap-3 overflow-y-auto pt-1",children:d.map(r=>{const W=r.id===T,b=r.count??r.wellIds?.length;return e.jsxs("button",{type:"button",disabled:r.disabled,onClick:()=>z?.(r),className:j.cn("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-accent/60",W&&"bg-muted text-foreground ring-1 ring-primary/40",r.disabled&&"pointer-events-none opacity-50"),title:r.label,children:[e.jsx("span",{className:"size-7 rounded-full border",style:{backgroundColor:r.color,borderColor:r.borderColor},"aria-hidden":!0}),e.jsx("span",{className:"w-full truncate text-foreground",children:r.label}),b===void 0?null:e.jsxs("span",{className:"text-[0.7rem] leading-none text-muted-foreground",children:[b," wells"]})]},r.id)})})]}):null]})}exports.PlateMapGrid=ne;
 //# sourceMappingURL=PlateMapGrid.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMapGrid.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapGrid.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { PlatePaintGrid } from \"./PlatePaintGrid\";\nimport { allPositions, resolveDimensions } from \"./wellGrid\";\n\nimport type { WellShape } from \"./PlatePaintGrid\";\nimport type { PlateFormat, PlateMapGroupOption, WellField, WellId, WellRecord } from \"./types\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction formatHoverFields<T extends WellRecord>(entry: T, fields: WellField<T>[]): string[] {\n  return fields\n    .map((f) => {\n      const v = entry[f.key];\n      if (v === undefined || v === null || v === \"\") return null;\n      if (f.kind === \"select\") {\n        const opt = (f.options ?? []).find((o) => o.value === v);\n        return opt?.label ?? String(v);\n      }\n      if (f.kind === \"multiselect\") {\n        const arr = Array.isArray(v) ? (v as string[]) : [];\n        if (arr.length === 0) return null;\n        return arr.map((item) => (f.options ?? []).find((o) => o.value === item)?.label ?? item).join(\", \");\n      }\n      if (f.kind === \"boolean\") {\n        return v ? f.label : null;\n      }\n      return String(v);\n    })\n    .filter(Boolean) as string[];\n}\n\nexport interface PlateMapGridProps<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  /** Resolves the SVG fill color for a well. */\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  /** Field schema used to build the default hover summary string. */\n  fields?: WellField<T>[];\n  /** Custom hover summary for the strip above the grid. */\n  renderHoverSummary?: (well: T | undefined, wellId: WellId) => React.ReactNode;\n  /** Fires whenever the currently hovered well changes (null on leave). */\n  onHoveredWellChange?: (wellId: WellId | null) => void;\n  /**\n   * Controlled hovered well id. When provided, the panel reflects this value\n   * instead of tracking hover internally — useful for syncing the hover\n   * summary with external state (e.g. resetting it on a plate switch).\n   */\n  hoveredWellId?: WellId | null;\n  /** Controls rendered to the left of the built-in select/deselect links. */\n  toolbar?: React.ReactNode;\n  /** Hide the built-in \"Select all\" / \"Deselect all\" links. */\n  hideSelectionControls?: boolean;\n  selectAllLabel?: string;\n  deselectAllLabel?: string;\n  /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */\n  emptyWellFillColor?: string | null;\n  /** Well shape forwarded to `PlatePaintGrid`. Defaults to `\"rect\"`. */\n  wellShape?: WellShape;\n  /** When true, wraps the grid in a card-like plate frame (rounded + border + soft shadow). */\n  framed?: boolean;\n  /** Render-prop that places a node inside each absolute-positioned well cell. */\n  wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;\n  /** Wells to highlight (e.g. when hovering a legend item externally). */\n  highlightedWellIds?: ReadonlySet<WellId>;\n  onWellDoubleClick?: (wellId: WellId) => void;\n  selectionFillMode?: \"selection\" | \"well\";\n  flashWellId?: WellId;\n  flashWellKey?: number;\n  /** Fixed well size. When unset, the grid grows with the available width. */\n  cellSize?: number;\n  autoScale?: boolean;\n  minCellSize?: number;\n  maxCellSize?: number;\n  /** Optional grouped well shortcuts rendered under the grid. */\n  groups?: PlateMapGroupOption[];\n  activeGroupId?: string;\n  onGroupClick?: (group: PlateMapGroupOption) => void;\n  className?: string;\n}\n\n/**\n * Card-agnostic plate grid panel. Renders the selection toolbar, hover\n * summary, the interactive `PlatePaintGrid`, and optional group shortcuts —\n * and owns the ephemeral hover state internally. The plate title, plate\n * selector, and actions menu are intentionally NOT part of this panel; compose\n * `PlateMapPlateSelector` and `PlateMapActionsMenu` around it for full layout\n * freedom.\n */\nexport function PlateMapGrid<T extends WellRecord = WellRecord>({\n  format,\n  rows,\n  columns,\n  values,\n  selection,\n  onSelectionChange,\n  colorForWell,\n  fields,\n  renderHoverSummary,\n  onHoveredWellChange,\n  hoveredWellId,\n  toolbar,\n  hideSelectionControls = false,\n  selectAllLabel = \"Select all\",\n  deselectAllLabel = \"Deselect all\",\n  emptyWellFillColor,\n  wellShape,\n  framed,\n  wrapWell,\n  highlightedWellIds,\n  onWellDoubleClick,\n  selectionFillMode,\n  flashWellId,\n  flashWellKey,\n  cellSize,\n  autoScale,\n  minCellSize,\n  maxCellSize,\n  groups,\n  activeGroupId,\n  onGroupClick,\n  className,\n}: PlateMapGridProps<T>) {\n  const dims = resolveDimensions(format, rows, columns);\n  const [internalHoverPos, setInternalHoverPos] = React.useState<WellId | null>(null);\n  const isHoverControlled = hoveredWellId !== undefined;\n  const hoverPos = isHoverControlled ? hoveredWellId : internalHoverPos;\n\n  const selectAll = () => onSelectionChange(new Set(allPositions(dims)));\n  const deselectAll = () => onSelectionChange(new Set());\n\n  const hoverEntry = hoverPos ? values.get(hoverPos) : undefined;\n  const hoverFields = hoverEntry && fields ? formatHoverFields(hoverEntry, fields) : [];\n  const hoverSummary = hoverPos\n    ? (renderHoverSummary?.(hoverEntry, hoverPos) ?? [hoverPos, ...hoverFields].join(\" • \"))\n    : \" \";\n\n  const showSelectionControls = !hideSelectionControls;\n  const showToolbarRow = !!toolbar || showSelectionControls;\n\n  return (\n    <div data-slot=\"plate-map-grid\" className={cn(\"flex flex-col gap-1.5\", className)}>\n      {showToolbarRow ? (\n        <div className=\"flex flex-wrap items-center justify-start gap-3\">\n          {toolbar}\n          {showSelectionControls ? (\n            <div className=\"flex items-center gap-2 text-xs\">\n              <button\n                type=\"button\"\n                className=\"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline\"\n                onClick={selectAll}\n              >\n                {selectAllLabel}\n              </button>\n              <span className=\"text-muted-foreground/60\">·</span>\n              <button\n                type=\"button\"\n                className=\"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline\"\n                onClick={deselectAll}\n              >\n                {deselectAllLabel}\n              </button>\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className=\"h-5 text-xs text-muted-foreground\">{hoverSummary}</div>\n      <PlatePaintGrid\n        format={format}\n        rows={rows}\n        columns={columns}\n        values={values}\n        selection={selection}\n        onSelectionChange={onSelectionChange}\n        colorForWell={colorForWell}\n        emptyWellFillColor={emptyWellFillColor}\n        wellShape={wellShape}\n        framed={framed}\n        wrapWell={wrapWell}\n        highlightedWellIds={highlightedWellIds}\n        onWellHover={(wellId) => {\n          if (!isHoverControlled) setInternalHoverPos(wellId);\n          onHoveredWellChange?.(wellId);\n        }}\n        onWellDoubleClick={onWellDoubleClick}\n        selectionFillMode={selectionFillMode}\n        flashWellId={flashWellId}\n        flashWellKey={flashWellKey}\n        cellSize={cellSize}\n        autoScale={autoScale}\n        minCellSize={minCellSize}\n        maxCellSize={maxCellSize}\n      />\n      {groups && groups.length > 0 ? (\n        <>\n          <Separator className=\"mt-2\" />\n          <div className=\"flex max-h-28 flex-wrap gap-3 overflow-y-auto pt-1\">\n            {groups.map((group) => {\n              const isActive = group.id === activeGroupId;\n              const count = group.count ?? group.wellIds?.length;\n              return (\n                <button\n                  key={group.id}\n                  type=\"button\"\n                  disabled={group.disabled}\n                  onClick={() => onGroupClick?.(group)}\n                  className={cn(\n                    \"flex w-16 flex-col items-center gap-1 rounded-md px-1 py-1 text-center text-xs transition-colors\",\n                    \"text-muted-foreground hover:bg-accent/60\",\n                    isActive && \"bg-muted text-foreground ring-1 ring-primary/40\",\n                    group.disabled && \"pointer-events-none opacity-50\",\n                  )}\n                  title={group.label}\n                >\n                  <span\n                    className=\"size-7 rounded-full border\"\n                    style={{\n                      backgroundColor: group.color,\n                      borderColor: group.borderColor,\n                    }}\n                    aria-hidden\n                  />\n                  <span className=\"w-full truncate text-foreground\">{group.label}</span>\n                  {count === undefined ? null : (\n                    <span className=\"text-[0.7rem] leading-none text-muted-foreground\">{count} wells</span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["formatHoverFields","entry","fields","f","v","arr","item","o","PlateMapGrid","format","rows","columns","values","selection","onSelectionChange","colorForWell","renderHoverSummary","onHoveredWellChange","hoveredWellId","toolbar","hideSelectionControls","selectAllLabel","deselectAllLabel","emptyWellFillColor","wellShape","framed","wrapWell","highlightedWellIds","onWellDoubleClick","selectionFillMode","flashWellId","flashWellKey","cellSize","autoScale","minCellSize","maxCellSize","groups","activeGroupId","onGroupClick","className","dims","resolveDimensions","internalHoverPos","setInternalHoverPos","React","isHoverControlled","hoverPos","selectAll","allPositions","deselectAll","hoverEntry","hoverFields","hoverSummary","showSelectionControls","showToolbarRow","jsxs","cn","jsx","PlatePaintGrid","wellId","Fragment","Separator","group","isActive","count"],"mappings":"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"}
+{"version":3,"file":"PlateMapGrid.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapGrid.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { PlatePaintGrid } from \"./PlatePaintGrid\";\nimport { allPositions, resolveDimensions } from \"./wellGrid\";\n\nimport type { WellShape } from \"./PlatePaintGrid\";\nimport type { PlateFormat, PlateMapGroupOption, WellField, WellId, WellRecord } from \"./types\";\n\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction formatHoverFields<T extends WellRecord>(entry: T, fields: WellField<T>[]): string[] {\n  return fields\n    .map((f) => {\n      const v = entry[f.key];\n      if (v === undefined || v === null || v === \"\") return null;\n      if (f.kind === \"select\") {\n        const opt = (f.options ?? []).find((o) => o.value === v);\n        return opt?.label ?? String(v);\n      }\n      if (f.kind === \"multiselect\") {\n        const arr = Array.isArray(v) ? (v as string[]) : [];\n        if (arr.length === 0) return null;\n        return arr.map((item) => (f.options ?? []).find((o) => o.value === item)?.label ?? item).join(\", \");\n      }\n      if (f.kind === \"boolean\") {\n        return v ? f.label : null;\n      }\n      return String(v);\n    })\n    .filter(Boolean) as string[];\n}\n\nexport interface PlateMapGridProps<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  /** Resolves the SVG fill color for a well. */\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  /** Field schema used to build the default hover summary string. */\n  fields?: WellField<T>[];\n  /** Custom hover summary for the strip above the grid. */\n  renderHoverSummary?: (well: T | undefined, wellId: WellId) => React.ReactNode;\n  /** Fires whenever the currently hovered well changes (null on leave). */\n  onHoveredWellChange?: (wellId: WellId | null) => void;\n  /**\n   * Controlled hovered well id. When provided, the panel reflects this value\n   * instead of tracking hover internally — useful for syncing the hover\n   * summary with external state (e.g. resetting it on a plate switch).\n   */\n  hoveredWellId?: WellId | null;\n  /** Controls rendered to the left of the built-in select/deselect links. */\n  toolbar?: React.ReactNode;\n  /** Hide the built-in \"Select all\" / \"Deselect all\" links. */\n  hideSelectionControls?: boolean;\n  selectAllLabel?: string;\n  deselectAllLabel?: string;\n  /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */\n  emptyWellFillColor?: string | null;\n  /** Well shape forwarded to `PlatePaintGrid`. Defaults to `\"rect\"`. */\n  wellShape?: WellShape;\n  /** When true, wraps the grid in a card-like plate frame (rounded + border + soft shadow). */\n  framed?: boolean;\n  /** Render-prop that places a node inside each absolute-positioned well cell. */\n  wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;\n  /** Wells to highlight (e.g. when hovering a legend item externally). */\n  highlightedWellIds?: ReadonlySet<WellId>;\n  onWellDoubleClick?: (wellId: WellId) => void;\n  selectionFillMode?: \"selection\" | \"well\";\n  flashWellId?: WellId;\n  flashWellKey?: number;\n  /** Fixed well size. When unset, the grid grows with the available width. */\n  cellSize?: number;\n  autoScale?: boolean;\n  minCellSize?: number;\n  maxCellSize?: number;\n  /** Optional grouped well shortcuts rendered under the grid. */\n  groups?: PlateMapGroupOption[];\n  activeGroupId?: string;\n  onGroupClick?: (group: PlateMapGroupOption) => void;\n  className?: string;\n}\n\n/**\n * Card-agnostic plate grid panel. Renders the selection toolbar, hover\n * summary, the interactive `PlatePaintGrid`, and optional group shortcuts —\n * and owns the ephemeral hover state internally. The plate title, plate\n * selector, and actions menu are intentionally NOT part of this panel; compose\n * `PlateMapPlateSelector` and `PlateMapActionsMenu` around it for full layout\n * freedom.\n */\nexport function PlateMapGrid<T extends WellRecord = WellRecord>({\n  format,\n  rows,\n  columns,\n  values,\n  selection,\n  onSelectionChange,\n  colorForWell,\n  fields,\n  renderHoverSummary,\n  onHoveredWellChange,\n  hoveredWellId,\n  toolbar,\n  hideSelectionControls = false,\n  selectAllLabel = \"Select all\",\n  deselectAllLabel = \"Deselect all\",\n  emptyWellFillColor,\n  wellShape,\n  framed,\n  wrapWell,\n  highlightedWellIds,\n  onWellDoubleClick,\n  selectionFillMode,\n  flashWellId,\n  flashWellKey,\n  cellSize,\n  autoScale,\n  minCellSize,\n  maxCellSize,\n  groups,\n  activeGroupId,\n  onGroupClick,\n  className,\n}: PlateMapGridProps<T>) {\n  const dims = resolveDimensions(format, rows, columns);\n  const [internalHoverPos, setInternalHoverPos] = React.useState<WellId | null>(null);\n  const isHoverControlled = hoveredWellId !== undefined;\n  const hoverPos = isHoverControlled ? hoveredWellId : internalHoverPos;\n\n  const selectAll = () => onSelectionChange(new Set(allPositions(dims)));\n  const deselectAll = () => onSelectionChange(new Set());\n\n  const hoverEntry = hoverPos ? values.get(hoverPos) : undefined;\n  const hoverFields = hoverEntry && fields ? formatHoverFields(hoverEntry, fields) : [];\n  const hoverSummary = hoverPos\n    ? (renderHoverSummary?.(hoverEntry, hoverPos) ?? [hoverPos, ...hoverFields].join(\" • \"))\n    : \" \";\n\n  const showSelectionControls = !hideSelectionControls;\n  const showToolbarRow = !!toolbar || showSelectionControls;\n\n  return (\n    <div data-slot=\"plate-map-grid\" className={cn(\"flex flex-col gap-1.5\", className)}>\n      {showToolbarRow ? (\n        <div className=\"flex flex-wrap items-center justify-start gap-3\">\n          {toolbar}\n          {showSelectionControls ? (\n            <div className=\"flex items-center gap-2 text-xs\">\n              <button\n                type=\"button\"\n                className=\"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline\"\n                onClick={selectAll}\n              >\n                {selectAllLabel}\n              </button>\n              <span className=\"text-muted-foreground/60\">·</span>\n              <button\n                type=\"button\"\n                className=\"font-medium text-primary underline-offset-2 hover:text-primary/80 hover:underline\"\n                onClick={deselectAll}\n              >\n                {deselectAllLabel}\n              </button>\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className=\"h-5 text-xs text-muted-foreground\">{hoverSummary}</div>\n      <PlatePaintGrid\n        format={format}\n        rows={rows}\n        columns={columns}\n        values={values}\n        selection={selection}\n        onSelectionChange={onSelectionChange}\n        colorForWell={colorForWell}\n        emptyWellFillColor={emptyWellFillColor}\n        wellShape={wellShape}\n        framed={framed}\n        wrapWell={wrapWell}\n        highlightedWellIds={highlightedWellIds}\n        onWellHover={(wellId) => {\n          if (!isHoverControlled) setInternalHoverPos(wellId);\n          onHoveredWellChange?.(wellId);\n        }}\n        onWellDoubleClick={onWellDoubleClick}\n        selectionFillMode={selectionFillMode}\n        flashWellId={flashWellId}\n        flashWellKey={flashWellKey}\n        cellSize={cellSize}\n        autoScale={autoScale}\n        minCellSize={minCellSize}\n        maxCellSize={maxCellSize}\n      />\n      {groups && groups.length > 0 ? (\n        <>\n          <Separator className=\"mt-2\" />\n          <div className=\"flex max-h-28 flex-wrap gap-3 overflow-y-auto pt-1\">\n            {groups.map((group) => {\n              const isActive = group.id === activeGroupId;\n              const count = group.count ?? group.wellIds?.length;\n              return (\n                <button\n                  key={group.id}\n                  type=\"button\"\n                  disabled={group.disabled}\n                  onClick={() => onGroupClick?.(group)}\n                  className={cn(\n                    \"flex w-16 flex-col items-center gap-1 rounded-md px-1 py-1 text-center text-xs transition-colors\",\n                    \"text-muted-foreground hover:bg-accent/60\",\n                    isActive && \"bg-muted text-foreground ring-1 ring-primary/40\",\n                    group.disabled && \"pointer-events-none opacity-50\",\n                  )}\n                  title={group.label}\n                >\n                  <span\n                    className=\"size-7 rounded-full border\"\n                    style={{\n                      backgroundColor: group.color,\n                      borderColor: group.borderColor,\n                    }}\n                    aria-hidden\n                  />\n                  <span className=\"w-full truncate text-foreground\">{group.label}</span>\n                  {count === undefined ? null : (\n                    <span className=\"text-[0.7rem] leading-none text-muted-foreground\">{count} wells</span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["formatHoverFields","entry","fields","f","v","arr","item","o","PlateMapGrid","format","rows","columns","values","selection","onSelectionChange","colorForWell","renderHoverSummary","onHoveredWellChange","hoveredWellId","toolbar","hideSelectionControls","selectAllLabel","deselectAllLabel","emptyWellFillColor","wellShape","framed","wrapWell","highlightedWellIds","onWellDoubleClick","selectionFillMode","flashWellId","flashWellKey","cellSize","autoScale","minCellSize","maxCellSize","groups","activeGroupId","onGroupClick","className","dims","resolveDimensions","internalHoverPos","setInternalHoverPos","React","isHoverControlled","hoverPos","selectAll","allPositions","deselectAll","hoverEntry","hoverFields","hoverSummary","showSelectionControls","showToolbarRow","jsxs","cn","jsx","PlatePaintGrid","wellId","Fragment","Separator","group","isActive","count"],"mappings":"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"}

package/dist/components/composed/PlateMapEditor/PlateMapGrid.d.ts

@@ -0,0 +1,64 @@
+import { WellShape } from './PlatePaintGrid';
+import { PlateFormat, PlateMapGroupOption, WellField, WellId, WellRecord } from './types';
+import * as React from "react";
+export interface PlateMapGridProps<T extends WellRecord = WellRecord> {
+    format: PlateFormat;
+    rows?: number;
+    columns?: number;
+    values: Map<WellId, T>;
+    selection: Set<WellId>;
+    onSelectionChange: (next: Set<WellId>) => void;
+    /** Resolves the SVG fill color for a well. */
+    colorForWell: (well: T | undefined, wellId: WellId) => string;
+    /** Field schema used to build the default hover summary string. */
+    fields?: WellField<T>[];
+    /** Custom hover summary for the strip above the grid. */
+    renderHoverSummary?: (well: T | undefined, wellId: WellId) => React.ReactNode;
+    /** Fires whenever the currently hovered well changes (null on leave). */
+    onHoveredWellChange?: (wellId: WellId | null) => void;
+    /**
+     * Controlled hovered well id. When provided, the panel reflects this value
+     * instead of tracking hover internally — useful for syncing the hover
+     * summary with external state (e.g. resetting it on a plate switch).
+     */
+    hoveredWellId?: WellId | null;
+    /** Controls rendered to the left of the built-in select/deselect links. */
+    toolbar?: React.ReactNode;
+    /** Hide the built-in "Select all" / "Deselect all" links. */
+    hideSelectionControls?: boolean;
+    selectAllLabel?: string;
+    deselectAllLabel?: string;
+    /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */
+    emptyWellFillColor?: string | null;
+    /** Well shape forwarded to `PlatePaintGrid`. Defaults to `"rect"`. */
+    wellShape?: WellShape;
+    /** When true, wraps the grid in a card-like plate frame (rounded + border + soft shadow). */
+    framed?: boolean;
+    /** Render-prop that places a node inside each absolute-positioned well cell. */
+    wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;
+    /** Wells to highlight (e.g. when hovering a legend item externally). */
+    highlightedWellIds?: ReadonlySet<WellId>;
+    onWellDoubleClick?: (wellId: WellId) => void;
+    selectionFillMode?: "selection" | "well";
+    flashWellId?: WellId;
+    flashWellKey?: number;
+    /** Fixed well size. When unset, the grid grows with the available width. */
+    cellSize?: number;
+    autoScale?: boolean;
+    minCellSize?: number;
+    maxCellSize?: number;
+    /** Optional grouped well shortcuts rendered under the grid. */
+    groups?: PlateMapGroupOption[];
+    activeGroupId?: string;
+    onGroupClick?: (group: PlateMapGroupOption) => void;
+    className?: string;
+}
+/**
+ * Card-agnostic plate grid panel. Renders the selection toolbar, hover
+ * summary, the interactive `PlatePaintGrid`, and optional group shortcuts —
+ * and owns the ephemeral hover state internally. The plate title, plate
+ * selector, and actions menu are intentionally NOT part of this panel; compose
+ * `PlateMapPlateSelector` and `PlateMapActionsMenu` around it for full layout
+ * freedom.
+ */
+export declare function PlateMapGrid<T extends WellRecord = WellRecord>({ format, rows, columns, values, selection, onSelectionChange, colorForWell, fields, renderHoverSummary, onHoveredWellChange, hoveredWellId, toolbar, hideSelectionControls, selectAllLabel, deselectAllLabel, emptyWellFillColor, wellShape, framed, wrapWell, highlightedWellIds, onWellDoubleClick, selectionFillMode, flashWellId, flashWellKey, cellSize, autoScale, minCellSize, maxCellSize, groups, activeGroupId, onGroupClick, className, }: PlateMapGridProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as l, Fragment as Y } from "react/jsx-runtime";
 import * as Z from "react";
 import { PlatePaintGrid as _ } from "./PlatePaintGrid.js";
 import { allPositions as $, resolveDimensions as ee } from "./wellGrid.js";
-import { Separator as te } from "../../ui/separator.js";
+import { Separator as te } from "../../../ui/separator.js";
 import { cn as y } from "../../../lib/utils.js";
 function ne(a, d) {
   return d.map((n) => {

package/dist/components/composed/PlateMapEditor/PlateMapManifest.d.ts

@@ -0,0 +1,29 @@
+import { WellColumn, WellField, WellId, WellRecord } from './types';
+import * as React from "react";
+export interface PlateMapManifestProps<T extends WellRecord = WellRecord> {
+    values: Map<WellId, T>;
+    onChange: (next: Map<WellId, T>) => void;
+    columns: WellColumn<T>[];
+    fields?: WellField<T>[];
+    selection?: Set<WellId>;
+    onSelectionChange?: (next: Set<WellId>) => void;
+    /** Builds an empty record when a manifest row is freshly created. */
+    emptyEntry: (id: WellId) => T;
+    /** Filter for the manifest's "hide empty" mode. */
+    isPopulated?: (row: T) => boolean;
+    /** Enables the filter popover on the manifest table. */
+    filterable?: boolean;
+    /** Enables the group-by selector on the manifest table. */
+    groupable?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    /** Optional heading rendered above the table. Omit for a bare table. */
+    title?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Card-agnostic sample-manifest panel. A thin wrapper over `WellManifestTable`
+ * with an optional heading and no width constraint of its own, so it can span
+ * the full screen width or sit inside any container the caller chooses.
+ */
+export declare function PlateMapManifest<T extends WellRecord = WellRecord>({ values, onChange, columns, fields, selection, onSelectionChange, emptyEntry, isPopulated, filterable, groupable, pageSize, pageSizeOptions, title, className, }: PlateMapManifestProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lucide-react"),f=require("../../ui/badge.cjs"),u=require("../../ui/button.cjs"),i=require("../../ui/dropdown-menu.cjs"),g=require("../../ui/toggle-group.cjs"),x=require("../../../lib/utils.cjs");function w({plate:s,selected:a}){return e.jsx(f.Badge,{variant:a?"info":"outline",className:"max-w-44",children:e.jsx("span",{className:"truncate",children:s.label??s.barcode})})}function M({plates:s=[],activePlateId:a,onPlateChange:c,onAddPlate:r,onRemovePlate:j,addPlateLabel:l="Add Plate",removePlateLabel:v="Remove plate",label:h="Plate",variant:p="dropdown",align:N="start",side:y="bottom",className:m}){const o=s.find(n=>n.id===a)??(a?void 0:s[0]);return p==="tabs"?e.jsxs("div",{className:x.cn("inline-flex flex-wrap items-center gap-1",m),"data-slot":"plate-tabs",children:[e.jsx(g.ToggleGroup,{type:"single",variant:"outline",size:"sm",value:o?.id??"","aria-label":h,onValueChange:n=>{n&&c?.(n)},children:s.map(n=>{const d=n.id===o?.id,b=!!j&&s.length>1;return e.jsxs("div",{className:"inline-flex items-stretch",children:[e.jsxs(g.ToggleGroupItem,{value:n.id,disabled:n.disabled||!c,"aria-label":n.label??n.barcode,className:x.cn(b&&"rounded-r-none border-r-0"),children:[e.jsx("span",{className:"truncate",children:n.label??n.barcode}),n.count===void 0?null:e.jsx(f.Badge,{variant:d?"secondary":"outline",className:"ml-1 h-4 px-1 text-[0.65rem]",children:n.count})]}),b?e.jsx(u.Button,{type:"button",variant:"outline",size:"icon-sm","aria-label":`${v} ${n.label??n.barcode}`,className:"rounded-l-none",onClick:()=>j?.(n.id),children:e.jsx(t.X,{"aria-hidden":!0})}):null]},n.id)})}),r?e.jsx(u.Button,{type:"button",variant:"ghost",size:"icon-sm","aria-label":l,onClick:()=>r(),children:e.jsx(t.Plus,{"aria-hidden":!0})}):null]}):s.length===0?e.jsxs(u.Button,{type:"button",variant:"outline",size:"sm",disabled:!r,"aria-label":l,className:x.cn("min-w-28 justify-start",m),onClick:()=>r?.(),children:[e.jsx(t.Plus,{"aria-hidden":!0}),l]}):e.jsxs(i.DropdownMenu,{modal:!1,children:[e.jsx(i.DropdownMenuTrigger,{asChild:!0,children:e.jsxs(u.Button,{type:"button",variant:"outline",size:"sm","aria-label":h,className:x.cn("min-w-36 justify-between",m),children:[e.jsx("span",{className:"flex min-w-0 items-center gap-1.5",children:o?e.jsx(w,{plate:o,selected:!0}):e.jsx("span",{children:l})}),e.jsx(t.ChevronDown,{"aria-hidden":!0})]})}),e.jsxs(i.DropdownMenuContent,{align:N,side:y,className:"w-64",children:[e.jsx(i.DropdownMenuGroup,{children:s.map(n=>{const d=n.id===o?.id;return e.jsxs(i.DropdownMenuItem,{disabled:n.disabled||!c,onClick:()=>c?.(n.id),children:[d?e.jsx(t.Check,{"aria-hidden":!0}):e.jsx("span",{className:"size-4","aria-hidden":!0}),e.jsxs("span",{className:"flex min-w-0 flex-1 items-center justify-between gap-2",children:[e.jsx(w,{plate:n,selected:d}),n.count===void 0?null:e.jsxs("span",{className:"shrink-0 text-xs text-muted-foreground",children:[n.count," wells"]})]})]},n.id)})}),r?e.jsxs(e.Fragment,{children:[e.jsx(i.DropdownMenuSeparator,{}),e.jsxs(i.DropdownMenuItem,{onClick:()=>r(),children:[e.jsx(t.Plus,{"aria-hidden":!0}),l]})]}):null]})]})}exports.PlateMapPlateSelector=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("lucide-react"),f=require("../../../ui/badge.cjs"),d=require("../../../ui/button.cjs"),s=require("../../../ui/dropdown-menu.cjs"),g=require("../../../ui/toggle-group.cjs"),x=require("../../../lib/utils.cjs");function w({plate:i,selected:a}){return e.jsx(f.Badge,{variant:a?"info":"outline",className:"max-w-44",children:e.jsx("span",{className:"truncate",children:i.label??i.barcode})})}function M({plates:i=[],activePlateId:a,onPlateChange:c,onAddPlate:r,onRemovePlate:j,addPlateLabel:l="Add Plate",removePlateLabel:v="Remove plate",label:h="Plate",variant:p="dropdown",align:N="start",side:y="bottom",className:m}){const o=i.find(n=>n.id===a)??(a?void 0:i[0]);return p==="tabs"?e.jsxs("div",{className:x.cn("inline-flex flex-wrap items-center gap-1",m),"data-slot":"plate-tabs",children:[e.jsx(g.ToggleGroup,{type:"single",variant:"outline",size:"sm",value:o?.id??"","aria-label":h,onValueChange:n=>{n&&c?.(n)},children:i.map(n=>{const u=n.id===o?.id,b=!!j&&i.length>1;return e.jsxs("div",{className:"inline-flex items-stretch",children:[e.jsxs(g.ToggleGroupItem,{value:n.id,disabled:n.disabled||!c,"aria-label":n.label??n.barcode,className:x.cn(b&&"rounded-r-none border-r-0"),children:[e.jsx("span",{className:"truncate",children:n.label??n.barcode}),n.count===void 0?null:e.jsx(f.Badge,{variant:u?"secondary":"outline",className:"ml-1 h-4 px-1 text-[0.65rem]",children:n.count})]}),b?e.jsx(d.Button,{type:"button",variant:"outline",size:"icon-sm","aria-label":`${v} ${n.label??n.barcode}`,className:"rounded-l-none",onClick:()=>j?.(n.id),children:e.jsx(t.X,{"aria-hidden":!0})}):null]},n.id)})}),r?e.jsx(d.Button,{type:"button",variant:"ghost",size:"icon-sm","aria-label":l,onClick:()=>r(),children:e.jsx(t.Plus,{"aria-hidden":!0})}):null]}):i.length===0?e.jsxs(d.Button,{type:"button",variant:"outline",size:"sm",disabled:!r,"aria-label":l,className:x.cn("min-w-28 justify-start",m),onClick:()=>r?.(),children:[e.jsx(t.Plus,{"aria-hidden":!0}),l]}):e.jsxs(s.DropdownMenu,{modal:!1,children:[e.jsx(s.DropdownMenuTrigger,{asChild:!0,children:e.jsxs(d.Button,{type:"button",variant:"outline",size:"sm","aria-label":h,className:x.cn("min-w-36 justify-between",m),children:[e.jsx("span",{className:"flex min-w-0 items-center gap-1.5",children:o?e.jsx(w,{plate:o,selected:!0}):e.jsx("span",{children:l})}),e.jsx(t.ChevronDown,{"aria-hidden":!0})]})}),e.jsxs(s.DropdownMenuContent,{align:N,side:y,className:"w-64",children:[e.jsx(s.DropdownMenuGroup,{children:i.map(n=>{const u=n.id===o?.id;return e.jsxs(s.DropdownMenuItem,{disabled:n.disabled||!c,onClick:()=>c?.(n.id),children:[u?e.jsx(t.Check,{"aria-hidden":!0}):e.jsx("span",{className:"size-4","aria-hidden":!0}),e.jsxs("span",{className:"flex min-w-0 flex-1 items-center justify-between gap-2",children:[e.jsx(w,{plate:n,selected:u}),n.count===void 0?null:e.jsxs("span",{className:"shrink-0 text-xs text-muted-foreground",children:[n.count," wells"]})]})]},n.id)})}),r?e.jsxs(e.Fragment,{children:[e.jsx(s.DropdownMenuSeparator,{}),e.jsxs(s.DropdownMenuItem,{onClick:()=>r(),children:[e.jsx(t.Plus,{"aria-hidden":!0}),l]})]}):null]})]})}exports.PlateMapPlateSelector=M;
 //# sourceMappingURL=PlateMapPlateSelector.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMapPlateSelector.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapPlateSelector.tsx"],"sourcesContent":["import { Check, ChevronDown, Plus, X } from \"lucide-react\";\n\nimport type { PlateMapPlateOption } from \"./types\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PlateMapPlateSelectorVariant = \"dropdown\" | \"tabs\";\n\nexport interface PlateMapPlateSelectorProps {\n  plates?: PlateMapPlateOption[];\n  activePlateId?: string;\n  onPlateChange?: (plateId: string) => void;\n  onAddPlate?: () => void;\n  /** When supplied, the tabs variant renders a delete affordance per plate. */\n  onRemovePlate?: (plateId: string) => void;\n  addPlateLabel?: string;\n  removePlateLabel?: string;\n  label?: string;\n  /** Layout. `\"dropdown\"` is the default single-trigger menu, `\"tabs\"` is a horizontal tab strip. */\n  variant?: PlateMapPlateSelectorVariant;\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n}\n\nfunction PlatePill({ plate, selected }: { plate: PlateMapPlateOption; selected?: boolean }) {\n  return (\n    <Badge variant={selected ? \"info\" : \"outline\"} className=\"max-w-44\">\n      <span className=\"truncate\">{plate.label ?? plate.barcode}</span>\n    </Badge>\n  );\n}\n\nexport function PlateMapPlateSelector({\n  plates = [],\n  activePlateId,\n  onPlateChange,\n  onAddPlate,\n  onRemovePlate,\n  addPlateLabel = \"Add Plate\",\n  removePlateLabel = \"Remove plate\",\n  label = \"Plate\",\n  variant = \"dropdown\",\n  align = \"start\",\n  side = \"bottom\",\n  className,\n}: PlateMapPlateSelectorProps) {\n  const activePlate = plates.find((plate) => plate.id === activePlateId) ?? (activePlateId ? undefined : plates[0]);\n\n  if (variant === \"tabs\") {\n    return (\n      <div className={cn(\"inline-flex flex-wrap items-center gap-1\", className)} data-slot=\"plate-tabs\">\n        <ToggleGroup\n          type=\"single\"\n          variant=\"outline\"\n          size=\"sm\"\n          value={activePlate?.id ?? \"\"}\n          aria-label={label}\n          onValueChange={(value) => {\n            if (value) onPlateChange?.(value);\n          }}\n        >\n          {plates.map((plate) => {\n            const selected = plate.id === activePlate?.id;\n            const canRemove = !!onRemovePlate && plates.length > 1;\n            return (\n              <div key={plate.id} className=\"inline-flex items-stretch\">\n                <ToggleGroupItem\n                  value={plate.id}\n                  disabled={plate.disabled || !onPlateChange}\n                  aria-label={plate.label ?? plate.barcode}\n                  className={cn(canRemove && \"rounded-r-none border-r-0\")}\n                >\n                  <span className=\"truncate\">{plate.label ?? plate.barcode}</span>\n                  {plate.count === undefined ? null : (\n                    <Badge variant={selected ? \"secondary\" : \"outline\"} className=\"ml-1 h-4 px-1 text-[0.65rem]\">\n                      {plate.count}\n                    </Badge>\n                  )}\n                </ToggleGroupItem>\n                {canRemove ? (\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label={`${removePlateLabel} ${plate.label ?? plate.barcode}`}\n                    className=\"rounded-l-none\"\n                    onClick={() => onRemovePlate?.(plate.id)}\n                  >\n                    <X aria-hidden />\n                  </Button>\n                ) : null}\n              </div>\n            );\n          })}\n        </ToggleGroup>\n        {onAddPlate ? (\n          <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" aria-label={addPlateLabel} onClick={() => onAddPlate()}>\n            <Plus aria-hidden />\n          </Button>\n        ) : null}\n      </div>\n    );\n  }\n\n  if (plates.length === 0) {\n    return (\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={!onAddPlate}\n        aria-label={addPlateLabel}\n        className={cn(\"min-w-28 justify-start\", className)}\n        onClick={() => onAddPlate?.()}\n      >\n        <Plus aria-hidden />\n        {addPlateLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={label}\n          className={cn(\"min-w-36 justify-between\", className)}\n        >\n          <span className=\"flex min-w-0 items-center gap-1.5\">\n            {activePlate ? <PlatePill plate={activePlate} selected /> : <span>{addPlateLabel}</span>}\n          </span>\n          <ChevronDown aria-hidden />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align={align} side={side} className=\"w-64\">\n        <DropdownMenuGroup>\n          {plates.map((plate) => {\n            const selected = plate.id === activePlate?.id;\n            return (\n              <DropdownMenuItem\n                key={plate.id}\n                disabled={plate.disabled || !onPlateChange}\n                onClick={() => onPlateChange?.(plate.id)}\n              >\n                {selected ? <Check aria-hidden /> : <span className=\"size-4\" aria-hidden />}\n                <span className=\"flex min-w-0 flex-1 items-center justify-between gap-2\">\n                  <PlatePill plate={plate} selected={selected} />\n                  {plate.count === undefined ? null : (\n                    <span className=\"shrink-0 text-xs text-muted-foreground\">{plate.count} wells</span>\n                  )}\n                </span>\n              </DropdownMenuItem>\n            );\n          })}\n        </DropdownMenuGroup>\n        {onAddPlate ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={() => onAddPlate()}>\n              <Plus aria-hidden />\n              {addPlateLabel}\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PlatePill","plate","selected","Badge","jsx","PlateMapPlateSelector","plates","activePlateId","onPlateChange","onAddPlate","onRemovePlate","addPlateLabel","removePlateLabel","label","variant","align","side","className","activePlate","jsxs","cn","ToggleGroup","value","canRemove","ToggleGroupItem","Button","X","Plus","DropdownMenu","DropdownMenuTrigger","ChevronDown","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","Check","Fragment","DropdownMenuSeparator"],"mappings":"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"}
+{"version":3,"file":"PlateMapPlateSelector.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapPlateSelector.tsx"],"sourcesContent":["import { Check, ChevronDown, Plus, X } from \"lucide-react\";\n\nimport type { PlateMapPlateOption } from \"./types\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PlateMapPlateSelectorVariant = \"dropdown\" | \"tabs\";\n\nexport interface PlateMapPlateSelectorProps {\n  plates?: PlateMapPlateOption[];\n  activePlateId?: string;\n  onPlateChange?: (plateId: string) => void;\n  onAddPlate?: () => void;\n  /** When supplied, the tabs variant renders a delete affordance per plate. */\n  onRemovePlate?: (plateId: string) => void;\n  addPlateLabel?: string;\n  removePlateLabel?: string;\n  label?: string;\n  /** Layout. `\"dropdown\"` is the default single-trigger menu, `\"tabs\"` is a horizontal tab strip. */\n  variant?: PlateMapPlateSelectorVariant;\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n}\n\nfunction PlatePill({ plate, selected }: { plate: PlateMapPlateOption; selected?: boolean }) {\n  return (\n    <Badge variant={selected ? \"info\" : \"outline\"} className=\"max-w-44\">\n      <span className=\"truncate\">{plate.label ?? plate.barcode}</span>\n    </Badge>\n  );\n}\n\nexport function PlateMapPlateSelector({\n  plates = [],\n  activePlateId,\n  onPlateChange,\n  onAddPlate,\n  onRemovePlate,\n  addPlateLabel = \"Add Plate\",\n  removePlateLabel = \"Remove plate\",\n  label = \"Plate\",\n  variant = \"dropdown\",\n  align = \"start\",\n  side = \"bottom\",\n  className,\n}: PlateMapPlateSelectorProps) {\n  const activePlate = plates.find((plate) => plate.id === activePlateId) ?? (activePlateId ? undefined : plates[0]);\n\n  if (variant === \"tabs\") {\n    return (\n      <div className={cn(\"inline-flex flex-wrap items-center gap-1\", className)} data-slot=\"plate-tabs\">\n        <ToggleGroup\n          type=\"single\"\n          variant=\"outline\"\n          size=\"sm\"\n          value={activePlate?.id ?? \"\"}\n          aria-label={label}\n          onValueChange={(value) => {\n            if (value) onPlateChange?.(value);\n          }}\n        >\n          {plates.map((plate) => {\n            const selected = plate.id === activePlate?.id;\n            const canRemove = !!onRemovePlate && plates.length > 1;\n            return (\n              <div key={plate.id} className=\"inline-flex items-stretch\">\n                <ToggleGroupItem\n                  value={plate.id}\n                  disabled={plate.disabled || !onPlateChange}\n                  aria-label={plate.label ?? plate.barcode}\n                  className={cn(canRemove && \"rounded-r-none border-r-0\")}\n                >\n                  <span className=\"truncate\">{plate.label ?? plate.barcode}</span>\n                  {plate.count === undefined ? null : (\n                    <Badge variant={selected ? \"secondary\" : \"outline\"} className=\"ml-1 h-4 px-1 text-[0.65rem]\">\n                      {plate.count}\n                    </Badge>\n                  )}\n                </ToggleGroupItem>\n                {canRemove ? (\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label={`${removePlateLabel} ${plate.label ?? plate.barcode}`}\n                    className=\"rounded-l-none\"\n                    onClick={() => onRemovePlate?.(plate.id)}\n                  >\n                    <X aria-hidden />\n                  </Button>\n                ) : null}\n              </div>\n            );\n          })}\n        </ToggleGroup>\n        {onAddPlate ? (\n          <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" aria-label={addPlateLabel} onClick={() => onAddPlate()}>\n            <Plus aria-hidden />\n          </Button>\n        ) : null}\n      </div>\n    );\n  }\n\n  if (plates.length === 0) {\n    return (\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={!onAddPlate}\n        aria-label={addPlateLabel}\n        className={cn(\"min-w-28 justify-start\", className)}\n        onClick={() => onAddPlate?.()}\n      >\n        <Plus aria-hidden />\n        {addPlateLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <DropdownMenu modal={false}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={label}\n          className={cn(\"min-w-36 justify-between\", className)}\n        >\n          <span className=\"flex min-w-0 items-center gap-1.5\">\n            {activePlate ? <PlatePill plate={activePlate} selected /> : <span>{addPlateLabel}</span>}\n          </span>\n          <ChevronDown aria-hidden />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align={align} side={side} className=\"w-64\">\n        <DropdownMenuGroup>\n          {plates.map((plate) => {\n            const selected = plate.id === activePlate?.id;\n            return (\n              <DropdownMenuItem\n                key={plate.id}\n                disabled={plate.disabled || !onPlateChange}\n                onClick={() => onPlateChange?.(plate.id)}\n              >\n                {selected ? <Check aria-hidden /> : <span className=\"size-4\" aria-hidden />}\n                <span className=\"flex min-w-0 flex-1 items-center justify-between gap-2\">\n                  <PlatePill plate={plate} selected={selected} />\n                  {plate.count === undefined ? null : (\n                    <span className=\"shrink-0 text-xs text-muted-foreground\">{plate.count} wells</span>\n                  )}\n                </span>\n              </DropdownMenuItem>\n            );\n          })}\n        </DropdownMenuGroup>\n        {onAddPlate ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={() => onAddPlate()}>\n              <Plus aria-hidden />\n              {addPlateLabel}\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PlatePill","plate","selected","Badge","jsx","PlateMapPlateSelector","plates","activePlateId","onPlateChange","onAddPlate","onRemovePlate","addPlateLabel","removePlateLabel","label","variant","align","side","className","activePlate","jsxs","cn","ToggleGroup","value","canRemove","ToggleGroupItem","Button","X","Plus","DropdownMenu","DropdownMenuTrigger","ChevronDown","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","Check","Fragment","DropdownMenuSeparator"],"mappings":"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"}

package/dist/components/composed/PlateMapEditor/PlateMapPlateSelector.d.ts

@@ -0,0 +1,19 @@
+import { PlateMapPlateOption } from './types';
+export type PlateMapPlateSelectorVariant = "dropdown" | "tabs";
+export interface PlateMapPlateSelectorProps {
+    plates?: PlateMapPlateOption[];
+    activePlateId?: string;
+    onPlateChange?: (plateId: string) => void;
+    onAddPlate?: () => void;
+    /** When supplied, the tabs variant renders a delete affordance per plate. */
+    onRemovePlate?: (plateId: string) => void;
+    addPlateLabel?: string;
+    removePlateLabel?: string;
+    label?: string;
+    /** Layout. `"dropdown"` is the default single-trigger menu, `"tabs"` is a horizontal tab strip. */
+    variant?: PlateMapPlateSelectorVariant;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    className?: string;
+}
+export declare function PlateMapPlateSelector({ plates, activePlateId, onPlateChange, onAddPlate, onRemovePlate, addPlateLabel, removePlateLabel, label, variant, align, side, className, }: PlateMapPlateSelectorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { jsxs as n, jsx as i, Fragment as C } from "react/jsx-runtime";
 import { X as D, Plus as h, ChevronDown as M, Check as z } from "lucide-react";
-import { Badge as x } from "../../ui/badge.js";
-import { Button as c } from "../../ui/button.js";
-import { DropdownMenu as j, DropdownMenuTrigger as G, DropdownMenuContent as T, DropdownMenuGroup as B, DropdownMenuItem as w, DropdownMenuSeparator as S } from "../../ui/dropdown-menu.js";
-import { ToggleGroup as $, ToggleGroupItem as F } from "../../ui/toggle-group.js";
+import { Badge as x } from "../../../ui/badge.js";
+import { Button as c } from "../../../ui/button.js";
+import { DropdownMenu as j, DropdownMenuTrigger as G, DropdownMenuContent as T, DropdownMenuGroup as B, DropdownMenuItem as w, DropdownMenuSeparator as S } from "../../../ui/dropdown-menu.js";
+import { ToggleGroup as $, ToggleGroupItem as F } from "../../../ui/toggle-group.js";
 import { cn as u } from "../../../lib/utils.js";
 function v({ plate: r, selected: l }) {
   return /* @__PURE__ */ i(x, { variant: l ? "info" : "outline", className: "max-w-44", children: /* @__PURE__ */ i("span", { className: "truncate", children: r.label ?? r.barcode }) });

package/dist/components/composed/PlateMapEditor/PlatePaintGrid.d.ts

@@ -0,0 +1,73 @@
+import { parsePos } from './wellGrid';
+import { PlateFormat, WellId, WellRecord } from './types';
+import * as React from "react";
+export declare const PLATE_MAP_EMPTY_WELL_FILL = "var(--surface-container)";
+export declare const PLATE_MAP_CELL_BORDER = "var(--border)";
+export type WellShape = "rect" | "circle";
+export interface PlatePaintGridProps<T extends WellRecord = WellRecord> {
+    format: PlateFormat;
+    rows?: number;
+    columns?: number;
+    values: Map<WellId, T>;
+    selection: Set<WellId>;
+    onSelectionChange: (next: Set<WellId>) => void;
+    /** Returns the fill color for a given well record (or undefined if empty). */
+    colorForWell: (well: T | undefined, wellId: WellId) => string;
+    /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */
+    emptyWellFillColor?: string | null;
+    /** Geometric shape of each well. `"circle"` matches scientific plate visuals. Defaults to `"rect"`. */
+    wellShape?: WellShape;
+    /**
+     * When true, wraps the grid in a card-like surface (rounded, bordered,
+     * padded, soft shadow) so it reads as a physical plate. Pairs well with
+     * `wellShape="circle"`.
+     */
+    framed?: boolean;
+    /** Pixel size of each well cell. Defaults to 34 when fixed. */
+    cellSize?: number;
+    /** Resize wells to fill available width when `cellSize` is not fixed. */
+    autoScale?: boolean;
+    minCellSize?: number;
+    /** Defaults to 72 for 96-well style plates and 36 for denser plates. */
+    maxCellSize?: number;
+    /** Stroke color for non-selected wells. Defaults to a light border. */
+    borderColor?: string;
+    /** Stroke color for selected wells. Defaults to the kit primary blue. */
+    selectedBorderColor?: string;
+    /** Fill color for selected wells. Defaults to the kit primary blue. */
+    selectedFillColor?: string;
+    /** Selected fill opacity. */
+    selectedFillOpacity?: number;
+    /** Whether selected wells use the selection fill or keep their assigned well color. */
+    selectionFillMode?: "selection" | "well";
+    /** Well id that should briefly flash, usually after a double-click assignment. */
+    flashWellId?: WellId;
+    /** Changing this value restarts the flash animation for the same well. */
+    flashWellKey?: number;
+    /**
+     * Well ids that should render with a highlight ring. Used for cross-component
+     * hover sync (e.g. hovering a legend item to highlight matching wells).
+     */
+    highlightedWellIds?: ReadonlySet<WellId>;
+    /** Stroke color for highlighted wells. Defaults to the kit primary blue. */
+    highlightBorderColor?: string;
+    onWellHover?: (wellId: WellId | null) => void;
+    onWellDoubleClick?: (wellId: WellId) => void;
+    /**
+     * Optional render-prop invoked once per well. The returned node is placed
+     * inside an absolutely-positioned cell on top of the SVG, sized to
+     * `cellSize`. The wrapper layer is `pointer-events: none` so the SVG keeps
+     * pointer interaction by default; consumers wiring drop targets are expected
+     * to set `pointer-events: auto` on their own element while a drag is active.
+     */
+    wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;
+    className?: string;
+}
+/**
+ * Interactive plate grid with drag-rectangle selection.
+ * - Click & drag: replace selection
+ * - Shift + drag: add to selection
+ * - Alt + drag: remove from selection
+ */
+export declare function PlatePaintGrid<T extends WellRecord = WellRecord>({ format, rows, columns, values, selection, onSelectionChange, colorForWell, emptyWellFillColor, wellShape, framed, cellSize, autoScale, minCellSize, maxCellSize, borderColor, selectedBorderColor, selectedFillColor, selectedFillOpacity, selectionFillMode, flashWellId, flashWellKey, highlightedWellIds, highlightBorderColor, onWellHover, onWellDoubleClick, wrapWell, className, }: PlatePaintGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export { parsePos };

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

@@ -1,2 +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;
+"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

@@ -1 +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"}
+{"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":"iQAkBMA,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"}