@floegence/floe-webapp-core 0.60.1 → 0.61.0

package/dist/components/layout/KeepAliveStack.js

@@ -1,154 +1,171 @@
-import { insert as V, createComponent as g, effect as C, className as P, setStyleProperty as B, template as R } from "solid-js/web";
-import { createMemo as m, createSignal as I, untrack as k, createEffect as b, For as F, createRenderEffect as N, onCleanup as j } from "solid-js";
-import { ViewActivationProvider as D } from "../../context/ViewActivationContext.js";
-import { cn as q } from "../../utils/cn.js";
-import { deferAfterPaint as G } from "../../utils/defer.js";
-var E = /* @__PURE__ */ R("<div>");
+import { insert as P, createComponent as g, effect as B, className as E, setStyleProperty as K, template as R, memo as N, setAttribute as z } from "solid-js/web";
+import { createMemo as S, createSignal as k, untrack as F, createEffect as x, For as j, createRenderEffect as D, onCleanup as G, Suspense as H } from "solid-js";
+import { ViewActivationProvider as J } from "../../context/ViewActivationContext.js";
+import { cn as V } from "../../utils/cn.js";
+import { deferAfterPaint as L } from "../../utils/defer.js";
+var O = /* @__PURE__ */ R("<div>");
 function M(e) {
   return String(e ?? "").trim();
 }
