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

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

@@ -0,0 +1,42 @@
+import type { Component } from "vue";
+export interface Props {
+    /** `empty` for a list with nothing in it yet, `search` for a filter or search with no matches, `error` when loading failed. Sets the default icon and title. */
+    variant?: "empty" | "search" | "error";
+    /** Heading. Defaults to "Nothing here yet", "No results found" or "Something went wrong". */
+    title?: string;
+    /** A small label above the title, such as "Error 404". */
+    code?: string;
+    /** A sentence under the title: why it's empty and what to do next. */
+    description?: string;
+    /** With `variant="search"`, the search text, shown as `No results for “pg-prod”`. */
+    query?: string;
+    /** A Lucide icon component to replace the variant's default icon. */
+    icon?: Component;
+    /** `small` for inside a table or card, `normal` for a list area, `large` for a whole page. */
+    size?: "small" | "normal" | "large";
+}
+type __VLS_Slots = {
+    /** Replaces the icon, e.g. with an illustration. */
+    icon?: () => unknown;
+    /** Replaces the description, e.g. to add a docs link. */
+    default?: () => unknown;
+    /** Buttons under the text: the main next step, then a secondary one. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "empty" | "search" | "error";
+    code: string;
+    title: string;
+    description: string;
+    icon: Component;
+    size: "small" | "normal" | "large";
+    query: 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/AcEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,81 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d } from "vue";
+import { Inbox as f, SearchX as p, TriangleAlert as m } from "@lucide/vue";
+//#region src/lib/components/AcEmptyState.vue?vue&type=script&setup=true&lang.ts
+var h = ["role"], g = { class: "flex flex-col items-center gap-1" }, _ = {
+	key: 0,
+	class: "font-mono text-xs font-medium tracking-wide text-muted uppercase"
+}, v = {
+	key: 0,
+	class: "mt-1 flex flex-wrap items-center justify-center gap-2"
+}, y = /*@__PURE__*/ o({
+	__name: "AcEmptyState",
+	props: {
+		variant: { default: "empty" },
+		title: { default: "" },
+		code: { default: "" },
+		description: { default: "" },
+		query: { default: "" },
+		icon: { default: void 0 },
+		size: { default: "normal" }
+	},
+	setup(o) {
+		let y = o, b = {
+			empty: {
+				glyph: f,
+				title: "Nothing here yet",
+				tile: "border-border bg-surface-muted text-muted"
+			},
+			search: {
+				glyph: p,
+				title: "No results found",
+				tile: "border-border bg-surface-muted text-muted"
+			},
+			error: {
+				glyph: m,
+				title: "Something went wrong",
+				tile: "border-red-90 bg-red-97 text-red-40"
+			}
+		}, x = {
+			small: {
+				root: "py-6 gap-3",
+				tile: "size-9 rounded-8 [&_svg]:size-4",
+				title: "text-lg leading-6",
+				text: "text-base max-w-80"
+			},
+			normal: {
+				root: "py-12 gap-4",
+				tile: "size-11 rounded-10 [&_svg]:size-5",
+				title: "text-xl leading-6",
+				text: "text-base max-w-100"
+			},
+			large: {
+				root: "py-20 gap-5",
+				tile: "size-14 rounded-12 [&_svg]:size-6",
+				title: "text-2xl leading-7",
+				text: "text-lg max-w-120"
+			}
+		}, S = e(() => b[y.variant]), C = e(() => x[y.size]), w = e(() => y.icon ?? S.value.glyph), T = e(() => y.title ? y.title : y.variant === "search" && y.query ? `No results for “${y.query}”` : S.value.title);
+		return (e, f) => (c(), r("div", {
+			class: s(["flex flex-col items-center px-4 text-center", C.value.root]),
+			role: o.variant === "error" ? "alert" : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-empty-state"
+		}, [
+			l(e.$slots, "icon", {}, () => [i("span", {
+				class: s(["inline-flex shrink-0 items-center justify-center border shadow-xs", [S.value.tile, C.value.tile]]),
+				"aria-hidden": "true"
+			}, [(c(), t(u(w.value)))], 2)]),
+			i("div", g, [
+				o.code ? (c(), r("p", _, d(o.code), 1)) : n("", !0),
+				i("p", { class: s(["font-semibold tracking-[-0.01em] text-balance text-heading", C.value.title]) }, d(T.value), 3),
+				o.description || e.$slots.default ? (c(), r("div", {
+					key: 1,
+					class: s(["text-pretty text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2", C.value.text])
+				}, [l(e.$slots, "default", {}, () => [a(d(o.description), 1)])], 2)) : n("", !0)
+			]),
+			e.$slots.actions ? (c(), r("div", v, [l(e.$slots, "actions")])) : n("", !0)
+		], 10, h));
+	}
+});
+//#endregion
+export { y as default };

package/dist/lib/components/AcFeatureCard.js

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

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

@@ -0,0 +1,84 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** Name of the feature, product or option. Also the card's accessible name. */
+    title: string;
+    /** One or two sentences on what it does. Clamped to three lines. Old `card-sub-title` slot. */
+    description?: string;
+    /** A Lucide icon, shown in a tinted tile. Or use the `icon` slot. */
+    icon?: Component;
+    /** Logo image URL, e.g. a product or cloud-provider logo. Takes the place of `icon`. */
+    logo?: string;
+    /** Alt text for `logo`. Leave empty when the title already names it. */
+    logoAlt?: string;
+    /** A short status shown as a badge, e.g. "Enabled" or "Not installed". */
+    status?: string;
+    /** Colour of the `status` badge. */
+    statusColor?: Tone | "default";
+    /** Adds a "Required" badge. Old `isRequired`. */
+    required?: boolean;
+    /** Adds a "Recommended" badge. Shown after "Required" when both are set. */
+    recommended?: boolean;
+    /** Logo on top and centred text, for picking a provider or database type from a grid. Replaces the old Vendor card. */
+    centered?: boolean;
+    /** Makes the card a checkbox. Bind `v-model:checked`. Old CheckItemCard. */
+    selectable?: boolean;
+    /** Greys the card out and turns off its link, click and checkbox. */
+    disabled?: boolean;
+    /** Makes the card a `RouterLink` to this route. Needs vue-router in the app; without it a string is used as `href`. */
+    to?: string | Record<string, unknown>;
+    /** Makes the card a plain link. */
+    href?: string;
+    /** Link target for `href`, e.g. `_blank`. `_blank` shows an external-link arrow. */
+    target?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Extra content under the description, e.g. "2 unaligned clusters". */
+    default?: () => unknown;
+    /** Replaces the icon or logo. */
+    icon?: () => unknown;
+    /** Replaces the `status` badge, e.g. with several badges. */
+    status?: () => unknown;
+    /** Small content right after the title, before the badges, e.g. a ready or warning icon. */
+    "title-extra"?: () => unknown;
+    /** Controls at the top right of the card, e.g. an Enable or Reconcile button. They stay clickable when the whole card is a link or button. */
+    actions?: () => unknown;
+    /** A row at the bottom of the card, e.g. a version or "Covers 4 topologies". */
+    footer?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether a `selectable` card is ticked. Bind with `v-model:checked`. */
+    "checked"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+    "update:checked": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+}>, {
+    required: boolean;
+    description: string;
+    disabled: boolean;
+    icon: Component;
+    target: string;
+    href: string;
+    to: string | Record<string, unknown>;
+    status: string;
+    logo: string;
+    logoAlt: string;
+    statusColor: Tone | "default";
+    recommended: boolean;
+    centered: boolean;
+    selectable: boolean;
+}, {}, {}, {}, 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/AcFeatureCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,218 @@
+import e from "./AcBadge.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, getCurrentInstance as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as y, useModel as b, vModelCheckbox as x, withCtx as S, withDirectives as C } from "vue";
+import { ArrowRight as w, ArrowUpRight as T, Check as E } from "@lucide/vue";
+//#region src/lib/components/AcFeatureCard.vue?vue&type=script&setup=true&lang.ts
+var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"], j = {
+	key: 0,
+	class: "relative z-10 -my-0.5 flex shrink-0 items-center gap-2"
+}, M = ["id", "title"], N = {
+	key: 1,
+	class: "mt-2 text-base text-body"
+}, P = {
+	key: 2,
+	class: "mt-2 flex flex-wrap justify-center gap-2"
+}, F = [
+	"id",
+	"disabled",
+	"aria-labelledby",
+	"aria-describedby"
+], I = /*@__PURE__*/ l({
+	__name: "AcFeatureCard",
+	props: /*@__PURE__*/ d({
+		title: {},
+		description: { default: "" },
+		icon: { default: void 0 },
+		logo: { default: "" },
+		logoAlt: { default: "" },
+		status: { default: "" },
+		statusColor: { default: "default" },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		recommended: {
+			type: Boolean,
+			default: !1
+		},
+		centered: {
+			type: Boolean,
+			default: !1
+		},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 }
+	}, {
+		checked: {
+			type: Boolean,
+			default: !1
+		},
+		checkedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ d(["click"], ["update:checked"]),
+	setup(l, { emit: d }) {
+		let I = l, L = b(l, "checked"), R = d, z = u(), B = z?.appContext.components.RouterLink, V = y(), H = n(() => {
+			if (I.disabled || I.selectable) return null;
+			if (I.to !== void 0 && B) return {
+				is: B,
+				to: I.to
+			};
+			let e = I.href ?? (typeof I.to == "string" ? I.to : void 0);
+			return e ? {
+				is: "a",
+				href: e,
+				target: I.target,
+				rel: I.target === "_blank" ? "noopener noreferrer" : void 0
+			} : null;
+		});
+		function U() {
+			return !H.value && !I.disabled && !I.selectable && !!z?.vnode.props?.onClick;
+		}
+		function W() {
+			return !!H.value || U() || I.selectable && !I.disabled;
+		}
+		function G(e) {
+			R("click", e);
+		}
+		return (n, u) => (m(), r(g(l.selectable ? "label" : "div"), {
+			for: l.selectable ? `${v(V)}-input` : void 0,
+			class: p(["group relative flex min-w-0 flex-col rounded-10 border border-border bg-surface p-4 shadow-xs transition-[border-color,box-shadow,background-color] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", [
+				l.centered && "items-center text-center",
+				W() && "cursor-pointer hover:border-border-dark hover:shadow-sm",
+				l.selectable && "has-checked:border-primary has-checked:bg-primary-97 has-checked:shadow-[0_0_0_1px_var(--color-primary)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring",
+				l.disabled && "cursor-not-allowed opacity-60"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-feature-card"
+		}, {
+			default: S(() => [o("div", { class: p(["flex w-full min-w-0 gap-3", l.centered ? "flex-col items-center" : "items-start"]) }, [
+				n.$slots.icon || l.logo || l.icon ? (m(), a("span", {
+					key: 0,
+					class: p(["inline-flex shrink-0 items-center justify-center overflow-hidden rounded-8", [l.centered ? "size-12" : "size-10", l.logo ? "border border-border-light bg-surface-muted p-1.5" : "bg-primary-95 text-primary-30 [&_svg]:size-5"]]),
+					"aria-hidden": l.logo && l.logoAlt ? void 0 : "true"
+				}, [h(n.$slots, "icon", {}, () => [l.logo ? (m(), a("img", {
+					key: 0,
+					src: l.logo,
+					alt: l.logoAlt,
+					class: "size-full object-contain"
+				}, null, 8, O)) : (m(), r(g(l.icon), { key: 1 }))])], 10, D)) : i("", !0),
+				o("div", { class: p(["min-w-0 flex-1", l.centered && "w-full"]) }, [
+					o("div", { class: p(["flex min-w-0 items-start gap-2", l.centered ? "justify-center" : "justify-between"]) }, [
+						o("div", { class: p(["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", l.centered && "justify-center"]) }, [o("h3", {
+							id: `${v(V)}-title`,
+							class: "min-w-0 text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+						}, [H.value ? (m(), r(g(H.value.is), f({ key: 0 }, {
+							...H.value,
+							is: void 0
+						}, {
+							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
+							"data-ac-card-link": "",
+							class: "outline-none after:absolute after:inset-0 after:rounded-10",
+							onClick: G
+						}), {
+							default: S(() => [s(_(l.title), 1)]),
+							_: 1
+						}, 16, ["aria-describedby"])) : U() ? (m(), a("button", {
+							key: 1,
+							type: "button",
+							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
+							"data-ac-card-link": "",
+							class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-10",
+							onClick: G
+						}, _(l.title), 9, A)) : (m(), a(t, { key: 2 }, [s(_(l.title), 1)], 64))], 8, k), l.centered ? i("", !0) : (m(), a(t, { key: 0 }, [
+							h(n.$slots, "title-extra"),
+							l.required ? (m(), r(e, {
+								key: 0,
+								label: "Required",
+								color: "warning",
+								variant: "light",
+								rounded: ""
+							})) : i("", !0),
+							l.recommended ? (m(), r(e, {
+								key: 1,
+								label: "Recommended",
+								color: "info",
+								variant: "light",
+								rounded: ""
+							})) : i("", !0),
+							h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
+								key: 0,
+								label: l.status,
+								color: l.statusColor,
+								variant: "light",
+								rounded: "",
+								dot: ""
+							}, null, 8, ["label", "color"])) : i("", !0)])
+						], 64))], 2),
+						n.$slots.actions && !l.centered ? (m(), a("div", j, [h(n.$slots, "actions")])) : i("", !0),
+						!l.centered && (H.value || U()) ? (m(), r(g(l.target === "_blank" ? v(T) : v(w)), {
+							key: 1,
+							class: "mt-1 size-4 shrink-0 text-slate-60 transition-[color,transform] duration-150 group-hover:text-heading motion-safe:group-hover:translate-x-0.5",
+							"aria-hidden": "true"
+						})) : i("", !0)
+					], 2),
+					l.description ? (m(), a("p", {
+						key: 0,
+						id: `${v(V)}-desc`,
+						class: "mt-1 line-clamp-3 text-base text-muted",
+						title: l.description
+					}, _(l.description), 9, M)) : i("", !0),
+					n.$slots.default ? (m(), a("div", N, [h(n.$slots, "default")])) : i("", !0),
+					l.centered && (l.required || l.recommended || l.status || n.$slots.status) ? (m(), a("div", P, [
+						l.required ? (m(), r(e, {
+							key: 0,
+							label: "Required",
+							color: "warning",
+							variant: "light",
+							rounded: ""
+						})) : i("", !0),
+						l.recommended ? (m(), r(e, {
+							key: 1,
+							label: "Recommended",
+							color: "info",
+							variant: "light",
+							rounded: ""
+						})) : i("", !0),
+						h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
+							key: 0,
+							label: l.status,
+							color: l.statusColor,
+							variant: "light",
+							rounded: "",
+							dot: ""
+						}, null, 8, ["label", "color"])) : i("", !0)])
+					])) : i("", !0)
+				], 2),
+				l.selectable ? (m(), a("span", {
+					key: 1,
+					class: p(["relative inline-flex size-4 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-1"])
+				}, [C(o("input", {
+					id: `${v(V)}-input`,
+					"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
+					type: "checkbox",
+					disabled: l.disabled,
+					"aria-labelledby": `${v(V)}-title`,
+					"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
+					class: "peer size-4 cursor-pointer appearance-none rounded-4 border border-border-dark bg-surface shadow-xs transition-[background-color,border-color] duration-150 outline-none group-hover:border-slate-60 checked:border-primary checked:bg-primary checked:shadow-button disabled:cursor-not-allowed"
+				}, null, 8, F), [[x, L.value]]), c(v(E), {
+					class: "pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100",
+					"stroke-width": 3,
+					"aria-hidden": "true"
+				})], 2)) : i("", !0)
+			], 2), n.$slots.footer ? (m(), a("div", {
+				key: 0,
+				class: p(["mt-auto flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-1 pt-3 text-xs text-muted", l.centered ? "justify-center" : "justify-between"])
+			}, [h(n.$slots, "footer")], 2)) : i("", !0)]),
+			_: 3
+		}, 8, ["for", "class"]));
+	}
+});
+//#endregion
+export { I as default };

