@memobit/libs 2.1.0 → 3.1.0

package/dist/components/SplitPanel/SplitPanel2.js

@@ -0,0 +1,69 @@
+import './SplitPanel.css';
+import { Tooltip as M } from "../Tooltip/Tooltip2.js";
+/* empty css           */
+import { useCallback as D, useEffect as h, useRef as f, useState as k } from "react";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var C = ({ children: c, panel: w, isPanelOpen: t, onPanelClose: l, panelTitle: d, defaultLeftPercent: y = 55, minLeftPercent: a = 25, minRightPercent: u = 20, className: p = "" }) => {
+  const [_, b] = k(y), i = f(null), o = f(!1);
+  h(() => (t ? document.body.classList.add("split-panel-active") : document.body.classList.remove("split-panel-active"), () => {
+    document.body.classList.remove("split-panel-active");
+  }), [t]);
+  const L = D((s) => {
+    s.preventDefault(), o.current = !0, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+    const n = (N) => {
+      if (!o.current || !i.current) return;
+      const v = i.current.getBoundingClientRect(), g = (N.clientX - v.left) / v.width * 100, E = Math.max(a, Math.min(100 - u, g));
+      b(E);
+    }, m = () => {
+      o.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", m);
+    };
+    window.addEventListener("mousemove", n), window.addEventListener("mouseup", m);
+  }, [a, u]);
+  return h(() => {
+    const s = (n) => {
+      n.key === "Escape" && t && l();
+    };
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [t, l]), t ? /* @__PURE__ */ r("div", {
+    className: `split-panel split-panel--open ${p}`,
+    ref: i,
+    children: [
+      /* @__PURE__ */ e("div", {
+        className: "split-panel__left",
+        style: { width: `${_}%` },
+        children: c
+      }),
+      /* @__PURE__ */ e("div", {
+        className: "split-panel__divider",
+        onMouseDown: L,
+        children: /* @__PURE__ */ e("div", { className: "split-panel__divider-handle" })
+      }),
+      /* @__PURE__ */ r("div", {
+        className: "split-panel__right",
+        children: [/* @__PURE__ */ r("div", {
+          className: "split-panel__right-header",
+          children: [d && /* @__PURE__ */ e("h2", {
+            className: "split-panel__right-title",
+            children: d
+          }), /* @__PURE__ */ e(M, {
+            title: "Close panel",
+            children: /* @__PURE__ */ e("button", {
+              className: "split-panel__close",
+              onClick: l,
+              children: "✕"
+            })
+          })]
+        }), /* @__PURE__ */ e("div", {
+          className: "split-panel__right-content",
+          children: w
+        })]
+      })
+    ]
+  }) : /* @__PURE__ */ e("div", {
+    className: `split-panel ${p}`,
+    children: c
+  });
+};
+export {
+  C as SplitPanel
+};

package/dist/components/Splitter/Splitter.css

@@ -0,0 +1 @@
+.splitter{width:100%;display:flex;overflow:hidden}.splitter--horizontal{flex-direction:row}.splitter--horizontal .splitter__gutter{width:var(--_splitter-gutter);cursor:col-resize}.splitter--horizontal .splitter__gutter .splitter__gutter-grip{width:var(--spacing-2);height:var(--spacing-32)}.splitter--vertical{flex-direction:column}.splitter--vertical .splitter__gutter{height:var(--_splitter-gutter);cursor:row-resize}.splitter--vertical .splitter__gutter .splitter__gutter-grip{width:var(--spacing-32);height:var(--spacing-2)}.splitter__pane{box-sizing:border-box;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;display:flex;overflow:auto}.splitter__pane--collapsed{overflow:hidden}.splitter__gutter{background:var(--delimiter-color);transition:background var(--transition-fast);touch-action:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.splitter__gutter:hover,.splitter__gutter:focus-visible{background:var(--body-accent-color);outline:none}.splitter__gutter:hover .splitter__gutter-grip,.splitter__gutter:focus-visible .splitter__gutter-grip{background:var(--card-background-color)}.splitter__gutter-grip{border-radius:var(--radius-full);background:var(--body-sub-title-color);pointer-events:none}

package/dist/components/Splitter/Splitter2.js

@@ -0,0 +1,89 @@
+import './Splitter.css';
+/* empty css         */
+import { Fragment as K, useCallback as h, useEffect as U, useMemo as $, useRef as I, useState as j } from "react";
+import { jsx as D, jsxs as E } from "react/jsx-runtime";
+var L = 10, F = (c) => {
+  const m = c.reduce((e, i) => e + (i.size ?? 0), 0), d = c.filter((e) => e.size === void 0).length;
+  if (d === 0) return m === 0 ? c.map(() => 100 / c.length) : c.map((e) => (e.size ?? 0) / m * 100);
+  const z = Math.max(0, 100 - m) / d;
+  return c.map((e) => e.size ?? z);
+}, Z = ({ className: c = "", collapsible: m = !1, gutterSize: d = 6, keyboardStep: z = 2, onResize: e, orientation: i = "horizontal", panes: g, resetOnDoubleClick: y = !0 }) => {
+  const f = $(() => F(g), [g]), [o, S] = j(f), B = I(null), P = I(null);
+  U(() => {
+    S((t) => t.length === f.length ? t : f);
+  }, [f]);
+  const A = h((t) => g[t]?.minSize ?? L, [g]), _ = h((t, r, n, s) => {
+    const l = A(t), a = A(t + 1), p = r + n;
+    let u = r + s;
+    return u < l && (u = m && u < l / 2 ? 0 : l), p - u < a && (u = m && p - u < a / 2 ? p : p - a), [u, p - u];
+  }, [m, A]), w = h((t, [r, n]) => {
+    const s = o.map((l, a) => a === t ? r : a === t + 1 ? n : l);
+    return S(s), s;
+  }, [o]), M = h((t, r) => {
+    t.preventDefault(), t.currentTarget.setPointerCapture(t.pointerId), P.current = {
+      index: r,
+      startA: o[r],
+      startB: o[r + 1],
+      startPosition: i === "horizontal" ? t.clientX : t.clientY
+    };
+  }, [i, o]), C = h((t) => {
+    const r = P.current, n = B.current;
+    if (!r || !n) return;
+    const s = n.getBoundingClientRect(), l = i === "horizontal" ? s.width : s.height;
+    if (l === 0) return;
+    const a = ((i === "horizontal" ? t.clientX : t.clientY) - r.startPosition) / l * 100;
+    w(r.index, _(r.index, r.startA, r.startB, a));
+  }, [
+    w,
+    i,
+    _
+  ]), N = h((t) => {
+    P.current && (t.currentTarget.releasePointerCapture(t.pointerId), P.current = null, e?.(o));
+  }, [e, o]), T = h((t, r) => {
+    const n = i === "horizontal" ? "ArrowLeft" : "ArrowUp", s = i === "horizontal" ? "ArrowRight" : "ArrowDown";
+    if (t.key !== n && t.key !== s) return;
+    t.preventDefault();
+    const l = t.key === s ? 1 : -1;
+    e?.(w(r, _(r, o[r], o[r + 1], l * z)));
+  }, [
+    w,
+    z,
+    e,
+    i,
+    _,
+    o
+  ]), k = h(() => {
+    y && (S(f), e?.(f));
+  }, [
+    f,
+    e,
+    y
+  ]), v = { "--_splitter-gutter": `${d}px` };
+  return /* @__PURE__ */ D("div", {
+    className: [
+      "splitter",
+      `splitter--${i}`,
+      c
+    ].filter(Boolean).join(" "),
+    ref: B,
+    style: v,
+    children: g.map((t, r) => /* @__PURE__ */ E(K, { children: [/* @__PURE__ */ D("div", {
+      className: `splitter__pane${o[r] === 0 ? " splitter__pane--collapsed" : ""}`,
+      style: { flexBasis: `${o[r]}%` },
+      children: t.content
+    }), r < g.length - 1 && /* @__PURE__ */ D("div", {
+      className: "splitter__gutter",
+      onDoubleClick: k,
+      onKeyDown: (n) => T(n, r),
+      onPointerDown: (n) => M(n, r),
+      onPointerMove: C,
+      onPointerUp: N,
+      tabIndex: 0,
+      title: y ? "Drag to resize — double-click to reset" : "Drag to resize",
+      children: /* @__PURE__ */ D("span", { className: "splitter__gutter-grip" })
+    })] }, t.id))
+  });
+};
+export {
+  Z as Splitter
+};

package/dist/components/StackedBar/StackedBar.css

@@ -0,0 +1 @@
+.stacked-bar{background-color:var(--progress-bar-background-color);border-radius:var(--radius);font-weight:var(--font-weight-medium);display:flex;overflow:hidden}.stacked-bar--horizontal{width:100%;height:var(--spacing-16);flex-direction:row}.stacked-bar--horizontal.stacked-bar--thin{height:var(--spacing-6);border-radius:var(--spacing-24)}.stacked-bar--vertical{width:var(--spacing-16);height:var(--spacing-200);flex-direction:column-reverse}.stacked-bar--vertical.stacked-bar--thin{width:var(--spacing-6);border-radius:var(--spacing-24)}.stacked-bar__segment{background-color:var(--progress-default-bar-fill-color);color:#fff;font-size:var(--font-size-xs);line-height:var(--line-height-tight);white-space:nowrap;cursor:default;align-items:center;display:flex;overflow:hidden}.stacked-bar__segment--default{background-color:var(--progress-default-bar-fill-color)}.stacked-bar__segment--success{background-color:var(--progress-success-bar-fill-color)}.stacked-bar__segment--warning{background-color:var(--progress-warning-bar-fill-color)}.stacked-bar__segment--danger{background-color:var(--progress-danger-bar-fill-color)}.stacked-bar__segment--info{background-color:var(--progress-info-bar-fill-color)}.stacked-bar__segment--striped{background-image:linear-gradient(45deg,#ffffff2e 25%,#0000 25% 50%,#ffffff2e 50% 75%,#0000 75%,#0000);background-size:1rem 1rem}.stacked-bar__segment--hatched{background-image:repeating-linear-gradient(45deg,#0000,#0000 2px,#0000002e 2px 4px)}.stacked-bar__segment--animated{animation:1s linear infinite stacked-bar-stripes}.stacked-bar--horizontal .stacked-bar__segment{min-width:0;height:100%;padding:0 var(--spacing-8);transition:width .3s}.stacked-bar--vertical .stacked-bar__segment{justify-content:center;width:100%;min-height:0;padding:0;transition:height .3s}.stacked-bar__segment-label{text-overflow:ellipsis;text-shadow:-1px -1px #0006,1px -1px #0006,-1px 1px #0006,1px 1px #0006;max-width:100%;display:block;overflow:hidden}.stacked-bar--thin .stacked-bar__segment-label,.stacked-bar--vertical .stacked-bar__segment-label{display:none}.stacked-bar--horizontal.stacked-bar--thin .stacked-bar__segment{padding:0}.stacked-bar--separators .stacked-bar__segment+.stacked-bar__segment{border-left:var(--spacing-2) solid var(--progress-bar-background-color)}.stacked-bar--separators.stacked-bar--vertical .stacked-bar__segment+.stacked-bar__segment{border-bottom:var(--spacing-2) solid var(--progress-bar-background-color);border-left:0}@keyframes stacked-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}

package/dist/components/StackedBar/StackedBar2.js

@@ -0,0 +1,50 @@
+import './StackedBar.css';
+import { Tooltip as $ } from "../Tooltip/Tooltip2.js";
+import { format2Digits as x } from "../../helpers/Numbers.js";
+/* empty css           */
+import { useMemo as M } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var j = (r, o, c) => {
+  const i = `${x(o)}%`;
+  return r.label && c ? `${r.label} - ${i}` : r.label ? r.label : i;
+}, w = ({ animated: r = !1, height: o, normalize: c = !0, orientation: i = "horizontal", segments: a, separators: m = !1, showLabels: p = !0, showPercentage: b = !0, thin: h = !1, width: d }) => {
+  const k = M(() => {
+    if (a.length === 0) return [];
+    if (!c) return a.map((t) => Math.max(0, t.value));
+    const e = a.reduce((t, l) => t + Math.max(0, l.value), 0);
+    return e === 0 ? a.map(() => 0) : a.map((t) => Math.max(0, t.value) / e * 100);
+  }, [a, c]), v = i === "vertical", n = {};
+  return o !== void 0 && (n.height = o), d !== void 0 && (n.width = d), /* @__PURE__ */ s("div", {
+    className: [
+      "stacked-bar",
+      `stacked-bar--${i}`,
+      h ? "stacked-bar--thin" : "",
+      m ? "stacked-bar--separators" : ""
+    ].filter(Boolean).join(" "),
+    style: n,
+    children: a.map((e, t) => {
+      const l = k[t];
+      if (l <= 0) return null;
+      const _ = e.state || "default", u = e.pattern || "solid", f = j(e, l, b);
+      return /* @__PURE__ */ s($, {
+        title: f,
+        children: /* @__PURE__ */ s("div", {
+          className: [
+            "stacked-bar__segment",
+            `stacked-bar__segment--${_}`,
+            `stacked-bar__segment--${u}`,
+            r && u !== "solid" ? "stacked-bar__segment--animated" : ""
+          ].filter(Boolean).join(" "),
+          style: v ? { height: `${l}%` } : { width: `${l}%` },
+          children: p && /* @__PURE__ */ s("span", {
+            className: "stacked-bar__segment-label",
+            children: f
+          })
+        })
+      }, `stacked-bar-segment-${t}`);
+    })
+  });
+};
+export {
+  w as StackedBar
+};

package/dist/components/Stats/Stats.css

@@ -0,0 +1 @@
+.stats{align-items:center;gap:var(--spacing-16);padding:var(--spacing-12) var(--spacing-16);background-color:var(--card-background-accent-color);border-radius:var(--radius);flex-wrap:wrap;display:flex}.stats--align-center{justify-content:center}.stats--align-center .stats__item{text-align:center;align-items:center}.stats--align-center .stats__value{justify-content:center}.stats--size-small{padding:var(--spacing-8) var(--spacing-12);gap:var(--spacing-12)}.stats--size-small .stats__label{font-size:var(--font-size-xxs)}.stats--size-small .stats__value{font-size:var(--font-size-sm)}.stats__item{gap:var(--spacing-2);flex-direction:column;min-width:0;display:flex}.stats--dividers .stats__item+.stats__item{border-left:var(--spacing-1) solid var(--card-border-color);padding-left:var(--spacing-16)}.stats--size-small.stats--dividers .stats__item+.stats__item{padding-left:var(--spacing-12)}.stats__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--body-sub-title-color);text-transform:uppercase;letter-spacing:.04em}.stats__value{align-items:center;gap:var(--spacing-6);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--body-color);display:inline-flex}.stats__value--success{color:var(--button-success-background-color)}.stats__value--warning{color:var(--button-warning-background-color)}.stats__value--danger{color:var(--body-danger-color)}.stats__value--info{color:var(--button-info-background-color)}

