@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcCircularProgress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,114 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+//#region src/lib/components/AcCircularProgress.vue?vue&type=script&setup=true&lang.ts
+var d = [
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-busy"
+], f = ["viewBox"], p = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width"
+], m = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width",
+	"stroke-dashoffset"
+], h = /*@__PURE__*/ a({
+	__name: "AcCircularProgress",
+	props: {
+		value: { default: 0 },
+		max: { default: 100 },
+		size: { default: "normal" },
+		strokeWidth: { default: void 0 },
+		showLabel: {
+			type: Boolean,
+			default: !0
+		},
+		valueText: { default: "" },
+		color: { default: "progress" },
+		label: { default: "" },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(a) {
+		let h = a, g = {
+			small: {
+				px: 32,
+				stroke: 3,
+				box: "size-8",
+				text: "text-[9px]"
+			},
+			normal: {
+				px: 44,
+				stroke: 4,
+				box: "size-11",
+				text: "text-xm"
+			},
+			large: {
+				px: 80,
+				stroke: 6,
+				box: "size-20",
+				text: "text-xl"
+			}
+		}, _ = {
+			primary: "text-primary",
+			info: "text-info",
+			success: "text-success",
+			warning: "text-warning",
+			danger: "text-danger"
+		}, v = e(() => typeof h.size == "number" ? null : g[h.size]), y = e(() => v.value?.px ?? Math.max(16, h.size)), b = e(() => h.strokeWidth ?? v.value?.stroke ?? Math.max(2, Math.round(y.value / 11))), x = e(() => (y.value - b.value) / 2), S = e(() => v.value ? void 0 : {
+			width: `${y.value}px`,
+			height: `${y.value}px`
+		}), C = e(() => v.value ? void 0 : { fontSize: `${Math.min(24, Math.max(9, Math.round(y.value * .23)))}px` }), w = e(() => h.max <= 0 ? 0 : Math.min(100, Math.max(0, h.value / h.max * 100))), T = e(() => h.color === "progress" ? D() : h.color === "auto" ? w.value >= 95 ? "danger" : w.value >= 80 ? "warning" : "primary" : h.color), E = e(() => h.valueText || `${Math.round(w.value)}%`);
+		function D() {
+			return h.indeterminate ? "primary" : w.value >= 100 ? "success" : w.value >= 60 ? "info" : w.value >= 30 ? "warning" : "danger";
+		}
+		return (e, h) => (c(), n("div", {
+			role: "progressbar",
+			"aria-label": a.label || "Progress",
+			"aria-valuemin": "0",
+			"aria-valuemax": a.indeterminate ? void 0 : a.max,
+			"aria-valuenow": a.indeterminate ? void 0 : Math.min(a.max, Math.max(0, a.value)),
+			"aria-valuetext": a.indeterminate ? void 0 : E.value,
+			"aria-busy": a.indeterminate || void 0,
+			class: o(["relative inline-flex shrink-0 items-center justify-center", v.value?.box]),
+			style: s(S.value),
+			"data-ac-ds": "",
+			"data-testid": "ac-circular-progress"
+		}, [(c(), n("svg", {
+			class: o(["size-full -rotate-90", [_[T.value], a.indeterminate && "animate-spin motion-reduce:animate-none"]]),
+			viewBox: `0 0 ${y.value} ${y.value}`,
+			fill: "none",
+			"aria-hidden": "true"
+		}, [r("circle", {
+			cx: y.value / 2,
+			cy: y.value / 2,
+			r: x.value,
+			class: "stroke-border",
+			"stroke-width": b.value
+		}, null, 8, p), r("circle", {
+			cx: y.value / 2,
+			cy: y.value / 2,
+			r: x.value,
+			class: o(["stroke-current transition-[stroke-dashoffset,color,opacity] duration-[800ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none", !a.indeterminate && w.value === 0 && "opacity-0"]),
+			"stroke-width": b.value + .5,
+			"stroke-linecap": "round",
+			pathLength: "100",
+			"stroke-dasharray": "100",
+			"stroke-dashoffset": a.indeterminate ? 75 : 100 - w.value
+		}, null, 10, m)], 10, f)), e.$slots.default || a.showLabel && !a.indeterminate ? (c(), n("span", {
+			key: 0,
+			class: o(["pointer-events-none absolute inset-0 flex items-center justify-center leading-none font-bold tracking-[-0.03em] text-heading tabular-nums select-none", v.value?.text]),
+			style: s(C.value),
+			"aria-hidden": "true"
+		}, [l(e.$slots, "default", {}, () => [i(u(E.value), 1)])], 6)) : t("", !0)], 14, d));
+	}
+});
+//#endregion
+export { h as default };

package/dist/lib/components/AcClusterSwitcher.vue_vue_type_script_setup_true_lang.js

@@ -1,47 +1,48 @@
-import e from "./AcSkeleton.js";
-import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, inject as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as ee, onBeforeUnmount as te, openBlock as g, ref as _, renderList as ne, renderSlot as v, resolveDynamicComponent as re, toDisplayString as y, unref as b, useId as ie, useModel as ae, vModelText as oe, watch as se, withCtx as ce, withDirectives as le, withModifiers as ue } from "vue";
-import { Check as de, ChevronsUpDown as fe, Cloud as pe, Plus as me, Search as he } from "@lucide/vue";
+import { statusMeta as e } from "./status.js";
+import t from "./AcSkeleton.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as ee, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as te, onBeforeUnmount as ne, openBlock as g, ref as _, renderList as re, renderSlot as v, resolveDynamicComponent as ie, toDisplayString as y, unref as b, useId as ae, useModel as oe, vModelText as se, watch as ce, withCtx as le, withDirectives as ue, withModifiers as de } from "vue";
+import { Check as fe, ChevronsUpDown as pe, Cloud as me, Plus as he, Search as ge } from "@lucide/vue";
 //#region src/lib/components/AcClusterSwitcher.vue?vue&type=script&setup=true&lang.ts
