@ac-design/design-system 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,56 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u, useId as d, useModel as f, vModelRadio as p, withDirectives as m } from "vue";
+//#region src/lib/components/AcCheckRadio.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	role: "radiogroup",
+	"data-ac-ds": "",
+	"data-testid": "ac-check-radio"
+}, g = ["for"], _ = [
+	"id",
+	"name",
+	"value",
+	"disabled"
+], v = { class: "flex flex-col" }, y = ["title"], b = {
+	key: 0,
+	class: "mt-2 text-xs text-red-30"
+}, x = /*@__PURE__*/ i({
+	__name: "AcCheckRadio",
+	props: /*@__PURE__*/ a({
+		options: {},
+		name: { default: "radio" },
+		row: {
+			type: Boolean,
+			default: !1
+		},
+		cards: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = f(i, "modelValue"), x = d();
+		return (d, f) => (s(), n("div", h, [r("div", { class: o(i.cards ? "grid gap-3 sm:grid-cols-2" : i.row ? "flex flex-row flex-wrap gap-x-6 gap-y-2" : "flex flex-col gap-2.5") }, [(s(!0), n(e, null, c(i.options, (e, c) => (s(), n("label", {
+			key: e.label,
+			for: `${u(x)}-${c}`,
+			class: o(["group flex cursor-pointer gap-2.5 text-base text-heading", [e.disabled && "cursor-not-allowed opacity-50", i.cards && "rounded-10 border border-border bg-surface p-4 shadow-xs transition-[border-color,box-shadow,background-color] duration-150 hover:border-border-dark has-checked:border-primary has-checked:bg-primary-97/60 has-checked:shadow-[0_0_0_1px_var(--color-primary)] has-focus-visible:shadow-[0_0_0_3px_var(--color-ring)]"]])
+		}, [m(r("input", {
+			id: `${u(x)}-${c}`,
+			"onUpdate:modelValue": f[0] ||= (e) => a.value = e,
+			type: "radio",
+			name: `${i.name}-${u(x)}`,
+			value: e.value,
+			disabled: e.disabled,
+			class: "mt-0.5 size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-border-dark bg-surface shadow-xs transition-[border-color,border-width] duration-150 group-hover:border-slate-60 checked:border-[5px] checked:border-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed"
+		}, null, 8, _), [[p, a.value]]), r("span", v, [r("span", { class: o(i.cards && "font-medium") }, l(e.label), 3), i.cards && e.description ? (s(), n("span", {
+			key: 0,
+			class: "mt-0.5 line-clamp-2 text-xs text-muted",
+			title: e.description
+		}, l(e.description), 9, y)) : t("", !0)])], 10, g))), 128))], 2), i.errorMsg ? (s(), n("p", b, l(i.errorMsg), 1)) : t("", !0)]));
+	}
+});
+//#endregion
+export { x as default };

package/dist/lib/components/AcClusterSwitcher.js

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

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

@@ -0,0 +1,95 @@
+export interface SwitchCluster {
+    /** Cluster name; the `v-model` value. */
+    name: string;
+    /** Name shown in the list. Falls back to `name`. */
+    displayName?: string;
+    /** Cloud provider, e.g. `AWS`, `GKE`, `Akamai`, `Generic`. Picks the provider icon. */
+    provider?: string;
+    /** Region or zone, shown under the name. */
+    location?: string;
+    /** Cluster status such as `Active`, `NotReady`, `Lost` or `NotImported`. Sets the status dot. */
+    status?: string;
+    /** Shows the cluster but blocks choosing it, e.g. while it isn't `Active`. */
+    disabled?: boolean;
+    /** Old vue-multiselect name for `disabled`. Still honoured. */
+    $isDisabled?: boolean;
+}
+export interface Props {
+    /** The clusters to choose from. */
+    clusterOptions?: SwitchCluster[];
+    /** Shows only the provider icon, for the collapsed sidebar rail. Inside `AcSidebar` it follows the rail on its own. */
+    sidebarCollapsed?: boolean;
+    /** Shows a skeleton while the cluster list loads. Old `ClusterSwitcherLoader`. */
+    loading?: boolean;
+    /** Blocks opening the list, e.g. on pages where the cluster can't change. */
+    disabled?: boolean;
+    /** Adds a search box above the list. */
+    searchable?: boolean;
+    /** Placeholder of the search box. */
+    searchPlaceholder?: string;
+    /** Text in the trigger when no cluster is selected. */
+    placeholder?: string;
+    /** Text of the footer action. Pass an empty string to hide it. Emits `import`. */
+    importLabel?: string;
+    /** Makes the footer action a link, e.g. to the import-cluster page. `import` is emitted either way. */
+    importUrl?: string;
+    /** Base URL of the provider PNGs: `${providerIconBase}/${provider}.png`. Pass an empty string (offline installers) to use a generic icon. */
+    providerIconBase?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom row content. */
+    option?: (props: {
+        cluster: SwitchCluster;
+        selected: boolean;
+        active: boolean;
+    }) => unknown;
+    /** Replaces the footer action, e.g. with several links. Receives `close`. */
+    footer?: (props: {
+        close: () => void;
+    }) => unknown;
+    /** Shown when no cluster matches the search, or the list is empty. */
+    empty?: (props: {
+        query: string;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Name of the active cluster. */
+    modelValue?: string;
+    /** Whether the list is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the trigger. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (cluster: SwitchCluster) => any;
+    "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
+    import: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((cluster: SwitchCluster) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onImport?: (() => any) | undefined;
+}>, {
+    disabled: boolean;
+    loading: boolean;
+    placeholder: string;
+    searchable: boolean;
+    clusterOptions: SwitchCluster[];
+    sidebarCollapsed: boolean;
+    searchPlaceholder: string;
+    importLabel: string;
+    importUrl: string;
+    providerIconBase: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,416 @@
+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";
+//#region src/lib/components/AcClusterSwitcher.vue?vue&type=script&setup=true&lang.ts
+var ge = [
+	"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",
+	"aria-hidden": "true"
+}, ve = ["src"], ye = { class: "min-w-0 flex-1" }, be = {
+	key: 0,
+	class: "block truncate text-sm text-muted"
+}, xe = {
+	key: 0,
+	class: "border-b border-border-light p-1.5"
+}, Se = { class: "relative" }, Ce = [
+	"aria-activedescendant",
+	"aria-label",
+	"placeholder"
+], we = ["tabindex", "aria-activedescendant"], Te = [
+	"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",
+	"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 = {
+	key: 1,
+	"aria-hidden": "true"
+}, je = { class: "truncate" }, Me = {
+	key: 0,
+	role: "presentation",
+	class: "px-3 py-6 text-center text-base text-muted"
+}, Ne = {
+	key: 1,
+	class: "border-t border-border-light p-1"
+}, x = /*@__PURE__*/ d({
+	__name: "AcClusterSwitcher",
+	props: /*@__PURE__*/ p({
+		clusterOptions: { default: () => [] },
+		sidebarCollapsed: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		searchable: {
+			type: Boolean,
+			default: !0
+		},
+		searchPlaceholder: { default: "Search clusters" },
+		placeholder: { default: "Select a cluster" },
+		importLabel: { default: "Import cluster" },
+		importUrl: { default: "" },
+		providerIconBase: { default: "https://cdn.appscode.com/images/cloud-provider-icons" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		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"
+			]
+		}, E = {
+			success: "bg-success",
+			danger: "bg-danger",
+			warning: "bg-warning",
+			neutral: "bg-slate-60"
+		}, Fe = {
+			success: "text-green-30",
+			danger: "text-red-30",
+			warning: "text-yellow-30",
+			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(() => {
+			let e = P.value.trim().toLowerCase();
+			return e ? S.clusterOptions.filter((t) => [
+				t.name,
+				t.displayName,
+				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");
+		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 K(e) {
+			return !S.providerIconBase || !e || I.value.has(e) ? "" : `${S.providerIconBase}/${e}.png`;
+		}
+		function Re(e) {
+			e && (I.value = new Set(I.value).add(e));
+		}
+		function q(e) {
+			return `${O}-opt-${e}`;
+		}
+		function J(e = 0, t = 1) {
+			let n = H.value;
+			for (let r = e; r >= 0 && r < n.length; r += t) if (!W(n[r])) return r;
+			return -1;
+		}
+		function ze(e) {
+			let t = H.value;
+			if (!t.length) return;
+			let n = F.value;
+			for (let r = 0; r < t.length && (n = (n + e + t.length) % t.length, W(t[n])); r++);
+			F.value = n, Y();
+		}
+		function Y() {
+			m(() => N.value?.querySelector(`#${CSS.escape(q(F.value))}`)?.scrollIntoView({ block: "nearest" }));
+		}
+		function X() {
+			let e = j.value;
+			if (!e || !M.value) return;
+			let t = e.getBoundingClientRect(), n = Math.min(Math.max(z.value ? 288 : t.width, 288), window.innerWidth - 16);
+			M.value.style.width = `${n}px`;
+			let r = M.value.offsetHeight;
+			if (z.value) {
+				let e = t.top + r <= window.innerHeight - 8;
+				R.value = e, L.value = {
+					...e ? { top: `${t.top}px` } : { bottom: "8px" },
+					left: `${Math.min(t.right + 6, window.innerWidth - n - 8)}px`,
+					width: `${n}px`,
+					maxHeight: `${window.innerHeight - 16}px`
+				};
+				return;
+			}
+			let i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i;
+			R.value = !o, L.value = {
+				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
+				left: `${Math.max(8, Math.min(t.left, window.innerWidth - n - 8))}px`,
+				width: `${n}px`,
+				maxHeight: `${Math.max(o ? a : i, 200)}px`
+			};
+		}
+		function Z() {
+			S.disabled || S.loading || (w.value = !0);
+		}
+		function Q(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 Ve() {
+			T("import"), Q(!1);
+		}
+		function He(e) {
+			!w.value && ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), Z());
+		}
+		function Ue(e) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), ze(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);
+			}
+		}
+		function We(e) {
+			e.key === "Escape" ? (e.preventDefault(), Q()) : e.key === "Tab" && Ge(e);
+		}
+		function Ge(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();
+		}
+		function Ke(e) {
+			let t = e.target;
+			j.value?.contains(t) || M.value?.contains(t) || Q(!1);
+		}
+		function qe(e) {
+			e && 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);
+		}
+		return se(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 = J(), m(X);
+		}), te(() => $(!1)), p({ focus: () => j.value?.focus() }), (i, f) => (g(), s("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", {
+			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"]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-cluster-switcher-loading"
+		}, [u(e, {
+			shape: "rect",
+			width: "28px",
+			height: "28px",
+			label: "",
+			class: "shrink-0"
+		}), z.value ? o("", !0) : (g(), a(e, {
+			key: 0,
+			shape: "text",
+			width: "60%",
+			height: "10px",
+			label: ""
+		}))], 2)) : (g(), s("button", {
+			key: 1,
+			id: `${b(O)}-trigger`,
+			ref_key: "trigger",
+			ref: j,
+			type: "button",
+			"aria-haspopup": "dialog",
+			"aria-expanded": w.value,
+			"aria-controls": w.value ? k : void 0,
+			"aria-label": Le.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")
+			]]),
+			"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", {
+			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), {
+			key: 1,
+			class: "size-4 text-muted"
+		})), V.value ? (g(), s("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), {
+			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, {
+			"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", {
+				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),
+				"data-ac-ds": "",
+				"data-testid": "ac-cluster-switcher-panel",
+				onKeydown: We
+			}, [
+				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",
+					"aria-hidden": "true"
+				}), le(c("input", {
+					ref_key: "searchInput",
+					ref: Ie,
+					"onUpdate:modelValue": f[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,
+					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",
+					"data-ac-ds": "",
+					"data-testid": "ac-cluster-switcher-search",
+					onKeydown: Ue
+				}, null, 40, Ce), [[oe, P.value]])])])) : o("", !0),
+				c("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,
+					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"]]),
+					"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
+				}, () => [
+					c("span", Ee, [K(e.provider) ? (g(), s("img", {
+						key: 0,
+						src: K(e.provider),
+						alt: "",
+						class: "size-5 object-contain",
+						onError: (t) => Re(e.provider)
+					}, null, 40, De)) : (g(), a(b(pe), {
+						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", {
+							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)]]),
+							"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)
+					])]),
+					e.name === C.value ? (g(), a(b(de), {
+						key: 0,
+						class: "size-4 shrink-0 text-primary",
+						"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",
+					"data-ac-ds": "",
+					"data-testid": "ac-cluster-switcher-import",
+					onClick: Ve
+				}, {
+					default: ce(() => [u(b(me), {
+						class: "size-4 shrink-0 text-muted",
+						"aria-hidden": "true"
+					}), l(" " + y(d.importLabel), 1)]),
+					_: 1
+				}, 8, ["href", "type"]))])])) : o("", !0)
+			], 38)) : o("", !0)]),
+			_: 3
+		}, 8, ["enter-from-class"])]))], 2));
+	}
+});
+//#endregion
+export { x as default };