package/dist/components/Stats/Stats2.js

@@ -0,0 +1,26 @@
+import './Stats.css';
+/* empty css      */
+import "react";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+var v = ({ items: t, dividers: l = !0, align: e = "left", size: r = "medium", className: i = "" }) => t.length === 0 ? null : /* @__PURE__ */ s("div", {
+  className: [
+    "stats",
+    `stats--align-${e}`,
+    `stats--size-${r}`,
+    l ? "stats--dividers" : "",
+    i
+  ].filter(Boolean).join(" "),
+  children: t.map((a, n) => /* @__PURE__ */ d("div", {
+    className: "stats__item",
+    children: [/* @__PURE__ */ s("span", {
+      className: "stats__label",
+      children: a.label
+    }), /* @__PURE__ */ s("span", {
+      className: `stats__value stats__value--${a.variant ?? "default"}`,
+      children: a.value
+    })]
+  }, `${a.label}-${n}`))
+});
+export {
+  v as Stats
+};

package/dist/components/StickyBar/StickyBar.css

@@ -0,0 +1 @@
+.sticky-bar{align-items:center;gap:var(--spacing-16);padding:var(--spacing-12) var(--spacing-16);background-color:var(--card-background-accent-color);border-radius:var(--radius);z-index:10;display:flex;position:sticky;left:0;right:0;box-shadow:0 4px 16px #0000002e}.sticky-bar--bottom{border-top:var(--spacing-1) solid var(--card-border-color);bottom:0}.sticky-bar--top{border-bottom:var(--spacing-1) solid var(--card-border-color);top:0}.sticky-bar__content{align-items:center;gap:var(--spacing-12);flex-wrap:wrap;flex:auto;min-width:0;display:flex}.sticky-bar--align-start .sticky-bar__content{justify-content:flex-start}.sticky-bar--align-center .sticky-bar__content{justify-content:center}.sticky-bar--align-end .sticky-bar__content{justify-content:flex-end}.sticky-bar--align-between .sticky-bar__content{justify-content:space-between}.sticky-bar__close{flex-shrink:0}@media (width<=768px){.sticky-bar{align-items:stretch;gap:var(--spacing-8);padding:var(--spacing-8);flex-direction:column}}

package/dist/components/StickyBar/StickyBar2.js

@@ -0,0 +1,29 @@
+import './StickyBar.css';
+import { Button as n } from "../Button/Button2.js";
+/* empty css          */
+import "react";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+var u = ({ children: c, position: t = "bottom", align: s = "between", visible: l = !0, onClose: r, closeLabel: i = "Close", offset: a = 0, className: o }) => l ? /* @__PURE__ */ m("div", {
+  className: [
+    "sticky-bar",
+    `sticky-bar--${t}`,
+    `sticky-bar--align-${s}`,
+    o
+  ].filter(Boolean).join(" "),
+  style: a ? { [t]: `${a}px` } : void 0,
+  children: [/* @__PURE__ */ e("div", {
+    className: "sticky-bar__content",
+    children: c
+  }), r && /* @__PURE__ */ e(n, {
+    className: "sticky-bar__close",
+    icon: "clear",
+    onClick: r,
+    size: "small",
+    variant: "ghost",
+    title: i,
+    children: i
+  })]
+}) : null;
+export {
+  u as StickyBar
+};

package/dist/components/SuggestionsList/SuggestionsList.css

@@ -0,0 +1 @@
+.suggestions-list{row-gap:var(--spacing-8);flex-direction:column;display:flex}.suggestions-list .list-suggestions-list{border:1px solid var(--card-border-color);border-radius:var(--radius);background-color:var(--card-background-color);flex-direction:column;margin:0;padding:0;display:flex}.suggestions-list .list-suggestions-list legend{padding:var(--spacing-12) var(--spacing-16);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--body-title-color);box-sizing:border-box;border-bottom:1px solid var(--card-border-color)}.suggestions-list .list-suggestions-list .list-suggestions-list-search{padding:var(--spacing-8) var(--spacing-12);border-bottom:1px solid var(--card-border-color)}.suggestions-list .list-suggestions-list .list-suggestions-list-rows{max-height:var(--spacing-400);overflow:hidden auto}.suggestions-list .list-suggestions-list .list-suggestions-list-header{padding:var(--spacing-8) var(--spacing-12);border-bottom:1px solid var(--card-border-color);background-color:var(--card-background-accent-color);gap:var(--spacing-8);display:flex;position:sticky;top:0}.suggestions-list .list-suggestions-list .list-suggestions-list-header-cell{color:var(--body-color-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-align:left;cursor:pointer;align-items:center;gap:var(--spacing-4);transition:color var(--transition-fast);background:0 0;border:none;flex:1;padding:0;display:flex}.suggestions-list .list-suggestions-list .list-suggestions-list-header-cell:hover{color:var(--body-title-color)}.suggestions-list .list-suggestions-list .list-suggestions-list-header-cell--value{flex:none;justify-content:flex-end;min-width:70px}.suggestions-list .list-suggestions-list .suggestions-list__sort-icon{font-size:var(--font-size-xs);opacity:.6;transition:opacity var(--transition-fast)}.suggestions-list .list-suggestions-list .suggestions-list__sort-icon--asc,.suggestions-list .list-suggestions-list .suggestions-list__sort-icon--desc{opacity:1;color:var(--links-color)}.suggestions-list .list-suggestions-list .list-suggestions-list-row{column-gap:var(--spacing-8);text-align:left;padding:var(--spacing-8) var(--spacing-12);transition:background-color var(--transition-fast);border-bottom:1px solid var(--card-border-color);align-items:center;display:flex}.suggestions-list .list-suggestions-list .list-suggestions-list-row:hover{background-color:var(--list-alternate-background-color)}.suggestions-list .list-suggestions-list .list-suggestions-list-row--clickable{cursor:pointer}.suggestions-list .list-suggestions-list .list-suggestions-list-row--clickable:hover{background-color:#60a5fa1a}.suggestions-list .list-suggestions-list .list-suggestions-list-row--clickable:focus-visible{outline:2px solid var(--card-border-accent-color);outline-offset:-1px}.suggestions-list .list-suggestions-list .list-suggestions-list-row div:first-child{flex:auto;min-width:0}.suggestions-list .list-suggestions-list .list-suggestions-list-row div:nth-child(2){text-align:right;min-width:70px;color:var(--body-color-muted);font-size:var(--font-size-sm);flex:0 auto}.suggestions-list .list-suggestions-list .list-suggestions-list-empty{padding:var(--spacing-24) var(--spacing-16);text-align:center;color:var(--body-color-muted)}.suggestions-list .list-suggestions-list .link{padding:var(--spacing-8) var(--spacing-16);color:var(--links-color);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-align:right;border-top:1px solid var(--card-border-color)}.suggestions-list .list-suggestions-list .link:hover{cursor:pointer;color:var(--links-hover-color)}

package/dist/components/SuggestionsList/SuggestionsList2.js

@@ -0,0 +1,121 @@
+import './SuggestionsList.css';
+import { Icon as j } from "../Icon/Icon2.js";
+import { Button as T } from "../Button/Button2.js";
+import { Tooltip as B } from "../Tooltip/Tooltip2.js";
+import { InputSearch as H } from "../InputSearch/InputSearch2.js";
+import { format2Digits as q } from "../../helpers/Numbers.js";
+/* empty css                */
+import { useCallback as z, useMemo as h, useState as g } from "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+function V({ state: n }) {
+  return /* @__PURE__ */ e("span", {
+    className: `suggestions-list__sort-icon suggestions-list__sort-icon--${n}`,
+    children: /* @__PURE__ */ e(j, { name: n === "asc" ? "arrow-up" : n === "desc" ? "arrow-down" : "arrow-bidirectional-vertical" })
+  });
+}
+var k = 10, W = ({ data: n, label: I, title: N, tooltip: w, enableSearch: y = !1, onRowClick: o }) => {
+  const [d, x] = g(!1), [r, M] = g(!1), [c, _] = g(""), [i, E] = g(null), [u, D] = g("asc"), p = h(() => c.trim() ? n.filter((s) => s.name.toLowerCase().includes(c.toLowerCase())) : n, [n, c]), m = h(() => {
+    if (!i) return p;
+    const s = [...p].sort((l, a) => {
+      const S = i === "name" ? l.name : l.value, b = i === "name" ? a.name : a.value;
+      return typeof S == "number" && typeof b == "number" ? S - b : String(S).localeCompare(String(b));
+    });
+    return u === "asc" ? s : s.reverse();
+  }, [
+    p,
+    i,
+    u
+  ]), v = h(() => r ? [...m] : m.slice(0, k), [m, r]), C = m.length > k, K = () => {
+    x(!d);
+  }, L = z(() => {
+    M(!r);
+  }, [r]), f = (s) => {
+    i === s ? D((l) => l === "asc" ? "desc" : "asc") : (E(s), D("asc"));
+  }, $ = h(() => /* @__PURE__ */ t("div", {
+    className: "list-suggestions-list",
+    children: [
+      /* @__PURE__ */ e(B, {
+        title: w,
+        children: /* @__PURE__ */ e("legend", { children: N || "Suggestions" })
+      }),
+      y && /* @__PURE__ */ e("div", {
+        className: "list-suggestions-list-search",
+        children: /* @__PURE__ */ e(H, {
+          value: c,
+          onChange: _,
+          placeholder: "Search suggestions..."
+        })
+      }),
+      /* @__PURE__ */ t("div", {
+        className: "list-suggestions-list-rows",
+        children: [
+          /* @__PURE__ */ t("div", {
+            className: "list-suggestions-list-header",
+            children: [/* @__PURE__ */ t("button", {
+              type: "button",
+              className: "list-suggestions-list-header-cell list-suggestions-list-header-cell--name",
+              onClick: () => f("name"),
+              children: ["Name", /* @__PURE__ */ e(V, { state: i === "name" ? u : "unsorted" })]
+            }), /* @__PURE__ */ t("button", {
+              type: "button",
+              className: "list-suggestions-list-header-cell list-suggestions-list-header-cell--value",
+              onClick: () => f("value"),
+              children: ["Value", /* @__PURE__ */ e(V, { state: i === "value" ? u : "unsorted" })]
+            })]
+          }),
+          v.map((s, l) => /* @__PURE__ */ t("div", {
+            className: `list-suggestions-list-row ${o ? "list-suggestions-list-row--clickable" : ""}`,
+            onClick: () => o?.(s),
+            tabIndex: o ? 0 : void 0,
+            onKeyDown: (a) => {
+              o && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o(s));
+            },
+            children: [/* @__PURE__ */ e("div", { children: s.name }), /* @__PURE__ */ t("div", { children: [
+              typeof s.value == "number" && q(s.value),
+              typeof s.value == "string" && s.value,
+              s.unit
+            ] })]
+          }, `list-suggestions-list-row-${l}`)),
+          v.length === 0 && /* @__PURE__ */ e("div", {
+            className: "list-suggestions-list-empty",
+            children: "No results found"
+          })
+        ]
+      }),
+      C && /* @__PURE__ */ t("span", {
+        className: "link",
+        onClick: L,
+        children: ["Show ", r ? "less" : "more"]
+      })
+    ]
+  }), [
+    y,
+    r,
+    C,
+    o,
+    c,
+    v,
+    i,
+    u,
+    N,
+    L,
+    f,
+    w
+  ]);
+  return /* @__PURE__ */ t("div", {
+    className: "suggestions-list",
+    children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(T, {
+      icon: d ? "caret-up" : "caret-down",
+      onClick: K,
+      children: [
+        d ? "Hide" : "Show",
+        " ",
+        I,
+        " suggestions"
+      ]
+    }) }), d && $]
+  });
+};
+export {
+  W as SuggestionsList
+};

