@aggc/ui 0.5.1 → 0.6.0

package/dist/chunks/{UiSkeleton.vue_vue_type_script_setup_true_lang-Lghyrtms.js → UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js}

@@ -1,5 +1,5 @@
 import { defineComponent as p, openBlock as l, createElementBlock as o, normalizeClass as t, unref as a, renderSlot as y, createElementVNode as d, createBlock as ee, resolveDynamicComponent as ae, toDisplayString as c, createVNode as L, withCtx as te, createTextVNode as E, Fragment as z, renderList as V, createCommentVNode as b, withKeys as U, withModifiers as K, ref as $, useId as se, computed as R, watch as N, onMounted as le, onBeforeUnmount as oe, nextTick as T, normalizeStyle as ne } from "vue";
-import { j as ie, o as g, q as D, n as G, r as i, g as re, f as de, a as X, l as ce, p as ue, b as be, h as ge, i as fe, d as pe } from "./pageHeader-CcJrPX_8.js";
+import { j as ie, o as g, q as D, n as G, r as i, g as re, f as de, a as X, l as ce, p as ue, b as be, h as ge, i as fe, d as pe } from "./pageHeader-D9KF7WOO.js";
 import { CheckCircle2 as me, TriangleAlert as he, LoaderCircle as ve, Check as q, ChevronDown as ye } from "lucide-vue-next";
 const Ce = ie, Ea = /* @__PURE__ */ p({
   __name: "PageSurface",
@@ -274,7 +274,7 @@ const Ce = ie, Ea = /* @__PURE__ */ p({
   __name: "SectionCard",
   props: {
     title: {},
-    eyebrow: { default: "Workspace surface" },
+    eyebrow: { default: void 0 },
     description: { default: "" },
     scrollBody: { type: Boolean, default: !1 },
     collapseBodyGap: { type: Boolean, default: !1 }

package/dist/chunks/{pageHeader-CcJrPX_8.js → pageHeader-D9KF7WOO.js}

@@ -5,28 +5,28 @@ var V = (r) => typeof r == "object" && r !== null;
 function T(r) {
   return Object.fromEntries(Object.entries(r ?? {}).filter(([t, o]) => o !== void 0));
 }
-var F = (r) => r === "base";
-function D(r) {
-  return r.slice().filter((t) => !F(t));
+var D = (r) => r === "base";
+function L(r) {
+  return r.slice().filter((t) => !D(t));
 }
-function C(r) {
+function w(r) {
   return String.fromCharCode(r + (r > 25 ? 39 : 97));
 }
-function L(r) {
+function F(r) {
   let t = "", o;
-  for (o = Math.abs(r); o > 52; o = o / 52 | 0) t = C(o % 52) + t;
-  return C(o % 52) + t;
+  for (o = Math.abs(r); o > 52; o = o / 52 | 0) t = w(o % 52) + t;
+  return w(o % 52) + t;
 }
-function Y(r, t) {
+function X(r, t) {
   let o = t.length;
   for (; o; ) r = r * 33 ^ t.charCodeAt(--o);
   return r;
 }
-function X(r) {
-  return L(Y(5381, r) >>> 0);
+function H(r) {
+  return F(X(5381, r) >>> 0);
 }
 var E = /\s*!(important)?/i;
-function H(r) {
+function Y(r) {
   return typeof r == "string" ? E.test(r) : !1;
 }
 function N(r) {
@@ -35,7 +35,7 @@ function N(r) {
 function P(r) {
   return typeof r == "string" ? r.replaceAll(" ", "_") : r;
 }
-var y = (r) => {
+var S = (r) => {
   const t = /* @__PURE__ */ new Map();
   return (...e) => {
     const n = JSON.stringify(e);
@@ -45,11 +45,11 @@ var y = (r) => {
     return t.set(n, i), i;
   };
 }, q = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
-function v(...r) {
+function k(...r) {
   return r.reduce((t, o) => (o && Object.keys(o).forEach((e) => {
     if (q.has(e)) return;
     const n = t[e], i = o[e];
-    _(n) && _(i) ? t[e] = v(n, i) : t[e] = i;
+    _(n) && _(i) ? t[e] = k(n, i) : t[e] = i;
   }), t), {});
 }
 var G = (r) => r != null;
@@ -101,18 +101,18 @@ function U(r) {
     let d;
     if (o) {
       const b = [...e.finalize(a), s];
-      d = n(t.toHash(b, X));
+      d = n(t.toHash(b, H));
     } else
       d = [...e.finalize(a), n(s)].join(":");
     return d;
   };
-  return y(({ base: a, ...s } = {}) => {
+  return S(({ base: a, ...s } = {}) => {
     const d = Object.assign(s, a), b = j(d, r), u = /* @__PURE__ */ new Set();
     return W(b, (p, l) => {
       if (p == null) return;
-      const g = H(p), [f, ...m] = e.shift(l), x = D(m), S = t.transform(f, N(Z(p)));
-      let k = i(x, S.className);
-      g && (k = `${k}!`), u.add(k);
+      const g = Y(p), [m, ...f] = e.shift(l), x = L(f), y = t.transform(m, N(Z(p)));
+      let v = i(x, y.className);
+      g && (v = `${v}!`), u.add(v);
     }), Array.from(u).join(" ");
   });
 }
@@ -125,14 +125,14 @@ function Q(r) {
     return i.length === 1 ? i : i.map((a) => j(a, r));
   }
   function o(...n) {
-    return v(...t(n));
+    return k(...t(n));
   }
   function e(...n) {
     return Object.assign({}, ...t(n));
   }
-  return { mergeCss: y(o), assignCss: e };
+  return { mergeCss: S(o), assignCss: e };
 }
-var rr = /([A-Z])/g, tr = /^ms-/, or = y((r) => r.startsWith("--") ? r : r.replace(rr, "-$1").replace(tr, "-ms-").toLowerCase()), er = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
+var rr = /([A-Z])/g, tr = /^ms-/, or = S((r) => r.startsWith("--") ? r : r.replace(rr, "-$1").replace(tr, "-ms-").toLowerCase()), er = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
 `${er.split(",").join("|")}`;
 function nr(r, ...t) {
   const o = Object.getOwnPropertyDescriptors(r), e = Object.keys(o), n = (a) => {
@@ -188,7 +188,7 @@ const B = (r) => z.get(r) || r, M = {
 }, pr = U(M), c = (...r) => pr(h(...r));
 c.raw = (...r) => h(...r);
 const { mergeCss: h } = Q(M);
-function fr() {
+function mr() {
   let r = "", t = 0, o;
   for (; t < arguments.length; )
     (o = arguments[t++]) && typeof o == "string" && (r && (r += " "), r += o);
@@ -201,24 +201,24 @@ const O = (r) => ({
   compoundVariants: [],
   ...r
 });
-function w(r) {
+function C(r) {
   const { base: t, variants: o, defaultVariants: e, compoundVariants: n } = O(r), i = (l) => ({ ...e, ...T(l) });
   function a(l = {}) {
     const g = i(l);
-    let f = { ...t };
-    for (const [x, S] of Object.entries(g))
-      o[x]?.[S] && (f = h(f, o[x][S]));
-    const m = ur(n, g);
-    return h(f, m);
+    let m = { ...t };
+    for (const [x, y] of Object.entries(g))
+      o[x]?.[y] && (m = h(m, o[x][y]));
+    const f = ur(n, g);
+    return h(m, f);
   }
   function s(l) {
-    const g = O(l.config), f = ir(l.variantKeys, Object.keys(o));
-    return w({
+    const g = O(l.config), m = ir(l.variantKeys, Object.keys(o));
+    return C({
       base: h(t, g.base),
       variants: Object.fromEntries(
-        f.map((m) => [m, h(o[m], g.variants[m])])
+        m.map((f) => [f, h(o[f], g.variants[f])])
       ),
-      defaultVariants: v(e, g.defaultVariants),
+      defaultVariants: k(e, g.defaultVariants),
       compoundVariants: [...n, ...g.compoundVariants]
     });
   }
@@ -230,7 +230,7 @@ function w(r) {
     return nr(l, b);
   }
   const p = Object.fromEntries(Object.entries(o).map(([l, g]) => [l, Object.keys(g)]));
-  return Object.assign(y(d), {
+  return Object.assign(S(d), {
     __cva__: !0,
     variantMap: p,
     variantKeys: b,
@@ -247,62 +247,43 @@ function ur(r, t) {
     Object.entries(e).every(([i, a]) => i === "css" ? !0 : (Array.isArray(a) ? a : [a]).some((d) => t[i] === d)) && (o = h(o, e.css));
   }), o;
 }
-const mr = c({
+const fr = c({
   position: "relative",
   overflow: "hidden",
-  borderRadius: "3xl",
+  borderRadius: "xl",
   borderWidth: "1px",
   borderColor: "border.subtle",
   bg: "bg.card",
-  backdropFilter: "blur(28px) saturate(155%)",
-  boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)",
-  _before: {
-    content: '""',
-    position: "absolute",
-    inset: "0",
-    pointerEvents: "none",
-    background: "linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 100%)"
-  },
+  boxShadow: "0 1px 3px 0 rgba(15,23,42,0.06)",
   _dark: {
-    backdropFilter: "blur(12px) saturate(110%)",
-    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)",
-    _before: {
-      background: "none"
-    }
+    boxShadow: "0 1px 3px 0 rgba(0,0,0,0.24)"
   }
 }), hr = c({
-  borderRadius: "2xl",
+  borderRadius: "lg",
   borderWidth: "1px",
   borderColor: "border.soft",
-  bg: "bg.cardAlt",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
-  _dark: {
-    backdropFilter: "blur(10px) saturate(105%)",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)"
-  }
+  bg: "bg.cardAlt"
 }), xr = c({
-  borderRadius: "2xl",
+  borderRadius: "lg",
   borderWidth: "1px",
   borderColor: "border.default",
   bg: "bg.cardStrong",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)",
+  boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)",
   _dark: {
-    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)"
+    boxShadow: "0 2px 8px -2px rgba(0,0,0,0.32)"
   }
-}), Sr = c({
+}), yr = c({
   fontSize: "xs",
   textTransform: "uppercase",
   letterSpacing: "0.12em",
   color: "text.muted",
   fontWeight: "700"
-}), yr = c({
+}), Sr = c({
   fontFamily: "heading",
   fontSize: { base: "2xl", md: "3xl" },
   lineHeight: "1",
   color: "text.primary"
-}), kr = c({
+}), vr = c({
   color: "text.secondary",
   lineHeight: "1.65",
   fontSize: "sm"
@@ -310,67 +291,55 @@ const mr = c({
   color: "text.secondary",
   fontSize: "sm",
   lineHeight: "1.6"
-}), vr = c({
+}), kr = c({
   color: "text.primary",
   fontWeight: "700",
   lineHeight: "1.1"
-}), wr = c({
+}), Cr = c({
   whiteSpace: "pre-wrap",
   fontFamily: "mono",
   fontSize: "sm",
   lineHeight: "1.65",
   color: "text.secondary"
-}), Cr = w({
+}), wr = C({
   base: {
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     gap: "2",
-    borderRadius: "xl",
+    borderRadius: "lg",
     px: "4",
-    py: "3",
+    py: "2.5",
     fontSize: "sm",
-    fontWeight: "700",
+    fontWeight: "600",
     letterSpacing: "0.01em",
-    backdropFilter: "blur(22px) saturate(140%)",
-    transition: "all 160ms ease",
+    transition: "background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease",
     userSelect: "none",
     whiteSpace: "nowrap"
   },
   variants: {
     variant: {
       solid: {
-        bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)",
+        bg: "text.accent",
         color: "text.inverse",
         borderWidth: "1px",
-        borderColor: "rgba(255,255,255,0.18)",
-        boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)",
+        borderColor: "transparent",
         _dark: {
-          color: "#f7f9fd",
-          borderColor: "rgba(255,255,255,0.06)",
-          boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)"
+          color: "#f7f9fd"
         }
       },
       outline: {
         bg: "bg.buttonOutline",
         color: "text.secondary",
         borderWidth: "1px",
-        borderColor: "border.default",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
-        _dark: {
-          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
-        }
+        borderColor: "border.default"
       },
       subtle: {
         bg: "bg.accentSoft",
         color: "text.accent",
         borderWidth: "1px",
-        borderColor: "badge.infoBorder",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
-        _dark: {
-          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)"
-        }
+        borderColor: "badge.infoBorder"
       }
     },
     disabled: {
@@ -396,8 +365,8 @@ const mr = c({
       loading: !1,
       css: {
         _hover: {
-          transform: "translateY(-1px)",
-          boxShadow: "0 24px 42px -24px rgba(49,94,255,0.82), inset 0 1px 0 rgba(255,255,255,0.28)"
+          bg: "text.accent",
+          opacity: 0.9
         }
       }
     },
@@ -409,8 +378,7 @@ const mr = c({
         _hover: {
           color: "text.primary",
           borderColor: "border.strong",
-          bg: "bg.cardStrong",
-          transform: "translateY(-1px)"
+          bg: "bg.cardStrong"
         }
       }
     },
@@ -421,8 +389,7 @@ const mr = c({
       css: {
         _hover: {
           bg: "bg.selected",
-          borderColor: "border.accent",
-          transform: "translateY(-1px)"
+          borderColor: "border.accent"
         }
       }
     }
@@ -432,7 +399,7 @@ const mr = c({
     disabled: !1,
     loading: !1
   }
-}), Rr = w({
+}), Rr = C({
   base: {
     borderWidth: "1px",
     borderColor: "border.subtle",
@@ -500,9 +467,9 @@ const mr = c({
   flexShrink: "0"
 });
 export {
-  Sr as a,
-  Cr as b,
-  wr as c,
+  yr as a,
+  wr as b,
+  Cr as c,
   Rr as d,
   xr as e,
   Er as f,
@@ -511,12 +478,12 @@ export {
   hr as i,
   Br as j,
   Or as k,
-  yr as l,
-  vr as m,
-  mr as n,
-  w as o,
+  Sr as l,
+  kr as m,
+  fr as n,
+  C as o,
   Pr as p,
-  fr as q,
+  mr as q,
   c as r,
-  kr as s
+  vr as s
 };

package/dist/components/UiButton.styles.d.ts

@@ -1,15 +1,12 @@
 export declare const uiButtonClass: import("../../styled-system/types").RecipeRuntimeFn<{
     variant: {
         solid: {
-            bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)";
+            bg: "text.accent";
             color: "text.inverse";
             borderWidth: "1px";
-            borderColor: "rgba(255,255,255,0.18)";
-            boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)";
+            borderColor: "transparent";
             _dark: {
                 color: "#f7f9fd";
-                borderColor: "rgba(255,255,255,0.06)";
-                boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)";
             };
         };
         outline: {
@@ -17,20 +14,12 @@ export declare const uiButtonClass: import("../../styled-system/types").RecipeRu
             color: "text.secondary";
             borderWidth: "1px";
             borderColor: "border.default";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
         subtle: {
             bg: "bg.accentSoft";
             color: "text.accent";
             borderWidth: "1px";
             borderColor: "badge.infoBorder";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
     };
     disabled: {

package/dist/components.js

@@ -1,4 +1,4 @@
-import { _ as s, a as t, b as i, c as o, d as n, e as S, f as U, g as d, h as l, i as c, j as g } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-Lghyrtms.js";
+import { _ as s, a as t, b as i, c as o, d as n, e as S, f as U, g as d, h as l, i as c, j as g } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js";
 export {
   s as PageSurface,
   t as ResultPanel,

package/dist/index.js

@@ -1,6 +1,6 @@
-import { _ as a, a as l, b as o, c as t, d as i, e as n, f as r, g as C, h as c, i as p, j as d } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-Lghyrtms.js";
+import { _ as a, a as l, b as o, c as t, d as i, e as n, f as r, g as C, h as c, i as p, j as d } from "./chunks/UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js";
 import { actionToolbarClass as u, badgeRecipe as f, cardRecipe as m, centeredEmptyStatePanelClass as k, clusterLayout as R, emptyStatePanelClass as T, errorTextClass as S, fieldControlClass as x, fieldControlSmClass as b, fieldTextareaClass as P, focusRingClass as y, infoPanelClass as U, inputRecipe as L, loadingRegionClass as h, metricGridPattern as B, mutedTextClass as D, resultRegionClass as H, resultSkeletonPanelClass as j, selectableDetailClass as w, selectableListClass as v, selectableListDetailRootClass as A, splitLayout as E, stackLayout as F } from "./styles.js";
-import { b as V, c as _, d as q, e as z, a as I, h as J, i as K, m as M, p as N, f as O, g as Q, j as W, k as X, s as Y, l as Z, n as $ } from "./chunks/pageHeader-CcJrPX_8.js";
+import { b as V, c as _, d as q, e as z, a as I, h as J, i as K, m as M, p as N, f as O, g as Q, j as W, k as X, s as Y, l as Z, n as $ } from "./chunks/pageHeader-D9KF7WOO.js";
 import { colorTokens as es } from "./tokens.js";
 import { coreColorTokens as ls, motionTokens as os, radiusTokens as ts, spacingTokens as is, typographyTokens as ns } from "./tokens-core.js";
 import { desktopColorTokens as Cs } from "./tokens-desktop.js";

package/dist/styles/recipes/button.recipe.d.ts

@@ -1,15 +1,12 @@
 export declare const buttonRecipe: import("../../../styled-system/types").RecipeRuntimeFn<{
     variant: {
         solid: {
-            bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)";
+            bg: "text.accent";
             color: "text.inverse";
             borderWidth: "1px";
-            borderColor: "rgba(255,255,255,0.18)";
-            boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)";
+            borderColor: "transparent";
             _dark: {
                 color: "#f7f9fd";
-                borderColor: "rgba(255,255,255,0.06)";
-                boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)";
             };
         };
         outline: {
@@ -17,20 +14,12 @@ export declare const buttonRecipe: import("../../../styled-system/types").Recipe
             color: "text.secondary";
             borderWidth: "1px";
             borderColor: "border.default";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
         subtle: {
             bg: "bg.accentSoft";
             color: "text.accent";
             borderWidth: "1px";
             borderColor: "badge.infoBorder";
-            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)";
-            _dark: {
-                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)";
-            };
         };
     };
     disabled: {

package/dist/styles.js

@@ -1,5 +1,5 @@
-import { r as e, o as a, q as r, i as t, h as o } from "./chunks/pageHeader-CcJrPX_8.js";
-import { b as F, c as B, d as P, e as V, a as j, m as I, p as L, f as q, g as A, j as D, k as E, s as G, l as O, n as Y } from "./chunks/pageHeader-CcJrPX_8.js";
+import { r as e, o as a, q as r, i as t, h as o } from "./chunks/pageHeader-D9KF7WOO.js";
+import { b as F, c as B, d as P, e as V, a as j, m as I, p as L, f as q, g as A, j as D, k as E, s as G, l as O, n as Y } from "./chunks/pageHeader-D9KF7WOO.js";
 const l = e({
   width: "100%",
   minHeight: "48px",

package/dist/ui.css

@@ -1015,10 +1015,6 @@ body {
     background: var(--colors-bg-card-alt);
 }
 
-  .bg_linear-gradient\(135deg\,_rgba\(31\,67\,182\,0\.96\)_0\%\,_rgba\(49\,94\,255\,0\.92\)_100\%\) {
-    background: linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%);
-}
-
   .p_3 {
     padding: var(--spacing-3);
 }
@@ -1219,8 +1215,8 @@ body {
     padding-inline: var(--spacing-2\.5);
 }
 
-  .bd-c_rgba\(255\,255\,255\,0\.18\) {
-    border-color: rgba(255,255,255,0.18);
+  .trs_background-color_160ms_ease\,_border-color_160ms_ease\,_color_160ms_ease\,_box-shadow_160ms_ease {
+    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
 }
 
   .d_flex {
@@ -1611,17 +1607,12 @@ body {
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42);
 }
 
-  .bkdp_blur\(28px\)_saturate\(155\%\) {
-    backdrop-filter: blur(28px) saturate(155%);
-    -webkit-backdrop-filter: blur(28px) saturate(155%);
-}
-
-  .bx-sh_0_25px_30px_-35px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: 0 25px 30px -35px rgba(15,23,42,0.42);
+  .bx-sh_0_1px_3px_0_rgba\(15\,23\,42\,0\.06\) {
+    box-shadow: 0 1px 3px 0 rgba(15,23,42,0.06);
 }
 
-  .bx-sh_0_16px_32px_-28px_rgba\(15\,23\,42\,0\.42\) {
-    box-shadow: 0 16px 32px -28px rgba(15,23,42,0.42);
+  .bx-sh_0_2px_8px_-2px_rgba\(15\,23\,42\,0\.08\) {
+    box-shadow: 0 2px 8px -2px rgba(15,23,42,0.08);
 }
 
   .ls_0\.12em {
@@ -1652,18 +1643,22 @@ body {
     letter-spacing: 0.01em;
 }
 
-  .bkdp_blur\(22px\)_saturate\(140\%\) {
-    backdrop-filter: blur(22px) saturate(140%);
-    -webkit-backdrop-filter: blur(22px) saturate(140%);
-}
-
   .us_none {
     -webkit-user-select: none;
     user-select: none;
 }
 
-  .bx-sh_0_22px_36px_-24px_rgba\(49\,94\,255\,0\.78\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.24\) {
-    box-shadow: 0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24);
+  .bkdp_blur\(28px\)_saturate\(155\%\) {
+    backdrop-filter: blur(28px) saturate(155%);
+    -webkit-backdrop-filter: blur(28px) saturate(155%);
+}
+
+  .bx-sh_0_25px_30px_-35px_rgba\(15\,23\,42\,0\.42\) {
+    box-shadow: 0 25px 30px -35px rgba(15,23,42,0.42);
+}
+
+  .bx-sh_0_16px_32px_-28px_rgba\(15\,23\,42\,0\.42\) {
+    box-shadow: 0 16px 32px -28px rgba(15,23,42,0.42);
 }
 
   .bkdp_blur\(34px\)_saturate\(165\%\) {
@@ -1867,14 +1862,6 @@ body {
     background: rgba(210, 220, 240, 0.11);
 }
 
-  .before\:bg_linear-gradient\(180deg\,_rgba\(255\,255\,255\,0\.28\)_0\%\,_rgba\(255\,255\,255\,0\.04\)_18\%\,_rgba\(255\,255\,255\,0\)_100\%\)::before {
-    background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 100%);
-}
-
-  [data-theme="dark"] .dark\:bd-c_rgba\(255\,255\,255\,0\.06\) {
-    border-color: rgba(255,255,255,0.06);
-}
-
   [data-theme="dark"] .dark\:bx-sh_inset_0_1px_0_rgba\(255\,255\,255\,0\.04\) {
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
 }
@@ -1899,32 +1886,18 @@ body {
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
 }
 
-  .before\:pointer-events_none::before {
-    pointer-events: none;
-}
-
-  [data-theme="dark"] .dark\:bkdp_blur\(12px\)_saturate\(110\%\) {
-    backdrop-filter: blur(12px) saturate(110%);
-    -webkit-backdrop-filter: blur(12px) saturate(110%);
-}
-
-  [data-theme="dark"] .dark\:bx-sh_0_16px_34px_-28px_rgba\(0\,0\,0\,0\.92\) {
-    box-shadow: 0 16px 34px -28px rgba(0,0,0,0.92);
+  [data-theme="dark"] .dark\:bx-sh_0_1px_3px_0_rgba\(0\,0\,0\,0\.24\) {
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
 }
 
-  [data-theme="dark"] .dark\:bkdp_blur\(10px\)_saturate\(105\%\) {
-    backdrop-filter: blur(10px) saturate(105%);
-    -webkit-backdrop-filter: blur(10px) saturate(105%);
+  [data-theme="dark"] .dark\:bx-sh_0_2px_8px_-2px_rgba\(0\,0\,0\,0\.32\) {
+    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.32);
 }
 
   [data-theme="dark"] .dark\:c_\#f7f9fd {
     color: #f7f9fd;
 }
 
-  [data-theme="dark"] .dark\:bx-sh_0_22px_40px_-24px_rgba\(71\,121\,255\,0\.55\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.18\) {
-    box-shadow: 0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
-}
-
   .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid;
 }
@@ -1953,6 +1926,10 @@ body {
     background: var(--colors-bg-selected);
 }
 
+  .hover\:bg_text\.accent:is(:hover, [data-hover]) {
+    background: var(--colors-text-accent);
+}
+
   .hover\:bg_bg\.card:is(:hover, [data-hover]) {
     background: var(--colors-bg-card);
 }
@@ -1973,18 +1950,14 @@ body {
     color: var(--colors-text-primary);
 }
 
-  .hover\:bx-sh_0_24px_42px_-24px_rgba\(49\,94\,255\,0\.82\)\,_inset_0_1px_0_rgba\(255\,255\,255\,0\.28\):is(:hover, [data-hover]) {
-    box-shadow: 0 24px 42px -24px rgba(49,94,255,0.82), inset 0 1px 0 rgba(255,255,255,0.28);
+  .hover\:op_0\.9:is(:hover, [data-hover]) {
+    opacity: 0.9;
 }
 
   [data-theme="dark"] .dark\:before\:bg_linear-gradient\(90deg\,_rgba\(255\,255\,255\,0\)_0\%\,_rgba\(186\,204\,236\,0\.22\)_50\%\,_rgba\(255\,255\,255\,0\)_100\%\)::before {
     background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%);
 }
 
-  [data-theme="dark"] .dark\:before\:bg_none::before {
-    background: none;
-}
-
   @media screen and (min-width: 48rem) {
     .md\:p_5 {
       padding: var(--spacing-5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aggc/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Shared Vue UI primitives, patterns, and tokens for AGGC desktop and web.",
   "type": "module",
   "license": "MIT",

package/src/components/SectionCard.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<{
   scrollBody?: boolean;
   collapseBodyGap?: boolean;
 }>(), {
-  eyebrow: "Workspace surface",
+  eyebrow: undefined,
   description: "",
   scrollBody: false,
   collapseBodyGap: false,

package/src/styles/primitives/surfaces.ts

@@ -3,50 +3,30 @@ import { css } from "@styled/css";
 export const surfacePanelClass = css({
   position: "relative",
   overflow: "hidden",
-  borderRadius: "3xl",
+  borderRadius: "xl",
   borderWidth: "1px",
   borderColor: "border.subtle",
   bg: "bg.card",
-  backdropFilter: "blur(28px) saturate(155%)",
-  boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)",
-  _before: {
-    content: "\"\"",
-    position: "absolute",
-    inset: "0",
-    pointerEvents: "none",
-    background:
-      "linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 100%)",
-  },
+  boxShadow: "0 1px 3px 0 rgba(15,23,42,0.06)",
   _dark: {
-    backdropFilter: "blur(12px) saturate(110%)",
-    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)",
-    _before: {
-      background: "none",
-    },
+    boxShadow: "0 1px 3px 0 rgba(0,0,0,0.24)",
   },
 });
 
 export const insetPanelClass = css({
-  borderRadius: "2xl",
+  borderRadius: "lg",
   borderWidth: "1px",
   borderColor: "border.soft",
   bg: "bg.cardAlt",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
-  _dark: {
-    backdropFilter: "blur(10px) saturate(105%)",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
-  },
 });
 
 export const elevatedPanelClass = css({
-  borderRadius: "2xl",
+  borderRadius: "lg",
   borderWidth: "1px",
   borderColor: "border.default",
   bg: "bg.cardStrong",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)",
+  boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)",
   _dark: {
-    boxShadow: "0 16px 34px -28px rgba(0,0,0,0.92)",
+    boxShadow: "0 2px 8px -2px rgba(0,0,0,0.32)",
   },
 });

package/src/styles/recipes/button.recipe.ts

@@ -7,29 +7,25 @@ export const buttonRecipe = cva({
     alignItems: "center",
     justifyContent: "center",
     gap: "2",
-    borderRadius: "xl",
+    borderRadius: "lg",
     px: "4",
-    py: "3",
+    py: "2.5",
     fontSize: "sm",
-    fontWeight: "700",
+    fontWeight: "600",
     letterSpacing: "0.01em",
-    backdropFilter: "blur(22px) saturate(140%)",
-    transition: "all 160ms ease",
+    transition: "background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease",
     userSelect: "none",
     whiteSpace: "nowrap",
   },
   variants: {
     variant: {
       solid: {
-        bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)",
+        bg: "text.accent",
         color: "text.inverse",
         borderWidth: "1px",
-        borderColor: "rgba(255,255,255,0.18)",
-        boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)",
+        borderColor: "transparent",
         _dark: {
           color: "#f7f9fd",
-          borderColor: "rgba(255,255,255,0.06)",
-          boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)",
         },
       },
       outline: {
@@ -37,20 +33,12 @@ export const buttonRecipe = cva({
         color: "text.secondary",
         borderWidth: "1px",
         borderColor: "border.default",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
-        _dark: {
-          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
-        },
       },
       subtle: {
         bg: "bg.accentSoft",
         color: "text.accent",
         borderWidth: "1px",
         borderColor: "badge.infoBorder",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
-        _dark: {
-          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
-        },
       },
     },
     disabled: {
@@ -76,8 +64,8 @@ export const buttonRecipe = cva({
       loading: false,
       css: {
         _hover: {
-          transform: "translateY(-1px)",
-          boxShadow: "0 24px 42px -24px rgba(49,94,255,0.82), inset 0 1px 0 rgba(255,255,255,0.28)",
+          bg: "text.accent",
+          opacity: 0.9,
         },
       },
     },
@@ -90,7 +78,6 @@ export const buttonRecipe = cva({
           color: "text.primary",
           borderColor: "border.strong",
           bg: "bg.cardStrong",
-          transform: "translateY(-1px)",
         },
       },
     },
@@ -102,7 +89,6 @@ export const buttonRecipe = cva({
         _hover: {
           bg: "bg.selected",
           borderColor: "border.accent",
-          transform: "translateY(-1px)",
         },
       },
     },