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

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"),_=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

@@ -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":"+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

@@ -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/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

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

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

package/dist/components/composed/MoleculeStructure/rdkit-loader.d.ts

@@ -0,0 +1,104 @@
+import { RDKitModule } from '@rdkit/rdkit';
+/**
+ * Loader for the RDKit.js WebAssembly module.
+ *
+ * RDKit ships a ~6.6 MB `.wasm` blob, so it must never be part of the main
+ * bundle. It is loaded lazily, once per page, the first time a molecule
+ * actually needs rendering.
+ *
+ * **Air-gapped by default, no CDN.** The loader dynamically imports the
+ * `@rdkit/rdkit` package the consumer has installed — nothing is fetched from a
+ * public CDN. Molecule rendering is opt-in: `@rdkit/rdkit` is an optional
+ * peer dependency, so a consumer that never renders a structure needn't install
+ * it, and one that does simply adds it to their own dependencies.
+ *
+ * **Bundled apps should set `wasmSrc`.** Without it, RDKit resolves
+ * `RDKit_minimal.wasm` relative to the glue script, which a bundler (Vite,
+ * webpack, …) usually does not emit next to the output — so the fetch 404s at
+ * runtime and the first molecule silently fails to load. Copy the WASM into a
+ * served path (or resolve it via your bundler, e.g. Vite's `?url`) and pass it
+ * to {@link configureRDKit} once at startup. Alternatively hand the loader a
+ * module you initialised yourself (`instance`).
+ *
+ * @see https://www.rdkitjs.com
+ */
+/** The `initRDKitModule` factory exported by `@rdkit/rdkit`. */
+type RDKitFactory = (options?: {
+    locateFile?: () => string;
+    print?: (msg: string) => void;
+    printErr?: (msg: string) => void;
+}) => Promise<RDKitModule>;
+/** Options controlling how the RDKit module is located and loaded. */
+export interface RDKitLoaderConfig {
+    /**
+     * URL of the `RDKit_minimal.wasm` binary, passed to RDKit as `locateFile`.
+     * Set this when your bundler doesn't serve the WASM next to the glue script
+     * (e.g. copy it into your app's public dir and point here). When omitted,
+     * RDKit's own default resolution is used.
+     */
+    wasmSrc?: string;
+    /**
+     * A module already initialised by the consumer (e.g. shared with other parts
+     * of the app). When provided, no import or network work is done.
+     */
+    instance?: RDKitModule;
+    /**
+     * Override how the `initRDKitModule` factory is obtained. Defaults to
+     * `import("@rdkit/rdkit")`. Provide this only for unusual setups (custom
+     * bundler resolution, a vendored copy, etc.).
+     */
+    importFactory?: () => Promise<RDKitFactory>;
+}
+/**
+ * Set process-wide defaults for how RDKit is loaded. Call once, before the
+ * first molecule renders — typically at app startup. Later calls are ignored
+ * once loading has begun.
+ *
+ * Bundled apps should set `wasmSrc` — see the module doc above for why.
+ *
+ * @example
+ * ```ts
+ * // Serve the WASM yourself (e.g. copied into /public) — no CDN, air-gapped.
+ * configureRDKit({ wasmSrc: "/assets/RDKit_minimal.wasm" })
+ * // …or resolve it from the installed package via your bundler (Vite):
+ * import wasmSrc from "@rdkit/rdkit/dist/RDKit_minimal.wasm?url"
+ * configureRDKit({ wasmSrc })
+ * ```
+ */
+export declare function configureRDKit(config: RDKitLoaderConfig): void;
+/**
+ * Load and initialise the RDKit module, memoised so the WASM is fetched and
+ * compiled only once per page. Safe to call from many components concurrently;
+ * they all await the same promise.
+ *
+ * @throws if run outside a browser, if `@rdkit/rdkit` isn't installed, or if
+ * the WASM cannot be loaded.
+ */
+export declare function loadRDKit(): Promise<RDKitModule>;
+/** Drawing options for {@link moleculeToSvg}. */
+export interface MoleculeSvgOptions {
+    /** Rendered width in pixels. @default 250 */
+    width?: number;
+    /** Rendered height in pixels. @default 200 */
+    height?: number;
+    /** Lighten carbons/bonds so the structure is legible on dark surfaces. */
+    dark?: boolean;
+    /** Optional caption drawn beneath the structure by RDKit. */
+    legend?: string;
+    /**
+     * Extra RDKit MolDraw2D options, merged last. See
+     * https://www.rdkitjs.com/#drawing-molecules-all-options
+     */
+    drawOptions?: Record<string, unknown>;
+}
+/**
+ * Render a SMILES string to an SVG string using an initialised RDKit module.
+ * Returns `null` when the SMILES cannot be parsed. Frees the underlying C++
+ * molecule before returning, so callers never need to.
+ *
+ * Synchronous by design so it can feed render callbacks that must return a
+ * string (e.g. the interactive scatter's `tooltip.content`) — load RDKit ahead
+ * of time with {@link loadRDKit} or {@link useRDKit}, then call this.
+ */
+export declare function moleculeToSvg(rdkit: RDKitModule, smiles: string, options?: MoleculeSvgOptions): string | null;
+export {};

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

