@floegence/floe-webapp-core 0.39.10 → 0.40.1

package/dist/components/layout/ActivityBar.js

@@ -97,7 +97,7 @@ function w(t) {
           })()), 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), 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;
+        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" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/50"), 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,

package/dist/components/layout/Panel.js

@@ -1,33 +1,33 @@
-import { insert as t, effect as n, className as l, memo as m, template as a } from "solid-js/web";
+import { insert as t, effect as n, className as l, memo as u, template as a } from "solid-js/web";
 import "solid-js";
-import { cn as c } from "../../utils/cn.js";
-var o = /* @__PURE__ */ a("<div>"), u = /* @__PURE__ */ a("<div><span class=truncate>"), s = /* @__PURE__ */ a('<div class="flex items-center gap-1 ml-2">');
+import { cn as i } from "../../utils/cn.js";
+var o = /* @__PURE__ */ a("<div>"), m = /* @__PURE__ */ a("<div><span class=truncate>"), s = /* @__PURE__ */ a('<div class="flex items-center gap-1 ml-2">');
 function $(r) {
   return (() => {
     var e = o();
-    return t(e, () => r.children), n(() => l(e, c("flex flex-col h-full overflow-hidden", "bg-card text-card-foreground", r.class))), e;
+    return t(e, () => r.children), n(() => l(e, i("flex flex-col h-full overflow-hidden", "bg-card text-card-foreground", r.class))), e;
   })();
 }
-function b(r) {
+function h(r) {
   return (() => {
-    var e = u(), d = e.firstChild;
+    var e = m(), d = e.firstChild;
     return t(d, () => r.children), t(e, (() => {
-      var f = m(() => !!r.actions);
+      var f = u(() => !!r.actions);
       return () => f() && (() => {
-        var i = s();
-        return t(i, () => r.actions), i;
+        var c = s();
+        return t(c, () => r.actions), c;
       })();
-    })(), null), n(() => l(e, c("flex items-center justify-between px-3 py-2", "border-b border-border", "text-sm font-medium", r.class))), e;
+    })(), null), n(() => l(e, i("flex items-center justify-between px-3 py-1.5", "border-b border-border", "text-xs font-medium tracking-tight", r.class))), e;
   })();
 }