package/dist/lib/components/AcCodeEditor.js

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

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

@@ -0,0 +1,88 @@
+import { EditorView } from "@codemirror/view";
+import type { EditorLanguage, EditorProblem } from "../editor/validate";
+export interface Props {
+    /** `yaml`, `json`, `shell` for install scripts, or `text` for plain text. */
+    language?: EditorLanguage;
+    /** The saved version to compare against. Adds an Edit / Changes switch; with `readonly` only the diff shows. */
+    original?: string;
+    /** Text can be selected, searched and copied but not changed. */
+    readonly?: boolean;
+    /** Any CSS height, e.g. `320px` or `60vh`. `auto` grows with the content up to `max-height`. */
+    height?: string;
+    /** Where an `auto` editor stops growing and scrolls. */
+    maxHeight?: string;
+    /** JSON Schema that YAML or JSON is checked against, e.g. a CRD's `openAPIV3Schema`. */
+    schema?: object;
+    /** Checks YAML and JSON as you type and underlines problems. Turn off for templates that aren't valid until rendered. */
+    validate?: boolean;
+    /** Wraps long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Shows the line-number and fold gutter. */
+    lineNumbers?: boolean;
+    /** Text shown while the editor is empty. */
+    placeholder?: string;
+    /** Header text, usually the file name. */
+    title?: string;
+    /** Adds a copy button to the header. */
+    copyable?: boolean;
+    /** `unified` shows changes in one column; `split` puts the saved version on the left. */
+    diffLayout?: "unified" | "split";
+    /** Accessible name for the text area when there's no `title`, e.g. "Custom values". */
+    label?: string;
+    /** Draws the border and rounded corners. Turn off inside a card or modal body that has its own. */
+    bordered?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Buttons at the right of the header, e.g. a YAML/JSON switch or Reset. */
+    actions?: () => unknown;
+};
+declare function focus(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+    /** Which pane shows when `original` is set: `edit` or `changes`. */
+    "view"?: "edit" | "changes";
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves the cursor into the editor. */
+    focus: typeof focus;
+    /** The CodeMirror `EditorView`, for anything the props don't cover. */
+    editor: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    blur: () => any;
+    focus: () => any;
+    validate: (problems: EditorProblem[]) => any;
+    "update:view": (value: "edit" | "changes") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onValidate?: ((problems: EditorProblem[]) => any) | undefined;
+    "onUpdate:view"?: ((value: "edit" | "changes") => any) | undefined;
+}>, {
+    bordered: boolean;
+    label: string;
+    title: string;
+    height: string;
+    maxHeight: string;
+    wrap: boolean;
+    schema: object;
+    language: EditorLanguage;
+    original: string;
+    readonly: boolean;
+    validate: boolean;
+    lineNumbers: boolean;
+    placeholder: string;
+    copyable: boolean;
+    diffLayout: "unified" | "split";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};