package/dist/lib/components/AcFileEditor.js

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

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

@@ -0,0 +1,95 @@
+import type { EditorProblem } from "../editor/validate";
+import type { EditorLanguage } from "../editor/validate";
+export interface EditorFile {
+    /** Unique within the list. Shown in the list and the editor header, e.g. `postgres.yaml`. */
+    name: string;
+    /** The text. With `encoding: "base64"`, the base64 value as a Secret stores it. */
+    content: string;
+    /** The saved version, in the same encoding as `content`. Marks the file as changed and adds an Edit / Changes switch. */
+    original?: string;
+    /** Overrides the language guessed from the extension (`.yaml`/`.yml`, `.json`, `.sh`; anything else is text). */
+    language?: EditorLanguage;
+    /** JSON Schema this file is checked against, e.g. its CRD's `openAPIV3Schema`. */
+    schema?: object;
+    /** Hides the value until someone chooses Show value. It's hidden again when they open another file. */
+    secret?: boolean;
+    /** `base64`: `content` and `original` are base64. The editor shows the decoded text and encodes edits back. */
+    encoding?: "base64";
+    /** This file can't be edited. */
+    readonly?: boolean;
+    /** Kind shown under the name, e.g. `Postgres` or `Secret`. */
+    kind?: string;
+    /** More detail after the kind, e.g. the namespace. */
+    description?: string;
+}
+export interface Props {
+    /** Shows a skeleton list and editor while the files load. */
+    loading?: boolean;
+    /** No file can be edited. Files with an `original` then show only their changes. */
+    readonly?: boolean;
+    /** Any CSS height for the whole editor, e.g. `480px` or `calc(100vh - 240px)`. */
+    height?: string;
+    /** Shows a search box above the list. `auto` shows it once there are more than 8 files. */
+    searchable?: boolean | "auto";
+    /** Adds a YAML / JSON switch to the header. Edits in the other format are converted back; YAML comments don't survive that. */
+    formatSwitch?: boolean;
+    /** Checks YAML and JSON files as you type, against their `schema` too. Turn off for templates that aren't valid until rendered. */
+    validate?: boolean;
+    /** Adds a copy button to the header. */
+    copyable?: boolean;
+    /** Adds a download button to the header. It saves the open file's text, in the format shown, under the file's name. Hidden while a secret is masked. */
+    downloadable?: boolean;
+    /** Wraps long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Accessible name for the file list, e.g. "Secret keys". */
+    label?: string;
+    /** Title shown when there are no files. */
+    emptyText?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <F extends EditorFile>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+        /** The files: `{ name, content, original?, language?, schema?, secret?, encoding?, readonly?, kind?, description? }`. Edits replace the edited file with a copy, so extra fields such as `gvr` are kept. */
+        files?: F[];
+        /** The `name` of the open file. When it's empty or doesn't match a file, the first file opens. */
+        active?: string;
+        /** The list's search text. Bind it to drive the search from your own search box. */
+        search?: string;
+        /** With `format-switch`, which format YAML and JSON files are shown in. */
+        format?: "yaml" | "json";
+        /** For a file with an `original`, whether its text or its changes show. */
+        view?: "edit" | "changes";
+    }) & {
+        onValidate?: ((problems: Record<string, EditorProblem[]>) => any) | undefined;
+        "onUpdate:view"?: ((value: "edit" | "changes") => any) | undefined;
+        onDownload?: ((file: F) => any) | undefined;
+        "onUpdate:files"?: ((value: F[]) => any) | undefined;
+        "onUpdate:active"?: ((value: string) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+        "onUpdate:format"?: ((value: "yaml" | "json") => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus into the open file's editor, or to its Show value button while a secret is hidden. */
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Buttons at the right of the editor header, e.g. Save or Delete for the open file. */
+        actions?: (props: {
+            file: F;
+        }) => unknown;
+        /** Replaces the empty state shown when there are no files. */
+        empty?: () => unknown;
+    };
+    emit: (((evt: "validate", problems: Record<string, EditorProblem[]>) => void) & ((evt: "download", file: F) => void)) & (((event: "update:view", value: "edit" | "changes") => void) & ((event: "update:files", value: F[]) => void) & ((event: "update:active", value: string) => void) & ((event: "update:search", value: string) => void) & ((event: "update:format", value: "yaml" | "json") => void));
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};