-function z(e) {
-  const u = [], d = /* @__PURE__ */ new Set();
+function C(e) {
+  const u = [], s = /* @__PURE__ */ new Set();
   for (const f of e) {
-    const o = M(f?.id);
-    o && (d.has(o) || (d.add(o), u.push(o)));
+    const a = M(f?.id);
+    a && (s.has(a) || (s.add(a), u.push(a)));
   }
   return u;
 }
-function H(e, u) {
-  const d = new Set(e), f = /* @__PURE__ */ new Map();
-  for (const o of u) {
-    const a = M(o?.id);
-    a && d.has(a) && (f.has(a) || f.set(a, o));
+function Q(e, u) {
+  const s = new Set(e), f = /* @__PURE__ */ new Map();
+  for (const a of u) {
+    const d = M(a?.id);
+    d && s.has(d) && (f.has(d) || f.set(d, a));
   }
   return f;
 }
-function J(e) {
-  const [u, d] = I(0), [f, o] = I(!1);
-  let a = 0;
-  N(() => {
-    const s = e.active(), r = e.activationMode();
-    a += 1;
-    const w = a;
-    if (!s) {
-      o(!1);
+function T(e) {
+  const [u, s] = k(0), [f, a] = k(!1);
+  let d = 0;
+  D(() => {
+    const c = e.active(), t = e.activationMode();
+    d += 1;
+    const h = d;
+    if (!c) {
+      a(!1);
       return;
     }
     const v = () => {
-      w !== a || !e.active() || k(f) || (o(!0), d((S) => S + 1));
+      h !== d || !e.active() || F(f) || (a(!0), s((w) => w + 1));
     };
-    r === "after-paint" ? G(v) : v();
-  }), j(() => {
-    a += 1;
+    t === "after-paint" ? L(v) : v();
+  }), G(() => {
+    d += 1;
   });
-  const A = k(() => ({
+  const A = F(() => ({
     id: e.id,
+    visible: e.active,
     active: f,
     activationSeq: u
   }));
-  return g(D, {
+  return g(J, {
     value: A,
     get children() {
-      var s = E();
-      return V(s, () => e.children), C((r) => {
-        var w = e.class, v = e.active() ? "block" : "none";
-        return w !== r.e && P(s, r.e = w), v !== r.t && B(s, "display", r.t = v), r;
+      var c = O();
+      return P(c, (() => {
+        var t = N(() => !!e.renderFallback);
+        return () => t() ? g(H, {
+          get fallback() {
+            return e.renderFallback(e.id);
+          },
+          get children() {
+            return e.children;
+          }
+        }) : e.children;
+      })()), B((t) => {
+        var h = e.class, v = e.id, w = e.active() ? void 0 : "true", b = !e.active(), y = e.active() ? "block" : "none";
+        return h !== t.e && E(c, t.e = h), v !== t.t && z(c, "data-floe-keep-alive-view", t.t = v), w !== t.a && z(c, "aria-hidden", t.a = w), b !== t.o && (c.inert = t.o = b), y !== t.i && K(c, "display", t.i = y), t;
       }, {
         e: void 0,
-        t: void 0
-      }), s;
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      }), c;
     }
   });
 }
-function X(e) {
-  const u = () => e.lazyMount !== !1, d = () => e.keepMounted !== !1, f = () => e.activationMode ?? "sync", o = m(() => z(e.views)), [a, A] = I(k(() => H(z(e.views), e.views))), s = m(() => M(e.activeId));
-  b(() => {
-    const t = o(), n = e.views;
-    A((i) => {
-      let c = !1;
-      const l = new Map(i), x = new Set(t);
-      for (const h of l.keys())
-        x.has(h) || (l.delete(h), c = !0);
-      for (const h of n) {
-        const y = M(h?.id);
-        y && x.has(y) && (l.has(y) || (l.set(y, h), c = !0));
+function _(e) {
+  const u = () => e.lazyMount !== !1, s = () => e.keepMounted !== !1, f = () => e.activationMode ?? "sync", a = S(() => C(e.views)), [d, A] = k(F(() => Q(C(e.views), e.views))), c = S(() => M(e.activeId));
+  x(() => {
+    const n = a(), i = e.views;
+    A((r) => {
+      let o = !1;
+      const l = new Map(r), q = new Set(n);
+      for (const m of l.keys())
+        q.has(m) || (l.delete(m), o = !0);
+      for (const m of i) {
+        const I = M(m?.id);
+        I && q.has(I) && (l.has(I) || (l.set(I, m), o = !0));
       }
-      return c ? l : i;
+      return o ? l : r;
     });
   });
-  const r = m(() => ({
-    order: o(),
-    byId: a()
-  })), w = () => {
-    if (!d()) return /* @__PURE__ */ new Set();
-    if (!u()) return new Set(r().order);
-    const t = s();
-    return t ? r().byId.has(t) ? /* @__PURE__ */ new Set([t]) : /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
-  }, [v, S] = I(w());
-  b(() => {
-    if (!d()) return;
-    const t = new Set(r().order);
-    S((n) => {
-      let i = !1;
-      const c = /* @__PURE__ */ new Set();
-      for (const l of n) {
-        if (!t.has(l)) {
-          i = !0;
+  const t = S(() => ({
+    order: a(),
+    byId: d()
+  })), h = () => {
+    if (!s()) return /* @__PURE__ */ new Set();
+    if (!u()) return new Set(t().order);
+    const n = c();
+    return n ? t().byId.has(n) ? /* @__PURE__ */ new Set([n]) : /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+  }, [v, w] = k(h());
+  x(() => {
+    if (!s()) return;
+    const n = new Set(t().order);
+    w((i) => {
+      let r = !1;
+      const o = /* @__PURE__ */ new Set();
+      for (const l of i) {
+        if (!n.has(l)) {
+          r = !0;
           continue;
         }
-        c.add(l);
+        o.add(l);
       }
-      return i ? c : n;
+      return r ? o : i;
     });
-  }), b(() => {
-    if (!d() || !u()) return;
-    const t = s();
-    t && r().byId.has(t) && S((n) => {
-      if (n.has(t)) return n;
-      const i = new Set(n);
-      return i.add(t), i;
+  }), x(() => {
+    if (!s() || !u()) return;
+    const n = c();
+    n && t().byId.has(n) && w((i) => {
+      if (i.has(n)) return i;
+      const r = new Set(i);
+      return r.add(n), r;
     });
   });
-  const K = m(() => {
-    const t = r().order, n = s();
-    if (!d())
-      return n ? r().byId.has(n) ? [n] : [] : [];
-    if (!u()) return t;
-    const i = v();
-    return t.filter((c) => i.has(c) || c === n);
-  }), O = m(() => {
-    const t = s();
-    return t ? r().byId.has(t) : !1;
+  const b = S(() => {
+    const n = t().order, i = c();
+    if (!s())
+      return i ? t().byId.has(i) ? [i] : [] : [];
+    if (!u()) return n;
+    const r = v();
+    return n.filter((o) => r.has(o) || o === i);
+  }), y = S(() => {
+    const n = c();
+    return n ? t().byId.has(n) : !1;
   });
   return (() => {
-    var t = E();
-    return V(t, g(F, {
+    var n = O();
+    return P(n, g(j, {
       get each() {
-        return K();
+        return b();
       },
-      children: (n) => {
-        const i = () => a().get(n);
-        return g(J, {
-          id: n,
-          active: () => s() === n,
+      children: (i) => {
+        const r = () => d().get(i);
+        return g(T, {
+          id: i,
+          active: () => c() === i,
           activationMode: f,
+          get renderFallback() {
+            return e.renderFallback;
+          },
           get class() {
-            return q("absolute inset-0", i()?.class);
+            return V("absolute inset-0", r()?.class);
           },
           get children() {
-            return i()?.render();
+            return r()?.render();
           }
         });
       }
-    })), C((n) => {
-      var i = q("relative h-full min-h-0 w-full", e.class), c = O() ? "block" : "none";
-      return i !== n.e && P(t, n.e = i), c !== n.t && B(t, "display", n.t = c), n;
+    })), B((i) => {
+      var r = V("relative h-full min-h-0 w-full", e.class), o = y() ? "block" : "none";
+      return r !== i.e && E(n, i.e = r), o !== i.t && K(n, "display", i.t = o), i;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), n;
   })();
 }
 export {
-  X as KeepAliveStack
+  _ as KeepAliveStack
 };

package/dist/components/ui/Settings.d.ts

@@ -0,0 +1,52 @@
+import { type JSX } from 'solid-js';
+/** Host-owned routing and state stay outside this responsive settings frame. */
+export declare function SettingsLayout(props: {
+    sidebar: JSX.Element;
+    mobileNavigation?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+export interface SettingsNavigationItem {
+    id: string;
+    label: string;
+    icon?: (props: {
+        class?: string;
+    }) => JSX.Element;
+    attributes?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export interface SettingsNavigationGroup {
+    id: string;
+    label: string;
+    items: readonly SettingsNavigationItem[];
+}
+export interface SettingsNavigationProps {
+    label: string;
+    groups: readonly SettingsNavigationGroup[];
+    value: string;
+    onChange: (id: string) => void;
+    search?: JSX.Element;
+    empty?: JSX.Element;
+}
+export declare function SettingsNavigation(props: SettingsNavigationProps): JSX.Element;
+export interface SettingsSectionProps extends Omit<JSX.HTMLAttributes<HTMLElement>, 'title'> {
+    title: string;
+    description?: string;
+    badge?: JSX.Element;
+    actions?: JSX.Element;
+    /** A page owns its primary heading; sections are subordinate groups. */
+    variant?: 'page' | 'section';
+}
+export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
+export declare function SettingsList(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    icon?: (props: {
+        class?: string;
+    }) => JSX.Element;
+    control?: JSX.Element;
+    children?: JSX.Element;
+    tone?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+    class?: string;
+}
+export declare function SettingRow(props: SettingRowProps): JSX.Element;

package/dist/components/ui/Settings.js

@@ -0,0 +1,183 @@
+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 { 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) {
+  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;
+  })();
+}
+function J(t) {
+  return (() => {
+    var e = N(), o = e.firstChild;
+    return n(e, s(d, {
+      get when() {
+        return t.search;
+      },
+      get children() {
+        var i = k();
+        return n(i, () => t.search), i;
+      }
+    }), o), n(o, s(d, {
+      get when() {
+        return t.groups.some((i) => i.items.length);
+      },
+      get fallback() {
+        return t.empty;
+      },
+      get children() {
+        return s(m, {
+          get each() {
+            return t.groups;
+          },
+          children: (i) => s(d, {
+            get when() {
+              return i.items.length;
+            },
+            get children() {
+              var a = L(), _ = a.firstChild;
+              return n(_, () => i.label), n(a, s(m, {
+                get each() {
+                  return i.items;
+                },
+                children: (l) => (() => {
+                  var g = P(), r = g.firstChild;
+                  return f(g, $(() => l.attributes, {
+                    type: "button",
+                    get class() {
+                      return u("floe-settings-navigation__item", l.attributes?.class);
+                    },
+                    get "aria-current"() {
+                      return t.value === l.id ? "page" : void 0;
+                    },
+                    onClick: () => t.onChange(l.id)
+                  }), !1, !0), n(g, s(d, {
+                    get when() {
+                      return l.icon;
+                    },
+                    children: (S) => {
+                      const y = S();
+                      return s(y, {
+                        class: "floe-settings-navigation__icon"
+                      });
+                    }
+                  }), r), n(r, () => l.label), g;
+                })()
+              }), null), v(() => h(a, "data-settings-group", i.id)), a;
+            }
+          })
+        });
+      }
+    })), v(() => h(e, "aria-label", t.label)), e;
+  })();
+}
+function K(t) {
+  const [e, o] = 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, {
+      get class() {
+        return u("floe-settings-section", e.class);
+      },
+      get "data-settings-variant"() {
+        return e.variant ?? "section";
+      }
+    }), !1, !0), n(l, s(d, {
+      get when() {
+        return e.variant === "page";
+      },
+      get fallback() {
+        return (() => {
+          var r = j();
+          return n(r, () => e.title), r;
+        })();
+      },
+      get children() {
+        var r = A();
+        return n(r, () => e.title), r;
+      }
+    }), null), n(l, () => e.badge, null), n(_, s(d, {
+      get when() {
+        return e.description;
+      },
+      get children() {
+        var r = C();
+        return n(r, () => e.description), r;
+      }
+    }), null), n(a, s(d, {
+      get when() {
+        return e.actions;
+      },
+      get children() {
+        var r = F();
+        return n(r, () => e.actions), r;
+      }
+    }), null), n(g, () => e.children), i;
+  })();
+}
+function M(t) {
+  const [e, o] = w(t, ["class", "children"]);
+  return (() => {
+    var i = q();
+    return f(i, $(o, {
+      get class() {
+        return u("floe-settings-list", e.class);
+      },
+      "data-floe-surface": "card"
+    }), !1, !0), n(i, () => e.children), i;
+  })();
+}
+function O(t) {
+  return (() => {
+    var e = D(), o = e.firstChild, i = o.firstChild, a = i.firstChild, _ = a.firstChild;
+    return n(i, s(d, {
+      get when() {
+        return t.icon;
+      },
+      children: (l) => {
+        const g = l();
+        return s(g, {
+          class: "floe-setting-row__icon"
+        });
+      }
+    }), a), n(_, () => t.title), n(a, s(d, {
+      get when() {
+        return t.description;
+      },
+      get children() {
+        var l = C();
+        return n(l, () => t.description), l;
+      }
+    }), null), n(o, s(d, {
+      get when() {
+        return t.control;
+      },
+      get children() {
+        var l = z();
+        return n(l, () => t.control), l;
+      }
+    }), null), n(e, s(d, {
+      get when() {
+        return t.children;
+      },
+      get children() {
+        var l = B();
+        return n(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;
+    }, {
+      e: void 0,
+      t: void 0
+    }), e;
+  })();
+}
+export {
+  O as SettingRow,
+  I as SettingsLayout,
+  M as SettingsList,
+  J as SettingsNavigation,
+  K as SettingsSection
+};

package/dist/components/ui/index.d.ts

@@ -42,3 +42,4 @@ export { MobileKeyboard, type MobileKeyboardProps, type MobileKeyboardSuggestion
 export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, type LinearProgressProps, type CircularProgressProps, type SegmentedProgressProps, type StepsProgressProps, type ProgressSize, type ProgressColor, } from './Progress';
 export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';
 export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';
+export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, SettingRow, type SettingsNavigationItem, type SettingsNavigationGroup, type SettingsNavigationProps, type SettingsSectionProps, type SettingRowProps, } from './Settings';

package/dist/context/ViewActivationContext.d.ts

@@ -1,6 +1,9 @@
 import { type Accessor, type JSX } from 'solid-js';
 export interface ViewActivationContextValue {
     id: string;
+    /** Immediate presentation visibility. Custom providers default to their active accessor. */
+    visible?: Accessor<boolean>;
+    /** Activation effects may wait until after the visible content paints. */
     active: Accessor<boolean>;
     activationSeq: Accessor<number>;
 }
@@ -9,4 +12,4 @@ export interface ViewActivationProviderProps {
     children: JSX.Element;
 }
 export declare function ViewActivationProvider(props: ViewActivationProviderProps): JSX.Element;
-export declare function useViewActivation(): ViewActivationContextValue;
+export declare function useViewActivation(): Required<ViewActivationContextValue>;

package/dist/context/ViewActivationContext.js

@@ -1,22 +1,25 @@
-import { createComponent as i } from "solid-js/web";
-import { untrack as n, useContext as r, createContext as c } from "solid-js";
-const e = c();
-function v(t) {
-  const o = n(() => t.value);
-  return i(e.Provider, {
-    value: o,
+import { createComponent as a } from "solid-js/web";
+import { useContext as o, untrack as v, createContext as u } from "solid-js";
+const i = u();
+function w(t) {
+  const n = o(i), e = v(() => t.value), r = e.visible ?? e.active, c = {
+    ...e,
+    visible: () => (n?.visible() ?? !0) && r()
+  };
+  return a(i.Provider, {
+    value: c,
     get children() {
       return t.children;
     }
   });
 }
-function w() {
-  const t = r(e);
+function d() {
+  const t = o(i);
   if (!t)
     throw new Error("ViewActivationContext not found. Wrap your view with <ViewActivationProvider />.");
   return t;
 }
 export {
-  v as ViewActivationProvider,
-  w as useViewActivation
+  w as ViewActivationProvider,
+  d as useViewActivation
 };