package/dist/components/ThemeSettings/ThemeContext.js

@@ -0,0 +1,138 @@
+import { ThemeContext as R } from "./ThemeContextValue.js";
+import { Tooltip as B } from "../Tooltip/Tooltip2.js";
+import { THEME_CONFIGS as c, getThemeConfig as H } from "./themeConfig.js";
+import { useCallback as f, useEffect as I, useState as E } from "react";
+import { jsx as m, jsxs as v } from "react/jsx-runtime";
+var _ = "theme-stylesheet", k = "theme-font-link", b = "theme-font-link-display", w = "theme-font-link-mono", X = ({ children: L, theme: C, effects: M, onSave: y, allowedThemes: s }) => {
+  const [d, l] = E(null), [N, a] = E(null), [P, g] = E(!1), i = d ?? C, p = N ?? M;
+  I(() => {
+    document.documentElement.setAttribute("data-theme", i);
+    const o = (typeof __MEMOBIT_THEME_URLS__ > "u" ? void 0 : __MEMOBIT_THEME_URLS__)?.[i];
+    if (o !== void 0) {
+      let e = document.getElementById(_);
+      e || (e = document.createElement("link"), e.id = _, e.rel = "stylesheet", document.head.appendChild(e)), e.href !== new URL(o, document.baseURI).href && (e.href = o);
+    }
+    const r = H(i);
+    if (r) {
+      let e = document.getElementById(k);
+      e || (e = document.createElement("link"), e.id = k, e.rel = "stylesheet", document.head.appendChild(e)), e.href = r.fontUrl;
+      let t = document.getElementById(b);
+      r.fontUrlDisplay ? (t || (t = document.createElement("link"), t.id = b, t.rel = "stylesheet", document.head.appendChild(t)), t.href = r.fontUrlDisplay) : t?.remove();
+      let n = document.getElementById(w);
+      r.fontUrlMono ? (n || (n = document.createElement("link"), n.id = w, n.rel = "stylesheet", document.head.appendChild(n)), n.href = r.fontUrlMono) : n?.remove();
+    }
+  }, [i]);
+  const S = f((o) => {
+    l(o);
+  }, []), U = f((o) => {
+    a(o);
+  }, []), D = f(() => {
+    l(null), a(null);
+  }, []);
+  I(() => {
+    const o = (e) => {
+      if (!(e instanceof HTMLElement)) return !1;
+      const t = e.tagName;
+      return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable;
+    }, r = (e) => {
+      if (!(e.ctrlKey || e.metaKey || e.altKey) && !o(e.target))
+        if (e.key === "[" || e.key === "]") {
+          e.preventDefault();
+          const t = c.map((u) => u.value), n = s && s.length > 0 ? t.filter((u) => s.includes(u)) : t;
+          if (n.length === 0) return;
+          const T = n.indexOf(i), K = ((T === -1 ? 0 : T) + (e.key === "]" ? 1 : -1) + n.length) % n.length;
+          l(n[K]);
+        } else e.key === "Escape" && d && (e.preventDefault(), l(null), a(null));
+    };
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
+  }, [
+    i,
+    d,
+    s
+  ]);
+  const h = c.findIndex((o) => o.value === i), x = h >= 0 ? c[h].label : i, O = f(() => {
+    y?.({
+      theme: i,
+      effects: p
+    }), l(null), a(null);
+  }, [
+    i,
+    p,
+    y
+  ]);
+  return /* @__PURE__ */ v(R.Provider, {
+    value: {
+      theme: i,
+      effects: p,
+      setPreviewTheme: S,
+      setPreviewEffects: U,
+      commitPreview: O,
+      clearPreview: D
+    },
+    children: [L, d && /* @__PURE__ */ v("div", {
+      style: {
+        position: "fixed",
+        bottom: 16,
+        right: 300,
+        zIndex: 99999,
+        padding: "8px 12px",
+        borderRadius: 8,
+        background: "rgba(0, 0, 0, 0.85)",
+        color: "#fff",
+        font: "500 13px/1.4 system-ui, sans-serif",
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)"
+      },
+      children: [
+        /* @__PURE__ */ m(B, {
+          title: "Copy theme name",
+          children: /* @__PURE__ */ m("span", {
+            onClick: () => {
+              navigator.clipboard.writeText(x), g(!0), window.setTimeout(() => g(!1), 1500);
+            },
+            style: { cursor: "pointer" },
+            children: x
+          })
+        }),
+        /* @__PURE__ */ v("span", {
+          style: {
+            opacity: 0.6,
+            marginLeft: 8,
+            pointerEvents: "none"
+          },
+          children: [
+            h + 1,
+            "/",
+            c.length
+          ]
+        }),
+        /* @__PURE__ */ m("div", {
+          style: {
+            opacity: 0.5,
+            fontSize: 11,
+            marginTop: 2,
+            pointerEvents: "none"
+          },
+          children: "[ prev · ] next · Esc revert"
+        }),
+        P && /* @__PURE__ */ m("div", {
+          style: {
+            position: "absolute",
+            bottom: "calc(100% + 6px)",
+            right: 0,
+            padding: "4px 8px",
+            borderRadius: 6,
+            background: "rgba(40, 160, 90, 0.95)",
+            color: "#fff",
+            font: "500 11px/1.2 system-ui, sans-serif",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.25)",
+            pointerEvents: "none"
+          },
+          children: "Copied!"
+        })
+      ]
+    })]
+  });
+};
+export {
+  X as ThemeProvider
+};

