@memobit/libs 3.8.3 → 3.9.0

package/dist/components/Icon/Icon2.js

@@ -1,26 +1,43 @@
 import './Icon.css';
 /* empty css     */
-import "react";
-import { iconMap as h } from "@memobit/icons/map";
-import { jsx as f } from "react/jsx-runtime";
-var t = /* @__PURE__ */ new Set(), x = ({ className: s = "", fade: c, fadeOnHover: r, name: o, pulse: a, pulseOnHover: p, size: n, spin: l, spinOnHover: d, variant: i }) => {
+import { useEffect as g, useState as I } from "react";
+import { canLoadMoreIcons as n, getIcon as y, loadIcon as N } from "@memobit/icons/map";
+import { jsx as $ } from "react/jsx-runtime";
+var c = /* @__PURE__ */ new Set(), a = (o) => {
+  c.has(o) || (c.add(o), console.warn(n ? `[@memobit/libs] No icon named "${o}".` : `[@memobit/libs] No icon named "${o}". If this app trims icons with @memobit/icons/vite, add it to the plugin's \`include\` option or use \`lazy\` — a name that only exists at runtime cannot be found by the source scan.`));
+}, S = ({ className: o = "", fade: l, fadeOnHover: d, name: e, pulse: u, pulseOnHover: f, size: r, spin: p, spinOnHover: h, variant: t }) => {
   const m = [
     "icon",
-    n ? `icon--${n}` : "",
-    i && i !== "default" ? `icon--${i}` : "",
-    l ? "icon--spin" : "",
-    c ? "icon--fade" : "",
-    a ? "icon--pulse" : "",
-    d ? "icon--spin-hover" : "",
-    r ? "icon--fade-hover" : "",
-    p ? "icon--pulse-hover" : "",
-    s
-  ].filter(Boolean).join(" "), e = h[o];
-  return e === void 0 && !t.has(o) && (t.add(o), console.warn(`[@memobit/libs] No icon named "${o}". If this app trims icons with @memobit/icons/vite, add it to the plugin's \`include\` option — a name that only exists at runtime cannot be found by the source scan.`)), /* @__PURE__ */ f("span", {
+    r ? `icon--${r}` : "",
+    t && t !== "default" ? `icon--${t}` : "",
+    p ? "icon--spin" : "",
+    l ? "icon--fade" : "",
+    u ? "icon--pulse" : "",
+    h ? "icon--spin-hover" : "",
+    d ? "icon--fade-hover" : "",
+    f ? "icon--pulse-hover" : "",
+    o
+  ].filter(Boolean).join(" "), [, v] = I(null), i = y(e);
+  return g(() => {
+    if (i !== void 0 || !n) return;
+    let s = !0;
+    return N(e).then((b) => {
+      if (s) {
+        if (b === void 0) {
+          a(e);
+          return;
+        }
+        v(e);
+      }
+    }, () => {
+    }), () => {
+      s = !1;
+    };
+  }, [i, e]), i === void 0 && !n && a(e), /* @__PURE__ */ $("span", {
     className: m,
-    children: e
+    children: i
   });
 };
 export {
-  x as Icon
+  S as Icon
 };

package/dist/components/IconPicker/IconPicker2.js

@@ -1,54 +1,68 @@
 import './IconPicker.css';
-import { Icon as _ } from "../Icon/Icon2.js";
-import { Tooltip as g } from "../Tooltip/Tooltip2.js";
-import { InputSearch as k } from "../InputSearch/InputSearch2.js";
+import { Icon as N } from "../Icon/Icon2.js";
+import { Tooltip as v } from "../Tooltip/Tooltip2.js";
+import { InputSearch as y } from "../InputSearch/InputSearch2.js";
 /* empty css           */
-import { useMemo as a, useState as v } from "react";
-import { iconMap as N } from "@memobit/icons/map";
-import { jsx as c, jsxs as S } from "react/jsx-runtime";
-import { iconAliases as b } from "@memobit/icons";
-var y = Object.keys(N), M = ({ color: s, emptyLabel: p = "No icons match", icons: n, onChange: m, placeholder: h = "Search icons...", value: d }) => {
-  const [i, u] = v(""), o = a(() => n ?? y, [n]), t = a(() => {
-    const e = i.trim().toLowerCase();
-    if (!e) return o;
-    const f = e.replace(/[\s-]+/g, ""), l = (r) => r.includes(e) || r.replace(/-/g, "").includes(f);
-    return o.filter((r) => l(r) || (b[r] ?? []).some(l));
-  }, [o, i]);
-  return /* @__PURE__ */ S("div", {
+import { useEffect as C, useMemo as h, useState as d } from "react";
+import { canLoadMoreIcons as S, iconMap as b, loadAllIcons as j } from "@memobit/icons/map";
+import { jsx as c, jsxs as A } from "react/jsx-runtime";
+import { iconAliases as L } from "@memobit/icons";
+var T = S ? null : Object.keys(b), q = ({ color: a, emptyLabel: u = "No icons match", icons: o, onChange: f, placeholder: _ = "Search icons...", value: g }) => {
+  const [s, k] = d(""), [r, I] = d(T);
+  C(() => {
+    if (r || o) return;
+    let e = !0;
+    return j().then((l) => {
+      e && I(Object.keys(l));
+    }, () => {
+    }), () => {
+      e = !1;
+    };
+  }, [r, o]);
+  const t = h(() => o ?? r ?? [], [r, o]), p = !o && !r, n = h(() => {
+    const e = s.trim().toLowerCase();
+    if (!e) return t;
+    const l = e.replace(/[\s-]+/g, ""), m = (i) => i.includes(e) || i.replace(/-/g, "").includes(l);
+    return t.filter((i) => m(i) || (L[i] ?? []).some(m));
+  }, [t, s]);
+  return /* @__PURE__ */ A("div", {
     className: "icon-picker",
     children: [
       /* @__PURE__ */ c("div", {
         className: "icon-picker__search",
-        children: /* @__PURE__ */ c(k, {
+        children: /* @__PURE__ */ c(y, {
           autoFocus: !0,
-          onChange: u,
-          placeholder: h,
-          value: i
+          onChange: k,
+          placeholder: _,
+          value: s
         })
       }),
       /* @__PURE__ */ c("div", {
         className: "icon-picker__grid",
-        children: t.length === 0 ? /* @__PURE__ */ c("p", {
+        children: p ? /* @__PURE__ */ c("p", {
           className: "icon-picker__empty",
-          children: p
-        }) : t.map((e) => /* @__PURE__ */ c(g, {
+          children: "Loading icons..."
+        }) : n.length === 0 ? /* @__PURE__ */ c("p", {
+          className: "icon-picker__empty",
+          children: u
+        }) : n.map((e) => /* @__PURE__ */ c(v, {
           title: e,
           children: /* @__PURE__ */ c("button", {
-            className: `icon-picker__icon${d === e ? " is-selected" : ""}`,
-            onClick: () => m?.(e),
-            style: s ? { color: s } : void 0,
+            className: `icon-picker__icon${g === e ? " is-selected" : ""}`,
+            onClick: () => f?.(e),
+            style: a ? { color: a } : void 0,
             type: "button",
-            children: /* @__PURE__ */ c(_, { name: e })
+            children: /* @__PURE__ */ c(N, { name: e })
           })
         }, e))
       }),
-      /* @__PURE__ */ c("p", {
+      !p && /* @__PURE__ */ c("p", {
         className: "icon-picker__count",
-        children: t.length === o.length ? `${o.length} icons` : `${t.length} of ${o.length}`
+        children: n.length === t.length ? `${t.length} icons` : `${n.length} of ${t.length}`
       })
     ]
   });
 };
 export {
-  M as IconPicker
+  q as IconPicker
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 3,
+    libBuildNumber: 496,
     libCommit: n,
     libBuildDate: t
   };

package/dist/styles/base.scss

@@ -1,36 +1,36 @@
-// Universal body painting + sizing. Consumed via themes.scss so every memobit
-// app picks it up automatically.
-//
-// Why this lives here:
-// Theme backgrounds are gradients (multi-stop linear/radial). If the body is
-// shorter than the viewport during initial render — empty content, loading
-// state — the gradient gets tiled vertically by default, producing visible
-// horizontal banding. `min-height: 100vh` ensures the body is at least as tall
-// as the viewport so the gradient renders at full size on first paint;
-// `background-repeat: no-repeat` is a defensive guard for edge cases (zoom,
-// tall viewport with short content after HMR).
-//
-// Do NOT use the `background` shorthand in consumer App.scss — it resets
-// `background-repeat` to its initial `repeat` value and re-introduces the
-// banding. Set `background-image` long-hand if a per-project override is
-// needed; otherwise omit and let this rule own it.
-
-html,
-body {
-    background: var(--body-background);
-    background-repeat: no-repeat;
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-}
-
-// Ambient glow overlay — themes opt in via `--body-background-glow`. Pinned to
-// the viewport so it stays put on scroll; z-index: -1 keeps it behind app content.
-body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background: var(--body-background-glow, none);
-    pointer-events: none;
-}
+// Universal body painting + sizing. Consumed via themes.scss so every memobit
+// app picks it up automatically.
+//
+// Why this lives here:
+// Theme backgrounds are gradients (multi-stop linear/radial). If the body is
+// shorter than the viewport during initial render — empty content, loading
+// state — the gradient gets tiled vertically by default, producing visible
+// horizontal banding. `min-height: 100vh` ensures the body is at least as tall
+// as the viewport so the gradient renders at full size on first paint;
+// `background-repeat: no-repeat` is a defensive guard for edge cases (zoom,
+// tall viewport with short content after HMR).
+//
+// Do NOT use the `background` shorthand in consumer App.scss — it resets
+// `background-repeat` to its initial `repeat` value and re-introduces the
+// banding. Set `background-image` long-hand if a per-project override is
+// needed; otherwise omit and let this rule own it.
+
+html,
+body {
+    background: var(--body-background);
+    background-repeat: no-repeat;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+// Ambient glow overlay — themes opt in via `--body-background-glow`. Pinned to
+// the viewport so it stays put on scroll; z-index: -1 keeps it behind app content.
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: var(--body-background-glow, none);
+    pointer-events: none;
+}

package/dist/styles/effects.scss

@@ -1,72 +1,72 @@
-.note-container-effect {
-    font-size: var(--font-size-md);
-    line-height: 1.6;
-    padding: var(--spacing-16);
-    border-radius: var(--spacing-12);
-    border-left: var(--spacing-2) solid var(--note-container-effect-border-left-color);
-    background-color: var(--note-container-effect-background-color);
-    color: var(--note-container-effect-color);
-}
-
-.infuse-effect {
-    border-width: var(--spacing-1);
-    border-style: solid;
-    transition: all 0.3s;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: var(--infuse-effect-before-background);
-        width: var(--spacing-4);
-        height: 100%;
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    &:hover {
-        transform: translateY(-5px);
-        border-color: var(--infuse-effect-hover-border-color);
-        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--infuse-effect-hover-box-shadow-color);
-
-        &::before {
-            opacity: 1;
-        }
-    }
-}
-
-.up-lift-effect {
-    border-width: var(--spacing-1);
-    border-style: solid;
-    box-shadow: 0 var(--spacing-4) var(--spacing-12) var(--up-lift-effect-box-shadow-color);
-    transition: all 0.3s ease;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 5px;
-        height: 100%;
-        background: var(--up-lift-effect-before-background);
-    }
-
-    &:hover {
-        transform: translateY(-5px);
-        border-color: var(--up-lift-effect-hover-border-color);
-        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--up-lift-effect-hover-box-shadow-color);
-    }
-}
-
-.glow-effect {
-    transition: 0.3s;
-
-    &:hover {
-        box-shadow: var(--glow-box-shadow-color);
-        transform: translateY(-2px);
-        border-color: var(--glow-hover-border-color);
-    }
-}
+.note-container-effect {
+    font-size: var(--font-size-md);
+    line-height: 1.6;
+    padding: var(--spacing-16);
+    border-radius: var(--spacing-12);
+    border-left: var(--spacing-2) solid var(--note-container-effect-border-left-color);
+    background-color: var(--note-container-effect-background-color);
+    color: var(--note-container-effect-color);
+}
+
+.infuse-effect {
+    border-width: var(--spacing-1);
+    border-style: solid;
+    transition: all 0.3s;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: var(--infuse-effect-before-background);
+        width: var(--spacing-4);
+        height: 100%;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    &:hover {
+        transform: translateY(-5px);
+        border-color: var(--infuse-effect-hover-border-color);
+        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--infuse-effect-hover-box-shadow-color);
+
+        &::before {
+            opacity: 1;
+        }
+    }
+}
+
+.up-lift-effect {
+    border-width: var(--spacing-1);
+    border-style: solid;
+    box-shadow: 0 var(--spacing-4) var(--spacing-12) var(--up-lift-effect-box-shadow-color);
+    transition: all 0.3s ease;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5px;
+        height: 100%;
+        background: var(--up-lift-effect-before-background);
+    }
+
+    &:hover {
+        transform: translateY(-5px);
+        border-color: var(--up-lift-effect-hover-border-color);
+        box-shadow: 0 var(--spacing-12) var(--spacing-24) var(--up-lift-effect-hover-box-shadow-color);
+    }
+}
+
+.glow-effect {
+    transition: 0.3s;
+
+    &:hover {
+        box-shadow: var(--glow-box-shadow-color);
+        transform: translateY(-2px);
+        border-color: var(--glow-hover-border-color);
+    }
+}

package/dist/styles/scrollbars.scss

@@ -1,30 +1,30 @@
-:root {
-    --scrollbar-size: 6px;
-    --scrollbar-track-color: transparent;
-    --scrollbar-thumb-color: var(--delimiter-color, rgba(128, 128, 128, 0.45));
-    --scrollbar-thumb-hover-color: var(--body-color-muted, rgba(128, 128, 128, 0.65));
-    --scrollbar-radius: var(--radius-full, 9999px);
-}
-
-* {
-    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-    scrollbar-width: thin;
-}
-
-*::-webkit-scrollbar {
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
-}
-
-*::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color);
-}
-
-*::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color);
-    border-radius: var(--scrollbar-radius);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover-color);
-}
+:root {
+    --scrollbar-size: 6px;
+    --scrollbar-track-color: transparent;
+    --scrollbar-thumb-color: var(--delimiter-color, rgba(128, 128, 128, 0.45));
+    --scrollbar-thumb-hover-color: var(--body-color-muted, rgba(128, 128, 128, 0.65));
+    --scrollbar-radius: var(--radius-full, 9999px);
+}
+
+* {
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+    scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color);
+}
+
+*::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color);
+    border-radius: var(--scrollbar-radius);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-color);
+}