@floegence/floe-webapp-core 0.39.4 → 0.39.6

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

@@ -0,0 +1,33 @@
+import { type JSX } from 'solid-js';
+export type BottomBarCompanionPhase = 'collapsed' | 'expanding' | 'expanded' | 'collapsing';
+export type BottomBarCompanionDismissReason = 'outside-pointer' | 'escape';
+export interface BottomBarCompanionProps {
+    retained: boolean;
+    visible: boolean;
+    open: boolean;
+    anchor: HTMLElement | null;
+    mount: HTMLElement | null;
+    id: string;
+    label: string;
+    children?: JSX.Element;
+    maxWidth?: number;
+    maxHeight?: number;
+    viewportPadding?: number;
+    class?: string;
+    contentClass?: string;
+    surfaceRef?: (element: HTMLElement | null) => void;
+    contentHostRef?: (element: HTMLElement | null) => void;
+    isOwnedInteraction?: (event: PointerEvent | KeyboardEvent) => boolean;
+    onDismiss?: (reason: BottomBarCompanionDismissReason) => void;
+    onPhaseChange?: (phase: BottomBarCompanionPhase) => void;
+}
+/**
+ * A non-modal surface that grows upward from a Bottom Bar anchor.
+ *
+ * This is intentionally distinct from windows, popovers, and modal drawers:
+ * it retains one fixed shell and one content host across collapsed and expanded
+ * presentation. Products that also have a full-page placement can Portal their
+ * stable product tree into `contentHostRef` without giving this component
+ * ownership of that tree.
+ */
+export declare function BottomBarCompanion(props: BottomBarCompanionProps): JSX.Element;

package/dist/components/layout/BottomBarCompanion.js

