@burdenoff/fe-libs 2026.619.1 → 2026.623.1

package/dist/chrome/AccountSwitcher.js

@@ -28,7 +28,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 	}, E = (e, t = !1) => {
 		let n = d(e.name, e.firstName, e.lastName);
 		return /* @__PURE__ */ l("div", {
-			className: `flex items-center gap-3 p-3 ${t ? "bg-action-ghost-bg-hover" : "hover:bg-action-ghost-bg-hover cursor-pointer"} transition-colors`,
+			className: `flex items-center gap-3 p-3 ${t ? "bg-[var(--color-accent-soft)]" : "hover:bg-bg-sunken cursor-pointer"} transition-colors`,
 			onClick: () => !t && T(e),
 			role: t ? void 0 : "button",
 			tabIndex: t ? void 0 : 0,
@@ -72,7 +72,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 					onClick: (t) => {
 						t.stopPropagation(), g(e.id);
 					},
-					className: "p-1 rounded hover:bg-status-error-bg/20 text-text-tertiary hover:text-status-error-text transition-colors",
+					className: "p-1 rounded-button hover:bg-status-error-bg-subtle text-text-muted hover:text-status-error-text transition-colors",
 					"aria-label": `Remove ${e.name}`,
 					children: /* @__PURE__ */ c("svg", {
 						className: "size-4",
@@ -93,14 +93,14 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 		/* @__PURE__ */ l("div", {
 			className: "border-b border-border-subtle",
 			children: [/* @__PURE__ */ c("p", {
-				className: "px-3 pt-3 pb-1 text-xs font-semibold text-text-tertiary uppercase tracking-wider",
+				className: "px-3 pt-3 pb-1 text-[11px] font-medium text-text-muted uppercase tracking-wider",
 				children: "Active Account"
 			}), C && E(C, !0)]
 		}),
 		w.length > 0 && /* @__PURE__ */ l("div", {
 			className: "border-b border-border-subtle",
 			children: [/* @__PURE__ */ c("p", {
-				className: "px-3 pt-3 pb-1 text-xs font-semibold text-text-tertiary uppercase tracking-wider",
+				className: "px-3 pt-3 pb-1 text-[11px] font-medium text-text-muted uppercase tracking-wider",
 				children: "Switch Account"
 			}), w.map((e) => E(e))]
 		}),
@@ -111,7 +111,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 				onClick: () => {
 					h(), b(!1);
 				},
-				className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-text-primary hover:bg-action-ghost-bg-hover transition-colors",
+				className: "w-full flex items-center gap-3 px-3 py-2 rounded-button text-text-primary hover:bg-bg-sunken transition-colors",
 				children: [/* @__PURE__ */ c("svg", {
 					className: "size-5",
 					fill: "none",
@@ -132,7 +132,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 				onClick: () => {
 					_(), b(!1);
 				},
-				className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-status-error-text hover:bg-status-error-bg/10 transition-colors",
+				className: "w-full flex items-center gap-3 px-3 py-2 rounded-button text-status-error-text hover:bg-status-error-bg-subtle transition-colors",
 				children: [/* @__PURE__ */ c("svg", {
 					className: "size-5",
 					fill: "none",
@@ -152,7 +152,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 		})
 	] }), O = /* @__PURE__ */ l("button", {
 		onClick: () => b(!y),
-		className: `flex items-center gap-2 p-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${y ? "bg-action-ghost-bg-hover" : ""}`,
+		className: `flex items-center gap-2 p-2 rounded-button hover:bg-bg-sunken transition-colors ${y ? "bg-bg-sunken" : ""}`,
 		"aria-label": "Account switcher",
 		"aria-expanded": y,
 		children: [
@@ -215,7 +215,7 @@ var f = ({ accounts: f, activeAccountId: p, onSwitchAccount: m, onAddAccount: h,
 		className: "relative",
 		ref: S,
 		children: [O, y && /* @__PURE__ */ c("div", {
-			className: "absolute right-0 mt-2 w-80 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50 overflow-hidden",
+			className: "absolute right-0 mt-2 w-80 bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] z-50 overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
 			children: D()
 		})]
 	});

package/dist/chrome/AppShellLayout.d.ts

@@ -25,7 +25,10 @@ export interface AppShellLayoutProps {
     sidebarVisible?: boolean;
     /** Custom className for main content area */
     contentClassName?: string;
-    /** Padding for main content area (e.g., 'p-4', 'p-6', 'p-8', 'p-card-padding'). Default: 'p-6' */
+    /**
+     * Padding for main content area (e.g., 'p-4', 'p-6', 'p-8', 'p-card-padding').
+     * Default: comfortable Boff UI page gutters ('px-6 lg:px-8 py-6').
+     */
     contentPadding?: string;
     /** When true, footer is rendered inside main content area (scrolls with content). Default: false */
     footerInContent?: boolean;

package/dist/chrome/AppShellLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellLayout.d.ts","sourceRoot":"","sources":["../../src/chrome/AppShellLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,sDAAsD;IACtD,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kGAAkG;IAClG,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oGAAoG;IACpG,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAsElD,CAAC"}
+{"version":3,"file":"AppShellLayout.d.ts","sourceRoot":"","sources":["../../src/chrome/AppShellLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,sDAAsD;IACtD,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oGAAoG;IACpG,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAsElD,CAAC"}

package/dist/chrome/AppShellLayout.js

@@ -1,6 +1,6 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/chrome/AppShellLayout.tsx
-var r = ({ header: r, sidebar: i, footer: a, bottomPanel: o, rightPanel: s, statusBar: c, children: l, headerVisible: u = !0, footerVisible: d = !0, sidebarVisible: f = !0, contentClassName: p, contentPadding: m = "p-6", footerInContent: h = !1, safeArea: g = !0 }) => {
+var r = ({ header: r, sidebar: i, footer: a, bottomPanel: o, rightPanel: s, statusBar: c, children: l, headerVisible: u = !0, footerVisible: d = !0, sidebarVisible: f = !0, contentClassName: p, contentPadding: m = "px-6 lg:px-8 py-6", footerInContent: h = !1, safeArea: g = !0 }) => {
 	let _ = h ? `flex-1 overflow-auto bg-bg-canvas flex flex-col ${m}` : `flex-1 overflow-auto bg-bg-canvas ${m}`;
 	return /* @__PURE__ */ n("div", {
 		className: "flex flex-col h-screen bg-bg-canvas",

package/dist/chrome/AutoBreadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoBreadcrumbs.d.ts","sourceRoot":"","sources":["../../src/chrome/AutoBreadcrumbs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAYH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAE9D;AAED,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,QAElD;AAiBD,wBAAgB,eAAe,mDAsK9B"}
+{"version":3,"file":"AutoBreadcrumbs.d.ts","sourceRoot":"","sources":["../../src/chrome/AutoBreadcrumbs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAYH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAE9D;AAED,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,QAElD;AAiBD,wBAAgB,eAAe,mDAmK9B"}

package/dist/chrome/AutoBreadcrumbs.js

@@ -65,7 +65,7 @@ function _() {
 			children: /* @__PURE__ */ u("button", {
 				type: "button",
 				onClick: () => v?.setBreadcrumbCollapsed(!1),
-				className: "inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] text-text-tertiary transition-colors duration-150 hover:bg-action-ghost-bg-hover hover:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
+				className: "inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] text-text-muted transition-colors duration-150 hover:bg-bg-sunken hover:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
 				title: T,
 				"aria-label": T,
 				"data-testid": "breadcrumb-expand",
@@ -87,7 +87,7 @@ function _() {
 					onClick: (e) => {
 						e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || (e.preventDefault(), g("/"));
 					},
-					className: "inline-flex items-center gap-1 rounded-md p-1.5 text-text-secondary transition-colors duration-150 hover:bg-action-ghost-bg-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
+					className: "inline-flex items-center gap-1 rounded-md p-1.5 text-text-secondary transition-colors duration-150 hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
 					"aria-label": S,
 					children: [/* @__PURE__ */ l(o, { className: "size-3.5" }), /* @__PURE__ */ l("span", {
 						className: "sr-only sm:not-sr-only sm:inline",
@@ -98,7 +98,7 @@ function _() {
 					"aria-hidden": "true",
 					className: "flex items-center px-0.5",
 					children: /* @__PURE__ */ l(a, {
-						className: "size-3.5 shrink-0 text-text-tertiary opacity-60",
+						className: "size-3.5 shrink-0 text-text-muted opacity-70",
 						strokeWidth: 2
 					})
 				}),
@@ -113,13 +113,13 @@ function _() {
 						onClick: (t) => {
 							t.metaKey || t.ctrlKey || t.shiftKey || t.button !== 0 || (t.preventDefault(), g(e.path));
 						},
-						className: "inline-flex max-w-[140px] items-center truncate rounded-md px-1.5 py-0.5 text-text-secondary transition-colors duration-150 hover:bg-action-ghost-bg-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong sm:max-w-[200px]",
+						className: "inline-flex max-w-[140px] items-center truncate rounded-md px-1.5 py-0.5 text-text-secondary transition-colors duration-150 hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong sm:max-w-[200px]",
 						children: e.label
 					}), !e.isLast && /* @__PURE__ */ l("span", {
 						"aria-hidden": "true",
 						className: "flex items-center px-0.5",
 						children: /* @__PURE__ */ l(a, {
-							className: "size-3.5 shrink-0 text-text-tertiary opacity-60",
+							className: "size-3.5 shrink-0 text-text-muted opacity-70",
 							strokeWidth: 2
 						})
 					})]
@@ -128,7 +128,7 @@ function _() {
 		}), C && /* @__PURE__ */ l("button", {
 			type: "button",
 			onClick: () => v?.setBreadcrumbCollapsed(!0),
-			className: "ml-auto inline-flex shrink-0 items-center rounded-md p-1.5 text-text-tertiary transition-colors duration-150 hover:bg-action-ghost-bg-hover hover:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
+			className: "ml-auto inline-flex shrink-0 items-center rounded-md p-1.5 text-text-muted transition-colors duration-150 hover:bg-bg-sunken hover:text-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong",
 			title: E,
 			"aria-label": E,
 			"data-testid": "breadcrumb-collapse",

package/dist/chrome/Breadcrumbs.js

@@ -5,9 +5,9 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/chrome/Breadcrumbs.tsx
 var s = /* @__PURE__ */ a(r, {
 	"aria-hidden": "true",
-	className: "size-3.5 shrink-0 text-text-tertiary opacity-60",
+	className: "size-3.5 shrink-0 text-text-muted opacity-70",
 	strokeWidth: 2
-}), c = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-text-secondary transition-colors duration-150 hover:bg-action-ghost-bg-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", l = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-semibold text-text-primary cursor-default", u = ({ items: r, separator: u, showHome: d = !0, onHomeClick: f, maxItems: p = 5, className: m }) => {
+}), c = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-text-secondary transition-colors duration-150 hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", l = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-semibold text-text-primary cursor-default", u = ({ items: r, separator: u, showHome: d = !0, onHomeClick: f, maxItems: p = 5, className: m }) => {
 	let h = n(() => r.length <= p ? r : [
 		r[0],
 		{
@@ -40,7 +40,7 @@ var s = /* @__PURE__ */ a(r, {
 				}), /* @__PURE__ */ a("li", {
 					className: "flex min-w-0 items-center",
 					children: i ? /* @__PURE__ */ a("span", {
-						className: "px-1 text-text-tertiary",
+						className: "px-1 text-text-muted",
 						"aria-hidden": "true",
 						children: "…"
 					}) : n.isCurrentPage ? /* @__PURE__ */ o("span", {

package/dist/chrome/CommandPalette.js

@@ -93,24 +93,24 @@ function d({ actions: l, shortcuts: d = [], placeholder: f = "Type a command or
 			className: "w-full max-w-lg mx-4 max-h-[85dvh] overflow-hidden",
 			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ c("div", {
-				className: "overflow-hidden rounded-xl border-2 border-border/50 bg-background shadow-2xl",
+				className: "overflow-hidden rounded-2xl border border-border-subtle bg-bg-elevated shadow-[var(--shadow-elevation-5)]",
 				children: [
 					/* @__PURE__ */ c("div", {
-						className: "flex items-center border-b px-3",
+						className: "flex items-center border-b border-border-subtle px-4",
 						children: [
-							/* @__PURE__ */ s(a, { className: "size-4 mr-2 flex-shrink-0 opacity-50" }),
+							/* @__PURE__ */ s(a, { className: "size-4 mr-2 flex-shrink-0 text-text-muted" }),
 							/* @__PURE__ */ s("input", {
 								type: "text",
 								placeholder: f,
 								value: g,
 								onChange: (e) => _(e.target.value),
-								className: "flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground",
+								className: "flex-1 bg-transparent py-3.5 text-sm text-text-primary outline-none placeholder:text-text-placeholder",
 								autoFocus: !0
 							}),
 							g && /* @__PURE__ */ s("button", {
 								type: "button",
 								onClick: () => _(""),
-								className: "ml-2 rounded-sm opacity-70 hover:opacity-100",
+								className: "ml-2 rounded-button p-1 text-text-muted hover:bg-bg-sunken hover:text-text-primary transition-colors",
 								"aria-label": "Clear search",
 								children: /* @__PURE__ */ s(o, { className: "size-4" })
 							})
@@ -119,33 +119,33 @@ function d({ actions: l, shortcuts: d = [], placeholder: f = "Type a command or
 					/* @__PURE__ */ c("div", {
 						className: "max-h-96 overflow-y-auto p-2",
 						children: [S.length === 0 && /* @__PURE__ */ s("div", {
-							className: "py-6 text-center text-sm text-muted-foreground",
+							className: "py-6 text-center text-sm text-text-muted",
 							children: "No commands found."
 						}), Object.entries(C).map(([t, n]) => /* @__PURE__ */ c("div", {
 							className: "mb-2 last:mb-0",
 							children: [/* @__PURE__ */ s("div", {
-								className: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+								className: "px-2 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-muted",
 								children: t
 							}), n.map((t) => {
 								let n = t.icon, r = w;
 								return w++, /* @__PURE__ */ c("button", {
 									type: "button",
 									onClick: () => void x(t),
-									className: e("w-full flex items-start gap-2 px-2 py-2 text-sm rounded-md transition-colors text-left", r === v ? "bg-accent" : "hover:bg-accent/50"),
+									className: e("w-full flex items-start gap-3 px-2.5 py-2 text-sm rounded-button transition-colors text-left", r === v ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
 									children: [
 										n && /* @__PURE__ */ s(n, { className: "size-4 mt-0.5 flex-shrink-0" }),
 										/* @__PURE__ */ c("div", {
 											className: "flex-1 min-w-0",
 											children: [/* @__PURE__ */ s("div", {
-												className: "font-medium",
+												className: "font-medium text-text-primary",
 												children: t.label
 											}), t.description && /* @__PURE__ */ s("div", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-muted",
 												children: t.description
 											})]
 										}),
 										t.shortcut && /* @__PURE__ */ s("kbd", {
-											className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-50",
+											className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border-subtle bg-bg-sunken px-1.5 font-mono text-[10px] font-medium text-text-secondary",
 											children: t.shortcut
 										})
 									]
@@ -154,11 +154,11 @@ function d({ actions: l, shortcuts: d = [], placeholder: f = "Type a command or
 						}, t))]
 					}),
 					/* @__PURE__ */ c("div", {
-						className: "border-t px-3 py-2 text-xs text-muted-foreground flex items-center justify-between",
+						className: "border-t border-border-subtle px-3 py-2 text-xs text-text-muted flex items-center justify-between",
 						children: [
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ s("kbd", {
-									className: "inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px]",
+									className: "inline-flex h-5 select-none items-center gap-1 rounded border border-border-subtle bg-bg-sunken px-1.5 font-mono text-[10px] text-text-secondary",
 									children: "↑↓"
 								}),
 								" ",
@@ -166,7 +166,7 @@ function d({ actions: l, shortcuts: d = [], placeholder: f = "Type a command or
 							] }),
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ s("kbd", {
-									className: "inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px]",
+									className: "inline-flex h-5 select-none items-center gap-1 rounded border border-border-subtle bg-bg-sunken px-1.5 font-mono text-[10px] text-text-secondary",
 									children: "Enter"
 								}),
 								" ",
@@ -174,7 +174,7 @@ function d({ actions: l, shortcuts: d = [], placeholder: f = "Type a command or
 							] }),
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ s("kbd", {
-									className: "inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px]",
+									className: "inline-flex h-5 select-none items-center gap-1 rounded border border-border-subtle bg-bg-sunken px-1.5 font-mono text-[10px] text-text-secondary",
 									children: "Esc"
 								}),
 								" ",

package/dist/chrome/ContextSwitcher.js

@@ -141,7 +141,7 @@ var _ = ({ organizations: _, workspaces: v, projects: y, currentOrganizationId:
 		className: "relative",
 		ref: P,
 		children: [Q, D && /* @__PURE__ */ h("div", {
-			className: "absolute right-0 mt-2 w-[calc(100vw-2rem)] sm:w-[26rem] bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] rounded-lg shadow-lg z-50 flex flex-col max-h-[400px] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
+			className: "absolute right-0 mt-2 w-[calc(100vw-2rem)] sm:w-[26rem] bg-[var(--color-bg-elevated)] border border-[var(--color-border-subtle)] rounded-card shadow-[var(--shadow-elevation-4)] z-50 flex flex-col max-h-[400px] overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
 			children: Z()
 		})]
 	});

package/dist/chrome/Footer.js

@@ -122,7 +122,7 @@ var s = [
 							/* @__PURE__ */ o("div", {
 								className: "flex items-center gap-3 mb-4",
 								children: [n ?? /* @__PURE__ */ a("div", {
-									className: "size-8 rounded-md bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white font-bold text-sm",
+									className: "size-8 rounded-md bg-action-primary-bg flex items-center justify-center text-action-primary-text font-bold text-sm",
 									children: "B"
 								}), /* @__PURE__ */ a("span", {
 									className: "text-lg font-semibold text-text-primary",

package/dist/chrome/FooterBar.js

@@ -5,7 +5,7 @@ var r = ({ sections: r, context: i, version: a, children: o }) => {
 		onClick: e.onClick,
 		className: `
         flex items-center gap-icon-gap px-2 py-1 rounded-button
-        ${e.type === "action" ? "hover:bg-action-ghost-bg-hover hover:text-text-primary" : ""}
+        ${e.type === "action" ? "hover:bg-bg-sunken hover:text-text-primary" : ""}
         transition-colors
       `,
 		disabled: !e.onClick,
@@ -33,7 +33,7 @@ var r = ({ sections: r, context: i, version: a, children: o }) => {
 		]
 	}, e.id);
 	return /* @__PURE__ */ n("footer", {
-		className: "h-8 bg-bg-elevated border-t border-border-subtle flex items-center px-card-padding text-body-sm text-text-secondary",
+		className: "h-8 bg-[var(--color-surface-glass)] backdrop-blur-[var(--blur-glass)] border-t border-[var(--color-border-glass)] flex items-center px-card-padding text-body-sm text-text-secondary",
 		children: [
 			/* @__PURE__ */ n("div", {
 				className: "flex items-center gap-form-gap",

package/dist/chrome/GlobalSearch.js

@@ -64,7 +64,7 @@ function g({ open: g, onClose: _, categories: v = [], placeholder: y = "Search e
 			className: "w-full max-w-lg mx-4 max-h-[85dvh] overflow-hidden",
 			onClick: (e) => e.stopPropagation(),
 			children: /* @__PURE__ */ h("div", {
-				className: "overflow-hidden rounded-xl border-2 border-border/50 bg-background shadow-2xl",
+				className: "overflow-hidden rounded-2xl border border-border-subtle bg-bg-elevated shadow-[var(--shadow-elevation-5)]",
 				children: [
 					/* @__PURE__ */ m(r, {
 						value: T,
@@ -95,13 +95,13 @@ function g({ open: g, onClose: _, categories: v = [], placeholder: y = "Search e
 						onResultSelect: W
 					}),
 					T && k.length > 0 && C && /* @__PURE__ */ m("div", {
-						className: "border-t p-2",
+						className: "border-t border-border-subtle p-2",
 						children: /* @__PURE__ */ h("button", {
 							type: "button",
 							onClick: () => {
 								C(T, R(), D), _();
 							},
-							className: "w-full flex items-center justify-center gap-2 py-2 text-sm text-primary hover:bg-accent rounded-md transition-colors",
+							className: "w-full flex items-center justify-center gap-2 py-2 text-sm font-medium text-text-link hover:bg-bg-sunken rounded-button transition-colors",
 							children: [/* @__PURE__ */ m(p, { className: "size-4" }), "View all results"]
 						})
 					})

package/dist/chrome/HeaderBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../src/chrome/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qGAAqG;IACrG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,kGAAkG;IAClG,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE7B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,wBAAwB;IACxB,IAAI,CAAC,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,yDAAyD;IACzD,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,iCAAiC;IACjC,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,iCAAiC;IACjC,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,uCAAuC;IACvC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtC,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAwOxC,CAAC"}
+{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../src/chrome/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qGAAqG;IACrG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,kGAAkG;IAClG,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE7B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,wBAAwB;IACxB,IAAI,CAAC,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,yDAAyD;IACzD,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,iCAAiC;IACjC,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,iCAAiC;IACjC,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,uCAAuC;IACvC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtC,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAyOxC,CAAC"}

package/dist/chrome/HeaderBar.js

@@ -1,13 +1,13 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/chrome/HeaderBar.tsx
 var n = ({ logo: n, appName: r, onLogoClick: i, onMenuToggle: a, onSearchClick: o, searchPlaceholder: s = "Search...", searchShortcut: c = "⌘K", unreadNotifications: l = 0, onNotificationsClick: u, notificationCenter: d, colorMode: f = "light", onThemeToggle: p, user: m, onUserMenuClick: h, actions: g, contextSwitcher: _, productSwitcher: v, languageSwitcher: y, geographySwitcher: b, profileSwitcher: x, onKeyboardShortcutsClick: S, mobileOptimized: C = !0 }) => /* @__PURE__ */ t("header", {
-	className: "relative z-[100] h-14 bg-bg-elevated border-b border-border-subtle flex items-center px-3 md:px-card-padding justify-between",
+	className: "relative z-[100] h-14 bg-[var(--color-surface-glass)] backdrop-blur-[var(--blur-glass)] border-b border-[var(--color-border-glass)] flex items-center px-3 md:px-card-padding justify-between",
 	children: [/* @__PURE__ */ t("div", {
 		className: "flex items-center gap-2 md:gap-control-gap",
 		children: [a && /* @__PURE__ */ e("button", {
 			type: "button",
 			onClick: a,
-			className: "p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+			className: "p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors",
 			"aria-label": "Toggle sidebar",
 			children: /* @__PURE__ */ e("svg", {
 				className: "w-icon-md h-icon-md",
@@ -55,7 +55,7 @@ var n = ({ logo: n, appName: r, onLogoClick: i, onMenuToggle: a, onSearchClick:
 			S && /* @__PURE__ */ e("button", {
 				type: "button",
 				onClick: S,
-				className: `p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary ${C ? "hidden md:block" : ""}`,
+				className: `p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors ${C ? "hidden md:block" : ""}`,
 				"aria-label": "Keyboard shortcuts",
 				title: "Keyboard shortcuts (Ctrl+/ or Cmd+/)",
 				children: /* @__PURE__ */ e("svg", {
@@ -74,7 +74,7 @@ var n = ({ logo: n, appName: r, onLogoClick: i, onMenuToggle: a, onSearchClick:
 			o && /* @__PURE__ */ e("button", {
 				type: "button",
 				onClick: o,
-				className: "p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+				className: "p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors",
 				"aria-label": "Search",
 				title: `Search (${c})`,
 				children: /* @__PURE__ */ e("svg", {
@@ -94,7 +94,7 @@ var n = ({ logo: n, appName: r, onLogoClick: i, onMenuToggle: a, onSearchClick:
 			d || (u ? /* @__PURE__ */ t("button", {
 				type: "button",
 				onClick: u,
-				className: "relative p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+				className: "relative p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors",
 				"aria-label": "Notifications",
 				children: [/* @__PURE__ */ e("svg", {
 					className: "w-icon-md h-icon-md",
@@ -112,7 +112,7 @@ var n = ({ logo: n, appName: r, onLogoClick: i, onMenuToggle: a, onSearchClick:
 			p && /* @__PURE__ */ e("button", {
 				type: "button",
 				onClick: p,
-				className: `p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary ${C ? "hidden md:block" : ""}`,
+				className: `p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors ${C ? "hidden md:block" : ""}`,
 				"aria-label": "Toggle theme",
 				children: f === "light" ? /* @__PURE__ */ e("svg", {
 					className: "w-icon-md h-icon-md",

package/dist/chrome/LanguagePickerSheet.js

@@ -21,7 +21,7 @@ var o = ({ open: o, onOpenChange: s, languages: c, currentLanguage: l, onLanguag
 				className: "flex-1 overflow-y-auto py-2",
 				children: c.map((e) => /* @__PURE__ */ a("button", {
 					onClick: () => d(e),
-					className: `w-full flex items-center gap-4 px-4 py-3.5 text-body-sm transition-colors ${e.code === l ? "bg-action-ghost-bg-hover" : "hover:bg-action-ghost-bg-hover"}`,
+					className: `w-full flex items-center gap-4 px-4 py-3.5 text-body-sm transition-colors ${e.code === l ? "bg-[var(--color-accent-soft)]" : "hover:bg-bg-sunken"}`,
 					children: [
 						e.flag && /* @__PURE__ */ i("span", {
 							className: "text-2xl flex-shrink-0",

package/dist/chrome/LanguageSwitcher.js

@@ -17,7 +17,7 @@ var o = ({ languages: o, currentLanguage: s, onLanguageChange: c, compact: l = !
 		ref: f,
 		children: [/* @__PURE__ */ i("button", {
 			onClick: () => d(!u),
-			className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${u ? "bg-action-ghost-bg-hover" : ""}`,
+			className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors ${u ? "bg-bg-sunken" : ""}`,
 			"aria-label": "Change language",
 			"aria-expanded": u,
 			children: l ? /* @__PURE__ */ i("svg", {
@@ -47,18 +47,18 @@ var o = ({ languages: o, currentLanguage: s, onLanguageChange: c, compact: l = !
 				})
 			})] })
 		}), u && /* @__PURE__ */ a("div", {
-			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-64 max-w-64 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50 py-2",
+			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-64 max-w-64 bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] z-50 py-2 overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
 			children: [/* @__PURE__ */ i("div", {
 				className: "px-4 py-2 border-b border-border-subtle",
 				children: /* @__PURE__ */ i("p", {
-					className: "text-body-xs font-semibold text-text-secondary uppercase",
+					className: "text-[11px] font-medium text-text-muted uppercase tracking-wider",
 					children: "Select Language"
 				})
 			}), /* @__PURE__ */ i("div", {
 				className: "py-1 max-h-96 overflow-y-auto",
 				children: o.map((e) => /* @__PURE__ */ a("button", {
 					onClick: () => m(e),
-					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.code === s ? "bg-action-ghost-bg-hover text-text-primary font-medium" : "text-text-primary hover:bg-action-ghost-bg-hover"}`,
+					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.code === s ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-primary hover:bg-bg-sunken"}`,
 					children: [
 						e.flag && /* @__PURE__ */ i("span", {
 							className: "text-xl flex-shrink-0",

package/dist/chrome/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/chrome/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAE5C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAgFpC,CAAC"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/chrome/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAE5C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA8EpC,CAAC"}

package/dist/chrome/NavLink.js

@@ -2,12 +2,11 @@ import { cn as e } from "../shared-utils.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/chrome/NavLink.tsx
 var i = ({ label: i, icon: a, badge: o, isActive: s = !1, disabled: c = !1, onClick: l, href: u, variant: d = "default", className: f, ariaLabel: p }) => {
-	let m = e("flex items-center gap-icon-gap transition-colors rounded-button", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", {
-		"px-card-padding py-control-gap text-body-sm": d === "default",
+	let m = e("flex items-center gap-3 rounded-button transition-all duration-200 ease-[var(--motion-easing-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", {
+		"px-3 py-2 text-sm": d === "default" || d === "sidebar",
 		"px-2 py-1 text-body-sm": d === "compact",
-		"px-card-padding py-2 text-body-md": d === "sidebar",
-		"bg-action-primary-bg text-action-primary-text font-medium": s && !c,
-		"text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover": !s && !c,
+		"bg-[var(--color-accent-soft)] text-text-primary font-medium": s && !c,
+		"text-text-secondary hover:text-text-primary hover:bg-bg-sunken": !s && !c,
 		"text-text-disabled cursor-not-allowed opacity-50": c
 	}, f), h = /* @__PURE__ */ r(t, { children: [
 		a && /* @__PURE__ */ n("span", {
@@ -19,7 +18,7 @@ var i = ({ label: i, icon: a, badge: o, isActive: s = !1, disabled: c = !1, onCl
 			children: i
 		}),
 		o !== void 0 && /* @__PURE__ */ n("span", {
-			className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium", s ? "bg-action-primary-text text-action-primary-bg" : "bg-status-info-bg text-status-info-text"),
+			className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium tabular-nums", s ? "bg-action-primary-bg text-action-primary-text" : "bg-status-info-bg-subtle text-status-info-text"),
 			children: typeof o == "number" && o > 99 ? "99+" : o
 		})
 	] });

package/dist/chrome/PageHeader.js

@@ -19,7 +19,7 @@ function a({ title: a, description: o, actions: s, breadcrumb: c, icon: l, toolb
 						return /* @__PURE__ */ r("li", {
 							className: "flex items-center gap-1.5",
 							children: [a > 0 ? /* @__PURE__ */ n(t, {
-								className: "size-3 text-text-tertiary",
+								className: "size-3 text-text-muted",
 								"aria-hidden": "true"
 							}) : null, e.to && !o ? /* @__PURE__ */ n(i, {
 								to: e.to,
@@ -43,10 +43,10 @@ function a({ title: a, description: o, actions: s, breadcrumb: c, icon: l, toolb
 					}) : null, /* @__PURE__ */ r("div", {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ n("h1", {
-							className: "text-2xl font-semibold text-text-primary break-words sm:text-3xl",
+							className: "text-2xl font-semibold tracking-tight text-text-primary break-words md:text-3xl",
 							children: a
 						}), o ? /* @__PURE__ */ n("p", {
-							className: "mt-1 text-sm text-text-secondary sm:text-base",
+							className: "mt-1.5 text-sm text-text-secondary",
 							children: o
 						}) : null]
 					})]

package/dist/chrome/PanelTabs.js

@@ -2,14 +2,14 @@ import { Maximize2 as e, Minimize2 as t, Minus as n, X as r } from "lucide-react
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/chrome/PanelTabs.tsx
 var o = ({ tabs: o, activeTabId: s, onTabClick: c, onClose: l, onMinimize: u, onMaximize: d, isMaximized: f }) => /* @__PURE__ */ a("div", {
-	className: "flex items-center justify-between border-b border-border-default bg-bg-surface-secondary h-9 px-2 flex-shrink-0",
+	className: "flex items-center justify-between border-b border-border-subtle bg-bg-sunken h-9 px-2 flex-shrink-0",
 	children: [/* @__PURE__ */ i("div", {
 		className: "flex items-center gap-0.5 overflow-x-auto",
 		children: o.map((e) => {
 			let t = e.icon;
 			return /* @__PURE__ */ a("button", {
 				onClick: () => c(e.id),
-				className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${e.id === s ? "bg-bg-surface text-text-primary border-b-2 border-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface-hover"}`,
+				className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${e.id === s ? "bg-bg-surface text-text-primary border-b-2 border-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
 				children: [t && /* @__PURE__ */ i(t, { className: "size-3.5" }), /* @__PURE__ */ i("span", { children: e.title })]
 			}, e.id);
 		})
@@ -19,21 +19,21 @@ var o = ({ tabs: o, activeTabId: s, onTabClick: c, onClose: l, onMinimize: u, on
 			u && /* @__PURE__ */ i("button", {
 				type: "button",
 				onClick: u,
-				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
+				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
 				"aria-label": "Minimize panel",
 				children: /* @__PURE__ */ i(n, { className: "size-3.5" })
 			}),
 			d && /* @__PURE__ */ i("button", {
 				type: "button",
 				onClick: d,
-				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
+				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
 				"aria-label": f ? "Restore panel" : "Maximize panel",
 				children: i(f ? t : e, { className: "size-3.5" })
 			}),
 			/* @__PURE__ */ i("button", {
 				type: "button",
 				onClick: l,
-				className: "p-1 rounded text-text-tertiary hover:text-text-primary hover:bg-bg-surface-hover transition-colors",
+				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
 				"aria-label": "Close panel",
 				children: /* @__PURE__ */ i(r, { className: "size-3.5" })
 			})

package/dist/chrome/PluginContextMenuTarget.js

@@ -35,7 +35,7 @@ var o = ({ targetId: o, children: s, className: c }) => {
 		},
 		"data-ui-plugin-context-target": o,
 		children: [s, u.open && f.length > 0 ? /* @__PURE__ */ i("div", {
-			className: "fixed z-[220] min-w-[14rem] overflow-hidden rounded-card border border-border-subtle bg-bg-elevated shadow-xl",
+			className: "fixed z-[220] min-w-[14rem] overflow-hidden rounded-card border border-border-subtle bg-bg-elevated shadow-[var(--shadow-elevation-4)] p-1",
 			style: {
 				left: u.x,
 				top: u.y
@@ -46,7 +46,7 @@ var o = ({ targetId: o, children: s, className: c }) => {
 				let t = e.icon;
 				return /* @__PURE__ */ a("button", {
 					type: "button",
-					className: "flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm text-text-primary transition-colors hover:bg-bg-surface-hover disabled:cursor-not-allowed disabled:text-text-tertiary",
+					className: "flex w-full items-center justify-between gap-3 rounded-button px-3 py-2 text-left text-sm text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:text-text-muted",
 					disabled: e.disabled,
 					onClick: () => {
 						e.execute(), d((e) => ({

package/dist/chrome/PluginFooterStrip.js

@@ -12,7 +12,7 @@ var a = () => {
 		};
 	}, [a]);
 	return o.left.length === 0 && o.center.length === 0 && o.right.length === 0 ? null : /* @__PURE__ */ r("div", {
-		className: "border-t border-border-subtle bg-bg-surface-secondary px-4 py-3 text-xs text-text-secondary",
+		className: "border-t border-border-subtle bg-bg-surface px-4 py-3 text-xs text-text-secondary",
 		children: /* @__PURE__ */ r("div", {
 			className: "mx-auto flex max-w-7xl flex-col gap-2 lg:flex-row lg:items-center lg:justify-between",
 			"data-ui-plugin-footer": "true",
@@ -36,7 +36,7 @@ var a = () => {
 						] });
 						return e.onClick ? /* @__PURE__ */ r("button", {
 							type: "button",
-							className: "inline-flex items-center gap-2 rounded-button px-2 py-1 text-text-primary transition-colors hover:bg-bg-surface-hover",
+							className: "inline-flex items-center gap-2 rounded-button px-2 py-1 text-text-primary transition-colors hover:bg-bg-sunken",
 							onClick: e.onClick,
 							"data-ui-plugin-footer-item": e.id,
 							children: t