@floegence/floe-webapp-core 0.74.2 → 0.76.0

package/dist/components/ui/Settings.js

@@ -1,25 +1,34 @@
-import { insert as n, createComponent as s, effect as v, className as b, setAttribute as h, spread as f, mergeProps as $, template as c } from "solid-js/web";
-import { Show as d, splitProps as w, For as m } from "solid-js";
+import { insert as e, createComponent as s, effect as v, className as b, setAttribute as h, spread as f, mergeProps as $, template as o } from "solid-js/web";
+import { Show as d, children as N, splitProps as w, For as m } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
-var x = /* @__PURE__ */ c("<div><aside class=floe-settings-layout__sidebar></aside><div class=floe-settings-layout__mobile></div><div class=floe-settings-layout__content>"), k = /* @__PURE__ */ c("<div class=floe-settings-navigation__search>"), N = /* @__PURE__ */ c("<nav class=floe-settings-navigation><div class=floe-settings-navigation__groups>"), L = /* @__PURE__ */ c("<div class=floe-settings-navigation__group><div class=floe-settings-navigation__label>"), P = /* @__PURE__ */ c("<button><span>"), A = /* @__PURE__ */ c("<h1>"), C = /* @__PURE__ */ c("<p>"), F = /* @__PURE__ */ c("<div class=floe-settings-section__actions>"), R = /* @__PURE__ */ c("<section><header class=floe-settings-section__header><div class=floe-settings-section__heading><div class=floe-settings-section__title></div></div></header><div class=floe-settings-section__body>"), j = /* @__PURE__ */ c("<h2>"), q = /* @__PURE__ */ c("<div>"), z = /* @__PURE__ */ c("<div class=floe-setting-row__control>"), B = /* @__PURE__ */ c("<div class=floe-setting-row__body>"), D = /* @__PURE__ */ c("<div><div class=floe-setting-row__main><div class=floe-setting-row__label><div><div class=floe-setting-row__title>");
-function I(t) {
+var k = /* @__PURE__ */ o("<div class=floe-settings-layout__mobile>"), x = /* @__PURE__ */ o("<div><aside class=floe-settings-layout__sidebar></aside><div class=floe-settings-layout__content>"), A = /* @__PURE__ */ o("<div class=floe-settings-navigation__search>"), L = /* @__PURE__ */ o("<nav class=floe-settings-navigation><div class=floe-settings-navigation__groups>"), P = /* @__PURE__ */ o("<div class=floe-settings-navigation__group><div class=floe-settings-navigation__label>"), F = /* @__PURE__ */ o("<button><span>"), R = /* @__PURE__ */ o("<h1>"), C = /* @__PURE__ */ o("<p>"), j = /* @__PURE__ */ o("<div class=floe-settings-section__actions>"), q = /* @__PURE__ */ o("<section><header class=floe-settings-section__header><div class=floe-settings-section__heading><div class=floe-settings-section__title></div></div></header><div class=floe-settings-section__body>"), z = /* @__PURE__ */ o("<h2>"), B = /* @__PURE__ */ o("<div>"), D = /* @__PURE__ */ o("<div class=floe-setting-row__control>"), E = /* @__PURE__ */ o("<div class=floe-setting-row__body>"), G = /* @__PURE__ */ o("<div><div class=floe-setting-row__main><div class=floe-setting-row__label><div><div class=floe-setting-row__title>");
+function K(t) {
+  const n = N(() => t.mobileNavigation);
   return (() => {
-    var e = x(), o = e.firstChild, i = o.nextSibling, a = i.nextSibling;
-    return n(o, () => t.sidebar), n(i, () => t.mobileNavigation), n(a, () => t.children), v(() => b(e, u("floe-settings-layout", t.class))), e;
+    var c = x(), i = c.firstChild, a = i.nextSibling;
+    return e(i, () => t.sidebar), e(c, s(d, {
+      get when() {
+        return n.toArray().some((g) => g != null && typeof g != "boolean" && g !== "");
+      },
+      get children() {
+        var g = k();
+        return e(g, n), g;
+      }
+    }), a), e(a, () => t.children), v(() => b(c, u("floe-settings-layout", t.class))), c;
   })();
 }
-function J(t) {
+function M(t) {
   return (() => {
-    var e = N(), o = e.firstChild;
-    return n(e, s(d, {
+    var n = L(), c = n.firstChild;
+    return e(n, s(d, {
       get when() {
         return t.search;
       },
       get children() {
-        var i = k();
-        return n(i, () => t.search), i;
+        var i = A();
+        return e(i, () => t.search), i;
       }
-    }), o), n(o, s(d, {
+    }), c), e(c, s(d, {
       get when() {
         return t.groups.some((i) => i.items.length);
       },
@@ -36,14 +45,14 @@ function J(t) {
               return i.items.length;
             },
             get children() {
-              var a = L(), _ = a.firstChild;
-              return n(_, () => i.label), n(a, s(m, {
+              var a = P(), g = a.firstChild;
+              return e(g, () => i.label), e(a, s(m, {
                 get each() {
                   return i.items;
                 },
                 children: (l) => (() => {
-                  var g = P(), r = g.firstChild;
-                  return f(g, $(() => l.attributes, {
+                  var _ = F(), r = _.firstChild;
+                  return f(_, $(() => l.attributes, {
                     type: "button",
                     get class() {
                       return u("floe-settings-navigation__item", l.attributes?.class);
@@ -52,132 +61,132 @@ function J(t) {
                       return t.value === l.id ? "page" : void 0;
                     },
                     onClick: () => t.onChange(l.id)
-                  }), !1, !0), n(g, s(d, {
+                  }), !1, !0), e(_, s(d, {
                     get when() {
                       return l.icon;
                     },
-                    children: (S) => {
-                      const y = S();
-                      return s(y, {
+                    children: (y) => {
+                      const S = y();
+                      return s(S, {
                         class: "floe-settings-navigation__icon"
                       });
                     }
-                  }), r), n(r, () => l.label), g;
+                  }), r), e(r, () => l.label), _;
                 })()
               }), null), v(() => h(a, "data-settings-group", i.id)), a;
             }
           })
         });
       }
-    })), v(() => h(e, "aria-label", t.label)), e;
+    })), v(() => h(n, "aria-label", t.label)), n;
   })();
 }
-function K(t) {
-  const [e, o] = w(t, ["title", "description", "badge", "actions", "variant", "class", "children"]);
+function O(t) {
+  const [n, c] = w(t, ["title", "description", "badge", "actions", "variant", "class", "children"]);
   return (() => {
-    var i = R(), a = i.firstChild, _ = a.firstChild, l = _.firstChild, g = a.nextSibling;
-    return f(i, $(o, {
+    var i = q(), a = i.firstChild, g = a.firstChild, l = g.firstChild, _ = a.nextSibling;
+    return f(i, $(c, {
       get class() {
-        return u("floe-settings-section", e.class);
+        return u("floe-settings-section", n.class);
       },
       get "data-settings-variant"() {
-        return e.variant ?? "section";
+        return n.variant ?? "section";
       }
-    }), !1, !0), n(l, s(d, {
+    }), !1, !0), e(l, s(d, {
       get when() {
-        return e.variant === "page";
+        return n.variant === "page";
       },
       get fallback() {
         return (() => {
-          var r = j();
-          return n(r, () => e.title), r;
+          var r = z();
+          return e(r, () => n.title), r;
         })();
       },
       get children() {
-        var r = A();
-        return n(r, () => e.title), r;
+        var r = R();
+        return e(r, () => n.title), r;
       }
-    }), null), n(l, () => e.badge, null), n(_, s(d, {
+    }), null), e(l, () => n.badge, null), e(g, s(d, {
       get when() {
-        return e.description;
+        return n.description;
       },
       get children() {
         var r = C();
-        return n(r, () => e.description), r;
+        return e(r, () => n.description), r;
       }
-    }), null), n(a, s(d, {
+    }), null), e(a, s(d, {
       get when() {
-        return e.actions;
+        return n.actions;
       },
       get children() {
-        var r = F();
-        return n(r, () => e.actions), r;
+        var r = j();
+        return e(r, () => n.actions), r;
       }
-    }), null), n(g, () => e.children), i;
+    }), null), e(_, () => n.children), i;
   })();
 }
-function M(t) {
-  const [e, o] = w(t, ["class", "children"]);
+function Q(t) {
+  const [n, c] = w(t, ["class", "children"]);
   return (() => {
-    var i = q();
-    return f(i, $(o, {
+    var i = B();
+    return f(i, $(c, {
       get class() {
-        return u("floe-settings-list", e.class);
+        return u("floe-settings-list", n.class);
       },
       "data-floe-surface": "card"
-    }), !1, !0), n(i, () => e.children), i;
+    }), !1, !0), e(i, () => n.children), i;
   })();
 }
-function O(t) {
+function T(t) {
   return (() => {
-    var e = D(), o = e.firstChild, i = o.firstChild, a = i.firstChild, _ = a.firstChild;
-    return n(i, s(d, {
+    var n = G(), c = n.firstChild, i = c.firstChild, a = i.firstChild, g = a.firstChild;
+    return e(i, s(d, {
       get when() {
         return t.icon;
       },
       children: (l) => {
-        const g = l();
-        return s(g, {
+        const _ = l();
+        return s(_, {
           class: "floe-setting-row__icon"
         });
       }
-    }), a), n(_, () => t.title), n(a, s(d, {
+    }), a), e(g, () => t.title), e(a, s(d, {
       get when() {
         return t.description;
       },
       get children() {
         var l = C();
-        return n(l, () => t.description), l;
+        return e(l, () => t.description), l;
       }
-    }), null), n(o, s(d, {
+    }), null), e(c, s(d, {
       get when() {
         return t.control;
       },
       get children() {
-        var l = z();
-        return n(l, () => t.control), l;
+        var l = D();
+        return e(l, () => t.control), l;
       }
-    }), null), n(e, s(d, {
+    }), null), e(n, s(d, {
       get when() {
         return t.children;
       },
       get children() {
-        var l = B();
-        return n(l, () => t.children), l;
+        var l = E();
+        return e(l, () => t.children), l;
       }
     }), null), v((l) => {
-      var g = u("floe-setting-row", t.class), r = t.tone ?? "default";
-      return g !== l.e && b(e, l.e = g), r !== l.t && h(e, "data-tone", l.t = r), l;
+      var _ = u("floe-setting-row", t.class), r = t.tone ?? "default";
+      return _ !== l.e && b(n, l.e = _), r !== l.t && h(n, "data-tone", l.t = r), l;
     }, {
       e: void 0,
       t: void 0
-    }), e;
+    }), n;
   })();
 }
 export {
-  O as SettingRow,
-  I as SettingsLayout,
-  M as SettingsList,
-  J as SettingsNavigation,
-  K as SettingsSection
+  T as SettingRow,
+  K as SettingsLayout,
+  Q as SettingsList,
+  M as SettingsNavigation,
+  O as SettingsSection
 };

package/dist/reload-placeholder.js

@@ -1,6 +1,6 @@
 function P(h) {
   const s = document, $ = 48e3, b = 240, A = () => h.scopeStorageKey ? sessionStorage.getItem(h.scopeStorageKey) ?? "" : "", g = (o) => typeof o == "string" && o.length <= 120 && !/[;{}<>\\]|url\(|var\(/i.test(o) && CSS.supports("color", o);
-  let l, a, C = "", d;
+  let l, c, C = "", d;
   try {
     const o = sessionStorage.getItem(h.storageKey), e = o && o.length <= $ ? JSON.parse(o) : void 0;
     e?.version === 1 && e.scope === A() && e.width === innerWidth && e.height === innerHeight && g(e.background) && Array.isArray(e.scroll) && e.scroll.length <= 12 && e.scroll.every((r) => Array.isArray(r) && r.length === 3 && /^[a-z0-9-]{1,48}$/.test(r[0]) && r.slice(1).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 1e7)) && Array.isArray(e.boxes) && e.boxes.length > 0 && e.boxes.length <= b && e.boxes.every((r) => Array.isArray(r) && r.length === 7 && r.slice(0, 5).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 2e4) && g(r[5]) && g(r[6])) && (d = e);
@@ -17,19 +17,19 @@ function P(h) {
         pointerEvents: "none",
         contain: "strict"
       });
-      for (const [o, e, r, i, x, m, w] of d.boxes) {
-        const p = s.createElement("div");
-        Object.assign(p.style, {
+      for (const [o, e, r, i, m, x, w] of d.boxes) {
+        const f = s.createElement("div");
+        Object.assign(f.style, {
           position: "absolute",
           left: `${o}px`,
           top: `${e}px`,
           width: `${r}px`,
           height: `${i}px`,
-          borderRadius: `${x}px`,
-          backgroundColor: m,
+          borderRadius: `${m}px`,
+          backgroundColor: x,
           border: `1px solid ${w}`,
           boxSizing: "border-box"
-        }), l.append(p);
+        }), l.append(f);
       }
       s.body.append(l);
     }
@@ -45,53 +45,55 @@ function P(h) {
     }
     d = void 0, l?.remove(), l = void 0;
   }, N = () => {
-    a = void 0, y();
+    c = void 0, y();
     try {
       sessionStorage.removeItem(h.storageKey);
     } catch {
     }
   }, O = () => {
-    if (!a?.isConnected || l) return;
+    if (!c?.isConnected || l) return;
     const o = [], e = getComputedStyle(s.body).backgroundColor;
     if (!g(e)) return;
     const r = (n) => {
-      const t = n.getBoundingClientRect(), c = getComputedStyle(n);
-      return t.width && t.height && t.bottom > 0 && t.right > 0 && t.top < innerHeight && t.left < innerWidth && c.visibility === "visible" ? t : null;
-    }, i = (n, t, c = "transparent", u = 3) => {
-      if (o.length >= b || !g(t) || !g(c)) return;
-      const f = Math.max(0, n.x), R = Math.max(0, n.y), k = Math.min(innerWidth, n.right) - f, E = Math.min(innerHeight, n.bottom) - R;
-      k <= 0 || E <= 0 || o.push([f, R, k, E, Math.max(0, Math.min(u, 100)), t, c]);
+      const t = n.getBoundingClientRect(), a = getComputedStyle(n);
+      return t.width && t.height && t.bottom > 0 && t.right > 0 && t.top < innerHeight && t.left < innerWidth && a.visibility === "visible" ? t : null;
+    }, i = (n, t, a = "transparent", u = 3) => {
+      if (o.length >= b || !g(t) || !g(a)) return;
+      const p = Math.max(0, n.x), R = Math.max(0, n.y), k = Math.min(innerWidth, n.right) - p, E = Math.min(innerHeight, n.bottom) - R;
+      k <= 0 || E <= 0 || o.push([p, R, k, E, Math.max(0, Math.min(u, 100)), t, a]);
     };
-    for (const n of a.querySelectorAll(C)) {
+    for (const n of c.querySelectorAll(C)) {
+      if (n.closest("[data-floe-reload-omit]")) continue;
       const t = r(n);
       if (!t) continue;
-      const c = getComputedStyle(n);
-      i(t, c.backgroundColor, c.borderTopStyle === "none" ? "transparent" : c.borderTopColor, parseFloat(c.borderRadius) || 0);
+      const a = getComputedStyle(n);
+      i(t, a.backgroundColor, a.borderTopStyle === "none" ? "transparent" : a.borderTopColor, parseFloat(a.borderRadius) || 0);
     }
-    const x = getComputedStyle(a).color, m = g(x) ? `color-mix(in srgb, ${x} 9%, ${e})` : "#d4d4d4";
-    for (const n of a.querySelectorAll("img,svg,input,textarea,canvas,video")) {
+    const m = getComputedStyle(c).color, x = g(m) ? `color-mix(in srgb, ${m} 9%, ${e})` : "#d4d4d4";
+    for (const n of c.querySelectorAll("img,svg,input,textarea,canvas,video")) {
+      if (n.closest("[data-floe-reload-omit]")) continue;
       const t = r(n);
-      t && i(t, m, "transparent", Math.min(t.height / 4, 8));
+      t && i(t, x, "transparent", Math.min(t.height / 4, 8));
     }
-    const w = s.createTreeWalker(a, NodeFilter.SHOW_TEXT), p = s.createRange();
+    const w = s.createTreeWalker(c, NodeFilter.SHOW_TEXT), f = s.createRange();
     let S, T = 0;
     for (; (S = w.nextNode()) && o.length < b && T++ < 12e3; ) {
       const n = S.parentElement;
-      if (!(!n || n.closest('script,style,textarea,svg,[aria-hidden="true"]') || !r(n))) {
-        p.selectNodeContents(S);
-        for (const t of p.getClientRects())
-          t.width < 2 || i(new DOMRect(t.x, t.y + t.height * 0.22, t.width, t.height * 0.56), m);
+      if (!(!n || n.closest('script,style,textarea,svg,[aria-hidden="true"],[data-floe-reload-omit]') || !r(n))) {
+        f.selectNodeContents(S);
+        for (const t of f.getClientRects())
+          t.width < 2 || i(new DOMRect(t.x, t.y + t.height * 0.22, t.width, t.height * 0.56), x);
       }
     }
     if (o.length)
       try {
         const n = [];
-        for (const u of a.querySelectorAll("[data-floe-reload-scroll]")) {
-          const f = u.getAttribute("data-floe-reload-scroll");
-          /^[a-z0-9-]{1,48}$/.test(f) && n.length < 12 && r(u) && n.push([f, u.scrollLeft, u.scrollTop]);
+        for (const u of c.querySelectorAll("[data-floe-reload-scroll]")) {
+          const p = u.getAttribute("data-floe-reload-scroll");
+          /^[a-z0-9-]{1,48}$/.test(p) && n.length < 12 && r(u) && n.push([p, u.scrollLeft, u.scrollTop]);
         }
-        const t = { version: 1, scope: A(), width: innerWidth, height: innerHeight, background: e, boxes: o, scroll: n }, c = JSON.stringify(t);
-        c.length <= $ && sessionStorage.setItem(h.storageKey, c);
+        const t = { version: 1, scope: A(), width: innerWidth, height: innerHeight, background: e, boxes: o, scroll: n }, a = JSON.stringify(t);
+        a.length <= $ && sessionStorage.setItem(h.storageKey, a);
       } catch {
       }
   };
@@ -104,7 +106,7 @@ function P(h) {
     },
     finish: y,
     arm(o, e) {
-      a = o, C = e;
+      c = o, C = e;
     },
     clear: N
   }, window.addEventListener("pagehide", O), window.addEventListener("resize", y, { once: !0 }), window.addEventListener("pageshow", (o) => {