@floegence/floe-webapp-core 0.39.5 → 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/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);