@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/vite-C5iUK7so.js

@@ -0,0 +1,329 @@
+import { NodeTypes, parse } from "@vue/compiler-dom";
+import { parse as parse$1 } from "@vue/compiler-sfc";
+import MagicString from "magic-string";
+//#region src/vite/shadow-manifest.ts
+var SHADOW_ENTRY_TO_TAGS = {
+	accordion: ["mono-shadow-accordion"],
+	button: ["mono-shadow-button"],
+	"button-dropdown": ["mono-shadow-button-dropdown"],
+	alert: ["mono-shadow-alert"],
+	card: ["mono-shadow-card"],
+	chart: [
+		"mono-shadow-chart",
+		"mono-shadow-chart-bar",
+		"mono-shadow-chart-line",
+		"mono-shadow-chart-pie",
+		"mono-shadow-chart-doughnut"
+	],
+	checkbox: ["mono-shadow-checkbox"],
+	chip: ["mono-shadow-chip"],
+	date: ["mono-shadow-date"],
+	drawer: ["mono-shadow-drawer"],
+	dropdown: ["mono-shadow-dropdown"],
+	"file-upload": ["mono-shadow-file-upload"],
+	input: ["mono-shadow-input"],
+	menu: ["mono-shadow-menu"],
+	modal: ["mono-shadow-modal"],
+	nav: ["mono-shadow-nav"],
+	radio: ["mono-shadow-radio"],
+	select: ["mono-shadow-select"],
+	sidebar: ["mono-shadow-sidebar"],
+	switch: ["mono-shadow-switch"],
+	"tag-input": ["mono-shadow-tag-input"],
+	tabs: ["mono-shadow-tabs"],
+	textarea: ["mono-shadow-textarea"],
+	"rich-text-editor": ["mono-shadow-rich-text-editor"],
+	breadcrumb: ["mono-shadow-breadcrumb", "mono-shadow-breadcrumb-list"],
+	filter: ["mono-shadow-filter-builder"],
+	table: [
+		"mono-shadow-table-info",
+		"mono-shadow-table-page-size",
+		"mono-shadow-table-paging",
+		"mono-shadow-table-paging-group",
+		"mono-shadow-table-search",
+		"mono-shadow-table-sort",
+		"mono-shadow-table-th",
+		"mono-shadow-table-loading",
+		"mono-shadow-table-detail",
+		"mono-shadow-table-checkbox"
+	],
+	"dropdown-table": ["mono-shadow-dropdown-table"]
+};
+Object.values(SHADOW_ENTRY_TO_TAGS).flat();
+var SHADOW_IMPORT_RE = /@mono-lit\/helper\/ui\/shadow\/([a-z][\w-]*)/gi;
+/**
+* Extract the set of shadow tags a script block opts into, by scanning its
+* `@mono-lit/helper/ui/shadow/<entry>` imports and mapping each entry to its tag(s).
+*/
+function shadowTagsFromScript(script) {
+	const tags = /* @__PURE__ */ new Set();
+	if (!script) return tags;
+	SHADOW_IMPORT_RE.lastIndex = 0;
+	let match;
+	while ((match = SHADOW_IMPORT_RE.exec(script)) !== null) {
+		const entryTags = SHADOW_ENTRY_TO_TAGS[match[1].toLowerCase()];
+		if (entryTags) for (const tag of entryTags) tags.add(tag);
+	}
+	return tags;
+}
+//#endregion
+//#region src/vite/mono-client-only.ts
+var LIT_DIRECTIVES_TO_MOVE = [
+	"v-for",
+	":key",
+	"v-if",
+	"v-else-if",
+	"v-else"
+];
+var litDirectivesRegex = new RegExp(LIT_DIRECTIVES_TO_MOVE.map((attr) => `(\\s${attr}(="[^"]*")?)`).join("|"), "gi");
+function cleanId(id) {
+	return id.split("?", 1)[0];
+}
+function isElement(node) {
+	return node.type === NodeTypes.ELEMENT;
+}
+function isWhitespaceNode(node) {
+	return node.type === NodeTypes.TEXT && node.content.trim() === "";
+}
+function getStaticAttribute(node, name) {
+	return node.props.find((prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === name);
+}
+function escapeHtmlAttribute(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function getDirective(node, name) {
+	return node.props.find((prop) => prop.type === NodeTypes.DIRECTIVE && prop.name === name);
+}
+function hasDirective(node, name) {
+	return Boolean(getDirective(node, name));
+}
+function monoClientOnlyPlugin(options = {}) {
+	const prefix = options.prefix ?? "mono-";
+	const wrapper = options.wrapper ?? "ClientOnly";
+	const litWrapper = options.litWrapper === true;
+	const litWrapperComponent = options.litWrapperComponent ?? "LitWrapper";
+	const lightWrap = options.lightWrap !== false;
+	const normalizedPrefix = prefix.toLowerCase();
+	const normalizedWrapper = wrapper.toLowerCase();
+	const excluded = new Set((options.exclude ?? []).map((tag) => tag.toLowerCase()));
+	const shadowOverride = new Set((options.shadowOverride ?? []).map((tag) => tag.toLowerCase()));
+	return {
+		name: "@mono-lit/helper:mono-client-only",
+		enforce: "pre",
+		transform(source, id) {
+			const filename = cleanId(id);
+			if (!filename.endsWith(".vue")) return null;
+			if (filename.includes("/node_modules/") || filename.includes("\\node_modules\\")) return null;
+			if (!source.toLowerCase().includes(`<${normalizedPrefix}`)) return null;
+			const { descriptor, errors } = parse$1(source, { filename });
+			if (errors.length > 0 || !descriptor.template) return null;
+			const fileShadowTags = /* @__PURE__ */ new Set();
+			if (litWrapper) {
+				for (const tag of shadowOverride) fileShadowTags.add(tag);
+				const script = `${descriptor.scriptSetup?.content ?? ""}\n${descriptor.script?.content ?? ""}`;
+				for (const tag of shadowTagsFromScript(script)) fileShadowTags.add(tag);
+			}
+			const template = descriptor.template;
+			const ast = parse(template.content, { comments: true });
+			const magicString = new MagicString(source);
+			const templateOffset = template.loc.start.offset;
+			let changed = false;
+			/** A `mono-*` element whose shadow build this file imports → SSR-wrapped. */
+			function isShadowElement(node) {
+				return fileShadowTags.has(node.tag.toLowerCase());
+			}
+			/** A `mono-*` element that should be `<ClientOnly>`-wrapped. */
+			function isMonoElement(node) {
+				if (!lightWrap) return false;
+				const tag = node.tag.toLowerCase();
+				if (excluded.has(tag) || fileShadowTags.has(tag)) return false;
+				return tag.startsWith(normalizedPrefix);
+			}
+			function isClientOnly(node) {
+				return node.tag.toLowerCase() === normalizedWrapper;
+			}
+			/**
+			* Wrap a single shadow element in `<LitWrapper>`, moving v-for/:key/v-if/
+			* v-else-if/v-else onto the wrapper (so they don't run on the shadow host).
+			* No skeleton fallback — the element is server-rendered to DSD.
+			*/
+			function wrapLit(node) {
+				const start = templateOffset + node.loc.start.offset;
+				const end = templateOffset + node.loc.end.offset;
+				const moved = node.props.filter((prop) => prop.type === NodeTypes.DIRECTIVE && !!prop.rawName && LIT_DIRECTIVES_TO_MOVE.includes(prop.rawName));
+				const startTag = `<${litWrapperComponent}${moved.length ? ` ${moved.map((prop) => prop.loc.source).join(" ")}` : ""}>`;
+				const endTag = `</${litWrapperComponent}>`;
+				if (node.isSelfClosing) {
+					const stripped = source.slice(start, end).replace(litDirectivesRegex, "").trim();
+					magicString.overwrite(start, end, `${startTag}${stripped}${endTag}`);
+				} else {
+					const lastProp = node.props.length ? node.props[node.props.length - 1] : void 0;
+					const contentStart = lastProp ? templateOffset + lastProp.loc.end.offset : start + node.tag.length + 2;
+					const stripped = source.slice(start, contentStart).replace(litDirectivesRegex, "").trim();
+					magicString.overwrite(start, contentStart, stripped);
+					magicString.prependLeft(start, startTag);
+					magicString.appendRight(end, endTag);
+				}
+				changed = true;
+			}
+			function wrapRange(firstNode, lastNode) {
+				const start = templateOffset + firstNode.loc.start.offset;
+				const end = templateOffset + lastNode.loc.end.offset;
+				function extractAndRemoveStaticAttr(name) {
+					const attribute = getStaticAttribute(firstNode, name);
+					if (!attribute) return "";
+					const attributeStart = templateOffset + attribute.loc.start.offset;
+					const attributeEnd = templateOffset + attribute.loc.end.offset;
+					let removalStart = attributeStart;
+					while (removalStart > start && /\s/.test(source[removalStart - 1] ?? "")) removalStart--;
+					magicString.remove(removalStart, attributeEnd);
+					return attribute.value?.content.trim() ?? "";
+				}
+				const skeletonClass = extractAndRemoveStaticAttr("client-skeleton-class");
+				const skeletonType = extractAndRemoveStaticAttr("client-skeleton-type") || "col";
+				const skeletonBar = extractAndRemoveStaticAttr("client-skeleton-bar");
+				const skeletonCountRaw = extractAndRemoveStaticAttr("client-skeleton-count");
+				const parsedCount = Number.parseInt(skeletonCountRaw, 10);
+				const skeletonCount = Number.isFinite(parsedCount) && parsedCount > 0 ? Math.min(parsedCount, 100) : 1;
+				const containerClasses = [
+					"mono-client-skeleton",
+					`mono-client-skeleton--${skeletonType}`,
+					skeletonClass
+				].filter(Boolean).join(" ");
+				const barClasses = ["mono-client-skeleton-bar", skeletonBar].filter(Boolean).join(" ");
+				const bars = Array.from({ length: skeletonCount }, () => `    <div class="${escapeHtmlAttribute(barClasses)}"></div>`).join("\n");
+				magicString.prependLeft(start, `<${wrapper}>`);
+				magicString.appendRight(end, [
+					"",
+					"<template #fallback>",
+					`  <div class="${escapeHtmlAttribute(containerClasses)}" aria-hidden="true">`,
+					bars,
+					"  </div>",
+					"</template>",
+					`</${wrapper}>`
+				].join("\n"));
+				changed = true;
+			}
+			function visitChildren(children, insideClientOnly, insideMonoElement) {
+				let index = 0;
+				while (index < children.length) {
+					const node = children[index];
+					if (!isElement(node)) {
+						index++;
+						continue;
+					}
+					const nodeIsClientOnly = isClientOnly(node);
+					const nodeIsMono = isMonoElement(node);
+					if (isShadowElement(node)) {
+						if (!insideClientOnly && !insideMonoElement) wrapLit(node);
+						visitChildren(node.children, insideClientOnly, insideMonoElement);
+						index++;
+						continue;
+					}
+					if (hasDirective(node, "if")) {
+						const conditionalElements = [node];
+						let cursor = index + 1;
+						while (cursor < children.length) {
+							const nextNode = children[cursor];
+							if (isWhitespaceNode(nextNode) || nextNode.type === NodeTypes.COMMENT) {
+								cursor++;
+								continue;
+							}
+							if (isElement(nextNode) && (hasDirective(nextNode, "else-if") || hasDirective(nextNode, "else"))) {
+								conditionalElements.push(nextNode);
+								cursor++;
+								if (hasDirective(nextNode, "else")) break;
+								continue;
+							}
+							break;
+						}
+						const shouldWrapChain = conditionalElements.some(isMonoElement) && !insideClientOnly && !insideMonoElement;
+						if (shouldWrapChain) wrapRange(conditionalElements[0], conditionalElements[conditionalElements.length - 1]);
+						for (const conditionalNode of conditionalElements) {
+							const conditionalIsMono = isMonoElement(conditionalNode);
+							const conditionalIsClientOnly = isClientOnly(conditionalNode);
+							visitChildren(conditionalNode.children, insideClientOnly || conditionalIsClientOnly || shouldWrapChain, insideMonoElement || conditionalIsMono);
+						}
+						index = cursor;
+						continue;
+					}
+					if (hasDirective(node, "else-if") || hasDirective(node, "else")) {
+						visitChildren(node.children, insideClientOnly || nodeIsClientOnly, insideMonoElement || nodeIsMono);
+						index++;
+						continue;
+					}
+					const shouldWrap = nodeIsMono && !insideClientOnly && !insideMonoElement;
+					if (shouldWrap) wrapRange(node, node);
+					visitChildren(node.children, insideClientOnly || nodeIsClientOnly || shouldWrap, insideMonoElement || nodeIsMono);
+					index++;
+				}
+			}
+			visitChildren(ast.children, false, false);
+			if (!changed) return null;
+			return {
+				code: magicString.toString(),
+				map: magicString.generateMap({
+					source: filename,
+					includeContent: true,
+					hires: true
+				})
+			};
+		}
+	};
+}
+//#endregion
+//#region src/vite/mono-ssr-stub.ts
+var VIRTUAL_ID = "\0mono-helper-ssr-stub";
+/**
+* `@mono-lit/helper/ui/*` entries register Lit custom elements at module load
+* (`class extends HTMLElement` + `customElements.define(...)`), which throws
+* `HTMLElement is not defined` when evaluated in the Node SSR context.
+*
+* Every `<mono-*>` tag is already wrapped in `<ClientOnly>` and declared via
+* `isCustomElement`, so nothing on the server needs these elements registered.
+* This plugin resolves those side-effect imports to an empty module in the
+* server build only — the client build keeps the real modules, so the elements
+* still register and render after hydration.
+*/
+function monoSsrStubPlugin(options = {}) {
+	const packagePrefix = options.packagePrefix ?? "@mono-lit/helper/ui/";
+	return {
+		name: "@mono-lit/helper:mono-ssr-stub",
+		enforce: "pre",
+		resolveId(source, _importer, resolveOptions) {
+			if (!(resolveOptions?.ssr === true || this?.environment?.name === "ssr")) return null;
+			if (source.startsWith(packagePrefix) && !source.startsWith(`${packagePrefix}shadow/`) && !source.endsWith(".css")) return VIRTUAL_ID;
+			return null;
+		},
+		load(id) {
+			if (id === VIRTUAL_ID) return "export {}";
+			return null;
+		}
+	};
+}
+//#endregion
+//#region src/vite/index.ts
+/**
+* One import, one props object — wires both halves of SSR support for the
+* mono web components:
+*   - the SSR import-stub (so `@mono-lit/helper/ui/*` never evaluates on the server)
+*   - the `<ClientOnly>` template wrapper (so `<mono-*>` only renders client-side)
+*
+* Usage:
+*   import { monoSsr } from '@mono-lit/helper/vite'
+*   plugins: [monoSsr()]
+*/
+function monoSsr(options = {}) {
+	const { prefix = "mono-", wrapper = "ClientOnly", ssrStubPrefix = "@mono-lit/helper/ui/", exclude = [], lightWrap = true, litWrapper = false, litWrapperComponent, shadowOverride = [] } = options;
+	return [monoSsrStubPlugin({ packagePrefix: ssrStubPrefix }), monoClientOnlyPlugin({
+		prefix,
+		wrapper,
+		exclude,
+		lightWrap,
+		litWrapper,
+		litWrapperComponent,
+		shadowOverride
+	})];
+}
+//#endregion
+export { monoSsrStubPlugin as n, monoClientOnlyPlugin as r, monoSsr as t };

package/dist/vite.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/vite.js

@@ -0,0 +1,2 @@
+import { n as monoSsrStubPlugin, r as monoClientOnlyPlugin, t as monoSsr } from "./vite-C5iUK7so.js";
+export { monoClientOnlyPlugin, monoSsr, monoSsrStubPlugin };

package/dist/vue.d.ts

@@ -0,0 +1,282 @@
+// GENERATED by scripts/gen-vue-types.mjs — do not edit.
+//
+// Vue `GlobalComponents` augmentation for every registered `<mono-*>` element.
+// Volar reads this to offer prop completion and to type-check attributes inside a
+// Vue SFC template. It is referenced from the package's types entry, so importing
+// anything from '@mono-lit/helper' activates it — no consumer setup.
+
+import type { DefineComponent, HTMLAttributes, ReservedProps } from 'vue'
+import type { AccordionProps } from './src/components/accordion/accordion-types.js'
+import type { AlertProps } from './src/components/alert/alert-types.js'
+import type { BreadcrumbListProps } from './src/components/breadcrumb/breadcrumb-types.js'
+import type { BreadcrumbProps } from './src/components/breadcrumb/breadcrumb-types.js'
+import type { ButtonDropdownProps } from './src/components/button/button-dropdown-types.js'
+import type { ButtonProps } from './src/components/button/button-types.js'
+import type { CardProps } from './src/components/card/card-types.js'
+import type { ChartProps } from './src/components/chart/chart-types.js'
+import type { CheckboxProps } from './src/components/checkbox/checkbox-types.js'
+import type { DateProps } from './src/components/date/date-types.js'
+import type { DrawerProps } from './src/components/drawer/drawer-types.js'
+import type { DropdownProps } from './src/components/dropdown/dropdown-types.js'
+import type { DropdownTableProps } from './src/components/dropdown-table/dropdown-table-types.js'
+import type { FileUploadProps } from './src/components/file-upload/file-upload-types.js'
+import type { InputProps } from './src/components/input/input-types.js'
+import type { MenuListProps } from './src/components/menu/menu-types.js'
+import type { MenuProps } from './src/components/menu/menu-types.js'
+import type { ModalProps } from './src/components/modal/modal-types.js'
+import type { MonoChipProps } from './src/components/chip/chip-types.js'
+import type { MonoFilterBuilderProps } from './src/components/filter/filter-types.js'
+import type { NavProps } from './src/components/nav/nav-types.js'
+import type { RadioProps } from './src/components/radio/radio-types.js'
+import type { RichTextEditorProps } from './src/components/rich-text-editor/rich-text-editor-types.js'
+import type { SelectProps } from './src/components/select/select-types.js'
+import type { SidebarProps } from './src/components/sidebar/sidebar-types.js'
+import type { SwitchProps } from './src/components/switch/switch-types.js'
+import type { TableCheckboxProps } from './src/components/table/table-types.js'
+import type { TableDetailProps } from './src/components/table/table-types.js'
+import type { TableEmptyProps } from './src/components/table/table-types.js'
+import type { TableErrorProps } from './src/components/table/table-types.js'
+import type { TableInfoProps } from './src/components/table/table-types.js'
+import type { TableLoadingProps } from './src/components/table/table-types.js'
+import type { TablePageSizeProps } from './src/components/table/table-types.js'
+import type { TablePagingGroupProps } from './src/components/table/table-types.js'
+import type { TablePagingProps } from './src/components/table/table-types.js'
+import type { TableSearchProps } from './src/components/table/table-types.js'
+import type { TableSortProps } from './src/components/table/table-types.js'
+import type { TableSummaryProps } from './src/components/table/table-types.js'
+import type { TableThProps } from './src/components/table/table-types.js'
+import type { TabsProps } from './src/components/tabs/tabs-types.js'
+import type { TagInputProps } from './src/components/tag-input/tag-input-types.js'
+import type { TextareaProps } from './src/components/textarea/textarea-types.js'
+import type { AccordionEvents } from './src/components/accordion/accordion-types.js'
+import type { BreadcrumbEvents } from './src/components/breadcrumb/breadcrumb-types.js'
+import type { ButtonDropdownEvents } from './src/components/button/button-dropdown-types.js'
+import type { ButtonEvents } from './src/components/button/button-types.js'
+import type { CardEvents } from './src/components/card/card-types.js'
+import type { CheckboxEvents } from './src/components/checkbox/checkbox-types.js'
+import type { ChipEvents } from './src/components/chip/chip-types.js'
+import type { DateEvents } from './src/components/date/date-types.js'
+import type { DrawerEvents } from './src/components/drawer/drawer-types.js'
+import type { DropdownEvents } from './src/components/dropdown/dropdown-types.js'
+import type { DropdownTableEvents } from './src/components/dropdown-table/dropdown-table-types.js'
+import type { FileUploadEvents } from './src/components/file-upload/file-upload-types.js'
+import type { FilterBuilderEvents } from './src/components/filter/filter-types.js'
+import type { InputEvents } from './src/components/input/input-types.js'
+import type { MenuEvents } from './src/components/menu/menu-types.js'
+import type { ModalEvents } from './src/components/modal/modal-types.js'
+import type { NavEvents } from './src/components/nav/nav-types.js'
+import type { RadioEvents } from './src/components/radio/radio-types.js'
+import type { RichTextEditorEvents } from './src/components/rich-text-editor/rich-text-editor-types.js'
+import type { SelectEvents } from './src/components/select/select-types.js'
+import type { SidebarEvents } from './src/components/sidebar/sidebar-types.js'
+import type { SwitchEvents } from './src/components/switch/switch-types.js'
+import type { TableCheckboxEvents } from './src/components/table/mono-table-checkbox-core.js'
+import type { TableDetailEvents } from './src/components/table/mono-table-detail-core.js'
+import type { TableEmptyEvents } from './src/components/table/mono-table-empty-core.js'
+import type { TableErrorEvents } from './src/components/table/mono-table-error-core.js'
+import type { TabsEvents } from './src/components/tabs/tabs-types.js'
+import type { TagInputEvents } from './src/components/tag-input/tag-input-types.js'
+import type { TextareaEvents } from './src/components/textarea/textarea-types.js'
+import type { MonoPending } from './src/composables/mono-skeleton.js'
+
+/**
+ * Props EVERY mono element has, light and shadow, on top of its own `*Props`:
+ * `pending` — the automatic skeleton (`:pending="busy"`, `:pending.prop="{ active, count }"`).
+ */
+export interface MonoCommonProps {
+  pending?: MonoPending
+}
+
+/**
+ * Drop a string index signature so a typo stays an error.
+ *
+ * `MonoChartProps` and `MonoFilterProps` carry `[key: string]: unknown` because
+ * they double as the controllers' `props()` bag. Left alone, chart and
+ * filter-builder would accept any attribute — the one place strictness would
+ * silently not apply.
+ */
+type StripIndex<T> = {
+  [K in keyof T as string extends K ? never : symbol extends K ? never : K]: T[K]
+}
+
+/**
+ * Turn a component's `*Events` interface into the handler props Vue expects.
+ *
+ * Each `*Events` interface lists the PLAIN names (`change`, `click`, `open`; a
+ * multi-word one as both `'loading-change'` and `loadingChange`) and, after them,
+ * the kept `mno-*` / `mnoX` aliases. Only the non-kebab keys become props: Volar
+ * compiles `@change` to `onChange`, `@loading-change` and `@loadingChange` both to
+ * `onLoadingChange`, and `@mno-change` to `onMnoChange`, so
+ * `on${Capitalize<K>}` over the camel keys lands exactly on every spelling, while
+ * a kebab key would produce `onMno-change` and never match.
+ */
+type MonoEvents<E> = {
+  [K in Extract<keyof E, string> as K extends `${string}-${string}`
+    ? never
+    : `on${Capitalize<K>}`]?: (event: E[K]) => void
+}
+
+/**
+ * `HTMLAttributes` keeps `id` / `class` / `style` / `data-*` / `v-if` valid;
+ * `ReservedProps` keeps `key` / `ref`. The native handler props a component
+ * re-types (`onInput`, `onChange`, `onClick` with a `CustomEvent<Detail>`) are
+ * taken OUT of `HTMLAttributes` first — intersected with Vue's `(e: Event) => void`
+ * they would reject every typed handler under `strictFunctionTypes`.
+ */
+type MonoElement<P, E = {}> = DefineComponent<
+  StripIndex<P> & MonoCommonProps & Omit<HTMLAttributes, keyof MonoEvents<E>> & ReservedProps & MonoEvents<E>
+>
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'mono-accordion': MonoElement<AccordionProps, AccordionEvents>
+    'mono-alert': MonoElement<AlertProps>
+    'mono-breadcrumb': MonoElement<BreadcrumbProps, BreadcrumbEvents>
+    'mono-breadcrumb-list': MonoElement<BreadcrumbListProps>
+    'mono-button': MonoElement<ButtonProps, ButtonEvents>
+    'mono-button-dropdown': MonoElement<ButtonDropdownProps, ButtonDropdownEvents>
+    'mono-card': MonoElement<CardProps, CardEvents>
+    'mono-chart': MonoElement<ChartProps>
+    'mono-chart-bar': MonoElement<ChartProps>
+    'mono-chart-doughnut': MonoElement<ChartProps>
+    'mono-chart-line': MonoElement<ChartProps>
+    'mono-chart-pie': MonoElement<ChartProps>
+    'mono-checkbox': MonoElement<CheckboxProps, CheckboxEvents>
+    'mono-chip': MonoElement<MonoChipProps, ChipEvents>
+    'mono-date': MonoElement<DateProps, DateEvents>
+    'mono-drawer': MonoElement<DrawerProps, DrawerEvents>
+    'mono-dropdown': MonoElement<DropdownProps, DropdownEvents>
+    'mono-dropdown-table': MonoElement<DropdownTableProps, DropdownTableEvents>
+    'mono-file-upload': MonoElement<FileUploadProps, FileUploadEvents>
+    'mono-filter-builder': MonoElement<MonoFilterBuilderProps, FilterBuilderEvents>
+    'mono-input': MonoElement<InputProps, InputEvents>
+    'mono-menu': MonoElement<MenuProps, MenuEvents>
+    'mono-menu-list': MonoElement<MenuListProps>
+    'mono-modal': MonoElement<ModalProps, ModalEvents>
+    'mono-nav': MonoElement<NavProps, NavEvents>
+    'mono-radio': MonoElement<RadioProps, RadioEvents>
+    'mono-rich-text-editor': MonoElement<RichTextEditorProps, RichTextEditorEvents>
+    'mono-select': MonoElement<SelectProps, SelectEvents>
+    'mono-shadow-accordion': MonoElement<AccordionProps, AccordionEvents>
+    'mono-shadow-alert': MonoElement<AlertProps>
+    'mono-shadow-breadcrumb': MonoElement<BreadcrumbProps, BreadcrumbEvents>
+    'mono-shadow-breadcrumb-list': MonoElement<BreadcrumbListProps>
+    'mono-shadow-button': MonoElement<ButtonProps, ButtonEvents>
+    'mono-shadow-button-dropdown': MonoElement<ButtonDropdownProps, ButtonDropdownEvents>
+    'mono-shadow-card': MonoElement<CardProps, CardEvents>
+    'mono-shadow-chart': MonoElement<ChartProps>
+    'mono-shadow-chart-bar': MonoElement<ChartProps>
+    'mono-shadow-chart-doughnut': MonoElement<ChartProps>
+    'mono-shadow-chart-line': MonoElement<ChartProps>
+    'mono-shadow-chart-pie': MonoElement<ChartProps>
+    'mono-shadow-checkbox': MonoElement<CheckboxProps, CheckboxEvents>
+    'mono-shadow-chip': MonoElement<MonoChipProps, ChipEvents>
+    'mono-shadow-date': MonoElement<DateProps, DateEvents>
+    'mono-shadow-drawer': MonoElement<DrawerProps, DrawerEvents>
+    'mono-shadow-dropdown': MonoElement<DropdownProps, DropdownEvents>
+    'mono-shadow-dropdown-table': MonoElement<DropdownTableProps, DropdownTableEvents>
+    'mono-shadow-file-upload': MonoElement<FileUploadProps, FileUploadEvents>
+    'mono-shadow-filter-builder': MonoElement<MonoFilterBuilderProps, FilterBuilderEvents>
+    'mono-shadow-input': MonoElement<InputProps, InputEvents>
+    'mono-shadow-menu': MonoElement<MenuProps, MenuEvents>
+    'mono-shadow-modal': MonoElement<ModalProps, ModalEvents>
+    'mono-shadow-nav': MonoElement<NavProps, NavEvents>
+    'mono-shadow-radio': MonoElement<RadioProps, RadioEvents>
+    'mono-shadow-rich-text-editor': MonoElement<RichTextEditorProps, RichTextEditorEvents>
+    'mono-shadow-select': MonoElement<SelectProps, SelectEvents>
+    'mono-shadow-sidebar': MonoElement<SidebarProps, SidebarEvents>
+    'mono-shadow-switch': MonoElement<SwitchProps, SwitchEvents>
+    'mono-shadow-table-checkbox': MonoElement<TableCheckboxProps, TableCheckboxEvents>
+    'mono-shadow-table-detail': MonoElement<TableDetailProps, TableDetailEvents>
+    'mono-shadow-table-empty': MonoElement<TableEmptyProps, TableEmptyEvents>
+    'mono-shadow-table-error': MonoElement<TableErrorProps, TableErrorEvents>
+    'mono-shadow-table-info': MonoElement<TableInfoProps>
+    'mono-shadow-table-loading': MonoElement<TableLoadingProps>
+    'mono-shadow-table-page-size': MonoElement<TablePageSizeProps>
+    'mono-shadow-table-paging': MonoElement<TablePagingProps>
+    'mono-shadow-table-paging-group': MonoElement<TablePagingGroupProps>
+    'mono-shadow-table-search': MonoElement<TableSearchProps>
+    'mono-shadow-table-sort': MonoElement<TableSortProps>
+    'mono-shadow-table-summary': MonoElement<TableSummaryProps>
+    'mono-shadow-table-th': MonoElement<TableThProps>
+    'mono-shadow-tabs': MonoElement<TabsProps, TabsEvents>
+    'mono-shadow-tag-input': MonoElement<TagInputProps, TagInputEvents>
+    'mono-shadow-textarea': MonoElement<TextareaProps, TextareaEvents>
+    'mono-sidebar': MonoElement<SidebarProps, SidebarEvents>
+    'mono-switch': MonoElement<SwitchProps, SwitchEvents>
+    'mono-table-checkbox': MonoElement<TableCheckboxProps, TableCheckboxEvents>
+    'mono-table-detail': MonoElement<TableDetailProps, TableDetailEvents>
+    'mono-table-empty': MonoElement<TableEmptyProps, TableEmptyEvents>
+    'mono-table-error': MonoElement<TableErrorProps, TableErrorEvents>
+    'mono-table-info': MonoElement<TableInfoProps>
+    'mono-table-loading': MonoElement<TableLoadingProps>
+    'mono-table-page-size': MonoElement<TablePageSizeProps>
+    'mono-table-paging': MonoElement<TablePagingProps>
+    'mono-table-paging-group': MonoElement<TablePagingGroupProps>
+    'mono-table-search': MonoElement<TableSearchProps>
+    'mono-table-sort': MonoElement<TableSortProps>
+    'mono-table-summary': MonoElement<TableSummaryProps>
+    'mono-table-th': MonoElement<TableThProps>
+    'mono-tabs': MonoElement<TabsProps, TabsEvents>
+    'mono-tag-input': MonoElement<TagInputProps, TagInputEvents>
+    'mono-textarea': MonoElement<TextareaProps, TextareaEvents>
+  }
+}
+
+/**
+ * `createMonoUI({ 'mono-button': { size: 'xs' } })` — per-tag prop completion.
+ * Light tags only: one key configures both builds (`mono-button` also reaches
+ * `mono-shadow-button`). Augments the interface where it is declared.
+ */
+declare module './src/composables/mono-ui.js' {
+  interface MonoUIComponents {
+    'mono-accordion': StripIndex<AccordionProps> & MonoCommonProps
+    'mono-alert': StripIndex<AlertProps> & MonoCommonProps
+    'mono-breadcrumb': StripIndex<BreadcrumbProps> & MonoCommonProps
+    'mono-breadcrumb-list': StripIndex<BreadcrumbListProps> & MonoCommonProps
+    'mono-button': StripIndex<ButtonProps> & MonoCommonProps
+    'mono-button-dropdown': StripIndex<ButtonDropdownProps> & MonoCommonProps
+    'mono-card': StripIndex<CardProps> & MonoCommonProps
+    'mono-chart': StripIndex<ChartProps> & MonoCommonProps
+    'mono-chart-bar': StripIndex<ChartProps> & MonoCommonProps
+    'mono-chart-doughnut': StripIndex<ChartProps> & MonoCommonProps
+    'mono-chart-line': StripIndex<ChartProps> & MonoCommonProps
+    'mono-chart-pie': StripIndex<ChartProps> & MonoCommonProps
+    'mono-checkbox': StripIndex<CheckboxProps> & MonoCommonProps
+    'mono-chip': StripIndex<MonoChipProps> & MonoCommonProps
+    'mono-date': StripIndex<DateProps> & MonoCommonProps
+    'mono-drawer': StripIndex<DrawerProps> & MonoCommonProps
+    'mono-dropdown': StripIndex<DropdownProps> & MonoCommonProps
+    'mono-dropdown-table': StripIndex<DropdownTableProps> & MonoCommonProps
+    'mono-file-upload': StripIndex<FileUploadProps> & MonoCommonProps
+    'mono-filter-builder': StripIndex<MonoFilterBuilderProps> & MonoCommonProps
+    'mono-input': StripIndex<InputProps> & MonoCommonProps
+    'mono-menu': StripIndex<MenuProps> & MonoCommonProps
+    'mono-menu-list': StripIndex<MenuListProps> & MonoCommonProps
+    'mono-modal': StripIndex<ModalProps> & MonoCommonProps
+    'mono-nav': StripIndex<NavProps> & MonoCommonProps
+    'mono-radio': StripIndex<RadioProps> & MonoCommonProps
+    'mono-rich-text-editor': StripIndex<RichTextEditorProps> & MonoCommonProps
+    'mono-select': StripIndex<SelectProps> & MonoCommonProps
+    'mono-sidebar': StripIndex<SidebarProps> & MonoCommonProps
+    'mono-switch': StripIndex<SwitchProps> & MonoCommonProps
+    'mono-table-checkbox': StripIndex<TableCheckboxProps> & MonoCommonProps
+    'mono-table-detail': StripIndex<TableDetailProps> & MonoCommonProps
+    'mono-table-empty': StripIndex<TableEmptyProps> & MonoCommonProps
+    'mono-table-error': StripIndex<TableErrorProps> & MonoCommonProps
+    'mono-table-info': StripIndex<TableInfoProps> & MonoCommonProps
+    'mono-table-loading': StripIndex<TableLoadingProps> & MonoCommonProps
+    'mono-table-page-size': StripIndex<TablePageSizeProps> & MonoCommonProps
+    'mono-table-paging': StripIndex<TablePagingProps> & MonoCommonProps
+    'mono-table-paging-group': StripIndex<TablePagingGroupProps> & MonoCommonProps
+    'mono-table-search': StripIndex<TableSearchProps> & MonoCommonProps
+    'mono-table-sort': StripIndex<TableSortProps> & MonoCommonProps
+    'mono-table-summary': StripIndex<TableSummaryProps> & MonoCommonProps
+    'mono-table-th': StripIndex<TableThProps> & MonoCommonProps
+    'mono-tabs': StripIndex<TabsProps> & MonoCommonProps
+    'mono-tag-input': StripIndex<TagInputProps> & MonoCommonProps
+    'mono-textarea': StripIndex<TextareaProps> & MonoCommonProps
+  }
+}
+
+export {}