@ac-design/design-system 1.0.2 → 2.0.0

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));
 	}

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

@@ -17,13 +17,13 @@ import { EditorView as S, drawSelection as He, dropCursor as Ue, highlightActive
 //#region src/lib/components/AcCodeEditor.vue?vue&type=script&setup=true&lang.ts
 var qe = {
 	key: 0,
-	class: "flex min-h-11 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border-light px-3 py-2"
+	class: "flex min-h-12 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-surface-muted px-4 py-2"
 }, Je = {
 	key: 0,
 	class: "min-w-0 truncate font-mono text-xs font-medium text-heading"
 }, Ye = {
 	key: 1,
-	class: "rounded-4 bg-surface-sunken px-1.5 text-sm leading-5 font-medium text-muted"
+	class: "rounded-6 border border-border bg-surface px-1.5 text-xs leading-5 font-medium text-muted"
 }, Xe = {
 	key: 2,
 	class: "text-xs text-muted"
@@ -305,7 +305,7 @@ var qe = {
 			focus: St,
 			editor: P
 		}), (t, r) => (m(), l("div", {
-			class: p(["flex min-w-0 flex-col overflow-hidden bg-surface", d.bordered && "rounded-10 border border-border shadow-xs transition-[border-color,box-shadow] has-[.cm-editor.cm-focused]:focus-ring"]),
+			class: p(["flex min-w-0 flex-col overflow-hidden bg-background", d.bordered && "rounded-10 border border-border transition-[border-color,box-shadow] duration-200 has-[.cm-editor.cm-focused]:focus-ring"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-code-editor"
 		}, [
@@ -329,16 +329,16 @@ var qe = {
 					}, {
 						default: pe(() => [u("button", {
 							type: "button",
-							class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+							class: "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 							"aria-label": R.value ? "Copied" : "Copy to clipboard",
 							onClick: wt
 						}, [R.value ? (m(), s(_(he), {
 							key: 0,
-							class: "size-3.5 text-success",
+							class: "size-4 text-success-strong",
 							"aria-hidden": "true"
 						})) : (m(), s(_(_e), {
 							key: 1,
-							class: "size-3.5",
+							class: "size-4",
 							"aria-hidden": "true"
 						}))], 8, Qe)]),
 						_: 1
@@ -361,14 +361,14 @@ var qe = {
 			I.value.length && !V.value ? (m(), l("div", {
 				key: 2,
 				id: _(ut),
-				class: "border-t border-border-light bg-surface-muted"
+				class: "border-t border-border bg-surface-muted"
 			}, [u("p", et, g(I.value.length) + " " + g(I.value.length === 1 ? "problem" : "problems"), 1), u("ul", tt, [(m(!0), l(ee, null, ae(I.value, (e, t) => (m(), l("li", { key: t }, [u("button", {
 				type: "button",
-				class: "flex w-full cursor-pointer items-start gap-2 px-3 py-1 text-left text-xs leading-5 text-body hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:outline-none",
+				class: "flex w-full cursor-pointer items-start gap-2 px-4 py-1 text-left text-xs leading-5 text-body transition-colors duration-200 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
 				onClick: (t) => Ct(e)
 			}, [
 				(m(), s(se(e.severity === "error" ? _(ge) : _(ve)), {
-					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-red-50" : "text-yellow-50"]),
+					class: p(["mt-0.75 size-3.5 shrink-0", e.severity === "error" ? "text-danger" : "text-warning"]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])),
 				u("span", rt, "Ln " + g(e.line) + ", Col " + g(e.column), 1),

package/dist/lib/components/AcColorInput.js

@@ -0,0 +1,5 @@
+import e from "./AcColorInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcColorInput.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/components/AcColorInput.vue.d.ts

@@ -0,0 +1,54 @@
+export interface ColorPreset {
+    /** Hex colour, `#rgb` or `#rrggbb`. */
+    value: string;
+    /** Name read out for the swatch, e.g. "Brand green". Defaults to the hex value. */
+    label?: string;
+}
+export interface Props {
+    /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
+    label?: string;
+    /** Native `name` attribute of the hex field. */
+    name?: string;
+    /** Quick-pick swatches under the field: hex strings or `{ value, label }`. */
+    presets?: (string | ColorPreset)[];
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field, the swatch and the presets. */
+    disabled?: boolean;
+    /** Read-only field: a muted fill, "(read only)" after the label, and no picker. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 40px tall. */
+    size?: "small" | "normal";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** Lowercase `#rrggbb`, or `""` when empty. Typed `#rgb` is expanded on blur. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the hex field. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    name: string;
+    size: "small" | "normal";
+    readonly: boolean;
+    hint: string;
+    errorMsg: string;
+    presets: (string | ColorPreset)[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;