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

package/README.md

@@ -25,9 +25,9 @@ This library provides:
 ## Compatibility
 
 | Library version | React | Node.js | TDP (server utilities) |
-| --- | --- | --- | --- |
-| v0.5.x | 19+ | 18+ | v4.x+ |
-| v0.4.x | 19+ | 18+ | v4.x+ |
+| --------------- | ----- | ------- | ---------------------- |
+| v0.5.x          | 19+   | 18+     | v4.x+                  |
+| v0.4.x          | 19+   | 18+     | v4.x+                  |
 
 > **Note:** The client-side components have no TDP version dependency.
 > The `/server` utilities (JWT auth, provider helpers) require a running TDP instance of v4.x or later.
@@ -43,10 +43,10 @@ yarn add @tetrascience-npm/tetrascience-react-ui
 
 ```tsx
 // 1. Import the CSS once at your app root (required)
-import '@tetrascience-npm/tetrascience-react-ui/index.css';
+import "@tetrascience-npm/tetrascience-react-ui/index.css";
 
 // 2. Import components
-import { Button, Card, CardHeader, CardContent } from '@tetrascience-npm/tetrascience-react-ui';
+import { Button, Card, CardHeader, CardContent } from "@tetrascience-npm/tetrascience-react-ui";
 
 function App() {
   return (
@@ -67,9 +67,9 @@ This library uses **Tailwind CSS 4** with design tokens defined as CSS custom pr
 
 ### CSS Import Options
 
-| Import path | Use case |
-| --- | --- |
-| `@tetrascience-npm/tetrascience-react-ui/index.css` | **Pre-built CSS** — use this for most apps. Import once at your app root. |
+| Import path                                                  | Use case                                                                                             |
+| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| `@tetrascience-npm/tetrascience-react-ui/index.css`          | **Pre-built CSS** — use this for most apps. Import once at your app root.                            |
 | `@tetrascience-npm/tetrascience-react-ui/index.tailwind.css` | **Tailwind source** — for apps that run their own Tailwind build and want to extend/override tokens. |
 
 Most consumers only need `index.css`:
@@ -100,7 +100,58 @@ Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, B
 
 TetraScience-specific compositions built from UI primitives:
 
-AppHeader, AppLayout, AssistantModal, CodeScriptEditorButton, LaunchContent, Main, Navbar, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, Sidebar, TdpLink, TdpSearch, TdpUrl
+AppHeader, AppLayout, AssistantModal, CodeScriptEditorButton, LaunchContent, Main, Navbar, ProcessFlow, ProtocolConfiguration, ProtocolYamlCard, PythonEditorModal, Sidebar, TdpLink, TdpSearch, TdpUrl
+
+#### ProcessFlow
+
+Use `ProcessFlow` to render parent-owned multi-step workflow state such as uploads, validation pipelines, review flows, processing stages, and setup sequences. Import it from the package and keep all workflow transitions and side effects in the consuming app.
+
+```tsx
+import {
+  PROCESS_FLOW_STEP_STATUSES,
+  ProcessFlow,
+  type ProcessFlowStep,
+  type ProcessFlowStepStatus,
+} from "@tetrascience-npm/tetrascience-react-ui";
+
+const steps: ProcessFlowStep[] = [
+  { id: "upload", label: "Upload", description: "Choose source files", status: "completed" },
+  { id: "validate", label: "Validate", description: "Check schema and lineage", status: "active" },
+  { id: "publish", label: "Publish", description: "Send downstream", status: "pending" },
+];
+
+function WorkflowProgress() {
+  return (
+    <ProcessFlow
+      steps={steps}
+      selectedStepId="validate"
+      onStepSelect={(step, details) => {
+        console.log(step.id, details.status);
+      }}
+    />
+  );
+}
+
+const allStatuses: readonly ProcessFlowStepStatus[] = PROCESS_FLOW_STEP_STATUSES;
+```
+
+Expected contract:
+
+- `status` is independently controlled per step: `pending`, `active`, `completed`, `error`, or `disabled`.
+- `selectedStepId` means the step the user is viewing or has clicked; it is separate from the `active` workflow state.
+- `onStepSelect` emits user selection only. It does not mean a workflow step completed.
+- Parent workflow code owns completion, error handling, retries, analytics, and other side effects.
+- `description` is shown by default. Pass `showDescriptions={false}` to hide all descriptions.
+- Descriptions auto-hide at narrow container widths (≤40rem) for mobile layouts.
+- The component fills 100% of its container width — size it by controlling the container.
+- Selected completed steps render with a green label; selected active steps render with a blue label.
+- Use `connections` and per-step `position` only for simple branching/configurable flows.
+
+For AI-assisted consuming apps, add a short instruction like this to the app's `AGENTS.md` or `CLAUDE.md`:
+
+```md
+Use `ProcessFlow` from `@tetrascience-npm/tetrascience-react-ui` for multi-step workflow visualization. Do not build a custom stepper for upload, validation, review, approval, processing, or setup flows. Parent components own the workflow state and pass `steps: ProcessFlowStep[]`; each step status must be one of `PROCESS_FLOW_STEP_STATUSES`. Use `selectedStepId` only for the viewed/selected step. Keep completion/error side effects in the parent workflow code, not inside `ProcessFlow`.
+```
 
 ### Charts (`charts/`)
 
@@ -117,7 +168,7 @@ Beyond UI components, this library includes server-side helper functions for bui
 **JWT Token Manager** - Manages JWT token retrieval for data apps:
 
 ```typescript