@@ -0,0 +1,233 @@
+import { createComponent as Z, Portal as ce, use as $, insert as le, effect as ue, setAttribute as R, className as p, style as de, memo as fe, template as me } from "solid-js/web";
+import { createSignal as N, createEffect as k, untrack as G, onCleanup as U, Show as he } from "solid-js";
+import { cn as ee } from "../../utils/cn.js";
+var ve = /* @__PURE__ */ me("<section role=region data-floe-bottom-bar-companion=true><div data-floe-bottom-bar-companion-content=true>");
+const we = 544, be = 544, ge = 12, z = {
+  top: "--floe-bottom-bar-companion-safe-area-top",
+  right: "--floe-bottom-bar-companion-safe-area-right",
+  bottom: "--floe-bottom-bar-companion-safe-area-bottom",
+  left: "--floe-bottom-bar-companion-safe-area-left"
+};
+function te(e, a) {
+  const l = Number(e);
+  return Number.isFinite(l) && l > 0 ? l : a;
+}
+function Ce(e, a) {
+  const l = Number(e);
+  return Number.isFinite(l) && l >= 0 ? l : a;
+}
+function ne(e) {
+  if (!e?.isConnected) return null;
+  const a = e.getBoundingClientRect();
+  return !Number.isFinite(a.left) || !Number.isFinite(a.top) || a.width <= 0 || a.height <= 0 ? null : {
+    left: a.left,
+    top: a.top,
+    width: a.width,
+    height: a.height
+  };
+}
+function B(e, a) {
+  const l = e.ownerDocument.defaultView;
+  if (!l) return 0;
+  const m = Number.parseFloat(l.getComputedStyle(e).getPropertyValue(a));
+  return Number.isFinite(m) && m > 0 ? m : 0;
+}
+function Fe(e) {
+  return {
+    top: B(e, z.top),
+    right: B(e, z.right),
+    bottom: B(e, z.bottom),
+    left: B(e, z.left)
+  };
+}
+function ye(e, a, l, m, C) {
+  const F = a.ownerDocument.defaultView, y = F?.visualViewport, v = y?.offsetLeft ?? 0, D = y?.offsetTop ?? 0, q = y?.width ?? F?.innerWidth ?? e.left + e.width, H = y?.height ?? F?.innerHeight ?? e.top + e.height, E = Fe(a), W = v + E.left + C, w = v + q - E.right - C, b = D + E.top + C, h = D + H - E.bottom - C, g = Math.max(0, w - W), d = Math.min(e.width, l, g), P = e.left + (e.width - d) / 2, M = Math.max(W, Math.min(P, w - d)), L = Math.min(e.top + e.height, h), V = Math.max(e.height, L - b), x = Math.min(m, V);
+  return {
+    left: M,
+    top: L - x,
+    width: d,
+    height: x
+  };
+}
+function Ee(e, a) {
+  return !!(e && e.left === a.left && e.top === a.top && e.width === a.width && e.height === a.height);
+}
+function Ae(e) {
+  return e ? {
+    left: `${e.left}px`,
+    top: `${e.top}px`,
+    width: `${e.width}px`,
+    height: `${e.height}px`
+  } : {};
+}
+function Me(e) {
+  const [a, l] = N(null), [m, C] = N(!1), [F, y] = N(!1), [v, D] = N(null), [q, H] = N(null), [E, W] = N("collapsed");
+  let w = null, b = 0, h = 0, g = null, d = null, P = null, M = !1, L = !1;
+  const V = (i) => {
+    E() !== i && (W(i), e.onPhaseChange?.(i));
+  }, x = () => a()?.ownerDocument.defaultView ?? e.anchor?.ownerDocument.defaultView ?? null, oe = () => x()?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1, _ = (i) => {
+    const t = e.mount, r = e.anchor, n = !!(t?.isConnected && i && r?.ownerDocument === t.ownerDocument);
+    n && l(t);
+    const c = a();
+    if (c) {
+      C(c.isConnected);
+      const o = !!(n && c === t);
+      return y(o), {
+        mount: c,
+        ready: o
+      };
+    }
+    return C(!1), y(!1), {
+      mount: null,
+      ready: !1
+    };
+  }, ie = (i) => {
+    const t = ne(e.anchor);
+    t && H(t);
+    const {
+      mount: r,
+      ready: n
+    } = _(t), c = t ?? q();
+    return !c || !r || !n ? null : i ? ye(c, r, te(e.maxWidth, we), te(e.maxHeight, be), Ce(e.viewportPadding, ge)) : c;
+  }, X = () => {
+    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), b = 0, h = 0, g = null, d = null, P = null;
+  }, K = (i, t) => {
+    const r = ie(i);
+    if (!r) return;
+    const n = v(), c = i ? "expanded" : "collapsed";
+    if (!t || oe() || Ee(n, r)) {
+      D(r), P = null, V(c);
+      return;
+    }
+    P = ["height", "width", "top", "left"].find((u) => n?.[u] !== r[u]) ?? null, V(i ? "expanding" : "collapsing");
+    const o = x();
+    if (!o) {
+      D(r), V(c);
+      return;
+    }
+    h = o.requestAnimationFrame(() => {
+      h = 0, d = null, D(r);
+    }), d = o;
+  }, j = (i, t) => {
+    const r = x();
+    if (!r) {
+      K(t, i);
+      return;
+    }
+    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), h = 0, d = null, b = r.requestAnimationFrame(() => {
+      b = 0, g = null, G(() => K(t, i));
+    }), g = r;
+  };
+  k(() => {
+    const i = e.retained, t = e.visible, r = e.open;
+    if (e.anchor, e.mount, e.maxWidth, e.maxHeight, e.viewportPadding, !i) {
+      X(), l(null), C(!1), y(!1), D(null), H(null), w = null, e.surfaceRef?.(null), e.contentHostRef?.(null), M = !1, L = r;
+      return;
+    }
+    const n = ne(e.anchor);
+    if (n && H(n), _(n), !t) {
+      M = !1, L = r;
+      return;
+    }
+    const c = !M, o = L !== r;
+    M = !0, L = r, j(!c && o, r);
+  }), k(() => {
+    if (!e.retained) return;
+    const i = e.anchor, t = a(), r = e.mount, n = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
+    for (const s of [i, t, r]) {
+      if (!s) continue;
+      n.add(s.ownerDocument);
+      const f = s.ownerDocument.defaultView;
+      f && c.add(f);
+    }
+    if (c.size === 0 || n.size === 0) return;
+    const o = () => j(!1, G(() => e.open)), u = [];
+    for (const s of /* @__PURE__ */ new Set([i, t, r])) {
+      const f = s?.ownerDocument.defaultView;
+      if (!s || !f || typeof f.ResizeObserver != "function") continue;
+      const A = new f.ResizeObserver(o);
+      A.observe(s), u.push(A);
+    }
+    let S = i?.isConnected ?? !1, T = t?.isConnected ?? !1, I = r?.isConnected ?? !1;
+    const O = [];
+    for (const s of n) {
+      const f = s.defaultView;
+      if (!f || typeof f.MutationObserver != "function" || !s.documentElement) continue;
+      const A = new f.MutationObserver(() => {
+        const J = i?.isConnected ?? !1, Q = t?.isConnected ?? !1, Y = r?.isConnected ?? !1;
+        S === J && T === Q && I === Y || (S = J, T = Q, I = Y, G(o));
+      });
+      A.observe(s.documentElement, {
+        childList: !0,
+        subtree: !0
+      }), O.push(A);
+    }
+    for (const s of c)
+      s.addEventListener("resize", o), s.visualViewport?.addEventListener("resize", o), s.visualViewport?.addEventListener("scroll", o);
+    U(() => {
+      for (const s of u) s.disconnect();
+      for (const s of O) s.disconnect();
+      for (const s of c)
+        s.removeEventListener("resize", o), s.visualViewport?.removeEventListener("resize", o), s.visualViewport?.removeEventListener("scroll", o);
+    });
+  }), k(() => {
+    if (!e.retained || !e.visible || !e.open || !m() || !F() || !v()) return;
+    const t = a()?.ownerDocument;
+    if (!t) return;
+    const r = (o) => {
+      const u = typeof o.composedPath == "function" ? o.composedPath() : [];
+      return w && u.includes(w) || e.anchor && u.includes(e.anchor) ? !0 : e.isOwnedInteraction?.(o) ?? !1;
+    }, n = (o) => {
+      r(o) || e.onDismiss?.("outside-pointer");
+    }, c = (o) => {
+      if (o.key !== "Escape" || o.defaultPrevented || o.isComposing || o.keyCode === 229) return;
+      const u = t.activeElement;
+      !w?.contains(u) && !e.isOwnedInteraction?.(o) || (o.preventDefault(), e.onDismiss?.("escape"));
+    };
+    t.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", c), U(() => {
+      t.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", c);
+    });
+  }), U(() => {
+    X(), e.surfaceRef?.(null), e.contentHostRef?.(null);
+  });
+  const re = (i) => {
+    w = i, e.surfaceRef?.(i);
+  }, ae = (i) => {
+    e.contentHostRef?.(i);
+  }, se = (i) => {
+    if (i.target !== w || i.propertyName !== P) return;
+    const t = e.open ? "expanding" : "collapsing";
+    E() === t && (P = null, V(e.open ? "expanded" : "collapsed"));
+  };
+  return Z(he, {
+    get when() {
+      return fe(() => !!e.retained)() && a();
+    },
+    children: (i) => Z(ce, {
+      get mount() {
+        return i();
+      },
+      get children() {
+        var t = ve(), r = t.firstChild;
+        return t.addEventListener("transitionend", se), $((n) => re(n), t), $((n) => ae(n), r), le(r, () => e.children), ue((n) => {
+          var c = e.id, o = e.label, u = !e.visible || !m() || !F() || !v() ? "true" : void 0, S = !e.visible || !m() || !F() || !v(), T = ee("floe-bottom-bar-companion", e.class), I = E(), O = e.visible && m() && F() ? "visible" : "hidden", s = v() ? "true" : "false", f = Ae(v()), A = ee("floe-bottom-bar-companion__content", e.contentClass);
+          return c !== n.e && R(t, "id", n.e = c), o !== n.t && R(t, "aria-label", n.t = o), u !== n.a && R(t, "aria-hidden", n.a = u), S !== n.o && (t.inert = n.o = S), T !== n.i && p(t, n.i = T), I !== n.n && R(t, "data-companion-phase", n.n = I), O !== n.s && R(t, "data-companion-visibility", n.s = O), s !== n.h && R(t, "data-companion-frame-ready", n.h = s), n.r = de(t, f, n.r), A !== n.d && p(r, n.d = A), n;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0,
+          h: void 0,
+          r: void 0,
+          d: void 0
+        }), t;
+      }
+    })
+  });
+}
+export {
+  Me as BottomBarCompanion
+};

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

