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

package/dist/components/composed/DataAppShell/SecondaryNav.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),B=require("class-variance-authority"),R=require("lucide-react"),_=require("react"),v=require("./CollapseButton.cjs"),F=require("./ShellContext.cjs"),A=require("../../ui/badge.cjs"),c=require("../../ui/select.cjs"),m=require("../../ui/tooltip.cjs"),s=require("../../../lib/utils.cjs");function E(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(l,r,i.get?i:{enumerable:!0,get:()=>n[r]})}}return l.default=n,Object.freeze(l)}const C=E(_),k=B.cva("shrink-0",{variants:{orientation:{vertical:"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden",horizontal:"flex flex-row items-center min-w-0"}},defaultVariants:{orientation:"vertical"}}),g=B.cva("cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed",{variants:{orientation:{vertical:"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0",rail:"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0",horizontal:"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset"},status:{done:"",active:"",todo:""}},compoundVariants:[{orientation:"vertical",status:"active",class:"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm"},{orientation:"vertical",status:"done",class:"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50"},{orientation:"vertical",status:"todo",class:"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50"},{orientation:"rail",status:"active",class:"border-l-primary"},{orientation:"rail",status:"done",class:"border-l-border"},{orientation:"rail",status:"todo",class:"border-l-border"},{orientation:"horizontal",status:"active",class:"bg-primary/10 text-primary font-medium"},{orientation:"horizontal",status:"done",class:"text-foreground hover:bg-accent"},{orientation:"horizontal",status:"todo",class:"text-muted-foreground hover:bg-accent hover:text-foreground"}],defaultVariants:{orientation:"vertical",status:"todo"}});function G(n){return n.flatMap(l=>[l,...l.steps??[]])}function H(n,l,r){return n.status?n.status:r<0?"todo":l===r?"active":l<r?"done":"todo"}function N({step:n,status:l,className:r}){const i=n.icon;return l==="done"?a.jsx(R.Check,{className:s.cn("w-4 h-4 text-positive",r)}):i?a.jsx(i,{className:s.cn("w-4 h-4",l==="active"?"text-primary":"text-muted-foreground",r)}):a.jsx("div",{className:s.cn("w-2.5 h-2.5 rounded-full",l==="active"?"bg-primary":"bg-muted-foreground/40",r)})}function J({orientation:n,steps:l,activeKey:r,onSelect:i,title:z,collapsible:u=!1,collapsed:j,defaultCollapsed:T=!1,onCollapsedChange:I,className:b,...h}){const y=n??"vertical",p=F.useOptionalDataAppShell(),q=j===void 0&&p!=null&&p.hideNavOnCollapse,[D,M]=C.useState(T),O=j??(q?p.collapsed:D),f=e=>{j===void 0&&(q?p.setCollapsed(e):M(e)),I?.(e)},d=G(l),S=new Map(d.map((e,t)=>[e.id,t])),P=r==null?-1:S.get(r)??-1,w=e=>H(e,S.get(e.id)??-1,P),x=e=>{e.disabled||i?.(e.id,e)};if(y==="vertical"&&O)return a.jsx("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"true",className:s.cn("flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border",b),...h,children:a.jsxs(m.TooltipProvider,{children:[a.jsx("div",{className:"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border",children:a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"right",label:"Expand",onClick:()=>f(!1)})}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:d.map(e=>{const t=w(e);return a.jsxs(m.Tooltip,{children:[a.jsx(m.TooltipTrigger,{asChild:!0,children:a.jsx("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":t,"aria-label":e.label,"aria-current":t==="active"?"step":void 0,"aria-disabled":e.disabled||void 0,className:s.cn(g({orientation:"rail",status:t}),e.disabled&&"opacity-45 cursor-not-allowed"),onClick:()=>x(e),children:a.jsx(N,{step:e,status:t})})}),a.jsx(m.TooltipContent,{side:"right",children:e.disabled?e.disabledReason??e.label:e.label})]},e.id)})})]})});if(y==="horizontal"&&u&&O){const e=r==null?void 0:d.find(t=>t.id===r);return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"true",className:s.cn("flex items-center gap-1.5 min-w-0",b),...h,children:[a.jsxs(c.Select,{value:r,onValueChange:t=>{const o=d.find($=>$.id===t);o&&x(o)},children:[a.jsx(c.SelectTrigger,{"data-slot":"data-app-shell-secondary-nav-step-select",size:"sm","aria-label":"Current step",className:"h-7 min-w-0",children:a.jsx(c.SelectValue,{placeholder:"Select step",children:e?`Step ${(S.get(e.id)??0)+1} · ${e.label}`:"Select step"})}),a.jsx(c.SelectContent,{children:d.map((t,o)=>a.jsx(c.SelectItem,{value:t.id,disabled:t.disabled,children:`Step ${o+1} · ${t.label}`},t.id))})]}),a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"down",label:"Show steps",tooltipSide:"bottom",onClick:()=>f(!1)})]})}if(y==="horizontal")return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"false",className:s.cn(k({orientation:"horizontal"}),b),...h,children:[a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1",children:d.map((e,t)=>{const o=w(e);return a.jsxs(C.Fragment,{children:[t>0&&a.jsx(R.ChevronRight,{"aria-hidden":"true",className:"w-4 h-4 shrink-0 text-muted-foreground/50"}),a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"horizontal",status:o})),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx(N,{step:e,status:o,className:"shrink-0"}),a.jsx("span",{children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"h-4 px-1.5 text-[10px]",children:e.badge})]})]},e.id)})}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"up",label:"Collapse steps",tooltipSide:"bottom",className:"ml-2",onClick:()=>f(!0)})]});const V=(e,t)=>{const o=w(e);return a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"vertical",status:o}),t&&"pl-8"),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx("span",{className:"flex items-center justify-center w-6 h-6 shrink-0",children:a.jsx(N,{step:e,status:o})}),a.jsx("span",{className:s.cn("text-sm truncate min-w-0",o==="todo"&&"font-light"),children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"ml-auto h-4 px-1.5 text-[10px]",children:e.badge})]},e.id)};return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"false",className:s.cn(k({orientation:"vertical"}),"w-[180px]",b),...h,children:[(z!=null||u)&&a.jsxs("div",{"data-slot":"data-app-shell-secondary-nav-header",className:"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border",children:[a.jsx("span",{className:"flex-1 truncate",children:z}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"left",label:"Collapse",onClick:()=>f(!0)})]}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:l.map(e=>a.jsxs(C.Fragment,{children:[V(e,!1),e.steps?.map(t=>V(t,!0))]},e.id))})]})}exports.DataAppShellSecondaryNav=J;exports.dataAppShellSecondaryNavItemVariants=g;exports.dataAppShellSecondaryNavVariants=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),B=require("class-variance-authority"),R=require("lucide-react"),$=require("react"),v=require("./CollapseButton.cjs"),F=require("./ShellContext.cjs"),A=require("../../../ui/badge.cjs"),c=require("../../../ui/select.cjs"),m=require("../../../ui/tooltip.cjs"),s=require("../../../lib/utils.cjs");function E(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(l,r,i.get?i:{enumerable:!0,get:()=>n[r]})}}return l.default=n,Object.freeze(l)}const C=E($),k=B.cva("shrink-0",{variants:{orientation:{vertical:"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden",horizontal:"flex flex-row items-center min-w-0"}},defaultVariants:{orientation:"vertical"}}),g=B.cva("cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed",{variants:{orientation:{vertical:"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0",rail:"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0",horizontal:"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset"},status:{done:"",active:"",todo:""}},compoundVariants:[{orientation:"vertical",status:"active",class:"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm"},{orientation:"vertical",status:"done",class:"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50"},{orientation:"vertical",status:"todo",class:"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50"},{orientation:"rail",status:"active",class:"border-l-primary"},{orientation:"rail",status:"done",class:"border-l-border"},{orientation:"rail",status:"todo",class:"border-l-border"},{orientation:"horizontal",status:"active",class:"bg-primary/10 text-primary font-medium"},{orientation:"horizontal",status:"done",class:"text-foreground hover:bg-accent"},{orientation:"horizontal",status:"todo",class:"text-muted-foreground hover:bg-accent hover:text-foreground"}],defaultVariants:{orientation:"vertical",status:"todo"}});function G(n){return n.flatMap(l=>[l,...l.steps??[]])}function H(n,l,r){return n.status?n.status:r<0?"todo":l===r?"active":l<r?"done":"todo"}function N({step:n,status:l,className:r}){const i=n.icon;return l==="done"?a.jsx(R.Check,{className:s.cn("w-4 h-4 text-positive",r)}):i?a.jsx(i,{className:s.cn("w-4 h-4",l==="active"?"text-primary":"text-muted-foreground",r)}):a.jsx("div",{className:s.cn("w-2.5 h-2.5 rounded-full",l==="active"?"bg-primary":"bg-muted-foreground/40",r)})}function J({orientation:n,steps:l,activeKey:r,onSelect:i,title:z,collapsible:u=!1,collapsed:j,defaultCollapsed:T=!1,onCollapsedChange:I,className:b,...h}){const y=n??"vertical",p=F.useOptionalDataAppShell(),q=j===void 0&&p!=null&&p.hideNavOnCollapse,[_,D]=C.useState(T),O=j??(q?p.collapsed:_),f=e=>{j===void 0&&(q?p.setCollapsed(e):D(e)),I?.(e)},d=G(l),S=new Map(d.map((e,t)=>[e.id,t])),M=r==null?-1:S.get(r)??-1,w=e=>H(e,S.get(e.id)??-1,M),x=e=>{e.disabled||i?.(e.id,e)};if(y==="vertical"&&O)return a.jsx("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"true",className:s.cn("flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border",b),...h,children:a.jsxs(m.TooltipProvider,{children:[a.jsx("div",{className:"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border",children:a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"right",label:"Expand",onClick:()=>f(!1)})}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:d.map(e=>{const t=w(e);return a.jsxs(m.Tooltip,{children:[a.jsx(m.TooltipTrigger,{asChild:!0,children:a.jsx("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":t,"aria-label":e.label,"aria-current":t==="active"?"step":void 0,"aria-disabled":e.disabled||void 0,className:s.cn(g({orientation:"rail",status:t}),e.disabled&&"opacity-45 cursor-not-allowed"),onClick:()=>x(e),children:a.jsx(N,{step:e,status:t})})}),a.jsx(m.TooltipContent,{side:"right",children:e.disabled?e.disabledReason??e.label:e.label})]},e.id)})})]})});if(y==="horizontal"&&u&&O){const e=r==null?void 0:d.find(t=>t.id===r);return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"true",className:s.cn("flex items-center gap-1.5 min-w-0",b),...h,children:[a.jsxs(c.Select,{value:r,onValueChange:t=>{const o=d.find(P=>P.id===t);o&&x(o)},children:[a.jsx(c.SelectTrigger,{"data-slot":"data-app-shell-secondary-nav-step-select",size:"sm","aria-label":"Current step",className:"h-7 min-w-0",children:a.jsx(c.SelectValue,{placeholder:"Select step",children:e?`Step ${(S.get(e.id)??0)+1} · ${e.label}`:"Select step"})}),a.jsx(c.SelectContent,{children:d.map((t,o)=>a.jsx(c.SelectItem,{value:t.id,disabled:t.disabled,children:`Step ${o+1} · ${t.label}`},t.id))})]}),a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"down",label:"Show steps",tooltipSide:"bottom",onClick:()=>f(!1)})]})}if(y==="horizontal")return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"false",className:s.cn(k({orientation:"horizontal"}),b),...h,children:[a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1",children:d.map((e,t)=>{const o=w(e);return a.jsxs(C.Fragment,{children:[t>0&&a.jsx(R.ChevronRight,{"aria-hidden":"true",className:"w-4 h-4 shrink-0 text-muted-foreground/50"}),a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"horizontal",status:o})),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx(N,{step:e,status:o,className:"shrink-0"}),a.jsx("span",{children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"h-4 px-1.5 text-[10px]",children:e.badge})]})]},e.id)})}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"up",label:"Collapse steps",tooltipSide:"bottom",className:"ml-2",onClick:()=>f(!0)})]});const V=(e,t)=>{const o=w(e);return a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"vertical",status:o}),t&&"pl-8"),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx("span",{className:"flex items-center justify-center w-6 h-6 shrink-0",children:a.jsx(N,{step:e,status:o})}),a.jsx("span",{className:s.cn("text-sm truncate min-w-0",o==="todo"&&"font-light"),children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"ml-auto h-4 px-1.5 text-[10px]",children:e.badge})]},e.id)};return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"false",className:s.cn(k({orientation:"vertical"}),"w-[180px]",b),...h,children:[(z!=null||u)&&a.jsxs("div",{"data-slot":"data-app-shell-secondary-nav-header",className:"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border",children:[a.jsx("span",{className:"flex-1 truncate",children:z}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"left",label:"Collapse",onClick:()=>f(!0)})]}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:l.map(e=>a.jsxs(C.Fragment,{children:[V(e,!1),e.steps?.map(t=>V(t,!0))]},e.id))})]})}exports.DataAppShellSecondaryNav=J;exports.dataAppShellSecondaryNavItemVariants=g;exports.dataAppShellSecondaryNavVariants=k;
 //# sourceMappingURL=SecondaryNav.cjs.map

