@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/components/launchpad/Launchpad.js

@@ -42,24 +42,24 @@ var de = /* @__PURE__ */ k('<div class="pt-8 pb-4 px-8">'), ue = /* @__PURE__ */
         .launchpad-search {
           animation: launchpad-search-enter 0.4s ease-out;
         }
-      </style><div class="flex-1 min-h-0 overflow-hidden"></div><div class="absolute bottom-4 right-4 text-muted-foreground/60 text-xs hidden md:block"><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono mr-1">ESC</kbd> to close<span class=mx-2>|</span><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono mr-1">\\u2190</kbd><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono">→</kbd> to navigate`);
+      </style><div class="flex-1 min-h-0 overflow-hidden"></div><div class="absolute bottom-4 right-4 text-[var(--floe-ink-quiet)] text-xs hidden md:block"><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono mr-1">ESC</kbd> to close<span class=mx-2>|</span><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono mr-1">←</kbd><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono">→</kbd> to navigate`);
 function we(r) {
   let m;
-  const [b, X] = d(""), [Q, w] = d(""), [h, C] = d(0), [R, L] = d(!0), [N, P] = d(null);
+  const [p, X] = d(""), [Q, w] = d(""), [h, C] = d(0), [R, L] = d(!0), [q, P] = d(null);
   let o = null;
-  const p = () => r.itemsPerPage ?? 20, W = () => r.columns ?? 5, j = () => r.showSearch !== !1, S = (() => {
+  const b = () => r.itemsPerPage ?? 20, N = () => r.columns ?? 5, W = () => r.showSearch !== !1, S = (() => {
     try {
       return ie();
     } catch {
       return null;
     }
-  })(), q = () => S ? S.active() : !0, $ = u(() => {
+  })(), j = () => S ? S.active() : !0, $ = u(() => {
     const e = r.items ?? [], t = r.additionalItems ?? [];
     return [...e, ...t];
   });
   let v = 0;
   Y(() => {
-    const e = b().trim();
+    const e = p().trim();
     v += 1;
     const t = v;
     if (!e) {
@@ -77,9 +77,9 @@ function we(r) {
   }))), A = u(() => {
     const e = Q().toLowerCase().trim();
     return e ? z().filter((t) => t.nameLower.includes(e) || t.descLower.includes(e)).map((t) => t.item) : $();
-  }), y = u(() => Math.max(1, Math.ceil(A().length / p()))), B = u(() => {
-    const e = h() * p();
-    return A().slice(e, e + p());
+  }), y = u(() => Math.max(1, Math.ceil(A().length / b()))), B = u(() => {
+    const e = h() * b();
+    return A().slice(e, e + b());
   }), D = (e) => {
     X(e), C(0);
   }, x = (e) => {
@@ -108,7 +108,7 @@ function we(r) {
       y: t.clientY
     });
   }, H = (e) => {
-    const t = N();
+    const t = q();
     if (!t) return;
     const a = e.changedTouches[0];
     if (!a) return;
@@ -118,7 +118,7 @@ function we(r) {
     e.target.closest('button, input, a, [role="button"]') || r.onClose?.();
   };
   Y(() => {
-    q() && (document.addEventListener("keydown", I), E(() => {
+    j() && (document.addEventListener("keydown", I), E(() => {
       document.removeEventListener("keydown", I);
     }));
   }), re(() => {
@@ -149,13 +149,13 @@ function we(r) {
     var c = m;
     return typeof c == "function" ? ee(c, e) : m = e, i(e, l(_, {
       get when() {
-        return j();
+        return W();
       },
       get children() {
         var n = de();
         return i(n, l(ae, {
           get value() {
-            return b();
+            return p();
           },
           onChange: D,
           placeholder: "Search apps..."
@@ -169,14 +169,14 @@ function we(r) {
         return r.onItemClick;
       },
       get columns() {
-        return W();
+        return N();
       },
       get animating() {
         return R();
       }
     })), i(e, l(_, {
       get when() {
-        return F(() => y() > 1)() && !b();
+        return F(() => y() > 1)() && !p();
       },
       get children() {
         var n = ue();

package/dist/components/launchpad/LaunchpadGrid.js

@@ -1,12 +1,12 @@
-import { insert as o, createComponent as a, effect as d, setStyleProperty as u, template as i } from "solid-js/web";
-import { Show as s, For as f } from "solid-js";
+import { insert as o, createComponent as a, effect as s, setStyleProperty as u, template as i } from "solid-js/web";
+import { Show as d, For as f } from "solid-js";
 import { LaunchpadItem as g } from "./LaunchpadItem.js";
-var h = /* @__PURE__ */ i('<div class="grid gap-4 place-items-center">'), v = /* @__PURE__ */ i('<div class="launchpad-grid w-full h-full flex items-center justify-center p-8">'), p = /* @__PURE__ */ i('<div class="text-muted-foreground text-xs">No apps found');
+var v = /* @__PURE__ */ i('<div class="grid gap-4 place-items-center">'), h = /* @__PURE__ */ i('<div class="launchpad-grid w-full h-full flex items-center justify-center p-8">'), p = /* @__PURE__ */ i('<div class="text-[var(--floe-ink-soft)] text-xs">No apps found');
 function $(t) {
   const l = () => t.columns ?? 5;
   return (() => {
-    var m = v();
-    return o(m, a(s, {
+    var m = h();
+    return o(m, a(d, {
       get when() {
         return t.items.length > 0;
       },
@@ -14,7 +14,7 @@ function $(t) {
         return p();
       },
       get children() {
-        var r = h();
+        var r = v();
         return o(r, a(f, {
           get each() {
             return t.items;
@@ -34,7 +34,7 @@ function $(t) {
               };
             }
           })
-        })), d((e) => {
+        })), s((e) => {
           var n = `repeat(${l()}, minmax(0, 1fr))`, c = `${l() * 120}px`;
           return n !== e.e && u(r, "grid-template-columns", e.e = n), c !== e.t && u(r, "max-width", e.t = c), e;
         }, {

package/dist/components/launchpad/LaunchpadItem.js

@@ -1,22 +1,22 @@
-import { insert as l, createComponent as x, effect as g, style as f, setAttribute as b, setStyleProperty as d, template as y, delegateEvents as h } from "solid-js/web";
-var k = /* @__PURE__ */ y('<button type=button class="launchpad-item group flex flex-col items-center gap-2 rounded-2xl p-3 cursor-pointer bg-transparent select-none outline-none transition-[transform,background-color] duration-200 ease-out hover:scale-[1.02] hover:bg-card/20 focus-visible:bg-card/30 active:scale-95"tabindex=0><div class="w-14 h-14 rounded-2xl flex items-center justify-center shadow-lg transition-transform duration-200 group-hover:scale-105"style="box-shadow:0 16px 32px -20px color-mix(in srgb, var(--foreground) 55%, transparent)"></div><span class="text-xs text-foreground/80 font-medium truncate max-w-[80px] text-center">');
+import { insert as c, createComponent as f, effect as g, style as x, setAttribute as y, setStyleProperty as d, template as b, delegateEvents as h } from "solid-js/web";
+var k = /* @__PURE__ */ b('<button type=button class="launchpad-item group flex flex-col items-center gap-2 rounded-panel p-3 cursor-pointer bg-transparent select-none outline-none transition-[transform,background-color] duration-[var(--floe-duration-base)] ease-out hover:-translate-y-[var(--floe-hover-lift)] hover:bg-card/20 focus-visible:bg-card/30 active:scale-[var(--floe-press-scale)]"tabindex=0><div class="w-14 h-14 rounded-panel flex items-center justify-center shadow-[var(--floe-elevation-float)] transition-transform duration-[var(--floe-duration-base)] group-hover:-translate-y-[var(--floe-hover-lift)]"></div><span class="text-xs text-foreground/80 font-medium truncate max-w-[80px] text-center">');
 function C(e) {
-  const s = () => e.item.color ?? "linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, var(--info) 22%), color-mix(in srgb, var(--primary) 58%, var(--accent) 42%))", i = () => {
+  const s = () => e.item.color ?? "linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, var(--info) 22%), color-mix(in srgb, var(--primary) 58%, var(--accent) 42%))", a = () => {
     e.item.onClick?.(), e.onClick?.(e.item);
-  }, m = (t) => {
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i());
+  }, v = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), a());
   };
   return (() => {
-    var t = k(), r = t.firstChild, u = r.nextSibling;
-    return t.$$keydown = m, t.$$click = i, l(r, x(e.item.icon, {
+    var t = k(), r = t.firstChild, m = r.nextSibling;
+    return t.$$keydown = v, t.$$click = a, c(r, f(e.item.icon, {
       class: "w-7 h-7"
-    })), l(u, () => e.item.name), g((n) => {
-      var v = {
+    })), c(m, () => e.item.name), g((n) => {
+      var u = {
         "--item-index": e.index,
         "animation-delay": `${e.index * 30}ms`,
         ...e.style
-      }, o = e.item.description ?? e.item.name, a = s(), c = e.item.color ? "white" : "var(--primary-foreground)";
-      return n.e = f(t, v, n.e), o !== n.t && b(t, "title", n.t = o), a !== n.a && d(r, "background", n.a = a), c !== n.o && d(r, "color", n.o = c), n;
+      }, i = e.item.description ?? e.item.name, o = s(), l = e.item.color ? "white" : "var(--primary-foreground)";
+      return n.e = x(t, u, n.e), i !== n.t && y(t, "title", n.t = i), o !== n.a && d(r, "background", n.a = o), l !== n.o && d(r, "color", n.o = l), n;
     }, {
       e: void 0,
       t: void 0,

package/dist/components/launchpad/LaunchpadPagination.js

@@ -1,32 +1,32 @@
-import { insert as c, createComponent as g, setAttribute as o, effect as s, classList as d, template as l, delegateEvents as m } from "solid-js/web";
-import { For as v } from "solid-js";
-var f = /* @__PURE__ */ l('<div class="launchpad-pagination flex items-center justify-center gap-2">'), b = /* @__PURE__ */ l('<button type=button class="w-2 h-2 rounded-full cursor-pointer transition-all duration-300 outline-none focus-visible:ring-2">');
+import { insert as u, createComponent as s, setAttribute as i, effect as g, classList as v, template as l, delegateEvents as d } from "solid-js/web";
+import { For as f } from "solid-js";
+var m = /* @__PURE__ */ l('<div class="launchpad-pagination flex items-center justify-center gap-2">'), b = /* @__PURE__ */ l('<button type=button class="w-2 h-2 rounded-full cursor-pointer transition-[background-color,color,transform] duration-[var(--floe-duration-slow)] outline-none focus-visible:ring-2">');
 function $(r) {
   return (() => {
-    var a = f();
-    return c(a, g(v, {
+    var a = m();
+    return u(a, s(f, {
       get each() {
         return Array.from({
           length: r.totalPages
-        }, (t, e) => e);
+        }, (e, t) => t);
       },
-      children: (t) => (() => {
-        var e = b();
-        return e.$$click = () => r.onPageChange(t), o(e, "aria-label", `Go to page ${t + 1}`), s((n) => {
-          var u = {
-            "bg-primary scale-125": r.currentPage === t,
-            "bg-muted-foreground/30": r.currentPage !== t
-          }, i = r.currentPage === t ? "page" : void 0;
-          return n.e = d(e, u, n.e), i !== n.t && o(e, "aria-current", n.t = i), n;
+      children: (e) => (() => {
+        var t = b();
+        return t.$$click = () => r.onPageChange(e), i(t, "aria-label", `Go to page ${e + 1}`), g((n) => {
+          var c = {
+            "bg-primary scale-125": r.currentPage === e,
+            "bg-[var(--floe-ink-ghost)]": r.currentPage !== e
+          }, o = r.currentPage === e ? "page" : void 0;
+          return n.e = v(t, c, n.e), o !== n.t && i(t, "aria-current", n.t = o), n;
         }, {
           e: void 0,
           t: void 0
-        }), e;
+        }), t;
       })()
     })), a;
   })();
 }
-m(["click"]);
+d(["click"]);
 export {
   $ as LaunchpadPagination
 };

package/dist/components/launchpad/LaunchpadSearch.js

@@ -1,15 +1,15 @@
-import { insert as n, createComponent as u, effect as l, setAttribute as d, template as c, delegateEvents as i } from "solid-js/web";
+import { insert as n, createComponent as i, effect as l, setAttribute as d, template as u, delegateEvents as c } from "solid-js/web";
 import { Search as s } from "../icons/index.js";
-var h = /* @__PURE__ */ c('<div class="launchpad-search w-full max-w-md mx-auto"><div class=relative><input type=text class="w-full h-10 pl-10 pr-4 rounded-lg bg-card/80 backdrop-blur-sm border border-border text-foreground placeholder:text-muted-foreground/60 outline-none transition-all duration-200 shadow-sm">');
-function f(t) {
+var f = /* @__PURE__ */ u('<div class="launchpad-search w-full max-w-md mx-auto"><div class=relative><input type=text class="w-full h-10 pl-10 pr-4 rounded-control bg-card/80 backdrop-blur-sm border border-[var(--floe-line)] text-foreground placeholder:text-[var(--floe-ink-quiet)] outline-none transition-[border-color,box-shadow,background-color] duration-[var(--floe-duration-base)] shadow-[var(--floe-elevation-raised)]">');
+function v(r) {
   return (() => {
-    var r = h(), a = r.firstChild, e = a.firstChild;
-    return n(a, u(s, {
-      class: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-    }), e), e.$$input = (o) => t.onChange(o.currentTarget.value), l(() => d(e, "placeholder", t.placeholder ?? "Search")), l(() => e.value = t.value), r;
+    var t = f(), a = t.firstChild, e = a.firstChild;
+    return n(a, i(s, {
+      class: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--floe-ink-soft)]"
+    }), e), e.$$input = (o) => r.onChange(o.currentTarget.value), l(() => d(e, "placeholder", r.placeholder ?? "Search")), l(() => e.value = r.value), t;
   })();
 }
-i(["input"]);
+c(["input"]);
 export {
-  f as LaunchpadSearch
+  v as LaunchpadSearch
 };

package/dist/components/layout/ActivityBar.js

@@ -1,128 +1,126 @@
-import { insert as l, createComponent as o, effect as g, className as x, setAttribute as u, template as v, use as $, Dynamic as B, memo as D, delegateEvents as E } from "solid-js/web";
-import { createMemo as s, For as I, Show as h, onMount as R, onCleanup as S } from "solid-js";
-import { cn as y } from "../../utils/cn.js";
-import { deferNonBlocking as _ } from "../../utils/defer.js";
-import { Tooltip as j } from "../ui/Tooltip.js";
-import { resolveActivityBarClick as P } from "./activityBarBehavior.js";
-import { isBarItemContextMenuKey as T, keyboardBarItemContextMenuRequest as q } from "./barItemContextMenu.js";
-var K = /* @__PURE__ */ v('<div class="flex flex-col">'), N = /* @__PURE__ */ v('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), X = /* @__PURE__ */ v('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), Y = /* @__PURE__ */ v("<span>"), F = /* @__PURE__ */ v("<button type=button>");
-function Q(t) {
-  const a = s(() => t.activeId), c = s(() => t.collapsed ?? !1), f = s(() => t.onActiveChange), b = s(() => t.onCollapsedChange), m = (e) => {
+import { insert as d, createComponent as o, effect as x, className as g, setAttribute as u, template as b, use as D, Dynamic as E, memo as R, delegateEvents as S } from "solid-js/web";
+import { createMemo as m, For as M, Show as B, onMount as j, onCleanup as q } from "solid-js";
+import { cn as v } from "../../utils/cn.js";
+import { deferNonBlocking as P } from "../../utils/defer.js";
+import { Tooltip as T } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
+import { isBarItemContextMenuKey as K, keyboardBarItemContextMenuRequest as N } from "./barItemContextMenu.js";
+var X = /* @__PURE__ */ b('<div class="flex flex-col">'), Y = /* @__PURE__ */ b('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), F = /* @__PURE__ */ b("<span>"), H = /* @__PURE__ */ b("<button type=button data-floe-interactive=press><span aria-hidden=true>");
+function U(t) {
+  const r = m(() => t.activeId), c = m(() => t.collapsed ?? !1), s = m(() => t.onActiveChange), h = m(() => t.onCollapsedChange), f = (e) => {
     if (e.onClick) {
-      _(() => e.onClick());
+      P(() => e.onClick());
       return;
     }
-    const i = P({
+    const a = _({
       clickedId: e.id,
-      activeId: a(),
+      activeId: r(),
       collapsed: c(),
       behavior: e.collapseBehavior
     });
-    i.nextActiveId !== a() && (typeof i.openSidebar == "boolean" ? f()(i.nextActiveId, {
-      openSidebar: i.openSidebar
-    }) : f()(i.nextActiveId)), typeof i.nextCollapsed == "boolean" && b()?.(i.nextCollapsed);
+    a.nextActiveId !== r() && (typeof a.openSidebar == "boolean" ? s()(a.nextActiveId, {
+      openSidebar: a.openSidebar
+    }) : s()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && h()?.(a.nextCollapsed);
   };
   return (() => {
-    var e = N(), i = e.firstChild;
-    return l(i, o(I, {
+    var e = Y(), a = e.firstChild;
+    return d(a, o(M, {
       get each() {
         return t.items;
       },
-      children: (n) => o(M, {
+      children: (n) => o($, {
         item: n,
         get isActive() {
-          return a() === n.id;
+          return r() === n.id;
         },
-        onClick: () => m(n)
+        onClick: () => f(n)
       })
-    })), l(e, o(h, {
+    })), d(e, o(B, {
       get when() {
         return t.bottomItems?.length;
       },
       get children() {
-        var n = K();
-        return l(n, o(I, {
+        var n = X();
+        return d(n, o(M, {
           get each() {
             return t.bottomItems;
           },
-          children: (r) => o(M, {
-            item: r,
-            isActive: !1,
-            onClick: () => m(r)
+          children: (i) => o($, {
+            item: i,
+            get isActive() {
+              return r() === i.id;
+            },
+            onClick: () => f(i)
           })
         })), n;
       }
-    }), null), g((n) => {
-      var r = 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), d = t.ariaLabel;
-      return r !== n.e && x(e, n.e = r), d !== n.t && u(e, "aria-label", n.t = d), n;
+    }), null), x((n) => {
+      var i = v("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), l = t.ariaLabel;
+      return i !== n.e && g(e, n.e = i), l !== n.t && u(e, "aria-label", n.t = l), n;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-function M(t) {
-  let a;
-  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, f = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
-  R(() => t.item.buttonRef?.(a ?? null)), S(() => t.item.buttonRef?.(null));
-  const b = (e) => {
+function $(t) {
+  let r;
+  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, s = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
+  j(() => t.item.buttonRef?.(r ?? null)), q(() => t.item.buttonRef?.(null));
+  const h = (e) => {
     t.item.onContextMenu && (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu({
       trigger: e.currentTarget,
       clientX: e.clientX,
       clientY: e.clientY,
       source: "pointer"
     }));
-  }, m = (e) => {
-    !t.item.onContextMenu || !T(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(q(e.currentTarget)));
+  }, f = (e) => {
+    !t.item.onContextMenu || !K(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(N(e.currentTarget)));
   };
-  return o(j, {
+  return o(T, {
     get content() {
       return t.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var e = F();
-      e.$$keydown = m, e.$$contextmenu = b, e.$$click = () => t.onClick();
-      var i = a;
-      return typeof i == "function" ? $(i, e) : a = e, l(e, o(h, {
-        get when() {
-          return t.isActive;
-        },
-        get children() {
-          return X();
-        }
-      }), null), l(e, o(B, {
+      var e = H(), a = e.firstChild;
+      e.$$keydown = f, e.$$contextmenu = h, e.$$click = () => t.onClick();
+      var n = r;
+      return typeof n == "function" ? D(n, e) : r = e, d(e, o(E, {
         get component() {
           return t.item.icon;
         },
-        class: "w-5 h-5"
-      }), null), l(e, o(h, {
+        get class() {
+          return v("relative w-5 h-5 transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active");
+        }
+      }), null), d(e, o(B, {
         get when() {
           return c();
         },
         get children() {
-          var n = Y();
-          return l(n, (() => {
-            var r = D(() => typeof c() == "number" && c() > 99);
-            return () => r() ? "99+" : c();
-          })()), g(() => x(n, 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"))), n;
+          var i = F();
+          return d(i, (() => {
+            var l = R(() => typeof c() == "number" && c() > 99);
+            return () => l() ? "99+" : c();
+          })()), x(() => g(i, v("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
         }
-      }), null), g((n) => {
-        var r = 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" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/50"), d = t.item.label, C = t.isActive, k = f(), w = t.item.ariaControls, A = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0);
-        return r !== n.e && x(e, n.e = r), d !== n.t && u(e, "aria-label", n.t = d), C !== n.a && u(e, "aria-pressed", n.a = C), k !== n.o && u(e, "aria-expanded", n.o = k), w !== n.i && u(e, "aria-controls", n.i = w), A !== n.n && u(e, "aria-haspopup", n.n = A), n;
+      }), null), x((i) => {
+        var l = v("group/activity-item 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", "text-activity-bar-foreground", t.isActive && "text-activity-bar-foreground-active"), y = t.item.label, C = t.isActive, k = s(), A = t.item.ariaControls, w = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), I = v("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]");
+        return l !== i.e && g(e, i.e = l), y !== i.t && u(e, "aria-label", i.t = y), C !== i.a && u(e, "aria-pressed", i.a = C), k !== i.o && u(e, "aria-expanded", i.o = k), A !== i.i && u(e, "aria-controls", i.i = A), w !== i.n && u(e, "aria-haspopup", i.n = w), I !== i.s && g(a, i.s = I), i;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
         o: void 0,
         i: void 0,
-        n: void 0
+        n: void 0,
+        s: void 0
       }), e;
     }
   });
 }
-E(["click", "contextmenu", "keydown"]);
+S(["click", "contextmenu", "keydown"]);
 export {
-  Q as ActivityBar
+  U as ActivityBar
 };

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

@@ -3,5 +3,15 @@ export declare function sanitizeDisplayMode(value: unknown, fallback?: DisplayMo
 export interface DisplayModeSwitcherProps {
     mode: DisplayMode;
     onChange: (mode: DisplayMode) => void;
+    class?: string;
 }
+/**
+ * Display-mode switcher.
+ *
+ * The three modes are peer views of the same workspace, so the control is a
+ * segmented rail rather than three buttons: one travelling pill marks the
+ * current mode and slides to the next one. The pill is the selection — the
+ * faces under it stay flat — which keeps a single thing moving and lets the
+ * eye follow it across the bar.
+ */
 export declare function DisplayModeSwitcher(props: DisplayModeSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/layout/DisplayModeSwitcher.js

@@ -1,52 +1,121 @@
-import { insert as a, createComponent as m, memo as h, effect as v, setAttribute as y, template as o, delegateEvents as p } from "solid-js/web";
-import { For as _ } from "solid-js";
-import { Bookmark as u, LayoutDashboard as k, Grid3x3 as f } from "../icons/index.js";
-var w = /* @__PURE__ */ o('<div class=display-mode-switcher role=tablist aria-label="Display mode">'), D = /* @__PURE__ */ o("<button type=button class=display-mode-switcher__pill role=tab><span class=display-mode-switcher__label>"), $ = /* @__PURE__ */ o("<span class=display-mode-switcher__pill-bg>");
-const g = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
-function E(i, r = "activity") {
-  return typeof i == "string" && g.has(i) ? i : r;
+import { insert as b, memo as z, effect as y, setStyleProperty as p, createComponent as k, use as D, setAttribute as A, className as R, template as x, delegateEvents as B } from "solid-js/web";
+import { createSignal as C, createEffect as M, onCleanup as $, For as F } from "solid-js";
+import { cn as E } from "../../utils/cn.js";
+import { Bookmark as I, LayoutDashboard as O, Grid3x3 as P } from "../icons/index.js";
+var N = /* @__PURE__ */ x('<div role=tablist aria-label="Display mode"data-floe-surface=inset data-floe-surface-part=rail>'), q = /* @__PURE__ */ x('<span aria-hidden=true data-floe-surface=raised data-floe-surface-part=segment-pill class="display-mode-switcher__pill pointer-events-none absolute top-0.5 bottom-0.5 left-0 rounded-[calc(var(--floe-radius-control)-2px)]">'), W = /* @__PURE__ */ x('<button type=button role=tab><span class="display-mode-switcher__label whitespace-nowrap">');
+const G = /* @__PURE__ */ new Set(["activity", "deck", "workbench"]);
+function Q(r, s = "activity") {
+  return typeof r == "string" && G.has(r) ? r : s;
 }
-const A = [{
+const H = [{
   id: "activity",
   label: "Activity",
-  icon: u
+  icon: I
 }, {
   id: "deck",
   label: "Deck",
-  icon: k
+  icon: O
 }, {
   id: "workbench",
   label: "Workbench",
-  icon: f
-}];
-function L(i) {
+  icon: P
+}], L = {
+  x: 0,
+  width: 0,
+  visible: !1
+};
+let h;
+function T(r) {
+  let s;
+  const d = /* @__PURE__ */ new Map(), [g, f] = C(L), [w, S] = C(!1), _ = () => {
+    const o = s, v = d.get(r.mode);
+    if (!o || !v) {
+      f(L);
+      return;
+    }
+    const n = o.getBoundingClientRect();
+    if (n.width <= 0)
+      return;
+    const l = (a) => {
+      const e = d.get(a);
+      if (!e) return;
+      const c = e.offsetParent === o && Number.isFinite(e.offsetLeft), u = c ? e.offsetLeft : e.getBoundingClientRect().left - n.left, m = c ? e.offsetWidth : e.getBoundingClientRect().width;
+      return {
+        x: u,
+        width: m
+      };
+    }, t = l(r.mode);
+    if (!t || t.width <= 0) return;
+    const i = h !== void 0 && h !== r.mode ? l(h) : void 0;
+    if (w())
+      f({
+        ...t,
+        visible: t.width > 0
+      });
+    else {
+      const a = i ?? t;
+      f({
+        ...a,
+        visible: a.width > 0
+      }), requestAnimationFrame(() => {
+        w() || (S(!0), requestAnimationFrame(() => {
+          i && f({
+            ...t,
+            visible: t.width > 0
+          });
+        }));
+      });
+    }
+    h = r.mode;
+  };
+  if (M(() => {
+    r.mode, _();
+  }), typeof ResizeObserver < "u") {
+    const o = new ResizeObserver(() => _());
+    M(() => {
+      s && o.observe(s);
+    }), $(() => o.disconnect());
+  }
   return (() => {
-    var r = w();
-    return a(r, m(_, {
-      each: A,
-      children: (l) => {
-        const b = l.icon, c = () => i.mode === l.id;
+    var o = N(), v = s;
+    return typeof v == "function" ? D(v, o) : s = o, b(o, (() => {
+      var n = z(() => !!g().visible);
+      return () => n() ? (() => {
+        var l = q();
+        return y((t) => {
+          var i = `translate3d(${g().x}px, 0, 0)`, a = `${g().width}px`, e = w() ? void 0 : "none";
+          return i !== t.e && p(l, "transform", t.e = i), a !== t.t && p(l, "width", t.t = a), e !== t.a && p(l, "transition-property", t.a = e), t;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), l;
+      })() : null;
+    })(), null), b(o, k(F, {
+      each: H,
+      children: (n) => {
+        const l = n.icon, t = () => r.mode === n.id;
         return (() => {
-          var e = D(), s = e.firstChild;
-          return e.$$click = () => i.onChange(l.id), a(e, (() => {
-            var t = h(() => !!c());
-            return () => t() ? $() : null;
-          })(), s), a(e, m(b, {
-            class: "display-mode-switcher__icon"
-          }), s), a(s, () => l.label), v((t) => {
-            var n = !!c(), d = c();
-            return n !== t.e && e.classList.toggle("is-active", t.e = n), d !== t.t && y(e, "aria-selected", t.t = d), t;
+          var i = W(), a = i.firstChild;
+          return i.$$click = () => r.onChange(n.id), D((e) => {
+            d.set(n.id, e), $(() => d.delete(n.id));
+          }, i), b(i, k(l, {
+            class: "display-mode-switcher__icon h-3 w-3 shrink-0"
+          }), a), b(a, () => n.label), y((e) => {
+            var c = t(), u = t() ? 0 : -1, m = E("display-mode-switcher__option relative z-10 inline-flex cursor-pointer items-center", "gap-1.5 rounded-sm px-2", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", t() ? "text-foreground" : "text-[var(--floe-ink-soft)] hover:text-foreground");
+            return c !== e.e && A(i, "aria-selected", e.e = c), u !== e.t && A(i, "tabindex", e.t = u), m !== e.a && R(i, e.a = m), e;
           }, {
             e: void 0,
-            t: void 0
-          }), e;
+            t: void 0,
+            a: void 0
+          }), i;
         })();
       }
-    })), r;
+    }), null), y(() => R(o, E("display-mode-switcher relative inline-flex items-stretch", "h-[var(--floe-control-height-sm)] rounded-control border border-[var(--floe-line)] p-0.5", "text-[length:var(--floe-type-caption)] leading-[var(--floe-line-control)]", r.class))), o;
   })();
 }
-p(["click"]);
+B(["click"]);
 export {
-  L as DisplayModeSwitcher,
-  E as sanitizeDisplayMode
+  T as DisplayModeSwitcher,
+  Q as sanitizeDisplayMode
 };