@nice2dev/ui-science 1.1.7 → 1.1.10

package/dist/index.mjs

@@ -1,8 +1,8 @@
 var st = Object.defineProperty;
 var at = (e, t, n) => t in e ? st(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var ve = (e, t, n) => at(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsx as o, jsxs as u, Fragment as ze } from "react/jsx-runtime";
-import { createContext as Ue, useContext as Ze, useState as j, useCallback as P, useMemo as K, useRef as Ae, useEffect as Xe } from "react";
+import { jsx as o, jsxs as u, Fragment as Ae } from "react/jsx-runtime";
+import { createContext as Ue, useContext as Ze, useState as j, useCallback as q, useMemo as K, useRef as ze, useEffect as Xe } from "react";
 class lt {
   constructor(t) {
     ve(this, "config");
@@ -156,6 +156,9 @@ class lt {
         <meta charset="utf-8">
         <title>${t.title}</title>
         <style>
+          /* audit-allow: token-role +5 — this stylesheet ships inside a STANDALONE exported
+             document, where no --nice-* property is declared, so every reference here renders
+             its fallback and nothing else. The ink colours are intentional. */
           body { font-family: 'Times New Roman', serif; max-width: 800px; margin: 0 auto; padding: var(--nice-space-5, 20px); }
           h1 { border-bottom: 2px solid var(--nice-text, #333); }
           .meta { color: var(--nice-text-secondary, #666); font-size: 0.9em; }
@@ -213,7 +216,7 @@ function ct({
   service: e,
   children: t
 }) {
-  const [n, r] = j([]), [i, s] = j(null), [a, l] = j(null), c = P(async () => {
+  const [n, r] = j([]), [i, s] = j(null), [a, l] = j(null), c = q(async () => {
     const $ = await e.listNotebooks();
     r($);
   }, [e]), h = K(
@@ -222,7 +225,7 @@ function ct({
   ), p = K(
     () => (h == null ? void 0 : h.entries.find(($) => $.id === a)) || null,
     [h, a]
-  ), y = P(($) => {
+  ), y = q(($) => {
     s($), l(null);
   }, []), m = {
     service: e,
@@ -235,7 +238,7 @@ function ct({
   };
   return /* @__PURE__ */ o(Ke.Provider, { value: m, children: t });
 }
-const q = {
+const P = {
   container: {
     display: "flex",
     height: "100%",
@@ -298,7 +301,7 @@ const q = {
   button: {
     padding: "8px 16px",
     backgroundColor: "var(--nice-primary-hover, #1976d2)",
-    color: "var(--nice-bg, #fff)",
+    color: "var(--nice-text-on-primary, #fff)",
     border: "none",
     borderRadius: "4px",
     cursor: "pointer",
@@ -312,20 +315,20 @@ const q = {
   signed: "var(--nice-accent, #9c27b0)",
   locked: "var(--nice-danger, #f44336)"
 }, Je = {
-  experiment: "🧪",
-  protocol: "📋",
-  observation: "👁",
-  calculation: "🔢",
-  meeting: "👥",
-  report: "📊",
-  note: "📝"
+  experiment: "EXP",
+  protocol: "PRO",
+  observation: "OBS",
+  calculation: "CALC",
+  meeting: "MEET",
+  report: "REP",
+  note: "NOTE"
 };
 function Jt({
   service: e,
   className: t,
   style: n
 }) {
-  return /* @__PURE__ */ o(ct, { service: e, children: /* @__PURE__ */ u("div", { className: t, style: { ...q.container, ...n }, children: [
+  return /* @__PURE__ */ o(ct, { service: e, children: /* @__PURE__ */ u("div", { className: t, style: { ...P.container, ...n }, children: [
     /* @__PURE__ */ o(dt, {}),
     /* @__PURE__ */ o(ut, {})
   ] }) });
@@ -334,14 +337,14 @@ function dt() {
   const { notebooks: e, currentNotebook: t, setCurrentNotebook: n, service: r, refresh: i } = Te(), [s, a] = j(!1), [l, c] = j(""), h = async () => {
     l.trim() && (await r.createNotebook({ name: l.trim() }), await i(), c(""), a(!1));
   };
-  return /* @__PURE__ */ u("div", { style: q.sidebar, children: [
-    /* @__PURE__ */ o("div", { style: { padding: "16px", borderBottom: "1px solid var(--nice-border, #e0e0e0)" }, children: /* @__PURE__ */ o("h2", { style: { margin: 0, fontSize: "18px" }, children: "📓 Lab Notebooks" }) }),
+  return /* @__PURE__ */ u("div", { style: P.sidebar, children: [
+    /* @__PURE__ */ o("div", { style: { padding: "16px", borderBottom: "1px solid var(--nice-border, #e0e0e0)" }, children: /* @__PURE__ */ o("h2", { style: { margin: 0, fontSize: "18px" }, children: "Lab Notebooks" }) }),
     /* @__PURE__ */ o("div", { style: { flex: 1, overflow: "auto" }, children: e.map((p) => /* @__PURE__ */ u(
       "div",
       {
         onClick: () => n(p.id),
         style: {
-          ...q.entryCard,
+          ...P.entryCard,
           backgroundColor: (t == null ? void 0 : t.id) === p.id ? "var(--nice-primary-bg, #e3f2fd)" : "transparent"
         },
         children: [
@@ -372,39 +375,36 @@ function dt() {
           value: l,
           onChange: (p) => c(p.target.value),
           placeholder: "Notebook name",
-          style: q.input,
+          style: P.input,
           autoFocus: !0
         }
       ),
       /* @__PURE__ */ u("div", { style: { display: "flex", gap: "8px" }, children: [
-        /* @__PURE__ */ o("button", { onClick: h, style: q.button, children: "Create" }),
+        /* @__PURE__ */ o("button", { onClick: h, style: P.button, children: "Create" }),
         /* @__PURE__ */ o(
           "button",
           {
             onClick: () => a(!1),
-            style: { ...q.button, backgroundColor: "var(--nice-text-secondary, #9e9e9e)" },
+            style: { ...P.button, backgroundColor: "var(--nice-bg-tertiary, #9e9e9e)" },
             children: "Cancel"
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ o("button", { onClick: () => a(!0), style: { ...q.button, width: "100%" }, children: "+ New Notebook" }) })
+    ] }) : /* @__PURE__ */ o("button", { onClick: () => a(!0), style: { ...P.button, width: "100%" }, children: "+ New Notebook" }) })
   ] });
 }
 function ut() {
   const { currentNotebook: e, currentEntry: t, setCurrentEntry: n, service: r, refresh: i } = Te(), [s, a] = j(!1);
   if (!e)
-    return /* @__PURE__ */ o("div", { style: { ...q.main, justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ u("div", { style: { textAlign: "center", color: "var(--nice-text-secondary, #666)" }, children: [
-      /* @__PURE__ */ o("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "📓" }),
-      /* @__PURE__ */ o("div", { style: { fontSize: "18px" }, children: "Select a notebook to get started" })
-    ] }) });
+    return /* @__PURE__ */ o("div", { style: { ...P.main, justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ o("div", { style: { textAlign: "center", color: "var(--nice-text-secondary, #666)" }, children: /* @__PURE__ */ o("div", { style: { fontSize: "18px" }, children: "Select a notebook to get started" }) }) });
   const l = async (c) => {
     const h = await r.createEntry(e.id, c);
     await i(), n(h.id), a(!1);
   };
-  return /* @__PURE__ */ u("div", { style: q.main, children: [
-    /* @__PURE__ */ o("div", { style: q.header, children: /* @__PURE__ */ u("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+  return /* @__PURE__ */ u("div", { style: P.main, children: [
+    /* @__PURE__ */ o("div", { style: P.header, children: /* @__PURE__ */ u("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
       /* @__PURE__ */ o("h1", { style: { margin: 0, fontSize: "20px" }, children: e.name }),
-      /* @__PURE__ */ o("button", { onClick: () => a(!0), style: q.button, children: "+ New Entry" })
+      /* @__PURE__ */ o("button", { onClick: () => a(!0), style: P.button, children: "+ New Entry" })
     ] }) }),
     /* @__PURE__ */ u("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
       /* @__PURE__ */ o(
@@ -420,12 +420,22 @@ function ut() {
             {
               onClick: () => n(c.id),
               style: {
-                ...q.entryCard,
+                ...P.entryCard,
                 backgroundColor: (t == null ? void 0 : t.id) === c.id ? "var(--nice-primary-bg, #e3f2fd)" : "transparent"
               },
               children: [
                 /* @__PURE__ */ u("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-                  /* @__PURE__ */ o("span", { children: Je[c.type] }),
+                  /* @__PURE__ */ o(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        fontWeight: 600,
+                        color: "var(--nice-text-secondary, #666)"
+                      },
+                      children: Je[c.type]
+                    }
+                  ),
                   /* @__PURE__ */ o("span", { style: { fontWeight: 500 }, children: c.title })
                 ] }),
                 /* @__PURE__ */ u("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [
@@ -433,7 +443,7 @@ function ut() {
                     "span",
                     {
                       style: {
-                        ...q.badge,
+                        ...P.badge,
                         backgroundColor: `${Be[c.status]}20`,
                         color: Be[c.status]
                       },
@@ -448,7 +458,7 @@ function ut() {
           ))
         }
       ),
-      /* @__PURE__ */ o("div", { style: q.content, children: t ? /* @__PURE__ */ o(ht, { entry: t }) : s ? /* @__PURE__ */ o(pt, { onSubmit: l, onCancel: () => a(!1) }) : /* @__PURE__ */ o(
+      /* @__PURE__ */ o("div", { style: P.content, children: t ? /* @__PURE__ */ o(ht, { entry: t }) : s ? /* @__PURE__ */ o(pt, { onSubmit: l, onCancel: () => a(!1) }) : /* @__PURE__ */ o(
         "div",
         {
           style: {
@@ -490,7 +500,7 @@ function ht({ entry: e }) {
                 "span",
                 {
                   style: {
-                    ...q.badge,
+                    ...P.badge,
                     backgroundColor: `${Be[e.status]}20`,
                     color: Be[e.status]
                   },
@@ -503,8 +513,8 @@ function ht({ entry: e }) {
               ] })
             ] })
           ] }),
-          !c && /* @__PURE__ */ o("div", { style: { display: "flex", gap: "8px" }, children: i ? /* @__PURE__ */ u(ze, { children: [
-            /* @__PURE__ */ o("button", { onClick: h, style: q.button, children: "Save" }),
+          !c && /* @__PURE__ */ o("div", { style: { display: "flex", gap: "8px" }, children: i ? /* @__PURE__ */ u(Ae, { children: [
+            /* @__PURE__ */ o("button", { onClick: h, style: P.button, children: "Save" }),
             /* @__PURE__ */ o(
               "button",
               {
@@ -512,19 +522,19 @@ function ht({ entry: e }) {
                   s(!1), l(e);
                 },
                 style: {
-                  ...q.button,
-                  backgroundColor: "var(--nice-text-secondary, #9e9e9e)"
+                  ...P.button,
+                  backgroundColor: "var(--nice-bg-tertiary, #9e9e9e)"
                 },
                 children: "Cancel"
               }
             )
-          ] }) : /* @__PURE__ */ u(ze, { children: [
-            /* @__PURE__ */ o("button", { onClick: () => s(!0), style: q.button, children: "Edit" }),
+          ] }) : /* @__PURE__ */ u(Ae, { children: [
+            /* @__PURE__ */ o("button", { onClick: () => s(!0), style: P.button, children: "Edit" }),
             /* @__PURE__ */ o(
               "button",
               {
                 onClick: p,
-                style: { ...q.button, backgroundColor: "var(--nice-accent, #9c27b0)" },
+                style: { ...P.button, backgroundColor: "var(--nice-accent, #9c27b0)" },
                 children: "Sign"
               }
             )
@@ -541,7 +551,7 @@ function ht({ entry: e }) {
             type: "text",
             value: a.title,
             onChange: (y) => l({ ...a, title: y.target.value }),
-            style: q.input
+            style: P.input
           }
         )
       ] }),
@@ -552,7 +562,7 @@ function ht({ entry: e }) {
           {
             value: a.objective || "",
             onChange: (y) => l({ ...a, objective: y.target.value }),
-            style: q.textarea
+            style: P.textarea
           }
         )
       ] }),
@@ -563,7 +573,7 @@ function ht({ entry: e }) {
           {
             value: a.methods || "",
             onChange: (y) => l({ ...a, methods: y.target.value }),
-            style: q.textarea
+            style: P.textarea
           }
         )
       ] }),
@@ -574,7 +584,7 @@ function ht({ entry: e }) {
           {
             value: a.results || "",
             onChange: (y) => l({ ...a, results: y.target.value }),
-            style: q.textarea
+            style: P.textarea
           }
         )
       ] }),
@@ -585,7 +595,7 @@ function ht({ entry: e }) {
           {
             value: a.conclusions || "",
             onChange: (y) => l({ ...a, conclusions: y.target.value }),
-            style: q.textarea
+            style: P.textarea
           }
         )
       ] })
@@ -646,7 +656,6 @@ function ht({ entry: e }) {
               textDecoration: "none"
             },
             children: [
-              "📎 ",
               y.name,
               " (",
               (y.size / 1024).toFixed(1),
@@ -680,7 +689,7 @@ function pt({
         {
           value: n.type,
           onChange: (s) => r({ ...n, type: s.target.value }),
-          style: q.input,
+          style: P.input,
           children: Object.entries(Je).map(([s, a]) => /* @__PURE__ */ u("option", { value: s, children: [
             a,
             " ",
@@ -698,7 +707,7 @@ function pt({
           value: n.title,
           onChange: (s) => r({ ...n, title: s.target.value }),
           placeholder: "Enter entry title",
-          style: q.input,
+          style: P.input,
           required: !0
         }
       )
@@ -711,18 +720,18 @@ function pt({
           value: n.objective,
           onChange: (s) => r({ ...n, objective: s.target.value }),
           placeholder: "What is the goal of this entry?",
-          style: q.textarea
+          style: P.textarea
         }
       )
     ] }),
     /* @__PURE__ */ u("div", { style: { display: "flex", gap: "8px" }, children: [
-      /* @__PURE__ */ o("button", { type: "submit", style: q.button, children: "Create Entry" }),
+      /* @__PURE__ */ o("button", { type: "submit", style: P.button, children: "Create Entry" }),
       /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           onClick: t,
-          style: { ...q.button, backgroundColor: "var(--nice-text-secondary, #9e9e9e)" },
+          style: { ...P.button, backgroundColor: "var(--nice-bg-tertiary, #9e9e9e)" },
           children: "Cancel"
         }
       )
@@ -1204,7 +1213,7 @@ function Qt({
   className: t,
   style: n
 }) {
-  const [r, i] = j([]), [s, a] = j(null), [l, c] = j("data"), h = P(() => {
+  const [r, i] = j([]), [s, a] = j(null), [l, c] = j("data"), h = q(() => {
     i(e.listDatasets());
   }, [e]), p = K(
     () => r.find((m) => m.id === s),
@@ -1305,7 +1314,7 @@ function Qt({
             ]
           }
         ),
-        /* @__PURE__ */ o("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: p ? l === "data" ? /* @__PURE__ */ o(yt, { dataset: p }) : l === "stats" ? /* @__PURE__ */ o(mt, { dataset: p }) : /* @__PURE__ */ o(gt, { dataset: p, service: e }) : /* @__PURE__ */ u(
+        /* @__PURE__ */ o("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: p ? l === "data" ? /* @__PURE__ */ o(yt, { dataset: p }) : l === "stats" ? /* @__PURE__ */ o(mt, { dataset: p }) : /* @__PURE__ */ o(gt, { dataset: p, service: e }) : /* @__PURE__ */ o(
           "div",
           {
             style: {
@@ -1313,10 +1322,7 @@ function Qt({
               color: "var(--nice-text-secondary, #666)",
               padding: "48px"
             },
-            children: [
-              /* @__PURE__ */ o("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "📊" }),
-              /* @__PURE__ */ o("div", { style: { fontSize: "18px" }, children: "Import a dataset or select an existing one to begin" })
-            ]
+            children: /* @__PURE__ */ o("div", { style: { fontSize: "18px" }, children: "Import a dataset or select an existing one to begin" })
           }
         ) })
       ]
@@ -1381,7 +1387,7 @@ function yt({ dataset: e }) {
           "td",
           {
             style: { padding: "8px 12px", border: "1px solid var(--nice-border, #ddd)" },
-            children: a[c.name] != null ? String(a[c.name]) : /* @__PURE__ */ o("span", { style: { color: "var(--nice-border, #ccc)" }, children: "null" })
+            children: a[c.name] != null ? String(a[c.name]) : /* @__PURE__ */ o("span", { style: { color: "var(--nice-text-secondary, #ccc)" }, children: "null" })
           },
           c.name
         ))
@@ -1984,7 +1990,7 @@ const he = {
   }
 };
 function en({ service: e, className: t, style: n }) {
-  const [r, i] = j([]), [s, a] = j([]), [l, c] = j("all"), [h, p] = j(null), [y, m] = j(""), [$, w] = j("apa"), F = P(() => {
+  const [r, i] = j([]), [s, a] = j([]), [l, c] = j("all"), [h, p] = j(null), [y, m] = j(""), [$, w] = j("apa"), F = q(() => {
     i(e.listCitations(l)), a(e.listCollections());
   }, [e, l]), J = K(() => y ? e.searchCitations(y, { collection: l }) : r, [r, y, l, e]), te = K(
     () => r.find((L) => L.id === h),
@@ -2117,7 +2123,7 @@ function kt() {
       }
     }
   };
-  return /* @__PURE__ */ u(ze, { children: [
+  return /* @__PURE__ */ u(Ae, { children: [
     /* @__PURE__ */ o("button", { onClick: () => r(!0), style: he.button, children: "+ Add Reference" }),
     n && /* @__PURE__ */ o(
       "div",
@@ -2159,7 +2165,7 @@ function kt() {
                   "button",
                   {
                     onClick: () => r(!1),
-                    style: { ...he.button, backgroundColor: "var(--nice-text-secondary, #9e9e9e)" },
+                    style: { ...he.button, backgroundColor: "var(--nice-bg-tertiary, #9e9e9e)" },
                     children: "Cancel"
                   }
                 ),
@@ -2272,7 +2278,7 @@ function Dt({ citation: e }) {
     ] })
   ] });
 }
-const zt = {
+const At = {
   series: [],
   xAxes: [],
   yAxes: [],
@@ -2285,7 +2291,7 @@ const zt = {
 function Ie(e) {
   return e.reduce((t, n) => t + n, 0) / e.length;
 }
-function At(e) {
+function zt(e) {
   const t = [...e].sort((r, i) => r - i), n = Math.floor(t.length / 2);
   return t.length % 2 ? t[n] : (t[n - 1] + t[n]) / 2;
 }
@@ -2312,7 +2318,7 @@ function Ye(e, t, n, r = 5) {
   const s = (t - e) / (r - 1);
   return Array.from({ length: r }, (a, l) => e + l * s);
 }
-function qe(e, t) {
+function Pe(e, t) {
   return Math.abs(e) >= 1e6 ? (e / 1e6).toFixed(1) + "M" : Math.abs(e) >= 1e3 ? (e / 1e3).toFixed(1) + "K" : Math.abs(e) < 0.01 ? e.toExponential(2) : e.toFixed(2).replace(/\.?0+$/, "");
 }
 function tn({
@@ -2342,10 +2348,10 @@ function tn({
   className: de,
   style: pe
 }) {
-  const se = Ae(null);
-  Ae(null);
+  const se = ze(null);
+  ze(null);
   const [ne, Y] = j({
-    ...zt,
+    ...At,
     series: e,
     annotations: h
   }), [ce, ue] = j({ width: 0, height: 0 }), [me, xe] = j({ x: null, y: null }), [X, Z] = j(
@@ -2358,11 +2364,11 @@ function tn({
       return { xMin: 0, xMax: 1, yMin: 0, yMax: 1 };
     let x = 1 / 0, S = -1 / 0, E = 1 / 0, N = -1 / 0;
     for (const M of d)
-      for (const z of M.data) {
-        const W = typeof z.x == "number" ? z.x : 0;
-        if (x = Math.min(x, W), S = Math.max(S, W), E = Math.min(E, z.y), N = Math.max(N, z.y), z.error) {
-          const [T, le] = Array.isArray(z.error) ? z.error : [-z.error, z.error];
-          E = Math.min(E, z.y + T), N = Math.max(N, z.y + le);
+      for (const A of M.data) {
+        const W = typeof A.x == "number" ? A.x : 0;
+        if (x = Math.min(x, W), S = Math.max(S, W), E = Math.min(E, A.y), N = Math.max(N, A.y), A.error) {
+          const [T, le] = Array.isArray(A.error) ? A.error : [-A.error, A.error];
+          E = Math.min(E, A.y + T), N = Math.max(N, A.y + le);
         }
       }
     const _ = (S - x) * 0.05 || 0.5, g = (N - E) * 0.05 || 0.5;
@@ -2378,7 +2384,7 @@ function tn({
       if (!ae.has(x.id))
         continue;
       const S = x.data.map((E) => E.y);
-      c.includes("mean") && (d[`${x.id}_mean`] = Ie(S)), c.includes("median") && (d[`${x.id}_median`] = At(S)), c.includes("std-dev") && (d[`${x.id}_std`] = Re(S)), c.includes("regression") && (d[`${x.id}_regression`] = Et(x.data)), c.includes("confidence-interval") && (d[`${x.id}_ci95`] = Nt(S));
+      c.includes("mean") && (d[`${x.id}_mean`] = Ie(S)), c.includes("median") && (d[`${x.id}_median`] = zt(S)), c.includes("std-dev") && (d[`${x.id}_std`] = Re(S)), c.includes("regression") && (d[`${x.id}_regression`] = Et(x.data)), c.includes("confidence-interval") && (d[`${x.id}_ci95`] = Nt(S));
     }
     return d;
   }, [e, ae, c]), ee = K(() => w.map((d) => {
@@ -2401,19 +2407,19 @@ function tn({
       }
     }
     return d;
-  }), [w, e]), re = P((d) => {
+  }), [w, e]), re = q((d) => {
     G((x) => {
       const S = new Set(x);
       return S.has(d) ? S.delete(d) : S.add(d), S;
     });
-  }, []), ie = P(() => {
+  }, []), ie = q(() => {
     xe({ x: null, y: null }), oe == null || oe(null, null);
-  }, [oe]), A = K(() => {
+  }, [oe]), z = K(() => {
     switch (V) {
       case "dark":
         return [
           "var(--nice-primary-light, #60a5fa)",
-          "var(--nice-accent-pink, #f472b6)",
+          "var(--nice-color-accent-pink, #f472b6)",
           "var(--nice-success-light, #34d399)",
           "var(--nice-warning-light, #fbbf24)",
           "var(--nice-accent, #a78bfa)",
@@ -2428,7 +2434,7 @@ function tn({
           "var(--nice-success, #22c55e)",
           "var(--nice-warning, #f59e0b)",
           "var(--nice-accent, #8b5cf6)",
-          "var(--nice-accent-pink, #ec4899)"
+          "var(--nice-color-accent-pink, #ec4899)"
         ];
       default:
         return [
@@ -2437,15 +2443,15 @@ function tn({
           "var(--nice-success-dark, #16a34a)",
           "#ca8a04",
           "var(--nice-accent, #7c3aed)",
-          "var(--nice-accent-pink, #db2777)"
+          "var(--nice-color-accent-pink, #db2777)"
         ];
     }
   }, [V]), k = K(() => {
     switch (V) {
       case "dark":
         return {
-          bg: "var(--nice-text, #1f2937)",
-          text: "var(--nice-bg-secondary, #f3f4f6)",
+          bg: "var(--nice-bg-secondary, #1f2937)",
+          text: "var(--nice-text-primary, #f3f4f6)",
           grid: "var(--nice-text, #374151)",
           axis: "var(--nice-text-muted, #9ca3af)",
           tooltip: "var(--nice-text, #374151)"
@@ -2534,7 +2540,7 @@ function tn({
                         width: 12,
                         height: 12,
                         borderRadius: 2,
-                        backgroundColor: d.color || A[x % A.length]
+                        backgroundColor: d.color || z[x % z.length]
                       }
                     }
                   ),
@@ -2578,24 +2584,41 @@ function tn({
                 ] }),
                 e.filter((d) => ae.has(d.id) && d.visible !== !1).map((d, x) => {
                   var N, _, g;
-                  const S = d.color || A[x % A.length], E = d.type || s;
-                  return /* @__PURE__ */ o("g", { className: "nice-scientific-chart__series", children: E === "scatter" || E === "line" ? /* @__PURE__ */ u(ze, { children: [
-                    E === "line" && d.data.length > 1 && /* @__PURE__ */ o(
-                      "polyline",
+                  const S = d.color || z[x % z.length], E = d.type || s;
+                  return /* @__PURE__ */ o("g", { className: "nice-scientific-chart__series", children: E === "scatter" || E === "line" ? /* @__PURE__ */ u(Ae, { children: [
+                    E === "line" && d.data.length > 1 && // `points` takes plain numbers — percentages are invalid there (the
+                    // line series never rendered; the browser rejected every point). The
+                    // same 0–100 coordinates go into a stretched 100×100 viewBox instead,
+                    // with a non-scaling stroke so the width stays in pixels.
+                    /* @__PURE__ */ o(
+                      "svg",
                       {
-                        fill: "none",
-                        stroke: S,
-                        strokeWidth: ((N = d.line) == null ? void 0 : N.width) || 2,
-                        strokeDasharray: ((_ = d.line) == null ? void 0 : _.style) === "dashed" ? "5,5" : ((g = d.line) == null ? void 0 : g.style) === "dotted" ? "2,2" : void 0,
-                        points: d.data.map((M, z) => {
-                          const W = 10 + ((typeof M.x == "number" ? M.x : z) - C.xMin) / (C.xMax - C.xMin) * 85, T = 90 - (M.y - C.yMin) / (C.yMax - C.yMin) * 85;
-                          return `${W}%,${T}%`;
-                        }).join(" ")
+                        x: "0",
+                        y: "0",
+                        width: "100%",
+                        height: "100%",
+                        viewBox: "0 0 100 100",
+                        preserveAspectRatio: "none",
+                        style: { overflow: "visible" },
+                        children: /* @__PURE__ */ o(
+                          "polyline",
+                          {
+                            fill: "none",
+                            stroke: S,
+                            strokeWidth: ((N = d.line) == null ? void 0 : N.width) || 2,
+                            vectorEffect: "non-scaling-stroke",
+                            strokeDasharray: ((_ = d.line) == null ? void 0 : _.style) === "dashed" ? "5,5" : ((g = d.line) == null ? void 0 : g.style) === "dotted" ? "2,2" : void 0,
+                            points: d.data.map((M, A) => {
+                              const W = 10 + ((typeof M.x == "number" ? M.x : A) - C.xMin) / (C.xMax - C.xMin) * 85, T = 90 - (M.y - C.yMin) / (C.yMax - C.yMin) * 85;
+                              return `${W},${T}`;
+                            }).join(" ")
+                          }
+                        )
                       }
                     ),
-                    d.data.map((M, z) => {
+                    d.data.map((M, A) => {
                       var fe, be, ge, ye, we;
-                      const W = 10 + ((typeof M.x == "number" ? M.x : z) - C.xMin) / (C.xMax - C.xMin) * 85, T = 90 - (M.y - C.yMin) / (C.yMax - C.yMin) * 85, le = M.size || ((fe = d.marker) == null ? void 0 : fe.size) || 6;
+                      const W = 10 + ((typeof M.x == "number" ? M.x : A) - C.xMin) / (C.xMax - C.xMin) * 85, T = 90 - (M.y - C.yMin) / (C.yMax - C.yMin) * 85, le = M.size || ((fe = d.marker) == null ? void 0 : fe.size) || 6;
                       return /* @__PURE__ */ u("g", { className: "nice-scientific-chart__point", children: [
                         M.error && /* @__PURE__ */ o(
                           "line",
@@ -2620,7 +2643,7 @@ function tn({
                             opacity: ((we = d.marker) == null ? void 0 : we.opacity) ?? 1,
                             style: { cursor: L ? "pointer" : void 0 },
                             onMouseEnter: () => {
-                              Z({ seriesId: d.id, pointIndex: z }), H == null || H(M, d);
+                              Z({ seriesId: d.id, pointIndex: A }), H == null || H(M, d);
                             },
                             onMouseLeave: () => {
                               Z(null), H == null || H(null, null);
@@ -2628,7 +2651,7 @@ function tn({
                             onClick: (Se) => L == null ? void 0 : L(M, d, Se)
                           }
                         )
-                      ] }, z);
+                      ] }, A);
                     }),
                     Q[`${d.id}_regression`] && /* @__PURE__ */ o(
                       "line",
@@ -2671,7 +2694,7 @@ function tn({
                         textAnchor: "middle",
                         fill: k.axis,
                         fontSize: "0.75rem",
-                        children: qe(d)
+                        children: Pe(d)
                       }
                     )
                   ] }, `x-${x}`)),
@@ -2686,7 +2709,7 @@ function tn({
                         dominantBaseline: "middle",
                         fill: k.axis,
                         fontSize: "0.75rem",
-                        children: qe(d)
+                        children: Pe(d)
                       }
                     )
                   ] }, `y-${x}`))
@@ -2736,7 +2759,7 @@ function tn({
                   },
                   children: (() => {
                     const d = e.find((S) => S.id === X.seriesId), x = d == null ? void 0 : d.data[X.pointIndex];
-                    return !d || !x ? null : y.format ? y.format(x, d) : /* @__PURE__ */ u(ze, { children: [
+                    return !d || !x ? null : y.format ? y.format(x, d) : /* @__PURE__ */ u(Ae, { children: [
                       /* @__PURE__ */ o("div", { style: { fontWeight: "bold" }, children: d.name }),
                       /* @__PURE__ */ u("div", { children: [
                         "X: ",
@@ -2824,7 +2847,7 @@ function tn({
     }
   );
 }
-const Pe = {
+const qe = {
   rotationX: 25,
   rotationY: -45,
   rotationZ: 0,
@@ -2987,49 +3010,49 @@ function nn({
   className: L,
   style: H
 }) {
-  const oe = Ae(null), [U, de] = j(Pe), [pe, se] = j(!1), [ne, Y] = j(
+  const oe = ze(null), [U, de] = j(qe), [pe, se] = j(!1), [ne, Y] = j(
     null
   ), [ce, ue] = j(
     null
   ), [me, xe] = j(0), X = K(() => {
-    let A = 1 / 0, k = -1 / 0, d = 1 / 0, x = -1 / 0, S = 1 / 0, E = -1 / 0, N = 1 / 0, _ = -1 / 0;
+    let z = 1 / 0, k = -1 / 0, d = 1 / 0, x = -1 / 0, S = 1 / 0, E = -1 / 0, N = 1 / 0, _ = -1 / 0;
     for (const M of e)
       if (M.type === "scatter3d")
-        for (const z of M.points)
-          A = Math.min(A, z.x), k = Math.max(k, z.x), d = Math.min(d, z.y), x = Math.max(x, z.y), S = Math.min(S, z.z), E = Math.max(E, z.z), typeof z.color == "number" && (N = Math.min(N, z.color), _ = Math.max(_, z.color));
+        for (const A of M.points)
+          z = Math.min(z, A.x), k = Math.max(k, A.x), d = Math.min(d, A.y), x = Math.max(x, A.y), S = Math.min(S, A.z), E = Math.max(E, A.z), typeof A.color == "number" && (N = Math.min(N, A.color), _ = Math.max(_, A.color));
       else if (M.type === "surface" || M.type === "wireframe") {
-        const z = M;
-        for (const W of z.xData)
-          A = Math.min(A, W), k = Math.max(k, W);
-        for (const W of z.yData)
+        const A = M;
+        for (const W of A.xData)
+          z = Math.min(z, W), k = Math.max(k, W);
+        for (const W of A.yData)
           d = Math.min(d, W), x = Math.max(x, W);
-        for (const W of z.zData)
+        for (const W of A.zData)
           for (const T of W)
             S = Math.min(S, T), E = Math.max(E, T), N = Math.min(N, T), _ = Math.max(_, T);
       }
-    const g = Math.max(k - A, x - d, E - S) || 1;
-    return { xMin: A, xMax: k, yMin: d, yMax: x, zMin: S, zMax: E, colorMin: N, colorMax: _, maxRange: g };
-  }, [e]), Z = P(
-    (A) => {
+    const g = Math.max(k - z, x - d, E - S) || 1;
+    return { xMin: z, xMax: k, yMin: d, yMax: x, zMin: S, zMax: E, colorMin: N, colorMax: _, maxRange: g };
+  }, [e]), Z = q(
+    (z) => {
       const k = 2 / X.maxRange;
       return {
-        x: (A.x - (X.xMin + X.xMax) / 2) * k,
-        y: (A.y - (X.yMin + X.yMax) / 2) * k,
-        z: (A.z - (X.zMin + X.zMax) / 2) * k
+        x: (z.x - (X.xMin + X.xMax) / 2) * k,
+        y: (z.y - (X.yMin + X.yMax) / 2) * k,
+        z: (z.z - (X.zMin + X.zMax) / 2) * k
       };
     },
     [X]
-  ), ae = P(
-    (A) => {
-      !h && !y || (se(!0), Y({ x: A.clientX, y: A.clientY, viewState: { ...U } }));
+  ), ae = q(
+    (z) => {
+      !h && !y || (se(!0), Y({ x: z.clientX, y: z.clientY, viewState: { ...U } }));
     },
     [h, y, U]
-  ), G = P(
-    (A) => {
+  ), G = q(
+    (z) => {
       if (!pe || !ne)
         return;
-      const k = A.clientX - ne.x, d = A.clientY - ne.y;
-      A.shiftKey && y ? de({
+      const k = z.clientX - ne.x, d = z.clientY - ne.y;
+      z.shiftKey && y ? de({
         ...ne.viewState,
         panX: ne.viewState.panX + k * 2e-3,
         panY: ne.viewState.panY + d * 2e-3
@@ -3040,14 +3063,14 @@ function nn({
       });
     },
     [pe, ne, h, y]
-  ), C = P(() => {
+  ), C = q(() => {
     se(!1), Y(null);
-  }, []), Q = P(
-    (A) => {
+  }, []), Q = q(
+    (z) => {
       if (!p)
         return;
-      A.preventDefault();
-      const k = A.deltaY > 0 ? 0.9 : 1.1;
+      z.preventDefault();
+      const k = z.deltaY > 0 ? 0.9 : 1.1;
       de((d) => ({
         ...d,
         zoom: Math.max(0.1, Math.min(10, d.zoom * k))
@@ -3059,7 +3082,7 @@ function nn({
       case "dark":
         return {
           bg: "var(--nice-bg, #1a1a2e)",
-          text: "var(--nice-border, #e0e0e0)",
+          text: "var(--nice-text-secondary, #e0e0e0)",
           axis: "var(--nice-text-secondary, #555)",
           grid: "var(--nice-text, #333)"
         };
@@ -3080,13 +3103,13 @@ function nn({
     }
   }, [F]), re = K(() => {
     var k;
-    const A = [];
+    const z = [];
     for (const d of e)
       if (d.type === "scatter3d") {
         const x = d, S = x.points.map((E) => {
-          var z, W, T, le, fe;
+          var A, W, T, le, fe;
           const N = Z(E), _ = Me(N, w, U);
-          let g = (z = x.marker) == null ? void 0 : z.color;
+          let g = (A = x.marker) == null ? void 0 : A.color;
           if (Array.isArray((W = x.marker) == null ? void 0 : W.color)) {
             const be = x.points.indexOf(E);
             g = ke(
@@ -3109,7 +3132,7 @@ function nn({
             original: E
           };
         });
-        A.push({ type: "scatter", points: S, data: d });
+        z.push({ type: "scatter", points: S, data: d });
       } else if (d.type === "surface" || d.type === "wireframe") {
         const x = d, S = [];
         for (let E = 0; E < x.xData.length; E++)
@@ -3118,35 +3141,35 @@ function nn({
               x: x.xData[E],
               y: x.yData[N],
               z: x.zData[E][N]
-            }, g = Z(_), M = Me(g, w, U), z = ke(
+            }, g = Z(_), M = Me(g, w, U), A = ke(
               ((k = x.colorData) == null ? void 0 : k[E][N]) ?? x.zData[E][N],
               X.colorMin,
               X.colorMax,
               x.colorScale || "viridis"
             );
-            S.push({ ...M, color: z, size: 3, original: _ });
+            S.push({ ...M, color: A, size: 3, original: _ });
           }
-        A.push({ type: d.type, points: S, data: d });
+        z.push({ type: d.type, points: S, data: d });
       }
-    for (const d of A)
+    for (const d of z)
       d.points.sort((x, S) => x.depth - S.depth);
-    return A;
+    return z;
   }, [e, U, w, Z, X]), ie = K(() => {
     var d, x, S;
     if (!m)
       return null;
-    const A = 1.2, k = {
+    const z = 1.2, k = {
       x: [
-        Me({ x: -A, y: 0, z: 0 }, w, U),
-        Me({ x: A, y: 0, z: 0 }, w, U)
+        Me({ x: -z, y: 0, z: 0 }, w, U),
+        Me({ x: z, y: 0, z: 0 }, w, U)
       ],
       y: [
-        Me({ x: 0, y: -A, z: 0 }, w, U),
-        Me({ x: 0, y: A, z: 0 }, w, U)
+        Me({ x: 0, y: -z, z: 0 }, w, U),
+        Me({ x: 0, y: z, z: 0 }, w, U)
       ],
       z: [
-        Me({ x: 0, y: 0, z: -A }, w, U),
-        Me({ x: 0, y: 0, z: A }, w, U)
+        Me({ x: 0, y: 0, z: -z }, w, U),
+        Me({ x: 0, y: 0, z }, w, U)
       ]
     };
     return /* @__PURE__ */ u("g", { className: "nice-3d-plot__axes", children: [
@@ -3247,8 +3270,8 @@ function nn({
         ),
         /* @__PURE__ */ u("svg", { width: "100%", height: "100%", style: { position: "absolute", top: 0, left: 0 }, children: [
           ie,
-          re.map((A, k) => /* @__PURE__ */ u("g", { className: "nice-3d-plot__data", children: [
-            A.type === "scatter" && A.points.map((d, x) => {
+          re.map((z, k) => /* @__PURE__ */ u("g", { className: "nice-3d-plot__data", children: [
+            z.type === "scatter" && z.points.map((d, x) => {
               var S;
               return /* @__PURE__ */ o(
                 "circle",
@@ -3257,7 +3280,7 @@ function nn({
                   cy: `${d.y}%`,
                   r: d.size || 4,
                   fill: d.color || "var(--nice-primary, #3498db)",
-                  opacity: ((S = A.data.marker) == null ? void 0 : S.opacity) ?? 0.8,
+                  opacity: ((S = z.data.marker) == null ? void 0 : S.opacity) ?? 0.8,
                   style: { cursor: te ? "pointer" : void 0 },
                   onMouseEnter: () => {
                     ue({ point: d.original, dataIndex: k }), V == null || V(d.original, k);
@@ -3270,7 +3293,7 @@ function nn({
                 x
               );
             }),
-            (A.type === "surface" || A.type === "wireframe") && A.points.map((d, x) => /* @__PURE__ */ o(
+            (z.type === "surface" || z.type === "wireframe") && z.points.map((d, x) => /* @__PURE__ */ o(
               "rect",
               {
                 x: `${d.x - 1}%`,
@@ -3278,11 +3301,11 @@ function nn({
                 width: "2%",
                 height: "2%",
                 fill: d.color || "var(--nice-primary, #3498db)",
-                opacity: A.data.opacity ?? 0.7
+                opacity: z.data.opacity ?? 0.7
               },
               x
             ))
-          ] }, A.data.id || k))
+          ] }, z.data.id || k))
         ] }),
         l && e.length > 1 && /* @__PURE__ */ o(
           "div",
@@ -3298,7 +3321,7 @@ function nn({
               ...c === "bottom-right" && { bottom: 8, right: 8 },
               ...c === "bottom-left" && { bottom: 8, left: 8 }
             },
-            children: e.map((A, k) => /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            children: e.map((z, k) => /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
               /* @__PURE__ */ o(
                 "span",
                 {
@@ -3310,8 +3333,8 @@ function nn({
                   }
                 }
               ),
-              A.name
-            ] }, A.id || k))
+              z.name
+            ] }, z.id || k))
           }
         ),
         s && /* @__PURE__ */ u(
@@ -3342,7 +3365,7 @@ function nn({
               bottom: 8,
               left: 8,
               background: "var(--nice-overlay-80, rgba(0, 0, 0, 0.8))",
-              color: "var(--nice-bg, #fff)",
+              color: "var(--nice-text-on-primary, #fff)",
               padding: "4px 8px",
               borderRadius: 4,
               fontSize: "0.75rem"
@@ -3361,7 +3384,7 @@ function nn({
         /* @__PURE__ */ o("div", { style: { position: "absolute", bottom: 8, right: 8, display: "flex", gap: 4 }, children: /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => de(Pe),
+            onClick: () => de(qe),
             style: { padding: "4px 8px", fontSize: "0.75rem", cursor: "pointer" },
             children: "Reset View"
           }
@@ -3569,7 +3592,9 @@ function rn({
   labelType: l = "element",
   width: c = "100%",
   height: h = 500,
-  backgroundColor: p = "var(--nice-text, #000000)",
+  // A molecule viewport is a black stage in both themes; --nice-text turned it white
+  // in the dark theme.
+  backgroundColor: p = "#000000",
   enableRotation: y = !0,
   enableZoom: m = !0,
   showControls: $ = !0,
@@ -3586,7 +3611,7 @@ function rn({
   className: pe,
   styleOverride: se
 }) {
-  const ne = Ae(null), [Y, ce] = j(null), [ue, me] = j({
+  const ne = ze(null), [Y, ce] = j(null), [ue, me] = j({
     rotX: 0,
     rotY: 0,
     rotZ: 0,
@@ -3613,23 +3638,23 @@ function rn({
   const { center: re, scale: ie } = K(() => {
     if (!Y || Y.atoms.length === 0)
       return { center: { x: 0, y: 0, z: 0 }, scale: 1 };
-    let g = 1 / 0, M = -1 / 0, z = 1 / 0, W = -1 / 0, T = 1 / 0, le = -1 / 0;
+    let g = 1 / 0, M = -1 / 0, A = 1 / 0, W = -1 / 0, T = 1 / 0, le = -1 / 0;
     for (const ye of Y.atoms)
-      g = Math.min(g, ye.x), M = Math.max(M, ye.x), z = Math.min(z, ye.y), W = Math.max(W, ye.y), T = Math.min(T, ye.z), le = Math.max(le, ye.z);
+      g = Math.min(g, ye.x), M = Math.max(M, ye.x), A = Math.min(A, ye.y), W = Math.max(W, ye.y), T = Math.min(T, ye.z), le = Math.max(le, ye.z);
     const fe = {
       x: (g + M) / 2,
-      y: (z + W) / 2,
+      y: (A + W) / 2,
       z: (T + le) / 2
-    }, be = Math.max(M - g, W - z, le - T), ge = be > 0 ? 35 / be : 1;
+    }, be = Math.max(M - g, W - A, le - T), ge = be > 0 ? 35 / be : 1;
     return { center: fe, scale: ge };
-  }, [Y]), A = K(() => Y ? Y.atoms.filter((g) => !i && g.element === "H" || !s && g.residueName === "HOH" ? !1 : g.visible !== !1).map((g) => ({
+  }, [Y]), z = K(() => Y ? Y.atoms.filter((g) => !i && g.element === "H" || !s && g.residueName === "HOH" ? !1 : g.visible !== !1).map((g) => ({
     atom: g,
     ...je(g.x, g.y, g.z, ue, re, ie)
   })).sort((g, M) => g.depth - M.depth) : [], [Y, ue, re, ie, i, s]), k = K(() => Y ? Y.bonds.filter((g) => g.visible !== !1).map((g) => {
-    const M = Y.atoms[g.atom1], z = Y.atoms[g.atom2];
-    if (!M || !z || !i && (M.element === "H" || z.element === "H"))
+    const M = Y.atoms[g.atom1], A = Y.atoms[g.atom2];
+    if (!M || !A || !i && (M.element === "H" || A.element === "H"))
       return null;
-    const W = je(M.x, M.y, M.z, ue, re, ie), T = je(z.x, z.y, z.z, ue, re, ie);
+    const W = je(M.x, M.y, M.z, ue, re, ie), T = je(A.x, A.y, A.z, ue, re, ie);
     return {
       bond: g,
       x1: W.x,
@@ -3638,41 +3663,41 @@ function rn({
       y2: T.y,
       depth: (W.depth + T.depth) / 2,
       color1: M.color,
-      color2: z.color
+      color2: A.color
     };
-  }).filter(Boolean).sort((g, M) => g.depth - M.depth) : [], [Y, ue, re, ie, i]), d = P(
+  }).filter(Boolean).sort((g, M) => g.depth - M.depth) : [], [Y, ue, re, ie, i]), d = q(
     (g) => {
       y && (X(!0), ae({ x: g.clientX, y: g.clientY, view: { ...ue } }));
     },
     [y, ue]
-  ), x = P(
+  ), x = q(
     (g) => {
       if (!xe || !Z)
         return;
-      const M = g.clientX - Z.x, z = g.clientY - Z.y;
+      const M = g.clientX - Z.x, A = g.clientY - Z.y;
       g.shiftKey ? me({
         ...Z.view,
         panX: Z.view.panX + M * 0.1,
-        panY: Z.view.panY + z * 0.1
+        panY: Z.view.panY + A * 0.1
       }) : me({
         ...Z.view,
         rotY: Z.view.rotY + M * 0.5,
-        rotX: Z.view.rotX + z * 0.5
+        rotX: Z.view.rotX + A * 0.5
       });
     },
     [xe, Z]
-  ), S = P(() => {
+  ), S = q(() => {
     X(!1), ae(null);
-  }, []), E = P(
+  }, []), E = q(
     (g) => {
       if (!m)
         return;
       g.preventDefault();
       const M = g.deltaY > 0 ? 0.9 : 1.1;
-      me((z) => ({ ...z, zoom: Math.max(0.1, Math.min(10, z.zoom * M)) }));
+      me((A) => ({ ...A, zoom: Math.max(0.1, Math.min(10, A.zoom * M)) }));
     },
     [m]
-  ), N = P(
+  ), N = q(
     (g) => {
       switch (Q) {
         case "space-filling":
@@ -3687,7 +3712,7 @@ function rn({
       }
     },
     [Q]
-  ), _ = P(
+  ), _ = q(
     (g) => (Q === "wireframe" ? 1 : Q === "stick" ? 3 : 2) * (g.order || 1),
     [Q]
   );
@@ -3725,7 +3750,7 @@ function rn({
             },
             `bond-${M}`
           )),
-          A.map(({ atom: g, x: M, y: z }) => {
+          z.map(({ atom: g, x: M, y: A }) => {
             var fe;
             const W = (fe = te == null ? void 0 : te.atoms) == null ? void 0 : fe.includes(g.id), T = (G == null ? void 0 : G.id) === g.id, le = N(g);
             return /* @__PURE__ */ u("g", { children: [
@@ -3733,10 +3758,10 @@ function rn({
                 "circle",
                 {
                   cx: `${M}%`,
-                  cy: `${z}%`,
+                  cy: `${A}%`,
                   r: le,
-                  fill: g.color || tt[g.element] || "var(--nice-text-secondary, #808080)",
-                  stroke: W ? V : T ? "var(--nice-bg, #fff)" : "none",
+                  fill: g.color || tt[g.element] || "#808080",
+                  stroke: W ? V : T ? "#fff" : "none",
                   strokeWidth: W || T ? 2 : 0,
                   style: { cursor: "pointer" },
                   onMouseEnter: () => {
@@ -3752,8 +3777,8 @@ function rn({
                 "text",
                 {
                   x: `${M}%`,
-                  y: `${z - le * 0.15}%`,
-                  fill: "var(--nice-bg, #fff)",
+                  y: `${A - le * 0.15}%`,
+                  fill: "var(--nice-text-on-primary, #fff)",
                   fontSize: "10",
                   textAnchor: "middle",
                   dominantBaseline: "middle",
@@ -3766,10 +3791,10 @@ function rn({
           w.map((g) => {
             if (g.atoms.length < 2)
               return null;
-            const M = Y.atoms[g.atoms[0]], z = Y.atoms[g.atoms[1]];
-            if (!M || !z)
+            const M = Y.atoms[g.atoms[0]], A = Y.atoms[g.atoms[1]];
+            if (!M || !A)
               return null;
-            const W = je(M.x, M.y, M.z, ue, re, ie), T = je(z.x, z.y, z.z, ue, re, ie);
+            const W = je(M.x, M.y, M.z, ue, re, ie), T = je(A.x, A.y, A.z, ue, re, ie);
             return /* @__PURE__ */ u("g", { children: [
               /* @__PURE__ */ o(
                 "line",
@@ -3808,7 +3833,7 @@ function rn({
               position: "absolute",
               top: 8,
               left: 8,
-              color: "var(--nice-bg, #fff)",
+              color: "var(--nice-text-primary, #fff)",
               fontSize: "0.8rem"
             },
             children: [
@@ -3834,7 +3859,7 @@ function rn({
               bottom: 8,
               left: 8,
               background: "var(--nice-overlay-80, rgba(0, 0, 0, 0.8))",
-              color: "var(--nice-bg, #fff)",
+              color: "var(--nice-text-on-primary, #fff)",
               padding: "4px 8px",
               borderRadius: 4,
               fontSize: "0.75rem"
@@ -4027,7 +4052,7 @@ function on({
   className: Y,
   style: ce
 }) {
-  const ue = Ae(null), [me, xe] = j(1), [X, Z] = j({ x: 0, y: 0 }), [ae, G] = j(!1), [C, Q] = j(null), [ee, re] = j(null), [ie, A] = j(t), [k, d] = j(/* @__PURE__ */ new Set()), x = K(() => e ? typeof e == "string" ? Wt(e) : e : null, [e]), S = K(() => {
+  const ue = ze(null), [me, xe] = j(1), [X, Z] = j({ x: 0, y: 0 }), [ae, G] = j(!1), [C, Q] = j(null), [ee, re] = j(null), [ie, z] = j(t), [k, d] = j(/* @__PURE__ */ new Set()), x = K(() => e ? typeof e == "string" ? Wt(e) : e : null, [e]), S = K(() => {
     if (!x)
       return null;
     const v = (D) => {
@@ -4046,21 +4071,21 @@ function on({
     it(S, D, { value: 0 }), ot(S, v, 0);
     const f = Math.max(...Array.from(v.values()));
     return { positions: { x: v, y: D }, leafCount: B, maxX: f || 1 };
-  }, [S]), g = K(() => S ? nt(S) : [], [S]), M = typeof V == "number" ? V : 800, z = typeof L == "number" ? L : 500, W = M - H * 2, T = z - H * 2, le = (v) => H + v / _ * W * 0.7, fe = (v) => H + v / (N - 1 || 1) * T, be = (v, D) => {
+  }, [S]), g = K(() => S ? nt(S) : [], [S]), M = typeof V == "number" ? V : 800, A = typeof L == "number" ? L : 500, W = M - H * 2, T = A - H * 2, le = (v) => H + v / _ * W * 0.7, fe = (v) => H + v / (N - 1 || 1) * T, be = (v, D) => {
     const B = D / (N - 1 || 1) * 2 * Math.PI - Math.PI / 2, f = v / _ * Math.min(W, T) * 0.4;
     return {
       x: M / 2 + f * Math.cos(B),
-      y: z / 2 + f * Math.sin(B)
+      y: A / 2 + f * Math.sin(B)
     };
   }, ge = (v) => {
     const D = E.x.get(v) || 0, B = E.y.get(v) || 0;
     return ie === "radial" || ie === "circular" ? be(D, B) : { x: le(D), y: fe(B) };
-  }, ye = P(
+  }, ye = q(
     (v) => {
       U && (G(!0), Q({ x: v.clientX, y: v.clientY, pan: { ...X } }));
     },
     [U, X]
-  ), we = P(
+  ), we = q(
     (v) => {
       if (!ae || !C)
         return;
@@ -4068,9 +4093,9 @@ function on({
       Z({ x: C.pan.x + D, y: C.pan.y + B });
     },
     [ae, C]
-  ), Se = P(() => {
+  ), Se = q(() => {
     G(!1), Q(null);
-  }, []), Le = P(
+  }, []), Le = q(
     (v) => {
       if (!oe)
         return;
@@ -4079,7 +4104,7 @@ function on({
       xe((B) => Math.max(0.1, Math.min(5, B * D)));
     },
     [oe]
-  ), _e = P((v) => {
+  ), _e = q((v) => {
     d((D) => {
       const B = new Set(D);
       return B.has(v) ? B.delete(v) : B.add(v), B;
@@ -4232,7 +4257,7 @@ function on({
           x: D.x,
           y: D.y - i - 2,
           fontSize: p * 0.8,
-          fill: "var(--nice-accent-pink, #e91e63)",
+          fill: "var(--nice-color-accent-pink, #e91e63)",
           textAnchor: "middle",
           children: v.bootstrap.toFixed(0)
         }
@@ -4402,7 +4427,7 @@ function on({
                 "select",
                 {
                   value: ie,
-                  onChange: (v) => A(v.target.value),
+                  onChange: (v) => z(v.target.value),
                   style: { padding: "2px 4px", fontSize: "0.75rem" },
                   children: [
                     /* @__PURE__ */ o("option", { value: "rectangular", children: "Rectangular" }),
@@ -4502,7 +4527,7 @@ function Yt(e, t, n, r) {
   const c = n / (2 * Math.PI), h = n / 2 + c * De(t) * a, p = r / 2 - c * l * 1.3523 * Math.sign(e);
   return { x: h, y: p };
 }
-const qt = `
+const Pt = `
 M 50,30 L 55,28 60,30 65,35 60,40 55,42 50,40 Z
 M 70,25 L 80,23 85,28 87,35 85,45 78,50 72,48 68,40 70,32 Z
 M 55,55 L 58,52 65,55 68,60 65,70 58,75 52,70 50,60 Z
@@ -4545,9 +4570,9 @@ function sn({
   style: xe
 }) {
   var Ee, v, D, B;
-  const X = Ae(null), [Z, ae] = j(l), [G, C] = j(c), [Q, ee] = j(!1), [re, ie] = j(null), [A, k] = j(null), [d, x] = j(e), [S, E] = j(
+  const X = ze(null), [Z, ae] = j(l), [G, C] = j(c), [Q, ee] = j(!1), [re, ie] = j(null), [z, k] = j(null), [d, x] = j(e), [S, E] = j(
     new Set(t.filter((f) => f.visible !== !1).map((f) => f.id))
-  ), N = typeof te == "number" ? te : 800, _ = typeof V == "number" ? V : 400, g = P(
+  ), N = typeof te == "number" ? te : 800, _ = typeof V == "number" ? V : 400, g = q(
     (f, b) => {
       switch (d) {
         case "mercator":
@@ -4562,13 +4587,13 @@ function sn({
       }
     },
     [d, N, _, Z]
-  ), M = P(
+  ), M = q(
     (f, b) => {
       const O = f / N * 360 - 180, I = 90 - b / _ * 180;
       return { lat: Math.max(-90, Math.min(90, I)), lng: Math.max(-180, Math.min(180, O)) };
     },
     [N, _]
-  ), z = K(() => {
+  ), A = K(() => {
     const f = [];
     for (let b = -90 + p; b < 90; b += p) {
       let O = "";
@@ -4610,12 +4635,12 @@ function sn({
     for (const b of t)
       S.has(b.id) && b.polygons && f.push(...b.polygons);
     return f;
-  }, [i, t, S]), be = P(
+  }, [i, t, S]), be = q(
     (f) => {
       L && (ee(!0), ie({ x: f.clientX, y: f.clientY, center: { ...Z } }));
     },
     [L, Z]
-  ), ge = P(
+  ), ge = q(
     (f) => {
       if (!Q || !re)
         return;
@@ -4626,9 +4651,9 @@ function sn({
       });
     },
     [Q, re, N, _, G]
-  ), ye = P(() => {
+  ), ye = q(() => {
     ee(!1), ie(null);
-  }, []), we = P(
+  }, []), we = q(
     (f) => {
       if (!H)
         return;
@@ -4637,7 +4662,7 @@ function sn({
       C((O) => Math.max(0.5, Math.min(20, O * b)));
     },
     [H]
-  ), Se = P(
+  ), Se = q(
     (f) => {
       var R;
       if (!Y)
@@ -4653,7 +4678,7 @@ function sn({
     const b = g(f.position.lat, f.position.lng);
     if (b.visible === !1)
       return null;
-    const O = (A == null ? void 0 : A.id) === f.id, I = (f.size || 8) * (O ? 1.3 : 1), R = (() => {
+    const O = (z == null ? void 0 : z.id) === f.id, I = (f.size || 8) * (O ? 1.3 : 1), R = (() => {
       switch (f.shape) {
         case "square":
           return /* @__PURE__ */ o("rect", { x: b.x - I / 2, y: b.y - I / 2, width: I, height: I });
@@ -4689,7 +4714,7 @@ function sn({
     return /* @__PURE__ */ u(
       "g",
       {
-        fill: f.color || "var(--nice-accent-pink, #e91e63)",
+        fill: f.color || "var(--nice-color-accent-pink, #e91e63)",
         stroke: O ? "var(--nice-text, #000)" : "var(--nice-bg, #fff)",
         strokeWidth: O ? 2 : 1,
         style: { cursor: "pointer" },
@@ -4792,7 +4817,7 @@ function sn({
       children: [
         /* @__PURE__ */ u("svg", { width: "100%", height: "100%", children: [
           /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("marker", { id: "arrow", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", children: /* @__PURE__ */ o("path", { d: "M0,0 L0,6 L9,3 z", fill: "var(--nice-primary, #2196f3)" }) }) }),
-          d === "orthographic" && W && /* @__PURE__ */ u(ze, { children: [
+          d === "orthographic" && W && /* @__PURE__ */ u(Ae, { children: [
             /* @__PURE__ */ o(
               "path",
               {
@@ -4813,7 +4838,7 @@ function sn({
               }
             )
           ] }),
-          h && z.map((f, b) => /* @__PURE__ */ o(
+          h && A.map((f, b) => /* @__PURE__ */ o(
             "path",
             {
               d: f,
@@ -4827,7 +4852,7 @@ function sn({
           y && d !== "orthographic" && /* @__PURE__ */ o("g", { transform: `scale(${N / 100}, ${_ / 100})`, children: /* @__PURE__ */ o(
             "path",
             {
-              d: qt,
+              d: Pt,
               fill: $,
               stroke: F,
               strokeWidth: 0.2
@@ -4844,7 +4869,9 @@ function sn({
               position: "absolute",
               [(Ee = U.position) != null && Ee.includes("bottom") ? "bottom" : "top"]: 8,
               [(v = U.position) != null && v.includes("right") ? "right" : "left"]: 8,
-              background: "var(--nice-overlay-light-90, rgba(255, 255, 255, 0.9))",
+              // Theme surface + theme text: a fixed white box inherited white text in dark themes.
+              background: "color-mix(in srgb, var(--nice-bg-elevated, #ffffff) 90%, transparent)",
+              color: "var(--nice-text-primary, #333)",
               padding: "4px 8px",
               borderRadius: 4,
               fontSize: "0.7rem"
@@ -4856,7 +4883,8 @@ function sn({
                   style: {
                     width: Ne.width,
                     height: 4,
-                    background: "var(--nice-text, #333)",
+                    // The bar is ink, drawn in the label's colour.
+                    background: "currentColor",
                     marginBottom: 2
                   }
                 }
@@ -4897,23 +4925,23 @@ function sn({
             ]
           }
         ),
-        (A == null ? void 0 : A.tooltip) && /* @__PURE__ */ o(
+        (z == null ? void 0 : z.tooltip) && /* @__PURE__ */ o(
           "div",
           {
             style: {
               position: "absolute",
-              top: g(A.position.lat, A.position.lng).y - 30,
-              left: g(A.position.lat, A.position.lng).x,
+              top: g(z.position.lat, z.position.lng).y - 30,
+              left: g(z.position.lat, z.position.lng).x,
               transform: "translateX(-50%)",
               background: "var(--nice-overlay-80, rgba(0, 0, 0, 0.8))",
-              color: "var(--nice-bg, #fff)",
+              color: "var(--nice-text-on-primary, #fff)",
               padding: "4px 8px",
               borderRadius: 4,
               fontSize: "0.75rem",
               pointerEvents: "none",
               whiteSpace: "nowrap"
             },
-            children: A.tooltip
+            children: z.tooltip
           }
         ),
         /* @__PURE__ */ u(
@@ -4923,7 +4951,8 @@ function sn({
               position: "absolute",
               bottom: 8,
               right: 8,
-              background: "var(--nice-overlay-light-90, rgba(255, 255, 255, 0.9))",
+              // Theme surface at 90 %, so the box flips with its theme-coloured text.
+              background: "color-mix(in srgb, var(--nice-bg-elevated, #ffffff) 90%, transparent)",
               padding: "2px 6px",
               borderRadius: 4,
               fontSize: "0.7rem",