package/dist/components/composed/DataAppShell/SecondaryNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryNav.cjs","sources":["../../../../src/components/composed/DataAppShell/SecondaryNav.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, ChevronRight, type LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { ShellCollapseButton } from \"./CollapseButton\";\nimport { useOptionalDataAppShell } from \"./ShellContext\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type NavStepStatus = \"done\" | \"active\" | \"todo\";\n\nexport interface NavStep {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Lucide icon or custom React SVG component */\n  icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;\n  /** Optional count/status badge */\n  badge?: React.ReactNode;\n  /** Explicit status — overrides the linear derivation from `activeKey` */\n  status?: NavStepStatus;\n  /** Disables the step */\n  disabled?: boolean;\n  /** Tooltip/title text explaining why the step is disabled */\n  disabledReason?: string;\n  /** One level of nesting — child steps rendered indented under this step */\n  steps?: NavStep[];\n}\n\nexport type DataAppShellSecondaryNavOrientation = \"vertical\" | \"horizontal\";\n\n// =============================================================================\n// CVA variants\n// =============================================================================\n\nconst dataAppShellSecondaryNavVariants = cva(\"shrink-0\", {\n  variants: {\n    orientation: {\n      /** Collapsible left panel; collapses to an icon-only rail */\n      vertical: \"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden\",\n      /** Wizard/stepper row rendered above the main content */\n      horizontal: \"flex flex-row items-center min-w-0\",\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst dataAppShellSecondaryNavItemVariants = cva(\n  \"cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed\",\n  {\n    variants: {\n      orientation: {\n        vertical:\n          \"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        /** Icon-only row in the collapsed rail */\n        rail: \"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        // ring-inset — the steps row is an overflow-x-auto scroll container,\n        // which would clip an outset ring at the row's edges\n        horizontal:\n          \"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset\",\n      },\n      status: {\n        done: \"\",\n        active: \"\",\n        todo: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: \"vertical\",\n        status: \"active\",\n        class: \"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"done\",\n        class: \"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"todo\",\n        class: \"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50\",\n      },\n      { orientation: \"rail\", status: \"active\", class: \"border-l-primary\" },\n      { orientation: \"rail\", status: \"done\", class: \"border-l-border\" },\n      { orientation: \"rail\", status: \"todo\", class: \"border-l-border\" },\n      {\n        orientation: \"horizontal\",\n        status: \"active\",\n        class: \"bg-primary/10 text-primary font-medium\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"done\",\n        class: \"text-foreground hover:bg-accent\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"todo\",\n        class: \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n      },\n    ],\n    defaultVariants: { orientation: \"vertical\", status: \"todo\" },\n  }\n);\n\n// =============================================================================\n// Props\n// =============================================================================\n\nexport interface DataAppShellSecondaryNavProps\n  extends Omit<React.ComponentProps<\"nav\">, \"onSelect\" | \"title\">,\n    VariantProps<typeof dataAppShellSecondaryNavVariants> {\n  /** Step entries; one level of nesting via `steps` on a step */\n  steps: NavStep[];\n  /** Controlled active step id — steps before it derive `done`, after it `todo` */\n  activeKey?: string;\n  /** Called with the selected step id after the step resolves as enabled */\n  onSelect?: (key: string, step: NavStep) => void;\n  /** Panel title shown in the vertical header (e.g. \"Steps\") */\n  title?: React.ReactNode;\n  /** Renders the collapse toggle. Vertical collapses to an icon rail;\n   *  horizontal collapses to a compact step dropdown. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. When omitted inside a `DataAppShell`, the\n   *  shell's single collapse state drives it (one toggle for all zones). */\n  collapsed?: boolean;\n  /** Uncontrolled initial collapsed state */\n  defaultCollapsed?: boolean;\n  /** Called when the collapse toggle flips the state */\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n// =============================================================================\n// Status derivation\n// =============================================================================\n\n/** Depth-first flatten — parents immediately followed by their children. */\nfunction flattenSteps(steps: NavStep[]): NavStep[] {\n  return steps.flatMap((step) => [step, ...(step.steps ?? [])]);\n}\n\n/**\n * Explicit `status` wins; otherwise derived linearly from `activeKey`:\n * before the active step → `done`, after it (or no active step) → `todo`.\n */\nfunction resolveStatus(step: NavStep, index: number, activeIndex: number): NavStepStatus {\n  if (step.status) return step.status;\n  if (activeIndex < 0) return \"todo\";\n  if (index === activeIndex) return \"active\";\n  return index < activeIndex ? \"done\" : \"todo\";\n}\n\n// =============================================================================\n// Step icon — status-aware (done → check)\n// =============================================================================\n\nfunction StepIcon({\n  step,\n  status,\n  className,\n}: {\n  step: NavStep;\n  status: NavStepStatus;\n  className?: string;\n}) {\n  const Icon = step.icon;\n  if (status === \"done\") {\n    return <Check className={cn(\"w-4 h-4 text-positive\", className)} />;\n  }\n  if (Icon) {\n    return (\n      <Icon\n        className={cn(\n          \"w-4 h-4\",\n          status === \"active\" ? \"text-primary\" : \"text-muted-foreground\",\n          className\n        )}\n      />\n    );\n  }\n  return (\n    <div\n      className={cn(\n        \"w-2.5 h-2.5 rounded-full\",\n        status === \"active\" ? \"bg-primary\" : \"bg-muted-foreground/40\",\n        className\n      )}\n    />\n  );\n}\n\n// =============================================================================\n// DataAppShellSecondaryNav\n// =============================================================================\n\n/**\n * The Data App Shell's secondary (per-page/step) nav — one `steps` model\n * rendered on either axis via `orientation`:\n *\n * - **vertical** — collapsible left panel; collapses to an icon-only rail\n *   with tooltips and a ▸ expand toggle\n * - **horizontal** — wizard/stepper row above the main content\n *\n * Step status (`done` / `active` / `todo`) is derived linearly from\n * `activeKey`, or set explicitly per step. Supports one level of nesting.\n */\nfunction DataAppShellSecondaryNav({\n  orientation,\n  steps,\n  activeKey,\n  onSelect,\n  title,\n  collapsible = false,\n  collapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  className,\n  ...props\n}: DataAppShellSecondaryNavProps) {\n  const resolvedOrientation: DataAppShellSecondaryNavOrientation = orientation ?? \"vertical\";\n\n  // Inside a DataAppShell with `hideNavOnCollapse`, the shell's single collapse\n  // toggle drives this zone too (nav rail + secondary collapse together into\n  // one icon rail). Otherwise the zone owns its collapse — unless explicitly\n  // controlled via the `collapsed` prop, which always wins.\n  const shell = useOptionalDataAppShell();\n  const followShell = collapsed === undefined && shell != null && shell.hideNavOnCollapse;\n  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);\n  const isCollapsed = collapsed ?? (followShell ? shell.collapsed : internalCollapsed);\n  const setCollapsed = (next: boolean) => {\n    if (collapsed === undefined) {\n      if (followShell) shell.setCollapsed(next);\n      else setInternalCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  };\n\n  const flat = flattenSteps(steps);\n  const indexById = new Map(flat.map((step, index) => [step.id, index] as const));\n  const activeIndex = activeKey == null ? -1 : (indexById.get(activeKey) ?? -1);\n  const statusOf = (step: NavStep) =>\n    resolveStatus(step, indexById.get(step.id) ?? -1, activeIndex);\n\n  const handleSelect = (step: NavStep) => {\n    if (step.disabled) return;\n    onSelect?.(step.id, step);\n  };\n\n  // ── Collapsed icon rail (vertical) ───────────────────────────────────────\n  if (resolvedOrientation === \"vertical\" && isCollapsed) {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"vertical\"\n        data-collapsed=\"true\"\n        className={cn(\n          \"flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border\",\n          className\n        )}\n        {...props}\n      >\n        <TooltipProvider>\n          <div className=\"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border\">\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"right\"\n              label=\"Expand\"\n              onClick={() => setCollapsed(false)}\n            />\n          </div>\n          <div\n            data-slot=\"data-app-shell-secondary-nav-items\"\n            className=\"flex flex-col overflow-y-auto\"\n          >\n            {flat.map((step) => {\n              const status = statusOf(step);\n              return (\n                <Tooltip key={step.id}>\n                  <TooltipTrigger asChild>\n                    {/* aria-disabled (not disabled) — a disabled button gets no\n                        pointer/focus events, which would make the tooltip carrying\n                        the label/disabledReason unreachable in the icon-only rail */}\n                    <button\n                      type=\"button\"\n                      data-slot=\"data-app-shell-secondary-nav-item\"\n                      data-status={status}\n                      aria-label={step.label}\n                      aria-current={status === \"active\" ? \"step\" : undefined}\n                      aria-disabled={step.disabled || undefined}\n                      className={cn(\n                        dataAppShellSecondaryNavItemVariants({ orientation: \"rail\", status }),\n                        step.disabled && \"opacity-45 cursor-not-allowed\"\n                      )}\n                      onClick={() => handleSelect(step)}\n                    >\n                      <StepIcon step={step} status={status} />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    {step.disabled ? (step.disabledReason ?? step.label) : step.label}\n                  </TooltipContent>\n                </Tooltip>\n              );\n            })}\n          </div>\n        </TooltipProvider>\n      </nav>\n    );\n  }\n\n  // ── Collapsed horizontal — compact step dropdown (place in the top bar) ───\n  if (resolvedOrientation === \"horizontal\" && collapsible && isCollapsed) {\n    const active = activeKey == null ? undefined : flat.find((s) => s.id === activeKey);\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"true\"\n        className={cn(\"flex items-center gap-1.5 min-w-0\", className)}\n        {...props}\n      >\n        <Select\n          value={activeKey}\n          onValueChange={(id) => {\n            const step = flat.find((s) => s.id === id);\n            if (step) handleSelect(step);\n          }}\n        >\n          <SelectTrigger\n            data-slot=\"data-app-shell-secondary-nav-step-select\"\n            size=\"sm\"\n            aria-label=\"Current step\"\n            className=\"h-7 min-w-0\"\n          >\n            <SelectValue placeholder=\"Select step\">\n              {active\n                ? `Step ${(indexById.get(active.id) ?? 0) + 1} · ${active.label}`\n                : \"Select step\"}\n            </SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {flat.map((step, index) => (\n              <SelectItem key={step.id} value={step.id} disabled={step.disabled}>\n                {`Step ${index + 1} · ${step.label}`}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <ShellCollapseButton\n          data-slot=\"data-app-shell-secondary-nav-toggle\"\n          direction=\"down\"\n          label=\"Show steps\"\n          tooltipSide=\"bottom\"\n          onClick={() => setCollapsed(false)}\n        />\n      </nav>\n    );\n  }\n\n  // ── Horizontal stepper ───────────────────────────────────────────────────\n  if (resolvedOrientation === \"horizontal\") {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"false\"\n        className={cn(dataAppShellSecondaryNavVariants({ orientation: \"horizontal\" }), className)}\n        {...props}\n      >\n        <div\n          data-slot=\"data-app-shell-secondary-nav-items\"\n          className=\"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1\"\n        >\n          {flat.map((step, index) => {\n            const status = statusOf(step);\n            return (\n              <React.Fragment key={step.id}>\n                {index > 0 && (\n                  <ChevronRight aria-hidden=\"true\" className=\"w-4 h-4 shrink-0 text-muted-foreground/50\" />\n                )}\n                <button\n                  type=\"button\"\n                  data-slot=\"data-app-shell-secondary-nav-item\"\n                  data-status={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n                  className={cn(\n                    dataAppShellSecondaryNavItemVariants({ orientation: \"horizontal\", status })\n                  )}\n                  onClick={() => handleSelect(step)}\n                  disabled={step.disabled}\n                >\n                  <StepIcon step={step} status={status} className=\"shrink-0\" />\n                  <span>{step.label}</span>\n                  {step.badge != null && (\n                    <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-[10px]\">\n                      {step.badge}\n                    </Badge>\n                  )}\n                </button>\n              </React.Fragment>\n            );\n          })}\n        </div>\n        {collapsible && (\n          <ShellCollapseButton\n            data-slot=\"data-app-shell-secondary-nav-toggle\"\n            direction=\"up\"\n            label=\"Collapse steps\"\n            tooltipSide=\"bottom\"\n            className=\"ml-2\"\n            onClick={() => setCollapsed(true)}\n          />\n        )}\n      </nav>\n    );\n  }\n\n  // ── Vertical expanded panel ──────────────────────────────────────────────\n  const renderStep = (step: NavStep, nested: boolean) => {\n    const status = statusOf(step);\n    return (\n      <button\n        type=\"button\"\n        key={step.id}\n        data-slot=\"data-app-shell-secondary-nav-item\"\n        data-status={status}\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n        className={cn(\n          dataAppShellSecondaryNavItemVariants({ orientation: \"vertical\", status }),\n          nested && \"pl-8\"\n        )}\n        onClick={() => handleSelect(step)}\n        disabled={step.disabled}\n      >\n        <span className=\"flex items-center justify-center w-6 h-6 shrink-0\">\n          <StepIcon step={step} status={status} />\n        </span>\n        <span className={cn(\"text-sm truncate min-w-0\", status === \"todo\" && \"font-light\")}>\n          {step.label}\n        </span>\n        {step.badge != null && (\n          <Badge variant=\"secondary\" className=\"ml-auto h-4 px-1.5 text-[10px]\">\n            {step.badge}\n          </Badge>\n        )}\n      </button>\n    );\n  };\n\n  return (\n    <nav\n      data-slot=\"data-app-shell-secondary-nav\"\n      data-orientation=\"vertical\"\n      data-collapsed=\"false\"\n      className={cn(\n        dataAppShellSecondaryNavVariants({ orientation: \"vertical\" }),\n        \"w-[180px]\",\n        className\n      )}\n      {...props}\n    >\n      {(title != null || collapsible) && (\n        <div\n          data-slot=\"data-app-shell-secondary-nav-header\"\n          className=\"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border\"\n        >\n          <span className=\"flex-1 truncate\">{title}</span>\n          {collapsible && (\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"left\"\n              label=\"Collapse\"\n              onClick={() => setCollapsed(true)}\n            />\n          )}\n        </div>\n      )}\n      <div\n        data-slot=\"data-app-shell-secondary-nav-items\"\n        className=\"flex flex-col overflow-y-auto\"\n      >\n        {steps.map((step) => (\n          <React.Fragment key={step.id}>\n            {renderStep(step, false)}\n            {step.steps?.map((child) => renderStep(child, true))}\n          </React.Fragment>\n        ))}\n      </div>\n    </nav>\n  );\n}\n\nexport {\n  DataAppShellSecondaryNav,\n  dataAppShellSecondaryNavVariants,\n  dataAppShellSecondaryNavItemVariants,\n};\n"],"names":["dataAppShellSecondaryNavVariants","cva","dataAppShellSecondaryNavItemVariants","flattenSteps","steps","step","resolveStatus","index","activeIndex","StepIcon","status","className","Icon","Check","cn","jsx","DataAppShellSecondaryNav","orientation","activeKey","onSelect","title","collapsible","collapsed","defaultCollapsed","onCollapsedChange","props","resolvedOrientation","shell","useOptionalDataAppShell","followShell","internalCollapsed","setInternalCollapsed","React","isCollapsed","setCollapsed","next","flat","indexById","statusOf","handleSelect","TooltipProvider","ShellCollapseButton","Tooltip","TooltipTrigger","TooltipContent","active","s","jsxs","Select","id","SelectTrigger","SelectValue","SelectContent","SelectItem","ChevronRight","Badge","renderStep","nested","child"],"mappings":"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"}
+{"version":3,"file":"SecondaryNav.cjs","sources":["../../../../src/components/composed/DataAppShell/SecondaryNav.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, ChevronRight, type LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { ShellCollapseButton } from \"./CollapseButton\";\nimport { useOptionalDataAppShell } from \"./ShellContext\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type NavStepStatus = \"done\" | \"active\" | \"todo\";\n\nexport interface NavStep {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Lucide icon or custom React SVG component */\n  icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;\n  /** Optional count/status badge */\n  badge?: React.ReactNode;\n  /** Explicit status — overrides the linear derivation from `activeKey` */\n  status?: NavStepStatus;\n  /** Disables the step */\n  disabled?: boolean;\n  /** Tooltip/title text explaining why the step is disabled */\n  disabledReason?: string;\n  /** One level of nesting — child steps rendered indented under this step */\n  steps?: NavStep[];\n}\n\nexport type DataAppShellSecondaryNavOrientation = \"vertical\" | \"horizontal\";\n\n// =============================================================================\n// CVA variants\n// =============================================================================\n\nconst dataAppShellSecondaryNavVariants = cva(\"shrink-0\", {\n  variants: {\n    orientation: {\n      /** Collapsible left panel; collapses to an icon-only rail */\n      vertical: \"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden\",\n      /** Wizard/stepper row rendered above the main content */\n      horizontal: \"flex flex-row items-center min-w-0\",\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst dataAppShellSecondaryNavItemVariants = cva(\n  \"cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed\",\n  {\n    variants: {\n      orientation: {\n        vertical:\n          \"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        /** Icon-only row in the collapsed rail */\n        rail: \"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        // ring-inset — the steps row is an overflow-x-auto scroll container,\n        // which would clip an outset ring at the row's edges\n        horizontal:\n          \"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset\",\n      },\n      status: {\n        done: \"\",\n        active: \"\",\n        todo: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: \"vertical\",\n        status: \"active\",\n        class: \"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"done\",\n        class: \"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"todo\",\n        class: \"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50\",\n      },\n      { orientation: \"rail\", status: \"active\", class: \"border-l-primary\" },\n      { orientation: \"rail\", status: \"done\", class: \"border-l-border\" },\n      { orientation: \"rail\", status: \"todo\", class: \"border-l-border\" },\n      {\n        orientation: \"horizontal\",\n        status: \"active\",\n        class: \"bg-primary/10 text-primary font-medium\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"done\",\n        class: \"text-foreground hover:bg-accent\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"todo\",\n        class: \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n      },\n    ],\n    defaultVariants: { orientation: \"vertical\", status: \"todo\" },\n  }\n);\n\n// =============================================================================\n// Props\n// =============================================================================\n\nexport interface DataAppShellSecondaryNavProps\n  extends Omit<React.ComponentProps<\"nav\">, \"onSelect\" | \"title\">,\n    VariantProps<typeof dataAppShellSecondaryNavVariants> {\n  /** Step entries; one level of nesting via `steps` on a step */\n  steps: NavStep[];\n  /** Controlled active step id — steps before it derive `done`, after it `todo` */\n  activeKey?: string;\n  /** Called with the selected step id after the step resolves as enabled */\n  onSelect?: (key: string, step: NavStep) => void;\n  /** Panel title shown in the vertical header (e.g. \"Steps\") */\n  title?: React.ReactNode;\n  /** Renders the collapse toggle. Vertical collapses to an icon rail;\n   *  horizontal collapses to a compact step dropdown. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. When omitted inside a `DataAppShell`, the\n   *  shell's single collapse state drives it (one toggle for all zones). */\n  collapsed?: boolean;\n  /** Uncontrolled initial collapsed state */\n  defaultCollapsed?: boolean;\n  /** Called when the collapse toggle flips the state */\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n// =============================================================================\n// Status derivation\n// =============================================================================\n\n/** Depth-first flatten — parents immediately followed by their children. */\nfunction flattenSteps(steps: NavStep[]): NavStep[] {\n  return steps.flatMap((step) => [step, ...(step.steps ?? [])]);\n}\n\n/**\n * Explicit `status` wins; otherwise derived linearly from `activeKey`:\n * before the active step → `done`, after it (or no active step) → `todo`.\n */\nfunction resolveStatus(step: NavStep, index: number, activeIndex: number): NavStepStatus {\n  if (step.status) return step.status;\n  if (activeIndex < 0) return \"todo\";\n  if (index === activeIndex) return \"active\";\n  return index < activeIndex ? \"done\" : \"todo\";\n}\n\n// =============================================================================\n// Step icon — status-aware (done → check)\n// =============================================================================\n\nfunction StepIcon({\n  step,\n  status,\n  className,\n}: {\n  step: NavStep;\n  status: NavStepStatus;\n  className?: string;\n}) {\n  const Icon = step.icon;\n  if (status === \"done\") {\n    return <Check className={cn(\"w-4 h-4 text-positive\", className)} />;\n  }\n  if (Icon) {\n    return (\n      <Icon\n        className={cn(\n          \"w-4 h-4\",\n          status === \"active\" ? \"text-primary\" : \"text-muted-foreground\",\n          className\n        )}\n      />\n    );\n  }\n  return (\n    <div\n      className={cn(\n        \"w-2.5 h-2.5 rounded-full\",\n        status === \"active\" ? \"bg-primary\" : \"bg-muted-foreground/40\",\n        className\n      )}\n    />\n  );\n}\n\n// =============================================================================\n// DataAppShellSecondaryNav\n// =============================================================================\n\n/**\n * The Data App Shell's secondary (per-page/step) nav — one `steps` model\n * rendered on either axis via `orientation`:\n *\n * - **vertical** — collapsible left panel; collapses to an icon-only rail\n *   with tooltips and a ▸ expand toggle\n * - **horizontal** — wizard/stepper row above the main content\n *\n * Step status (`done` / `active` / `todo`) is derived linearly from\n * `activeKey`, or set explicitly per step. Supports one level of nesting.\n */\nfunction DataAppShellSecondaryNav({\n  orientation,\n  steps,\n  activeKey,\n  onSelect,\n  title,\n  collapsible = false,\n  collapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  className,\n  ...props\n}: DataAppShellSecondaryNavProps) {\n  const resolvedOrientation: DataAppShellSecondaryNavOrientation = orientation ?? \"vertical\";\n\n  // Inside a DataAppShell with `hideNavOnCollapse`, the shell's single collapse\n  // toggle drives this zone too (nav rail + secondary collapse together into\n  // one icon rail). Otherwise the zone owns its collapse — unless explicitly\n  // controlled via the `collapsed` prop, which always wins.\n  const shell = useOptionalDataAppShell();\n  const followShell = collapsed === undefined && shell != null && shell.hideNavOnCollapse;\n  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);\n  const isCollapsed = collapsed ?? (followShell ? shell.collapsed : internalCollapsed);\n  const setCollapsed = (next: boolean) => {\n    if (collapsed === undefined) {\n      if (followShell) shell.setCollapsed(next);\n      else setInternalCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  };\n\n  const flat = flattenSteps(steps);\n  const indexById = new Map(flat.map((step, index) => [step.id, index] as const));\n  const activeIndex = activeKey == null ? -1 : (indexById.get(activeKey) ?? -1);\n  const statusOf = (step: NavStep) =>\n    resolveStatus(step, indexById.get(step.id) ?? -1, activeIndex);\n\n  const handleSelect = (step: NavStep) => {\n    if (step.disabled) return;\n    onSelect?.(step.id, step);\n  };\n\n  // ── Collapsed icon rail (vertical) ───────────────────────────────────────\n  if (resolvedOrientation === \"vertical\" && isCollapsed) {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"vertical\"\n        data-collapsed=\"true\"\n        className={cn(\n          \"flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border\",\n          className\n        )}\n        {...props}\n      >\n        <TooltipProvider>\n          <div className=\"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border\">\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"right\"\n              label=\"Expand\"\n              onClick={() => setCollapsed(false)}\n            />\n          </div>\n          <div\n            data-slot=\"data-app-shell-secondary-nav-items\"\n            className=\"flex flex-col overflow-y-auto\"\n          >\n            {flat.map((step) => {\n              const status = statusOf(step);\n              return (\n                <Tooltip key={step.id}>\n                  <TooltipTrigger asChild>\n                    {/* aria-disabled (not disabled) — a disabled button gets no\n                        pointer/focus events, which would make the tooltip carrying\n                        the label/disabledReason unreachable in the icon-only rail */}\n                    <button\n                      type=\"button\"\n                      data-slot=\"data-app-shell-secondary-nav-item\"\n                      data-status={status}\n                      aria-label={step.label}\n                      aria-current={status === \"active\" ? \"step\" : undefined}\n                      aria-disabled={step.disabled || undefined}\n                      className={cn(\n                        dataAppShellSecondaryNavItemVariants({ orientation: \"rail\", status }),\n                        step.disabled && \"opacity-45 cursor-not-allowed\"\n                      )}\n                      onClick={() => handleSelect(step)}\n                    >\n                      <StepIcon step={step} status={status} />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    {step.disabled ? (step.disabledReason ?? step.label) : step.label}\n                  </TooltipContent>\n                </Tooltip>\n              );\n            })}\n          </div>\n        </TooltipProvider>\n      </nav>\n    );\n  }\n\n  // ── Collapsed horizontal — compact step dropdown (place in the top bar) ───\n  if (resolvedOrientation === \"horizontal\" && collapsible && isCollapsed) {\n    const active = activeKey == null ? undefined : flat.find((s) => s.id === activeKey);\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"true\"\n        className={cn(\"flex items-center gap-1.5 min-w-0\", className)}\n        {...props}\n      >\n        <Select\n          value={activeKey}\n          onValueChange={(id) => {\n            const step = flat.find((s) => s.id === id);\n            if (step) handleSelect(step);\n          }}\n        >\n          <SelectTrigger\n            data-slot=\"data-app-shell-secondary-nav-step-select\"\n            size=\"sm\"\n            aria-label=\"Current step\"\n            className=\"h-7 min-w-0\"\n          >\n            <SelectValue placeholder=\"Select step\">\n              {active\n                ? `Step ${(indexById.get(active.id) ?? 0) + 1} · ${active.label}`\n                : \"Select step\"}\n            </SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {flat.map((step, index) => (\n              <SelectItem key={step.id} value={step.id} disabled={step.disabled}>\n                {`Step ${index + 1} · ${step.label}`}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <ShellCollapseButton\n          data-slot=\"data-app-shell-secondary-nav-toggle\"\n          direction=\"down\"\n          label=\"Show steps\"\n          tooltipSide=\"bottom\"\n          onClick={() => setCollapsed(false)}\n        />\n      </nav>\n    );\n  }\n\n  // ── Horizontal stepper ───────────────────────────────────────────────────\n  if (resolvedOrientation === \"horizontal\") {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"false\"\n        className={cn(dataAppShellSecondaryNavVariants({ orientation: \"horizontal\" }), className)}\n        {...props}\n      >\n        <div\n          data-slot=\"data-app-shell-secondary-nav-items\"\n          className=\"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1\"\n        >\n          {flat.map((step, index) => {\n            const status = statusOf(step);\n            return (\n              <React.Fragment key={step.id}>\n                {index > 0 && (\n                  <ChevronRight aria-hidden=\"true\" className=\"w-4 h-4 shrink-0 text-muted-foreground/50\" />\n                )}\n                <button\n                  type=\"button\"\n                  data-slot=\"data-app-shell-secondary-nav-item\"\n                  data-status={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n                  className={cn(\n                    dataAppShellSecondaryNavItemVariants({ orientation: \"horizontal\", status })\n                  )}\n                  onClick={() => handleSelect(step)}\n                  disabled={step.disabled}\n                >\n                  <StepIcon step={step} status={status} className=\"shrink-0\" />\n                  <span>{step.label}</span>\n                  {step.badge != null && (\n                    <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-[10px]\">\n                      {step.badge}\n                    </Badge>\n                  )}\n                </button>\n              </React.Fragment>\n            );\n          })}\n        </div>\n        {collapsible && (\n          <ShellCollapseButton\n            data-slot=\"data-app-shell-secondary-nav-toggle\"\n            direction=\"up\"\n            label=\"Collapse steps\"\n            tooltipSide=\"bottom\"\n            className=\"ml-2\"\n            onClick={() => setCollapsed(true)}\n          />\n        )}\n      </nav>\n    );\n  }\n\n  // ── Vertical expanded panel ──────────────────────────────────────────────\n  const renderStep = (step: NavStep, nested: boolean) => {\n    const status = statusOf(step);\n    return (\n      <button\n        type=\"button\"\n        key={step.id}\n        data-slot=\"data-app-shell-secondary-nav-item\"\n        data-status={status}\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n        className={cn(\n          dataAppShellSecondaryNavItemVariants({ orientation: \"vertical\", status }),\n          nested && \"pl-8\"\n        )}\n        onClick={() => handleSelect(step)}\n        disabled={step.disabled}\n      >\n        <span className=\"flex items-center justify-center w-6 h-6 shrink-0\">\n          <StepIcon step={step} status={status} />\n        </span>\n        <span className={cn(\"text-sm truncate min-w-0\", status === \"todo\" && \"font-light\")}>\n          {step.label}\n        </span>\n        {step.badge != null && (\n          <Badge variant=\"secondary\" className=\"ml-auto h-4 px-1.5 text-[10px]\">\n            {step.badge}\n          </Badge>\n        )}\n      </button>\n    );\n  };\n\n  return (\n    <nav\n      data-slot=\"data-app-shell-secondary-nav\"\n      data-orientation=\"vertical\"\n      data-collapsed=\"false\"\n      className={cn(\n        dataAppShellSecondaryNavVariants({ orientation: \"vertical\" }),\n        \"w-[180px]\",\n        className\n      )}\n      {...props}\n    >\n      {(title != null || collapsible) && (\n        <div\n          data-slot=\"data-app-shell-secondary-nav-header\"\n          className=\"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border\"\n        >\n          <span className=\"flex-1 truncate\">{title}</span>\n          {collapsible && (\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"left\"\n              label=\"Collapse\"\n              onClick={() => setCollapsed(true)}\n            />\n          )}\n        </div>\n      )}\n      <div\n        data-slot=\"data-app-shell-secondary-nav-items\"\n        className=\"flex flex-col overflow-y-auto\"\n      >\n        {steps.map((step) => (\n          <React.Fragment key={step.id}>\n            {renderStep(step, false)}\n            {step.steps?.map((child) => renderStep(child, true))}\n          </React.Fragment>\n        ))}\n      </div>\n    </nav>\n  );\n}\n\nexport {\n  DataAppShellSecondaryNav,\n  dataAppShellSecondaryNavVariants,\n  dataAppShellSecondaryNavItemVariants,\n};\n"],"names":["dataAppShellSecondaryNavVariants","cva","dataAppShellSecondaryNavItemVariants","flattenSteps","steps","step","resolveStatus","index","activeIndex","StepIcon","status","className","Icon","Check","cn","jsx","DataAppShellSecondaryNav","orientation","activeKey","onSelect","title","collapsible","collapsed","defaultCollapsed","onCollapsedChange","props","resolvedOrientation","shell","useOptionalDataAppShell","followShell","internalCollapsed","setInternalCollapsed","React","isCollapsed","setCollapsed","next","flat","indexById","statusOf","handleSelect","TooltipProvider","ShellCollapseButton","Tooltip","TooltipTrigger","TooltipContent","active","s","jsxs","Select","id","SelectTrigger","SelectValue","SelectContent","SelectItem","ChevronRight","Badge","renderStep","nested","child"],"mappings":"orBAsDMA,EAAmCC,EAAAA,IAAI,WAAY,CACvD,SAAU,CACR,YAAa,CAEX,SAAU,0EAEV,WAAY,oCAAA,CACd,EAEF,gBAAiB,CAAE,YAAa,UAAA,CAClC,CAAC,EAEKC,EAAuCD,EAAAA,IAC3C,uLACA,CACE,SAAU,CACR,YAAa,CACX,SACE,uIAEF,KAAM,iGAGN,WACE,8GAAA,EAEJ,OAAQ,CACN,KAAM,GACN,OAAQ,GACR,KAAM,EAAA,CACR,EAEF,iBAAkB,CAChB,CACE,YAAa,WACb,OAAQ,SACR,MAAO,4FAAA,EAET,CACE,YAAa,WACb,OAAQ,OACR,MAAO,oEAAA,EAET,CACE,YAAa,WACb,OAAQ,OACR,MAAO,0EAAA,EAET,CAAE,YAAa,OAAQ,OAAQ,SAAU,MAAO,kBAAA,EAChD,CAAE,YAAa,OAAQ,OAAQ,OAAQ,MAAO,iBAAA,EAC9C,CAAE,YAAa,OAAQ,OAAQ,OAAQ,MAAO,iBAAA,EAC9C,CACE,YAAa,aACb,OAAQ,SACR,MAAO,wCAAA,EAET,CACE,YAAa,aACb,OAAQ,OACR,MAAO,iCAAA,EAET,CACE,YAAa,aACb,OAAQ,OACR,MAAO,6DAAA,CACT,EAEF,gBAAiB,CAAE,YAAa,WAAY,OAAQ,MAAA,CAAO,CAE/D,EAkCA,SAASE,EAAaC,EAA6B,CACjD,OAAOA,EAAM,QAASC,GAAS,CAACA,EAAM,GAAIA,EAAK,OAAS,CAAA,CAAG,CAAC,CAC9D,CAMA,SAASC,EAAcD,EAAeE,EAAeC,EAAoC,CACvF,OAAIH,EAAK,OAAeA,EAAK,OACzBG,EAAc,EAAU,OACxBD,IAAUC,EAAoB,SAC3BD,EAAQC,EAAc,OAAS,MACxC,CAMA,SAASC,EAAS,CAChB,KAAAJ,EACA,OAAAK,EACA,UAAAC,CACF,EAIG,CACD,MAAMC,EAAOP,EAAK,KAClB,OAAIK,IAAW,aACLG,EAAAA,MAAA,CAAM,UAAWC,EAAAA,GAAG,wBAAyBH,CAAS,EAAG,EAE/DC,EAEAG,EAAAA,IAACH,EAAA,CACC,UAAWE,EAAAA,GACT,UACAJ,IAAW,SAAW,eAAiB,wBACvCC,CAAA,CACF,CAAA,EAKJI,EAAAA,IAAC,MAAA,CACC,UAAWD,EAAAA,GACT,2BACAJ,IAAW,SAAW,aAAe,yBACrCC,CAAA,CACF,CAAA,CAGN,CAiBA,SAASK,EAAyB,CAChC,YAAAC,EACA,MAAAb,EACA,UAAAc,EACA,SAAAC,EACA,MAAAC,EACA,YAAAC,EAAc,GACd,UAAAC,EACA,iBAAAC,EAAmB,GACnB,kBAAAC,EACA,UAAAb,EACA,GAAGc,CACL,EAAkC,CAChC,MAAMC,EAA2DT,GAAe,WAM1EU,EAAQC,EAAAA,wBAAA,EACRC,EAAcP,IAAc,QAAaK,GAAS,MAAQA,EAAM,kBAChE,CAACG,EAAmBC,CAAoB,EAAIC,EAAM,SAAST,CAAgB,EAC3EU,EAAcX,IAAcO,EAAcF,EAAM,UAAYG,GAC5DI,EAAgBC,GAAkB,CAClCb,IAAc,SACZO,EAAaF,EAAM,aAAaQ,CAAI,IACdA,CAAI,GAEhCX,IAAoBW,CAAI,CAC1B,EAEMC,EAAOjC,EAAaC,CAAK,EACzBiC,EAAY,IAAI,IAAID,EAAK,IAAI,CAAC/B,EAAME,IAAU,CAACF,EAAK,GAAIE,CAAK,CAAU,CAAC,EACxEC,EAAcU,GAAa,KAAO,GAAMmB,EAAU,IAAInB,CAAS,GAAK,GACpEoB,EAAYjC,GAChBC,EAAcD,EAAMgC,EAAU,IAAIhC,EAAK,EAAE,GAAK,GAAIG,CAAW,EAEzD+B,EAAgBlC,GAAkB,CAClCA,EAAK,UACTc,IAAWd,EAAK,GAAIA,CAAI,CAC1B,EAGA,GAAIqB,IAAwB,YAAcO,EACxC,OACElB,EAAAA,IAAC,MAAA,CACC,YAAU,+BACV,mBAAiB,WACjB,iBAAe,OACf,UAAWD,EAAAA,GACT,4EACAH,CAAA,EAED,GAAGc,EAEJ,gBAACe,kBAAA,CACC,SAAA,CAAAzB,EAAAA,IAAC,MAAA,CAAI,UAAU,gFACb,SAAAA,EAAAA,IAAC0B,EAAAA,oBAAA,CACC,YAAU,sCACV,UAAU,QACV,MAAM,SACN,QAAS,IAAMP,EAAa,EAAK,CAAA,CAAA,EAErC,EACAnB,EAAAA,IAAC,MAAA,CACC,YAAU,qCACV,UAAU,gCAET,SAAAqB,EAAK,IAAK/B,GAAS,CAClB,MAAMK,EAAS4B,EAASjC,CAAI,EAC5B,cACGqC,UAAA,CACC,SAAA,CAAA3B,EAAAA,IAAC4B,EAAAA,eAAA,CAAe,QAAO,GAIrB,SAAA5B,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,YAAU,oCACV,cAAaL,EACb,aAAYL,EAAK,MACjB,eAAcK,IAAW,SAAW,OAAS,OAC7C,gBAAeL,EAAK,UAAY,OAChC,UAAWS,EAAAA,GACTZ,EAAqC,CAAE,YAAa,OAAQ,OAAAQ,EAAQ,EACpEL,EAAK,UAAY,+BAAA,EAEnB,QAAS,IAAMkC,EAAalC,CAAI,EAEhC,SAAAU,EAAAA,IAACN,EAAA,CAAS,KAAAJ,EAAY,OAAAK,CAAA,CAAgB,CAAA,CAAA,EAE1C,EACAK,EAAAA,IAAC6B,EAAAA,eAAA,CAAe,KAAK,QAClB,SAAAvC,EAAK,SAAYA,EAAK,gBAAkBA,EAAK,MAASA,EAAK,KAAA,CAC9D,CAAA,CAAA,EAvBYA,EAAK,EAwBnB,CAEJ,CAAC,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,EAMN,GAAIqB,IAAwB,cAAgBL,GAAeY,EAAa,CACtE,MAAMY,EAAS3B,GAAa,KAAO,OAAYkB,EAAK,KAAMU,GAAMA,EAAE,KAAO5B,CAAS,EAClF,OACE6B,EAAAA,KAAC,MAAA,CACC,YAAU,+BACV,mBAAiB,aACjB,iBAAe,OACf,UAAWjC,EAAAA,GAAG,oCAAqCH,CAAS,EAC3D,GAAGc,EAEJ,SAAA,CAAAsB,EAAAA,KAACC,EAAAA,OAAA,CACC,MAAO9B,EACP,cAAgB+B,GAAO,CACrB,MAAM5C,EAAO+B,EAAK,KAAMU,GAAMA,EAAE,KAAOG,CAAE,EACrC5C,KAAmBA,CAAI,CAC7B,EAEA,SAAA,CAAAU,EAAAA,IAACmC,EAAAA,cAAA,CACC,YAAU,2CACV,KAAK,KACL,aAAW,eACX,UAAU,cAEV,eAACC,EAAAA,YAAA,CAAY,YAAY,cACtB,SAAAN,EACG,SAASR,EAAU,IAAIQ,EAAO,EAAE,GAAK,GAAK,CAAC,MAAMA,EAAO,KAAK,GAC7D,aAAA,CACN,CAAA,CAAA,EAEF9B,EAAAA,IAACqC,EAAAA,cAAA,CACE,SAAAhB,EAAK,IAAI,CAAC/B,EAAME,IACfQ,EAAAA,IAACsC,EAAAA,WAAA,CAAyB,MAAOhD,EAAK,GAAI,SAAUA,EAAK,SACtD,SAAA,QAAQE,EAAQ,CAAC,MAAMF,EAAK,KAAK,EAAA,EADnBA,EAAK,EAEtB,CACD,CAAA,CACH,CAAA,CAAA,CAAA,EAEFU,EAAAA,IAAC0B,EAAAA,oBAAA,CACC,YAAU,sCACV,UAAU,OACV,MAAM,aACN,YAAY,SACZ,QAAS,IAAMP,EAAa,EAAK,CAAA,CAAA,CACnC,CAAA,CAAA,CAGN,CAGA,GAAIR,IAAwB,aAC1B,OACEqB,EAAAA,KAAC,MAAA,CACC,YAAU,+BACV,mBAAiB,aACjB,iBAAe,QACf,UAAWjC,EAAAA,GAAGd,EAAiC,CAAE,YAAa,YAAA,CAAc,EAAGW,CAAS,EACvF,GAAGc,EAEJ,SAAA,CAAAV,EAAAA,IAAC,MAAA,CACC,YAAU,qCACV,UAAU,kEAET,SAAAqB,EAAK,IAAI,CAAC/B,EAAME,IAAU,CACzB,MAAMG,EAAS4B,EAASjC,CAAI,EAC5B,OACE0C,OAACf,EAAM,SAAN,CACE,SAAA,CAAAzB,EAAQ,GACPQ,EAAAA,IAACuC,EAAAA,aAAA,CAAa,cAAY,OAAO,UAAU,4CAA4C,EAEzFP,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,YAAU,oCACV,cAAarC,EACb,eAAcA,IAAW,SAAW,OAAS,OAC7C,MAAOL,EAAK,SAAYA,EAAK,gBAAkBA,EAAK,MAAS,OAC7D,UAAWS,EAAAA,GACTZ,EAAqC,CAAE,YAAa,aAAc,OAAAQ,EAAQ,CAAA,EAE5E,QAAS,IAAM6B,EAAalC,CAAI,EAChC,SAAUA,EAAK,SAEf,SAAA,CAAAU,EAAAA,IAACN,EAAA,CAAS,KAAAJ,EAAY,OAAAK,EAAgB,UAAU,WAAW,EAC3DK,EAAAA,IAAC,OAAA,CAAM,SAAAV,EAAK,KAAA,CAAM,EACjBA,EAAK,OAAS,MACbU,EAAAA,IAACwC,EAAAA,MAAA,CAAM,QAAQ,YAAY,UAAU,yBAClC,SAAAlD,EAAK,KAAA,CACR,CAAA,CAAA,CAAA,CAEJ,CAAA,EAvBmBA,EAAK,EAwB1B,CAEJ,CAAC,CAAA,CAAA,EAEFgB,GACCN,EAAAA,IAAC0B,EAAAA,oBAAA,CACC,YAAU,sCACV,UAAU,KACV,MAAM,iBACN,YAAY,SACZ,UAAU,OACV,QAAS,IAAMP,EAAa,EAAI,CAAA,CAAA,CAClC,CAAA,CAAA,EAOR,MAAMsB,EAAa,CAACnD,EAAeoD,IAAoB,CACrD,MAAM/C,EAAS4B,EAASjC,CAAI,EAC5B,OACE0C,EAAAA,KAAC,SAAA,CACC,KAAK,SAEL,YAAU,oCACV,cAAarC,EACb,eAAcA,IAAW,SAAW,OAAS,OAC7C,MAAOL,EAAK,SAAYA,EAAK,gBAAkBA,EAAK,MAAS,OAC7D,UAAWS,EAAAA,GACTZ,EAAqC,CAAE,YAAa,WAAY,OAAAQ,EAAQ,EACxE+C,GAAU,MAAA,EAEZ,QAAS,IAAMlB,EAAalC,CAAI,EAChC,SAAUA,EAAK,SAEf,SAAA,CAAAU,EAAAA,IAAC,QAAK,UAAU,oDACd,eAACN,EAAA,CAAS,KAAAJ,EAAY,OAAAK,EAAgB,CAAA,CACxC,EACAK,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,GAAG,2BAA4BJ,IAAW,QAAU,YAAY,EAC9E,SAAAL,EAAK,KAAA,CACR,EACCA,EAAK,OAAS,MACbU,EAAAA,IAACwC,EAAAA,MAAA,CAAM,QAAQ,YAAY,UAAU,iCAClC,SAAAlD,EAAK,KAAA,CACR,CAAA,CAAA,EArBGA,EAAK,EAAA,CAyBhB,EAEA,OACE0C,EAAAA,KAAC,MAAA,CACC,YAAU,+BACV,mBAAiB,WACjB,iBAAe,QACf,UAAWjC,EAAAA,GACTd,EAAiC,CAAE,YAAa,WAAY,EAC5D,YACAW,CAAA,EAED,GAAGc,EAEF,SAAA,EAAAL,GAAS,MAAQC,IACjB0B,EAAAA,KAAC,MAAA,CACC,YAAU,sCACV,UAAU,iJAEV,SAAA,CAAAhC,EAAAA,IAAC,OAAA,CAAK,UAAU,kBAAmB,SAAAK,EAAM,EACxCC,GACCN,EAAAA,IAAC0B,EAAAA,oBAAA,CACC,YAAU,sCACV,UAAU,OACV,MAAM,WACN,QAAS,IAAMP,EAAa,EAAI,CAAA,CAAA,CAClC,CAAA,CAAA,EAINnB,EAAAA,IAAC,MAAA,CACC,YAAU,qCACV,UAAU,gCAET,WAAM,IAAKV,GACV0C,EAAAA,KAACf,EAAM,SAAN,CACE,SAAA,CAAAwB,EAAWnD,EAAM,EAAK,EACtBA,EAAK,OAAO,IAAKqD,GAAUF,EAAWE,EAAO,EAAI,CAAC,CAAA,CAAA,EAFhCrD,EAAK,EAG1B,CACD,CAAA,CAAA,CACH,CAAA,CAAA,CAGN"}

