@verbb/plugin-kit-vue 2.0.0

package/dist/createPkComponent.js

@@ -0,0 +1,33 @@
+import { assignSlotNodes } from "@lit-labs/vue-utils/wrapper-utils.js";
+import { defineComponent, h } from "vue";
+//#region src/createPkComponent.ts
+/**
+* Minimal Vue facade over a registered `<pk-*>` custom element.
+* Props and listeners pass through; default slot children are distributed with slot attributes.
+*/
+function createPkComponent(options) {
+	return defineComponent({
+		name: options.name,
+		inheritAttrs: false,
+		setup(_props, { attrs, slots }) {
+			return () => h(options.tagName, attrs, assignSlotNodes(slots));
+		}
+	});
+}
+/** Turn `pk-date-picker` → `PkDatePicker` for consistent facade names. */
+function pkTagToComponentName(tagName) {
+	return `Pk${(tagName.startsWith("pk-") ? tagName.slice(3) : tagName).split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}`;
+}
+/** Batch-create pass-through facades for a tag → export name map. */
+function createPkComponentFamily(family) {
+	const components = {};
+	for (const [exportName, tagName] of Object.entries(family)) components[exportName] = createPkComponent({
+		name: pkTagToComponentName(tagName),
+		tagName
+	});
+	return components;
+}
+//#endregion
+export { createPkComponent, createPkComponentFamily };
+
+//# sourceMappingURL=createPkComponent.js.map