-function h(r) {
+function b(r) {
   return (() => {
     var e = o();
-    return t(e, () => r.children), n(() => l(e, c("flex-1 overflow-auto", !r.noPadding && "p-3", r.class))), e;
+    return t(e, () => r.children), n(() => l(e, i("flex-1 overflow-auto", !r.noPadding && "p-3", r.class))), e;
   })();
 }
 export {
   $ as Panel,
-  h as PanelContent,
-  b as PanelHeader
+  b as PanelContent,
+  h as PanelHeader
 };

package/dist/components/layout/TopBar.js

@@ -1,15 +1,15 @@
-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 { insert as t, createComponent as s, effect as y, className as h, setAttribute as $, template as l, delegateEvents as _ } from "solid-js/web";
+import { Show as x } from "solid-js";
+import { cn as v } 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');
+var B = /* @__PURE__ */ l('<span class="font-medium text-[11px] tracking-tight hidden sm:inline">'), E = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/60 border border-border/40 font-mono shrink-0 leading-none">'), F = /* @__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-2 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-0.5">'), j = /* @__PURE__ */ l('<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 = w(), a = S(), n = () => a.config.commands.palette.enabled;
   return (() => {
-    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, {
+    var i = F(), p = i.firstChild, d = p.firstChild, r = d.nextSibling, m = r.firstChild, k = r.nextSibling;
+    return t(d, () => o.logo || j(), null), t(d, s(x, {
       get when() {
         return o.title;
       },
@@ -17,9 +17,9 @@ function R(o) {
         var e = B();
         return t(e, () => o.title), e;
       }
-    }), null), r.$$click = () => n() && c.open(), t(r, d(C, {
-      class: "w-3.5 h-3.5 shrink-0"
-    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, d(v, {
+    }), null), r.$$click = () => n() && c.open(), t(r, s(C, {
+      class: "w-3 h-3 shrink-0"
+    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, s(x, {
       get when() {
         return n();
       },
@@ -28,19 +28,19 @@ function R(o) {
         return t(e, () => c.getKeybindDisplay(a.config.commands.palette.keybind)), e;
       }
     }), null), t(k, () => o.actions), y((e) => {
-      var b = x(
+      var b = v(
         // 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
-      ), 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;
+      ), f = o.ariaLabel, u = !n(), g = v("flex-1 max-w-sm flex items-center gap-2 h-[26px] px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-[11px] text-muted-foreground tracking-tight", "bg-muted/30 hover:bg-muted/60 rounded-md", "border border-border/40 hover:border-border/70", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-50 hover:bg-muted/30");
+      return b !== e.e && h(i, e.e = b), f !== e.t && $(i, "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,
       o: void 0
-    }), l;
+    }), i;
   })();
 }
 _(["click"]);

package/dist/components/notes/useNotesOverlayModel.d.ts

@@ -191,10 +191,10 @@ export declare function useNotesOverlayModel(options: UseNotesOverlayModelOption
         }> | undefined>;
         draftTitle: import("solid-js").Accessor<string>;
         draftBody: import("solid-js").Accessor<string>;
-        draftColor: import("solid-js").Accessor<"azure" | "coral" | "graphite" | "sage" | "amber" | "rose">;
+        draftColor: import("solid-js").Accessor<"graphite" | "azure" | "coral" | "sage" | "amber" | "rose">;
         setDraftTitle: import("solid-js").Setter<string>;
         setDraftBody: import("solid-js").Setter<string>;
-        setDraftColor: import("solid-js").Setter<"azure" | "coral" | "graphite" | "sage" | "amber" | "rose">;
+        setDraftColor: import("solid-js").Setter<"graphite" | "azure" | "coral" | "sage" | "amber" | "rose">;
         close: () => void;
         save: () => Promise<void>;
     };

package/dist/components/ui/Card.js

@@ -1,41 +1,41 @@
-import { spread as g, mergeProps as h, insert as i, effect as A, setStyleProperty as L, className as E, memo as R, template as v, use as j, delegateEvents as H } from "solid-js/web";
-import { splitProps as b, createSignal as F, onCleanup as q } from "solid-js";
+import { spread as v, mergeProps as b, insert as i, effect as A, setStyleProperty as z, className as L, memo as R, template as g, use as E, delegateEvents as H } from "solid-js/web";
+import { splitProps as h, createSignal as F, onCleanup as q } from "solid-js";
 import { cn as f } from "../../utils/cn.js";
-var W = /* @__PURE__ */ v('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), D = /* @__PURE__ */ v('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), G = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), N = /* @__PURE__ */ v('<div class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite]"style="background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent)">'), Z = /* @__PURE__ */ v("<div><div>"), k = /* @__PURE__ */ v("<div>"), J = /* @__PURE__ */ v("<h3>"), K = /* @__PURE__ */ v("<p>"), O = /* @__PURE__ */ v('<div><div class="relative z-10"style=transform:translateZ(20px)>'), Q = /* @__PURE__ */ v('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), U = /* @__PURE__ */ v('<div><div class="absolute inset-0"style="background:conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary))"></div><div class="relative rounded-[10px] bg-card h-full">'), V = /* @__PURE__ */ v('<div><div class="absolute inset-0 -z-10 overflow-hidden"><div class="absolute -top-1/2 -left-1/2 w-full h-full rounded-full bg-primary/20"style="animation:morph 8s ease-in-out infinite;filter:blur(40px)"></div><div class="absolute -bottom-1/2 -right-1/2 w-full h-full rounded-full bg-accent/20"style="animation:morph 8s ease-in-out infinite reverse;filter:blur(40px)"></div></div><div class="relative z-10">');
+var W = /* @__PURE__ */ g('<div style="background-size:200% 200%;animation:gradient-shift 3s ease infinite">'), D = /* @__PURE__ */ g('<div class="absolute inset-[1px] rounded-[7px] bg-card">'), G = /* @__PURE__ */ g('<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">'), N = /* @__PURE__ */ g('<div class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite]"style="background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 12%, transparent), transparent)">'), Z = /* @__PURE__ */ g("<div><div>"), k = /* @__PURE__ */ g("<div>"), J = /* @__PURE__ */ g("<h3>"), K = /* @__PURE__ */ g("<p>"), O = /* @__PURE__ */ g('<div><div class="relative z-10"style=transform:translateZ(20px)>'), Q = /* @__PURE__ */ g('<div class="pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300">'), U = /* @__PURE__ */ g('<div><div class="absolute inset-0"style="background:conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary))"></div><div class="relative rounded-[10px] bg-card h-full">'), V = /* @__PURE__ */ g('<div><div class="absolute inset-0 -z-10 overflow-hidden"><div class="absolute -top-1/2 -left-1/2 w-full h-full rounded-full bg-primary/20"style="animation:morph 8s ease-in-out infinite;filter:blur(40px)"></div><div class="absolute -bottom-1/2 -right-1/2 w-full h-full rounded-full bg-accent/20"style="animation:morph 8s ease-in-out infinite reverse;filter:blur(40px)"></div></div><div class="relative z-10">');
 function ne(l) {
-  const [e, o] = b(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), r = () => e.variant ?? "default", [d, m] = F({});
-  let u, s = null, _ = 0, y = 0;
+  const [e, o] = h(l, ["variant", "enableTilt", "gradientColors", "glowColor", "class", "children", "style"]), r = () => e.variant ?? "default", [d, m] = F({});
+  let u, a = null, _ = 0, y = 0;
   const p = () => {
-    if (s = null, !u || !e.enableTilt && r() !== "spotlight") return;
-    const t = u.getBoundingClientRect(), a = _ - t.left, c = y - t.top;
+    if (a = null, !u || !e.enableTilt && r() !== "spotlight") return;
+    const t = u.getBoundingClientRect(), s = _ - t.left, c = y - t.top;
     if (e.enableTilt) {
-      const C = t.width / 2, Y = t.height / 2, B = (c - Y) / 10, I = (C - a) / 10;
+      const w = t.width / 2, Y = t.height / 2, B = (c - Y) / 10, I = (w - s) / 10;
       m({
         transform: `perspective(1000px) rotateX(${B}deg) rotateY(${I}deg) scale3d(1.02, 1.02, 1.02)`
       });
     }
     r() === "spotlight" && X({
-      x: a,
+      x: s,
       y: c
     });
   }, M = (t) => {
-    if (u && !(!e.enableTilt && r() !== "spotlight") && (_ = t.clientX, y = t.clientY, s === null)) {
+    if (u && !(!e.enableTilt && r() !== "spotlight") && (_ = t.clientX, y = t.clientY, a === null)) {
       if (typeof requestAnimationFrame > "u") {
         p();
         return;
       }
-      s = requestAnimationFrame(p);
+      a = requestAnimationFrame(p);
     }
   }, S = () => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null), e.enableTilt && m({
+    a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), e.enableTilt && m({
       transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
     });
-  }, [w, X] = F({
+  }, [C, X] = F({
     x: 0,
     y: 0
   });
   q(() => {
-    s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
+    a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null);
   });
   const T = "rounded-lg transition-all duration-300 ease-out", P = {
     default: "bg-card border border-border shadow-sm hover:shadow-md",
@@ -45,32 +45,32 @@ function ne(l) {
     spotlight: "relative bg-card border border-border overflow-hidden",
     shimmer: "relative bg-card border border-border overflow-hidden",
     glow: "bg-card border border-border shadow-sm"
-  }, z = () => {
+  }, j = () => {
     if (r() !== "gradient-border") return null;
     const t = e.gradientColors ?? "from-primary via-accent to-secondary";
     return [(() => {
-      var a = W();
-      return A(() => E(a, f("absolute inset-0 bg-gradient-to-r opacity-75", t, "animate-[gradient-rotate_3s_linear_infinite]"))), a;
+      var s = W();
+      return A(() => L(s, f("absolute inset-0 bg-gradient-to-r opacity-75", t, "animate-[gradient-rotate_3s_linear_infinite]"))), s;
     })(), D()];
   }, n = () => r() !== "spotlight" ? null : (() => {
     var t = G();
-    return A((a) => L(t, "background", `radial-gradient(
-            400px circle at ${w().x}px ${w().y}px,
+    return A((s) => z(t, "background", `radial-gradient(
+            400px circle at ${C().x}px ${C().y}px,
             color-mix(in srgb, var(--primary) 18%, transparent),
             transparent 40%
           )`)), t;
   })(), x = () => r() !== "shimmer" ? null : N(), $ = () => {
     if (r() !== "glow") return {};
-    const t = e.glowColor ?? "var(--primary)";
+    const t = e.glowColor ?? "var(--glow)";
     return {
-      "box-shadow": `0 0 0 1px ${t}, 0 0 20px -5px ${t}, 0 0 40px -10px ${t}`
+      "box-shadow": [`0 0 0 1px color-mix(in srgb, ${t} 55%, transparent)`, `0 0 16px -4px color-mix(in srgb, ${t} 50%, transparent)`, `0 0 28px -8px color-mix(in srgb, ${t} 28%, transparent)`].join(", ")
     };
   };
   return (() => {
-    var t = Z(), a = t.firstChild;
+    var t = Z(), s = t.firstChild;
     t.addEventListener("mouseleave", S), t.$$mousemove = M;
     var c = u;
-    return typeof c == "function" ? j(c, t) : u = t, g(t, h({
+    return typeof c == "function" ? E(c, t) : u = t, v(t, b({
       get class() {
         return f(T, P[r()], r() === "spotlight" && "group", e.class);
       },
@@ -82,14 +82,14 @@ function ne(l) {
           "transform-style": "preserve-3d"
         };
       }
-    }, o), !1, !0), i(t, z, a), i(t, n, a), i(t, x, a), i(a, () => e.children), A(() => E(a, f("relative z-10", r() === "gradient-border" && "relative"))), t;
+    }, o), !1, !0), i(t, j, s), i(t, n, s), i(t, x, s), i(s, () => e.children), A(() => L(s, f("relative z-10", r() === "gradient-border" && "relative"))), t;
   })();
 }
 function le(l) {
-  const [e, o] = b(l, ["class", "children"]);
+  const [e, o] = h(l, ["class", "children"]);
   return (() => {
     var r = k();
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("flex flex-col space-y-1.5 p-4", e.class);
       }
@@ -97,32 +97,32 @@ function le(l) {
   })();
 }
 function oe(l) {
-  const [e, o] = b(l, ["class", "children"]);
+  const [e, o] = h(l, ["class", "children"]);
   return (() => {
     var r = J();
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("text-sm font-semibold leading-none tracking-tight", e.class);
       }
     }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
-function ae(l) {
-  const [e, o] = b(l, ["class", "children"]);
+function se(l) {
+  const [e, o] = h(l, ["class", "children"]);
   return (() => {
     var r = K();
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("text-xs text-muted-foreground", e.class);
       }
     }, o), !1, !0), i(r, () => e.children), r;
   })();
 }
-function se(l) {
-  const [e, o] = b(l, ["class", "children"]);
+function ae(l) {
+  const [e, o] = h(l, ["class", "children"]);
   return (() => {
     var r = k();
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("p-4 pt-0", e.class);
       }
@@ -130,10 +130,10 @@ function se(l) {
   })();
 }
 function ie(l) {
-  const [e, o] = b(l, ["class", "children"]);
+  const [e, o] = h(l, ["class", "children"]);
   return (() => {
     var r = k();
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("flex items-center p-4 pt-0", e.class);
       }
@@ -141,15 +141,15 @@ function ie(l) {
   })();
 }
 function de(l) {
-  const [e, o] = b(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [r, d] = F(""), [m, u] = F({
+  const [e, o] = h(l, ["intensity", "shine", "borderGlow", "class", "children", "style"]), [r, d] = F(""), [m, u] = F({
     x: 50,
     y: 50
-  }), [s, _] = F(!1);
+  }), [a, _] = F(!1);
   let y, p = null, M = 0, S = 0;
-  const w = () => e.intensity ?? 10, X = () => {
+  const C = () => e.intensity ?? 10, X = () => {
     if (p = null, !y) return;
-    const n = y.getBoundingClientRect(), x = M - n.left, $ = S - n.top, t = n.width / 2, a = n.height / 2, c = ($ - a) / a * w(), C = (t - x) / t * w();
-    d(`perspective(1000px) rotateX(${-c}deg) rotateY(${C}deg)`), e.shine && u({
+    const n = y.getBoundingClientRect(), x = M - n.left, $ = S - n.top, t = n.width / 2, s = n.height / 2, c = ($ - s) / s * C(), w = (t - x) / t * C();
+    d(`perspective(1000px) rotateX(${-c}deg) rotateY(${w}deg)`), e.shine && u({
       x: x / n.width * 100,
       y: $ / n.height * 100
     });
@@ -161,18 +161,18 @@ function de(l) {
       }
       p = requestAnimationFrame(X);
     }
-  }, P = () => _(!0), z = () => {
+  }, P = () => _(!0), j = () => {
     p !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(p), p = null), _(!1), d("perspective(1000px) rotateX(0deg) rotateY(0deg)");
   };
   return q(() => {
     p !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(p), p = null);
   }), (() => {
     var n = O(), x = n.firstChild;
-    n.addEventListener("mouseleave", z), n.addEventListener("mouseenter", P), n.$$mousemove = T;
+    n.addEventListener("mouseleave", j), n.addEventListener("mouseenter", P), n.$$mousemove = T;
     var $ = y;
-    return typeof $ == "function" ? j($, n) : y = n, g(n, h({
+    return typeof $ == "function" ? E($, n) : y = n, v(n, b({
       get class() {
-        return f("relative rounded-xl bg-card border border-border overflow-hidden", "transition-all duration-200 ease-out", e.borderGlow && s() && "shadow-[0_0_30px_-5px_var(--primary)]", e.class);
+        return f("relative rounded-xl bg-card border border-border overflow-hidden", "transition-all duration-200 ease-out", e.borderGlow && a() && "shadow-[0_0_18px_-6px_var(--glow)]", e.class);
       },
       get style() {
         return {
@@ -184,27 +184,27 @@ function de(l) {
     }, o), !1, !0), i(n, (() => {
       var t = R(() => !!e.shine);
       return () => t() && (() => {
-        var a = Q();
+        var s = Q();
         return A((c) => {
-          var C = !!s(), Y = `radial-gradient(
+          var w = !!a(), Y = `radial-gradient(
               circle at ${m().x}% ${m().y}%,
               color-mix(in srgb, var(--primary) 18%, transparent) 0%,
               transparent 50%
             )`;
-          return C !== c.e && a.classList.toggle("opacity-100", c.e = C), Y !== c.t && L(a, "background", c.t = Y), c;
+          return w !== c.e && s.classList.toggle("opacity-100", c.e = w), Y !== c.t && z(s, "background", c.t = Y), c;
         }, {
           e: void 0,
           t: void 0
-        }), a;
+        }), s;
       })();
     })(), x), i(x, () => e.children), n;
   })();
 }
 function ce(l) {
-  const [e, o] = b(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), r = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
+  const [e, o] = h(l, ["duration", "borderWidth", "colors", "class", "children", "style"]), r = () => e.duration ?? 3, d = () => e.borderWidth ?? 2;
   return (() => {
-    var m = U(), u = m.firstChild, s = u.nextSibling;
-    return g(m, h({
+    var m = U(), u = m.firstChild, a = u.nextSibling;
+    return v(m, b({
       get class() {
         return f("relative rounded-xl p-[2px] overflow-hidden", e.class);
       },
@@ -214,14 +214,14 @@ function ce(l) {
           padding: `${d()}px`
         };
       }
-    }, o), !1, !0), i(s, () => e.children), A((_) => L(u, "animation", `spin ${r()}s linear infinite`)), m;
+    }, o), !1, !0), i(a, () => e.children), A((_) => z(u, "animation", `spin ${r()}s linear infinite`)), m;
   })();
 }
 function ue(l) {
-  const [e, o] = b(l, ["color", "pulse", "class", "children", "style"]), r = () => e.color ?? "var(--primary)";
+  const [e, o] = h(l, ["color", "pulse", "class", "children", "style"]), r = () => e.color ?? "var(--glow)";
   return (() => {
     var d = k();
-    return g(d, h({
+    return v(d, b({
       get class() {
         return f("relative rounded-xl bg-card border-2 transition-shadow duration-300", e.pulse && "animate-pulse", e.class);
       },
@@ -229,19 +229,19 @@ function ue(l) {
         return {
           ...typeof e.style == "object" ? e.style : {},
           "border-color": r(),
-          "box-shadow": `0 0 5px ${r()}, 0 0 20px color-mix(in srgb, ${r()} 72%, transparent), 0 0 40px color-mix(in srgb, ${r()} 45%, transparent), inset 0 0 20px color-mix(in srgb, ${r()} 15%, transparent)`
+          "box-shadow": [`0 0 4px color-mix(in srgb, ${r()} 80%, transparent)`, `0 0 14px color-mix(in srgb, ${r()} 50%, transparent)`, `0 0 28px color-mix(in srgb, ${r()} 30%, transparent)`, `inset 0 0 14px color-mix(in srgb, ${r()} 10%, transparent)`].join(", ")
         };
       }
     }, o), !1, !0), i(d, () => e.children), d;
   })();
 }
 function pe(l) {
-  const [e, o] = b(l, ["class", "children", "style"]);
+  const [e, o] = h(l, ["class", "children", "style"]);
   return (() => {
     var r = V(), d = r.firstChild, m = d.firstChild;
     m.nextSibling;
     var u = d.nextSibling;
-    return g(r, h({
+    return v(r, b({
       get class() {
         return f("relative rounded-2xl bg-card/80 backdrop-blur-sm border border-border overflow-hidden", e.class);
       },
@@ -255,8 +255,8 @@ H(["mousemove"]);
 export {
   ce as AnimatedBorderCard,
   ne as Card,
-  se as CardContent,
-  ae as CardDescription,
+  ae as CardContent,
+  se as CardDescription,
   ie as CardFooter,
   le as CardHeader,
   oe as CardTitle,

package/dist/floe.css

@@ -174,6 +174,7 @@
   .bg-muted\/20 { background-color: color-mix(in srgb, var(--muted) 20%, transparent); }
   .bg-muted\/30 { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }
   .bg-muted\/40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
+  .hover\:bg-muted\/30:hover { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }
   .bg-muted\/50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
   .bg-muted\/70 { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
   .bg-muted\/80 { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
@@ -219,17 +220,18 @@
   .hover\:bg-muted\/50:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
   .hover\:bg-muted\/60:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
   .hover\:bg-muted\/70:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
-  .hover\:bg-muted\/80:hover { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
-  .hover\:bg-accent\/40:hover { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+  .hover\:bg-muted\/80:hover { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }  .hover\:bg-accent\/40:hover { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
   .hover\:bg-accent\/60:hover { background-color: color-mix(in srgb, var(--accent) 60%, transparent); }
   .hover\:bg-sidebar-accent\/80:hover { background-color: color-mix(in srgb, var(--sidebar-accent) 80%, transparent); }
   .hover\:bg-sidebar-accent\/60:hover { background-color: color-mix(in srgb, var(--sidebar-accent) 60%, transparent); }
   .hover\:bg-error\/10:hover { background-color: color-mix(in srgb, var(--error) 10%, transparent); }
   .hover\:border-border\/50:hover { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+  .hover\:border-border\/70:hover { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
   .hover\:border-primary\/50:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
   .hover\:border-muted-foreground\/50:hover { border-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
   .hover\:text-primary:hover { color: var(--primary); }
   .border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+  .border-border\/40 { border-color: color-mix(in srgb, var(--border) 40%, transparent); }
   .disabled\:hover\:bg-muted\/50:disabled:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
   .disabled\:hover\:text-muted-foreground:disabled:hover { color: var(--muted-foreground); }
 
@@ -249,12 +251,12 @@
   * {
     border-color: var(--border);
     scrollbar-width: thin;
-    scrollbar-color: var(--muted) transparent;
+    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 28%, transparent) transparent;
   }
 
   *::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
+    width: 0.375rem;
+    height: 0.375rem;
   }
 
   *::-webkit-scrollbar-track {
@@ -262,12 +264,12 @@
   }
 
   *::-webkit-scrollbar-thumb {
-    background: var(--muted);
+    background: color-mix(in srgb, var(--muted-foreground) 28%, transparent);
     border-radius: 9999px;
   }
 
   *::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+    background: color-mix(in srgb, var(--muted-foreground) 48%, transparent);
   }
 
   html {
@@ -749,9 +751,13 @@
 
 @keyframes glow-pulse {
   0%, 100% {
-    box-shadow: 0 0 5px var(--primary), 0 0 20px var(--primary);
+    box-shadow:
+      0 0 4px color-mix(in srgb, var(--glow) 70%, transparent),
+      0 0 14px color-mix(in srgb, var(--glow) 45%, transparent);
   }
   50% {
-    box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
+    box-shadow:
+      0 0 12px color-mix(in srgb, var(--glow) 70%, transparent),
+      0 0 28px color-mix(in srgb, var(--glow) 38%, transparent);
   }
 }

package/dist/styles/themes/classicSemanticTokens.js

@@ -18,7 +18,7 @@ const n = {
   "--secondary-foreground": "hsl(214 25% 25%)",
   "--muted": "hsl(36 15% 94%)",
   "--muted-foreground": "hsl(215 16% 42%)",
-  "--accent": "hsl(34 11% 88%)",
+  "--accent": "hsl(34 9% 85%)",
   "--accent-foreground": "hsl(214 26% 17%)",
   "--border": "hsl(35 13% 82%)",
   "--input": "hsl(37 15% 76%)",
@@ -46,16 +46,16 @@ const n = {
   "--highlight-block-error-accent": "oklch(0.55 0.16 25)",
   "--highlight-block-note-accent": "oklch(0.52 0.16 285)",
   "--highlight-block-tip-accent": "oklch(0.52 0.12 175)",
-  "--sidebar": "hsl(36 13% 92%)",
+  "--sidebar": "hsl(34 13% 90%)",
   "--sidebar-foreground": "hsl(214 26% 17%)",
   "--sidebar-primary": "hsl(214 26% 17%)",
   "--sidebar-primary-foreground": "hsl(36 100% 99%)",
-  "--sidebar-accent": "hsl(34 11% 88%)",
+  "--sidebar-accent": "hsl(34 9% 84%)",
   "--sidebar-accent-foreground": "hsl(214 26% 17%)",
-  "--sidebar-border": "hsl(33 11% 84%)",
+  "--sidebar-border": "hsl(33 9% 82%)",
   "--sidebar-ring": "hsl(214 26% 17%)",
-  "--activity-bar": "hsl(36 13% 92%)",
-  "--activity-bar-foreground": "hsl(215 16% 42%)",
+  "--activity-bar": "hsl(34 11% 90%)",
+  "--activity-bar-foreground": "hsl(215 14% 46%)",
   "--activity-bar-foreground-active": "hsl(214 26% 17%)",
   "--activity-bar-badge": "hsl(214 26% 17%)",
   "--activity-bar-badge-foreground": "hsl(36 100% 99%)",
@@ -71,29 +71,30 @@ const n = {
   "--selection-on-primary-bg": "hsl(38 92% 50%)",
   "--selection-on-primary-fg": "hsl(214 26% 17%)",
   "--selection-code-bg": "hsl(212 100% 67%)",
-  "--selection-code-fg": "hsl(220 20% 8%)"
+  "--selection-code-fg": "hsl(220 20% 8%)",
+  "--glow": "hsl(214 26% 17%)"
 }, i = {
   "--background": "hsl(222 30% 8%)",
   "--foreground": "hsl(210 20% 98%)",
   "--primary": "hsl(210 20% 98%)",
   "--primary-foreground": "hsl(222 30% 10%)",
-  "--secondary": "hsl(220 25% 14%)",
+  "--secondary": "hsl(220 18% 15%)",
   "--secondary-foreground": "hsl(210 20% 98%)",
-  "--muted": "hsl(220 25% 14%)",
-  "--muted-foreground": "hsl(215 20% 60%)",
-  "--accent": "hsl(220 25% 16%)",
+  "--muted": "hsl(220 16% 16%)",
+  "--muted-foreground": "hsl(215 16% 56%)",
+  "--accent": "hsl(220 14% 19%)",
   "--accent-foreground": "hsl(210 20% 98%)",
-  "--border": "hsl(220 20% 18%)",
-  "--input": "hsl(220 25% 14%)",
+  "--border": "hsl(220 16% 20%)",
+  "--input": "hsl(220 18% 15%)",
   "--ring": "hsl(215 25% 70%)",
-  "--chrome-border": "var(--border)",
+  "--chrome-border": "hsl(220 16% 13%)",
   "--top-bar-border": "var(--chrome-border)",
   "--activity-bar-border": "var(--chrome-border)",
   "--bottom-bar-border": "var(--chrome-border)",
   "--terminal-panel-border": "var(--chrome-border)",
-  "--card": "hsl(222 28% 10%)",
+  "--card": "hsl(220 20% 13%)",
   "--card-foreground": "hsl(210 20% 98%)",
-  "--popover": "hsl(222 28% 10%)",
+  "--popover": "hsl(220 18% 15%)",
   "--popover-foreground": "hsl(210 20% 98%)",
   "--success": "oklch(0.72 0.19 150)",
   "--success-foreground": "hsl(222 30% 10%)",
@@ -109,17 +110,17 @@ const n = {
   "--highlight-block-error-accent": "oklch(0.6 0.14 25)",
   "--highlight-block-note-accent": "oklch(0.62 0.14 285)",
   "--highlight-block-tip-accent": "oklch(0.6 0.1 175)",
-  "--sidebar": "hsl(222 28% 10%)",
+  "--sidebar": "hsl(221 22% 11%)",
   "--sidebar-foreground": "hsl(210 20% 98%)",
   "--sidebar-primary": "hsl(217 80% 55%)",
   "--sidebar-primary-foreground": "hsl(0 0% 100%)",
-  "--sidebar-accent": "hsl(220 25% 16%)",
+  "--sidebar-accent": "hsl(220 14% 19%)",
   "--sidebar-accent-foreground": "hsl(210 20% 98%)",
-  "--sidebar-border": "hsl(220 20% 18%)",
+  "--sidebar-border": "hsl(220 16% 13%)",
   "--sidebar-ring": "hsl(217 80% 55%)",
-  "--activity-bar": "hsl(222 30% 9%)",
-  "--activity-bar-foreground": "hsl(215 20% 55%)",
-  "--activity-bar-foreground-active": "hsl(210 20% 98%)",
+  "--activity-bar": "hsl(222 28% 7%)",
+  "--activity-bar-foreground": "hsl(215 16% 50%)",
+  "--activity-bar-foreground-active": "hsl(210 20% 96%)",
   "--activity-bar-badge": "hsl(217 80% 55%)",
   "--activity-bar-badge-foreground": "hsl(0 0% 100%)",
   "--terminal-background": "hsl(222 32% 7%)",
@@ -134,7 +135,8 @@ const n = {
   "--selection-on-primary-bg": "hsl(215 80% 35%)",
   "--selection-on-primary-fg": "hsl(0 0% 100%)",
   "--selection-code-bg": "hsl(212 100% 67%)",
-  "--selection-code-fg": "hsl(220 20% 8%)"
+  "--selection-code-fg": "hsl(220 20% 8%)",
+  "--glow": "hsl(217 65% 52%)"
 }, t = a(n), d = a(i);
 export {
   d as CLASSIC_DARK_SEMANTIC_TOKENS,