@floegence/floe-webapp-core 0.34.0 → 0.35.0

package/dist/components/layout/ActivityBar.js

@@ -1,61 +1,61 @@
-import { insert as a, createComponent as l, effect as f, className as b, template as s, Dynamic as A, memo as k, setAttribute as x, delegateEvents as w } from "solid-js/web";
-import { createMemo as v, For as y, Show as m } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
+import { insert as o, createComponent as l, effect as f, className as b, template as u, Dynamic as A, memo as k, setAttribute as y, delegateEvents as w } from "solid-js/web";
+import { createMemo as v, For as x, Show as g } from "solid-js";
+import { cn as m } from "../../utils/cn.js";
 import { deferNonBlocking as I } from "../../utils/defer.js";
 import { Tooltip as $ } from "../ui/Tooltip.js";
 import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
-var B = /* @__PURE__ */ s('<div class="flex flex-col">'), p = /* @__PURE__ */ s('<div><div class="flex flex-col">'), S = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), j = /* @__PURE__ */ s("<span>"), N = /* @__PURE__ */ s("<button type=button>");
+var B = /* @__PURE__ */ u('<div class="flex flex-col">'), p = /* @__PURE__ */ u('<div data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), S = /* @__PURE__ */ u('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), j = /* @__PURE__ */ u("<span>"), N = /* @__PURE__ */ u("<button type=button>");
 function V(e) {
-  const o = v(() => e.activeId), n = v(() => e.collapsed ?? !1), t = v(() => e.onActiveChange), c = v(() => e.onCollapsedChange), u = (i) => {
+  const a = v(() => e.activeId), r = v(() => e.collapsed ?? !1), t = v(() => e.onActiveChange), c = v(() => e.onCollapsedChange), s = (i) => {
     if (i.onClick) {
       I(() => i.onClick());
       return;
     }
-    const r = _({
+    const n = _({
       clickedId: i.id,
-      activeId: o(),
-      collapsed: n(),
+      activeId: a(),
+      collapsed: r(),
       behavior: i.collapseBehavior
     });
-    r.nextActiveId !== o() && (typeof r.openSidebar == "boolean" ? t()(r.nextActiveId, {
-      openSidebar: r.openSidebar
-    }) : t()(r.nextActiveId)), typeof r.nextCollapsed == "boolean" && c()?.(r.nextCollapsed);
+    n.nextActiveId !== a() && (typeof n.openSidebar == "boolean" ? t()(n.nextActiveId, {
+      openSidebar: n.openSidebar
+    }) : t()(n.nextActiveId)), typeof n.nextCollapsed == "boolean" && c()?.(n.nextCollapsed);
   };
   return (() => {
-    var i = p(), r = i.firstChild;
-    return a(r, l(y, {
+    var i = p(), n = i.firstChild;
+    return o(n, l(x, {
       get each() {
         return e.items;
       },
       children: (d) => l(C, {
         item: d,
         get isActive() {
-          return o() === d.id;
+          return a() === d.id;
         },
-        onClick: () => u(d)
+        onClick: () => s(d)
       })
-    })), a(i, l(m, {
+    })), o(i, l(g, {
       get when() {
         return e.bottomItems?.length;
       },
       get children() {
         var d = B();
-        return a(d, l(y, {
+        return o(d, l(x, {
           get each() {
             return e.bottomItems;
           },
           children: (h) => l(C, {
             item: h,
             isActive: !1,
-            onClick: () => u(h)
+            onClick: () => s(h)
           })
         })), d;
       }
-    }), null), f(() => b(i, g("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
+    }), null), f(() => b(i, m("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
   })();
 }
 function C(e) {
-  const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+  const a = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return l($, {
     get content() {
       return e.item.label;
@@ -63,38 +63,38 @@ function C(e) {
     placement: "right",
     delay: 0,
     get children() {
-      var n = N();
-      return n.$$click = () => e.onClick(), a(n, l(m, {
+      var r = N();
+      return r.$$click = () => e.onClick(), o(r, l(g, {
         get when() {
           return e.isActive;
         },
         get children() {
           return S();
         }
-      }), null), a(n, l(A, {
+      }), null), o(r, l(A, {
         get component() {
           return e.item.icon;
         },
         class: "w-5 h-5"
-      }), null), a(n, l(m, {
+      }), null), o(r, l(g, {
         get when() {
-          return o();
+          return a();
         },
         get children() {
           var t = j();
-          return a(t, (() => {
-            var c = k(() => typeof o() == "number" && o() > 99);
-            return () => c() ? "99+" : o();
-          })()), f(() => b(t, g("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
+          return o(t, (() => {
+            var c = k(() => typeof a() == "number" && a() > 99);
+            return () => c() ? "99+" : a();
+          })()), f(() => b(t, m("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
         }
       }), null), f((t) => {
-        var c = g("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
-        return c !== t.e && b(n, t.e = c), u !== t.t && x(n, "aria-label", t.t = u), i !== t.a && x(n, "aria-pressed", t.a = i), t;
+        var c = m("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), s = e.item.label, i = e.isActive;
+        return c !== t.e && b(r, t.e = c), s !== t.t && y(r, "aria-label", t.t = s), i !== t.a && y(r, "aria-pressed", t.a = i), t;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
-      }), n;
+      }), r;
     }
   });
 }

package/dist/components/layout/BottomBar.js

@@ -1,16 +1,16 @@
-import { insert as r, effect as u, className as a, createComponent as c, template as i, delegateEvents as f } from "solid-js/web";
+import { insert as n, effect as a, className as u, createComponent as c, template as i, delegateEvents as b } from "solid-js/web";
 import { Show as s } from "solid-js";
 import { cn as m } from "../../utils/cn.js";
-import { useResolvedFloeConfig as b } from "../../context/FloeConfigContext.js";
-var h = /* @__PURE__ */ i("<footer>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), $ = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
+import { useResolvedFloeConfig as f } from "../../context/FloeConfigContext.js";
+var h = /* @__PURE__ */ i("<footer data-floe-shell-slot=bottom-bar style=border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), $ = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
 function C(e) {
   return (() => {
-    var n = h();
-    return r(n, () => e.children), u(() => a(n, m("h-5 shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", e.class))), n;
+    var r = h();
+    return n(r, () => e.children), a(() => u(r, m("h-5 shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", e.class))), r;
   })();
 }
 function v(e) {
-  const n = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", e.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", e.class);
+  const r = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", e.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", e.class);
   return c(s, {
     get when() {
       return e.onClick;
@@ -18,53 +18,53 @@ function v(e) {
     get fallback() {
       return (() => {
         var t = d();
-        return r(t, c(s, {
+        return n(t, c(s, {
           get when() {
             return e.icon;
           },
           get children() {
             var o = g();
-            return r(o, () => e.icon), o;
+            return n(o, () => e.icon), o;
           }
-        }), null), r(t, () => e.children, null), u(() => a(t, n())), t;
+        }), null), n(t, () => e.children, null), a(() => u(t, r())), t;
       })();
     },
     get children() {
       var t = $();
-      return t.$$click = () => e.onClick?.(), r(t, c(s, {
+      return t.$$click = () => e.onClick?.(), n(t, c(s, {
         get when() {
           return e.icon;
         },
         get children() {
           var o = g();
-          return r(o, () => e.icon), o;
+          return n(o, () => e.icon), o;
         }
-      }), null), r(t, () => e.children, null), u(() => a(t, n())), t;
+      }), null), n(t, () => e.children, null), a(() => u(t, r())), t;
     }
   });
 }
-function B(e) {
-  const n = b(), t = {
+function y(e) {
+  const r = f(), t = {
     connected: "bg-success",
     disconnected: "bg-muted-foreground",
     connecting: "bg-warning animate-pulse",
     error: "bg-error"
-  }, o = () => n.config.strings.statusIndicator;
+  }, o = () => r.config.strings.statusIndicator;
   return c(v, {
     get children() {
       return [(() => {
         var l = d();
-        return u(() => a(l, m("w-1.5 h-1.5 rounded-full", t[e.status]))), l;
+        return a(() => u(l, m("w-1.5 h-1.5 rounded-full", t[e.status]))), l;
       })(), (() => {
         var l = d();
-        return r(l, () => e.label ?? o()[e.status]), l;
+        return n(l, () => e.label ?? o()[e.status]), l;
       })()];
     }
   });
 }
-f(["click"]);
+b(["click"]);
 export {
   C as BottomBar,
   v as BottomBarItem,
-  B as StatusIndicator
+  y as StatusIndicator
 };

package/dist/components/layout/MobileTabBar.js

@@ -1,53 +1,53 @@
-import { insert as a, createComponent as c, effect as k, className as v, template as f, Dynamic as I, memo as L, setAttribute as y, use as F, delegateEvents as W } from "solid-js/web";
+import { insert as a, createComponent as c, effect as k, className as v, template as f, Dynamic as I, memo as L, setAttribute as w, use as F, delegateEvents as W } from "solid-js/web";
 import { createSignal as C, onMount as M, onCleanup as R, Show as x, For as j } from "solid-js";
 import { cn as b } from "../../utils/cn.js";
 import { deferNonBlocking as $ } from "../../utils/defer.js";
-var q = /* @__PURE__ */ f('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), z = /* @__PURE__ */ f('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ f('<nav><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"style=-webkit-overflow-scrolling:touch>'), E = /* @__PURE__ */ f("<span>"), N = /* @__PURE__ */ f('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ f("<button type=button role=tab><div></div><span>");
+var q = /* @__PURE__ */ f('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), z = /* @__PURE__ */ f('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ f('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"style=-webkit-overflow-scrolling:touch>'), E = /* @__PURE__ */ f("<span>"), N = /* @__PURE__ */ f('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ f("<button type=button role=tab><div></div><span>");
 function K(e) {
   let n;
-  const [l, s] = C(!1), [g, t] = C(!1);
-  let i = null;
-  const u = () => {
+  const [i, s] = C(!1), [g, t] = C(!1);
+  let r = null;
+  const d = () => {
     n && (s(n.scrollLeft > 0), t(n.scrollLeft < n.scrollWidth - n.clientWidth - 1));
   }, h = () => {
-    if (i === null) {
+    if (r === null) {
       if (typeof requestAnimationFrame > "u") {
-        u();
+        d();
         return;
       }
-      i = requestAnimationFrame(() => {
-        i = null, u();
+      r = requestAnimationFrame(() => {
+        r = null, d();
       });
     }
   };
   return M(() => {
-    u();
-    const o = e.items.findIndex((r) => r.id === e.activeId);
+    d();
+    const o = e.items.findIndex((l) => l.id === e.activeId);
     if (o > 0 && n) {
-      const r = n.scrollWidth / e.items.length;
-      n.scrollLeft = Math.max(0, r * o - n.clientWidth / 2 + r / 2);
+      const l = n.scrollWidth / e.items.length;
+      n.scrollLeft = Math.max(0, l * o - n.clientWidth / 2 + l / 2);
     }
   }), R(() => {
-    i !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(i), i = null);
+    r !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(r), r = null);
   }), (() => {
-    var o = B(), r = o.firstChild, d = r.firstChild;
-    a(r, c(x, {
+    var o = B(), l = o.firstChild, u = l.firstChild;
+    a(l, c(x, {
       get when() {
-        return l();
+        return i();
       },
       get children() {
         return q();
       }
-    }), d), a(r, c(x, {
+    }), u), a(l, c(x, {
       get when() {
         return g();
       },
       get children() {
         return z();
       }
-    }), d), d.addEventListener("scroll", h);
-    var w = n;
-    return typeof w == "function" ? F(w, d) : n = d, a(d, c(j, {
+    }), u), u.addEventListener("scroll", h);
+    var y = n;
+    return typeof y == "function" ? F(y, u) : n = u, a(u, c(j, {
       get each() {
         return e.items;
       },
@@ -73,8 +73,8 @@ function K(e) {
 function D(e) {
   const n = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var l = T(), s = l.firstChild, g = s.nextSibling;
-    return l.$$click = () => e.onClick(), a(s, c(I, {
+    var i = T(), s = i.firstChild, g = s.nextSibling;
+    return i.$$click = () => e.onClick(), a(s, c(I, {
       get component() {
         return e.item.icon;
       },
@@ -86,11 +86,11 @@ function D(e) {
       get children() {
         var t = E();
         return a(t, (() => {
-          var i = L(() => typeof n() == "number" && n() > 99);
-          return () => i() ? "99+" : n();
+          var r = L(() => typeof n() == "number" && n() > 99);
+          return () => r() ? "99+" : n();
         })()), k(() => v(t, b("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), a(g, () => e.item.label), a(l, c(x, {
+    }), null), a(g, () => e.item.label), a(i, c(x, {
       get when() {
         return e.isActive;
       },
@@ -98,15 +98,15 @@ function D(e) {
         return N();
       }
     }), null), k((t) => {
-      var i = b("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-all duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), u = e.item.label, h = e.isActive, o = b("relative transition-transform duration-150", e.isActive && "scale-110"), r = b("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return i !== t.e && v(l, t.e = i), u !== t.t && y(l, "aria-label", t.t = u), h !== t.a && y(l, "aria-selected", t.a = h), o !== t.o && v(s, t.o = o), r !== t.i && v(g, t.i = r), t;
+      var r = b("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-all duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), d = e.item.label, h = e.isActive, o = b("relative transition-transform duration-150", e.isActive && "scale-110"), l = b("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return r !== t.e && v(i, t.e = r), d !== t.t && w(i, "aria-label", t.t = d), h !== t.a && w(i, "aria-selected", t.a = h), o !== t.o && v(s, t.o = o), l !== t.i && v(g, t.i = l), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), l;
+    }), i;
   })();
 }
 W(["click"]);

package/dist/components/layout/Shell.d.ts

@@ -1,5 +1,18 @@
 import { type JSX } from 'solid-js';
 import { type ActivityBarItem } from './ActivityBar';
+export interface ShellSlotClassNames {
+    root?: string;
+    topBar?: string;
+    activityBar?: string;
+    sidebar?: string;
+    mobileSidebarBackdrop?: string;
+    mobileSidebarDrawer?: string;
+    contentArea?: string;
+    main?: string;
+    terminalPanel?: string;
+    bottomBar?: string;
+    mobileTabBar?: string;
+}
 export interface ShellProps {
     children: JSX.Element;
     logo?: JSX.Element;
@@ -26,6 +39,7 @@ export interface ShellProps {
      */
     sidebarMode?: 'auto' | 'hidden';
     terminalPanel?: JSX.Element;
+    slotClassNames?: ShellSlotClassNames;
     class?: string;
 }
 /**