package/dist/components/composed/DataAppShell/SecondaryNav.d.ts

@@ -0,0 +1,63 @@
+import { VariantProps } from 'class-variance-authority';
+import { LucideIcon } from 'lucide-react';
+import * as React from "react";
+export type NavStepStatus = "done" | "active" | "todo";
+export interface NavStep {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Lucide icon or custom React SVG component */
+    icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Optional count/status badge */
+    badge?: React.ReactNode;
+    /** Explicit status — overrides the linear derivation from `activeKey` */
+    status?: NavStepStatus;
+    /** Disables the step */
+    disabled?: boolean;
+    /** Tooltip/title text explaining why the step is disabled */
+    disabledReason?: string;
+    /** One level of nesting — child steps rendered indented under this step */
+    steps?: NavStep[];
+}
+export type DataAppShellSecondaryNavOrientation = "vertical" | "horizontal";
+declare const dataAppShellSecondaryNavVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const dataAppShellSecondaryNavItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "rail" | null | undefined;
+    status?: "done" | "active" | "todo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DataAppShellSecondaryNavProps extends Omit<React.ComponentProps<"nav">, "onSelect" | "title">, VariantProps<typeof dataAppShellSecondaryNavVariants> {
+    /** Step entries; one level of nesting via `steps` on a step */
+    steps: NavStep[];
+    /** Controlled active step id — steps before it derive `done`, after it `todo` */
+    activeKey?: string;
+    /** Called with the selected step id after the step resolves as enabled */
+    onSelect?: (key: string, step: NavStep) => void;
+    /** Panel title shown in the vertical header (e.g. "Steps") */
+    title?: React.ReactNode;
+    /** Renders the collapse toggle. Vertical collapses to an icon rail;
+     *  horizontal collapses to a compact step dropdown. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. When omitted inside a `DataAppShell`, the
+     *  shell's single collapse state drives it (one toggle for all zones). */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state */
+    defaultCollapsed?: boolean;
+    /** Called when the collapse toggle flips the state */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+/**
+ * The Data App Shell's secondary (per-page/step) nav — one `steps` model
+ * rendered on either axis via `orientation`:
+ *
+ * - **vertical** — collapsible left panel; collapses to an icon-only rail
+ *   with tooltips and a ▸ expand toggle
+ * - **horizontal** — wizard/stepper row above the main content
+ *
+ * Step status (`done` / `active` / `todo`) is derived linearly from
+ * `activeKey`, or set explicitly per step. Supports one level of nesting.
+ */
+declare function DataAppShellSecondaryNav({ orientation, steps, activeKey, onSelect, title, collapsible, collapsed, defaultCollapsed, onCollapsedChange, className, ...props }: DataAppShellSecondaryNavProps): import("react/jsx-runtime").JSX.Element;
+export { DataAppShellSecondaryNav, dataAppShellSecondaryNavVariants, dataAppShellSecondaryNavItemVariants, };