@@ -4,6 +4,7 @@ export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem,
 export { TopBar, type TopBarProps } from './TopBar';
 export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton';
 export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps } from './BottomBar';
+export { BottomBarCompanion, type BottomBarCompanionDismissReason, type BottomBarCompanionPhase, type BottomBarCompanionProps, } from './BottomBarCompanion';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
 export { SidebarPane, type SidebarPaneProps } from './SidebarPane';

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

@@ -4,7 +4,7 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
-export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuKeyboardNavigationOptions, } from './menuUtils';
+export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { SurfaceFloatingLayer, type SurfaceFloatingLayerPosition, type SurfaceFloatingLayerProps, type SurfaceFloatingLayerSize, } from './SurfaceFloatingLayer';

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

@@ -10,8 +10,13 @@ export type MenuBoundaryRect = Readonly<{
 }>;
 export type MenuFocusMode = 'first' | 'last' | 'selected';
 export type MenuDismissReason = 'escape' | 'tab' | 'shift-tab';
-export type MenuKeyboardNavigationOptions = Readonly<{
+export type MenuItemNavigationOptions = Readonly<{
+    includeAriaDisabledItems?: boolean;
+}>;
+export type MenuKeyboardNavigationOptions = MenuItemNavigationOptions & Readonly<{
     onDismiss: (reason: MenuDismissReason) => void;
+    onActivate?: (item: HTMLElement) => void;
+    preventDefaultOnTab?: boolean;
 }>;
 export declare function resolveViewportMenuBoundaryRect(): MenuBoundaryRect;
 export declare function clampMenuPosition(anchor: Readonly<{
@@ -33,7 +38,7 @@ export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRec
     y: number;
 };
 export declare function getWrappedMenuItemIndex(length: number, currentIndex: number, delta: 1 | -1): number | null;
-export declare function getMenuItems(root: ParentNode | null | undefined): HTMLElement[];
-export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode): boolean;
-export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1): boolean;
+export declare function getMenuItems(root: ParentNode | null | undefined, options?: MenuItemNavigationOptions): HTMLElement[];
+export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode, options?: MenuItemNavigationOptions): boolean;
+export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1, options?: MenuItemNavigationOptions): boolean;
 export declare function handleMenuKeyboardNavigation(event: KeyboardEvent, options: MenuKeyboardNavigationOptions): boolean;