package/dist/createPkComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPkComponent.js","names":[],"sources":["../src/createPkComponent.ts"],"sourcesContent":["import { assignSlotNodes, type Slots } from '@lit-labs/vue-utils/wrapper-utils.js';\nimport { defineComponent, h } from 'vue';\n\n/**\n * Minimal Vue facade over a registered `<pk-*>` custom element.\n * Props and listeners pass through; default slot children are distributed with slot attributes.\n */\nexport function createPkComponent(options: { name: string; tagName: string }) {\n    return defineComponent({\n        name: options.name,\n        inheritAttrs: false,\n        setup(_props, { attrs, slots }) {\n            return () => h(\n                options.tagName,\n                attrs,\n                assignSlotNodes(slots as Slots),\n            );\n        },\n    });\n}\n\n/** Turn `pk-date-picker` → `PkDatePicker` for consistent facade names. */\nexport function pkTagToComponentName(tagName: string): string {\n    const slug = tagName.startsWith('pk-') ? tagName.slice(3) : tagName;\n\n    return `Pk${slug.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')}`;\n}\n\n/** Batch-create pass-through facades for a tag → export name map. */\nexport function createPkComponentFamily(family: Record<string, string>) {\n    const components: Record<string, ReturnType<typeof createPkComponent>> = {};\n\n    for (const [exportName, tagName] of Object.entries(family)) {\n        components[exportName] = createPkComponent({\n            name: pkTagToComponentName(tagName),\n            tagName,\n        });\n    }\n\n    return components;\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAkB,SAA4C;AAC1E,QAAO,gBAAgB;EACnB,MAAM,QAAQ;EACd,cAAc;EACd,MAAM,QAAQ,EAAE,OAAO,SAAS;AAC5B,gBAAa,EACT,QAAQ,SACR,OACA,gBAAgB,MAAe,CAClC;;EAER,CAAC;;;AAIN,SAAgB,qBAAqB,SAAyB;AAG1D,QAAO,MAFM,QAAQ,WAAW,MAAM,GAAG,QAAQ,MAAM,EAAE,GAAG,SAE3C,MAAM,IAAI,CAAC,KAAK,SAAS,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE,CAAC,CAAC,KAAK,GAAG;;;AAIpG,SAAgB,wBAAwB,QAAgC;CACpE,MAAM,aAAmE,EAAE;AAE3E,MAAK,MAAM,CAAC,YAAY,YAAY,OAAO,QAAQ,OAAO,CACtD,YAAW,cAAc,kBAAkB;EACvC,MAAM,qBAAqB,QAAQ;EACnC;EACH,CAAC;AAGN,QAAO"}

package/dist/fault/AppFaultBoundary.d.ts

@@ -0,0 +1,17 @@
+import { VNodeChild } from 'vue';
+import { AppFaultRecord } from './types.js';
+type FaultPayload = Omit<AppFaultRecord, 'timestamp' | 'count'>;
+/**
+ * Catches Vue render/lifecycle errors in the builder subtree via `onErrorCaptured`.
+ * Emits `fault` then returns null so the parent provider can show {@link FaultFallback}.
+ *
+ * Listen with `onFault` in `h()` / templates — Vue maps that to the `fault` emit
+ * (do not declare an `onFault` prop; `on*` keys are event listeners in `h()`).
+ */
+export declare const AppFaultBoundary: import('vue').DefineComponent<{}, () => VNodeChild, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    fault: (_fault: FaultPayload) => true;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onFault?: ((_fault: FaultPayload) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};
+//# sourceMappingURL=AppFaultBoundary.d.ts.map

package/dist/fault/AppFaultBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultBoundary.d.ts","sourceRoot":"","sources":["../../src/fault/AppFaultBoundary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,0CAuBV,UAAU;oBApBL,YAAY;;;iFAsBlC,CAAC"}

package/dist/fault/AppFaultBoundary.js

@@ -0,0 +1,31 @@
+import { defineComponent, onErrorCaptured, ref } from "vue";
+//#region src/fault/AppFaultBoundary.ts
+/**
+* Catches Vue render/lifecycle errors in the builder subtree via `onErrorCaptured`.
+* Emits `fault` then returns null so the parent provider can show {@link FaultFallback}.
+*
+* Listen with `onFault` in `h()` / templates — Vue maps that to the `fault` emit
+* (do not declare an `onFault` prop; `on*` keys are event listeners in `h()`).
+*/
+var AppFaultBoundary = defineComponent({
+	name: "AppFaultBoundary",
+	emits: { fault: (_fault) => true },
+	setup(_props, { slots, emit }) {
+		const hasError = ref(false);
+		onErrorCaptured((error, _instance, info) => {
+			hasError.value = true;
+			const err = error instanceof Error ? error : new Error(String(error));
+			emit("fault", {
+				kind: "vue",
+				message: err.message,
+				stack: info ? `${err.stack ?? ""}\n\n${info}` : err.stack
+			});
+			return false;
+		});
+		return () => hasError.value ? null : slots.default?.();
+	}
+});
+//#endregion
+export { AppFaultBoundary };
+
+//# sourceMappingURL=AppFaultBoundary.js.map

package/dist/fault/AppFaultBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultBoundary.js","names":[],"sources":["../../src/fault/AppFaultBoundary.ts"],"sourcesContent":["import { defineComponent, onErrorCaptured, ref, type VNodeChild } from 'vue';\n\nimport type { AppFaultRecord } from './types.js';\n\ntype FaultPayload = Omit<AppFaultRecord, 'timestamp' | 'count'>;\n\n/**\n * Catches Vue render/lifecycle errors in the builder subtree via `onErrorCaptured`.\n * Emits `fault` then returns null so the parent provider can show {@link FaultFallback}.\n *\n * Listen with `onFault` in `h()` / templates — Vue maps that to the `fault` emit\n * (do not declare an `onFault` prop; `on*` keys are event listeners in `h()`).\n */\nexport const AppFaultBoundary = defineComponent({\n    name: 'AppFaultBoundary',\n    emits: {\n        fault: (_fault: FaultPayload) => true,\n    },\n    setup(_props, { slots, emit }) {\n        const hasError = ref(false);\n\n        onErrorCaptured((error, _instance, info) => {\n            hasError.value = true;\n\n            const err = error instanceof Error ? error : new Error(String(error));\n            // Append Vue's component info string the same way React appends componentStack.\n            emit('fault', {\n                kind: 'vue',\n                message: err.message,\n                stack: info ? `${err.stack ?? ''}\\n\\n${info}` : err.stack,\n            });\n\n            // Stop propagation — the provider owns fatal UI; avoid duplicate parent handlers.\n            return false;\n        });\n\n        return (): VNodeChild => (hasError.value ? null : slots.default?.());\n    },\n});\n"],"mappings":";;;;;;;;;AAaA,IAAa,mBAAmB,gBAAgB;CAC5C,MAAM;CACN,OAAO,EACH,QAAQ,WAAyB,MACpC;CACD,MAAM,QAAQ,EAAE,OAAO,QAAQ;EAC3B,MAAM,WAAW,IAAI,MAAM;AAE3B,mBAAiB,OAAO,WAAW,SAAS;AACxC,YAAS,QAAQ;GAEjB,MAAM,MAAM,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC;AAErE,QAAK,SAAS;IACV,MAAM;IACN,SAAS,IAAI;IACb,OAAO,OAAO,GAAG,IAAI,SAAS,GAAG,MAAM,SAAS,IAAI;IACvD,CAAC;AAGF,UAAO;IACT;AAEF,eAA0B,SAAS,QAAQ,OAAO,MAAM,WAAW;;CAE1E,CAAC"}

package/dist/fault/AppFaultProvider.d.ts

@@ -0,0 +1,116 @@
+import { PropType, VNodeChild } from 'vue';
+import { AppFaultContext, AppFaultKind, AppFaultRecord } from './types.js';
+type RecordFaultInput = {
+    kind: AppFaultKind;
+    message: string;
+    stack?: string;
+    tagName?: string;
+    fatal?: boolean;
+};
+export type AppFaultProviderProps = AppFaultContext & {
+    /** When false, skip the main-thread watchdog (useful in tests). */
+    enableWatchdog?: boolean;
+    /** Labels for the fault UI — pass translated strings from the host app. */
+    labels?: {
+        fatalTitle?: string;
+        fatalMessage?: string;
+        stuckTitle?: string;
+        stuckMessage?: string;
+    };
+};
+export type AppFaultContextValue = {
+    faults: AppFaultRecord[];
+    hasFatalFault: boolean;
+    isStuck: boolean;
+    recordFault: (input: RecordFaultInput) => void;
+    resetUi: () => void;
+    reload: () => void;
+    clearFaults: () => void;
+    dismissStuck: () => void;
+};
+export declare const AppFaultProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    meta: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    onResetUi: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReload: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    enableWatchdog: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labels: {
+        type: PropType<AppFaultProviderProps["labels"]>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    meta: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    onResetUi: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onReload: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    enableWatchdog: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labels: {
+        type: PropType<AppFaultProviderProps["labels"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    meta: Record<string, unknown>;
+    onReload: () => void;
+    onResetUi: () => void;
+    labels: {
+        fatalTitle?: string;
+        fatalMessage?: string;
+        stuckTitle?: string;
+        stuckMessage?: string;
+    } | undefined;
+    enableWatchdog: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare function useAppFault(): AppFaultContextValue;
+/** Optional composable — returns null outside a provider (for chrome mounted in separate trees). */
+export declare function useAppFaultOptional(): AppFaultContextValue | null;
+export type ResetUiButtonProps = {
+    className?: string;
+    label?: string;
+};
+/** Always-reachable overlay recovery — mount in builder chrome, not inside dialogs. */
+export declare const ResetUiButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => VNodeChild, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    className: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};
+//# sourceMappingURL=AppFaultProvider.d.ts.map

package/dist/fault/AppFaultProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultProvider.d.ts","sourceRoot":"","sources":["../../src/fault/AppFaultProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAUH,KAAK,QAAQ,EACb,KAAK,UAAU,EAClB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGhF,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IAClD,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACL,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAOF,eAAO,MAAM,gBAAgB;;cAGG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cAC1B,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;;;;;cAG9B,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;;;UAqKlD,UAAU;;cA1KG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cAC1B,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;;;;;cAG9B,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;;;;;oBAHhB,IAAI;qBADH,IAAI;;qBA3BrC,MAAM;uBACJ,MAAM;qBACR,MAAM;uBACJ,MAAM;;;4EA6O3B,CAAC;AAEH,wBAAgB,WAAW,IAAI,oBAAoB,CAQlD;AAED,oGAAoG;AACpG,wBAAgB,mBAAmB,IAAI,oBAAoB,GAAG,IAAI,CAEjE;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,aAAa;;;;;;;;;UASP,UAAU;;;;;;;;;;;;4EAiB3B,CAAC"}

package/dist/fault/AppFaultProvider.js

@@ -0,0 +1,214 @@
+import { AppFaultBoundary } from "./AppFaultBoundary.js";
+import { FaultFallback } from "./FaultFallback.js";
+import { isIgnorableGlobalError } from "./isIgnorableGlobalError.js";
+import { useUiWatchdog } from "./useUiWatchdog.js";
+import { computed, defineComponent, h, inject, onMounted, onUnmounted, provide, ref } from "vue";
+import { recoverOverlays } from "@verbb/plugin-kit-web/plugin-kit";
+//#region src/fault/AppFaultProvider.ts
+var AppFaultKey = Symbol("pluginKitAppFault");
+var faultKey = (input) => `${input.kind}:${input.tagName ?? ""}:${input.message.split("\n")[0]}`;
+var AppFaultProvider = defineComponent({
+	name: "AppFaultProvider",
+	props: {
+		meta: {
+			type: Object,
+			default: void 0
+		},
+		onResetUi: {
+			type: Function,
+			default: void 0
+		},
+		onReload: {
+			type: Function,
+			default: void 0
+		},
+		enableWatchdog: {
+			type: Boolean,
+			default: true
+		},
+		labels: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const faults = ref([]);
+		const hasFatalFault = ref(false);
+		const isStuck = ref(false);
+		const seen = /* @__PURE__ */ new Map();
+		const recordFault = (input) => {
+			const key = faultKey(input);
+			const count = (seen.get(key) ?? 0) + 1;
+			seen.set(key, count);
+			faults.value = [{
+				kind: input.kind,
+				message: input.message,
+				stack: input.stack,
+				tagName: input.tagName,
+				timestamp: Date.now(),
+				count
+			}, ...faults.value.filter((item) => faultKey(item) !== key)].slice(0, 8);
+			if (input.fatal !== false && (input.kind === "vue" || input.kind === "global")) hasFatalFault.value = true;
+		};
+		const resetUi = () => {
+			const { actions, diagnostic } = recoverOverlays();
+			console.info("[plugin-kit] overlay recovery:", actions.join(", "), diagnostic.report);
+			props.onResetUi?.();
+			isStuck.value = false;
+			hasFatalFault.value = false;
+			faults.value = [];
+			seen.clear();
+		};
+		const reload = () => {
+			if (props.onReload) {
+				props.onReload();
+				return;
+			}
+			window.location.reload();
+		};
+		const clearFaults = () => {
+			hasFatalFault.value = false;
+			faults.value = [];
+			seen.clear();
+		};
+		const dismissStuck = () => {
+			isStuck.value = false;
+		};
+		provide(AppFaultKey, {
+			get faults() {
+				return faults.value;
+			},
+			get hasFatalFault() {
+				return hasFatalFault.value;
+			},
+			get isStuck() {
+				return isStuck.value;
+			},
+			recordFault,
+			resetUi,
+			reload,
+			clearFaults,
+			dismissStuck
+		});
+		const onResetShortcut = (event) => {
+			if (!((event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === "U" || event.key === "u"))) return;
+			event.preventDefault();
+			resetUi();
+		};
+		const onError = (event) => {
+			if (isIgnorableGlobalError(event.message, event.error)) return;
+			recordFault({
+				kind: "global",
+				message: event.message || event.error?.message || "Unknown error",
+				stack: event.error?.stack,
+				fatal: true
+			});
+		};
+		const onRejection = (event) => {
+			const reason = event.reason;
+			const message = reason?.message ?? String(event.reason);
+			if (isIgnorableGlobalError(message, reason)) return;
+			recordFault({
+				kind: "rejection",
+				message,
+				stack: reason?.stack,
+				fatal: false
+			});
+		};
+		const onPkError = (event) => {
+			const detail = event.detail;
+			recordFault({
+				kind: "pk-error",
+				tagName: detail?.tagName,
+				message: detail?.message ?? "Web component error",
+				stack: detail?.stack,
+				fatal: false
+			});
+		};
+		onMounted(() => {
+			window.addEventListener("keydown", onResetShortcut, true);
+			window.addEventListener("error", onError);
+			window.addEventListener("unhandledrejection", onRejection);
+			window.addEventListener("pk-error", onPkError);
+		});
+		onUnmounted(() => {
+			window.removeEventListener("keydown", onResetShortcut, true);
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+			window.removeEventListener("pk-error", onPkError);
+		});
+		useUiWatchdog({
+			enabled: computed(() => props.enableWatchdog && !hasFatalFault.value),
+			onStall: () => {
+				isStuck.value = true;
+				recordFault({
+					kind: "watchdog",
+					message: "The builder stopped responding.",
+					fatal: false
+				});
+			}
+		});
+		return () => h(AppFaultBoundary, { onFault: (fault) => recordFault({
+			...fault,
+			fatal: true
+		}) }, { default: () => {
+			if (hasFatalFault.value) return h(FaultFallback, {
+				title: props.labels?.fatalTitle,
+				message: props.labels?.fatalMessage,
+				faults: faults.value,
+				meta: props.meta,
+				onReload: reload,
+				onResetUi: resetUi
+			});
+			return [isStuck.value ? h("div", { class: "mb-3" }, h(FaultFallback, {
+				compact: true,
+				title: props.labels?.stuckTitle ?? "Builder became unresponsive",
+				message: props.labels?.stuckMessage ?? "The page may still scroll but clicks might not work. Reset UI to close stuck overlays, or reload if the problem continues.",
+				faults: faults.value,
+				meta: props.meta,
+				onReload: reload,
+				onResetUi: resetUi,
+				onDismiss: dismissStuck
+			})) : null, slots.default?.()];
+		} });
+	}
+});
+function useAppFault() {
+	const ctx = inject(AppFaultKey, null);
+	if (!ctx) throw new Error("useAppFault must be used within AppFaultProvider");
+	return ctx;
+}
+/** Optional composable — returns null outside a provider (for chrome mounted in separate trees). */
+function useAppFaultOptional() {
+	return inject(AppFaultKey, null);
+}
+/** Always-reachable overlay recovery — mount in builder chrome, not inside dialogs. */
+var ResetUiButton = defineComponent({
+	name: "ResetUiButton",
+	props: {
+		className: {
+			type: String,
+			default: void 0
+		},
+		label: {
+			type: String,
+			default: "Reset UI"
+		}
+	},
+	setup(props) {
+		const fault = useAppFaultOptional();
+		return () => {
+			if (!fault) return null;
+			return h("button", {
+				type: "button",
+				class: props.className,
+				title: "Close stuck dialogs and overlays",
+				onClick: fault.resetUi
+			}, props.label);
+		};
+	}
+});
+//#endregion
+export { AppFaultProvider, ResetUiButton, useAppFault, useAppFaultOptional };
+
+//# sourceMappingURL=AppFaultProvider.js.map

package/dist/fault/AppFaultProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultProvider.js","names":[],"sources":["../../src/fault/AppFaultProvider.ts"],"sourcesContent":["import {\n    computed,\n    defineComponent,\n    h,\n    inject,\n    onMounted,\n    onUnmounted,\n    provide,\n    ref,\n    type InjectionKey,\n    type PropType,\n    type VNodeChild,\n} from 'vue';\nimport { recoverOverlays } from '@verbb/plugin-kit-web/plugin-kit';\n\nimport { AppFaultBoundary } from './AppFaultBoundary.js';\nimport { FaultFallback } from './FaultFallback.js';\nimport { isIgnorableGlobalError } from './isIgnorableGlobalError.js';\nimport type { AppFaultContext, AppFaultKind, AppFaultRecord } from './types.js';\nimport { useUiWatchdog } from './useUiWatchdog.js';\n\ntype RecordFaultInput = {\n    kind: AppFaultKind;\n    message: string;\n    stack?: string;\n    tagName?: string;\n    fatal?: boolean;\n};\n\nexport type AppFaultProviderProps = AppFaultContext & {\n    /** When false, skip the main-thread watchdog (useful in tests). */\n    enableWatchdog?: boolean;\n    /** Labels for the fault UI — pass translated strings from the host app. */\n    labels?: {\n        fatalTitle?: string;\n        fatalMessage?: string;\n        stuckTitle?: string;\n        stuckMessage?: string;\n    };\n};\n\nexport type AppFaultContextValue = {\n    faults: AppFaultRecord[];\n    hasFatalFault: boolean;\n    isStuck: boolean;\n    recordFault: (input: RecordFaultInput) => void;\n    resetUi: () => void;\n    reload: () => void;\n    clearFaults: () => void;\n    dismissStuck: () => void;\n};\n\nconst AppFaultKey: InjectionKey<AppFaultContextValue> = Symbol('pluginKitAppFault');\n\nconst faultKey = (input: RecordFaultInput | AppFaultRecord): string =>\n    `${input.kind}:${input.tagName ?? ''}:${input.message.split('\\n')[0]}`;\n\nexport const AppFaultProvider = defineComponent({\n    name: 'AppFaultProvider',\n    props: {\n        meta: { type: Object as PropType<Record<string, unknown>>, default: undefined },\n        onResetUi: { type: Function as PropType<() => void>, default: undefined },\n        onReload: { type: Function as PropType<() => void>, default: undefined },\n        enableWatchdog: { type: Boolean, default: true },\n        labels: {\n            type: Object as PropType<AppFaultProviderProps['labels']>,\n            default: undefined,\n        },\n    },\n    setup(props, { slots }) {\n        const faults = ref<AppFaultRecord[]>([]);\n        const hasFatalFault = ref(false);\n        const isStuck = ref(false);\n        const seen = new Map<string, number>();\n\n        const recordFault = (input: RecordFaultInput) => {\n            const key = faultKey(input);\n            const count = (seen.get(key) ?? 0) + 1;\n            seen.set(key, count);\n\n            const record: AppFaultRecord = {\n                kind: input.kind,\n                message: input.message,\n                stack: input.stack,\n                tagName: input.tagName,\n                timestamp: Date.now(),\n                count,\n            };\n\n            // Dedupe by key, keep newest first, cap at 8 for support bundles.\n            faults.value = [record, ...faults.value.filter((item) => faultKey(item) !== key)].slice(0, 8);\n\n            if (input.fatal !== false && (input.kind === 'vue' || input.kind === 'global')) {\n                hasFatalFault.value = true;\n            }\n        };\n\n        const resetUi = () => {\n            const { actions, diagnostic } = recoverOverlays();\n            console.info('[plugin-kit] overlay recovery:', actions.join(', '), diagnostic.report);\n            props.onResetUi?.();\n            isStuck.value = false;\n            hasFatalFault.value = false;\n            faults.value = [];\n            seen.clear();\n        };\n\n        const reload = () => {\n            if (props.onReload) {\n                props.onReload();\n                return;\n            }\n\n            window.location.reload();\n        };\n\n        const clearFaults = () => {\n            hasFatalFault.value = false;\n            faults.value = [];\n            seen.clear();\n        };\n\n        const dismissStuck = () => {\n            isStuck.value = false;\n        };\n\n        // Provide a reactive snapshot — inject consumers read .value via computed unwrap in templates,\n        // but composables get the live refs through this object (mutated in place below).\n        const contextValue: AppFaultContextValue = {\n            get faults() {\n                return faults.value;\n            },\n            get hasFatalFault() {\n                return hasFatalFault.value;\n            },\n            get isStuck() {\n                return isStuck.value;\n            },\n            recordFault,\n            resetUi,\n            reload,\n            clearFaults,\n            dismissStuck,\n        };\n\n        provide(AppFaultKey, contextValue);\n\n        const onResetShortcut = (event: KeyboardEvent) => {\n            const combo =\n                (event.ctrlKey || event.metaKey) &&\n                event.shiftKey &&\n                (event.key === 'U' || event.key === 'u');\n\n            if (!combo) {\n                return;\n            }\n\n            event.preventDefault();\n            resetUi();\n        };\n\n        const onError = (event: ErrorEvent) => {\n            if (isIgnorableGlobalError(event.message, event.error)) {\n                return;\n            }\n\n            recordFault({\n                kind: 'global',\n                message: event.message || event.error?.message || 'Unknown error',\n                stack: event.error?.stack,\n                fatal: true,\n            });\n        };\n\n        const onRejection = (event: PromiseRejectionEvent) => {\n            const reason = event.reason as Error | undefined;\n            const message = reason?.message ?? String(event.reason);\n\n            if (isIgnorableGlobalError(message, reason)) {\n                return;\n            }\n\n            recordFault({\n                kind: 'rejection',\n                message,\n                stack: reason?.stack,\n                fatal: false,\n            });\n        };\n\n        const onPkError = (event: Event) => {\n            const detail = (event as CustomEvent<{ tagName?: string; message?: string; stack?: string }>)\n                .detail;\n\n            recordFault({\n                kind: 'pk-error',\n                tagName: detail?.tagName,\n                message: detail?.message ?? 'Web component error',\n                stack: detail?.stack,\n                fatal: false,\n            });\n        };\n\n        onMounted(() => {\n            window.addEventListener('keydown', onResetShortcut, true);\n            window.addEventListener('error', onError);\n            window.addEventListener('unhandledrejection', onRejection);\n            window.addEventListener('pk-error', onPkError);\n        });\n\n        onUnmounted(() => {\n            window.removeEventListener('keydown', onResetShortcut, true);\n            window.removeEventListener('error', onError);\n            window.removeEventListener('unhandledrejection', onRejection);\n            window.removeEventListener('pk-error', onPkError);\n        });\n\n        // Pause the watchdog once a fatal screen is up — no point flagging \"stuck\" over it.\n        useUiWatchdog({\n            enabled: computed(() => props.enableWatchdog && !hasFatalFault.value),\n            onStall: () => {\n                isStuck.value = true;\n                recordFault({\n                    kind: 'watchdog',\n                    message: 'The builder stopped responding.',\n                    fatal: false,\n                });\n            },\n        });\n\n        return (): VNodeChild =>\n            h(AppFaultBoundary, {\n                onFault: (fault: Omit<AppFaultRecord, 'timestamp' | 'count'>) =>\n                    recordFault({\n                        ...fault,\n                        fatal: true,\n                    }),\n            }, {\n                default: () => {\n                    if (hasFatalFault.value) {\n                        return h(FaultFallback, {\n                            title: props.labels?.fatalTitle,\n                            message: props.labels?.fatalMessage,\n                            faults: faults.value,\n                            meta: props.meta,\n                            onReload: reload,\n                            onResetUi: resetUi,\n                        });\n                    }\n\n                    return [\n                        isStuck.value\n                            ? h(\n                                  'div',\n                                  { class: 'mb-3' },\n                                  h(FaultFallback, {\n                                      compact: true,\n                                      title: props.labels?.stuckTitle ?? 'Builder became unresponsive',\n                                      message:\n                                          props.labels?.stuckMessage ??\n                                          'The page may still scroll but clicks might not work. Reset UI to close stuck overlays, or reload if the problem continues.',\n                                      faults: faults.value,\n                                      meta: props.meta,\n                                      onReload: reload,\n                                      onResetUi: resetUi,\n                                      onDismiss: dismissStuck,\n                                  }),\n                              )\n                            : null,\n                        slots.default?.(),\n                    ];\n                },\n            });\n    },\n});\n\nexport function useAppFault(): AppFaultContextValue {\n    const ctx = inject(AppFaultKey, null);\n\n    if (!ctx) {\n        throw new Error('useAppFault must be used within AppFaultProvider');\n    }\n\n    return ctx;\n}\n\n/** Optional composable — returns null outside a provider (for chrome mounted in separate trees). */\nexport function useAppFaultOptional(): AppFaultContextValue | null {\n    return inject(AppFaultKey, null);\n}\n\nexport type ResetUiButtonProps = {\n    className?: string;\n    label?: string;\n};\n\n/** Always-reachable overlay recovery — mount in builder chrome, not inside dialogs. */\nexport const ResetUiButton = defineComponent({\n    name: 'ResetUiButton',\n    props: {\n        className: { type: String, default: undefined },\n        label: { type: String, default: 'Reset UI' },\n    },\n    setup(props) {\n        const fault = useAppFaultOptional();\n\n        return (): VNodeChild => {\n            if (!fault) {\n                return null;\n            }\n\n            return h(\n                'button',\n                {\n                    type: 'button',\n                    class: props.className,\n                    title: 'Close stuck dialogs and overlays',\n                    onClick: fault.resetUi,\n                },\n                props.label,\n            );\n        };\n    },\n});\n"],"mappings":"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"}

package/dist/fault/FaultFallback.d.ts

@@ -0,0 +1,88 @@
+import { PropType, VNodeChild } from 'vue';
+import { AppFaultRecord } from './types.js';
+export type FaultFallbackProps = {
+    title?: string;
+    message?: string;
+    faults: AppFaultRecord[];
+    meta?: Record<string, unknown>;
+    onReload: () => void;
+    onResetUi?: () => void;
+    onDismiss?: () => void;
+    /** When true, show inline banner styling instead of full-panel takeover. */
+    compact?: boolean;
+};
+export declare const FaultFallback: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    faults: {
+        type: PropType<AppFaultRecord[]>;
+        required: true;
+    };
+    meta: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    onReload: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onResetUi: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onDismiss: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNodeChild, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    faults: {
+        type: PropType<AppFaultRecord[]>;
+        required: true;
+    };
+    meta: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    onReload: {
+        type: PropType<() => void>;
+        required: true;
+    };
+    onResetUi: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    onDismiss: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    compact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    meta: Record<string, unknown>;
+    title: string;
+    message: string;
+    onResetUi: () => void;
+    onDismiss: () => void;
+    compact: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=FaultFallback.d.ts.map

package/dist/fault/FaultFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FaultFallback.d.ts","sourceRoot":"","sources":["../../src/fault/FaultFallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAQF,eAAO,MAAM,aAAa;;;;;;;;;;cAQO,QAAQ,CAAC,cAAc,EAAE,CAAC;;;;cAC3B,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cAC3B,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACnB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACpB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;;;;UAcxC,UAAU;;;;;;;;;;cAlBI,QAAQ,CAAC,cAAc,EAAE,CAAC;;;;cAC3B,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cAC3B,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACnB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;cACpB,QAAQ,CAAC,MAAM,IAAI,CAAC;;;;;;;;;;;qBADL,IAAI;qBACJ,IAAI;;4EAoExD,CAAC"}

package/dist/fault/FaultFallback.js

@@ -0,0 +1,91 @@
+import { buildSupportBundle } from "./buildSupportBundle.js";
+import { defineComponent, h } from "vue";
+//#region src/fault/FaultFallback.ts
+var btnClass = "inline-flex items-center justify-center rounded-md border border-black/10 bg-white px-3 py-1.5 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50";
+var btnPrimaryClass = "inline-flex items-center justify-center rounded-md border border-transparent bg-[#0d78f2] px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-[#0b6ad9] disabled:opacity-50";
+var FaultFallback = defineComponent({
+	name: "FaultFallback",
+	props: {
+		title: {
+			type: String,
+			default: "Something went wrong"
+		},
+		message: {
+			type: String,
+			default: "The builder hit an unexpected error. You can try resetting the UI or reloading the builder."
+		},
+		faults: {
+			type: Array,
+			required: true
+		},
+		meta: {
+			type: Object,
+			default: void 0
+		},
+		onReload: {
+			type: Function,
+			required: true
+		},
+		onResetUi: {
+			type: Function,
+			default: void 0
+		},
+		onDismiss: {
+			type: Function,
+			default: void 0
+		},
+		compact: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const copyDetails = async () => {
+			const text = buildSupportBundle(props.faults, props.meta);
+			try {
+				await navigator.clipboard.writeText(text);
+			} catch {
+				console.warn("[plugin-kit] support bundle:\n", text);
+			}
+		};
+		return () => {
+			return h("div", {
+				class: props.compact ? "rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950" : "rounded-lg border border-red-200 bg-red-50 p-6 text-sm text-red-900",
+				role: "alert"
+			}, [
+				h("div", { class: "font-semibold" }, props.title),
+				h("p", { class: "mt-2 text-[13px] leading-relaxed opacity-90" }, props.message),
+				slots.default?.(),
+				h("div", { class: "mt-4 flex flex-wrap gap-2" }, [
+					props.onResetUi ? h("button", {
+						type: "button",
+						class: btnClass,
+						onClick: props.onResetUi
+					}, "Reset UI") : null,
+					h("button", {
+						type: "button",
+						class: btnPrimaryClass,
+						onClick: props.onReload
+					}, "Reload builder"),
+					h("button", {
+						type: "button",
+						class: btnClass,
+						onClick: () => {
+							copyDetails();
+						}
+					}, "Copy details for support"),
+					props.onDismiss ? h("button", {
+						type: "button",
+						class: btnClass,
+						onClick: props.onDismiss
+					}, "Dismiss") : null
+				]),
+				!props.compact && props.faults[0]?.message ? h("pre", { class: "mt-4 max-h-40 overflow-auto rounded border border-red-200/60 bg-white/70 p-3 text-xs text-red-800" }, props.faults[0].message) : null
+			]);
+		};
+	}
+});
+//#endregion
+export { FaultFallback };
+
+//# sourceMappingURL=FaultFallback.js.map

package/dist/fault/FaultFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FaultFallback.js","names":[],"sources":["../../src/fault/FaultFallback.ts"],"sourcesContent":["import { defineComponent, h, type PropType, type VNodeChild } from 'vue';\n\nimport { buildSupportBundle } from './buildSupportBundle.js';\nimport type { AppFaultRecord } from './types.js';\n\nexport type FaultFallbackProps = {\n    title?: string;\n    message?: string;\n    faults: AppFaultRecord[];\n    meta?: Record<string, unknown>;\n    onReload: () => void;\n    onResetUi?: () => void;\n    onDismiss?: () => void;\n    /** When true, show inline banner styling instead of full-panel takeover. */\n    compact?: boolean;\n};\n\nconst btnClass =\n    'inline-flex items-center justify-center rounded-md border border-black/10 bg-white px-3 py-1.5 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50';\n\nconst btnPrimaryClass =\n    'inline-flex items-center justify-center rounded-md border border-transparent bg-[#0d78f2] px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-[#0b6ad9] disabled:opacity-50';\n\nexport const FaultFallback = defineComponent({\n    name: 'FaultFallback',\n    props: {\n        title: { type: String, default: 'Something went wrong' },\n        message: {\n            type: String,\n            default: 'The builder hit an unexpected error. You can try resetting the UI or reloading the builder.',\n        },\n        faults: { type: Array as PropType<AppFaultRecord[]>, required: true },\n        meta: { type: Object as PropType<Record<string, unknown>>, default: undefined },\n        onReload: { type: Function as PropType<() => void>, required: true },\n        onResetUi: { type: Function as PropType<() => void>, default: undefined },\n        onDismiss: { type: Function as PropType<() => void>, default: undefined },\n        compact: { type: Boolean, default: false },\n    },\n    setup(props, { slots }) {\n        const copyDetails = async () => {\n            const text = buildSupportBundle(props.faults, props.meta);\n\n            try {\n                await navigator.clipboard.writeText(text);\n            } catch {\n                console.warn('[plugin-kit] support bundle:\\n', text);\n            }\n        };\n\n        return (): VNodeChild => {\n            const shellClass = props.compact\n                ? 'rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950'\n                : 'rounded-lg border border-red-200 bg-red-50 p-6 text-sm text-red-900';\n\n            return h('div', { class: shellClass, role: 'alert' }, [\n                h('div', { class: 'font-semibold' }, props.title),\n                h('p', { class: 'mt-2 text-[13px] leading-relaxed opacity-90' }, props.message),\n                slots.default?.(),\n                h('div', { class: 'mt-4 flex flex-wrap gap-2' }, [\n                    props.onResetUi\n                        ? h(\n                              'button',\n                              { type: 'button', class: btnClass, onClick: props.onResetUi },\n                              'Reset UI',\n                          )\n                        : null,\n                    h(\n                        'button',\n                        { type: 'button', class: btnPrimaryClass, onClick: props.onReload },\n                        'Reload builder',\n                    ),\n                    h(\n                        'button',\n                        {\n                            type: 'button',\n                            class: btnClass,\n                            onClick: () => {\n                                void copyDetails();\n                            },\n                        },\n                        'Copy details for support',\n                    ),\n                    props.onDismiss\n                        ? h(\n                              'button',\n                              { type: 'button', class: btnClass, onClick: props.onDismiss },\n                              'Dismiss',\n                          )\n                        : null,\n                ]),\n                !props.compact && props.faults[0]?.message\n                    ? h(\n                          'pre',\n                          {\n                              class:\n                                  'mt-4 max-h-40 overflow-auto rounded border border-red-200/60 bg-white/70 p-3 text-xs text-red-800',\n                          },\n                          props.faults[0].message,\n                      )\n                    : null,\n            ]);\n        };\n    },\n});\n"],"mappings":";;;AAiBA,IAAM,WACF;AAEJ,IAAM,kBACF;AAEJ,IAAa,gBAAgB,gBAAgB;CACzC,MAAM;CACN,OAAO;EACH,OAAO;GAAE,MAAM;GAAQ,SAAS;GAAwB;EACxD,SAAS;GACL,MAAM;GACN,SAAS;GACZ;EACD,QAAQ;GAAE,MAAM;GAAqC,UAAU;GAAM;EACrE,MAAM;GAAE,MAAM;GAA6C,SAAS,KAAA;GAAW;EAC/E,UAAU;GAAE,MAAM;GAAkC,UAAU;GAAM;EACpE,WAAW;GAAE,MAAM;GAAkC,SAAS,KAAA;GAAW;EACzE,WAAW;GAAE,MAAM;GAAkC,SAAS,KAAA;GAAW;EACzE,SAAS;GAAE,MAAM;GAAS,SAAS;GAAO;EAC7C;CACD,MAAM,OAAO,EAAE,SAAS;EACpB,MAAM,cAAc,YAAY;GAC5B,MAAM,OAAO,mBAAmB,MAAM,QAAQ,MAAM,KAAK;AAEzD,OAAI;AACA,UAAM,UAAU,UAAU,UAAU,KAAK;WACrC;AACJ,YAAQ,KAAK,kCAAkC,KAAK;;;AAI5D,eAAyB;AAKrB,UAAO,EAAE,OAAO;IAAE,OAJC,MAAM,UACnB,8EACA;IAE+B,MAAM;IAAS,EAAE;IAClD,EAAE,OAAO,EAAE,OAAO,iBAAiB,EAAE,MAAM,MAAM;IACjD,EAAE,KAAK,EAAE,OAAO,+CAA+C,EAAE,MAAM,QAAQ;IAC/E,MAAM,WAAW;IACjB,EAAE,OAAO,EAAE,OAAO,6BAA6B,EAAE;KAC7C,MAAM,YACA,EACI,UACA;MAAE,MAAM;MAAU,OAAO;MAAU,SAAS,MAAM;MAAW,EAC7D,WACH,GACD;KACN,EACI,UACA;MAAE,MAAM;MAAU,OAAO;MAAiB,SAAS,MAAM;MAAU,EACnE,iBACH;KACD,EACI,UACA;MACI,MAAM;MACN,OAAO;MACP,eAAe;AACN,oBAAa;;MAEzB,EACD,2BACH;KACD,MAAM,YACA,EACI,UACA;MAAE,MAAM;MAAU,OAAO;MAAU,SAAS,MAAM;MAAW,EAC7D,UACH,GACD;KACT,CAAC;IACF,CAAC,MAAM,WAAW,MAAM,OAAO,IAAI,UAC7B,EACI,OACA,EACI,OACI,qGACP,EACD,MAAM,OAAO,GAAG,QACnB,GACD;IACT,CAAC;;;CAGb,CAAC"}