package/dist/components/composed/DataAppShell/SecondaryNav.js

@@ -4,9 +4,9 @@ import { ChevronRight as M, Check as E } from "lucide-react";
 import * as S from "react";
 import { ShellCollapseButton as v } from "./CollapseButton.js";
 import { useOptionalDataAppShell as P } from "./ShellContext.js";
-import { Badge as j } from "../../ui/badge.js";
-import { Select as q, SelectTrigger as G, SelectValue as H, SelectContent as J, SelectItem as L } from "../../ui/select.js";
-import { TooltipProvider as Q, Tooltip as U, TooltipTrigger as W, TooltipContent as X } from "../../ui/tooltip.js";
+import { Badge as j } from "../../../ui/badge.js";
+import { Select as q, SelectTrigger as G, SelectValue as H, SelectContent as J, SelectItem as L } from "../../../ui/select.js";
+import { TooltipProvider as Q, Tooltip as U, TooltipTrigger as W, TooltipContent as X } from "../../../ui/tooltip.js";
 import { cn as i } from "../../../lib/utils.js";
 const I = R("shrink-0", {
   variants: {

package/dist/components/composed/DataAppShell/ShellContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type DataAppShellNavVariant = "vertical" | "horizontal";
+export interface DataAppShellContextValue {
+    /** Which axis the primary nav renders on. */
+    navVariant: DataAppShellNavVariant;
+    /** The shell's single collapse state — primary + secondary collapse together. */
+    collapsed: boolean;
+    /** Flip the shell collapse state (no-op when the shell is not collapsible). */
+    setCollapsed: (collapsed: boolean) => void;
+    /** When true, collapsing hides the primary rail so one icon rail remains. */
+    hideNavOnCollapse: boolean;
+}
+export declare function DataAppShellProvider({ value, children, }: {
+    value: DataAppShellContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Shell layout state; throws outside a `DataAppShell`. */
+export declare function useDataAppShell(): DataAppShellContextValue;
+/** Shell layout state, or `null` when rendered outside a `DataAppShell`. */
+export declare function useOptionalDataAppShell(): DataAppShellContextValue | null;

package/dist/components/composed/DataAppShell/index.d.ts

@@ -0,0 +1,12 @@
+export { DataAppShell } from './DataAppShell';
+export { DataAppShellPrimaryNav, dataAppShellPrimaryNavVariants, dataAppShellPrimaryNavItemVariants, } from './PrimaryNav';
+export { DataAppShellRightPanel, DataAppShellRightPanelTrigger, dataAppShellRightPanelTriggerVariants, } from './RightPanel';
+export type { DataAppShellProps, BreadcrumbItemConfig } from './DataAppShell';
+export type { DataAppShellRightPanelProps, DataAppShellRightPanelTriggerProps, DataAppShellRightPanelVariant, } from './RightPanel';
+export type { DataAppShellPrimaryNavProps, DataAppShellPrimaryNavVariant, NavPage, NavGroup, } from './PrimaryNav';
+export { DataAppShellSecondaryNav, dataAppShellSecondaryNavVariants, dataAppShellSecondaryNavItemVariants, } from './SecondaryNav';
+export type { DataAppShellSecondaryNavProps, DataAppShellSecondaryNavOrientation, NavStep, NavStepStatus, } from './SecondaryNav';
+export { useDataAppShell, useOptionalDataAppShell } from './ShellContext';
+export type { DataAppShellContextValue, DataAppShellNavVariant } from './ShellContext';
+export { ShellCollapseButton } from './CollapseButton';
+export type { ShellCollapseButtonProps } from './CollapseButton';

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

@@ -0,0 +1,12 @@
+import { LucideIcon } from 'lucide-react';
+import * as React from "react";
+export type EmptyStateVariant = "no-data" | "no-results" | "no-access" | "empty-folder" | "server-error";
+export interface EmptyStateProps extends React.ComponentProps<"div"> {
+    variant?: EmptyStateVariant;
+    title?: string;
+    description?: string;
+    icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ variant, title, description, icon, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export { EmptyState };

package/dist/components/composed/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateVariant } from './EmptyState';

package/dist/components/composed/FormPatterns/FormSection.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../ui/field.cjs"),l=require("../../ui/separator.cjs"),n=require("../../../lib/utils.cjs");function a({heading:t,description:s,children:r,className:o,...c}){return e.jsxs("div",{"data-slot":"form-section",className:n.cn("flex flex-col gap-4",o),...c,children:[e.jsxs("div",{className:"space-y-0.5",children:[e.jsx("p",{className:"text-sm font-semibold",children:t}),s&&e.jsx("p",{className:"text-sm text-muted-foreground",children:s})]}),e.jsx(l.Separator,{}),e.jsx(i.FieldGroup,{children:r})]})}exports.FormSection=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../ui/field.cjs"),l=require("../../../ui/separator.cjs"),n=require("../../../lib/utils.cjs");function a({heading:t,description:s,children:r,className:o,...i}){return e.jsxs("div",{"data-slot":"form-section",className:n.cn("flex flex-col gap-4",o),...i,children:[e.jsxs("div",{className:"space-y-0.5",children:[e.jsx("p",{className:"text-sm font-semibold",children:t}),s&&e.jsx("p",{className:"text-sm text-muted-foreground",children:s})]}),e.jsx(l.Separator,{}),e.jsx(c.FieldGroup,{children:r})]})}exports.FormSection=a;
 //# sourceMappingURL=FormSection.cjs.map

package/dist/components/composed/FormPatterns/FormSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.cjs","sources":["../../../../src/components/composed/FormPatterns/FormSection.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { FieldGroup } from \"@/components/ui/field\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface FormSectionProps extends React.ComponentProps<\"div\"> {\n  heading: string\n  description?: string\n  children: React.ReactNode\n}\n\nexport function FormSection({\n  heading,\n  description,\n  children,\n  className,\n  ...props\n}: FormSectionProps) {\n  return (\n    <div\n      data-slot=\"form-section\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    >\n      <div className=\"space-y-0.5\">\n        <p className=\"text-sm font-semibold\">{heading}</p>\n        {description && (\n          <p className=\"text-sm text-muted-foreground\">{description}</p>\n        )}\n      </div>\n      <Separator />\n      <FieldGroup>{children}</FieldGroup>\n    </div>\n  )\n}\n"],"names":["FormSection","heading","description","children","className","props","jsxs","cn","jsx","Separator","FieldGroup"],"mappings":"6NAYO,SAASA,EAAY,CAC1B,QAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAqB,CACnB,OACEC,EAAAA,KAAC,MAAA,CACC,YAAU,eACV,UAAWC,EAAAA,GAAG,sBAAuBH,CAAS,EAC7C,GAAGC,EAEJ,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAE,EAAAA,IAAC,IAAA,CAAE,UAAU,wBAAyB,SAAAP,EAAQ,EAC7CC,GACCM,EAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAN,CAAA,CAAY,CAAA,EAE9D,QACCO,EAAAA,UAAA,EAAU,EACXD,MAACE,EAAAA,YAAY,SAAAP,CAAA,CAAS,CAAA,CAAA,CAAA,CAG5B"}
+{"version":3,"file":"FormSection.cjs","sources":["../../../../src/components/composed/FormPatterns/FormSection.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { FieldGroup } from \"@/components/ui/field\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface FormSectionProps extends React.ComponentProps<\"div\"> {\n  heading: string\n  description?: string\n  children: React.ReactNode\n}\n\nexport function FormSection({\n  heading,\n  description,\n  children,\n  className,\n  ...props\n}: FormSectionProps) {\n  return (\n    <div\n      data-slot=\"form-section\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    >\n      <div className=\"space-y-0.5\">\n        <p className=\"text-sm font-semibold\">{heading}</p>\n        {description && (\n          <p className=\"text-sm text-muted-foreground\">{description}</p>\n        )}\n      </div>\n      <Separator />\n      <FieldGroup>{children}</FieldGroup>\n    </div>\n  )\n}\n"],"names":["FormSection","heading","description","children","className","props","jsxs","cn","jsx","Separator","FieldGroup"],"mappings":"mOAYO,SAASA,EAAY,CAC1B,QAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAqB,CACnB,OACEC,EAAAA,KAAC,MAAA,CACC,YAAU,eACV,UAAWC,EAAAA,GAAG,sBAAuBH,CAAS,EAC7C,GAAGC,EAEJ,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAE,EAAAA,IAAC,IAAA,CAAE,UAAU,wBAAyB,SAAAP,EAAQ,EAC7CC,GACCM,EAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAN,CAAA,CAAY,CAAA,EAE9D,QACCO,EAAAA,UAAA,EAAU,EACXD,MAACE,EAAAA,YAAY,SAAAP,CAAA,CAAS,CAAA,CAAA,CAAA,CAG5B"}

package/dist/components/composed/FormPatterns/FormSection.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface FormSectionProps extends React.ComponentProps<"div"> {
+    heading: string;
+    description?: string;
+    children: React.ReactNode;
+}
+export declare function FormSection({ heading, description, children, className, ...props }: FormSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/composed/FormPatterns/FormSection.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { FieldGroup as l } from "../../ui/field.js";
-import { Separator as c } from "../../ui/separator.js";
+import { FieldGroup as l } from "../../../ui/field.js";
+import { Separator as c } from "../../../ui/separator.js";
 import { cn as i } from "../../../lib/utils.js";
 function x({
   heading: t,

package/dist/components/composed/FormPatterns/index.d.ts

@@ -0,0 +1 @@
+export * from './FormSection';

package/dist/components/composed/MoleculeStructure/MoleculeStructure.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("lucide-react"),S=require("react"),q=require("./rdkit-loader.cjs"),D=require("./use-rdkit.cjs"),N=require("../../ui/skeleton.cjs"),z=require("../../../hooks/use-is-dark.cjs"),I=require("../../../lib/utils.cjs");function M(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=M(S),h=300;function _(e){return e.replace(/width=(['"])[^'"]*\1/,"width='100%'").replace(/height=(['"])[^'"]*\1/,"height='100%'")}function O({smiles:e,label:t,dark:r,alt:l,drawOptions:d,loadingContent:j,errorContent:k,onError:f,className:x,...p}){const{rdkit:a,status:s}=D.useRDKit(),v=z.useIsDark(),g=r??v,u=l??t??e,m=c.useRef(f);c.useEffect(()=>{m.current=f});const i=c.useMemo(()=>{if(!a)return null;const b=q.moleculeToSvg(a,e,{width:h,height:h,dark:g,legend:t,drawOptions:d});return b===null?null:_(b)},[a,e,g,t,d]),o=s==="ready"&&i===null,y=s==="error"||o;return c.useEffect(()=>{o&&m.current?.(e)},[o,e]),n.jsxs("div",{"data-slot":"molecule-structure",className:I.cn("relative flex items-center justify-center",x),title:u,"aria-busy":s==="loading",...p,children:[s==="loading"&&(j??n.jsx(N.Skeleton,{role:"img","aria-label":`Loading structure: ${u}`,className:"size-full rounded-md"})),y&&(k??n.jsxs("div",{role:"img","aria-label":`Unable to render structure: ${u}`,className:"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border p-2 text-center text-muted-foreground",children:[n.jsx(R.AlertTriangleIcon,{className:"size-4 shrink-0","aria-hidden":!0}),n.jsx("span",{className:"text-2xs leading-tight break-all",children:"Invalid structure"})]})),s==="ready"&&i!==null&&n.jsx("div",{role:"img","aria-label":u,className:"size-full [&>svg]:size-full",dangerouslySetInnerHTML:{__html:i}})]})}exports.MoleculeStructure=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),R=require("lucide-react"),S=require("react"),q=require("./rdkit-loader.cjs"),D=require("./use-rdkit.cjs"),N=require("../../../ui/skeleton.cjs"),_=require("../../../hooks/use-is-dark.cjs"),z=require("../../../lib/utils.cjs");function I(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=I(S),h=300;function M(e){return e.replace(/width=(['"])[^'"]*\1/,"width='100%'").replace(/height=(['"])[^'"]*\1/,"height='100%'")}function O({smiles:e,label:t,dark:r,alt:u,drawOptions:d,loadingContent:j,errorContent:k,onError:f,className:x,...p}){const{rdkit:a,status:s}=D.useRDKit(),v=_.useIsDark(),g=r??v,l=u??t??e,m=c.useRef(f);c.useEffect(()=>{m.current=f});const i=c.useMemo(()=>{if(!a)return null;const b=q.moleculeToSvg(a,e,{width:h,height:h,dark:g,legend:t,drawOptions:d});return b===null?null:M(b)},[a,e,g,t,d]),o=s==="ready"&&i===null,y=s==="error"||o;return c.useEffect(()=>{o&&m.current?.(e)},[o,e]),n.jsxs("div",{"data-slot":"molecule-structure",className:z.cn("relative flex items-center justify-center",x),title:l,"aria-busy":s==="loading",...p,children:[s==="loading"&&(j??n.jsx(N.Skeleton,{role:"img","aria-label":`Loading structure: ${l}`,className:"size-full rounded-md"})),y&&(k??n.jsxs("div",{role:"img","aria-label":`Unable to render structure: ${l}`,className:"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border p-2 text-center text-muted-foreground",children:[n.jsx(R.AlertTriangleIcon,{className:"size-4 shrink-0","aria-hidden":!0}),n.jsx("span",{className:"text-2xs leading-tight break-all",children:"Invalid structure"})]})),s==="ready"&&i!==null&&n.jsx("div",{role:"img","aria-label":l,className:"size-full [&>svg]:size-full",dangerouslySetInnerHTML:{__html:i}})]})}exports.MoleculeStructure=O;
 //# sourceMappingURL=MoleculeStructure.cjs.map

package/dist/components/composed/MoleculeStructure/MoleculeStructure.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MoleculeStructure.cjs","sources":["../../../../src/components/composed/MoleculeStructure/MoleculeStructure.tsx"],"sourcesContent":["import { AlertTriangleIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { moleculeToSvg } from \"./rdkit-loader\"\nimport { useRDKit } from \"./use-rdkit\"\n\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { useIsDark } from \"@/hooks/use-is-dark\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MoleculeStructureProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\" | \"onError\"> {\n  /** SMILES string to render as a 2D structure. */\n  smiles: string\n  /** Optional caption drawn beneath the structure by RDKit. */\n  label?: string\n  /**\n   * Force dark/light drawing colours. Defaults to following the active theme\n   * (the `.dark` class on the document root).\n   */\n  dark?: boolean\n  /**\n   * Accessible label for the structure. Defaults to the SMILES string.\n   * Rendered as the SVG group's `aria-label` and the wrapper's title.\n   */\n  alt?: string\n  /**\n   * Extra RDKit MolDraw2D options. Pass a stable (memoised or module-level)\n   * reference — a new object each render re-parses the SMILES through RDKit.\n   */\n  drawOptions?: Record<string, unknown>\n  /** Rendered while the WASM module and structure are being prepared. */\n  loadingContent?: React.ReactNode\n  /** Rendered when the SMILES is invalid or RDKit fails to load. */\n  errorContent?: React.ReactNode\n  /** Called once when the SMILES cannot be parsed into a valid molecule. */\n  onError?: (smiles: string) => void\n}\n\n/**\n * Internal draw resolution. The structure is vector and scales to fill the\n * wrapper (see {@link makeResponsive}); a square viewBox keeps it centred in\n * containers of any shape without distortion.\n */\nconst DRAW_SIZE = 300\n\n/** Make an RDKit SVG fluid: fill the wrapper and scale with its aspect ratio. */\nfunction makeResponsive(svg: string): string {\n  return svg\n    .replace(/width=(['\"])[^'\"]*\\1/, `width='100%'`)\n    .replace(/height=(['\"])[^'\"]*\\1/, `height='100%'`)\n}\n\n/**\n * Core cheminformatics primitive: render a 2D chemical structure from a SMILES\n * string. RDKit's WASM module is loaded lazily on first mount (see\n * {@link loadRDKit}), so pages that never render a molecule pay nothing for it.\n *\n * The output is a vector SVG that fills this component's box — size it with\n * `className` (e.g. `className=\"size-32\"`). Invalid SMILES render a fallback\n * rather than throwing.\n *\n * @example\n * ```tsx\n * <MoleculeStructure smiles=\"CC(=O)Oc1ccccc1C(=O)O\" className=\"size-40\" />\n * ```\n */\nexport function MoleculeStructure({\n  smiles,\n  label,\n  dark,\n  alt,\n  drawOptions,\n  loadingContent,\n  errorContent,\n  onError,\n  className,\n  ...props\n}: MoleculeStructureProps) {\n  const { rdkit, status } = useRDKit()\n  const isDark = useIsDark()\n  const useDark = dark ?? isDark\n\n  const accessibleName = alt ?? label ?? smiles\n  const onErrorRef = React.useRef(onError)\n  React.useEffect(() => {\n    onErrorRef.current = onError\n  })\n\n  // Kept pure: the memo only computes the SVG (or null on a parse failure) and\n  // never has side effects, so a render React discards (concurrent / offscreen)\n  // can't fire onError.\n  const svg = React.useMemo(() => {\n    if (!rdkit) return null\n    const drawn = moleculeToSvg(rdkit, smiles, {\n      width: DRAW_SIZE,\n      height: DRAW_SIZE,\n      dark: useDark,\n      legend: label,\n      drawOptions,\n    })\n    return drawn === null ? null : makeResponsive(drawn)\n  }, [rdkit, smiles, useDark, label, drawOptions])\n\n  const parseFailed = status === \"ready\" && svg === null\n  const failed = status === \"error\" || parseFailed\n\n  // Report a parse failure as an effect keyed on the outcome, so onError fires\n  // once per bad input rather than on every (possibly discarded) render.\n  React.useEffect(() => {\n    if (parseFailed) onErrorRef.current?.(smiles)\n  }, [parseFailed, smiles])\n\n  return (\n    <div\n      data-slot=\"molecule-structure\"\n      className={cn(\"relative flex items-center justify-center\", className)}\n      title={accessibleName}\n      aria-busy={status === \"loading\"}\n      {...props}\n    >\n      {status === \"loading\" &&\n        (loadingContent ?? (\n          <Skeleton\n            role=\"img\"\n            aria-label={`Loading structure: ${accessibleName}`}\n            className=\"size-full rounded-md\"\n          />\n        ))}\n\n      {failed &&\n        (errorContent ?? (\n          <div\n            role=\"img\"\n            aria-label={`Unable to render structure: ${accessibleName}`}\n            className=\"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border p-2 text-center text-muted-foreground\"\n          >\n            <AlertTriangleIcon className=\"size-4 shrink-0\" aria-hidden />\n            <span className=\"text-2xs leading-tight break-all\">\n              Invalid structure\n            </span>\n          </div>\n        ))}\n\n      {status === \"ready\" && svg !== null && (\n        <div\n          // RDKit emits the SVG markup itself; the SMILES is only ever parsed\n          // into a molecule, never echoed into the DOM. The consumer-supplied\n          // `label` is drawn by RDKit as vector glyph paths (not live text), so\n          // it can't carry markup into the DOM either — this is trusted.\n          role=\"img\"\n          aria-label={accessibleName}\n          className=\"size-full [&>svg]:size-full\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["DRAW_SIZE","makeResponsive","svg","MoleculeStructure","smiles","label","dark","alt","drawOptions","loadingContent","errorContent","onError","className","props","rdkit","status","useRDKit","isDark","useIsDark","useDark","accessibleName","onErrorRef","React","drawn","moleculeToSvg","parseFailed","failed","jsxs","cn","jsx","Skeleton","AlertTriangleIcon"],"mappings":"4mBA4CMA,EAAY,IAGlB,SAASC,EAAeC,EAAqB,CAC3C,OAAOA,EACJ,QAAQ,uBAAwB,cAAc,EAC9C,QAAQ,wBAAyB,eAAe,CACrD,CAgBO,SAASC,EAAkB,CAChC,OAAAC,EACA,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAA2B,CACzB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAA,EAAWC,WAAA,EACpBC,EAASC,EAAAA,UAAA,EACTC,EAAUb,GAAQW,EAElBG,EAAiBb,GAAOF,GAASD,EACjCiB,EAAaC,EAAM,OAAOX,CAAO,EACvCW,EAAM,UAAU,IAAM,CACpBD,EAAW,QAAUV,CACvB,CAAC,EAKD,MAAMT,EAAMoB,EAAM,QAAQ,IAAM,CAC9B,GAAI,CAACR,EAAO,OAAO,KACnB,MAAMS,EAAQC,EAAAA,cAAcV,EAAOV,EAAQ,CACzC,MAAOJ,EACP,OAAQA,EACR,KAAMmB,EACN,OAAQd,EACR,YAAAG,CAAA,CACD,EACD,OAAOe,IAAU,KAAO,KAAOtB,EAAesB,CAAK,CACrD,EAAG,CAACT,EAAOV,EAAQe,EAASd,EAAOG,CAAW,CAAC,EAEzCiB,EAAcV,IAAW,SAAWb,IAAQ,KAC5CwB,EAASX,IAAW,SAAWU,EAIrCH,OAAAA,EAAM,UAAU,IAAM,CAChBG,GAAaJ,EAAW,UAAUjB,CAAM,CAC9C,EAAG,CAACqB,EAAarB,CAAM,CAAC,EAGtBuB,EAAAA,KAAC,MAAA,CACC,YAAU,qBACV,UAAWC,EAAAA,GAAG,4CAA6ChB,CAAS,EACpE,MAAOQ,EACP,YAAWL,IAAW,UACrB,GAAGF,EAEH,SAAA,CAAAE,IAAW,YACTN,GACCoB,EAAAA,IAACC,EAAAA,SAAA,CACC,KAAK,MACL,aAAY,sBAAsBV,CAAc,GAChD,UAAU,sBAAA,CAAA,GAIfM,IACEhB,GACCiB,EAAAA,KAAC,MAAA,CACC,KAAK,MACL,aAAY,+BAA+BP,CAAc,GACzD,UAAU,gJAEV,SAAA,CAAAS,EAAAA,IAACE,EAAAA,kBAAA,CAAkB,UAAU,kBAAkB,cAAW,GAAC,EAC3DF,EAAAA,IAAC,OAAA,CAAK,UAAU,mCAAmC,SAAA,mBAAA,CAEnD,CAAA,CAAA,CAAA,GAILd,IAAW,SAAWb,IAAQ,MAC7B2B,EAAAA,IAAC,MAAA,CAKC,KAAK,MACL,aAAYT,EACZ,UAAU,8BACV,wBAAyB,CAAE,OAAQlB,CAAA,CAAI,CAAA,CACzC,CAAA,CAAA,CAIR"}
+{"version":3,"file":"MoleculeStructure.cjs","sources":["../../../../src/components/composed/MoleculeStructure/MoleculeStructure.tsx"],"sourcesContent":["import { AlertTriangleIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { moleculeToSvg } from \"./rdkit-loader\"\nimport { useRDKit } from \"./use-rdkit\"\n\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { useIsDark } from \"@/hooks/use-is-dark\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MoleculeStructureProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\" | \"onError\"> {\n  /** SMILES string to render as a 2D structure. */\n  smiles: string\n  /** Optional caption drawn beneath the structure by RDKit. */\n  label?: string\n  /**\n   * Force dark/light drawing colours. Defaults to following the active theme\n   * (the `.dark` class on the document root).\n   */\n  dark?: boolean\n  /**\n   * Accessible label for the structure. Defaults to the SMILES string.\n   * Rendered as the SVG group's `aria-label` and the wrapper's title.\n   */\n  alt?: string\n  /**\n   * Extra RDKit MolDraw2D options. Pass a stable (memoised or module-level)\n   * reference — a new object each render re-parses the SMILES through RDKit.\n   */\n  drawOptions?: Record<string, unknown>\n  /** Rendered while the WASM module and structure are being prepared. */\n  loadingContent?: React.ReactNode\n  /** Rendered when the SMILES is invalid or RDKit fails to load. */\n  errorContent?: React.ReactNode\n  /** Called once when the SMILES cannot be parsed into a valid molecule. */\n  onError?: (smiles: string) => void\n}\n\n/**\n * Internal draw resolution. The structure is vector and scales to fill the\n * wrapper (see {@link makeResponsive}); a square viewBox keeps it centred in\n * containers of any shape without distortion.\n */\nconst DRAW_SIZE = 300\n\n/** Make an RDKit SVG fluid: fill the wrapper and scale with its aspect ratio. */\nfunction makeResponsive(svg: string): string {\n  return svg\n    .replace(/width=(['\"])[^'\"]*\\1/, `width='100%'`)\n    .replace(/height=(['\"])[^'\"]*\\1/, `height='100%'`)\n}\n\n/**\n * Core cheminformatics primitive: render a 2D chemical structure from a SMILES\n * string. RDKit's WASM module is loaded lazily on first mount (see\n * {@link loadRDKit}), so pages that never render a molecule pay nothing for it.\n *\n * The output is a vector SVG that fills this component's box — size it with\n * `className` (e.g. `className=\"size-32\"`). Invalid SMILES render a fallback\n * rather than throwing.\n *\n * @example\n * ```tsx\n * <MoleculeStructure smiles=\"CC(=O)Oc1ccccc1C(=O)O\" className=\"size-40\" />\n * ```\n */\nexport function MoleculeStructure({\n  smiles,\n  label,\n  dark,\n  alt,\n  drawOptions,\n  loadingContent,\n  errorContent,\n  onError,\n  className,\n  ...props\n}: MoleculeStructureProps) {\n  const { rdkit, status } = useRDKit()\n  const isDark = useIsDark()\n  const useDark = dark ?? isDark\n\n  const accessibleName = alt ?? label ?? smiles\n  const onErrorRef = React.useRef(onError)\n  React.useEffect(() => {\n    onErrorRef.current = onError\n  })\n\n  // Kept pure: the memo only computes the SVG (or null on a parse failure) and\n  // never has side effects, so a render React discards (concurrent / offscreen)\n  // can't fire onError.\n  const svg = React.useMemo(() => {\n    if (!rdkit) return null\n    const drawn = moleculeToSvg(rdkit, smiles, {\n      width: DRAW_SIZE,\n      height: DRAW_SIZE,\n      dark: useDark,\n      legend: label,\n      drawOptions,\n    })\n    return drawn === null ? null : makeResponsive(drawn)\n  }, [rdkit, smiles, useDark, label, drawOptions])\n\n  const parseFailed = status === \"ready\" && svg === null\n  const failed = status === \"error\" || parseFailed\n\n  // Report a parse failure as an effect keyed on the outcome, so onError fires\n  // once per bad input rather than on every (possibly discarded) render.\n  React.useEffect(() => {\n    if (parseFailed) onErrorRef.current?.(smiles)\n  }, [parseFailed, smiles])\n\n  return (\n    <div\n      data-slot=\"molecule-structure\"\n      className={cn(\"relative flex items-center justify-center\", className)}\n      title={accessibleName}\n      aria-busy={status === \"loading\"}\n      {...props}\n    >\n      {status === \"loading\" &&\n        (loadingContent ?? (\n          <Skeleton\n            role=\"img\"\n            aria-label={`Loading structure: ${accessibleName}`}\n            className=\"size-full rounded-md\"\n          />\n        ))}\n\n      {failed &&\n        (errorContent ?? (\n          <div\n            role=\"img\"\n            aria-label={`Unable to render structure: ${accessibleName}`}\n            className=\"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border p-2 text-center text-muted-foreground\"\n          >\n            <AlertTriangleIcon className=\"size-4 shrink-0\" aria-hidden />\n            <span className=\"text-2xs leading-tight break-all\">\n              Invalid structure\n            </span>\n          </div>\n        ))}\n\n      {status === \"ready\" && svg !== null && (\n        <div\n          // RDKit emits the SVG markup itself; the SMILES is only ever parsed\n          // into a molecule, never echoed into the DOM. The consumer-supplied\n          // `label` is drawn by RDKit as vector glyph paths (not live text), so\n          // it can't carry markup into the DOM either — this is trusted.\n          role=\"img\"\n          aria-label={accessibleName}\n          className=\"size-full [&>svg]:size-full\"\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":["DRAW_SIZE","makeResponsive","svg","MoleculeStructure","smiles","label","dark","alt","drawOptions","loadingContent","errorContent","onError","className","props","rdkit","status","useRDKit","isDark","useIsDark","useDark","accessibleName","onErrorRef","React","drawn","moleculeToSvg","parseFailed","failed","jsxs","cn","jsx","Skeleton","AlertTriangleIcon"],"mappings":"+mBA4CMA,EAAY,IAGlB,SAASC,EAAeC,EAAqB,CAC3C,OAAOA,EACJ,QAAQ,uBAAwB,cAAc,EAC9C,QAAQ,wBAAyB,eAAe,CACrD,CAgBO,SAASC,EAAkB,CAChC,OAAAC,EACA,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAA2B,CACzB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAA,EAAWC,WAAA,EACpBC,EAASC,EAAAA,UAAA,EACTC,EAAUb,GAAQW,EAElBG,EAAiBb,GAAOF,GAASD,EACjCiB,EAAaC,EAAM,OAAOX,CAAO,EACvCW,EAAM,UAAU,IAAM,CACpBD,EAAW,QAAUV,CACvB,CAAC,EAKD,MAAMT,EAAMoB,EAAM,QAAQ,IAAM,CAC9B,GAAI,CAACR,EAAO,OAAO,KACnB,MAAMS,EAAQC,EAAAA,cAAcV,EAAOV,EAAQ,CACzC,MAAOJ,EACP,OAAQA,EACR,KAAMmB,EACN,OAAQd,EACR,YAAAG,CAAA,CACD,EACD,OAAOe,IAAU,KAAO,KAAOtB,EAAesB,CAAK,CACrD,EAAG,CAACT,EAAOV,EAAQe,EAASd,EAAOG,CAAW,CAAC,EAEzCiB,EAAcV,IAAW,SAAWb,IAAQ,KAC5CwB,EAASX,IAAW,SAAWU,EAIrCH,OAAAA,EAAM,UAAU,IAAM,CAChBG,GAAaJ,EAAW,UAAUjB,CAAM,CAC9C,EAAG,CAACqB,EAAarB,CAAM,CAAC,EAGtBuB,EAAAA,KAAC,MAAA,CACC,YAAU,qBACV,UAAWC,EAAAA,GAAG,4CAA6ChB,CAAS,EACpE,MAAOQ,EACP,YAAWL,IAAW,UACrB,GAAGF,EAEH,SAAA,CAAAE,IAAW,YACTN,GACCoB,EAAAA,IAACC,EAAAA,SAAA,CACC,KAAK,MACL,aAAY,sBAAsBV,CAAc,GAChD,UAAU,sBAAA,CAAA,GAIfM,IACEhB,GACCiB,EAAAA,KAAC,MAAA,CACC,KAAK,MACL,aAAY,+BAA+BP,CAAc,GACzD,UAAU,gJAEV,SAAA,CAAAS,EAAAA,IAACE,EAAAA,kBAAA,CAAkB,UAAU,kBAAkB,cAAW,GAAC,EAC3DF,EAAAA,IAAC,OAAA,CAAK,UAAU,mCAAmC,SAAA,mBAAA,CAEnD,CAAA,CAAA,CAAA,GAILd,IAAW,SAAWb,IAAQ,MAC7B2B,EAAAA,IAAC,MAAA,CAKC,KAAK,MACL,aAAYT,EACZ,UAAU,8BACV,wBAAyB,CAAE,OAAQlB,CAAA,CAAI,CAAA,CACzC,CAAA,CAAA,CAIR"}

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+export interface MoleculeStructureProps extends Omit<React.ComponentProps<"div">, "children" | "onError"> {
+    /** SMILES string to render as a 2D structure. */
+    smiles: string;
+    /** Optional caption drawn beneath the structure by RDKit. */
+    label?: string;
+    /**
+     * Force dark/light drawing colours. Defaults to following the active theme
+     * (the `.dark` class on the document root).
+     */
+    dark?: boolean;
+    /**
+     * Accessible label for the structure. Defaults to the SMILES string.
+     * Rendered as the SVG group's `aria-label` and the wrapper's title.
+     */
+    alt?: string;
+    /**
+     * Extra RDKit MolDraw2D options. Pass a stable (memoised or module-level)
+     * reference — a new object each render re-parses the SMILES through RDKit.
+     */
+    drawOptions?: Record<string, unknown>;
+    /** Rendered while the WASM module and structure are being prepared. */
+    loadingContent?: React.ReactNode;
+    /** Rendered when the SMILES is invalid or RDKit fails to load. */
+    errorContent?: React.ReactNode;
+    /** Called once when the SMILES cannot be parsed into a valid molecule. */
+    onError?: (smiles: string) => void;
+}
+/**
+ * Core cheminformatics primitive: render a 2D chemical structure from a SMILES
+ * string. RDKit's WASM module is loaded lazily on first mount (see
+ * {@link loadRDKit}), so pages that never render a molecule pay nothing for it.
+ *
+ * The output is a vector SVG that fills this component's box — size it with
+ * `className` (e.g. `className="size-32"`). Invalid SMILES render a fallback
+ * rather than throwing.
+ *
+ * @example
+ * ```tsx
+ * <MoleculeStructure smiles="CC(=O)Oc1ccccc1C(=O)O" className="size-40" />
+ * ```
+ */
+export declare function MoleculeStructure({ smiles, label, dark, alt, drawOptions, loadingContent, errorContent, onError, className, ...props }: MoleculeStructureProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/composed/MoleculeStructure/MoleculeStructure.js

@@ -3,7 +3,7 @@ import { AlertTriangleIcon as z } from "lucide-react";
 import * as a from "react";
 import { moleculeToSvg as D } from "./rdkit-loader.js";
 import { useRDKit as I } from "./use-rdkit.js";
-import { Skeleton as S } from "../../ui/skeleton.js";
+import { Skeleton as S } from "../../../ui/skeleton.js";
 import { useIsDark as j } from "../../../hooks/use-is-dark.js";
 import { cn as w } from "../../../lib/utils.js";
 const h = 300;

package/dist/components/composed/MoleculeStructure/index.d.ts

@@ -0,0 +1,3 @@
+export { MoleculeStructure, type MoleculeStructureProps } from './MoleculeStructure';
+export { useRDKit, type RDKitStatus, type UseRDKitResult } from './use-rdkit';
+export { loadRDKit, configureRDKit, moleculeToSvg, type RDKitLoaderConfig, type MoleculeSvgOptions, } from './rdkit-loader';

package/dist/components/composed/MoleculeStructure/rdkit-loader.cjs

@@ -1,2 +1,2 @@
-"use strict";var m=Object.create;var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var R=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of y(t))!b.call(e,r)&&r!==n&&u(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var D=(e,t,n)=>(n=e!=null?m(w(e)):{},R(t||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={};function K(e){i||Object.assign(o,e)}let i=null;async function h(){const e=await import("@rdkit/rdkit");return e.default??e}function _(){return o.instance?Promise.resolve(o.instance):i||(i=(async()=>{if(typeof window>"u"||typeof document>"u")throw new Error("RDKit can only be loaded in a browser environment");let e;try{e=await(o.importFactory??h)()}catch(t){const n=t instanceof Error?` (${t.message})`:"";throw new Error(`Failed to load @rdkit/rdkit${n}. Install it as a dependency to render molecule structures: \`yarn add @rdkit/rdkit\`.`)}return e({...o.wasmSrc?{locateFile:()=>o.wasmSrc}:{},print:t=>console.debug("[RDKit]",t),printErr:t=>console.debug("[RDKit]",t)})})(),i.catch(()=>{i=null}),i)}function E(e,t,n={}){const{width:c=250,height:r=200,dark:d=!1,legend:s,drawOptions:f}=n,l=e.get_mol(t);if(!l)return null;try{if(!l.is_valid())return null;const g={width:c,height:r,backgroundColour:[0,0,0,0],...s?{legend:s}:{},...d?{atomColourPalette:v}:{},...f};return l.get_svg_with_highlights(JSON.stringify(g)).replace(/^\s*<\?xml[^>]*\?>\s*/i,"")}finally{l.delete()}}const a=255;function O(e){return[parseInt(e.slice(1,3),16)/a,parseInt(e.slice(3,5),16)/a,parseInt(e.slice(5,7),16)/a]}const T={"-1":"#e5e5e5",6:"#e5e5e5",7:"#75a1ff",8:"#ff7575",9:"#8ceb99",15:"#ff9e59",16:"#f2cc59",17:"#8ceb99",35:"#e69e73",53:"#c499f2"},v=Object.fromEntries(Object.entries(T).map(([e,t])=>[e,O(t)]));exports.configureRDKit=K;exports.loadRDKit=_;exports.moleculeToSvg=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const o={};function m(e){r||Object.assign(o,e)}let r=null;async function b(){const e=await Promise.resolve().then(()=>g(require("@rdkit/rdkit")));return e.default??e}function p(){return o.instance?Promise.resolve(o.instance):r||(r=(async()=>{if(typeof window>"u"||typeof document>"u")throw new Error("RDKit can only be loaded in a browser environment");let e;try{e=await(o.importFactory??b)()}catch(t){const n=t instanceof Error?` (${t.message})`:"";throw new Error(`Failed to load @rdkit/rdkit${n}. Install it as a dependency to render molecule structures: \`yarn add @rdkit/rdkit\`.`)}return e({...o.wasmSrc?{locateFile:()=>o.wasmSrc}:{},print:t=>console.debug("[RDKit]",t),printErr:t=>console.debug("[RDKit]",t)})})(),r.catch(()=>{r=null}),r)}function y(e,t,n={}){const{width:i=250,height:s=200,dark:u=!1,legend:a,drawOptions:d}=n,c=e.get_mol(t);if(!c)return null;try{if(!c.is_valid())return null;const f={width:i,height:s,backgroundColour:[0,0,0,0],...a?{legend:a}:{},...u?{atomColourPalette:O}:{},...d};return c.get_svg_with_highlights(JSON.stringify(f)).replace(/^\s*<\?xml[^>]*\?>\s*/i,"")}finally{c.delete()}}const l=255;function w(e){return[parseInt(e.slice(1,3),16)/l,parseInt(e.slice(3,5),16)/l,parseInt(e.slice(5,7),16)/l]}const D={"-1":"#e5e5e5",6:"#e5e5e5",7:"#75a1ff",8:"#ff7575",9:"#8ceb99",15:"#ff9e59",16:"#f2cc59",17:"#8ceb99",35:"#e69e73",53:"#c499f2"},O=Object.fromEntries(Object.entries(D).map(([e,t])=>[e,w(t)]));exports.configureRDKit=m;exports.loadRDKit=p;exports.moleculeToSvg=y;
 //# sourceMappingURL=rdkit-loader.cjs.map

package/dist/components/composed/MoleculeStructure/rdkit-loader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rdkit-loader.cjs","sources":["../../../../src/components/composed/MoleculeStructure/rdkit-loader.ts"],"sourcesContent":["import type { RDKitModule } from \"@rdkit/rdkit\"\n\n/**\n * Loader for the RDKit.js WebAssembly module.\n *\n * RDKit ships a ~6.6 MB `.wasm` blob, so it must never be part of the main\n * bundle. It is loaded lazily, once per page, the first time a molecule\n * actually needs rendering.\n *\n * **Air-gapped by default, no CDN.** The loader dynamically imports the\n * `@rdkit/rdkit` package the consumer has installed — nothing is fetched from a\n * public CDN. Molecule rendering is opt-in: `@rdkit/rdkit` is an optional\n * peer dependency, so a consumer that never renders a structure needn't install\n * it, and one that does simply adds it to their own dependencies.\n *\n * **Bundled apps should set `wasmSrc`.** Without it, RDKit resolves\n * `RDKit_minimal.wasm` relative to the glue script, which a bundler (Vite,\n * webpack, …) usually does not emit next to the output — so the fetch 404s at\n * runtime and the first molecule silently fails to load. Copy the WASM into a\n * served path (or resolve it via your bundler, e.g. Vite's `?url`) and pass it\n * to {@link configureRDKit} once at startup. Alternatively hand the loader a\n * module you initialised yourself (`instance`).\n *\n * @see https://www.rdkitjs.com\n */\n\n/** The `initRDKitModule` factory exported by `@rdkit/rdkit`. */\ntype RDKitFactory = (options?: {\n  locateFile?: () => string\n  print?: (msg: string) => void\n  printErr?: (msg: string) => void\n}) => Promise<RDKitModule>\n\n/** Options controlling how the RDKit module is located and loaded. */\nexport interface RDKitLoaderConfig {\n  /**\n   * URL of the `RDKit_minimal.wasm` binary, passed to RDKit as `locateFile`.\n   * Set this when your bundler doesn't serve the WASM next to the glue script\n   * (e.g. copy it into your app's public dir and point here). When omitted,\n   * RDKit's own default resolution is used.\n   */\n  wasmSrc?: string\n  /**\n   * A module already initialised by the consumer (e.g. shared with other parts\n   * of the app). When provided, no import or network work is done.\n   */\n  instance?: RDKitModule\n  /**\n   * Override how the `initRDKitModule` factory is obtained. Defaults to\n   * `import(\"@rdkit/rdkit\")`. Provide this only for unusual setups (custom\n   * bundler resolution, a vendored copy, etc.).\n   */\n  importFactory?: () => Promise<RDKitFactory>\n}\n\nconst defaultConfig: RDKitLoaderConfig = {}\n\n/**\n * Set process-wide defaults for how RDKit is loaded. Call once, before the\n * first molecule renders — typically at app startup. Later calls are ignored\n * once loading has begun.\n *\n * Bundled apps should set `wasmSrc` — see the module doc above for why.\n *\n * @example\n * ```ts\n * // Serve the WASM yourself (e.g. copied into /public) — no CDN, air-gapped.\n * configureRDKit({ wasmSrc: \"/assets/RDKit_minimal.wasm\" })\n * // …or resolve it from the installed package via your bundler (Vite):\n * import wasmSrc from \"@rdkit/rdkit/dist/RDKit_minimal.wasm?url\"\n * configureRDKit({ wasmSrc })\n * ```\n */\nexport function configureRDKit(config: RDKitLoaderConfig): void {\n  if (loadPromise) return\n  Object.assign(defaultConfig, config)\n}\n\nlet loadPromise: Promise<RDKitModule> | null = null\n\n/** Dynamically import the installed `@rdkit/rdkit` and return its factory. */\nasync function importRDKitFactory(): Promise<RDKitFactory> {\n  const mod = (await import(\"@rdkit/rdkit\")) as unknown as {\n    default?: RDKitFactory\n  } & RDKitFactory\n  // The package exports the factory as both `module.exports` and `.default`.\n  return mod.default ?? (mod as RDKitFactory)\n}\n\n/**\n * Load and initialise the RDKit module, memoised so the WASM is fetched and\n * compiled only once per page. Safe to call from many components concurrently;\n * they all await the same promise.\n *\n * @throws if run outside a browser, if `@rdkit/rdkit` isn't installed, or if\n * the WASM cannot be loaded.\n */\nexport function loadRDKit(): Promise<RDKitModule> {\n  if (defaultConfig.instance) {\n    return Promise.resolve(defaultConfig.instance)\n  }\n  if (loadPromise) return loadPromise\n\n  loadPromise = (async () => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n      throw new Error(\"RDKit can only be loaded in a browser environment\")\n    }\n\n    let initRDKitModule: RDKitFactory\n    try {\n      initRDKitModule = await (defaultConfig.importFactory ?? importRDKitFactory)()\n    } catch (cause) {\n      const detail = cause instanceof Error ? ` (${cause.message})` : \"\"\n      throw new Error(\n        `Failed to load @rdkit/rdkit${detail}. Install it as a dependency to ` +\n          \"render molecule structures: `yarn add @rdkit/rdkit`.\",\n      )\n    }\n\n    // RDKit is an Emscripten module: its C++ stdout/stderr (including the noisy\n    // \"SMILES Parse Error\" it emits for invalid input we handle gracefully)\n    // flow through `print`/`printErr`, which default to console.log/error.\n    // Route them to console.debug so a bad SMILES never spams the host app's\n    // console — invalid input is surfaced through the renderer's fallback UI.\n    return initRDKitModule({\n      ...(defaultConfig.wasmSrc\n        ? { locateFile: () => defaultConfig.wasmSrc as string }\n        : {}),\n      print: (msg: string) => console.debug(\"[RDKit]\", msg),\n      printErr: (msg: string) => console.debug(\"[RDKit]\", msg),\n    })\n  })()\n\n  // Let a failed attempt be retried on the next call rather than caching the\n  // rejection forever.\n  loadPromise.catch(() => {\n    loadPromise = null\n  })\n\n  return loadPromise\n}\n\n/** Drawing options for {@link moleculeToSvg}. */\nexport interface MoleculeSvgOptions {\n  /** Rendered width in pixels. @default 250 */\n  width?: number\n  /** Rendered height in pixels. @default 200 */\n  height?: number\n  /** Lighten carbons/bonds so the structure is legible on dark surfaces. */\n  dark?: boolean\n  /** Optional caption drawn beneath the structure by RDKit. */\n  legend?: string\n  /**\n   * Extra RDKit MolDraw2D options, merged last. See\n   * https://www.rdkitjs.com/#drawing-molecules-all-options\n   */\n  drawOptions?: Record<string, unknown>\n}\n\n/**\n * Render a SMILES string to an SVG string using an initialised RDKit module.\n * Returns `null` when the SMILES cannot be parsed. Frees the underlying C++\n * molecule before returning, so callers never need to.\n *\n * Synchronous by design so it can feed render callbacks that must return a\n * string (e.g. the interactive scatter's `tooltip.content`) — load RDKit ahead\n * of time with {@link loadRDKit} or {@link useRDKit}, then call this.\n */\nexport function moleculeToSvg(\n  rdkit: RDKitModule,\n  smiles: string,\n  options: MoleculeSvgOptions = {},\n): string | null {\n  const { width = 250, height = 200, dark = false, legend, drawOptions } = options\n\n  const mol = rdkit.get_mol(smiles)\n  if (!mol) return null\n\n  try {\n    if (!mol.is_valid()) return null\n\n    const details: Record<string, unknown> = {\n      width,\n      height,\n      // Transparent background so the structure sits on the kit's surface\n      // tokens in both light and dark mode.\n      backgroundColour: [0, 0, 0, 0],\n      ...(legend ? { legend } : {}),\n      ...(dark ? { atomColourPalette: DARK_ATOM_PALETTE } : {}),\n      ...drawOptions,\n    }\n\n    // RDKit prefixes an XML prolog (`<?xml …?>`) which is invalid inside inline\n    // HTML; strip it so the SVG embeds cleanly whether injected via\n    // dangerouslySetInnerHTML or dropped into a chart tooltip string.\n    return mol\n      .get_svg_with_highlights(JSON.stringify(details))\n      .replace(/^\\s*<\\?xml[^>]*\\?>\\s*/i, \"\")\n  } finally {\n    mol.delete()\n  }\n}\n\nconst RGB_MAX = 255\n\n/** Parse a `#rrggbb` string into RDKit's 0–1 RGB triple. */\nfunction hexToRgb01(hex: string): [number, number, number] {\n  return [\n    parseInt(hex.slice(1, 3), 16) / RGB_MAX,\n    parseInt(hex.slice(3, 5), 16) / RGB_MAX,\n    parseInt(hex.slice(5, 7), 16) / RGB_MAX,\n  ]\n}\n\n/**\n * Atom colours for dark surfaces. RDKit's stock CPK palette (dark blue N, etc.)\n * is too dim on a dark background, so carbons/default are lightened and the\n * common heteroatoms shifted to brighter, higher-contrast hues. Keys are atomic\n * numbers; `-1` is the default for anything unlisted.\n */\nconst DARK_ATOM_HEX: Record<string, string> = {\n  \"-1\": \"#e5e5e5\", // default (carbon skeleton)\n  \"6\": \"#e5e5e5\", // C\n  \"7\": \"#75a1ff\", // N — soft blue (was hard-to-read dark blue)\n  \"8\": \"#ff7575\", // O — soft red\n  \"9\": \"#8ceb99\", // F\n  \"15\": \"#ff9e59\", // P\n  \"16\": \"#f2cc59\", // S\n  \"17\": \"#8ceb99\", // Cl\n  \"35\": \"#e69e73\", // Br\n  \"53\": \"#c499f2\", // I\n}\n\nconst DARK_ATOM_PALETTE = Object.fromEntries(\n  Object.entries(DARK_ATOM_HEX).map(([key, hex]) => [key, hexToRgb01(hex)]),\n) as Record<string, [number, number, number]>\n"],"names":["defaultConfig","configureRDKit","config","loadPromise","importRDKitFactory","mod","loadRDKit","initRDKitModule","cause","detail","msg","moleculeToSvg","rdkit","smiles","options","width","height","dark","legend","drawOptions","mol","details","DARK_ATOM_PALETTE","RGB_MAX","hexToRgb01","hex","DARK_ATOM_HEX","key"],"mappings":"2hBAuDA,MAAMA,EAAmC,CAAA,EAkBlC,SAASC,EAAeC,EAAiC,CAC1DC,GACJ,OAAO,OAAOH,EAAeE,CAAM,CACrC,CAEA,IAAIC,EAA2C,KAG/C,eAAeC,GAA4C,CACzD,MAAMC,EAAO,KAAM,QAAO,cAAc,EAIxC,OAAOA,EAAI,SAAYA,CACzB,CAUO,SAASC,GAAkC,CAChD,OAAIN,EAAc,SACT,QAAQ,QAAQA,EAAc,QAAQ,EAE3CG,IAEJA,GAAe,SAAY,CACzB,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IACvD,MAAM,IAAI,MAAM,mDAAmD,EAGrE,IAAII,EACJ,GAAI,CACFA,EAAkB,MAAOP,EAAc,eAAiBI,GAAA,CAC1D,OAASI,EAAO,CACd,MAAMC,EAASD,aAAiB,MAAQ,KAAKA,EAAM,OAAO,IAAM,GAChE,MAAM,IAAI,MACR,8BAA8BC,CAAM,wFAAA,CAGxC,CAOA,OAAOF,EAAgB,CACrB,GAAIP,EAAc,QACd,CAAE,WAAY,IAAMA,EAAc,OAAA,EAClC,CAAA,EACJ,MAAQU,GAAgB,QAAQ,MAAM,UAAWA,CAAG,EACpD,SAAWA,GAAgB,QAAQ,MAAM,UAAWA,CAAG,CAAA,CACxD,CACH,GAAA,EAIAP,EAAY,MAAM,IAAM,CACtBA,EAAc,IAChB,CAAC,EAEMA,EACT,CA4BO,SAASQ,EACdC,EACAC,EACAC,EAA8B,CAAA,EACf,CACf,KAAM,CAAE,MAAAC,EAAQ,IAAK,OAAAC,EAAS,IAAK,KAAAC,EAAO,GAAO,OAAAC,EAAQ,YAAAC,CAAA,EAAgBL,EAEnEM,EAAMR,EAAM,QAAQC,CAAM,EAChC,GAAI,CAACO,EAAK,OAAO,KAEjB,GAAI,CACF,GAAI,CAACA,EAAI,SAAA,EAAY,OAAO,KAE5B,MAAMC,EAAmC,CACvC,MAAAN,EACA,OAAAC,EAGA,iBAAkB,CAAC,EAAG,EAAG,EAAG,CAAC,EAC7B,GAAIE,EAAS,CAAE,OAAAA,CAAA,EAAW,CAAA,EAC1B,GAAID,EAAO,CAAE,kBAAmBK,CAAA,EAAsB,CAAA,EACtD,GAAGH,CAAA,EAML,OAAOC,EACJ,wBAAwB,KAAK,UAAUC,CAAO,CAAC,EAC/C,QAAQ,yBAA0B,EAAE,CACzC,QAAA,CACED,EAAI,OAAA,CACN,CACF,CAEA,MAAMG,EAAU,IAGhB,SAASC,EAAWC,EAAuC,CACzD,MAAO,CACL,SAASA,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,EAChC,SAASE,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,EAChC,SAASE,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,CAAA,CAEpC,CAQA,MAAMG,EAAwC,CAC5C,KAAM,UACN,EAAK,UACL,EAAK,UACL,EAAK,UACL,EAAK,UACL,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,SACR,EAEMJ,EAAoB,OAAO,YAC/B,OAAO,QAAQI,CAAa,EAAE,IAAI,CAAC,CAACC,EAAKF,CAAG,IAAM,CAACE,EAAKH,EAAWC,CAAG,CAAC,CAAC,CAC1E"}
+{"version":3,"file":"rdkit-loader.cjs","sources":["../../../../src/components/composed/MoleculeStructure/rdkit-loader.ts"],"sourcesContent":["import type { RDKitModule } from \"@rdkit/rdkit\"\n\n/**\n * Loader for the RDKit.js WebAssembly module.\n *\n * RDKit ships a ~6.6 MB `.wasm` blob, so it must never be part of the main\n * bundle. It is loaded lazily, once per page, the first time a molecule\n * actually needs rendering.\n *\n * **Air-gapped by default, no CDN.** The loader dynamically imports the\n * `@rdkit/rdkit` package the consumer has installed — nothing is fetched from a\n * public CDN. Molecule rendering is opt-in: `@rdkit/rdkit` is an optional\n * peer dependency, so a consumer that never renders a structure needn't install\n * it, and one that does simply adds it to their own dependencies.\n *\n * **Bundled apps should set `wasmSrc`.** Without it, RDKit resolves\n * `RDKit_minimal.wasm` relative to the glue script, which a bundler (Vite,\n * webpack, …) usually does not emit next to the output — so the fetch 404s at\n * runtime and the first molecule silently fails to load. Copy the WASM into a\n * served path (or resolve it via your bundler, e.g. Vite's `?url`) and pass it\n * to {@link configureRDKit} once at startup. Alternatively hand the loader a\n * module you initialised yourself (`instance`).\n *\n * @see https://www.rdkitjs.com\n */\n\n/** The `initRDKitModule` factory exported by `@rdkit/rdkit`. */\ntype RDKitFactory = (options?: {\n  locateFile?: () => string\n  print?: (msg: string) => void\n  printErr?: (msg: string) => void\n}) => Promise<RDKitModule>\n\n/** Options controlling how the RDKit module is located and loaded. */\nexport interface RDKitLoaderConfig {\n  /**\n   * URL of the `RDKit_minimal.wasm` binary, passed to RDKit as `locateFile`.\n   * Set this when your bundler doesn't serve the WASM next to the glue script\n   * (e.g. copy it into your app's public dir and point here). When omitted,\n   * RDKit's own default resolution is used.\n   */\n  wasmSrc?: string\n  /**\n   * A module already initialised by the consumer (e.g. shared with other parts\n   * of the app). When provided, no import or network work is done.\n   */\n  instance?: RDKitModule\n  /**\n   * Override how the `initRDKitModule` factory is obtained. Defaults to\n   * `import(\"@rdkit/rdkit\")`. Provide this only for unusual setups (custom\n   * bundler resolution, a vendored copy, etc.).\n   */\n  importFactory?: () => Promise<RDKitFactory>\n}\n\nconst defaultConfig: RDKitLoaderConfig = {}\n\n/**\n * Set process-wide defaults for how RDKit is loaded. Call once, before the\n * first molecule renders — typically at app startup. Later calls are ignored\n * once loading has begun.\n *\n * Bundled apps should set `wasmSrc` — see the module doc above for why.\n *\n * @example\n * ```ts\n * // Serve the WASM yourself (e.g. copied into /public) — no CDN, air-gapped.\n * configureRDKit({ wasmSrc: \"/assets/RDKit_minimal.wasm\" })\n * // …or resolve it from the installed package via your bundler (Vite):\n * import wasmSrc from \"@rdkit/rdkit/dist/RDKit_minimal.wasm?url\"\n * configureRDKit({ wasmSrc })\n * ```\n */\nexport function configureRDKit(config: RDKitLoaderConfig): void {\n  if (loadPromise) return\n  Object.assign(defaultConfig, config)\n}\n\nlet loadPromise: Promise<RDKitModule> | null = null\n\n/** Dynamically import the installed `@rdkit/rdkit` and return its factory. */\nasync function importRDKitFactory(): Promise<RDKitFactory> {\n  const mod = (await import(\"@rdkit/rdkit\")) as unknown as {\n    default?: RDKitFactory\n  } & RDKitFactory\n  // The package exports the factory as both `module.exports` and `.default`.\n  return mod.default ?? (mod as RDKitFactory)\n}\n\n/**\n * Load and initialise the RDKit module, memoised so the WASM is fetched and\n * compiled only once per page. Safe to call from many components concurrently;\n * they all await the same promise.\n *\n * @throws if run outside a browser, if `@rdkit/rdkit` isn't installed, or if\n * the WASM cannot be loaded.\n */\nexport function loadRDKit(): Promise<RDKitModule> {\n  if (defaultConfig.instance) {\n    return Promise.resolve(defaultConfig.instance)\n  }\n  if (loadPromise) return loadPromise\n\n  loadPromise = (async () => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n      throw new Error(\"RDKit can only be loaded in a browser environment\")\n    }\n\n    let initRDKitModule: RDKitFactory\n    try {\n      initRDKitModule = await (defaultConfig.importFactory ?? importRDKitFactory)()\n    } catch (cause) {\n      const detail = cause instanceof Error ? ` (${cause.message})` : \"\"\n      throw new Error(\n        `Failed to load @rdkit/rdkit${detail}. Install it as a dependency to ` +\n          \"render molecule structures: `yarn add @rdkit/rdkit`.\",\n      )\n    }\n\n    // RDKit is an Emscripten module: its C++ stdout/stderr (including the noisy\n    // \"SMILES Parse Error\" it emits for invalid input we handle gracefully)\n    // flow through `print`/`printErr`, which default to console.log/error.\n    // Route them to console.debug so a bad SMILES never spams the host app's\n    // console — invalid input is surfaced through the renderer's fallback UI.\n    return initRDKitModule({\n      ...(defaultConfig.wasmSrc\n        ? { locateFile: () => defaultConfig.wasmSrc as string }\n        : {}),\n      print: (msg: string) => console.debug(\"[RDKit]\", msg),\n      printErr: (msg: string) => console.debug(\"[RDKit]\", msg),\n    })\n  })()\n\n  // Let a failed attempt be retried on the next call rather than caching the\n  // rejection forever.\n  loadPromise.catch(() => {\n    loadPromise = null\n  })\n\n  return loadPromise\n}\n\n/** Drawing options for {@link moleculeToSvg}. */\nexport interface MoleculeSvgOptions {\n  /** Rendered width in pixels. @default 250 */\n  width?: number\n  /** Rendered height in pixels. @default 200 */\n  height?: number\n  /** Lighten carbons/bonds so the structure is legible on dark surfaces. */\n  dark?: boolean\n  /** Optional caption drawn beneath the structure by RDKit. */\n  legend?: string\n  /**\n   * Extra RDKit MolDraw2D options, merged last. See\n   * https://www.rdkitjs.com/#drawing-molecules-all-options\n   */\n  drawOptions?: Record<string, unknown>\n}\n\n/**\n * Render a SMILES string to an SVG string using an initialised RDKit module.\n * Returns `null` when the SMILES cannot be parsed. Frees the underlying C++\n * molecule before returning, so callers never need to.\n *\n * Synchronous by design so it can feed render callbacks that must return a\n * string (e.g. the interactive scatter's `tooltip.content`) — load RDKit ahead\n * of time with {@link loadRDKit} or {@link useRDKit}, then call this.\n */\nexport function moleculeToSvg(\n  rdkit: RDKitModule,\n  smiles: string,\n  options: MoleculeSvgOptions = {},\n): string | null {\n  const { width = 250, height = 200, dark = false, legend, drawOptions } = options\n\n  const mol = rdkit.get_mol(smiles)\n  if (!mol) return null\n\n  try {\n    if (!mol.is_valid()) return null\n\n    const details: Record<string, unknown> = {\n      width,\n      height,\n      // Transparent background so the structure sits on the kit's surface\n      // tokens in both light and dark mode.\n      backgroundColour: [0, 0, 0, 0],\n      ...(legend ? { legend } : {}),\n      ...(dark ? { atomColourPalette: DARK_ATOM_PALETTE } : {}),\n      ...drawOptions,\n    }\n\n    // RDKit prefixes an XML prolog (`<?xml …?>`) which is invalid inside inline\n    // HTML; strip it so the SVG embeds cleanly whether injected via\n    // dangerouslySetInnerHTML or dropped into a chart tooltip string.\n    return mol\n      .get_svg_with_highlights(JSON.stringify(details))\n      .replace(/^\\s*<\\?xml[^>]*\\?>\\s*/i, \"\")\n  } finally {\n    mol.delete()\n  }\n}\n\nconst RGB_MAX = 255\n\n/** Parse a `#rrggbb` string into RDKit's 0–1 RGB triple. */\nfunction hexToRgb01(hex: string): [number, number, number] {\n  return [\n    parseInt(hex.slice(1, 3), 16) / RGB_MAX,\n    parseInt(hex.slice(3, 5), 16) / RGB_MAX,\n    parseInt(hex.slice(5, 7), 16) / RGB_MAX,\n  ]\n}\n\n/**\n * Atom colours for dark surfaces. RDKit's stock CPK palette (dark blue N, etc.)\n * is too dim on a dark background, so carbons/default are lightened and the\n * common heteroatoms shifted to brighter, higher-contrast hues. Keys are atomic\n * numbers; `-1` is the default for anything unlisted.\n */\nconst DARK_ATOM_HEX: Record<string, string> = {\n  \"-1\": \"#e5e5e5\", // default (carbon skeleton)\n  \"6\": \"#e5e5e5\", // C\n  \"7\": \"#75a1ff\", // N — soft blue (was hard-to-read dark blue)\n  \"8\": \"#ff7575\", // O — soft red\n  \"9\": \"#8ceb99\", // F\n  \"15\": \"#ff9e59\", // P\n  \"16\": \"#f2cc59\", // S\n  \"17\": \"#8ceb99\", // Cl\n  \"35\": \"#e69e73\", // Br\n  \"53\": \"#c499f2\", // I\n}\n\nconst DARK_ATOM_PALETTE = Object.fromEntries(\n  Object.entries(DARK_ATOM_HEX).map(([key, hex]) => [key, hexToRgb01(hex)]),\n) as Record<string, [number, number, number]>\n"],"names":["defaultConfig","configureRDKit","config","loadPromise","importRDKitFactory","mod","_interopNamespaceDefault","loadRDKit","initRDKitModule","cause","detail","msg","moleculeToSvg","rdkit","smiles","options","width","height","dark","legend","drawOptions","mol","details","DARK_ATOM_PALETTE","RGB_MAX","hexToRgb01","hex","DARK_ATOM_HEX","key"],"mappings":"6VAuDA,MAAMA,EAAmC,CAAA,EAkBlC,SAASC,EAAeC,EAAiC,CAC1DC,GACJ,OAAO,OAAOH,EAAeE,CAAM,CACrC,CAEA,IAAIC,EAA2C,KAG/C,eAAeC,GAA4C,CACzD,MAAMC,EAAO,MAAM,QAAA,QAAA,EAAA,KAAA,IAAAC,EAAA,QAAO,cAAc,CAAA,CAAA,EAIxC,OAAOD,EAAI,SAAYA,CACzB,CAUO,SAASE,GAAkC,CAChD,OAAIP,EAAc,SACT,QAAQ,QAAQA,EAAc,QAAQ,EAE3CG,IAEJA,GAAe,SAAY,CACzB,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IACvD,MAAM,IAAI,MAAM,mDAAmD,EAGrE,IAAIK,EACJ,GAAI,CACFA,EAAkB,MAAOR,EAAc,eAAiBI,GAAA,CAC1D,OAASK,EAAO,CACd,MAAMC,EAASD,aAAiB,MAAQ,KAAKA,EAAM,OAAO,IAAM,GAChE,MAAM,IAAI,MACR,8BAA8BC,CAAM,wFAAA,CAGxC,CAOA,OAAOF,EAAgB,CACrB,GAAIR,EAAc,QACd,CAAE,WAAY,IAAMA,EAAc,OAAA,EAClC,CAAA,EACJ,MAAQW,GAAgB,QAAQ,MAAM,UAAWA,CAAG,EACpD,SAAWA,GAAgB,QAAQ,MAAM,UAAWA,CAAG,CAAA,CACxD,CACH,GAAA,EAIAR,EAAY,MAAM,IAAM,CACtBA,EAAc,IAChB,CAAC,EAEMA,EACT,CA4BO,SAASS,EACdC,EACAC,EACAC,EAA8B,CAAA,EACf,CACf,KAAM,CAAE,MAAAC,EAAQ,IAAK,OAAAC,EAAS,IAAK,KAAAC,EAAO,GAAO,OAAAC,EAAQ,YAAAC,CAAA,EAAgBL,EAEnEM,EAAMR,EAAM,QAAQC,CAAM,EAChC,GAAI,CAACO,EAAK,OAAO,KAEjB,GAAI,CACF,GAAI,CAACA,EAAI,SAAA,EAAY,OAAO,KAE5B,MAAMC,EAAmC,CACvC,MAAAN,EACA,OAAAC,EAGA,iBAAkB,CAAC,EAAG,EAAG,EAAG,CAAC,EAC7B,GAAIE,EAAS,CAAE,OAAAA,CAAA,EAAW,CAAA,EAC1B,GAAID,EAAO,CAAE,kBAAmBK,CAAA,EAAsB,CAAA,EACtD,GAAGH,CAAA,EAML,OAAOC,EACJ,wBAAwB,KAAK,UAAUC,CAAO,CAAC,EAC/C,QAAQ,yBAA0B,EAAE,CACzC,QAAA,CACED,EAAI,OAAA,CACN,CACF,CAEA,MAAMG,EAAU,IAGhB,SAASC,EAAWC,EAAuC,CACzD,MAAO,CACL,SAASA,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,EAChC,SAASE,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,EAChC,SAASE,EAAI,MAAM,EAAG,CAAC,EAAG,EAAE,EAAIF,CAAA,CAEpC,CAQA,MAAMG,EAAwC,CAC5C,KAAM,UACN,EAAK,UACL,EAAK,UACL,EAAK,UACL,EAAK,UACL,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,UACN,GAAM,SACR,EAEMJ,EAAoB,OAAO,YAC/B,OAAO,QAAQI,CAAa,EAAE,IAAI,CAAC,CAACC,EAAKF,CAAG,IAAM,CAACE,EAAKH,EAAWC,CAAG,CAAC,CAAC,CAC1E"}