@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

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>\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 }) });
@@ -13,10 +13,10 @@ function J({
   activePlateId: l,
   onPlateChange: s,
   onAddPlate: o,
-  onRemovePlate: b,
+  onRemovePlate: f,
   addPlateLabel: t = "Add Plate",
   removePlateLabel: g = "Remove plate",
-  label: f = "Plate",
+  label: b = "Plate",
   variant: N = "dropdown",
   align: y = "start",
   side: k = "bottom",
@@ -31,12 +31,12 @@ function J({
         variant: "outline",
         size: "sm",
         value: a?.id ?? "",
-        "aria-label": f,
+        "aria-label": b,
         onValueChange: (e) => {
           e && s?.(e);
         },
         children: r.map((e) => {
-          const d = e.id === a?.id, p = !!b && r.length > 1;
+          const d = e.id === a?.id, p = !!f && r.length > 1;
           return /* @__PURE__ */ n("div", { className: "inline-flex items-stretch", children: [
             /* @__PURE__ */ n(
               F,
@@ -59,7 +59,7 @@ function J({
                 size: "icon-sm",
                 "aria-label": `${g} ${e.label ?? e.barcode}`,
                 className: "rounded-l-none",
-                onClick: () => b?.(e.id),
+                onClick: () => f?.(e.id),
                 children: /* @__PURE__ */ i(D, { "aria-hidden": !0 })
               }
             ) : null
@@ -83,14 +83,14 @@ function J({
         t
       ]
     }
-  ) : /* @__PURE__ */ n(j, { children: [
+  ) : /* @__PURE__ */ n(j, { modal: !1, children: [
     /* @__PURE__ */ i(G, { asChild: !0, children: /* @__PURE__ */ n(
       c,
       {
         type: "button",
         variant: "outline",
         size: "sm",
-        "aria-label": f,
+        "aria-label": b,
         className: u("min-w-36 justify-between", m),
         children: [
           /* @__PURE__ */ i("span", { className: "flex min-w-0 items-center gap-1.5", children: a ? /* @__PURE__ */ i(v, { plate: a, selected: !0 }) : /* @__PURE__ */ i("span", { children: t }) }),

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMapPlateSelector.js","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>\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.js","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/PlatePaintGrid.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),_e=require("react"),v=require("./wellGrid.cjs"),ee=require("../../../lib/utils.cjs");function ye(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(l,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return l.default=n,Object.freeze(l)}const L=ye(_e),we=34,be=24,xe=72,Ae=36,c=26,X=12,Me=1,oe=16,Pe=9,Te=5,N=1,z=4,te=4,Oe=3,se=5,q=650,ne="var(--surface-container)",le="var(--border)";function Re(n,l){const o=[];for(let s=0;s<n;s++)o.push(u.jsx("text",{x:c+s*l+l/2,y:c/2,textAnchor:"middle",fontSize:oe,className:"fill-muted-foreground",children:s+1},`c${s}`));return o}function je(n,l){const o=[];for(let s=0;s<n;s++)o.push(u.jsx("text",{x:c-Pe,y:c+s*l+l/2+Te,textAnchor:"end",fontSize:oe,className:"fill-muted-foreground",children:v.rowLabel(s)},`r${s}`));return o}function ke(n,l,o){const{dims:s,cellSize:e,values:E,selection:P,dragPositions:_,colorForWell:d,emptyWellFillColor:h,selectedFillColor:y,selectedFillOpacity:b,selectionFillMode:O,wellShape:m}=n,p=v.pos(l,o,s.columns),x=E.get(p),w=P.has(p)||_.has(p),k=x===void 0&&h!==null?h:d(x,p),T=w&&!(w&&O==="well"&&x!==void 0),R=T?y:k,j=T?b:void 0;if(m==="circle"){const F=c+o*e+e/2,A=c+l*e+e/2,S=e/2-N;return u.jsx("circle",{cx:F,cy:A,r:S,fill:R,fillOpacity:j,stroke:"none","data-well":p,"data-selected":w?"true":void 0},p)}return u.jsx("rect",{x:c+o*e,y:c+l*e,width:e,height:e,fill:R,fillOpacity:j,stroke:"none","data-well":p,"data-selected":w?"true":void 0},p)}function Fe({dims:n,...l}){const o=[];for(let s=0;s<n.rows;s++)for(let e=0;e<n.columns;e++)o.push(ke({dims:n,...l},s,e));return o}function Se(n,l,o){const s=[],e=c,E=c,P=c+n.columns*l,_=c+n.rows*l;for(let d=0;d<=n.columns;d++){const h=c+d*l;s.push(u.jsx("line",{x1:h,y1:E,x2:h,y2:_,stroke:o,strokeWidth:z,vectorEffect:"non-scaling-stroke",shapeRendering:"crispEdges",pointerEvents:"none","data-plate-grid-line":`column-${d}`},`grid-col-${d}`))}for(let d=0;d<=n.rows;d++){const h=c+d*l;s.push(u.jsx("line",{x1:e,y1:h,x2:P,y2:h,stroke:o,strokeWidth:z,vectorEffect:"non-scaling-stroke",shapeRendering:"crispEdges",pointerEvents:"none","data-plate-grid-line":`row-${d}`},`grid-row-${d}`))}return s}function De(n,l,o){const{dims:s,cellSize:e,selection:E,dragPositions:P,selectedBorderColor:_,flashWellId:d,flashWellKey:h,wellShape:y,highlightedWellIds:b,highlightBorderColor:O}=n,m=v.pos(l,o,s.columns),p=E.has(m)||P.has(m),x=d===m,w=!p&&b.has(m);if(!p&&!x&&!w)return null;const k=c+o*e+N,I=c+l*e+N,T=e-N*2,R=c+o*e+e/2,j=c+l*e+e/2,F=e/2-N,A=y==="circle",S=A?{cx:R,cy:j,r:F}:{x:k,y:I,width:T,height:T},M=(r,D,C)=>{const a={...S,...r,pointerEvents:"none"};return A?u.jsx("circle",{...a,children:D},C):u.jsx("rect",{...a,children:D},C)},$=u.jsxs(u.Fragment,{children:[u.jsx("animate",{attributeName:"fill-opacity",values:"0.24;0.1;0",dur:`${q}ms`,fill:"freeze"}),u.jsx("animate",{attributeName:"stroke-opacity",values:"0.92;0.42;0",dur:`${q}ms`,fill:"freeze"}),u.jsx("animate",{attributeName:"stroke-width",values:`${se};${te}`,dur:`${q}ms`,fill:"freeze"})]});return u.jsxs("g",{children:[p?M({fill:"none",stroke:_,strokeWidth:te,"data-well-selection":m}):null,w?M({fill:"none",stroke:O,strokeWidth:Oe,"data-well-highlight":m}):null,x?M({fill:_,fillOpacity:.24,stroke:_,strokeOpacity:.92,strokeWidth:se,"data-well-flash":m},$,`${m}-${h}`):null]},`overlay-${m}`)}function Ce({dims:n,...l}){const o=[];for(let s=0;s<n.rows;s++)for(let e=0;e<n.columns;e++){const E=De({dims:n,...l},s,e);E&&o.push(E)}return o}function We({format:n,rows:l,columns:o,values:s,selection:e,onSelectionChange:E,colorForWell:P,emptyWellFillColor:_=ne,wellShape:d="rect",framed:h=!1,cellSize:y,autoScale:b=!0,minCellSize:O=be,maxCellSize:m,borderColor:p=le,selectedBorderColor:x="var(--color-primary)",selectedFillColor:w="var(--color-primary)",selectedFillOpacity:k=.18,selectionFillMode:I="selection",flashWellId:T,flashWellKey:R,highlightedWellIds:j,highlightBorderColor:F="var(--color-primary)",onWellHover:A,onWellDoubleClick:S,wrapWell:M,className:$}){const r=v.resolveDimensions(n,l,o),D=L.useRef(null),C=L.useRef(null),[a,B]=L.useState(null),[U,re]=L.useState();L.useLayoutEffect(()=>{const i=D.current;if(!i||!b||y!==void 0)return;const t=()=>re(i.clientWidth);if(t(),typeof ResizeObserver>"u")return;const f=new ResizeObserver(t);return f.observe(i),()=>f.disconnect()},[b,y]);const g=L.useMemo(()=>{if(!b||y!==void 0||!U)return y??we;const i=m??(r.columns>12?Ae:xe),t=h?(X+Me)*2:0,f=Math.floor((U-c-t)/r.columns);return Math.max(O,Math.min(i,f))},[b,y,U,r.columns,h,m,O]),G=L.useCallback(i=>{const t=C.current;if(!t)return null;const f=t.getBoundingClientRect(),W=i.clientX-f.left-c,ve=i.clientY-f.top-c,H=Math.floor(W/g),K=Math.floor(ve/g);return K<0||K>=r.rows||H<0||H>=r.columns?null:{r:K,c:H}},[g,r.rows,r.columns]),ce=i=>{const t=G(i);if(!t)return;const f=i.shiftKey?"add":i.altKey?"remove":"replace";B({start:t,cur:t,mode:f})},ie=i=>{const t=G(i);t&&A&&A(v.pos(t.r,t.c,r.columns)),!(!a||!t)&&B({...a,cur:t})},Y=L.useCallback(()=>{if(!a)return;const i=v.rectPositions(a.start.r,a.start.c,a.cur.r,a.cur.c,r.columns);let t;a.mode==="replace"?t=new Set(i):a.mode==="add"?(t=new Set(e),i.forEach(f=>t.add(f))):(t=new Set(e),i.forEach(f=>t.delete(f))),E(t),B(null)},[a,r.columns,E,e]),ae=()=>Y(),ue=()=>{Y(),A?.(null)},de=i=>{const t=G(i);t&&S?.(v.pos(t.r,t.c,r.columns))},fe=L.useMemo(()=>a?new Set(v.rectPositions(a.start.r,a.start.c,a.cur.r,a.cur.c,r.columns)):new Set,[a,r.columns]),Z=z,J=r.columns*g+c+Z,Q=r.rows*g+c+Z,he=Re(r.columns,g),pe=je(r.rows,g),V={dims:r,cellSize:g,values:s,selection:e,dragPositions:fe,colorForWell:P,emptyWellFillColor:_,borderColor:p,selectedBorderColor:x,selectedFillColor:w,selectedFillOpacity:k,selectionFillMode:I,wellShape:d,highlightedWellIds:j??new Set,highlightBorderColor:F,flashWellId:T,flashWellKey:R},ge=Fe(V),me=d==="circle"?[]:Se(r,g,p),Ee=Ce(V),Le=L.useMemo(()=>{if(!M)return[];const i=[];for(let t=0;t<r.rows;t++)for(let f=0;f<r.columns;f++){const W=v.pos(t,f,r.columns);i.push(u.jsx("div",{style:{position:"absolute",left:c+f*g,top:c+t*g,width:g,height:g},"data-well-id":W,children:M(W,g)},W))}return i},[M,r.rows,r.columns,g]);return u.jsx("div",{ref:D,className:ee.cn("relative w-full select-none",$),"data-slot":"plate-paint-grid",children:u.jsxs("div",{className:ee.cn("relative inline-block",h&&"rounded-xl border bg-card p-3 shadow-sm"),"data-slot":"plate-paint-grid-frame",children:[u.jsxs("svg",{ref:C,width:J,height:Q,className:"block cursor-crosshair",onMouseDown:ce,onMouseMove:ie,onMouseUp:ae,onMouseLeave:ue,onDoubleClick:de,role:"group","aria-label":`${r.rows} row by ${r.columns} column plate map. Drag to select wells.`,children:[he,pe,ge,me,Ee]}),M?u.jsx("div",{className:"pointer-events-none absolute",style:{top:h?X:0,left:h?X:0,width:J,height:Q},"aria-hidden":!0,"data-slot":"plate-well-overlay",children:Le}):null]})})}exports.parsePos=v.parsePos;exports.PLATE_MAP_CELL_BORDER=le;exports.PLATE_MAP_EMPTY_WELL_FILL=ne;exports.PlatePaintGrid=We;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),_e=require("react"),v=require("./wellGrid.cjs"),ee=require("../../../lib/utils.cjs");function ye(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(l,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return l.default=n,Object.freeze(l)}const L=ye(_e),we=34,be=24,xe=72,Ae=36,c=26,X=12,Me=1,oe=16,Pe=9,Te=5,N=1,z=4,te=4,Oe=3,se=5,q=650,ne="var(--surface-container)",le="var(--border)";function Re(n,l){const o=[];for(let s=0;s<n;s++)o.push(u.jsx("text",{x:c+s*l+l/2,y:c/2,textAnchor:"middle",fontSize:oe,className:"fill-muted-foreground",children:s+1},`c${s}`));return o}function je(n,l){const o=[];for(let s=0;s<n;s++)o.push(u.jsx("text",{x:c-Pe,y:c+s*l+l/2+Te,textAnchor:"end",fontSize:oe,className:"fill-muted-foreground",children:v.rowLabel(s)},`r${s}`));return o}function ke(n,l,o){const{dims:s,cellSize:e,values:E,selection:P,dragPositions:_,colorForWell:d,emptyWellFillColor:h,selectedFillColor:y,selectedFillOpacity:b,selectionFillMode:O,wellShape:m}=n,p=v.pos(l,o,s.columns),x=E.get(p),w=P.has(p)||_.has(p),k=x===void 0&&h!==null?h:d(x,p),T=w&&!(w&&O==="well"&&x!==void 0),R=T?y:k,j=T?b:void 0;if(m==="circle"){const F=c+o*e+e/2,A=c+l*e+e/2,S=e/2-N;return u.jsx("circle",{cx:F,cy:A,r:S,fill:R,fillOpacity:j,stroke:"none","data-well":p,"data-selected":w?"true":void 0},p)}return u.jsx("rect",{x:c+o*e,y:c+l*e,width:e,height:e,fill:R,fillOpacity:j,stroke:"none","data-well":p,"data-selected":w?"true":void 0},p)}function Fe({dims:n,...l}){const o=[];for(let s=0;s<n.rows;s++)for(let e=0;e<n.columns;e++)o.push(ke({dims:n,...l},s,e));return o}function Se(n,l,o){const s=[],e=c,E=c,P=c+n.columns*l,_=c+n.rows*l;for(let d=0;d<=n.columns;d++){const h=c+d*l;s.push(u.jsx("line",{x1:h,y1:E,x2:h,y2:_,stroke:o,strokeWidth:z,vectorEffect:"non-scaling-stroke",shapeRendering:"crispEdges",pointerEvents:"none","data-plate-grid-line":`column-${d}`},`grid-col-${d}`))}for(let d=0;d<=n.rows;d++){const h=c+d*l;s.push(u.jsx("line",{x1:e,y1:h,x2:P,y2:h,stroke:o,strokeWidth:z,vectorEffect:"non-scaling-stroke",shapeRendering:"crispEdges",pointerEvents:"none","data-plate-grid-line":`row-${d}`},`grid-row-${d}`))}return s}function De(n,l,o){const{dims:s,cellSize:e,selection:E,dragPositions:P,selectedBorderColor:_,flashWellId:d,flashWellKey:h,wellShape:y,highlightedWellIds:b,highlightBorderColor:O}=n,m=v.pos(l,o,s.columns),p=E.has(m)||P.has(m),x=d===m,w=!p&&b.has(m);if(!p&&!x&&!w)return null;const k=c+o*e+N,I=c+l*e+N,T=e-N*2,R=c+o*e+e/2,j=c+l*e+e/2,F=e/2-N,A=y==="circle",S=A?{cx:R,cy:j,r:F}:{x:k,y:I,width:T,height:T},M=(r,D,C)=>{const a={...S,...r,pointerEvents:"none"};return A?u.jsx("circle",{...a,children:D},C):u.jsx("rect",{...a,children:D},C)},$=u.jsxs(u.Fragment,{children:[u.jsx("animate",{attributeName:"fill-opacity",values:"0.24;0.1;0",dur:`${q}ms`,fill:"freeze"}),u.jsx("animate",{attributeName:"stroke-opacity",values:"0.92;0.42;0",dur:`${q}ms`,fill:"freeze"}),u.jsx("animate",{attributeName:"stroke-width",values:`${se};${te}`,dur:`${q}ms`,fill:"freeze"})]});return u.jsxs("g",{children:[p?M({fill:"none",stroke:_,strokeWidth:te,"data-well-selection":m}):null,w?M({fill:"none",stroke:O,strokeWidth:Oe,"data-well-highlight":m}):null,x?M({fill:_,fillOpacity:.24,stroke:_,strokeOpacity:.92,strokeWidth:se,"data-well-flash":m},$,`${m}-${h}`):null]},`overlay-${m}`)}function Ce({dims:n,...l}){const o=[];for(let s=0;s<n.rows;s++)for(let e=0;e<n.columns;e++){const E=De({dims:n,...l},s,e);E&&o.push(E)}return o}function We({format:n,rows:l,columns:o,values:s,selection:e,onSelectionChange:E,colorForWell:P,emptyWellFillColor:_=ne,wellShape:d="rect",framed:h=!1,cellSize:y,autoScale:b=!0,minCellSize:O=be,maxCellSize:m,borderColor:p=le,selectedBorderColor:x="var(--color-primary)",selectedFillColor:w="var(--color-primary)",selectedFillOpacity:k=.18,selectionFillMode:I="selection",flashWellId:T,flashWellKey:R,highlightedWellIds:j,highlightBorderColor:F="var(--color-primary)",onWellHover:A,onWellDoubleClick:S,wrapWell:M,className:$}){const r=v.resolveDimensions(n,l,o),D=L.useRef(null),C=L.useRef(null),[a,B]=L.useState(null),[U,re]=L.useState();L.useLayoutEffect(()=>{const i=D.current;if(!i||!b||y!==void 0)return;const t=()=>re(i.clientWidth);if(t(),typeof ResizeObserver>"u")return;const f=new ResizeObserver(t);return f.observe(i),()=>f.disconnect()},[b,y]);const g=L.useMemo(()=>{if(!b||y!==void 0||!U)return y??we;const i=m??(r.columns>12?Ae:xe),t=h?(X+Me)*2:0,f=Math.floor((U-c-t)/r.columns);return Math.max(O,Math.min(i,f))},[b,y,U,r.columns,h,m,O]),G=L.useCallback(i=>{const t=C.current;if(!t)return null;const f=t.getBoundingClientRect(),W=i.clientX-f.left-c,ve=i.clientY-f.top-c,H=Math.floor(W/g),K=Math.floor(ve/g);return K<0||K>=r.rows||H<0||H>=r.columns?null:{r:K,c:H}},[g,r.rows,r.columns]),ce=i=>{const t=G(i);if(!t)return;const f=i.shiftKey?"add":i.altKey?"remove":"replace";B({start:t,cur:t,mode:f})},ie=i=>{const t=G(i);t&&A&&A(v.pos(t.r,t.c,r.columns)),!(!a||!t)&&B({...a,cur:t})},Y=L.useCallback(()=>{if(!a)return;const i=v.rectPositions(a.start.r,a.start.c,a.cur.r,a.cur.c,r.columns);let t;a.mode==="replace"?t=new Set(i):a.mode==="add"?(t=new Set(e),i.forEach(f=>t.add(f))):(t=new Set(e),i.forEach(f=>t.delete(f))),E(t),B(null)},[a,r.columns,E,e]),ae=()=>Y(),ue=()=>{Y(),A?.(null)},de=i=>{const t=G(i);t&&S?.(v.pos(t.r,t.c,r.columns))},fe=L.useMemo(()=>a?new Set(v.rectPositions(a.start.r,a.start.c,a.cur.r,a.cur.c,r.columns)):new Set,[a,r.columns]),Z=z,J=r.columns*g+c+Z,Q=r.rows*g+c+Z,he=Re(r.columns,g),pe=je(r.rows,g),V={dims:r,cellSize:g,values:s,selection:e,dragPositions:fe,colorForWell:P,emptyWellFillColor:_,borderColor:p,selectedBorderColor:x,selectedFillColor:w,selectedFillOpacity:k,selectionFillMode:I,wellShape:d,highlightedWellIds:j??new Set,highlightBorderColor:F,flashWellId:T,flashWellKey:R},ge=Fe(V),me=d==="circle"?[]:Se(r,g,p),Ee=Ce(V),Le=L.useMemo(()=>{if(!M)return[];const i=[];for(let t=0;t<r.rows;t++)for(let f=0;f<r.columns;f++){const W=v.pos(t,f,r.columns);i.push(u.jsx("div",{style:{position:"absolute",left:c+f*g,top:c+t*g,width:g,height:g},"data-well-id":W,children:M(W,g)},W))}return i},[M,r.rows,r.columns,g]);return u.jsx("div",{ref:D,className:ee.cn("relative w-full select-none",$),"data-slot":"plate-paint-grid",children:u.jsxs("div",{className:ee.cn("relative inline-block",h&&"rounded-xl border bg-card p-3 shadow-elevation-3"),"data-slot":"plate-paint-grid-frame",children:[u.jsxs("svg",{ref:C,width:J,height:Q,className:"block cursor-crosshair",onMouseDown:ce,onMouseMove:ie,onMouseUp:ae,onMouseLeave:ue,onDoubleClick:de,role:"group","aria-label":`${r.rows} row by ${r.columns} column plate map. Drag to select wells.`,children:[he,pe,ge,me,Ee]}),M?u.jsx("div",{className:"pointer-events-none absolute",style:{top:h?X:0,left:h?X:0,width:J,height:Q},"aria-hidden":!0,"data-slot":"plate-well-overlay",children:Le}):null]})})}exports.parsePos=v.parsePos;exports.PLATE_MAP_CELL_BORDER=le;exports.PLATE_MAP_EMPTY_WELL_FILL=ne;exports.PlatePaintGrid=We;
 //# sourceMappingURL=PlatePaintGrid.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlatePaintGrid.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlatePaintGrid.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { parsePos, pos, rectPositions, resolveDimensions, rowLabel } from \"./wellGrid\";\n\nimport type { PlateDimensions, PlateFormat, WellId, WellRecord } from \"./types\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst DEFAULT_CELL = 34;\nconst DEFAULT_MIN_AUTO_CELL = 24;\nconst DEFAULT_MAX_AUTO_CELL = 72;\nconst DEFAULT_MAX_DENSE_AUTO_CELL = 36;\nconst LABEL_PAD = 26;\nconst FRAME_PADDING_PX = 12;\nconst FRAME_BORDER_PX = 1;\nconst LABEL_FONT_SIZE = 16;\nconst LABEL_TEXT_INSET = 9;\nconst LABEL_BASELINE_OFFSET = 5;\nconst WELL_INSET = 1;\nconst STROKE_DEFAULT = 4;\nconst STROKE_SELECTED = 4;\nconst STROKE_HIGHLIGHT = 3;\nconst STROKE_FLASH = 5;\nconst FLASH_DURATION_MS = 650;\nexport const PLATE_MAP_EMPTY_WELL_FILL = \"var(--surface-container)\";\nexport const PLATE_MAP_CELL_BORDER = \"var(--border)\";\n\nexport type WellShape = \"rect\" | \"circle\";\n\nexport interface PlatePaintGridProps<T extends WellRecord = WellRecord> {\n  format: PlateFormat;\n  rows?: number;\n  columns?: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  onSelectionChange: (next: Set<WellId>) => void;\n  /** Returns the fill color for a given well record (or undefined if empty). */\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */\n  emptyWellFillColor?: string | null;\n  /** Geometric shape of each well. `\"circle\"` matches scientific plate visuals. Defaults to `\"rect\"`. */\n  wellShape?: WellShape;\n  /**\n   * When true, wraps the grid in a card-like surface (rounded, bordered,\n   * padded, soft shadow) so it reads as a physical plate. Pairs well with\n   * `wellShape=\"circle\"`.\n   */\n  framed?: boolean;\n  /** Pixel size of each well cell. Defaults to 34 when fixed. */\n  cellSize?: number;\n  /** Resize wells to fill available width when `cellSize` is not fixed. */\n  autoScale?: boolean;\n  minCellSize?: number;\n  /** Defaults to 72 for 96-well style plates and 36 for denser plates. */\n  maxCellSize?: number;\n  /** Stroke color for non-selected wells. Defaults to a light border. */\n  borderColor?: string;\n  /** Stroke color for selected wells. Defaults to the kit primary blue. */\n  selectedBorderColor?: string;\n  /** Fill color for selected wells. Defaults to the kit primary blue. */\n  selectedFillColor?: string;\n  /** Selected fill opacity. */\n  selectedFillOpacity?: number;\n  /** Whether selected wells use the selection fill or keep their assigned well color. */\n  selectionFillMode?: \"selection\" | \"well\";\n  /** Well id that should briefly flash, usually after a double-click assignment. */\n  flashWellId?: WellId;\n  /** Changing this value restarts the flash animation for the same well. */\n  flashWellKey?: number;\n  /**\n   * Well ids that should render with a highlight ring. Used for cross-component\n   * hover sync (e.g. hovering a legend item to highlight matching wells).\n   */\n  highlightedWellIds?: ReadonlySet<WellId>;\n  /** Stroke color for highlighted wells. Defaults to the kit primary blue. */\n  highlightBorderColor?: string;\n  onWellHover?: (wellId: WellId | null) => void;\n  onWellDoubleClick?: (wellId: WellId) => void;\n  /**\n   * Optional render-prop invoked once per well. The returned node is placed\n   * inside an absolutely-positioned cell on top of the SVG, sized to\n   * `cellSize`. The wrapper layer is `pointer-events: none` so the SVG keeps\n   * pointer interaction by default; consumers wiring drop targets are expected\n   * to set `pointer-events: auto` on their own element while a drag is active.\n   */\n  wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;\n  className?: string;\n}\n\ntype DragMode = \"replace\" | \"add\" | \"remove\";\n\ninterface DragState {\n  start: { r: number; c: number };\n  cur: { r: number; c: number };\n  mode: DragMode;\n}\n\nfunction buildColumnLabels(columns: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let c = 0; c < columns; c++) {\n    labels.push(\n      <text\n        key={`c${c}`}\n        x={LABEL_PAD + c * cellSize + cellSize / 2}\n        y={LABEL_PAD / 2}\n        textAnchor=\"middle\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {c + 1}\n      </text>,\n    );\n  }\n  return labels;\n}\n\nfunction buildRowLabels(rows: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let r = 0; r < rows; r++) {\n    labels.push(\n      <text\n        key={`r${r}`}\n        x={LABEL_PAD - LABEL_TEXT_INSET}\n        y={LABEL_PAD + r * cellSize + cellSize / 2 + LABEL_BASELINE_OFFSET}\n        textAnchor=\"end\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {rowLabel(r)}\n      </text>,\n    );\n  }\n  return labels;\n}\n\ninterface BuildWellCellsArgs<T extends WellRecord> {\n  dims: PlateDimensions;\n  cellSize: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  dragPositions: Set<WellId>;\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  emptyWellFillColor: string | null;\n  borderColor: string;\n  selectedBorderColor: string;\n  selectedFillColor: string;\n  selectedFillOpacity: number;\n  selectionFillMode: \"selection\" | \"well\";\n  wellShape: WellShape;\n  highlightedWellIds: ReadonlySet<WellId>;\n  highlightBorderColor: string;\n  flashWellId?: WellId;\n  flashWellKey?: number;\n}\n\nfunction buildWellCell<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const entry = values.get(id);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const wellFill = entry === undefined && emptyWellFillColor !== null ? emptyWellFillColor : colorForWell(entry, id);\n  const usesWellFill = isSelected && selectionFillMode === \"well\" && entry !== undefined;\n  const usesSelectionFill = isSelected && !usesWellFill;\n  const fill = usesSelectionFill ? selectedFillColor : wellFill;\n  const fillOpacity = usesSelectionFill ? selectedFillOpacity : undefined;\n\n  if (wellShape === \"circle\") {\n    const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n    const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n    const r = cellSize / 2 - WELL_INSET;\n    return (\n      <circle\n        key={id}\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        stroke=\"none\"\n        data-well={id}\n        data-selected={isSelected ? \"true\" : undefined}\n      />\n    );\n  }\n\n  return (\n    <rect\n      key={id}\n      x={LABEL_PAD + column * cellSize}\n      y={LABEL_PAD + row * cellSize}\n      width={cellSize}\n      height={cellSize}\n      fill={fill}\n      fillOpacity={fillOpacity}\n      stroke=\"none\"\n      data-well={id}\n      data-selected={isSelected ? \"true\" : undefined}\n    />\n  );\n}\n\nfunction buildWellCells<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const cells: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      cells.push(buildWellCell({ dims, ...args }, r, c));\n    }\n  }\n  return cells;\n}\n\nfunction buildGridLines(dims: PlateDimensions, cellSize: number, borderColor: string): React.ReactNode[] {\n  const lines: React.ReactNode[] = [];\n  const left = LABEL_PAD;\n  const top = LABEL_PAD;\n  const right = LABEL_PAD + dims.columns * cellSize;\n  const bottom = LABEL_PAD + dims.rows * cellSize;\n\n  for (let c = 0; c <= dims.columns; c++) {\n    const x = LABEL_PAD + c * cellSize;\n    lines.push(\n      <line\n        key={`grid-col-${c}`}\n        x1={x}\n        y1={top}\n        x2={x}\n        y2={bottom}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`column-${c}`}\n      />,\n    );\n  }\n\n  for (let r = 0; r <= dims.rows; r++) {\n    const y = LABEL_PAD + r * cellSize;\n    lines.push(\n      <line\n        key={`grid-row-${r}`}\n        x1={left}\n        y1={y}\n        x2={right}\n        y2={y}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`row-${r}`}\n      />,\n    );\n  }\n\n  return lines;\n}\n\nfunction buildWellOverlay<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    selection,\n    dragPositions,\n    selectedBorderColor,\n    flashWellId,\n    flashWellKey,\n    wellShape,\n    highlightedWellIds,\n    highlightBorderColor,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const isFlashing = flashWellId === id;\n  const isHighlighted = !isSelected && highlightedWellIds.has(id);\n\n  if (!isSelected && !isFlashing && !isHighlighted) return null;\n\n  const x = LABEL_PAD + column * cellSize + WELL_INSET;\n  const y = LABEL_PAD + row * cellSize + WELL_INSET;\n  const size = cellSize - WELL_INSET * 2;\n  const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n  const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n  const r = cellSize / 2 - WELL_INSET;\n  const isCircle = wellShape === \"circle\";\n\n  type WellShapeProps = Record<string, string | number | undefined>;\n  const shapeProps: WellShapeProps = isCircle\n    ? { cx, cy, r }\n    : { x, y, width: size, height: size };\n\n  const renderShape = (\n    extraProps: Record<string, string | number | undefined>,\n    children?: React.ReactNode,\n    elementKey?: string | number,\n  ): React.ReactNode => {\n    const props = { ...shapeProps, ...extraProps, pointerEvents: \"none\" as const };\n    return isCircle ? (\n      <circle key={elementKey} {...props}>\n        {children}\n      </circle>\n    ) : (\n      <rect key={elementKey} {...props}>\n        {children}\n      </rect>\n    );\n  };\n\n  const flashAnimations = (\n    <>\n      <animate attributeName=\"fill-opacity\" values=\"0.24;0.1;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate attributeName=\"stroke-opacity\" values=\"0.92;0.42;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate\n        attributeName=\"stroke-width\"\n        values={`${STROKE_FLASH};${STROKE_SELECTED}`}\n        dur={`${FLASH_DURATION_MS}ms`}\n        fill=\"freeze\"\n      />\n    </>\n  );\n\n  return (\n    <g key={`overlay-${id}`}>\n      {isSelected\n        ? renderShape({\n            fill: \"none\",\n            stroke: selectedBorderColor,\n            strokeWidth: STROKE_SELECTED,\n            \"data-well-selection\": id,\n          })\n        : null}\n      {isHighlighted\n        ? renderShape({\n            fill: \"none\",\n            stroke: highlightBorderColor,\n            strokeWidth: STROKE_HIGHLIGHT,\n            \"data-well-highlight\": id,\n          })\n        : null}\n      {isFlashing\n        ? renderShape(\n            {\n              fill: selectedBorderColor,\n              fillOpacity: 0.24,\n              stroke: selectedBorderColor,\n              strokeOpacity: 0.92,\n              strokeWidth: STROKE_FLASH,\n              \"data-well-flash\": id,\n            },\n            flashAnimations,\n            `${id}-${flashWellKey}`,\n          )\n        : null}\n    </g>\n  );\n}\n\nfunction buildWellOverlays<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const overlays: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      const overlay = buildWellOverlay({ dims, ...args }, r, c);\n      if (overlay) overlays.push(overlay);\n    }\n  }\n  return overlays;\n}\n\n/**\n * Interactive plate grid with drag-rectangle selection.\n * - Click & drag: replace selection\n * - Shift + drag: add to selection\n * - Alt + drag: remove from selection\n */\nexport function PlatePaintGrid<T extends WellRecord = WellRecord>({\n  format,\n  rows,\n  columns,\n  values,\n  selection,\n  onSelectionChange,\n  colorForWell,\n  emptyWellFillColor = PLATE_MAP_EMPTY_WELL_FILL,\n  wellShape = \"rect\",\n  framed = false,\n  cellSize,\n  autoScale = true,\n  minCellSize = DEFAULT_MIN_AUTO_CELL,\n  maxCellSize,\n  borderColor = PLATE_MAP_CELL_BORDER,\n  selectedBorderColor = \"var(--color-primary)\",\n  selectedFillColor = \"var(--color-primary)\",\n  selectedFillOpacity = 0.18,\n  selectionFillMode = \"selection\",\n  flashWellId,\n  flashWellKey,\n  highlightedWellIds,\n  highlightBorderColor = \"var(--color-primary)\",\n  onWellHover,\n  onWellDoubleClick,\n  wrapWell,\n  className,\n}: PlatePaintGridProps<T>) {\n  const dims = resolveDimensions(format, rows, columns);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n  const [drag, setDrag] = React.useState<DragState | null>(null);\n  const [containerWidth, setContainerWidth] = React.useState<number>();\n\n  React.useLayoutEffect(() => {\n    const node = containerRef.current;\n    if (!node || !autoScale || cellSize !== undefined) return;\n\n    const update = () => setContainerWidth(node.clientWidth);\n    update();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [autoScale, cellSize]);\n\n  const resolvedCellSize = React.useMemo(() => {\n    if (!autoScale || cellSize !== undefined || !containerWidth) {\n      return cellSize ?? DEFAULT_CELL;\n    }\n    const autoMaxCellSize = maxCellSize ?? (dims.columns > 12 ? DEFAULT_MAX_DENSE_AUTO_CELL : DEFAULT_MAX_AUTO_CELL);\n    const frameAdjust = framed ? (FRAME_PADDING_PX + FRAME_BORDER_PX) * 2 : 0;\n    const fitSize = Math.floor((containerWidth - LABEL_PAD - frameAdjust) / dims.columns);\n    return Math.max(minCellSize, Math.min(autoMaxCellSize, fitSize));\n  }, [autoScale, cellSize, containerWidth, dims.columns, framed, maxCellSize, minCellSize]);\n\n  const cellAt = React.useCallback(\n    (evt: React.MouseEvent): { r: number; c: number } | null => {\n      const svg = svgRef.current;\n      if (!svg) return null;\n      const rect = svg.getBoundingClientRect();\n      const x = evt.clientX - rect.left - LABEL_PAD;\n      const y = evt.clientY - rect.top - LABEL_PAD;\n      const c = Math.floor(x / resolvedCellSize);\n      const r = Math.floor(y / resolvedCellSize);\n      if (r < 0 || r >= dims.rows || c < 0 || c >= dims.columns) return null;\n      return { r, c };\n    },\n    [resolvedCellSize, dims.rows, dims.columns],\n  );\n\n  const handleDown = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    const mode: DragMode = e.shiftKey ? \"add\" : e.altKey ? \"remove\" : \"replace\";\n    setDrag({ start: cell, cur: cell, mode });\n  };\n\n  const handleMove = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (cell && onWellHover) {\n      onWellHover(pos(cell.r, cell.c, dims.columns));\n    }\n    if (!drag || !cell) return;\n    setDrag({ ...drag, cur: cell });\n  };\n\n  const commitDrag = React.useCallback(() => {\n    if (!drag) return;\n    const positions = rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns);\n    let next: Set<WellId>;\n    if (drag.mode === \"replace\") {\n      next = new Set(positions);\n    } else if (drag.mode === \"add\") {\n      next = new Set(selection);\n      positions.forEach((p) => next.add(p));\n    } else {\n      next = new Set(selection);\n      positions.forEach((p) => next.delete(p));\n    }\n    onSelectionChange(next);\n    setDrag(null);\n  }, [drag, dims.columns, onSelectionChange, selection]);\n\n  const handleUp = () => commitDrag();\n  const handleLeave = () => {\n    commitDrag();\n    onWellHover?.(null);\n  };\n  const handleDoubleClick = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    onWellDoubleClick?.(pos(cell.r, cell.c, dims.columns));\n  };\n\n  const dragPositions = React.useMemo(() => {\n    if (!drag) return new Set<WellId>();\n    return new Set(rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns));\n  }, [drag, dims.columns]);\n\n  // Right and bottom edge strokes sit on the plate boundary; give the SVG room so they are not clipped.\n  const edgeStrokePadding = STROKE_DEFAULT;\n  const width = dims.columns * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n  const height = dims.rows * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n\n  const colLabels = buildColumnLabels(dims.columns, resolvedCellSize);\n  const rowLabels = buildRowLabels(dims.rows, resolvedCellSize);\n  const resolvedHighlightedWellIds: ReadonlySet<WellId> = highlightedWellIds ?? new Set();\n  const wellRenderArgs = {\n    dims,\n    cellSize: resolvedCellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    borderColor,\n    selectedBorderColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n    highlightedWellIds: resolvedHighlightedWellIds,\n    highlightBorderColor,\n    flashWellId,\n    flashWellKey,\n  };\n  const wellCells = buildWellCells(wellRenderArgs);\n  const gridLines = wellShape === \"circle\" ? [] : buildGridLines(dims, resolvedCellSize, borderColor);\n  const wellOverlays = buildWellOverlays(wellRenderArgs);\n\n  const overlayCells = React.useMemo<React.ReactNode[]>(() => {\n    if (!wrapWell) return [];\n    const cells: React.ReactNode[] = [];\n    for (let r = 0; r < dims.rows; r++) {\n      for (let c = 0; c < dims.columns; c++) {\n        const id = pos(r, c, dims.columns);\n        cells.push(\n          <div\n            key={id}\n            style={{\n              position: \"absolute\",\n              left: LABEL_PAD + c * resolvedCellSize,\n              top: LABEL_PAD + r * resolvedCellSize,\n              width: resolvedCellSize,\n              height: resolvedCellSize,\n            }}\n            data-well-id={id}\n          >\n            {wrapWell(id, resolvedCellSize)}\n          </div>,\n        );\n      }\n    }\n    return cells;\n  }, [wrapWell, dims.rows, dims.columns, resolvedCellSize]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full select-none\", className)}\n      data-slot=\"plate-paint-grid\"\n    >\n      <div\n        className={cn(\n          \"relative inline-block\",\n          framed && \"rounded-xl border bg-card p-3 shadow-sm\",\n        )}\n        data-slot=\"plate-paint-grid-frame\"\n      >\n        <svg\n          ref={svgRef}\n          width={width}\n          height={height}\n          className=\"block cursor-crosshair\"\n          onMouseDown={handleDown}\n          onMouseMove={handleMove}\n          onMouseUp={handleUp}\n          onMouseLeave={handleLeave}\n          onDoubleClick={handleDoubleClick}\n          role=\"group\"\n          aria-label={`${dims.rows} row by ${dims.columns} column plate map. Drag to select wells.`}\n        >\n          {colLabels}\n          {rowLabels}\n          {wellCells}\n          {gridLines}\n          {wellOverlays}\n        </svg>\n        {wrapWell ? (\n          <div\n            className=\"pointer-events-none absolute\"\n            style={{\n              top: framed ? FRAME_PADDING_PX : 0,\n              left: framed ? FRAME_PADDING_PX : 0,\n              width,\n              height,\n            }}\n            aria-hidden\n            data-slot=\"plate-well-overlay\"\n          >\n            {overlayCells}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { parsePos };\n"],"names":["DEFAULT_CELL","DEFAULT_MIN_AUTO_CELL","DEFAULT_MAX_AUTO_CELL","DEFAULT_MAX_DENSE_AUTO_CELL","LABEL_PAD","FRAME_PADDING_PX","FRAME_BORDER_PX","LABEL_FONT_SIZE","LABEL_TEXT_INSET","LABEL_BASELINE_OFFSET","WELL_INSET","STROKE_DEFAULT","STROKE_SELECTED","STROKE_HIGHLIGHT","STROKE_FLASH","FLASH_DURATION_MS","PLATE_MAP_EMPTY_WELL_FILL","PLATE_MAP_CELL_BORDER","buildColumnLabels","columns","cellSize","labels","c","jsx","buildRowLabels","rows","r","buildWellCell","args","row","column","dims","values","selection","dragPositions","colorForWell","emptyWellFillColor","selectedFillColor","selectedFillOpacity","selectionFillMode","wellShape","id","pos","entry","isSelected","wellFill","usesSelectionFill","fill","fillOpacity","cx","cy","buildWellCells","cells","buildGridLines","borderColor","lines","left","top","right","bottom","x","y","buildWellOverlay","selectedBorderColor","flashWellId","flashWellKey","highlightedWellIds","highlightBorderColor","isFlashing","isHighlighted","size","isCircle","shapeProps","renderShape","extraProps","children","elementKey","props","flashAnimations","jsxs","Fragment","buildWellOverlays","overlays","overlay","PlatePaintGrid","format","onSelectionChange","framed","autoScale","minCellSize","maxCellSize","onWellHover","onWellDoubleClick","wrapWell","className","resolveDimensions","containerRef","React","svgRef","drag","setDrag","containerWidth","setContainerWidth","node","update","observer","resolvedCellSize","autoMaxCellSize","frameAdjust","fitSize","cellAt","evt","svg","rect","handleDown","e","cell","mode","handleMove","commitDrag","positions","rectPositions","next","p","handleUp","handleLeave","handleDoubleClick","edgeStrokePadding","width","height","colLabels","rowLabels","wellRenderArgs","wellCells","gridLines","wellOverlays","overlayCells","cn"],"mappings":"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"}
+{"version":3,"file":"PlatePaintGrid.cjs","sources":["../../../../src/components/composed/PlateMapEditor/PlatePaintGrid.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { parsePos, pos, rectPositions, resolveDimensions, rowLabel } from \"./wellGrid\";\n\nimport type { PlateDimensions, PlateFormat, WellId, WellRecord } from \"./types\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst DEFAULT_CELL = 34;\nconst DEFAULT_MIN_AUTO_CELL = 24;\nconst DEFAULT_MAX_AUTO_CELL = 72;\nconst DEFAULT_MAX_DENSE_AUTO_CELL = 36;\nconst LABEL_PAD = 26;\nconst FRAME_PADDING_PX = 12;\nconst FRAME_BORDER_PX = 1;\nconst LABEL_FONT_SIZE = 16;\nconst LABEL_TEXT_INSET = 9;\nconst LABEL_BASELINE_OFFSET = 5;\nconst WELL_INSET = 1;\nconst STROKE_DEFAULT = 4;\nconst STROKE_SELECTED = 4;\nconst STROKE_HIGHLIGHT = 3;\nconst STROKE_FLASH = 5;\nconst FLASH_DURATION_MS = 650;\nexport const PLATE_MAP_EMPTY_WELL_FILL = \"var(--surface-container)\";\nexport const PLATE_MAP_CELL_BORDER = \"var(--border)\";\n\nexport type WellShape = \"rect\" | \"circle\";\n\nexport interface PlatePaintGridProps<T extends WellRecord = WellRecord> {\n  format: PlateFormat;\n  rows?: number;\n  columns?: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  onSelectionChange: (next: Set<WellId>) => void;\n  /** Returns the fill color for a given well record (or undefined if empty). */\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  /** Fill color for empty wells. Pass `null` to delegate empty wells to `colorForWell`. */\n  emptyWellFillColor?: string | null;\n  /** Geometric shape of each well. `\"circle\"` matches scientific plate visuals. Defaults to `\"rect\"`. */\n  wellShape?: WellShape;\n  /**\n   * When true, wraps the grid in a card-like surface (rounded, bordered,\n   * padded, soft shadow) so it reads as a physical plate. Pairs well with\n   * `wellShape=\"circle\"`.\n   */\n  framed?: boolean;\n  /** Pixel size of each well cell. Defaults to 34 when fixed. */\n  cellSize?: number;\n  /** Resize wells to fill available width when `cellSize` is not fixed. */\n  autoScale?: boolean;\n  minCellSize?: number;\n  /** Defaults to 72 for 96-well style plates and 36 for denser plates. */\n  maxCellSize?: number;\n  /** Stroke color for non-selected wells. Defaults to a light border. */\n  borderColor?: string;\n  /** Stroke color for selected wells. Defaults to the kit primary blue. */\n  selectedBorderColor?: string;\n  /** Fill color for selected wells. Defaults to the kit primary blue. */\n  selectedFillColor?: string;\n  /** Selected fill opacity. */\n  selectedFillOpacity?: number;\n  /** Whether selected wells use the selection fill or keep their assigned well color. */\n  selectionFillMode?: \"selection\" | \"well\";\n  /** Well id that should briefly flash, usually after a double-click assignment. */\n  flashWellId?: WellId;\n  /** Changing this value restarts the flash animation for the same well. */\n  flashWellKey?: number;\n  /**\n   * Well ids that should render with a highlight ring. Used for cross-component\n   * hover sync (e.g. hovering a legend item to highlight matching wells).\n   */\n  highlightedWellIds?: ReadonlySet<WellId>;\n  /** Stroke color for highlighted wells. Defaults to the kit primary blue. */\n  highlightBorderColor?: string;\n  onWellHover?: (wellId: WellId | null) => void;\n  onWellDoubleClick?: (wellId: WellId) => void;\n  /**\n   * Optional render-prop invoked once per well. The returned node is placed\n   * inside an absolutely-positioned cell on top of the SVG, sized to\n   * `cellSize`. The wrapper layer is `pointer-events: none` so the SVG keeps\n   * pointer interaction by default; consumers wiring drop targets are expected\n   * to set `pointer-events: auto` on their own element while a drag is active.\n   */\n  wrapWell?: (wellId: WellId, cellSize: number) => React.ReactNode;\n  className?: string;\n}\n\ntype DragMode = \"replace\" | \"add\" | \"remove\";\n\ninterface DragState {\n  start: { r: number; c: number };\n  cur: { r: number; c: number };\n  mode: DragMode;\n}\n\nfunction buildColumnLabels(columns: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let c = 0; c < columns; c++) {\n    labels.push(\n      <text\n        key={`c${c}`}\n        x={LABEL_PAD + c * cellSize + cellSize / 2}\n        y={LABEL_PAD / 2}\n        textAnchor=\"middle\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {c + 1}\n      </text>,\n    );\n  }\n  return labels;\n}\n\nfunction buildRowLabels(rows: number, cellSize: number): React.ReactNode[] {\n  const labels: React.ReactNode[] = [];\n  for (let r = 0; r < rows; r++) {\n    labels.push(\n      <text\n        key={`r${r}`}\n        x={LABEL_PAD - LABEL_TEXT_INSET}\n        y={LABEL_PAD + r * cellSize + cellSize / 2 + LABEL_BASELINE_OFFSET}\n        textAnchor=\"end\"\n        fontSize={LABEL_FONT_SIZE}\n        className=\"fill-muted-foreground\"\n      >\n        {rowLabel(r)}\n      </text>,\n    );\n  }\n  return labels;\n}\n\ninterface BuildWellCellsArgs<T extends WellRecord> {\n  dims: PlateDimensions;\n  cellSize: number;\n  values: Map<WellId, T>;\n  selection: Set<WellId>;\n  dragPositions: Set<WellId>;\n  colorForWell: (well: T | undefined, wellId: WellId) => string;\n  emptyWellFillColor: string | null;\n  borderColor: string;\n  selectedBorderColor: string;\n  selectedFillColor: string;\n  selectedFillOpacity: number;\n  selectionFillMode: \"selection\" | \"well\";\n  wellShape: WellShape;\n  highlightedWellIds: ReadonlySet<WellId>;\n  highlightBorderColor: string;\n  flashWellId?: WellId;\n  flashWellKey?: number;\n}\n\nfunction buildWellCell<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const entry = values.get(id);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const wellFill = entry === undefined && emptyWellFillColor !== null ? emptyWellFillColor : colorForWell(entry, id);\n  const usesWellFill = isSelected && selectionFillMode === \"well\" && entry !== undefined;\n  const usesSelectionFill = isSelected && !usesWellFill;\n  const fill = usesSelectionFill ? selectedFillColor : wellFill;\n  const fillOpacity = usesSelectionFill ? selectedFillOpacity : undefined;\n\n  if (wellShape === \"circle\") {\n    const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n    const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n    const r = cellSize / 2 - WELL_INSET;\n    return (\n      <circle\n        key={id}\n        cx={cx}\n        cy={cy}\n        r={r}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        stroke=\"none\"\n        data-well={id}\n        data-selected={isSelected ? \"true\" : undefined}\n      />\n    );\n  }\n\n  return (\n    <rect\n      key={id}\n      x={LABEL_PAD + column * cellSize}\n      y={LABEL_PAD + row * cellSize}\n      width={cellSize}\n      height={cellSize}\n      fill={fill}\n      fillOpacity={fillOpacity}\n      stroke=\"none\"\n      data-well={id}\n      data-selected={isSelected ? \"true\" : undefined}\n    />\n  );\n}\n\nfunction buildWellCells<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const cells: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      cells.push(buildWellCell({ dims, ...args }, r, c));\n    }\n  }\n  return cells;\n}\n\nfunction buildGridLines(dims: PlateDimensions, cellSize: number, borderColor: string): React.ReactNode[] {\n  const lines: React.ReactNode[] = [];\n  const left = LABEL_PAD;\n  const top = LABEL_PAD;\n  const right = LABEL_PAD + dims.columns * cellSize;\n  const bottom = LABEL_PAD + dims.rows * cellSize;\n\n  for (let c = 0; c <= dims.columns; c++) {\n    const x = LABEL_PAD + c * cellSize;\n    lines.push(\n      <line\n        key={`grid-col-${c}`}\n        x1={x}\n        y1={top}\n        x2={x}\n        y2={bottom}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`column-${c}`}\n      />,\n    );\n  }\n\n  for (let r = 0; r <= dims.rows; r++) {\n    const y = LABEL_PAD + r * cellSize;\n    lines.push(\n      <line\n        key={`grid-row-${r}`}\n        x1={left}\n        y1={y}\n        x2={right}\n        y2={y}\n        stroke={borderColor}\n        strokeWidth={STROKE_DEFAULT}\n        vectorEffect=\"non-scaling-stroke\"\n        shapeRendering=\"crispEdges\"\n        pointerEvents=\"none\"\n        data-plate-grid-line={`row-${r}`}\n      />,\n    );\n  }\n\n  return lines;\n}\n\nfunction buildWellOverlay<T extends WellRecord>(\n  args: BuildWellCellsArgs<T>,\n  row: number,\n  column: number,\n): React.ReactNode {\n  const {\n    dims,\n    cellSize,\n    selection,\n    dragPositions,\n    selectedBorderColor,\n    flashWellId,\n    flashWellKey,\n    wellShape,\n    highlightedWellIds,\n    highlightBorderColor,\n  } = args;\n  const id = pos(row, column, dims.columns);\n  const isSelected = selection.has(id) || dragPositions.has(id);\n  const isFlashing = flashWellId === id;\n  const isHighlighted = !isSelected && highlightedWellIds.has(id);\n\n  if (!isSelected && !isFlashing && !isHighlighted) return null;\n\n  const x = LABEL_PAD + column * cellSize + WELL_INSET;\n  const y = LABEL_PAD + row * cellSize + WELL_INSET;\n  const size = cellSize - WELL_INSET * 2;\n  const cx = LABEL_PAD + column * cellSize + cellSize / 2;\n  const cy = LABEL_PAD + row * cellSize + cellSize / 2;\n  const r = cellSize / 2 - WELL_INSET;\n  const isCircle = wellShape === \"circle\";\n\n  type WellShapeProps = Record<string, string | number | undefined>;\n  const shapeProps: WellShapeProps = isCircle\n    ? { cx, cy, r }\n    : { x, y, width: size, height: size };\n\n  const renderShape = (\n    extraProps: Record<string, string | number | undefined>,\n    children?: React.ReactNode,\n    elementKey?: string | number,\n  ): React.ReactNode => {\n    const props = { ...shapeProps, ...extraProps, pointerEvents: \"none\" as const };\n    return isCircle ? (\n      <circle key={elementKey} {...props}>\n        {children}\n      </circle>\n    ) : (\n      <rect key={elementKey} {...props}>\n        {children}\n      </rect>\n    );\n  };\n\n  const flashAnimations = (\n    <>\n      <animate attributeName=\"fill-opacity\" values=\"0.24;0.1;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate attributeName=\"stroke-opacity\" values=\"0.92;0.42;0\" dur={`${FLASH_DURATION_MS}ms`} fill=\"freeze\" />\n      <animate\n        attributeName=\"stroke-width\"\n        values={`${STROKE_FLASH};${STROKE_SELECTED}`}\n        dur={`${FLASH_DURATION_MS}ms`}\n        fill=\"freeze\"\n      />\n    </>\n  );\n\n  return (\n    <g key={`overlay-${id}`}>\n      {isSelected\n        ? renderShape({\n            fill: \"none\",\n            stroke: selectedBorderColor,\n            strokeWidth: STROKE_SELECTED,\n            \"data-well-selection\": id,\n          })\n        : null}\n      {isHighlighted\n        ? renderShape({\n            fill: \"none\",\n            stroke: highlightBorderColor,\n            strokeWidth: STROKE_HIGHLIGHT,\n            \"data-well-highlight\": id,\n          })\n        : null}\n      {isFlashing\n        ? renderShape(\n            {\n              fill: selectedBorderColor,\n              fillOpacity: 0.24,\n              stroke: selectedBorderColor,\n              strokeOpacity: 0.92,\n              strokeWidth: STROKE_FLASH,\n              \"data-well-flash\": id,\n            },\n            flashAnimations,\n            `${id}-${flashWellKey}`,\n          )\n        : null}\n    </g>\n  );\n}\n\nfunction buildWellOverlays<T extends WellRecord>({ dims, ...args }: BuildWellCellsArgs<T>): React.ReactNode[] {\n  const overlays: React.ReactNode[] = [];\n  for (let r = 0; r < dims.rows; r++) {\n    for (let c = 0; c < dims.columns; c++) {\n      const overlay = buildWellOverlay({ dims, ...args }, r, c);\n      if (overlay) overlays.push(overlay);\n    }\n  }\n  return overlays;\n}\n\n/**\n * Interactive plate grid with drag-rectangle selection.\n * - Click & drag: replace selection\n * - Shift + drag: add to selection\n * - Alt + drag: remove from selection\n */\nexport function PlatePaintGrid<T extends WellRecord = WellRecord>({\n  format,\n  rows,\n  columns,\n  values,\n  selection,\n  onSelectionChange,\n  colorForWell,\n  emptyWellFillColor = PLATE_MAP_EMPTY_WELL_FILL,\n  wellShape = \"rect\",\n  framed = false,\n  cellSize,\n  autoScale = true,\n  minCellSize = DEFAULT_MIN_AUTO_CELL,\n  maxCellSize,\n  borderColor = PLATE_MAP_CELL_BORDER,\n  selectedBorderColor = \"var(--color-primary)\",\n  selectedFillColor = \"var(--color-primary)\",\n  selectedFillOpacity = 0.18,\n  selectionFillMode = \"selection\",\n  flashWellId,\n  flashWellKey,\n  highlightedWellIds,\n  highlightBorderColor = \"var(--color-primary)\",\n  onWellHover,\n  onWellDoubleClick,\n  wrapWell,\n  className,\n}: PlatePaintGridProps<T>) {\n  const dims = resolveDimensions(format, rows, columns);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n  const [drag, setDrag] = React.useState<DragState | null>(null);\n  const [containerWidth, setContainerWidth] = React.useState<number>();\n\n  React.useLayoutEffect(() => {\n    const node = containerRef.current;\n    if (!node || !autoScale || cellSize !== undefined) return;\n\n    const update = () => setContainerWidth(node.clientWidth);\n    update();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [autoScale, cellSize]);\n\n  const resolvedCellSize = React.useMemo(() => {\n    if (!autoScale || cellSize !== undefined || !containerWidth) {\n      return cellSize ?? DEFAULT_CELL;\n    }\n    const autoMaxCellSize = maxCellSize ?? (dims.columns > 12 ? DEFAULT_MAX_DENSE_AUTO_CELL : DEFAULT_MAX_AUTO_CELL);\n    const frameAdjust = framed ? (FRAME_PADDING_PX + FRAME_BORDER_PX) * 2 : 0;\n    const fitSize = Math.floor((containerWidth - LABEL_PAD - frameAdjust) / dims.columns);\n    return Math.max(minCellSize, Math.min(autoMaxCellSize, fitSize));\n  }, [autoScale, cellSize, containerWidth, dims.columns, framed, maxCellSize, minCellSize]);\n\n  const cellAt = React.useCallback(\n    (evt: React.MouseEvent): { r: number; c: number } | null => {\n      const svg = svgRef.current;\n      if (!svg) return null;\n      const rect = svg.getBoundingClientRect();\n      const x = evt.clientX - rect.left - LABEL_PAD;\n      const y = evt.clientY - rect.top - LABEL_PAD;\n      const c = Math.floor(x / resolvedCellSize);\n      const r = Math.floor(y / resolvedCellSize);\n      if (r < 0 || r >= dims.rows || c < 0 || c >= dims.columns) return null;\n      return { r, c };\n    },\n    [resolvedCellSize, dims.rows, dims.columns],\n  );\n\n  const handleDown = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    const mode: DragMode = e.shiftKey ? \"add\" : e.altKey ? \"remove\" : \"replace\";\n    setDrag({ start: cell, cur: cell, mode });\n  };\n\n  const handleMove = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (cell && onWellHover) {\n      onWellHover(pos(cell.r, cell.c, dims.columns));\n    }\n    if (!drag || !cell) return;\n    setDrag({ ...drag, cur: cell });\n  };\n\n  const commitDrag = React.useCallback(() => {\n    if (!drag) return;\n    const positions = rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns);\n    let next: Set<WellId>;\n    if (drag.mode === \"replace\") {\n      next = new Set(positions);\n    } else if (drag.mode === \"add\") {\n      next = new Set(selection);\n      positions.forEach((p) => next.add(p));\n    } else {\n      next = new Set(selection);\n      positions.forEach((p) => next.delete(p));\n    }\n    onSelectionChange(next);\n    setDrag(null);\n  }, [drag, dims.columns, onSelectionChange, selection]);\n\n  const handleUp = () => commitDrag();\n  const handleLeave = () => {\n    commitDrag();\n    onWellHover?.(null);\n  };\n  const handleDoubleClick = (e: React.MouseEvent) => {\n    const cell = cellAt(e);\n    if (!cell) return;\n    onWellDoubleClick?.(pos(cell.r, cell.c, dims.columns));\n  };\n\n  const dragPositions = React.useMemo(() => {\n    if (!drag) return new Set<WellId>();\n    return new Set(rectPositions(drag.start.r, drag.start.c, drag.cur.r, drag.cur.c, dims.columns));\n  }, [drag, dims.columns]);\n\n  // Right and bottom edge strokes sit on the plate boundary; give the SVG room so they are not clipped.\n  const edgeStrokePadding = STROKE_DEFAULT;\n  const width = dims.columns * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n  const height = dims.rows * resolvedCellSize + LABEL_PAD + edgeStrokePadding;\n\n  const colLabels = buildColumnLabels(dims.columns, resolvedCellSize);\n  const rowLabels = buildRowLabels(dims.rows, resolvedCellSize);\n  const resolvedHighlightedWellIds: ReadonlySet<WellId> = highlightedWellIds ?? new Set();\n  const wellRenderArgs = {\n    dims,\n    cellSize: resolvedCellSize,\n    values,\n    selection,\n    dragPositions,\n    colorForWell,\n    emptyWellFillColor,\n    borderColor,\n    selectedBorderColor,\n    selectedFillColor,\n    selectedFillOpacity,\n    selectionFillMode,\n    wellShape,\n    highlightedWellIds: resolvedHighlightedWellIds,\n    highlightBorderColor,\n    flashWellId,\n    flashWellKey,\n  };\n  const wellCells = buildWellCells(wellRenderArgs);\n  const gridLines = wellShape === \"circle\" ? [] : buildGridLines(dims, resolvedCellSize, borderColor);\n  const wellOverlays = buildWellOverlays(wellRenderArgs);\n\n  const overlayCells = React.useMemo<React.ReactNode[]>(() => {\n    if (!wrapWell) return [];\n    const cells: React.ReactNode[] = [];\n    for (let r = 0; r < dims.rows; r++) {\n      for (let c = 0; c < dims.columns; c++) {\n        const id = pos(r, c, dims.columns);\n        cells.push(\n          <div\n            key={id}\n            style={{\n              position: \"absolute\",\n              left: LABEL_PAD + c * resolvedCellSize,\n              top: LABEL_PAD + r * resolvedCellSize,\n              width: resolvedCellSize,\n              height: resolvedCellSize,\n            }}\n            data-well-id={id}\n          >\n            {wrapWell(id, resolvedCellSize)}\n          </div>,\n        );\n      }\n    }\n    return cells;\n  }, [wrapWell, dims.rows, dims.columns, resolvedCellSize]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full select-none\", className)}\n      data-slot=\"plate-paint-grid\"\n    >\n      <div\n        className={cn(\n          \"relative inline-block\",\n          framed && \"rounded-xl border bg-card p-3 shadow-elevation-3\",\n        )}\n        data-slot=\"plate-paint-grid-frame\"\n      >\n        <svg\n          ref={svgRef}\n          width={width}\n          height={height}\n          className=\"block cursor-crosshair\"\n          onMouseDown={handleDown}\n          onMouseMove={handleMove}\n          onMouseUp={handleUp}\n          onMouseLeave={handleLeave}\n          onDoubleClick={handleDoubleClick}\n          role=\"group\"\n          aria-label={`${dims.rows} row by ${dims.columns} column plate map. Drag to select wells.`}\n        >\n          {colLabels}\n          {rowLabels}\n          {wellCells}\n          {gridLines}\n          {wellOverlays}\n        </svg>\n        {wrapWell ? (\n          <div\n            className=\"pointer-events-none absolute\"\n            style={{\n              top: framed ? FRAME_PADDING_PX : 0,\n              left: framed ? FRAME_PADDING_PX : 0,\n              width,\n              height,\n            }}\n            aria-hidden\n            data-slot=\"plate-well-overlay\"\n          >\n            {overlayCells}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { parsePos };\n"],"names":["DEFAULT_CELL","DEFAULT_MIN_AUTO_CELL","DEFAULT_MAX_AUTO_CELL","DEFAULT_MAX_DENSE_AUTO_CELL","LABEL_PAD","FRAME_PADDING_PX","FRAME_BORDER_PX","LABEL_FONT_SIZE","LABEL_TEXT_INSET","LABEL_BASELINE_OFFSET","WELL_INSET","STROKE_DEFAULT","STROKE_SELECTED","STROKE_HIGHLIGHT","STROKE_FLASH","FLASH_DURATION_MS","PLATE_MAP_EMPTY_WELL_FILL","PLATE_MAP_CELL_BORDER","buildColumnLabels","columns","cellSize","labels","c","jsx","buildRowLabels","rows","r","buildWellCell","args","row","column","dims","values","selection","dragPositions","colorForWell","emptyWellFillColor","selectedFillColor","selectedFillOpacity","selectionFillMode","wellShape","id","pos","entry","isSelected","wellFill","usesSelectionFill","fill","fillOpacity","cx","cy","buildWellCells","cells","buildGridLines","borderColor","lines","left","top","right","bottom","x","y","buildWellOverlay","selectedBorderColor","flashWellId","flashWellKey","highlightedWellIds","highlightBorderColor","isFlashing","isHighlighted","size","isCircle","shapeProps","renderShape","extraProps","children","elementKey","props","flashAnimations","jsxs","Fragment","buildWellOverlays","overlays","overlay","PlatePaintGrid","format","onSelectionChange","framed","autoScale","minCellSize","maxCellSize","onWellHover","onWellDoubleClick","wrapWell","className","resolveDimensions","containerRef","React","svgRef","drag","setDrag","containerWidth","setContainerWidth","node","update","observer","resolvedCellSize","autoMaxCellSize","frameAdjust","fitSize","cellAt","evt","svg","rect","handleDown","e","cell","mode","handleMove","commitDrag","positions","rectPositions","next","p","handleUp","handleLeave","handleDoubleClick","edgeStrokePadding","width","height","colLabels","rowLabels","wellRenderArgs","wellCells","gridLines","wellOverlays","overlayCells","cn"],"mappings":"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"}

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/PlatePaintGrid.js

@@ -332,7 +332,7 @@ function Xe({
         {
           className: oe(
             "relative inline-block",
-            f && "rounded-xl border bg-card p-3 shadow-sm"
+            f && "rounded-xl border bg-card p-3 shadow-elevation-3"
           ),
           "data-slot": "plate-paint-grid-frame",
           children: [