-import { jwtManager } from '@tetrascience-npm/tetrascience-react-ui/server';
+import { jwtManager } from "@tetrascience-npm/tetrascience-react-ui/server";
 
 // In Express middleware
 app.use(async (req, res, next) => {
@@ -146,12 +197,8 @@ TypeScript equivalents of the Python helpers from `ts-lib-ui-kit-streamlit` for
 **Getting Provider Configurations:**
 
 ```typescript
-import { TDPClient } from '@tetrascience-npm/ts-connectors-sdk';
-import {
-  getProviderConfigurations,
-  buildProvider,
-  jwtManager,
-} from '@tetrascience-npm/tetrascience-react-ui/server';
+import { TDPClient } from "@tetrascience-npm/ts-connectors-sdk";
+import { getProviderConfigurations, buildProvider, jwtManager } from "@tetrascience-npm/tetrascience-react-ui/server";
 
 // Get user's auth token from request (e.g., in Express middleware)
 const userToken = await jwtManager.getTokenFromExpressRequest(req);
@@ -160,7 +207,7 @@ const userToken = await jwtManager.getTokenFromExpressRequest(req);
 // Other fields (tdpEndpoint, connectorId, orgSlug) are read from environment variables
 const client = new TDPClient({
   authToken: userToken,
-  artifactType: 'data-app',
+  artifactType: "data-app",
 });
 await client.init();
 
@@ -172,7 +219,7 @@ for (const config of providers) {
 
   // Build a database connection from the config
   const provider = await buildProvider(config);
-  const results = await provider.query('SELECT * FROM my_table LIMIT 10');
+  const results = await provider.query("SELECT * FROM my_table LIMIT 10");
   await provider.close();
 }
 ```
@@ -185,21 +232,21 @@ import {
   buildDatabricksProvider,
   getTdpAthenaProvider,
   type ProviderConfiguration,
-} from '@tetrascience-npm/tetrascience-react-ui/server';
+} from "@tetrascience-npm/tetrascience-react-ui/server";
 
 // Snowflake
 const snowflakeProvider = await buildSnowflakeProvider(config);
-const data = await snowflakeProvider.query('SELECT * FROM users');
+const data = await snowflakeProvider.query("SELECT * FROM users");
 await snowflakeProvider.close();
 
 // Databricks
 const databricksProvider = await buildDatabricksProvider(config);
-const data = await databricksProvider.query('SELECT * FROM events');
+const data = await databricksProvider.query("SELECT * FROM events");
 await databricksProvider.close();
 
 // TDP Athena (uses environment configuration)
 const athenaProvider = await getTdpAthenaProvider();
-const data = await athenaProvider.query('SELECT * FROM files');
+const data = await athenaProvider.query("SELECT * FROM files");
 await athenaProvider.close();
 ```
 
@@ -211,15 +258,15 @@ import {
   MissingTableError,
   ProviderConnectionError,
   InvalidProviderConfigurationError,
-} from '@tetrascience-npm/tetrascience-react-ui/server';
+} from "@tetrascience-npm/tetrascience-react-ui/server";
 
 try {
-  const results = await provider.query('SELECT * FROM missing_table');
+  const results = await provider.query("SELECT * FROM missing_table");
 } catch (error) {
   if (error instanceof MissingTableError) {
-    console.error('Table not found:', error.message);
+    console.error("Table not found:", error.message);
   } else if (error instanceof QueryError) {
-    console.error('Query failed:', error.message);
+    console.error("Query failed:", error.message);
   }
 }
 ```
@@ -242,20 +289,20 @@ The TDP connector key/value store lets data apps persist small pieces of state (
 **Reading and writing values with the user's JWT token:**
 
 ```typescript
-import { TDPClient } from '@tetrascience-npm/ts-connectors-sdk';
-import { jwtManager } from '@tetrascience-npm/tetrascience-react-ui/server';
+import { TDPClient } from "@tetrascience-npm/ts-connectors-sdk";
+import { jwtManager } from "@tetrascience-npm/tetrascience-react-ui/server";
 
 // In an Express route handler:
-app.get('/api/kv/:key', async (req, res) => {
+app.get("/api/kv/:key", async (req, res) => {
   // 1. Get the user's JWT from request cookies
   const userToken = await jwtManager.getTokenFromExpressRequest(req);
-  if (!userToken) return res.status(401).json({ error: 'Not authenticated' });
+  if (!userToken) return res.status(401).json({ error: "Not authenticated" });
 
   // 2. Create a TDPClient authenticated as the user
   //    (CONNECTOR_ID, TDP_ENDPOINT, ORG_SLUG are read from env vars)
   const client = new TDPClient({
     authToken: userToken,
-    artifactType: 'data-app',
+    artifactType: "data-app",
   });
   await client.init();
 
@@ -264,13 +311,13 @@ app.get('/api/kv/:key', async (req, res) => {
   res.json({ key: req.params.key, value });
 });
 
-app.put('/api/kv/:key', async (req, res) => {
+app.put("/api/kv/:key", async (req, res) => {
   const userToken = await jwtManager.getTokenFromExpressRequest(req);
-  if (!userToken) return res.status(401).json({ error: 'Not authenticated' });
+  if (!userToken) return res.status(401).json({ error: "Not authenticated" });
 
   const client = new TDPClient({
     authToken: userToken,
-    artifactType: 'data-app',
+    artifactType: "data-app",
   });
   await client.init();
 
@@ -283,7 +330,7 @@ app.put('/api/kv/:key', async (req, res) => {
 **Reading multiple values at once:**
 
 ```typescript
-const values = await client.getValues(['theme', 'locale', 'last-run']);
+const values = await client.getValues(["theme", "locale", "last-run"]);
 // values[0] → theme, values[1] → locale, values[2] → last-run
 ```
 
@@ -315,8 +362,8 @@ Frontend: use `<TdpSearch columns={...} />` with default `apiEndpoint="/api/sear
 Full TypeScript support with exported types:
 
 ```tsx
-import { Button } from '@tetrascience-npm/tetrascience-react-ui';
-import type { ButtonProps, BarGraphProps, BarDataSeries } from '@tetrascience-npm/tetrascience-react-ui';
+import { Button } from "@tetrascience-npm/tetrascience-react-ui";
+import type { ButtonProps, BarGraphProps, BarDataSeries } from "@tetrascience-npm/tetrascience-react-ui";
 ```
 
 ## Examples

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("lucide-react"),u=require("../../ui/button.cjs"),w=require("../../ui/input.cjs"),h=require("../../ui/popover.cjs"),n=require("../../ui/select.cjs"),z=require("../../../lib/utils.cjs"),P={contains:"contains",equals:"equals",not_equals:"not equals",starts_with:"starts with",ends_with:"ends with",is_empty:"is empty",is_not_empty:"is not empty"},R=["is_empty","is_not_empty"],f=["contains","equals","not_equals","starts_with","ends_with","is_empty","is_not_empty"];function O(r,d){const l=d?.[0]??"contains";return{id:crypto.randomUUID(),columnId:r,operator:l,value:""}}function A({columns:r,columnLabel:d,filters:l,onFiltersChange:o,triggerLabel:m="Filter",className:g}){const _=t=>d?.(t)??t,v=r[0],y=v?.columnId??"",C=()=>o([...l,O(y,v?.operators)]),I=t=>o(l.filter(c=>c.id!==t)),p=(t,c)=>o(l.map(a=>a.id===t?{...a,...c}:a)),N=()=>o([]),i=l.length;return e.jsxs(h.Popover,{children:[e.jsx(h.PopoverTrigger,{asChild:!0,children:e.jsxs(u.Button,{type:"button",variant:"outline",size:"sm","data-slot":"manifest-filter",className:z.cn(g),"aria-label":i>0?`${m} (${i} active)`:m,children:[e.jsx(x.ListFilterIcon,{className:"size-3.5"}),m,i>0?e.jsx("span",{className:"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground",children:i}):null]})}),e.jsx(h.PopoverContent,{align:"end",className:"min-w-80",children:e.jsxs("div",{className:"flex flex-col gap-2",children:[l.map(t=>{const a=r.find(s=>s.columnId===t.columnId)?.operators??f,S=R.includes(t.operator);return e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(n.Select,{value:t.columnId,onValueChange:s=>{const j=r.find(b=>b.columnId===s)?.operators??f,q=j.includes(t.operator)?t.operator:j[0]??"contains";p(t.id,{columnId:s,operator:q,value:""})},children:[e.jsx(n.SelectTrigger,{size:"sm",className:"w-36",children:e.jsx(n.SelectValue,{})}),e.jsx(n.SelectContent,{children:r.map(s=>e.jsx(n.SelectItem,{value:s.columnId,children:s.label??_(s.columnId)},s.columnId))})]}),e.jsxs(n.Select,{value:t.operator,onValueChange:s=>p(t.id,{operator:s,value:""}),children:[e.jsx(n.SelectTrigger,{size:"sm",className:"w-32",children:e.jsx(n.SelectValue,{})}),e.jsx(n.SelectContent,{children:a.map(s=>e.jsx(n.SelectItem,{value:s,children:P[s]},s))})]}),S?e.jsx("div",{className:"h-8 w-40","aria-hidden":!0}):e.jsx(w.Input,{className:"w-40",placeholder:"Value…",value:t.value,onChange:s=>p(t.id,{value:s.target.value})}),e.jsx(u.Button,{type:"button",variant:"ghost",size:"icon",className:"size-8 shrink-0 text-muted-foreground hover:text-foreground",onClick:()=>I(t.id),"aria-label":"Remove filter",children:e.jsx(x.XIcon,{className:"size-3.5"})})]},t.id)}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(u.Button,{type:"button",variant:"outline",size:"sm",onClick:C,disabled:r.length===0,children:[e.jsx(x.PlusIcon,{className:"size-3.5"}),"Add filter"]}),l.length>0?e.jsx(u.Button,{type:"button",variant:"ghost",size:"sm",className:"text-muted-foreground",onClick:N,children:"Clear all"}):null]})]})})]})}exports.ManifestFilterPopover=A;
+//# sourceMappingURL=ManifestFilterPopover.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestFilterPopover.cjs","sources":["../../../../src/components/composed/PlateMapEditor/ManifestFilterPopover.tsx"],"sourcesContent":["import { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\";\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"@/components/ui/data-table/data-table\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains: \"contains\",\n  equals: \"equals\",\n  not_equals: \"not equals\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  is_empty: \"is empty\",\n  is_not_empty: \"is not empty\",\n};\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"];\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nfunction makeCondition(columnId: string, allowedOperators?: FilterOperator[]): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\";\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" };\n}\n\nexport interface ManifestFilterPopoverProps {\n  /** Filterable columns. Operator subsets can be specified per column. */\n  columns: FilterColumnConfig[];\n  /** Column id → display label resolver. */\n  columnLabel?: (columnId: string) => string;\n  filters: FilterCondition[];\n  onFiltersChange: (next: FilterCondition[]) => void;\n  triggerLabel?: string;\n  className?: string;\n}\n\nexport function ManifestFilterPopover({\n  columns,\n  columnLabel,\n  filters,\n  onFiltersChange,\n  triggerLabel = \"Filter\",\n  className,\n}: ManifestFilterPopoverProps) {\n  const labelFor = (columnId: string): string => columnLabel?.(columnId) ?? columnId;\n  const firstColumn = columns[0];\n  const firstColumnId = firstColumn?.columnId ?? \"\";\n\n  const addFilter = () => onFiltersChange([...filters, makeCondition(firstColumnId, firstColumn?.operators)]);\n  const removeFilter = (id: string) => onFiltersChange(filters.filter((cond) => cond.id !== id));\n  const updateFilter = (id: string, patch: Partial<FilterCondition>) =>\n    onFiltersChange(filters.map((cond) => (cond.id === id ? { ...cond, ...patch } : cond)));\n  const clearAll = () => onFiltersChange([]);\n\n  const activeCount = filters.length;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"manifest-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `${triggerLabel} (${activeCount} active)` : triggerLabel}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          {triggerLabel}\n          {activeCount > 0 ? (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent align=\"end\" className=\"min-w-80\">\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = columns.find((c) => c.columnId === condition.columnId);\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS;\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator);\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(value) => {\n                      const nextConfig = columns.find((c) => c.columnId === value);\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS;\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\");\n                      updateFilter(condition.id, { columnId: value, operator: nextOperator, value: \"\" });\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {columns.map((c) => (\n                        <SelectItem key={c.columnId} value={c.columnId}>\n                          {c.label ?? labelFor(c.columnId)}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(value) =>\n                      updateFilter(condition.id, { operator: value as FilterOperator, value: \"\" })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(event) => updateFilter(condition.id, { value: event.target.value })}\n                    />\n                  )}\n\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              );\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={columns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              ) : null}\n            </div>\n          </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","makeCondition","columnId","allowedOperators","operator","ManifestFilterPopover","columns","columnLabel","filters","onFiltersChange","triggerLabel","className","labelFor","firstColumn","firstColumnId","addFilter","removeFilter","id","cond","updateFilter","patch","clearAll","activeCount","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ListFilterIcon","PopoverContent","condition","operators","c","isValueFree","Select","value","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","SelectItem","op","Input","event","XIcon","PlusIcon"],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { ListFilterIcon as R, XIcon as S, PlusIcon as F } from "lucide-react";
+import { Button as m } from "../../ui/button.js";
+import { Input as q } from "../../ui/input.js";
+import { Popover as T, PopoverTrigger as V, PopoverContent as k } from "../../ui/popover.js";
+import { Select as v, SelectTrigger as g, SelectValue as _, SelectContent as x, SelectItem as y } from "../../ui/select.js";
+import { cn as U } from "../../../lib/utils.js";
+const j = {
+  contains: "contains",
+  equals: "equals",
+  not_equals: "not equals",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  is_empty: "is empty",
+  is_not_empty: "is not empty"
+}, L = ["is_empty", "is_not_empty"], C = [
+  "contains",
+  "equals",
+  "not_equals",
+  "starts_with",
+  "ends_with",
+  "is_empty",
+  "is_not_empty"
+];
+function B(n, u) {
+  const r = u?.[0] ?? "contains";
+  return { id: crypto.randomUUID(), columnId: n, operator: r, value: "" };
+}
+function Q({
+  columns: n,
+  columnLabel: u,
+  filters: r,
+  onFiltersChange: o,
+  triggerLabel: d = "Filter",
+  className: I
+}) {
+  const N = (e) => u?.(e) ?? e, h = n[0], w = h?.columnId ?? "", z = () => o([...r, B(w, h?.operators)]), b = (e) => o(r.filter((c) => c.id !== e)), p = (e, c) => o(r.map((s) => s.id === e ? { ...s, ...c } : s)), A = () => o([]), i = r.length;
+  return /* @__PURE__ */ l(T, { children: [
+    /* @__PURE__ */ t(V, { asChild: !0, children: /* @__PURE__ */ l(
+      m,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        "data-slot": "manifest-filter",
+        className: U(I),
+        "aria-label": i > 0 ? `${d} (${i} active)` : d,
+        children: [
+          /* @__PURE__ */ t(R, { className: "size-3.5" }),
+          d,
+          i > 0 ? /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground", children: i }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(k, { align: "end", className: "min-w-80", children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
+      r.map((e) => {
+        const s = n.find((a) => a.columnId === e.columnId)?.operators ?? C, E = L.includes(e.operator);
+        return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ l(
+            v,
+            {
+              value: e.columnId,
+              onValueChange: (a) => {
+                const f = n.find((P) => P.columnId === a)?.operators ?? C, O = f.includes(e.operator) ? e.operator : f[0] ?? "contains";
+                p(e.id, { columnId: a, operator: O, value: "" });
+              },
+              children: [
+                /* @__PURE__ */ t(g, { size: "sm", className: "w-36", children: /* @__PURE__ */ t(_, {}) }),
+                /* @__PURE__ */ t(x, { children: n.map((a) => /* @__PURE__ */ t(y, { value: a.columnId, children: a.label ?? N(a.columnId) }, a.columnId)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            v,
+            {
+              value: e.operator,
+              onValueChange: (a) => p(e.id, { operator: a, value: "" }),
+              children: [
+                /* @__PURE__ */ t(g, { size: "sm", className: "w-32", children: /* @__PURE__ */ t(_, {}) }),
+                /* @__PURE__ */ t(x, { children: s.map((a) => /* @__PURE__ */ t(y, { value: a, children: j[a] }, a)) })
+              ]
+            }
+          ),
+          E ? /* @__PURE__ */ t("div", { className: "h-8 w-40", "aria-hidden": !0 }) : /* @__PURE__ */ t(
+            q,
+            {
+              className: "w-40",
+              placeholder: "Value…",
+              value: e.value,
+              onChange: (a) => p(e.id, { value: a.target.value })
+            }
+          ),
+          /* @__PURE__ */ t(
+            m,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
+              onClick: () => b(e.id),
+              "aria-label": "Remove filter",
+              children: /* @__PURE__ */ t(S, { className: "size-3.5" })
+            }
+          )
+        ] }, e.id);
+      }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ l(
+          m,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: z,
+            disabled: n.length === 0,
+            children: [
+              /* @__PURE__ */ t(F, { className: "size-3.5" }),
+              "Add filter"
+            ]
+          }
+        ),
+        r.length > 0 ? /* @__PURE__ */ t(
+          m,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "text-muted-foreground",
+            onClick: A,
+            children: "Clear all"
+          }
+        ) : null
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  Q as ManifestFilterPopover
+};
+//# sourceMappingURL=ManifestFilterPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestFilterPopover.js","sources":["../../../../src/components/composed/PlateMapEditor/ManifestFilterPopover.tsx"],"sourcesContent":["import { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\";\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"@/components/ui/data-table/data-table\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains: \"contains\",\n  equals: \"equals\",\n  not_equals: \"not equals\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  is_empty: \"is empty\",\n  is_not_empty: \"is not empty\",\n};\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"];\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nfunction makeCondition(columnId: string, allowedOperators?: FilterOperator[]): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\";\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" };\n}\n\nexport interface ManifestFilterPopoverProps {\n  /** Filterable columns. Operator subsets can be specified per column. */\n  columns: FilterColumnConfig[];\n  /** Column id → display label resolver. */\n  columnLabel?: (columnId: string) => string;\n  filters: FilterCondition[];\n  onFiltersChange: (next: FilterCondition[]) => void;\n  triggerLabel?: string;\n  className?: string;\n}\n\nexport function ManifestFilterPopover({\n  columns,\n  columnLabel,\n  filters,\n  onFiltersChange,\n  triggerLabel = \"Filter\",\n  className,\n}: ManifestFilterPopoverProps) {\n  const labelFor = (columnId: string): string => columnLabel?.(columnId) ?? columnId;\n  const firstColumn = columns[0];\n  const firstColumnId = firstColumn?.columnId ?? \"\";\n\n  const addFilter = () => onFiltersChange([...filters, makeCondition(firstColumnId, firstColumn?.operators)]);\n  const removeFilter = (id: string) => onFiltersChange(filters.filter((cond) => cond.id !== id));\n  const updateFilter = (id: string, patch: Partial<FilterCondition>) =>\n    onFiltersChange(filters.map((cond) => (cond.id === id ? { ...cond, ...patch } : cond)));\n  const clearAll = () => onFiltersChange([]);\n\n  const activeCount = filters.length;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"manifest-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `${triggerLabel} (${activeCount} active)` : triggerLabel}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          {triggerLabel}\n          {activeCount > 0 ? (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          ) : null}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent align=\"end\" className=\"min-w-80\">\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = columns.find((c) => c.columnId === condition.columnId);\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS;\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator);\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(value) => {\n                      const nextConfig = columns.find((c) => c.columnId === value);\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS;\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\");\n                      updateFilter(condition.id, { columnId: value, operator: nextOperator, value: \"\" });\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {columns.map((c) => (\n                        <SelectItem key={c.columnId} value={c.columnId}>\n                          {c.label ?? labelFor(c.columnId)}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(value) =>\n                      updateFilter(condition.id, { operator: value as FilterOperator, value: \"\" })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(event) => updateFilter(condition.id, { value: event.target.value })}\n                    />\n                  )}\n\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              );\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={columns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 ? (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              ) : null}\n            </div>\n          </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","makeCondition","columnId","allowedOperators","operator","ManifestFilterPopover","columns","columnLabel","filters","onFiltersChange","triggerLabel","className","labelFor","firstColumn","firstColumnId","addFilter","removeFilter","id","cond","updateFilter","patch","clearAll","activeCount","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ListFilterIcon","PopoverContent","condition","operators","c","isValueFree","Select","value","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","SelectItem","op","Input","event","XIcon","PlusIcon"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("lucide-react"),C=require("react"),A=require("./csvPlateTriage.cjs"),F=require("./helpers.cjs"),I=require("../../ui/button.cjs"),n=require("../../ui/dropdown-menu.cjs"),z=require("../../../lib/utils.cjs");function _(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(a,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return a.default=t,Object.freeze(a)}const x=_(C);function b({inputRef:t,accept:a,onPick:r,triageCsv:i}){return e.jsx("input",{ref:t,type:"file",accept:a,hidden:!0,onChange:o=>{const u=o.currentTarget,s=o.target.files?.[0];if(!s){u.value="";return}(async()=>{const c=i?await A.triagePlateMapCsvFile(s):void 0;await(c?r?.(s,c):r?.(s)),u.value=""})()}})}function G({templates:t,templateId:a,onTemplateChange:r,onClearTemplate:i,hasEntries:o,onImportCsv:u,onExportCsv:s,onImportTemplate:c,onExportTemplate:j,label:g="Actions",align:D="start",side:m="bottom",csvAccept:S=".csv,text/csv",templateAccept:k="application/json",importTemplateLabel:y="Import template (JSON)",exportTemplateLabel:R="Save template",importCsvLabel:v="Import plate map (CSV)",exportCsvLabel:q="Export plate map (CSV)",clearLabel:N="Clear template",className:O}){const f=x.useRef(null),M=x.useRef(null),h=x.useMemo(()=>F.groupTemplateOptions(t),[t]),w=o===!1;return h.length>0||!!c||!!j||!!u||!!s||!!i?e.jsxs(e.Fragment,{children:[e.jsxs(n.DropdownMenu,{children:[e.jsx(n.DropdownMenuTrigger,{asChild:!0,children:e.jsxs(I.Button,{type:"button",variant:"outline",size:"sm",className:z.cn("min-w-24 justify-between",O),children:[e.jsx("span",{children:g}),e.jsx(d.ChevronDown,{"aria-hidden":!0})]})}),e.jsxs(n.DropdownMenuContent,{align:D,side:m,className:"w-64",children:[h.map(([p,P])=>e.jsxs(n.DropdownMenuGroup,{children:[p?e.jsx(n.DropdownMenuLabel,{children:p}):null,P.map(l=>e.jsxs(n.DropdownMenuItem,{disabled:l.disabled,onClick:()=>r?.(l.id),children:[l.id===a?e.jsx(d.Check,{"aria-hidden":!0}):e.jsx("span",{className:"size-4","aria-hidden":!0}),e.jsxs("span",{className:"flex min-w-0 flex-col",children:[e.jsx("span",{className:"truncate",children:l.label}),l.description?e.jsx("span",{className:"truncate text-xs text-muted-foreground",children:l.description}):null]})]},l.id))]},p||"templates")),h.length>0&&(c||j||u||s||i)?e.jsx(n.DropdownMenuSeparator,{}):null,c?e.jsxs(n.DropdownMenuItem,{onClick:()=>f.current?.click(),children:[e.jsx(d.LayoutTemplate,{"aria-hidden":!0}),y]}):null,j?e.jsxs(n.DropdownMenuItem,{disabled:w,onClick:()=>j(),children:[e.jsx(d.SaveAll,{"aria-hidden":!0}),R]}):null,(c||j)&&(u||s)?e.jsx(n.DropdownMenuSeparator,{}):null,u?e.jsxs(n.DropdownMenuItem,{onClick:()=>M.current?.click(),children:[e.jsx(d.Upload,{"aria-hidden":!0}),v]}):null,s?e.jsxs(n.DropdownMenuItem,{disabled:w,onClick:()=>s(),children:[e.jsx(d.Download,{"aria-hidden":!0}),q]}):null,i?e.jsxs(e.Fragment,{children:[e.jsx(n.DropdownMenuSeparator,{}),e.jsxs(n.DropdownMenuItem,{variant:"destructive",disabled:!a&&!o,onClick:()=>i(),children:[e.jsx(d.Trash2,{"aria-hidden":!0}),N]})]}):null]})]}),e.jsx(b,{inputRef:f,accept:k,onPick:c}),e.jsx(b,{inputRef:M,accept:S,onPick:u,triageCsv:!0})]}):null}exports.PlateMapActionsMenu=G;
+//# sourceMappingURL=PlateMapActionsMenu.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlateMapActionsMenu.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlateMapActionsMenu.tsx"],"sourcesContent":["import { Check, ChevronDown, Download, LayoutTemplate, SaveAll, Trash2, 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 {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PlateMapActionsMenuProps extends ImportExportHandlers {\n  templates?: TemplateOption[];\n  templateId?: string;\n  onTemplateChange?: (id: string) => void;\n  onClearTemplate?: () => void;\n  /** Disable export/save actions when there is nothing to export. */\n  hasEntries?: boolean;\n  label?: React.ReactNode;\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  csvAccept?: string;\n  templateAccept?: string;\n  importTemplateLabel?: string;\n  exportTemplateLabel?: string;\n  importCsvLabel?: string;\n  exportCsvLabel?: string;\n  clearLabel?: string;\n  className?: string;\n}\n\nfunction HiddenFileInput({\n  inputRef,\n  accept,\n  onPick,\n  triageCsv,\n}: {\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  accept: string;\n  onPick?: (file: File, triage?: PlateMapCsvTriage) => void | Promise<void>;\n  triageCsv?: boolean;\n}) {\n  return (\n    <input\n      ref={inputRef}\n      type=\"file\"\n      accept={accept}\n      hidden\n      onChange={(event) => {\n        const input = event.currentTarget;\n        const file = event.target.files?.[0];\n        if (!file) {\n          input.value = \"\";\n          return;\n        }\n\n        void (async () => {\n          const triage = triageCsv ? await triagePlateMapCsvFile(file) : undefined;\n          await (triage ? onPick?.(file, triage) : onPick?.(file));\n          input.value = \"\";\n        })();\n      }}\n    />\n  );\n}\n\nexport function PlateMapActionsMenu({\n  templates,\n  templateId,\n  onTemplateChange,\n  onClearTemplate,\n  hasEntries,\n  onImportCsv,\n  onExportCsv,\n  onImportTemplate,\n  onExportTemplate,\n  label = \"Actions\",\n  align = \"start\",\n  side = \"bottom\",\n  csvAccept = \".csv,text/csv\",\n  templateAccept = \"application/json\",\n  importTemplateLabel = \"Import template (JSON)\",\n  exportTemplateLabel = \"Save template\",\n  importCsvLabel = \"Import plate map (CSV)\",\n  exportCsvLabel = \"Export plate map (CSV)\",\n  clearLabel = \"Clear template\",\n  className,\n}: PlateMapActionsMenuProps) {\n  const templateInputRef = React.useRef<HTMLInputElement>(null);\n  const csvInputRef = React.useRef<HTMLInputElement>(null);\n  const templateGroups = React.useMemo(() => groupTemplateOptions(templates), [templates]);\n  const disableEntryExport = hasEntries === false;\n\n  const hasMenuItems =\n    templateGroups.length > 0 ||\n    !!onImportTemplate ||\n    !!onExportTemplate ||\n    !!onImportCsv ||\n    !!onExportCsv ||\n    !!onClearTemplate;\n\n  if (!hasMenuItems) return null;\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" className={cn(\"min-w-24 justify-between\", className)}>\n            <span>{label}</span>\n            <ChevronDown aria-hidden />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align={align} side={side} className=\"w-64\">\n          {templateGroups.map(([group, options]) => (\n            <DropdownMenuGroup key={group || \"templates\"}>\n              {group ? <DropdownMenuLabel>{group}</DropdownMenuLabel> : null}\n              {options.map((template) => (\n                <DropdownMenuItem\n                  key={template.id}\n                  disabled={template.disabled}\n                  onClick={() => onTemplateChange?.(template.id)}\n                >\n                  {template.id === templateId ? <Check aria-hidden /> : <span className=\"size-4\" aria-hidden />}\n                  <span className=\"flex min-w-0 flex-col\">\n                    <span className=\"truncate\">{template.label}</span>\n                    {template.description ? (\n                      <span className=\"truncate text-xs text-muted-foreground\">{template.description}</span>\n                    ) : null}\n                  </span>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n          ))}\n\n          {templateGroups.length > 0 &&\n          (onImportTemplate || onExportTemplate || onImportCsv || onExportCsv || onClearTemplate) ? (\n            <DropdownMenuSeparator />\n          ) : null}\n\n          {onImportTemplate ? (\n            <DropdownMenuItem onClick={() => templateInputRef.current?.click()}>\n              <LayoutTemplate aria-hidden />\n              {importTemplateLabel}\n            </DropdownMenuItem>\n          ) : null}\n          {onExportTemplate ? (\n            <DropdownMenuItem disabled={disableEntryExport} onClick={() => onExportTemplate()}>\n              <SaveAll aria-hidden />\n              {exportTemplateLabel}\n            </DropdownMenuItem>\n          ) : null}\n\n          {(onImportTemplate || onExportTemplate) && (onImportCsv || onExportCsv) ? <DropdownMenuSeparator /> : null}\n\n          {onImportCsv ? (\n            <DropdownMenuItem onClick={() => csvInputRef.current?.click()}>\n              <Upload aria-hidden />\n              {importCsvLabel}\n            </DropdownMenuItem>\n          ) : null}\n          {onExportCsv ? (\n            <DropdownMenuItem disabled={disableEntryExport} onClick={() => onExportCsv()}>\n              <Download aria-hidden />\n              {exportCsvLabel}\n            </DropdownMenuItem>\n          ) : null}\n\n          {onClearTemplate ? (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                variant=\"destructive\"\n                disabled={!templateId && !hasEntries}\n                onClick={() => onClearTemplate()}\n              >\n                <Trash2 aria-hidden />\n                {clearLabel}\n              </DropdownMenuItem>\n            </>\n          ) : null}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <HiddenFileInput inputRef={templateInputRef} accept={templateAccept} onPick={onImportTemplate} />\n      <HiddenFileInput inputRef={csvInputRef} accept={csvAccept} onPick={onImportCsv} triageCsv />\n    </>\n  );\n}\n"],"names":["HiddenFileInput","inputRef","accept","onPick","triageCsv","jsx","event","input","file","triage","triagePlateMapCsvFile","PlateMapActionsMenu","templates","templateId","onTemplateChange","onClearTemplate","hasEntries","onImportCsv","onExportCsv","onImportTemplate","onExportTemplate","label","align","side","csvAccept","templateAccept","importTemplateLabel","exportTemplateLabel","importCsvLabel","exportCsvLabel","clearLabel","className","templateInputRef","React","csvInputRef","templateGroups","groupTemplateOptions","disableEntryExport","jsxs","Fragment","DropdownMenu","DropdownMenuTrigger","Button","cn","ChevronDown","DropdownMenuContent","group","options","DropdownMenuGroup","DropdownMenuLabel","template","DropdownMenuItem","Check","DropdownMenuSeparator","LayoutTemplate","SaveAll","Upload","Download","Trash2"],"mappings":"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"}

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

@@ -0,0 +1,126 @@
+import { jsxs as n, Fragment as k, jsx as e } from "react/jsx-runtime";
+import { ChevronDown as G, Check as L, LayoutTemplate as O, SaveAll as V, Upload as B, Download as H, Trash2 as J } from "lucide-react";
+import * as m from "react";
+import { triagePlateMapCsvFile as U } from "./csvPlateTriage.js";
+import { groupTemplateOptions as q } from "./helpers.js";
+import { Button as K } from "../../ui/button.js";
+import { DropdownMenu as Q, DropdownMenuTrigger as W, DropdownMenuContent as X, DropdownMenuGroup as Y, DropdownMenuLabel as Z, DropdownMenuItem as c, DropdownMenuSeparator as w } from "../../ui/dropdown-menu.js";
+import { cn as _ } from "../../../lib/utils.js";
+function D({
+  inputRef: s,
+  accept: o,
+  onPick: h,
+  triageCsv: l
+}) {
+  return /* @__PURE__ */ e(
+    "input",
+    {
+      ref: s,
+      type: "file",
+      accept: o,
+      hidden: !0,
+      onChange: (d) => {
+        const r = d.currentTarget, i = d.target.files?.[0];
+        if (!i) {
+          r.value = "";
+          return;
+        }
+        (async () => {
+          const t = l ? await U(i) : void 0;
+          await (t ? h?.(i, t) : h?.(i)), r.value = "";
+        })();
+      }
+    }
+  );
+}
+function te({
+  templates: s,
+  templateId: o,
+  onTemplateChange: h,
+  onClearTemplate: l,
+  hasEntries: d,
+  onImportCsv: r,
+  onExportCsv: i,
+  onImportTemplate: t,
+  onExportTemplate: u,
+  label: N = "Actions",
+  align: R = "start",
+  side: v = "bottom",
+  csvAccept: y = ".csv,text/csv",
+  templateAccept: S = "application/json",
+  importTemplateLabel: C = "Import template (JSON)",
+  exportTemplateLabel: j = "Save template",
+  importCsvLabel: x = "Import plate map (CSV)",
+  exportCsvLabel: A = "Export plate map (CSV)",
+  clearLabel: F = "Clear template",
+  className: P
+}) {
+  const M = m.useRef(null), b = m.useRef(null), f = m.useMemo(() => q(s), [s]), g = d === !1;
+  return f.length > 0 || !!t || !!u || !!r || !!i || !!l ? /* @__PURE__ */ n(k, { children: [
+    /* @__PURE__ */ n(Q, { children: [
+      /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ n(K, { type: "button", variant: "outline", size: "sm", className: _("min-w-24 justify-between", P), children: [
+        /* @__PURE__ */ e("span", { children: N }),
+        /* @__PURE__ */ e(G, { "aria-hidden": !0 })
+      ] }) }),
+      /* @__PURE__ */ n(X, { align: R, side: v, className: "w-64", children: [
+        f.map(([p, z]) => /* @__PURE__ */ n(Y, { children: [
+          p ? /* @__PURE__ */ e(Z, { children: p }) : null,
+          z.map((a) => /* @__PURE__ */ n(
+            c,
+            {
+              disabled: a.disabled,
+              onClick: () => h?.(a.id),
+              children: [
+                a.id === o ? /* @__PURE__ */ e(L, { "aria-hidden": !0 }) : /* @__PURE__ */ e("span", { className: "size-4", "aria-hidden": !0 }),
+                /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ e("span", { className: "truncate", children: a.label }),
+                  a.description ? /* @__PURE__ */ e("span", { className: "truncate text-xs text-muted-foreground", children: a.description }) : null
+                ] })
+              ]
+            },
+            a.id
+          ))
+        ] }, p || "templates")),
+        f.length > 0 && (t || u || r || i || l) ? /* @__PURE__ */ e(w, {}) : null,
+        t ? /* @__PURE__ */ n(c, { onClick: () => M.current?.click(), children: [
+          /* @__PURE__ */ e(O, { "aria-hidden": !0 }),
+          C
+        ] }) : null,
+        u ? /* @__PURE__ */ n(c, { disabled: g, onClick: () => u(), children: [
+          /* @__PURE__ */ e(V, { "aria-hidden": !0 }),
+          j
+        ] }) : null,
+        (t || u) && (r || i) ? /* @__PURE__ */ e(w, {}) : null,
+        r ? /* @__PURE__ */ n(c, { onClick: () => b.current?.click(), children: [
+          /* @__PURE__ */ e(B, { "aria-hidden": !0 }),
+          x
+        ] }) : null,
+        i ? /* @__PURE__ */ n(c, { disabled: g, onClick: () => i(), children: [
+          /* @__PURE__ */ e(H, { "aria-hidden": !0 }),
+          A
+        ] }) : null,
+        l ? /* @__PURE__ */ n(k, { children: [
+          /* @__PURE__ */ e(w, {}),
+          /* @__PURE__ */ n(
+            c,
+            {
+              variant: "destructive",
+              disabled: !o && !d,
+              onClick: () => l(),
+              children: [
+                /* @__PURE__ */ e(J, { "aria-hidden": !0 }),
+                F
+              ]
+            }
+          )
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ e(D, { inputRef: M, accept: S, onPick: t }),
+    /* @__PURE__ */ e(D, { inputRef: b, accept: y, onPick: r, triageCsv: !0 })
+  ] }) : null;
+}
+export {
+  te as PlateMapActionsMenu
+};
+//# sourceMappingURL=PlateMapActionsMenu.js.map