@floegence/floe-webapp-core 0.39.5 → 0.39.7

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

@@ -8,6 +8,14 @@ export interface ActivityBarItem {
     label: string;
     badge?: number | string | (() => number | string | undefined);
     onClick?: () => void;
+    /** Receives the concrete trigger button for anchored product surfaces. */
+    buttonRef?: (button: HTMLButtonElement | null) => void;
+    /** ARIA disclosure state for a surface controlled by this item. */
+    ariaExpanded?: boolean | (() => boolean | undefined);
+    /** ID of the surface controlled by this item. */
+    ariaControls?: string;
+    /** Semantic kind of popup opened by this item. */
+    ariaHasPopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
     /**
      * How this item should affect the sidebar collapsed state when clicked.
      *

package/dist/components/layout/ActivityBar.js

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

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/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);