@@ -0,0 +1,89 @@
+const r = {};
+function y(e) {
+  n || Object.assign(r, e);
+}
+let n = null;
+async function m() {
+  const e = await import("@rdkit/rdkit");
+  return e.default ?? e;
+}
+function b() {
+  return r.instance ? Promise.resolve(r.instance) : n || (n = (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 (r.importFactory ?? m)();
+    } catch (t) {
+      const o = t instanceof Error ? ` (${t.message})` : "";
+      throw new Error(
+        `Failed to load @rdkit/rdkit${o}. Install it as a dependency to render molecule structures: \`yarn add @rdkit/rdkit\`.`
+      );
+    }
+    return e({
+      ...r.wasmSrc ? { locateFile: () => r.wasmSrc } : {},
+      print: (t) => console.debug("[RDKit]", t),
+      printErr: (t) => console.debug("[RDKit]", t)
+    });
+  })(), n.catch(() => {
+    n = null;
+  }), n);
+}
+function R(e, t, o = {}) {
+  const { width: l = 250, height: s = 200, dark: d = !1, legend: a, drawOptions: u } = o, i = e.get_mol(t);
+  if (!i) return null;
+  try {
+    if (!i.is_valid()) return null;
+    const f = {
+      width: l,
+      height: s,
+      // Transparent background so the structure sits on the kit's surface
+      // tokens in both light and dark mode.
+      backgroundColour: [0, 0, 0, 0],
+      ...a ? { legend: a } : {},
+      ...d ? { atomColourPalette: w } : {},
+      ...u
+    };
+    return i.get_svg_with_highlights(JSON.stringify(f)).replace(/^\s*<\?xml[^>]*\?>\s*/i, "");
+  } finally {
+    i.delete();
+  }
+}
+const c = 255;
+function g(e) {
+  return [
+    parseInt(e.slice(1, 3), 16) / c,
+    parseInt(e.slice(3, 5), 16) / c,
+    parseInt(e.slice(5, 7), 16) / c
+  ];
+}
+const p = {
+  "-1": "#e5e5e5",
+  // default (carbon skeleton)
+  6: "#e5e5e5",
+  // C
+  7: "#75a1ff",
+  // N — soft blue (was hard-to-read dark blue)
+  8: "#ff7575",
+  // O — soft red
+  9: "#8ceb99",
+  // F
+  15: "#ff9e59",
+  // P
+  16: "#f2cc59",
+  // S
+  17: "#8ceb99",
+  // Cl
+  35: "#e69e73",
+  // Br
+  53: "#c499f2"
+  // I
+}, w = Object.fromEntries(
+  Object.entries(p).map(([e, t]) => [e, g(t)])
+);
+export {
+  y as configureRDKit,
+  b as loadRDKit,
+  R as moleculeToSvg
+};
+//# sourceMappingURL=rdkit-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rdkit-loader.js","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":"AAuDA,MAAMA,IAAmC,CAAA;AAkBlC,SAASC,EAAeC,GAAiC;AAC9D,EAAIC,KACJ,OAAO,OAAOH,GAAeE,CAAM;AACrC;AAEA,IAAIC,IAA2C;AAG/C,eAAeC,IAA4C;AACzD,QAAMC,IAAO,MAAM,OAAO,cAAc;AAIxC,SAAOA,EAAI,WAAYA;AACzB;AAUO,SAASC,IAAkC;AAChD,SAAIN,EAAc,WACT,QAAQ,QAAQA,EAAc,QAAQ,IAE3CG,MAEJA,KAAe,YAAY;AACzB,QAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AACvD,YAAM,IAAI,MAAM,mDAAmD;AAGrE,QAAII;AACJ,QAAI;AACF,MAAAA,IAAkB,OAAOP,EAAc,iBAAiBI,GAAA;AAAA,IAC1D,SAASI,GAAO;AACd,YAAMC,IAASD,aAAiB,QAAQ,KAAKA,EAAM,OAAO,MAAM;AAChE,YAAM,IAAI;AAAA,QACR,8BAA8BC,CAAM;AAAA,MAAA;AAAA,IAGxC;AAOA,WAAOF,EAAgB;AAAA,MACrB,GAAIP,EAAc,UACd,EAAE,YAAY,MAAMA,EAAc,QAAA,IAClC,CAAA;AAAA,MACJ,OAAO,CAACU,MAAgB,QAAQ,MAAM,WAAWA,CAAG;AAAA,MACpD,UAAU,CAACA,MAAgB,QAAQ,MAAM,WAAWA,CAAG;AAAA,IAAA,CACxD;AAAA,EACH,GAAA,GAIAP,EAAY,MAAM,MAAM;AACtB,IAAAA,IAAc;AAAA,EAChB,CAAC,GAEMA;AACT;AA4BO,SAASQ,EACdC,GACAC,GACAC,IAA8B,CAAA,GACf;AACf,QAAM,EAAE,OAAAC,IAAQ,KAAK,QAAAC,IAAS,KAAK,MAAAC,IAAO,IAAO,QAAAC,GAAQ,aAAAC,EAAA,IAAgBL,GAEnEM,IAAMR,EAAM,QAAQC,CAAM;AAChC,MAAI,CAACO,EAAK,QAAO;AAEjB,MAAI;AACF,QAAI,CAACA,EAAI,SAAA,EAAY,QAAO;AAE5B,UAAMC,IAAmC;AAAA,MACvC,OAAAN;AAAA,MACA,QAAAC;AAAA;AAAA;AAAA,MAGA,kBAAkB,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC7B,GAAIE,IAAS,EAAE,QAAAA,EAAA,IAAW,CAAA;AAAA,MAC1B,GAAID,IAAO,EAAE,mBAAmBK,EAAA,IAAsB,CAAA;AAAA,MACtD,GAAGH;AAAA,IAAA;AAML,WAAOC,EACJ,wBAAwB,KAAK,UAAUC,CAAO,CAAC,EAC/C,QAAQ,0BAA0B,EAAE;AAAA,EACzC,UAAA;AACE,IAAAD,EAAI,OAAA;AAAA,EACN;AACF;AAEA,MAAMG,IAAU;AAGhB,SAASC,EAAWC,GAAuC;AACzD,SAAO;AAAA,IACL,SAASA,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAIF;AAAA,IAChC,SAASE,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAIF;AAAA,IAChC,SAASE,EAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAIF;AAAA,EAAA;AAEpC;AAQA,MAAMG,IAAwC;AAAA,EAC5C,MAAM;AAAA;AAAA,EACN,GAAK;AAAA;AAAA,EACL,GAAK;AAAA;AAAA,EACL,GAAK;AAAA;AAAA,EACL,GAAK;AAAA;AAAA,EACL,IAAM;AAAA;AAAA,EACN,IAAM;AAAA;AAAA,EACN,IAAM;AAAA;AAAA,EACN,IAAM;AAAA;AAAA,EACN,IAAM;AAAA;AACR,GAEMJ,IAAoB,OAAO;AAAA,EAC/B,OAAO,QAAQI,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKF,CAAG,MAAM,CAACE,GAAKH,EAAWC,CAAG,CAAC,CAAC;AAC1E;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),c=require("./rdkit-loader.cjs");function l(){const[o,s]=e.useState(null),[u,n]=e.useState("loading"),[i,a]=e.useState(null);return e.useEffect(()=>{let r=!1;return c.loadRDKit().then(t=>{r||(s(t),n("ready"))}).catch(t=>{r||(a(t instanceof Error?t:new Error(String(t))),n("error"))}),()=>{r=!0}},[]),{rdkit:o,status:u,error:i}}exports.useRDKit=l;
+//# sourceMappingURL=use-rdkit.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-rdkit.cjs","sources":["../../../../src/components/composed/MoleculeStructure/use-rdkit.ts"],"sourcesContent":["import { useEffect, useState } from \"react\"\n\nimport { loadRDKit } from \"./rdkit-loader\"\n\nimport type { RDKitModule } from \"@rdkit/rdkit\"\n\n/** Lifecycle of the lazily-loaded RDKit module. */\nexport type RDKitStatus = \"loading\" | \"ready\" | \"error\"\n\nexport interface UseRDKitResult {\n  /** The initialised module, or `null` until it is ready. */\n  rdkit: RDKitModule | null\n  status: RDKitStatus\n  /** The load failure, if `status` is `\"error\"`. */\n  error: Error | null\n}\n\n/**\n * Lazily load the RDKit WASM module and track its status. The module is a\n * page-wide singleton, so mounting many molecule components triggers only one\n * download.\n *\n * Use this when you need RDKit available synchronously inside a callback — for\n * example feeding the interactive scatter's `tooltip.content`, which must\n * return a string. For a single structure, prefer the `MoleculeStructure`\n * component, which wraps this hook.\n *\n * @example\n * ```tsx\n * const { rdkit, status } = useRDKit()\n * // ...\n * content: (point) =>\n *   rdkit ? moleculeToSvg(rdkit, point.meta.smiles) ?? \"\" : \"Loading…\"\n * ```\n */\nexport function useRDKit(): UseRDKitResult {\n  const [rdkit, setRdkit] = useState<RDKitModule | null>(null)\n  const [status, setStatus] = useState<RDKitStatus>(\"loading\")\n  const [error, setError] = useState<Error | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n\n    loadRDKit()\n      .then((module) => {\n        if (cancelled) return\n        setRdkit(module)\n        setStatus(\"ready\")\n      })\n      .catch((cause: unknown) => {\n        if (cancelled) return\n        setError(cause instanceof Error ? cause : new Error(String(cause)))\n        setStatus(\"error\")\n      })\n\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  return { rdkit, status, error }\n}\n"],"names":["useRDKit","rdkit","setRdkit","useState","status","setStatus","error","setError","useEffect","cancelled","loadRDKit","module","cause"],"mappings":"yIAmCO,SAASA,GAA2B,CACzC,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAA6B,IAAI,EACrD,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAsB,SAAS,EACrD,CAACG,EAAOC,CAAQ,EAAIJ,EAAAA,SAAuB,IAAI,EAErDK,OAAAA,EAAAA,UAAU,IAAM,CACd,IAAIC,EAAY,GAEhBC,OAAAA,YAAA,EACG,KAAMC,GAAW,CACZF,IACJP,EAASS,CAAM,EACfN,EAAU,OAAO,EACnB,CAAC,EACA,MAAOO,GAAmB,CACrBH,IACJF,EAASK,aAAiB,MAAQA,EAAQ,IAAI,MAAM,OAAOA,CAAK,CAAC,CAAC,EAClEP,EAAU,OAAO,EACnB,CAAC,EAEI,IAAM,CACXI,EAAY,EACd,CACF,EAAG,CAAA,CAAE,EAEE,CAAE,MAAAR,EAAO,OAAAG,EAAQ,MAAAE,CAAA,CAC1B"}

