@floegence/floe-webapp-core 0.35.21 → 0.35.22

package/dist/components/layout/SidebarPane.js

@@ -1,74 +1,77 @@
-import { insert as i, createComponent as o, use as B, effect as k, className as s, setStyleProperty as C, template as a, delegateEvents as M } from "solid-js/web";
-import { Show as l } from "solid-js";
-import { useLayout as j } from "../../context/LayoutContext.js";
-import { cn as d } from "../../utils/cn.js";
-import { ResizeHandle as A } from "./ResizeHandle.js";
-var E = /* @__PURE__ */ a('<div class="min-w-0 flex items-center gap-1.5">'), O = /* @__PURE__ */ a('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), P = /* @__PURE__ */ a('<div class="flex min-w-0 items-center gap-1.5">'), H = /* @__PURE__ */ a('<aside data-floe-geometry-surface=sidebar-pane><div><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"></span></div><div>'), L = /* @__PURE__ */ a("<div>");
-function I(e) {
-  const z = j(), m = () => z.isMobile(), v = () => e.width ?? 240, c = () => e.open ?? !0, u = () => m() && e.mobileOverlay !== !1 && c(), w = () => u() && typeof e.onClose == "function", R = () => u() && e.mobileBackdrop !== !1 && typeof e.onClose == "function", _ = () => e.resizable && c() && !m() && typeof e.onResize == "function";
+import { insert as r, createComponent as o, use as E, effect as S, className as d, setStyleProperty as _, setAttribute as f, template as a, delegateEvents as L } from "solid-js/web";
+import { Show as s } from "solid-js";
+import { useLayout as O } from "../../context/LayoutContext.js";
+import { cn as c } from "../../utils/cn.js";
+import { ResizeHandle as P } from "./ResizeHandle.js";
+var H = /* @__PURE__ */ a('<div class="min-w-0 flex items-center gap-1.5">'), N = /* @__PURE__ */ a('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-sidebar-ring focus-visible:ring-inset"aria-label="Close sidebar"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), q = /* @__PURE__ */ a('<div class="flex min-w-0 items-center gap-1.5">'), D = /* @__PURE__ */ a('<aside data-floe-geometry-surface=sidebar-pane><div><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"></span></div><div>'), F = /* @__PURE__ */ a("<div>");
+function T(t) {
+  const A = O(), m = () => A.isMobile(), g = () => t.width ?? 240, u = () => t.open ?? !0, l = () => m() && t.mobileOverlay !== !1 && u(), w = () => l() && typeof t.onClose == "function", B = () => l() && t.mobileBackdrop !== !1 && typeof t.onClose == "function", M = () => t.resizable && u() && !m() && typeof t.onResize == "function";
   return [(() => {
-    var n = H(), h = n.firstChild, f = h.firstChild, S = f.firstChild, b = f.nextSibling;
-    return i(S, () => e.title), i(f, o(l, {
+    var i = D(), h = i.firstChild, v = h.firstChild, j = v.firstChild, b = v.nextSibling;
+    return r(j, () => t.title), r(v, o(s, {
       get when() {
-        return e.headerActions || w();
+        return t.headerActions || w();
       },
       get children() {
-        var t = P();
-        return i(t, o(l, {
+        var e = q();
+        return r(e, o(s, {
           get when() {
-            return e.headerActions;
+            return t.headerActions;
           },
           get children() {
-            var r = E();
-            return i(r, () => e.headerActions), r;
+            var n = H();
+            return r(n, () => t.headerActions), n;
           }
-        }), null), i(t, o(l, {
+        }), null), r(e, o(s, {
           get when() {
             return w();
           },
           get children() {
-            var r = O();
-            return r.$$click = () => e.onClose?.(), r;
+            var n = N();
+            return n.$$click = () => t.onClose?.(), n;
           }
-        }), null), t;
+        }), null), e;
       }
-    }), null), B((t) => e.bodyRef?.(t), b), i(b, () => e.children), i(n, o(l, {
+    }), null), E((e) => t.bodyRef?.(e), b), r(b, () => t.children), r(i, o(s, {
       get when() {
-        return _();
+        return M();
       },
       get children() {
-        return o(A, {
+        return o(P, {
           direction: "horizontal",
-          onResize: (t) => e.onResize?.(t),
+          onResize: (e) => t.onResize?.(e),
           get onResizeStart() {
-            return e.onResizeStart;
+            return t.onResizeStart;
           },
           get onResizeEnd() {
-            return e.onResizeEnd;
+            return t.onResizeEnd;
           }
         });
       }
-    }), null), k((t) => {
-      var r = d("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-[width,transform,box-shadow] duration-200 ease-out", "overflow-hidden", u() && "absolute inset-y-0 left-0 z-10 shadow-lg", e.class), g = c() ? `${v()}px` : "0px", x = d("h-full flex flex-col", e.innerClass), y = `${v()}px`, $ = d("flex-1 min-h-0 overflow-auto", e.bodyClass);
-      return r !== t.e && s(n, t.e = r), g !== t.t && C(n, "width", t.t = g), x !== t.a && s(h, t.a = x), y !== t.o && C(h, "width", t.o = y), $ !== t.i && s(b, t.i = $), t;
+    }), null), S((e) => {
+      var n = c("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-[width,transform,box-shadow] duration-200 ease-out", "overflow-hidden", l() && "absolute inset-y-0 left-0 z-10 shadow-lg", t.class), x = u() ? `${g()}px` : "0px", y = l() ? "dialog" : void 0, k = l() ? "true" : void 0, C = t.ariaLabel, z = c("h-full flex flex-col", t.innerClass), $ = `${g()}px`, R = c("flex-1 min-h-0 overflow-auto", t.bodyClass);
+      return n !== e.e && d(i, e.e = n), x !== e.t && _(i, "width", e.t = x), y !== e.a && f(i, "role", e.a = y), k !== e.o && f(i, "aria-modal", e.o = k), C !== e.i && f(i, "aria-label", e.i = C), z !== e.n && d(h, e.n = z), $ !== e.s && _(h, "width", e.s = $), R !== e.h && d(b, e.h = R), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0
-    }), n;
-  })(), o(l, {
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0
+    }), i;
+  })(), o(s, {
     get when() {
-      return R();
+      return B();
     },
     get children() {
-      var n = L();
-      return n.$$click = () => e.onClose?.(), k(() => s(n, d("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", e.backdropClass))), n;
+      var i = F();
+      return i.$$click = () => t.onClose?.(), S(() => d(i, c("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", t.backdropClass))), i;
     }
   })];
 }
-M(["click"]);
+L(["click"]);
 export {
-  I as SidebarPane
+  T as SidebarPane
 };

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

@@ -3,6 +3,7 @@ export interface TopBarProps {
     logo?: JSX.Element;
     title?: string;
     actions?: JSX.Element;
+    ariaLabel?: string;
     class?: string;
 }
 /**

package/dist/components/layout/TopBar.js

@@ -1,48 +1,49 @@
-import { insert as t, createComponent as d, effect as $, className as g, template as l, delegateEvents as k } from "solid-js/web";
-import { Show as h } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-import { useCommand as y } from "../../context/CommandContext.js";
-import { Search as _ } from "../icons/index.js";
-import { useResolvedFloeConfig as w } from "../../context/FloeConfigContext.js";
-var C = /* @__PURE__ */ l('<span class="font-medium text-xs hidden sm:inline">'), S = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/80 border border-border/50 font-mono shrink-0">'), B = /* @__PURE__ */ l('<header data-floe-shell-slot=top-bar style=border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-3 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-1">'), E = /* @__PURE__ */ l('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
+import { insert as t, createComponent as d, effect as y, className as h, setAttribute as $, template as i, delegateEvents as _ } from "solid-js/web";
+import { Show as v } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
+import { useCommand as w } from "../../context/CommandContext.js";
+import { Search as C } from "../icons/index.js";
+import { useResolvedFloeConfig as S } from "../../context/FloeConfigContext.js";
+var B = /* @__PURE__ */ i('<span class="font-medium text-xs hidden sm:inline">'), E = /* @__PURE__ */ i('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/80 border border-border/50 font-mono shrink-0">'), F = /* @__PURE__ */ i('<header data-floe-shell-slot=top-bar style=border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-3 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-1">'), j = /* @__PURE__ */ i('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
 function R(o) {
-  const c = y(), i = w(), n = () => i.config.commands.palette.enabled;
+  const c = w(), a = S(), n = () => a.config.commands.palette.enabled;
   return (() => {
-    var s = B(), x = s.firstChild, a = x.firstChild, r = a.nextSibling, m = r.firstChild, v = r.nextSibling;
-    return t(a, () => o.logo || E(), null), t(a, d(h, {
+    var l = F(), p = l.firstChild, s = p.firstChild, r = s.nextSibling, m = r.firstChild, k = r.nextSibling;
+    return t(s, () => o.logo || j(), null), t(s, d(v, {
       get when() {
         return o.title;
       },
       get children() {
-        var e = C();
+        var e = B();
         return t(e, () => o.title), e;
       }
-    }), null), r.$$click = () => n() && c.open(), t(r, d(_, {
+    }), null), r.$$click = () => n() && c.open(), t(r, d(C, {
       class: "w-3.5 h-3.5 shrink-0"
-    }), m), t(m, () => i.config.strings.topBar.searchPlaceholder), t(r, d(h, {
+    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, d(v, {
       get when() {
         return n();
       },
       get children() {
-        var e = S();
-        return t(e, () => c.getKeybindDisplay(i.config.commands.palette.keybind)), e;
+        var e = E();
+        return t(e, () => c.getKeybindDisplay(a.config.commands.palette.keybind)), e;
       }
-    }), null), t(v, () => o.actions), $((e) => {
-      var f = p(
+    }), null), t(k, () => o.actions), y((e) => {
+      var b = x(
         // Safe-area padding must not be applied on a fixed-height element (border-box),
         // otherwise the content gets squeezed on iOS notch devices.
         "shrink-0 bg-background border-b border-border safe-top safe-left safe-right",
         o.class
-      ), b = !n(), u = p("flex-1 max-w-sm flex items-center gap-2 h-7 px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-xs text-muted-foreground", "bg-muted/40 hover:bg-muted/70 rounded", "border border-transparent hover:border-border/50", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-60 hover:bg-muted/40");
-      return f !== e.e && g(s, e.e = f), b !== e.t && (r.disabled = e.t = b), u !== e.a && g(r, e.a = u), e;
+      ), f = o.ariaLabel, u = !n(), g = x("flex-1 max-w-sm flex items-center gap-2 h-7 px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-xs text-muted-foreground", "bg-muted/40 hover:bg-muted/70 rounded", "border border-transparent hover:border-border/50", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-60 hover:bg-muted/40");
+      return b !== e.e && h(l, e.e = b), f !== e.t && $(l, "aria-label", e.t = f), u !== e.a && (r.disabled = e.a = u), g !== e.o && h(r, e.o = g), e;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
-    }), s;
+      a: void 0,
+      o: void 0
+    }), l;
   })();
 }
-k(["click"]);
+_(["click"]);
 export {
   R as TopBar
 };

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

@@ -14,12 +14,25 @@ export interface DropdownItem {
 }
 export interface DropdownProps {
     trigger: JSX.Element;
+    triggerClass?: string;
+    triggerAriaLabel?: string;
     items: DropdownItem[];
     value?: string;
     onSelect: (id: string) => void;
     align?: 'start' | 'center' | 'end';
+    disabled?: boolean;
     class?: string;
 }
+export type DropdownFocusMode = 'first' | 'last' | 'selected';
+export interface DropdownTriggerAction {
+    nextOpen: boolean;
+    focusMode?: DropdownFocusMode;
+}
+export declare function resolveDropdownTriggerKeyAction(key: string, options: {
+    open: boolean;
+    hasSelection: boolean;
+}): DropdownTriggerAction | null;
+export declare function getWrappedMenuItemIndex(length: number, currentIndex: number, delta: 1 | -1): number | null;
 /**
  * Dropdown menu component with cascade submenu support
  */