-var ge = [
+var _e = [
 	"id",
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"title",
 	"disabled"
-], _e = {
-	class: "relative inline-flex size-7 shrink-0 items-center justify-center rounded-6 bg-surface ring-1 ring-border-light ring-inset",
+], ve = {
+	class: "relative inline-flex size-7 shrink-0 items-center justify-center rounded-8 bg-surface ring-1 ring-border ring-inset",
 	"aria-hidden": "true"
-}, ve = ["src"], ye = { class: "min-w-0 flex-1" }, be = {
+}, ye = ["src"], be = { class: "min-w-0 flex-1" }, xe = {
 	key: 0,
 	class: "block truncate text-sm text-muted"
-}, xe = {
+}, Se = {
 	key: 0,
-	class: "border-b border-border-light p-1.5"
-}, Se = { class: "relative" }, Ce = [
+	class: "border-b border-border p-2"
+}, Ce = { class: "relative" }, we = [
 	"aria-activedescendant",
 	"aria-label",
 	"placeholder"
-], we = ["tabindex", "aria-activedescendant"], Te = [
+], Te = ["tabindex", "aria-activedescendant"], Ee = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMouseenter",
 	"onClick"
-], Ee = {
-	class: "inline-flex size-7 shrink-0 items-center justify-center rounded-6 bg-surface ring-1 ring-border ring-inset",
+], De = {
+	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-8 bg-surface ring-1 ring-border ring-inset",
 	"aria-hidden": "true"
-}, De = ["src", "onError"], Oe = { class: "min-w-0 flex-1" }, ke = { class: "flex min-w-0 items-center gap-1.5 text-xs text-muted" }, Ae = {
+}, Oe = ["src", "onError"], ke = { class: "min-w-0 flex-1" }, Ae = { class: "block truncate text-base leading-5 font-medium text-heading" }, je = { class: "flex min-w-0 items-center gap-1.5 text-xs text-muted" }, Me = {
 	key: 1,
 	"aria-hidden": "true"
-}, je = { class: "truncate" }, Me = {
+}, Ne = { class: "truncate" }, Pe = {
 	key: 0,
 	role: "presentation",
 	class: "px-3 py-6 text-center text-base text-muted"
-}, Ne = {
+}, Fe = {
 	key: 1,
-	class: "border-t border-border-light p-1"
-}, x = /*@__PURE__*/ d({
+	class: "border-t border-border p-2"
+}, x = /*@__PURE__*/ f({
 	__name: "AcClusterSwitcher",
 	props: /*@__PURE__*/ p({
 		clusterOptions: { default: () => [] },
@@ -76,48 +77,26 @@ var ge = [
 		openModifiers: {}
 	}),
 	emits: /*@__PURE__*/ p(["select", "import"], ["update:modelValue", "update:open"]),
-	setup(d, { expose: p, emit: x }) {
-		let S = d, C = ae(d, "modelValue"), w = ae(d, "open"), T = x, Pe = {
-			success: [
-				"active",
-				"ready",
-				"connected",
-				"running",
-				"healthy",
-				"true"
-			],
-			danger: [
-				"notready",
-				"lost",
-				"notconnected",
-				"disconnected",
-				"error",
-				"failed",
-				"critical",
-				"unhealthy",
-				"false"
-			],
-			warning: [
-				"pending",
-				"connecting",
-				"provisioning",
-				"importing",
-				"registered",
-				"updating",
-				"deleting",
-				"unknown"
-			]
+	setup(f, { expose: p, emit: x }) {
+		let S = f, C = oe(f, "modelValue"), w = oe(f, "open"), T = x, Ie = {
+			registered: "warning",
+			unknown: "warning",
+			notconnected: "danger"
 		}, E = {
 			success: "bg-success",
 			danger: "bg-danger",
+			info: "bg-info",
 			warning: "bg-warning",
-			neutral: "bg-slate-60"
-		}, Fe = {
-			success: "text-green-30",
-			danger: "text-red-30",
-			warning: "text-yellow-30",
+			pending: "bg-pending",
+			neutral: "bg-muted"
+		}, Le = {
+			success: "text-success-strong",
+			danger: "text-danger-strong",
+			info: "text-info-strong",
+			warning: "text-warning-strong",
+			pending: "text-pending-strong",
 			neutral: "text-muted"
-		}, D = f("ac-sidebar", null), O = ie(), k = `${O}-panel`, A = `${O}-list`, j = _(null), M = _(null), Ie = _(null), N = _(null), P = _(""), F = _(-1), I = _(/* @__PURE__ */ new Set()), L = _({}), R = _(!0), z = i(() => S.sidebarCollapsed ?? D?.rail.value ?? !1), B = i(() => D?.dark.value ?? !1), V = i(() => C.value ? S.clusterOptions.find((e) => e.name === C.value) ?? { name: C.value } : null), H = i(() => {
+		}, D = ee("ac-sidebar", null), O = ae(), k = `${O}-panel`, A = `${O}-list`, j = _(null), M = _(null), Re = _(null), N = _(null), P = _(""), F = _(-1), I = _(/* @__PURE__ */ new Set()), L = _({}), R = _(!0), z = a(() => S.sidebarCollapsed ?? D?.rail.value ?? !1), B = a(() => D?.dark.value ?? !1), V = a(() => C.value ? S.clusterOptions.find((e) => e.name === C.value) ?? { name: C.value } : null), H = a(() => {
 			let e = P.value.trim().toLowerCase();
 			return e ? S.clusterOptions.filter((t) => [
 				t.name,
@@ -125,27 +104,23 @@ var ge = [
 				t.provider,
 				t.location
 			].some((t) => t?.toLowerCase().includes(e))) : S.clusterOptions;
-		}), Le = i(() => V.value ? `Cluster: ${U(V.value)}${V.value.status ? `, ${V.value.status}` : ""}. Switch cluster` : "Select a cluster");
+		}), ze = a(() => V.value ? `Cluster: ${U(V.value)}${V.value.status ? `, ${V.value.status}` : ""}. Switch cluster` : "Select a cluster");
 		function U(e) {
 			return e.displayName || e.name;
 		}
 		function W(e) {
 			return !!(e.disabled || e.$isDisabled);
 		}
-		function G(e) {
-			let t = (e ?? "").toLowerCase().replace(/[^a-z]/g, "");
-			if (!t) return "neutral";
-			for (let e of [
-				"success",
-				"danger",
-				"warning"
-			]) if (Pe[e].includes(t)) return e;
-			return "neutral";
+		function G(t) {
+			let n = (t ?? "").toLowerCase().replace(/[^a-z]/g, "");
+			if (!n) return "neutral";
+			let r = Ie[n] ?? e(t).tone;
+			return r === "default" ? "neutral" : r;
 		}
 		function K(e) {
 			return !S.providerIconBase || !e || I.value.has(e) ? "" : `${S.providerIconBase}/${e}.png`;
 		}
-		function Re(e) {
+		function Be(e) {
 			e && (I.value = new Set(I.value).add(e));
 		}
 		function q(e) {
@@ -156,7 +131,7 @@ var ge = [
 			for (let r = e; r >= 0 && r < n.length; r += t) if (!W(n[r])) return r;
 			return -1;
 		}
-		function ze(e) {
+		function Ve(e) {
 			let t = H.value;
 			if (!t.length) return;
 			let n = F.value;
@@ -190,79 +165,79 @@ var ge = [
 				maxHeight: `${Math.max(o ? a : i, 200)}px`
 			};
 		}
-		function Z() {
+		function He() {
 			S.disabled || S.loading || (w.value = !0);
 		}
-		function Q(e = !0) {
+		function Z(e = !0) {
 			w.value && (w.value = !1, e && j.value?.focus());
 		}
-		function Be(e) {
-			W(e) || (C.value = e.name, T("select", e), Q());
+		function Ue(e) {
+			W(e) || (C.value = e.name, T("select", e), Z());
 		}
-		function Ve() {
-			T("import"), Q(!1);
+		function We() {
+			T("import"), Z(!1);
 		}
-		function He(e) {
-			!w.value && ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), Z());
+		function Ge(e) {
+			!w.value && ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), He());
 		}
-		function Ue(e) {
-			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), ze(e.key === "ArrowDown" ? 1 : -1);
+		function Q(e) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), Ve(e.key === "ArrowDown" ? 1 : -1);
 			else if ((e.key === "Home" || e.key === "End") && !S.searchable) e.preventDefault(), F.value = e.key === "Home" ? J() : J(H.value.length - 1, -1), Y();
 			else if (e.key === "Enter" || e.key === " " && !S.searchable) {
 				e.preventDefault();
 				let t = H.value[F.value];
-				t && Be(t);
+				t && Ue(t);
 			}
 		}
-		function We(e) {
-			e.key === "Escape" ? (e.preventDefault(), Q()) : e.key === "Tab" && Ge(e);
+		function Ke(e) {
+			e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && qe(e);
 		}
-		function Ge(e) {
+		function qe(e) {
 			let t = [...M.value?.querySelectorAll("input, a[href], button:not([disabled]), [tabindex=\"0\"]") ?? []], n = t[0], r = t[t.length - 1];
-			e.shiftKey && document.activeElement === n ? (e.preventDefault(), Q()) : !e.shiftKey && document.activeElement === r && Q();
+			e.shiftKey && document.activeElement === n ? (e.preventDefault(), Z()) : !e.shiftKey && document.activeElement === r && Z();
 		}
-		function Ke(e) {
+		function Je(e) {
 			let t = e.target;
-			j.value?.contains(t) || M.value?.contains(t) || Q(!1);
+			j.value?.contains(t) || M.value?.contains(t) || Z(!1);
 		}
-		function qe(e) {
-			e && M.value?.contains(e.target) || X();
+		function Ye(e) {
+			e?.target instanceof Node && M.value?.contains(e.target) || X();
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", Ke, !0), window[t]("scroll", qe, !0), window[t]("resize", qe);
+			document[t]("pointerdown", Je, !0), window[t]("scroll", Ye, !0), window[t]("resize", Ye);
 		}
-		return se(w, async (e) => {
+		return ce(w, async (e) => {
 			if ($(e), !e) return;
 			P.value = "";
 			let t = H.value.findIndex((e) => e.name === C.value);
-			F.value = t >= 0 ? t : J(), await m(), X(), (S.searchable ? Ie.value : N.value)?.focus(), Y();
-		}), se(P, () => {
+			F.value = t >= 0 ? t : J(), await m(), X(), (S.searchable ? Re.value : N.value)?.focus(), Y();
+		}), ce(P, () => {
 			F.value = J(), m(X);
-		}), te(() => $(!1)), p({ focus: () => j.value?.focus() }), (i, f) => (g(), s("div", {
+		}), ne(() => $(!1)), p({ focus: () => j.value?.focus() }), (e, a) => (g(), c("div", {
 			class: h(["min-w-0", z.value ? "inline-flex" : "flex w-full"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cluster-switcher"
-		}, [d.loading ? (g(), s("div", {
+		}, [f.loading ? (g(), c("div", {
 			key: 0,
 			role: "status",
 			"aria-label": "Loading clusters",
-			class: h(["flex h-10 items-center rounded-8 border", [z.value ? "size-10 justify-center" : "w-full gap-2.5 px-2", B.value ? "border-white/10" : "border-border"]]),
+			class: h(["flex h-10 items-center rounded-10 border", [z.value ? "size-10 justify-center" : "w-full gap-2.5 px-2", B.value ? "border-white/10" : "border-border"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cluster-switcher-loading"
-		}, [u(e, {
+		}, [d(t, {
 			shape: "rect",
 			width: "28px",
 			height: "28px",
 			label: "",
 			class: "shrink-0"
-		}), z.value ? o("", !0) : (g(), a(e, {
+		}), z.value ? s("", !0) : (g(), o(t, {
 			key: 0,
 			shape: "text",
 			width: "60%",
 			height: "10px",
 			label: ""
-		}))], 2)) : (g(), s("button", {
+		}))], 2)) : (g(), c("button", {
 			key: 1,
 			id: `${b(O)}-trigger`,
 			ref_key: "trigger",
@@ -271,143 +246,143 @@ var ge = [
 			"aria-haspopup": "dialog",
 			"aria-expanded": w.value,
 			"aria-controls": w.value ? k : void 0,
-			"aria-label": Le.value,
+			"aria-label": ze.value,
 			title: z.value && V.value ? U(V.value) : void 0,
-			disabled: d.disabled,
-			class: h(["group relative flex h-10 min-w-0 cursor-pointer items-center rounded-8 border text-left transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60", [
-				z.value ? "size-10 justify-center" : "w-full gap-2.5 pr-2 pl-2",
-				B.value ? "border-white/10 bg-white/4 enabled:hover:bg-white/8" : "border-border bg-surface shadow-xs enabled:hover:border-border-dark",
-				w.value && (B.value ? "bg-white/8" : "border-border-dark")
+			disabled: f.disabled,
+			class: h(["group relative flex h-10 min-w-0 cursor-pointer items-center rounded-10 border text-left transition-[color,background-color,border-color,box-shadow] duration-200 disabled:cursor-not-allowed disabled:opacity-50", [
+				z.value ? "size-10 justify-center" : "w-full gap-2.5 pr-2.5 pl-1.5",
+				B.value ? "border-white/10 bg-white/4 enabled:hover:bg-white/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "border-border bg-background enabled:hover:border-accent-active focus-visible:focus-ring",
+				w.value && (B.value ? "bg-white/8" : "focus-ring")
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cluster-switcher-trigger",
-			onClick: f[1] ||= (e) => w.value ? Q() : Z(),
-			onKeydown: He
-		}, [c("span", _e, [K(V.value?.provider) ? (g(), s("img", {
+			onClick: a[1] ||= (e) => w.value ? Z() : He(),
+			onKeydown: Ge
+		}, [l("span", ve, [K(V.value?.provider) ? (g(), c("img", {
 			key: 0,
 			src: K(V.value?.provider),
 			alt: "",
 			class: "size-5 object-contain",
-			onError: f[0] ||= (e) => Re(V.value?.provider)
-		}, null, 40, ve)) : (g(), a(b(pe), {
+			onError: a[0] ||= (e) => Be(V.value?.provider)
+		}, null, 40, ye)) : (g(), o(b(me), {
 			key: 1,
 			class: "size-4 text-muted"
-		})), V.value ? (g(), s("span", {
+		})), V.value ? (g(), c("span", {
 			key: 2,
 			class: h(["absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2", [E[G(V.value.status)], B.value ? "ring-sidebar" : "ring-surface"]])
-		}, null, 2)) : o("", !0)]), z.value ? o("", !0) : (g(), s(t, { key: 0 }, [c("span", ye, [c("span", { class: h(["block truncate text-base leading-5 font-medium", V.value ? "text-heading" : "text-muted"]) }, y(V.value ? U(V.value) : d.placeholder), 3), V.value?.location ? (g(), s("span", be, y(V.value.location), 1)) : o("", !0)]), u(b(fe), {
+		}, null, 2)) : s("", !0)]), z.value ? s("", !0) : (g(), c(n, { key: 0 }, [l("span", be, [l("span", { class: h(["block truncate text-base leading-5 font-medium", V.value ? "text-heading" : "text-muted"]) }, y(V.value ? U(V.value) : f.placeholder), 3), V.value?.location ? (g(), c("span", xe, y(V.value.location), 1)) : s("", !0)]), d(b(pe), {
 			class: "size-4 shrink-0 text-muted transition-colors group-hover:text-heading",
 			"aria-hidden": "true"
-		})], 64))], 42, ge)), (g(), a(n, { to: "body" }, [u(r, {
+		})], 64))], 42, _e)), (g(), o(r, { to: "body" }, [d(i, {
 			"enter-active-class": "transition duration-150 ease-out",
 			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${z.value ? "motion-safe:-translate-x-1" : R.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: ce(() => [w.value ? (g(), s("div", {
+			default: le(() => [w.value ? (g(), c("div", {
 				key: 0,
 				id: k,
 				ref_key: "panel",
 				ref: M,
 				role: "dialog",
 				"aria-label": "Switch cluster",
-				class: h(["fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface shadow-lg", z.value ? "origin-left" : R.value ? "origin-top" : "origin-bottom"]),
-				style: ee(L.value),
+				class: h(["fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border bg-surface shadow-lg", z.value ? "origin-left" : R.value ? "origin-top" : "origin-bottom"]),
+				style: te(L.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-cluster-switcher-panel",
-				onKeydown: We
+				onKeydown: Ke
 			}, [
-				d.searchable ? (g(), s("div", xe, [c("div", Se, [u(b(he), {
-					class: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted",
+				f.searchable ? (g(), c("div", Se, [l("div", Ce, [d(b(ge), {
+					class: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted",
 					"aria-hidden": "true"
-				}), le(c("input", {
+				}), ue(l("input", {
 					ref_key: "searchInput",
-					ref: Ie,
-					"onUpdate:modelValue": f[2] ||= (e) => P.value = e,
+					ref: Re,
+					"onUpdate:modelValue": a[2] ||= (e) => P.value = e,
 					type: "text",
 					role: "combobox",
 					"aria-autocomplete": "list",
 					"aria-expanded": "true",
 					"aria-controls": A,
 					"aria-activedescendant": F.value >= 0 ? q(F.value) : void 0,
-					"aria-label": d.searchPlaceholder,
-					placeholder: d.searchPlaceholder,
+					"aria-label": f.searchPlaceholder,
+					placeholder: f.searchPlaceholder,
 					autocomplete: "off",
 					spellcheck: "false",
-					class: "h-8 w-full rounded-6 bg-surface-muted pr-2 pl-8 text-base text-heading outline-none placeholder:text-muted focus:bg-surface focus:ring-1 focus:ring-border",
+					class: "h-9 w-full rounded-10 border border-border bg-background pr-3 pl-9 text-base text-heading outline-none transition-[border-color,box-shadow] duration-200 placeholder:text-muted/80 hover:border-accent-active focus:focus-ring",
 					"data-ac-ds": "",
 					"data-testid": "ac-cluster-switcher-search",
-					onKeydown: Ue
-				}, null, 40, Ce), [[oe, P.value]])])])) : o("", !0),
-				c("ul", {
+					onKeydown: Q
+				}, null, 40, we), [[se, P.value]])])])) : s("", !0),
+				l("ul", {
 					id: A,
 					ref_key: "listEl",
 					ref: N,
 					role: "listbox",
 					"aria-label": "Clusters",
-					tabindex: d.searchable ? -1 : 0,
-					"aria-activedescendant": !d.searchable && F.value >= 0 ? q(F.value) : void 0,
-					class: "ac-scrollbar max-h-72 min-h-0 flex-1 p-1 outline-none",
-					onKeydown: Ue
-				}, [(g(!0), s(t, null, ne(H.value, (e, t) => (g(), s("li", {
-					id: q(t),
-					key: e.name,
+					tabindex: f.searchable ? -1 : 0,
+					"aria-activedescendant": !f.searchable && F.value >= 0 ? q(F.value) : void 0,
+					class: "ac-scrollbar max-h-72 min-h-0 flex-1 p-2 outline-none",
+					onKeydown: Q
+				}, [(g(!0), c(n, null, re(H.value, (t, n) => (g(), c("li", {
+					id: q(n),
+					key: t.name,
 					role: "option",
-					"aria-selected": e.name === C.value,
-					"aria-disabled": W(e) || void 0,
-					class: h(["flex items-center gap-2.5 rounded-6 px-2 py-1.5 transition-colors duration-75", [W(e) ? "cursor-not-allowed opacity-50" : "cursor-pointer", t === F.value && "bg-surface-muted"]]),
+					"aria-selected": t.name === C.value,
+					"aria-disabled": W(t) || void 0,
+					class: h(["flex items-center gap-2.5 rounded-8 px-2.5 py-2 transition-colors duration-75", [W(t) ? "cursor-not-allowed opacity-50" : "cursor-pointer", n === F.value ? "bg-accent-hover" : t.name === C.value && "bg-accent"]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-cluster-switcher-option",
-					onMouseenter: (n) => !W(e) && (F.value = t),
-					onMousedown: f[3] ||= ue(() => {}, ["prevent"]),
-					onClick: (t) => Be(e)
-				}, [v(i.$slots, "option", {
-					cluster: e,
-					selected: e.name === C.value,
-					active: t === F.value
+					onMouseenter: (e) => !W(t) && (F.value = n),
+					onMousedown: a[3] ||= de(() => {}, ["prevent"]),
+					onClick: (e) => Ue(t)
+				}, [v(e.$slots, "option", {
+					cluster: t,
+					selected: t.name === C.value,
+					active: n === F.value
 				}, () => [
-					c("span", Ee, [K(e.provider) ? (g(), s("img", {
+					l("span", De, [K(t.provider) ? (g(), c("img", {
 						key: 0,
-						src: K(e.provider),
+						src: K(t.provider),
 						alt: "",
 						class: "size-5 object-contain",
-						onError: (t) => Re(e.provider)
-					}, null, 40, De)) : (g(), a(b(pe), {
+						onError: (e) => Be(t.provider)
+					}, null, 40, Oe)) : (g(), o(b(me), {
 						key: 1,
 						class: "size-4 text-muted"
 					}))]),
-					c("span", Oe, [c("span", { class: h(["block truncate text-base leading-5 text-heading", e.name === C.value && "font-medium"]) }, y(U(e)), 3), c("span", ke, [
-						e.status ? (g(), s("span", {
+					l("span", ke, [l("span", Ae, y(U(t)), 1), l("span", je, [
+						t.status ? (g(), c("span", {
 							key: 0,
-							class: h(["inline-flex shrink-0 items-center gap-1", Fe[G(e.status)]])
-						}, [c("span", {
-							class: h(["size-1.5 rounded-full", E[G(e.status)]]),
+							class: h(["inline-flex shrink-0 items-center gap-1", Le[G(t.status)]])
+						}, [l("span", {
+							class: h(["size-1.5 rounded-full", E[G(t.status)]]),
 							"aria-hidden": "true"
-						}, null, 2), l(" " + y(e.status), 1)], 2)) : o("", !0),
-						e.status && (e.location || e.provider) ? (g(), s("span", Ae, "·")) : o("", !0),
-						c("span", je, y([e.provider, e.location].filter(Boolean).join(" · ")), 1)
+						}, null, 2), u(" " + y(t.status), 1)], 2)) : s("", !0),
+						t.status && (t.location || t.provider) ? (g(), c("span", Me, "·")) : s("", !0),
+						l("span", Ne, y([t.provider, t.location].filter(Boolean).join(" · ")), 1)
 					])]),
-					e.name === C.value ? (g(), a(b(de), {
+					t.name === C.value ? (g(), o(b(fe), {
 						key: 0,
-						class: "size-4 shrink-0 text-primary",
+						class: "size-4 shrink-0 text-primary-strong",
 						"aria-hidden": "true"
-					})) : o("", !0)
-				])], 42, Te))), 128)), H.value.length ? o("", !0) : (g(), s("li", Me, [v(i.$slots, "empty", { query: P.value }, () => [l(y(P.value ? `No clusters match “${P.value}”` : "No clusters yet"), 1)])]))], 40, we),
-				i.$slots.footer || d.importLabel ? (g(), s("div", Ne, [v(i.$slots, "footer", { close: Q }, () => [(g(), a(re(d.importUrl ? "a" : "button"), {
-					href: d.importUrl || void 0,
-					type: d.importUrl ? void 0 : "button",
-					class: "flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 px-2 text-base text-body no-underline outline-none transition-colors hover:bg-surface-muted hover:text-heading focus-visible:bg-surface-muted focus-visible:text-heading focus-visible:ring-[3px] focus-visible:ring-ring",
+					})) : s("", !0)
+				])], 42, Ee))), 128)), H.value.length ? s("", !0) : (g(), c("li", Pe, [v(e.$slots, "empty", { query: P.value }, () => [u(y(P.value ? `No clusters match “${P.value}”` : "No clusters yet"), 1)])]))], 40, Te),
+				e.$slots.footer || f.importLabel ? (g(), c("div", Fe, [v(e.$slots, "footer", { close: Z }, () => [(g(), o(ie(f.importUrl ? "a" : "button"), {
+					href: f.importUrl || void 0,
+					type: f.importUrl ? void 0 : "button",
+					class: "flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-8 px-3 py-2 text-base font-medium text-heading no-underline outline-none transition-colors duration-150 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
 					"data-ac-ds": "",
 					"data-testid": "ac-cluster-switcher-import",
-					onClick: Ve
+					onClick: We
 				}, {
-					default: ce(() => [u(b(me), {
+					default: le(() => [d(b(he), {
 						class: "size-4 shrink-0 text-muted",
 						"aria-hidden": "true"
-					}), l(" " + y(d.importLabel), 1)]),
+					}), u(" " + y(f.importLabel), 1)]),
 					_: 1
-				}, 8, ["href", "type"]))])])) : o("", !0)
-			], 38)) : o("", !0)]),
+				}, 8, ["href", "type"]))])])) : s("", !0)
+			], 38)) : s("", !0)]),
 			_: 3
 		}, 8, ["enter-from-class"])]))], 2));
 	}