package/dist/components/ThemeSettings/ThemeContextValue.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+var o = e(void 0);
+export {
+  o as ThemeContext
+};

package/dist/components/ThemeSettings/ThemeSettings.css

@@ -0,0 +1 @@
+.theme-settings-drawer .drawer__content{min-height:0;display:flex}.theme-settings{min-height:0;padding:var(--spacing-8);flex:1;display:flex}.theme-settings__content{gap:var(--spacing-16);flex-direction:column;flex:1;min-height:0;display:flex}.theme-settings__content label{color:var(--body-accent-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.theme-settings__content .dropdown-menu{width:200px!important;position:fixed!important}.theme-settings__section{gap:var(--spacing-8);flex-direction:column;min-height:0;display:flex}.theme-settings__section:first-child{flex:1}.theme-settings__components{gap:var(--spacing-8);display:flex}.theme-settings__toolbar{align-items:center;gap:var(--spacing-12);display:flex}.theme-settings__toolbar .search{flex:1}.theme-settings__toolbar .toggle-switch{flex-shrink:0}.theme-settings__appearance{gap:var(--spacing-4);padding:var(--spacing-2);border:var(--spacing-1) solid var(--form-control-border-color);border-radius:var(--radius);align-self:flex-start;display:flex}.theme-settings__appearance-option{all:unset;cursor:pointer;padding:var(--spacing-4) var(--spacing-12);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--body-color-muted);transition:background-color var(--transition-fast), color var(--transition-fast)}.theme-settings__appearance-option:hover{color:var(--body-color)}.theme-settings__appearance-option--active{background-color:var(--card-background-accent-color);color:var(--body-accent-color)}.theme-settings__appearance-option--active:hover{color:var(--body-accent-color)}.theme-settings__grid{align-content:start;align-items:start;gap:var(--spacing-12);min-height:0;padding:var(--spacing-4);flex:1;grid-template-columns:repeat(3,1fr);display:grid;overflow-y:auto}.theme-settings__empty{text-align:center;padding:var(--spacing-24);color:var(--body-color-muted);font-size:var(--font-size-sm);grid-column:1/-1}.theme-settings__swatch{all:unset;cursor:pointer;align-self:start;align-items:center;gap:var(--spacing-8);padding:var(--spacing-8);border-radius:var(--radius);border:var(--spacing-2) solid transparent;transition:border-color var(--transition-fast);flex-direction:column;display:flex}.theme-settings__swatch:hover{border-color:var(--body-color-muted)}.theme-settings__swatch--active,.theme-settings__swatch--active:hover{border-color:var(--body-accent-color)}.theme-settings__swatch-meta{align-items:center;gap:var(--spacing-2);flex-direction:column;display:flex}.theme-settings__swatch-label{font-size:var(--font-size-xs);color:var(--body-color);text-align:center;line-height:var(--line-height-tight)}.theme-settings__preview{aspect-ratio:16/10;border-radius:var(--radius-sm);background:var(--body-background);flex-direction:column;width:100%;display:flex;position:relative;overflow:hidden}.theme-settings__favorite-badge{top:var(--spacing-2);right:var(--spacing-2);font-size:var(--font-size-xs);z-index:1;filter:drop-shadow(0 1px 2px #0000004d);line-height:1;position:absolute}.theme-settings__preview-header{background-color:var(--header-background-color);border-bottom:var(--spacing-1) solid var(--header-border-bottom-color);height:14%}.theme-settings__preview-body{padding:var(--spacing-4);gap:var(--spacing-4);flex:1;display:flex}.theme-settings__preview-card{background-color:var(--card-background-color);border-radius:var(--spacing-2);padding:var(--spacing-4);gap:var(--spacing-2);flex-direction:column;flex:1;display:flex}.theme-settings__preview-line{border-radius:var(--spacing-1);background-color:var(--body-color-muted);opacity:.4;height:3px}.theme-settings__preview-line--accent{background-color:var(--body-accent-color);opacity:1}.theme-settings__preview-line--short{width:60%}.theme-settings__preview-sidebar{align-items:center;gap:var(--spacing-4);width:20%;padding-top:var(--spacing-2);flex-direction:column;display:flex}.theme-settings__preview-dot{border-radius:var(--radius-full);background-color:var(--body-accent-color);opacity:.7;width:6px;height:6px}@media (width<=768px){.theme-settings__grid{grid-template-columns:repeat(2,1fr)}}