@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.108.1 → 0.7.0-beta.128.1

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

@@ -0,0 +1,364 @@
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import { cva as R } from "class-variance-authority";
+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 { cn as i } from "../../../lib/utils.js";
+const I = R("shrink-0", {
+  variants: {
+    orientation: {
+      /** Collapsible left panel; collapses to an icon-only rail */
+      vertical: "flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden",
+      /** Wizard/stepper row rendered above the main content */
+      horizontal: "flex flex-row items-center min-w-0"
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+}), C = R(
+  "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",
+        /** Icon-only row in the collapsed rail */
+        rail: "flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0",
+        // ring-inset — the steps row is an overflow-x-auto scroll container,
+        // which would clip an outset ring at the row's edges
+        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 Y(d) {
+  return d.flatMap((l) => [l, ...l.steps ?? []]);
+}
+function Z(d, l, o) {
+  return d.status ? d.status : o < 0 ? "todo" : l === o ? "active" : l < o ? "done" : "todo";
+}
+function N({
+  step: d,
+  status: l,
+  className: o
+}) {
+  const c = d.icon;
+  return l === "done" ? /* @__PURE__ */ a(E, { className: i("w-4 h-4 text-positive", o) }) : c ? /* @__PURE__ */ a(
+    c,
+    {
+      className: i(
+        "w-4 h-4",
+        l === "active" ? "text-primary" : "text-muted-foreground",
+        o
+      )
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(
+        "w-2.5 h-2.5 rounded-full",
+        l === "active" ? "bg-primary" : "bg-muted-foreground/40",
+        o
+      )
+    }
+  );
+}
+function ie({
+  orientation: d,
+  steps: l,
+  activeKey: o,
+  onSelect: c,
+  title: k,
+  collapsible: u = !1,
+  collapsed: g,
+  defaultCollapsed: A = !1,
+  onCollapsedChange: O,
+  className: b,
+  ...h
+}) {
+  const x = d ?? "vertical", m = P(), z = g === void 0 && m != null && m.hideNavOnCollapse, [$, B] = S.useState(A), V = g ?? (z ? m.collapsed : $), f = (e) => {
+    g === void 0 && (z ? m.setCollapsed(e) : B(e)), O?.(e);
+  }, s = Y(l), y = new Map(s.map((e, t) => [e.id, t])), D = o == null ? -1 : y.get(o) ?? -1, w = (e) => Z(e, y.get(e.id) ?? -1, D), p = (e) => {
+    e.disabled || c?.(e.id, e);
+  };
+  if (x === "vertical" && V)
+    return /* @__PURE__ */ a(
+      "nav",
+      {
+        "data-slot": "data-app-shell-secondary-nav",
+        "data-orientation": "vertical",
+        "data-collapsed": "true",
+        className: i(
+          "flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border",
+          b
+        ),
+        ...h,
+        children: /* @__PURE__ */ n(Q, { children: [
+          /* @__PURE__ */ a("div", { className: "flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border", children: /* @__PURE__ */ a(
+            v,
+            {
+              "data-slot": "data-app-shell-secondary-nav-toggle",
+              direction: "right",
+              label: "Expand",
+              onClick: () => f(!1)
+            }
+          ) }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              "data-slot": "data-app-shell-secondary-nav-items",
+              className: "flex flex-col overflow-y-auto",
+              children: s.map((e) => {
+                const t = w(e);
+                return /* @__PURE__ */ n(U, { children: [
+                  /* @__PURE__ */ a(W, { asChild: !0, children: /* @__PURE__ */ a(
+                    "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: i(
+                        C({ orientation: "rail", status: t }),
+                        e.disabled && "opacity-45 cursor-not-allowed"
+                      ),
+                      onClick: () => p(e),
+                      children: /* @__PURE__ */ a(N, { step: e, status: t })
+                    }
+                  ) }),
+                  /* @__PURE__ */ a(X, { side: "right", children: e.disabled ? e.disabledReason ?? e.label : e.label })
+                ] }, e.id);
+              })
+            }
+          )
+        ] })
+      }
+    );
+  if (x === "horizontal" && u && V) {
+    const e = o == null ? void 0 : s.find((t) => t.id === o);
+    return /* @__PURE__ */ n(
+      "nav",
+      {
+        "data-slot": "data-app-shell-secondary-nav",
+        "data-orientation": "horizontal",
+        "data-collapsed": "true",
+        className: i("flex items-center gap-1.5 min-w-0", b),
+        ...h,
+        children: [
+          /* @__PURE__ */ n(
+            q,
+            {
+              value: o,
+              onValueChange: (t) => {
+                const r = s.find((F) => F.id === t);
+                r && p(r);
+              },
+              children: [
+                /* @__PURE__ */ a(
+                  G,
+                  {
+                    "data-slot": "data-app-shell-secondary-nav-step-select",
+                    size: "sm",
+                    "aria-label": "Current step",
+                    className: "h-7 min-w-0",
+                    children: /* @__PURE__ */ a(H, { placeholder: "Select step", children: e ? `Step ${(y.get(e.id) ?? 0) + 1} · ${e.label}` : "Select step" })
+                  }
+                ),
+                /* @__PURE__ */ a(J, { children: s.map((t, r) => /* @__PURE__ */ a(L, { value: t.id, disabled: t.disabled, children: `Step ${r + 1} · ${t.label}` }, t.id)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            v,
+            {
+              "data-slot": "data-app-shell-secondary-nav-toggle",
+              direction: "down",
+              label: "Show steps",
+              tooltipSide: "bottom",
+              onClick: () => f(!1)
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (x === "horizontal")
+    return /* @__PURE__ */ n(
+      "nav",
+      {
+        "data-slot": "data-app-shell-secondary-nav",
+        "data-orientation": "horizontal",
+        "data-collapsed": "false",
+        className: i(I({ orientation: "horizontal" }), b),
+        ...h,
+        children: [
+          /* @__PURE__ */ a(
+            "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: s.map((e, t) => {
+                const r = w(e);
+                return /* @__PURE__ */ n(S.Fragment, { children: [
+                  t > 0 && /* @__PURE__ */ a(M, { "aria-hidden": "true", className: "w-4 h-4 shrink-0 text-muted-foreground/50" }),
+                  /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "data-app-shell-secondary-nav-item",
+                      "data-status": r,
+                      "aria-current": r === "active" ? "step" : void 0,
+                      title: e.disabled ? e.disabledReason ?? e.label : void 0,
+                      className: i(
+                        C({ orientation: "horizontal", status: r })
+                      ),
+                      onClick: () => p(e),
+                      disabled: e.disabled,
+                      children: [
+                        /* @__PURE__ */ a(N, { step: e, status: r, className: "shrink-0" }),
+                        /* @__PURE__ */ a("span", { children: e.label }),
+                        e.badge != null && /* @__PURE__ */ a(j, { variant: "secondary", className: "h-4 px-1.5 text-[10px]", children: e.badge })
+                      ]
+                    }
+                  )
+                ] }, e.id);
+              })
+            }
+          ),
+          u && /* @__PURE__ */ a(
+            v,
+            {
+              "data-slot": "data-app-shell-secondary-nav-toggle",
+              direction: "up",
+              label: "Collapse steps",
+              tooltipSide: "bottom",
+              className: "ml-2",
+              onClick: () => f(!0)
+            }
+          )
+        ]
+      }
+    );
+  const T = (e, t) => {
+    const r = w(e);
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        "data-slot": "data-app-shell-secondary-nav-item",
+        "data-status": r,
+        "aria-current": r === "active" ? "step" : void 0,
+        title: e.disabled ? e.disabledReason ?? e.label : void 0,
+        className: i(
+          C({ orientation: "vertical", status: r }),
+          t && "pl-8"
+        ),
+        onClick: () => p(e),
+        disabled: e.disabled,
+        children: [
+          /* @__PURE__ */ a("span", { className: "flex items-center justify-center w-6 h-6 shrink-0", children: /* @__PURE__ */ a(N, { step: e, status: r }) }),
+          /* @__PURE__ */ a("span", { className: i("text-sm truncate min-w-0", r === "todo" && "font-light"), children: e.label }),
+          e.badge != null && /* @__PURE__ */ a(j, { variant: "secondary", className: "ml-auto h-4 px-1.5 text-[10px]", children: e.badge })
+        ]
+      },
+      e.id
+    );
+  };
+  return /* @__PURE__ */ n(
+    "nav",
+    {
+      "data-slot": "data-app-shell-secondary-nav",
+      "data-orientation": "vertical",
+      "data-collapsed": "false",
+      className: i(
+        I({ orientation: "vertical" }),
+        "w-[180px]",
+        b
+      ),
+      ...h,
+      children: [
+        (k != null || u) && /* @__PURE__ */ n(
+          "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: [
+              /* @__PURE__ */ a("span", { className: "flex-1 truncate", children: k }),
+              u && /* @__PURE__ */ a(
+                v,
+                {
+                  "data-slot": "data-app-shell-secondary-nav-toggle",
+                  direction: "left",
+                  label: "Collapse",
+                  onClick: () => f(!0)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "data-slot": "data-app-shell-secondary-nav-items",
+            className: "flex flex-col overflow-y-auto",
+            children: l.map((e) => /* @__PURE__ */ n(S.Fragment, { children: [
+              T(e, !1),
+              e.steps?.map((t) => T(t, !0))
+            ] }, e.id))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ie as DataAppShellSecondaryNav,
+  C as dataAppShellSecondaryNavItemVariants,
+  I as dataAppShellSecondaryNavVariants
+};
+//# sourceMappingURL=SecondaryNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNav.js","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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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const r=p(u),a=r.createContext(null);function c({value:e,children:t}){return l.jsx(a.Provider,{value:e,children:t})}function i(){const e=r.useContext(a);if(!e)throw new Error("useDataAppShell must be used within a DataAppShell");return e}function s(){return r.useContext(a)}exports.DataAppShellProvider=c;exports.useDataAppShell=i;exports.useOptionalDataAppShell=s;
+//# sourceMappingURL=ShellContext.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellContext.cjs","sources":["../../../../src/components/composed/DataAppShell/ShellContext.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// =============================================================================\n// ShellContext — the AppShell publishes layout state; zone children consume it\n// =============================================================================\n\nexport type DataAppShellNavVariant = \"vertical\" | \"horizontal\";\n\nexport interface DataAppShellContextValue {\n  /** Which axis the primary nav renders on. */\n  navVariant: DataAppShellNavVariant;\n  /** The shell's single collapse state — primary + secondary collapse together. */\n  collapsed: boolean;\n  /** Flip the shell collapse state (no-op when the shell is not collapsible). */\n  setCollapsed: (collapsed: boolean) => void;\n  /** When true, collapsing hides the primary rail so one icon rail remains. */\n  hideNavOnCollapse: boolean;\n}\n\nconst DataAppShellContext = React.createContext<DataAppShellContextValue | null>(null);\n\nexport function DataAppShellProvider({\n  value,\n  children,\n}: {\n  value: DataAppShellContextValue;\n  children: React.ReactNode;\n}) {\n  return <DataAppShellContext.Provider value={value}>{children}</DataAppShellContext.Provider>;\n}\n\n/** Shell layout state; throws outside a `DataAppShell`. */\nexport function useDataAppShell(): DataAppShellContextValue {\n  const ctx = React.useContext(DataAppShellContext);\n  if (!ctx) throw new Error(\"useDataAppShell must be used within a DataAppShell\");\n  return ctx;\n}\n\n/** Shell layout state, or `null` when rendered outside a `DataAppShell`. */\nexport function useOptionalDataAppShell(): DataAppShellContextValue | null {\n  return React.useContext(DataAppShellContext);\n}\n"],"names":["DataAppShellContext","React","DataAppShellProvider","value","children","jsx","useDataAppShell","ctx","useOptionalDataAppShell"],"mappings":"kaAqBMA,EAAsBC,EAAM,cAA+C,IAAI,EAE9E,SAASC,EAAqB,CACnC,MAAAC,EACA,SAAAC,CACF,EAGG,CACD,OAAOC,EAAAA,IAACL,EAAoB,SAApB,CAA6B,MAAAG,EAAe,SAAAC,CAAA,CAAS,CAC/D,CAGO,SAASE,GAA4C,CAC1D,MAAMC,EAAMN,EAAM,WAAWD,CAAmB,EAChD,GAAI,CAACO,EAAK,MAAM,IAAI,MAAM,oDAAoD,EAC9E,OAAOA,CACT,CAGO,SAASC,GAA2D,CACzE,OAAOP,EAAM,WAAWD,CAAmB,CAC7C"}

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

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "react";
+const r = e.createContext(null);
+function p({
+  value: t,
+  children: n
+}) {
+  return /* @__PURE__ */ o(r.Provider, { value: t, children: n });
+}
+function l() {
+  const t = e.useContext(r);
+  if (!t) throw new Error("useDataAppShell must be used within a DataAppShell");
+  return t;
+}
+function u() {
+  return e.useContext(r);
+}
+export {
+  p as DataAppShellProvider,
+  l as useDataAppShell,
+  u as useOptionalDataAppShell
+};
+//# sourceMappingURL=ShellContext.js.map

package/dist/components/composed/DataAppShell/ShellContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellContext.js","sources":["../../../../src/components/composed/DataAppShell/ShellContext.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// =============================================================================\n// ShellContext — the AppShell publishes layout state; zone children consume it\n// =============================================================================\n\nexport type DataAppShellNavVariant = \"vertical\" | \"horizontal\";\n\nexport interface DataAppShellContextValue {\n  /** Which axis the primary nav renders on. */\n  navVariant: DataAppShellNavVariant;\n  /** The shell's single collapse state — primary + secondary collapse together. */\n  collapsed: boolean;\n  /** Flip the shell collapse state (no-op when the shell is not collapsible). */\n  setCollapsed: (collapsed: boolean) => void;\n  /** When true, collapsing hides the primary rail so one icon rail remains. */\n  hideNavOnCollapse: boolean;\n}\n\nconst DataAppShellContext = React.createContext<DataAppShellContextValue | null>(null);\n\nexport function DataAppShellProvider({\n  value,\n  children,\n}: {\n  value: DataAppShellContextValue;\n  children: React.ReactNode;\n}) {\n  return <DataAppShellContext.Provider value={value}>{children}</DataAppShellContext.Provider>;\n}\n\n/** Shell layout state; throws outside a `DataAppShell`. */\nexport function useDataAppShell(): DataAppShellContextValue {\n  const ctx = React.useContext(DataAppShellContext);\n  if (!ctx) throw new Error(\"useDataAppShell must be used within a DataAppShell\");\n  return ctx;\n}\n\n/** Shell layout state, or `null` when rendered outside a `DataAppShell`. */\nexport function useOptionalDataAppShell(): DataAppShellContextValue | null {\n  return React.useContext(DataAppShellContext);\n}\n"],"names":["DataAppShellContext","React","DataAppShellProvider","value","children","jsx","useDataAppShell","ctx","useOptionalDataAppShell"],"mappings":";;AAqBA,MAAMA,IAAsBC,EAAM,cAA+C,IAAI;AAE9E,SAASC,EAAqB;AAAA,EACnC,OAAAC;AAAA,EACA,UAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACL,EAAoB,UAApB,EAA6B,OAAAG,GAAe,UAAAC,EAAA,CAAS;AAC/D;AAGO,SAASE,IAA4C;AAC1D,QAAMC,IAAMN,EAAM,WAAWD,CAAmB;AAChD,MAAI,CAACO,EAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAOA;AACT;AAGO,SAASC,IAA2D;AACzE,SAAOP,EAAM,WAAWD,CAAmB;AAC7C;"}

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

@@ -0,0 +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;
+//# sourceMappingURL=MoleculeStructure.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,87 @@
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+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 { useIsDark as j } from "../../../hooks/use-is-dark.js";
+import { cn as w } from "../../../lib/utils.js";
+const h = 300;
+function E(e) {
+  return e.replace(/width=(['"])[^'"]*\1/, "width='100%'").replace(/height=(['"])[^'"]*\1/, "height='100%'");
+}
+function H({
+  smiles: e,
+  label: n,
+  dark: p,
+  alt: x,
+  drawOptions: u,
+  loadingContent: b,
+  errorContent: k,
+  onError: c,
+  className: v,
+  ...N
+}) {
+  const { rdkit: o, status: r } = I(), y = j(), d = p ?? y, t = x ?? n ?? e, m = a.useRef(c);
+  a.useEffect(() => {
+    m.current = c;
+  });
+  const s = a.useMemo(() => {
+    if (!o) return null;
+    const f = D(o, e, {
+      width: h,
+      height: h,
+      dark: d,
+      legend: n,
+      drawOptions: u
+    });
+    return f === null ? null : E(f);
+  }, [o, e, d, n, u]), i = r === "ready" && s === null, R = r === "error" || i;
+  return a.useEffect(() => {
+    i && m.current?.(e);
+  }, [i, e]), /* @__PURE__ */ g(
+    "div",
+    {
+      "data-slot": "molecule-structure",
+      className: w("relative flex items-center justify-center", v),
+      title: t,
+      "aria-busy": r === "loading",
+      ...N,
+      children: [
+        r === "loading" && (b ?? /* @__PURE__ */ l(
+          S,
+          {
+            role: "img",
+            "aria-label": `Loading structure: ${t}`,
+            className: "size-full rounded-md"
+          }
+        )),
+        R && (k ?? /* @__PURE__ */ g(
+          "div",
+          {
+            role: "img",
+            "aria-label": `Unable to render structure: ${t}`,
+            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: [
+              /* @__PURE__ */ l(z, { className: "size-4 shrink-0", "aria-hidden": !0 }),
+              /* @__PURE__ */ l("span", { className: "text-2xs leading-tight break-all", children: "Invalid structure" })
+            ]
+          }
+        )),
+        r === "ready" && s !== null && /* @__PURE__ */ l(
+          "div",
+          {
+            role: "img",
+            "aria-label": t,
+            className: "size-full [&>svg]:size-full",
+            dangerouslySetInnerHTML: { __html: s }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as MoleculeStructure
+};
+//# sourceMappingURL=MoleculeStructure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoleculeStructure.js","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":";;;;;;;;AA4CA,MAAMA,IAAY;AAGlB,SAASC,EAAeC,GAAqB;AAC3C,SAAOA,EACJ,QAAQ,wBAAwB,cAAc,EAC9C,QAAQ,yBAAyB,eAAe;AACrD;AAgBO,SAASC,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA2B;AACzB,QAAM,EAAE,OAAAC,GAAO,QAAAC,EAAA,IAAWC,EAAA,GACpBC,IAASC,EAAA,GACTC,IAAUb,KAAQW,GAElBG,IAAiBb,KAAOF,KAASD,GACjCiB,IAAaC,EAAM,OAAOX,CAAO;AACvC,EAAAW,EAAM,UAAU,MAAM;AACpB,IAAAD,EAAW,UAAUV;AAAA,EACvB,CAAC;AAKD,QAAMT,IAAMoB,EAAM,QAAQ,MAAM;AAC9B,QAAI,CAACR,EAAO,QAAO;AACnB,UAAMS,IAAQC,EAAcV,GAAOV,GAAQ;AAAA,MACzC,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,MAAMmB;AAAA,MACN,QAAQd;AAAA,MACR,aAAAG;AAAA,IAAA,CACD;AACD,WAAOe,MAAU,OAAO,OAAOtB,EAAesB,CAAK;AAAA,EACrD,GAAG,CAACT,GAAOV,GAAQe,GAASd,GAAOG,CAAW,CAAC,GAEzCiB,IAAcV,MAAW,WAAWb,MAAQ,MAC5CwB,IAASX,MAAW,WAAWU;AAIrC,SAAAH,EAAM,UAAU,MAAM;AACpB,IAAIG,KAAaJ,EAAW,UAAUjB,CAAM;AAAA,EAC9C,GAAG,CAACqB,GAAarB,CAAM,CAAC,GAGtB,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,6CAA6ChB,CAAS;AAAA,MACpE,OAAOQ;AAAA,MACP,aAAWL,MAAW;AAAA,MACrB,GAAGF;AAAA,MAEH,UAAA;AAAA,QAAAE,MAAW,cACTN,KACC,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,sBAAsBV,CAAc;AAAA,YAChD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAIfM,MACEhB,KACC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,+BAA+BP,CAAc;AAAA,YACzD,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAS,EAACE,GAAA,EAAkB,WAAU,mBAAkB,eAAW,IAAC;AAAA,cAC3D,gBAAAF,EAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,oBAAA,CAEnD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAILd,MAAW,WAAWb,MAAQ,QAC7B,gBAAA2B;AAAA,UAAC;AAAA,UAAA;AAAA,YAKC,MAAK;AAAA,YACL,cAAYT;AAAA,YACZ,WAAU;AAAA,YACV,yBAAyB,EAAE,QAAQlB,EAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +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;
+//# sourceMappingURL=rdkit-loader.cjs.map