package/dist/components/composed/MoleculeStructure/use-rdkit.d.ts

@@ -0,0 +1,29 @@
+import { RDKitModule } from '@rdkit/rdkit';
+/** Lifecycle of the lazily-loaded RDKit module. */
+export type RDKitStatus = "loading" | "ready" | "error";
+export interface UseRDKitResult {
+    /** The initialised module, or `null` until it is ready. */
+    rdkit: RDKitModule | null;
+    status: RDKitStatus;
+    /** The load failure, if `status` is `"error"`. */
+    error: Error | null;
+}
+/**
+ * Lazily load the RDKit WASM module and track its status. The module is a
+ * page-wide singleton, so mounting many molecule components triggers only one
+ * download.
+ *
+ * Use this when you need RDKit available synchronously inside a callback — for
+ * example feeding the interactive scatter's `tooltip.content`, which must
+ * return a string. For a single structure, prefer the `MoleculeStructure`
+ * component, which wraps this hook.
+ *
+ * @example
+ * ```tsx
+ * const { rdkit, status } = useRDKit()
+ * // ...
+ * content: (point) =>
+ *   rdkit ? moleculeToSvg(rdkit, point.meta.smiles) ?? "" : "Loading…"
+ * ```
+ */
+export declare function useRDKit(): UseRDKitResult;