package/dist/components/ui/menuUtils.js

@@ -1,5 +1,5 @@
-const E = 8, h = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
-function M() {
+const E = 8, I = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function c() {
   return typeof window > "u" ? {
     left: 0,
     top: 0,
@@ -16,97 +16,102 @@ function M() {
     height: window.innerHeight
   };
 }
-function f(t) {
-  return t ?? M();
+function l(t) {
+  return t ?? c();
 }
-function w(t, e, r) {
-  const n = f(r);
-  let o = t.x, i = t.y;
-  return o + e.width > n.right - 8 && (o = n.right - e.width - 8), i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), {
-    x: Math.max(n.left + 8, o),
-    y: Math.max(n.top + 8, i)
+function A(t, e, a) {
+  const n = l(a);
+  let i = t.x, r = t.y;
+  return i + e.width > n.right - 8 && (i = n.right - e.width - 8), r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), {
+    x: Math.max(n.left + 8, i),
+    y: Math.max(n.top + 8, r)
   };
 }
-function T(t, e, r, n) {
-  const o = f(n);
-  let i;
-  switch (r) {
+function T(t, e, a, n) {
+  const i = l(n);
+  let r;
+  switch (a) {
     case "center":
-      i = t.left + t.width / 2 - e.width / 2;
+      r = t.left + t.width / 2 - e.width / 2;
       break;
     case "end":
-      i = t.right - e.width;
+      r = t.right - e.width;
       break;
     default:
-      i = t.left;
+      r = t.left;
   }
-  let a = t.bottom + 4;
-  if (i + e.width > o.right - 8 && (i = o.right - e.width - 8), i = Math.max(o.left + 8, i), a + e.height > o.bottom - 8) {
-    const s = t.top - o.top - 8, d = o.bottom - t.bottom - 8;
-    s > d && s >= e.height ? a = t.top - e.height - 4 : a = o.bottom - e.height - 8;
+  let o = t.bottom + 4;
+  if (r + e.width > i.right - 8 && (r = i.right - e.width - 8), r = Math.max(i.left + 8, r), o + e.height > i.bottom - 8) {
+    const f = t.top - i.top - 8, d = i.bottom - t.bottom - 8;
+    f > d && f >= e.height ? o = t.top - e.height - 4 : o = i.bottom - e.height - 8;
   }
-  return a = Math.max(o.top + 8, a), { x: i, y: a };
+  return o = Math.max(i.top + 8, o), { x: r, y: o };
 }
-function A(t, e, r) {
-  const n = f(r);
-  let o = t.right, i = t.top;
-  if (o + e.width > n.right - 8) {
-    const a = t.left - e.width;
-    a >= n.left + 8 ? o = a : o = n.right - e.width - 8;
+function m(t, e, a) {
+  const n = l(a);
+  let i = t.right, r = t.top;
+  if (i + e.width > n.right - 8) {
+    const o = t.left - e.width;
+    o >= n.left + 8 ? i = o : i = n.right - e.width - 8;
   }
-  return i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), o = Math.max(n.left + 8, o), i = Math.max(n.top + 8, i), { x: o, y: i };
+  return r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), i = Math.max(n.left + 8, i), r = Math.max(n.top + 8, r), { x: i, y: r };
 }
-function c(t, e, r) {
-  return t <= 0 ? null : e < 0 ? r > 0 ? 0 : t - 1 : (e + r + t) % t;
+function M(t, e, a) {
+  return t <= 0 ? null : e < 0 ? a > 0 ? 0 : t - 1 : (e + a + t) % t;
 }
-function I(t) {
-  return !t || typeof HTMLElement > "u" ? [] : Array.from(t.querySelectorAll(h)).filter(
-    (e) => e instanceof HTMLElement
+function u(t, e = {}) {
+  if (!t || typeof HTMLElement > "u") return [];
+  const a = e.includeAriaDisabledItems ? '[role="menuitem"]:not([disabled])' : I;
+  return Array.from(t.querySelectorAll(a)).filter(
+    (n) => n instanceof HTMLElement
   );
 }
-function l(t, e = "first") {
-  const r = I(t);
-  if (!r.length) return !1;
-  let n = r[0];
-  return e === "last" ? n = r[r.length - 1] : e === "selected" && (n = r.find((o) => o.getAttribute("data-floe-selected") === "true") ?? r[0]), n.focus(), !0;
-}
-function u(t, e, r) {
-  const n = I(t);
+function s(t, e = "first", a = {}) {
+  const n = u(t, a);
   if (!n.length) return !1;
-  const o = e ? n.indexOf(e) : -1, i = c(n.length, o, r);
-  return i === null ? !1 : (n[i]?.focus(), !0);
+  let i = n[0];
+  return e === "last" ? i = n[n.length - 1] : e === "selected" && (i = n.find((r) => r.getAttribute("data-floe-selected") === "true") ?? n[0]), i.focus(), !0;
+}
+function h(t, e, a, n = {}) {
+  const i = u(t, n);
+  if (!i.length) return !1;
+  const r = e ? i.indexOf(e) : -1, o = M(i.length, r, a);
+  return o === null ? !1 : (i[o]?.focus(), !0);
 }
-function P(t, e) {
-  const r = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = r?.closest('[role="menu"]');
+function w(t, e) {
+  const a = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = a?.closest('[role="menu"]');
   if (!n) return !1;
-  const o = r?.closest(h);
+  const i = u(n, e), r = a?.closest('[role="menuitem"]'), o = r && i.includes(r) ? r : null;
   switch (t.key) {
     case "ArrowDown":
-      return t.preventDefault(), u(n, o, 1), !0;
+      return t.preventDefault(), h(n, o, 1, e), !0;
     case "ArrowUp":
-      return t.preventDefault(), u(n, o, -1), !0;
+      return t.preventDefault(), h(n, o, -1, e), !0;
     case "Home":
-      return t.preventDefault(), l(n, "first"), !0;
+      return t.preventDefault(), s(n, "first", e), !0;
     case "End":
-      return t.preventDefault(), l(n, "last"), !0;
+      return t.preventDefault(), s(n, "last", e), !0;
+    case "Enter":
+    case " ":
+      return o ? o.getAttribute("aria-disabled") === "true" ? (t.preventDefault(), !0) : e.onActivate ? (t.preventDefault(), e.onActivate(o), !0) : !1 : !1;
     case "Escape":
       return t.preventDefault(), t.stopPropagation(), e.onDismiss("escape"), !0;
     case "Tab":
-      return e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
+      return e.preventDefaultOnTab && t.preventDefault(), e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
     default:
       return !1;
   }
 }
 export {
-  h as MENU_ITEM_SELECTOR,
+  I as MENU_ITEM_SELECTOR,
   E as VIEWPORT_MARGIN,
   T as calculateMenuPosition,
-  A as calculateSubmenuPosition,
-  w as clampMenuPosition,
-  l as focusMenuItem,
-  I as getMenuItems,
-  c as getWrappedMenuItemIndex,
-  P as handleMenuKeyboardNavigation,
-  u as moveMenuFocus,
-  M as resolveViewportMenuBoundaryRect
+  m as calculateSubmenuPosition,
+  A as clampMenuPosition,
+  s as focusMenuItem,
+  u as getMenuItems,
+  M as getWrappedMenuItemIndex,
+  w as handleMenuKeyboardNavigation,
+  h as moveMenuFocus,
+  c as resolveViewportMenuBoundaryRect
 };

package/dist/floe.css

@@ -687,6 +687,66 @@
   }
 }
 
+.floe-bottom-bar-companion {
+  position: fixed;
+  z-index: var(--floe-bottom-bar-companion-z-index, 72);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
+  border-radius: var(--floe-bottom-bar-companion-collapsed-radius, 0.3125rem);
+  background: var(--background);
+  color: var(--foreground);
+  opacity: 1;
+  pointer-events: auto;
+  transform-origin: bottom center;
+  transition:
+    left 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    top 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-radius 200ms ease,
+    border-color 180ms ease,
+    box-shadow 200ms ease,
+    opacity 120ms ease;
+  will-change: left, top, width, height;
+}
+
+.floe-bottom-bar-companion[data-companion-phase='expanding'],
+.floe-bottom-bar-companion[data-companion-phase='expanded'] {
+  border-radius: var(--floe-bottom-bar-companion-expanded-radius, 0.5rem);
+  border-color: color-mix(in srgb, var(--border) 96%, transparent);
+  box-shadow:
+    0 22px 54px -24px color-mix(in srgb, var(--foreground) 34%, transparent),
+    0 6px 18px -12px color-mix(in srgb, var(--foreground) 24%, transparent);
+}
+
+.floe-bottom-bar-companion[data-companion-phase='collapsing'] {
+  transition-duration: 180ms, 180ms, 180ms, 180ms, 160ms, 140ms, 160ms, 100ms;
+}
+
+.floe-bottom-bar-companion[data-companion-visibility='hidden'],
+.floe-bottom-bar-companion[data-companion-frame-ready='false'] {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.floe-bottom-bar-companion__content {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .floe-bottom-bar-companion {
+    transition: none;
+    will-change: auto;
+  }
+}
+
 @keyframes glow-pulse {
   0%, 100% {
     box-shadow: 0 0 5px var(--primary), 0 0 20px var(--primary);