package/dist/components/composed/MoleculeStructure/use-rdkit.js

@@ -0,0 +1,19 @@
+import { useState as e, useEffect as f } from "react";
+import { loadRDKit as a } from "./rdkit-loader.js";
+function m() {
+  const [o, i] = e(null), [s, n] = e("loading"), [u, l] = e(null);
+  return f(() => {
+    let t = !1;
+    return a().then((r) => {
+      t || (i(r), n("ready"));
+    }).catch((r) => {
+      t || (l(r instanceof Error ? r : new Error(String(r))), n("error"));
+    }), () => {
+      t = !0;
+    };
+  }, []), { rdkit: o, status: s, error: u };
+}
+export {
+  m as useRDKit
+};
+//# sourceMappingURL=use-rdkit.js.map

package/dist/components/composed/MoleculeStructure/use-rdkit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rdkit.js","sources":["../../../../src/components/composed/MoleculeStructure/use-rdkit.ts"],"sourcesContent":["import { useEffect, useState } from \"react\"\n\nimport { loadRDKit } from \"./rdkit-loader\"\n\nimport type { RDKitModule } from \"@rdkit/rdkit\"\n\n/** Lifecycle of the lazily-loaded RDKit module. */\nexport type RDKitStatus = \"loading\" | \"ready\" | \"error\"\n\nexport interface UseRDKitResult {\n  /** The initialised module, or `null` until it is ready. */\n  rdkit: RDKitModule | null\n  status: RDKitStatus\n  /** The load failure, if `status` is `\"error\"`. */\n  error: Error | null\n}\n\n/**\n * Lazily load the RDKit WASM module and track its status. The module is a\n * page-wide singleton, so mounting many molecule components triggers only one\n * download.\n *\n * Use this when you need RDKit available synchronously inside a callback — for\n * example feeding the interactive scatter's `tooltip.content`, which must\n * return a string. For a single structure, prefer the `MoleculeStructure`\n * component, which wraps this hook.\n *\n * @example\n * ```tsx\n * const { rdkit, status } = useRDKit()\n * // ...\n * content: (point) =>\n *   rdkit ? moleculeToSvg(rdkit, point.meta.smiles) ?? \"\" : \"Loading…\"\n * ```\n */\nexport function useRDKit(): UseRDKitResult {\n  const [rdkit, setRdkit] = useState<RDKitModule | null>(null)\n  const [status, setStatus] = useState<RDKitStatus>(\"loading\")\n  const [error, setError] = useState<Error | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n\n    loadRDKit()\n      .then((module) => {\n        if (cancelled) return\n        setRdkit(module)\n        setStatus(\"ready\")\n      })\n      .catch((cause: unknown) => {\n        if (cancelled) return\n        setError(cause instanceof Error ? cause : new Error(String(cause)))\n        setStatus(\"error\")\n      })\n\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  return { rdkit, status, error }\n}\n"],"names":["useRDKit","rdkit","setRdkit","useState","status","setStatus","error","setError","useEffect","cancelled","loadRDKit","module","cause"],"mappings":";;AAmCO,SAASA,IAA2B;AACzC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAQC,CAAS,IAAIF,EAAsB,SAAS,GACrD,CAACG,GAAOC,CAAQ,IAAIJ,EAAuB,IAAI;AAErD,SAAAK,EAAU,MAAM;AACd,QAAIC,IAAY;AAEhB,WAAAC,EAAA,EACG,KAAK,CAACC,MAAW;AAChB,MAAIF,MACJP,EAASS,CAAM,GACfN,EAAU,OAAO;AAAA,IACnB,CAAC,EACA,MAAM,CAACO,MAAmB;AACzB,MAAIH,MACJF,EAASK,aAAiB,QAAQA,IAAQ,IAAI,MAAM,OAAOA,CAAK,CAAC,CAAC,GAClEP,EAAU,OAAO;AAAA,IACnB,CAAC,GAEI,MAAM;AACX,MAAAI,IAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE,GAEE,EAAE,OAAAR,GAAO,QAAAG,GAAQ,OAAAE,EAAA;AAC1B;"}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { FilterColumnConfig, FilterCondition } from '../../ui/data-table/data-table';
+export interface ManifestFilterPopoverProps {
+    /** Filterable columns. Operator subsets can be specified per column. */
+    columns: FilterColumnConfig[];
+    /** Column id → display label resolver. */
+    columnLabel?: (columnId: string) => string;
+    filters: FilterCondition[];
+    onFiltersChange: (next: FilterCondition[]) => void;
+    triggerLabel?: string;
+    className?: string;
+}
+export declare function ManifestFilterPopover({ columns, columnLabel, filters, onFiltersChange, triggerLabel, className, }: ManifestFilterPopoverProps): import("react/jsx-runtime").JSX.Element;