@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0-next.35

package/dist/js/remote-vue-components/src/icons/lib/createIcon.mjs

@@ -0,0 +1,75 @@
+import { composition } from "../../lib/composition.mjs";
+import { Icon } from "../../auto-generated/Icon.mjs";
+import { injectContextIcon } from "../IconSetProvider.mjs";
+import { defineComponent, h } from "vue";
+//#region src/icons/lib/createIcon.ts
+/**
+* The runtime behind the generated icons in `../components`.
+*
+* A Flow icon is not a remote element: it is Flow's `Icon` with an `<svg>`
+* inside it, and the host merges its own classes and ARIA onto that very
+* element. So the binding's job is to emit the same `<svg>` React emits — path
+* data, Tabler's default attribute set, and the `tabler-icon…` classes — and
+* let the host do the rest.
+*
+* Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. The attribute
+* sets below are adapted from `@tabler/icons-react`; see this package's
+* LICENSE.
+*/
+var tablerAttributes = {
+	outline: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": 2,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	filled: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		stroke: "none"
+	}
+};
+var asAttributes = (attributes) => Object.fromEntries(Object.entries(attributes).map(([name, value]) => [`^${name}`, value]));
+var svgVNode = (node) => h(node.tag, asAttributes(node.attributes), node.children.map(svgVNode));
+var IconElement = Icon;
+/**
+* Flow's `Icon` around an `<svg>`, with everything the caller passed on it.
+*
+* A composition, and reporting nothing itself: Flow's React icons render
+* `IconView`, so neither the icon nor its `Icon` counts as usage.
+*/
+var flowIcon = (name, renderSvg) => composition(defineComponent({
+	name: `Icon${name}`,
+	inheritAttrs: false,
+	setup(_props, { attrs }) {
+		const replacement = injectContextIcon(name);
+		return () => h(IconElement, attrs, { default: () => [replacement.value ? h(replacement.value) : renderSvg()] });
+	}
+}));
+/** A Tabler icon, from the path data inlined into the generated file. */
+var tablerIcon = (name, type, tablerName, children) => flowIcon(name, () => svgVNode({
+	tag: "svg",
+	attributes: {
+		...tablerAttributes[type],
+		class: `tabler-icon tabler-icon-${tablerName}`
+	},
+	children: children.map(([tag, attributes]) => ({
+		tag,
+		attributes,
+		children: []
+	}))
+}));
+/** An icon `icons.yaml` defines as markup of its own. */
+var svgIcon = (name, root) => flowIcon(name, () => svgVNode(root));
+//#endregion
+export { svgIcon, tablerIcon };
+
+//# sourceMappingURL=createIcon.mjs.map

package/dist/js/remote-vue-components/src/icons/lib/createIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIcon.mjs","names":[],"sources":["../../../../../../src/icons/lib/createIcon.ts"],"sourcesContent":["/**\n * The runtime behind the generated icons in `../components`.\n *\n * A Flow icon is not a remote element: it is Flow's `Icon` with an `<svg>`\n * inside it, and the host merges its own classes and ARIA onto that very\n * element. So the binding's job is to emit the same `<svg>` React emits — path\n * data, Tabler's default attribute set, and the `tabler-icon…` classes — and\n * let the host do the rest.\n *\n * Tabler Icons — MIT License, Copyright (c) 2020-2026 Paweł Kuna. The attribute\n * sets below are adapted from `@tabler/icons-react`; see this package's\n * LICENSE.\n */\nimport { Icon } from \"@/auto-generated\";\nimport { injectContextIcon } from \"@/icons/IconSetProvider\";\nimport type { IconName } from \"@/icons/iconNames\";\nimport { composition } from \"@/lib/composition\";\nimport {\n  defineComponent,\n  h,\n  type Component,\n  type DefineComponent,\n  type VNode,\n} from \"vue\";\n\nexport type SvgAttributes = Record<string, string | number>;\n\n/** A leaf element of an icon: tag name plus its attributes. */\nexport type SvgChild = [tag: string, attributes: SvgAttributes];\n\n/** A custom icon's markup, as parsed from `icons.yaml`. */\nexport interface SvgNode {\n  tag: string;\n  attributes: SvgAttributes;\n  children: SvgNode[];\n}\n\nexport type TablerIconType = \"outline\" | \"filled\";\n\n/*\n * What `createTablerIcon` in `@mittwald/flow-icons` ends up with once its\n * `size`, `stroke` and `color` defaults are applied. Resolved here rather than\n * per render: a remote icon never takes those props — Flow's `Icon` sizes and\n * colours it through CSS, on the host.\n */\nconst tablerAttributes: Record<TablerIconType, SvgAttributes> = {\n  outline: {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    \"stroke-width\": 2,\n    \"stroke-linecap\": \"round\",\n    \"stroke-linejoin\": \"round\",\n  },\n  filled: {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: 24,\n    height: 24,\n    viewBox: \"0 0 24 24\",\n    fill: \"currentColor\",\n    stroke: \"none\",\n  },\n};\n\n/*\n * Every attribute is forced to *be* an attribute (`^`): Vue would otherwise set\n * a matching DOM property, and an SVG element's properties are read-only\n * `SVGAnimatedLength`s rather than the strings the host has to receive.\n */\nconst asAttributes = (attributes: SvgAttributes): Record<string, unknown> =>\n  Object.fromEntries(\n    Object.entries(attributes).map(([name, value]) => [`^${name}`, value]),\n  );\n\nconst svgVNode = (node: SvgNode): VNode =>\n  h(node.tag, asAttributes(node.attributes), node.children.map(svgVNode));\n\n/*\n * Widened on purpose: `Icon`'s generated type names Flow's `Icon` props one by\n * one, and what arrives here is the caller's `attrs` — an open record. The\n * component the caller writes is typed; this is the one hop where the props are\n * only forwarded, and narrowing it would mean restating the contract.\n */\nconst IconElement = Icon as Component;\n\n/**\n * What an icon is, typed so JSX accepts it.\n *\n * Not `Component`: that union includes a plain options object, which has no\n * call signature — and a JSX element type needs one, so `<IconSearch />` is a\n * type error for anyone writing JSX. The value is the same either way; only the\n * declared type is the constructible half of the union.\n */\nexport type FlowIconComponent = DefineComponent<Record<string, never>>;\n\n/**\n * Flow's `Icon` around an `<svg>`, with everything the caller passed on it.\n *\n * A composition, and reporting nothing itself: Flow's React icons render\n * `IconView`, so neither the icon nor its `Icon` counts as usage.\n */\nconst flowIcon = (name: IconName, renderSvg: () => VNode): FlowIconComponent =>\n  composition(\n    defineComponent({\n      name: `Icon${name}`,\n      /*\n       * The props are Flow `Icon`'s, not this component's — `size`, `color`, an\n       * `aria-label`. Declaring them would mean copying that contract; passing\n       * `attrs` on hands the element the same set React forwards to `IconView`.\n       */\n      inheritAttrs: false,\n      setup(_props, { attrs }) {\n        /*\n         * The swap happens on the `<svg>`, not on the `Icon` around it — a\n         * replacement is another icon, and it gets Flow's sizing, colour and\n         * ARIA like the built-in one. Same place React's `useContextIcon` does\n         * it.\n         */\n        const replacement = injectContextIcon(name);\n\n        return () =>\n          h(IconElement, attrs, {\n            default: () => [\n              replacement.value ? h(replacement.value) : renderSvg(),\n            ],\n          });\n      },\n    }),\n  );\n\n/** A Tabler icon, from the path data inlined into the generated file. */\nexport const tablerIcon = (\n  name: IconName,\n  type: TablerIconType,\n  tablerName: string,\n  children: SvgChild[],\n): FlowIconComponent =>\n  flowIcon(name, () =>\n    svgVNode({\n      tag: \"svg\",\n      attributes: {\n        ...tablerAttributes[type],\n        class: `tabler-icon tabler-icon-${tablerName}`,\n      },\n      children: children.map(([tag, attributes]) => ({\n        tag,\n        attributes,\n        children: [],\n      })),\n    }),\n  );\n\n/** An icon `icons.yaml` defines as markup of its own. */\nexport const svgIcon = (name: IconName, root: SvgNode): FlowIconComponent =>\n  flowIcon(name, () => svgVNode(root));\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6CA,IAAM,mBAA0D;CAC9D,SAAS;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;EACT,MAAM;EACN,QAAQ;EACR,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;CACrB;CACA,QAAQ;EACN,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;EACT,MAAM;EACN,QAAQ;CACV;AACF;AAOA,IAAM,gBAAgB,eACpB,OAAO,YACL,OAAO,QAAQ,UAAU,CAAC,CAAC,KAAK,CAAC,MAAM,WAAW,CAAC,IAAI,QAAQ,KAAK,CAAC,CACvE;AAEF,IAAM,YAAY,SAChB,EAAE,KAAK,KAAK,aAAa,KAAK,UAAU,GAAG,KAAK,SAAS,IAAI,QAAQ,CAAC;AAQxE,IAAM,cAAc;;;;;;;AAkBpB,IAAM,YAAY,MAAgB,cAChC,YACE,gBAAgB;CACd,MAAM,OAAO;CAMb,cAAc;CACd,MAAM,QAAQ,EAAE,SAAS;EAOvB,MAAM,cAAc,kBAAkB,IAAI;EAE1C,aACE,EAAE,aAAa,OAAO,EACpB,eAAe,CACb,YAAY,QAAQ,EAAE,YAAY,KAAK,IAAI,UAAU,CACvD,EACF,CAAC;CACL;AACF,CAAC,CACH;;AAGF,IAAa,cACX,MACA,MACA,YACA,aAEA,SAAS,YACP,SAAS;CACP,KAAK;CACL,YAAY;EACV,GAAG,iBAAiB;EACpB,OAAO,2BAA2B;CACpC;CACA,UAAU,SAAS,KAAK,CAAC,KAAK,iBAAiB;EAC7C;EACA;EACA,UAAU,CAAC;CACb,EAAE;AACJ,CAAC,CACH;;AAGF,IAAa,WAAW,MAAgB,SACtC,SAAS,YAAY,SAAS,IAAI,CAAC"}

package/dist/js/remote-vue-components/src/lib/composition.mjs

@@ -0,0 +1,30 @@
+import { getCurrentInstance } from "vue";
+//#region src/lib/composition.ts
+var compositions = /* @__PURE__ */ new WeakSet();
+/**
+* Marks one of this package's own components — a composition such as `Modal` or
+* `List`, or the root. The elements it creates are its implementation, not the
+* extension's.
+*/
+var composition = (component) => {
+	compositions.add(component);
+	return component;
+};
+/**
+* Whether the calling component was created by a composition rather than by the
+* extension.
+*
+* Vue records on every vnode the instance whose render created it (`ctx`),
+* `cloneVNode` keeps it, and a slot runs with the context of whoever wrote it.
+* An extension's `<Heading>` inside a `<Modal>` therefore belongs to the
+* extension, and the `OverlayContent` the `Modal` renders around it belongs to
+* the `Modal` — the line Flow's React views draw with `markViewComponents`.
+*/
+var isRenderedByComposition = () => {
+	const owner = (getCurrentInstance()?.vnode)?.ctx;
+	return !!owner && compositions.has(owner.type);
+};
+//#endregion
+export { composition, isRenderedByComposition };
+
+//# sourceMappingURL=composition.mjs.map

package/dist/js/remote-vue-components/src/lib/composition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"composition.mjs","names":[],"sources":["../../../../../src/lib/composition.ts"],"sourcesContent":["import { getCurrentInstance, type ComponentInternalInstance } from \"vue\";\n\nconst compositions = new WeakSet<object>();\n\n/**\n * Marks one of this package's own components — a composition such as `Modal` or\n * `List`, or the root. The elements it creates are its implementation, not the\n * extension's.\n */\nexport const composition = <T extends object>(component: T): T => {\n  compositions.add(component);\n  return component;\n};\n\n/**\n * Whether the calling component was created by a composition rather than by the\n * extension.\n *\n * Vue records on every vnode the instance whose render created it (`ctx`),\n * `cloneVNode` keeps it, and a slot runs with the context of whoever wrote it.\n * An extension's `<Heading>` inside a `<Modal>` therefore belongs to the\n * extension, and the `OverlayContent` the `Modal` renders around it belongs to\n * the `Modal` — the line Flow's React views draw with `markViewComponents`.\n */\nexport const isRenderedByComposition = (): boolean => {\n  const vnode = getCurrentInstance()?.vnode as\n    { ctx?: ComponentInternalInstance | null } | undefined;\n  const owner = vnode?.ctx;\n  return !!owner && compositions.has(owner.type);\n};\n"],"mappings":";;AAEA,IAAM,+BAAe,IAAI,QAAgB;;;;;;AAOzC,IAAa,eAAiC,cAAoB;CAChE,aAAa,IAAI,SAAS;CAC1B,OAAO;AACT;;;;;;;;;;;AAYA,IAAa,gCAAyC;CAGpD,MAAM,SAFQ,mBAAmB,CAAC,EAAE,MAAA,EAEf;CACrB,OAAO,CAAC,CAAC,SAAS,aAAa,IAAI,MAAM,IAAI;AAC/C"}

package/dist/js/remote-vue-components/src/lib/controlledRemoteValue.mjs

@@ -0,0 +1,63 @@
+//#region src/lib/controlledRemoteValue.ts
+/**
+* The marker the host understands as "the value you just reported is still the
+* current one" — see `useControlledRemoteValueProps` in `packages/components`.
+*/
+var controlledRemoteValueMarker = "___flowControlledRemoteValue___";
+var unknownRemoteEventValue = Symbol("unknownRemoteEventValue");
+var controlledComponentTags = [
+	"flr-markdown-editor",
+	"flr-number-field",
+	"flr-password-creation-field",
+	"flr-search-field",
+	"flr-text-field",
+	"flr-text-area"
+];
+/**
+* Keeps a controlled field's caret from jumping.
+*
+* A remote field reports every keystroke to the app, which writes the value
+* back. That round trip is a full frame late, so a plain write would reset the
+* host input to a value the user has already typed past. The marker tells the
+* host "unchanged", so it leaves its own state alone.
+*
+* The React version has to ask `eventHandlerContext` whether the current
+* `onChange` came from a remote event, because a local Flow component in the
+* same tree calls the same handler. Here every listener call comes from the
+* element, so the remote origin is given.
+*/
+var controlledRemoteValue = (tag) => {
+	const isControlled = controlledComponentTags.includes(tag);
+	let valueOfRemoteEvent = unknownRemoteEventValue;
+	let modelledValueOfRemoteEvent = unknownRemoteEventValue;
+	return {
+		mapProperties: (properties) => isControlled && (valueOfRemoteEvent === properties.value || modelledValueOfRemoteEvent === properties.value) ? {
+			...properties,
+			value: controlledRemoteValueMarker
+		} : properties,
+		/**
+		* What a `v-model` modifier made of the reported value — `.trim` turns
+		* `"Ellen "` into `"Ellen"`. Written back, that is still the echo of what
+		* the field shows, and applying it would take the space the user just
+		* typed; Vue's own `<input v-model.trim>` leaves the input alone for the
+		* same reason.
+		*/
+		recordModelledValue: (value) => {
+			modelledValueOfRemoteEvent = value;
+		},
+		/**
+		* `FlowRemoteElement` hands a listener the event's `detail`, so a `change`
+		* listener is called with the new value itself.
+		*/
+		recordEventPayload: (event, payload) => {
+			if (isControlled && event === "change") {
+				valueOfRemoteEvent = payload;
+				modelledValueOfRemoteEvent = unknownRemoteEventValue;
+			}
+		}
+	};
+};
+//#endregion
+export { controlledRemoteValue };
+
+//# sourceMappingURL=controlledRemoteValue.mjs.map

package/dist/js/remote-vue-components/src/lib/controlledRemoteValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlledRemoteValue.mjs","names":[],"sources":["../../../../../src/lib/controlledRemoteValue.ts"],"sourcesContent":["import type { AnyRecord } from \"@/lib/types\";\n\n/**\n * The marker the host understands as \"the value you just reported is still the\n * current one\" — see `useControlledRemoteValueProps` in `packages/components`.\n */\nconst controlledRemoteValueMarker = \"___flowControlledRemoteValue___\";\n\nconst unknownRemoteEventValue = Symbol(\"unknownRemoteEventValue\");\n\nconst controlledComponentTags = [\n  \"flr-markdown-editor\",\n  \"flr-number-field\",\n  \"flr-password-creation-field\",\n  \"flr-search-field\",\n  \"flr-text-field\",\n  \"flr-text-area\",\n];\n\n/**\n * Keeps a controlled field's caret from jumping.\n *\n * A remote field reports every keystroke to the app, which writes the value\n * back. That round trip is a full frame late, so a plain write would reset the\n * host input to a value the user has already typed past. The marker tells the\n * host \"unchanged\", so it leaves its own state alone.\n *\n * The React version has to ask `eventHandlerContext` whether the current\n * `onChange` came from a remote event, because a local Flow component in the\n * same tree calls the same handler. Here every listener call comes from the\n * element, so the remote origin is given.\n */\nexport const controlledRemoteValue = (tag: string) => {\n  const isControlled = controlledComponentTags.includes(tag);\n  let valueOfRemoteEvent: unknown = unknownRemoteEventValue;\n  let modelledValueOfRemoteEvent: unknown = unknownRemoteEventValue;\n\n  return {\n    mapProperties: (properties: AnyRecord): AnyRecord =>\n      isControlled &&\n      (valueOfRemoteEvent === properties.value ||\n        modelledValueOfRemoteEvent === properties.value)\n        ? { ...properties, value: controlledRemoteValueMarker }\n        : properties,\n\n    /**\n     * What a `v-model` modifier made of the reported value — `.trim` turns\n     * `\"Ellen \"` into `\"Ellen\"`. Written back, that is still the echo of what\n     * the field shows, and applying it would take the space the user just\n     * typed; Vue's own `<input v-model.trim>` leaves the input alone for the\n     * same reason.\n     */\n    recordModelledValue: (value: unknown) => {\n      modelledValueOfRemoteEvent = value;\n    },\n\n    /**\n     * `FlowRemoteElement` hands a listener the event's `detail`, so a `change`\n     * listener is called with the new value itself.\n     */\n    recordEventPayload: (event: string, payload: unknown) => {\n      if (isControlled && event === \"change\") {\n        valueOfRemoteEvent = payload;\n        modelledValueOfRemoteEvent = unknownRemoteEventValue;\n      }\n    },\n  };\n};\n"],"mappings":";;;;;AAMA,IAAM,8BAA8B;AAEpC,IAAM,0BAA0B,OAAO,yBAAyB;AAEhE,IAAM,0BAA0B;CAC9B;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;AAeA,IAAa,yBAAyB,QAAgB;CACpD,MAAM,eAAe,wBAAwB,SAAS,GAAG;CACzD,IAAI,qBAA8B;CAClC,IAAI,6BAAsC;CAE1C,OAAO;EACL,gBAAgB,eACd,iBACC,uBAAuB,WAAW,SACjC,+BAA+B,WAAW,SACxC;GAAE,GAAG;GAAY,OAAO;EAA4B,IACpD;;;;;;;;EASN,sBAAsB,UAAmB;GACvC,6BAA6B;EAC/B;;;;;EAMA,qBAAqB,OAAe,YAAqB;GACvD,IAAI,gBAAgB,UAAU,UAAU;IACtC,qBAAqB;IACrB,6BAA6B;GAC/B;EACF;CACF;AACF"}

package/dist/js/remote-vue-components/src/lib/createFlowRemoteComponent.mjs

@@ -0,0 +1,204 @@
+import { controlledRemoteValue } from "./controlledRemoteValue.mjs";
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { callHandlers, flattenHandlers, isHandlerKey, resolveEventKey } from "./handlers.mjs";
+import { hyphenate } from "./propKeys.mjs";
+import { applyModelModifiers, createModelResolver, isModelModifierKey, modelModifierKeys, modelUpdateArgument } from "./vModel.mjs";
+import { version } from "../version.mjs";
+import { camelize, defineComponent, effectScope, h, isReactive, onBeforeUnmount, onMounted, onUpdated, ref, toRaw, watch } from "vue";
+import { FlowRemoteElement } from "@mittwald/flow-remote-elements";
+//#region src/lib/createFlowRemoteComponent.ts
+var slotWrapperTag = "flr-slot-root-wrapper";
+/**
+* Wraps a `flr-*` remote element in a Vue component.
+*
+* Everything the wrapper needs at runtime — which keys are remote properties,
+* which are events, which are slots — is already on the element class
+* (`remotePropertyDefinitions`, `remoteEventDefinitions`,
+* `remoteSlotDefinitions`). So unlike the React counterpart, which has the
+* generator write an `eventProps` map into every generated file, this factory
+* reads the element's own metadata. What a generated file still names is what
+* the element cannot tell at runtime: its slots and its boolean props.
+*/
+function createFlowRemoteComponent(tag, name, Element, options = {}) {
+	const slotNames = options.slots ?? [];
+	const booleans = new Set(options.booleans);
+	const events = Element.remoteEventDefinitions;
+	const properties = Element.remotePropertyDefinitions;
+	const attributes = Element.remoteAttributeDefinitions;
+	const model = createModelResolver(properties, events);
+	const warnedModels = /* @__PURE__ */ new Set();
+	const warnUnboundModel = (argument) => {
+		if (warnedModels.has(argument)) return;
+		warnedModels.add(argument);
+		const directive = argument === "modelValue" ? "v-model" : `v-model:${argument}`;
+		console.warn(`[flow] ${directive} on <${name}> binds nothing: the component has no controllable prop by that name. Pass the prop and listen to its change event instead.`);
+	};
+	const warnedListeners = /* @__PURE__ */ new Set();
+	const warnListener = (key, message) => {
+		if (warnedListeners.has(key)) return;
+		warnedListeners.add(key);
+		console.warn(`[flow] ${message}`);
+	};
+	return defineComponent({
+		name: `FlowRemote(${name})`,
+		inheritAttrs: false,
+		setup(_props, { attrs, slots }) {
+			const elementRef = ref();
+			const appliedProperties = /* @__PURE__ */ new Map();
+			const deepScope = effectScope();
+			const deepWatches = /* @__PURE__ */ new Map();
+			const watchDeeply = (element, key, value) => {
+				const current = deepWatches.get(key);
+				if (current?.source === value) return;
+				current?.stop();
+				deepWatches.delete(key);
+				if (!isReactive(value) || typeof value !== "object" || value === null) return;
+				const raw = toRaw(value);
+				if (!Array.isArray(raw) && Object.getPrototypeOf(raw) !== Object.prototype) return;
+				const stop = deepScope.run(() => watch(() => value, () => {
+					element[key] = Array.isArray(value) ? [...value] : { ...value };
+				}, { deep: true }));
+				if (stop) deepWatches.set(key, {
+					source: value,
+					stop
+				});
+			};
+			const attachedListeners = /* @__PURE__ */ new Map();
+			let currentHandlers = /* @__PURE__ */ new Map();
+			const firedOnce = /* @__PURE__ */ new Set();
+			const reportUsage = useComponentUsage(name);
+			const controlled = controlledRemoteValue(tag);
+			/**
+			* The handlers for one v-on key, its modifiers applied. `.once` holds per
+			* component instance, as it does for Vue's own `emit`. `.capture` and
+			* `.passive` have nothing to act on in the host's event.
+			*/
+			const listenerFor = (key, { event, modifiers }, handlers) => {
+				const ignored = ["capture", "passive"].filter((modifier) => modifiers.has(modifier));
+				if (ignored.length > 0) warnListener(key, `@${hyphenate(event)}.${ignored.join(".")} on <${name}>: the host's event has no ${ignored.join(" or ")} mode, so the modifier is ignored and the handler runs without it.`);
+				if (!modifiers.has("once")) return handlers;
+				return [(...args) => {
+					if (firedOnce.has(key)) return;
+					firedOnce.add(key);
+					callHandlers(handlers, ...args);
+				}];
+			};
+			/**
+			* Splits the attrs Vue collected into remote properties and event
+			* listeners, and normalizes the two spellings Vue templates produce.
+			*/
+			const readAttrs = () => {
+				const propertyValues = /* @__PURE__ */ new Map([[FlowRemoteElement.initializationPropertyName, true], [FlowRemoteElement.versionPropertyName, version]]);
+				const listeners = /* @__PURE__ */ new Map();
+				const addListeners = (event, handlers) => listeners.set(event, [...listeners.get(event) ?? [], ...handlers]);
+				for (const rawKey of Object.keys(attrs)) {
+					const updateArgument = modelUpdateArgument(rawKey);
+					if (updateArgument !== void 0) {
+						const binding = model.resolve(updateArgument);
+						if (!binding) {
+							warnUnboundModel(updateArgument);
+							continue;
+						}
+						const handlers = flattenHandlers(attrs[rawKey]);
+						const modifiers = modelModifierKeys(updateArgument).map((key) => attrs[key]).find((value) => value !== void 0);
+						if (handlers.length > 0) addListeners(binding.event, [(payload) => {
+							const modelled = applyModelModifiers(payload, modifiers);
+							controlled.recordModelledValue(modelled);
+							callHandlers(handlers, modelled);
+						}]);
+						continue;
+					}
+					if (rawKey === "modelValue") {
+						const binding = model.resolve(rawKey);
+						if (binding) propertyValues.set(binding.property, attrs[rawKey]);
+						else warnUnboundModel(rawKey);
+						continue;
+					}
+					if (isModelModifierKey(rawKey) && !properties.has(rawKey) && !attributes.has(rawKey)) continue;
+					if (rawKey === "style") continue;
+					const value = attrs[rawKey];
+					if (isHandlerKey(rawKey)) {
+						const handlers = flattenHandlers(value);
+						const resolved = resolveEventKey(rawKey, events);
+						if (resolved && (handlers.length > 0 || value == null)) {
+							if (handlers.length > 0) addListeners(resolved.event, listenerFor(rawKey, resolved, handlers));
+							continue;
+						}
+						if (!resolved && handlers.length > 0) {
+							warnListener(rawKey, `<${name}> has no event for ${rawKey}; the handler is dropped.`);
+							continue;
+						}
+					}
+					const isDeclared = properties.has(rawKey) || attributes.has(rawKey);
+					const key = rawKey === "class" ? "className" : isDeclared ? rawKey : camelize(rawKey);
+					propertyValues.set(key, booleans.has(key) && (value === "" || value === hyphenate(key)) ? true : value);
+				}
+				return {
+					properties: controlled.mapProperties(Object.fromEntries(propertyValues)),
+					listeners
+				};
+			};
+			const syncElement = () => {
+				const element = elementRef.value;
+				if (!element) return;
+				const { properties, listeners } = readAttrs();
+				for (const key of [...appliedProperties.keys()]) {
+					if (key in properties) continue;
+					appliedProperties.delete(key);
+					watchDeeply(element, key, void 0);
+					if (key in element) element[key] = void 0;
+					else element.removeAttribute(key);
+				}
+				for (const [key, value] of Object.entries(properties)) {
+					if (appliedProperties.get(key) === value) continue;
+					appliedProperties.set(key, value);
+					if (key in element) {
+						element[key] = value;
+						watchDeeply(element, key, value);
+					} else if (value == null) element.removeAttribute(key);
+					else element.setAttribute(key, String(value));
+				}
+				currentHandlers = listeners;
+				for (const [event, attached] of attachedListeners) if (!listeners.has(event)) {
+					element.removeEventListener(event, attached);
+					attachedListeners.delete(event);
+				}
+				for (const event of listeners.keys()) {
+					if (attachedListeners.has(event)) continue;
+					const attached = (payload) => {
+						controlled.recordEventPayload(event, payload);
+						callHandlers(currentHandlers.get(event), payload);
+					};
+					element.addEventListener(event, attached);
+					attachedListeners.set(event, attached);
+				}
+			};
+			onMounted(() => {
+				syncElement();
+				reportUsage();
+			});
+			onUpdated(syncElement);
+			onBeforeUnmount(() => {
+				const element = elementRef.value;
+				for (const [event, attached] of attachedListeners) element?.removeEventListener(event, attached);
+				attachedListeners.clear();
+			});
+			return () => {
+				const children = slots.default?.() ?? [];
+				for (const slotName of slotNames) {
+					const slot = slots[slotName];
+					if (!slot) continue;
+					children.push(h(slotWrapperTag, {
+						key: slotName,
+						"^slot": slotName
+					}, slot()));
+				}
+				return h(tag, { ref: elementRef }, children);
+			};
+		}
+	});
+}
+//#endregion
+export { createFlowRemoteComponent, createFlowRemoteComponent as default };
+
+//# sourceMappingURL=createFlowRemoteComponent.mjs.map

package/dist/js/remote-vue-components/src/lib/createFlowRemoteComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFlowRemoteComponent.mjs","names":[],"sources":["../../../../../src/lib/createFlowRemoteComponent.ts"],"sourcesContent":["import { controlledRemoteValue } from \"@/lib/controlledRemoteValue\";\nimport { useComponentUsage } from \"@/composables/useComponentUsage\";\nimport {\n  callHandlers,\n  flattenHandlers,\n  isHandlerKey,\n  resolveEventKey,\n  type AnyHandler,\n  type EventKey,\n} from \"@/lib/handlers\";\nimport { hyphenate } from \"@/lib/propKeys\";\nimport {\n  applyModelModifiers,\n  createModelResolver,\n  isModelModifierKey,\n  modelModifierKeys,\n  modelUpdateArgument,\n} from \"@/lib/vModel\";\nimport type {\n  AnyRecord,\n  FlowRemoteVueComponent,\n  PropertiesOf,\n} from \"@/lib/types\";\nimport { version } from \"@/version\";\nimport { FlowRemoteElement } from \"@mittwald/flow-remote-elements\";\nimport type { RemoteElementConstructor } from \"@mittwald/flow-remote-core\";\nimport {\n  camelize,\n  defineComponent,\n  effectScope,\n  h,\n  isReactive,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  toRaw,\n  watch,\n  type VNode,\n} from \"vue\";\n\nconst slotWrapperTag = \"flr-slot-root-wrapper\";\n\nexport interface CreateFlowRemoteComponentOptions<\n  SlotName extends readonly string[],\n> {\n  /**\n   * The component's slot props (`ReactNode`-typed props of the Flow component).\n   * They are passed as named Vue slots and travel as slotted children, never as\n   * remote properties — a rendered subtree does not survive structured clone.\n   */\n  slots?: SlotName;\n  /**\n   * The component's boolean props. A bare attribute (`<TextField is-required>`)\n   * reaches the wrapper as `\"\"`, which is falsy on the host; these are read as\n   * `true` instead, the way Vue casts a declared `Boolean`.\n   */\n  booleans?: readonly string[];\n}\n\n/**\n * Wraps a `flr-*` remote element in a Vue component.\n *\n * Everything the wrapper needs at runtime — which keys are remote properties,\n * which are events, which are slots — is already on the element class\n * (`remotePropertyDefinitions`, `remoteEventDefinitions`,\n * `remoteSlotDefinitions`). So unlike the React counterpart, which has the\n * generator write an `eventProps` map into every generated file, this factory\n * reads the element's own metadata. What a generated file still names is what\n * the element cannot tell at runtime: its slots and its boolean props.\n */\nexport function createFlowRemoteComponent<\n  ElementConstructor extends RemoteElementConstructor<\n    AnyRecord,\n    AnyRecord,\n    AnyRecord,\n    AnyRecord\n  >,\n  const SlotNames extends readonly string[] = [],\n>(\n  tag: string,\n  name: string,\n  Element: ElementConstructor,\n  options: CreateFlowRemoteComponentOptions<SlotNames> = {},\n): FlowRemoteVueComponent<PropertiesOf<ElementConstructor>, SlotNames[number]> {\n  const slotNames = options.slots ?? [];\n  const booleans = new Set(options.booleans);\n  const events = Element.remoteEventDefinitions;\n  const properties = Element.remotePropertyDefinitions;\n  const attributes = Element.remoteAttributeDefinitions;\n  const model = createModelResolver(properties, events);\n  const warnedModels = new Set<string>();\n  const warnUnboundModel = (argument: string) => {\n    if (warnedModels.has(argument)) {\n      return;\n    }\n    warnedModels.add(argument);\n    const directive =\n      argument === \"modelValue\" ? \"v-model\" : `v-model:${argument}`;\n    console.warn(\n      `[flow] ${directive} on <${name}> binds nothing: the component has no ` +\n        `controllable prop by that name. Pass the prop and listen to its ` +\n        `change event instead.`,\n    );\n  };\n  const warnedListeners = new Set<string>();\n  const warnListener = (key: string, message: string) => {\n    if (warnedListeners.has(key)) {\n      return;\n    }\n    warnedListeners.add(key);\n    console.warn(`[flow] ${message}`);\n  };\n\n  const component = defineComponent({\n    name: `FlowRemote(${name})`,\n    /*\n     * Everything arrives through `attrs` instead of declared props. Vue only\n     * camelizes keys of *declared* props, and the set of props here is the Flow\n     * component's whole React surface — declaring all of it would mean shipping\n     * a second copy of the contract. The wrapper camelizes the keys itself\n     * below, so `:is-disabled` and `:isDisabled` both reach `isDisabled`.\n     */\n    inheritAttrs: false,\n\n    setup(_props, { attrs, slots }) {\n      const elementRef = ref<HTMLElement>();\n      const appliedProperties = new Map<string, unknown>();\n      /*\n       * An array or object changed in place — `data.value.push(point)` — is the\n       * same reference afterwards, and both this wrapper and remote-dom skip\n       * a property whose value is identical. So a reactive one is watched\n       * deeply, and a change hands the element a fresh copy, which is what\n       * crosses to the host. Watchers live in a scope of their own, stopped\n       * with the component.\n       */\n      const deepScope = effectScope();\n      const deepWatches = new Map<string, { source: unknown; stop(): void }>();\n      const watchDeeply = (\n        element: HTMLElement,\n        key: string,\n        value: unknown,\n      ) => {\n        const current = deepWatches.get(key);\n        if (current?.source === value) {\n          return;\n        }\n        current?.stop();\n        deepWatches.delete(key);\n\n        if (!isReactive(value) || typeof value !== \"object\" || value === null) {\n          return;\n        }\n        const raw = toRaw(value);\n        if (\n          !Array.isArray(raw) &&\n          Object.getPrototypeOf(raw) !== Object.prototype\n        ) {\n          return;\n        }\n        const stop = deepScope.run(() =>\n          watch(\n            () => value,\n            () => {\n              (element as AnyRecord)[key] = Array.isArray(value)\n                ? [...value]\n                : { ...value };\n            },\n            { deep: true },\n          ),\n        );\n        if (stop) {\n          deepWatches.set(key, { source: value, stop });\n        }\n      };\n      /*\n       * One listener per event, attached while the event has a handler and\n       * calling whatever the latest render supplied. `FlowRemoteElement` keys\n       * its own listener map on the function it was handed, so removing has\n       * to pass back that exact reference.\n       */\n      const attachedListeners = new Map<string, EventListener>();\n      let currentHandlers = new Map<string, unknown[]>();\n      /* The `.once` listeners that have fired, by their v-on key. */\n      const firedOnce = new Set<string>();\n      const reportUsage = useComponentUsage(name);\n      const controlled = controlledRemoteValue(tag);\n\n      /**\n       * The handlers for one v-on key, its modifiers applied. `.once` holds per\n       * component instance, as it does for Vue's own `emit`. `.capture` and\n       * `.passive` have nothing to act on in the host's event.\n       */\n      const listenerFor = (\n        key: string,\n        { event, modifiers }: EventKey,\n        handlers: AnyHandler[],\n      ): AnyHandler[] => {\n        const ignored = ([\"capture\", \"passive\"] as const).filter((modifier) =>\n          modifiers.has(modifier),\n        );\n        if (ignored.length > 0) {\n          warnListener(\n            key,\n            `@${hyphenate(event)}.${ignored.join(\".\")} on <${name}>: the ` +\n              `host's event has no ${ignored.join(\" or \")} mode, so the ` +\n              `modifier is ignored and the handler runs without it.`,\n          );\n        }\n        if (!modifiers.has(\"once\")) {\n          return handlers;\n        }\n        return [\n          (...args: unknown[]) => {\n            if (firedOnce.has(key)) {\n              return;\n            }\n            firedOnce.add(key);\n            callHandlers(handlers, ...args);\n          },\n        ];\n      };\n\n      /**\n       * Splits the attrs Vue collected into remote properties and event\n       * listeners, and normalizes the two spellings Vue templates produce.\n       */\n      const readAttrs = () => {\n        const propertyValues = new Map<string, unknown>([\n          [FlowRemoteElement.initializationPropertyName, true],\n          [FlowRemoteElement.versionPropertyName, version],\n        ]);\n        const listeners = new Map<string, unknown[]>();\n        const addListeners = (event: string, handlers: unknown[]) =>\n          listeners.set(event, [...(listeners.get(event) ?? []), ...handlers]);\n\n        for (const rawKey of Object.keys(attrs)) {\n          /*\n           * `v-model`: the value half becomes the prop it binds, the update\n           * half a listener on the event reporting it. Unknown to the element,\n           * either would otherwise land as a stray attribute — a field that\n           * shows nothing and never writes back.\n           */\n          const updateArgument = modelUpdateArgument(rawKey);\n          if (updateArgument !== undefined) {\n            const binding = model.resolve(updateArgument);\n            if (!binding) {\n              warnUnboundModel(updateArgument);\n              continue;\n            }\n            const handlers = flattenHandlers(attrs[rawKey]);\n            const modifiers = modelModifierKeys(updateArgument)\n              .map((key) => attrs[key] as Record<string, unknown> | undefined)\n              .find((value) => value !== undefined);\n            if (handlers.length > 0) {\n              addListeners(binding.event, [\n                (payload: unknown) => {\n                  const modelled = applyModelModifiers(payload, modifiers);\n                  controlled.recordModelledValue(modelled);\n                  callHandlers(handlers, modelled);\n                },\n              ]);\n            }\n            continue;\n          }\n          if (rawKey === \"modelValue\") {\n            const binding = model.resolve(rawKey);\n            if (binding) {\n              propertyValues.set(binding.property, attrs[rawKey]);\n            } else {\n              warnUnboundModel(rawKey);\n            }\n            continue;\n          }\n          if (\n            isModelModifierKey(rawKey) &&\n            !properties.has(rawKey) &&\n            !attributes.has(rawKey)\n          ) {\n            continue;\n          }\n\n          /*\n           * Off the remote surface by design (the generator's global ignore\n           * list), and dropped by the host anyway — as in React, silently.\n           */\n          if (rawKey === \"style\") {\n            continue;\n          }\n\n          const value = attrs[rawKey];\n\n          /*\n           * `@press` and `@hover-change` both compile to `onPress` /\n           * `onHoverChange`: Vue's compiler camelizes a v-on argument. What is\n           * left is mapping that back onto the element's event name, which is\n           * the React prop without its `on` prefix — and without the modifiers\n           * Vue appended to it (`onPressOnce`).\n           */\n          if (isHandlerKey(rawKey)) {\n            /*\n             * A list when a composite merged its handler with the author's —\n             * Vue's `mergeProps` combines both into an array.\n             */\n            const handlers = flattenHandlers(value);\n            const resolved = resolveEventKey(rawKey, events);\n            if (resolved && (handlers.length > 0 || value == null)) {\n              if (handlers.length > 0) {\n                addListeners(\n                  resolved.event,\n                  listenerFor(rawKey, resolved, handlers),\n                );\n              }\n              continue;\n            }\n            /* A handler never becomes an attribute holding its source. */\n            if (!resolved && handlers.length > 0) {\n              warnListener(\n                rawKey,\n                `<${name}> has no event for ${rawKey}; the handler is dropped.`,\n              );\n              continue;\n            }\n          }\n\n          /*\n           * Bound attributes are *not* camelized by Vue, so a template written\n           * in Vue's own kebab-case style (`:is-disabled`) would otherwise miss\n           * every remote property and end up as a stray DOM attribute.\n           *\n           * Only where the element does not know the key as written: Flow\n           * declares plenty of dashed props — `aria-label`, `data-testid`,\n           * `aria-expanded` — and camelizing those loses them. `aria-*` limped\n           * along by accident, because the DOM reflects `ariaLabel` back onto\n           * the attribute; `data-testid` has no such reflection and simply\n           * never reached the host.\n           */\n          const isDeclared = properties.has(rawKey) || attributes.has(rawKey);\n          const key =\n            rawKey === \"class\"\n              ? \"className\"\n              : isDeclared\n                ? rawKey\n                : camelize(rawKey);\n          propertyValues.set(\n            key,\n            booleans.has(key) && (value === \"\" || value === hyphenate(key))\n              ? true\n              : value,\n          );\n        }\n\n        return {\n          properties: controlled.mapProperties(\n            Object.fromEntries(propertyValues),\n          ),\n          listeners,\n        };\n      };\n\n      const syncElement = () => {\n        const element = elementRef.value;\n        if (!element) {\n          return;\n        }\n\n        const { properties, listeners } = readAttrs();\n\n        /*\n         * A key that is gone has to be taken off the element, not merely left\n         * alone: a render function that builds its props conditionally drops\n         * the key rather than passing `undefined`, and the loop below only\n         * visits what is there now. Without this the element keeps the last\n         * value it was handed — a button that stays disabled after the thing\n         * that disabled it is over.\n         */\n        for (const key of [...appliedProperties.keys()]) {\n          if (key in properties) {\n            continue;\n          }\n          appliedProperties.delete(key);\n          watchDeeply(element, key, undefined);\n\n          if (key in element) {\n            (element as AnyRecord)[key] = undefined;\n          } else {\n            element.removeAttribute(key);\n          }\n        }\n\n        for (const [key, value] of Object.entries(properties)) {\n          if (appliedProperties.get(key) === value) {\n            continue;\n          }\n          appliedProperties.set(key, value);\n\n          if (key in element) {\n            (element as AnyRecord)[key] = value;\n            watchDeeply(element, key, value);\n          } else if (value == null) {\n            element.removeAttribute(key);\n          } else {\n            element.setAttribute(key, String(value));\n          }\n        }\n\n        currentHandlers = listeners;\n\n        for (const [event, attached] of attachedListeners) {\n          if (!listeners.has(event)) {\n            element.removeEventListener(event, attached);\n            attachedListeners.delete(event);\n          }\n        }\n\n        for (const event of listeners.keys()) {\n          if (attachedListeners.has(event)) {\n            continue;\n          }\n          const attached: EventListener = (payload) => {\n            controlled.recordEventPayload(event, payload);\n            callHandlers(currentHandlers.get(event), payload);\n          };\n          element.addEventListener(event, attached);\n          attachedListeners.set(event, attached);\n        }\n      };\n\n      onMounted(() => {\n        syncElement();\n        reportUsage();\n      });\n      onUpdated(syncElement);\n\n      onBeforeUnmount(() => {\n        const element = elementRef.value;\n        for (const [event, attached] of attachedListeners) {\n          element?.removeEventListener(event, attached);\n        }\n        attachedListeners.clear();\n      });\n\n      return () => {\n        const children: (VNode | VNode[])[] = slots.default?.() ?? [];\n\n        for (const slotName of slotNames) {\n          const slot = slots[slotName];\n          if (!slot) {\n            continue;\n          }\n          /*\n           * A slot prop is rendered into a wrapper element carrying\n           * `slot=\"<name>\"`, which is what the host renderer maps back onto the\n           * Flow component's prop. Forced to an attribute (`^`) because\n           * `slot` reaches the remote tree through `attributeChangedCallback`.\n           */\n          children.push(\n            h(\n              slotWrapperTag,\n              /*\n               * Keyed by the slot name, because the wrappers are a list and\n               * only the slots that have content are in it. Unkeyed, Vue\n               * matches them by position: a slot that appears turns the\n               * wrapper at that index into a different slot and rebuilds\n               * everything after it. What that costs is not a repaint — the\n               * host re-materialises those components, so an element the user\n               * was on is replaced and the focus lands on `<body>`. Expanding\n               * an accordion item did exactly that to its own toggle.\n               */\n              { key: slotName, \"^slot\": slotName },\n              slot(),\n            ) as VNode,\n          );\n        }\n\n        return h(tag, { ref: elementRef }, children);\n      };\n    },\n  });\n\n  return component as unknown as FlowRemoteVueComponent<\n    PropertiesOf<ElementConstructor>,\n    SlotNames[number]\n  >;\n}\n\nexport default createFlowRemoteComponent;\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/lib/handlers.mjs

@@ -0,0 +1,46 @@
+//#region src/lib/handlers.ts
+/** Whether a prop key is an event handler (`onPress`, `onOpenChange`). */
+var isHandlerKey = (key) => /^on[A-Z]/.test(key);
+/**
+* Every function in a handler value. Vue's `mergeProps` — and so `cloneVNode` —
+* combines two handlers for one key into an array, and nests them when it
+* merges again.
+*/
+var flattenHandlers = (value) => Array.isArray(value) ? value.flatMap(flattenHandlers) : typeof value === "function" ? [value] : [];
+/** Calls every handler in `value` with the same arguments, in order. */
+var callHandlers = (value, ...args) => {
+	for (const handler of flattenHandlers(value)) handler(...args);
+};
+var modifierSuffix = /(Once|Passive|Capture)$/;
+/**
+* The element event a v-on key listens to, and the modifiers Vue folded into
+* it: `@press.once` compiles to `onPressOnce`, `@click.capture.once` to
+* `onClickCaptureOnce` — `Once`, `Passive` and `Capture` in template order. An
+* exact event name wins, so React's own capture events (`clickCapture`) keep
+* their meaning, and `.capture` resolves to one where the element has it.
+* `undefined` when the key names no event of the element.
+*/
+var resolveEventKey = (key, events) => {
+	const [, initial, rest] = /^on([A-Z])(.*)$/.exec(key) ?? [];
+	if (initial === void 0 || rest === void 0) return;
+	let event = initial.toLowerCase() + rest;
+	const modifiers = /* @__PURE__ */ new Set();
+	while (!events.has(event)) {
+		const [suffix] = modifierSuffix.exec(event) ?? [];
+		if (suffix === void 0) return;
+		modifiers.add(suffix.toLowerCase());
+		event = event.slice(0, -suffix.length);
+	}
+	if (modifiers.has("capture") && events.has(`${event}Capture`)) {
+		modifiers.delete("capture");
+		event = `${event}Capture`;
+	}
+	return {
+		event,
+		modifiers
+	};
+};
+//#endregion
+export { callHandlers, flattenHandlers, isHandlerKey, resolveEventKey };
+
+//# sourceMappingURL=handlers.mjs.map

package/dist/js/remote-vue-components/src/lib/handlers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.mjs","names":[],"sources":["../../../../../src/lib/handlers.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nexport type AnyHandler = Function;\n\n/** Whether a prop key is an event handler (`onPress`, `onOpenChange`). */\nexport const isHandlerKey = (key: string): boolean => /^on[A-Z]/.test(key);\n\n/**\n * Every function in a handler value. Vue's `mergeProps` — and so `cloneVNode` —\n * combines two handlers for one key into an array, and nests them when it\n * merges again.\n */\nexport const flattenHandlers = (value: unknown): AnyHandler[] =>\n  Array.isArray(value)\n    ? value.flatMap(flattenHandlers)\n    : typeof value === \"function\"\n      ? [value as AnyHandler]\n      : [];\n\n/** Calls every handler in `value` with the same arguments, in order. */\nexport const callHandlers = (value: unknown, ...args: unknown[]): void => {\n  for (const handler of flattenHandlers(value)) {\n    handler(...args);\n  }\n};\n\nexport type EventModifier = \"once\" | \"passive\" | \"capture\";\n\nexport interface EventKey {\n  event: string;\n  modifiers: ReadonlySet<EventModifier>;\n}\n\nconst modifierSuffix = /(Once|Passive|Capture)$/;\n\n/**\n * The element event a v-on key listens to, and the modifiers Vue folded into\n * it: `@press.once` compiles to `onPressOnce`, `@click.capture.once` to\n * `onClickCaptureOnce` — `Once`, `Passive` and `Capture` in template order. An\n * exact event name wins, so React's own capture events (`clickCapture`) keep\n * their meaning, and `.capture` resolves to one where the element has it.\n * `undefined` when the key names no event of the element.\n */\nexport const resolveEventKey = (\n  key: string,\n  events: ReadonlyMap<string, unknown>,\n): EventKey | undefined => {\n  const [, initial, rest] = /^on([A-Z])(.*)$/.exec(key) ?? [];\n  if (initial === undefined || rest === undefined) {\n    return undefined;\n  }\n  let event = initial.toLowerCase() + rest;\n  const modifiers = new Set<EventModifier>();\n\n  while (!events.has(event)) {\n    const [suffix] = modifierSuffix.exec(event) ?? [];\n    if (suffix === undefined) {\n      return undefined;\n    }\n    modifiers.add(suffix.toLowerCase() as EventModifier);\n    event = event.slice(0, -suffix.length);\n  }\n\n  if (modifiers.has(\"capture\") && events.has(`${event}Capture`)) {\n    modifiers.delete(\"capture\");\n    event = `${event}Capture`;\n  }\n\n  return { event, modifiers };\n};\n"],"mappings":";;AAIA,IAAa,gBAAgB,QAAyB,WAAW,KAAK,GAAG;;;;;;AAOzE,IAAa,mBAAmB,UAC9B,MAAM,QAAQ,KAAK,IACf,MAAM,QAAQ,eAAe,IAC7B,OAAO,UAAU,aACf,CAAC,KAAmB,IACpB,CAAC;;AAGT,IAAa,gBAAgB,OAAgB,GAAG,SAA0B;CACxE,KAAK,MAAM,WAAW,gBAAgB,KAAK,GACzC,QAAQ,GAAG,IAAI;AAEnB;AASA,IAAM,iBAAiB;;;;;;;;;AAUvB,IAAa,mBACX,KACA,WACyB;CACzB,MAAM,GAAG,SAAS,QAAQ,kBAAkB,KAAK,GAAG,KAAK,CAAC;CAC1D,IAAI,YAAY,KAAA,KAAa,SAAS,KAAA,GACpC;CAEF,IAAI,QAAQ,QAAQ,YAAY,IAAI;CACpC,MAAM,4BAAY,IAAI,IAAmB;CAEzC,OAAO,CAAC,OAAO,IAAI,KAAK,GAAG;EACzB,MAAM,CAAC,UAAU,eAAe,KAAK,KAAK,KAAK,CAAC;EAChD,IAAI,WAAW,KAAA,GACb;EAEF,UAAU,IAAI,OAAO,YAAY,CAAkB;EACnD,QAAQ,MAAM,MAAM,GAAG,CAAC,OAAO,MAAM;CACvC;CAEA,IAAI,UAAU,IAAI,SAAS,KAAK,OAAO,IAAI,GAAG,MAAM,QAAQ,GAAG;EAC7D,UAAU,OAAO,SAAS;EAC1B,QAAQ,GAAG,MAAM;CACnB;CAEA,OAAO;EAAE;EAAO;CAAU;AAC5B"}

package/dist/js/remote-vue-components/src/lib/isRenderError.mjs

@@ -0,0 +1,11 @@
+//#region src/lib/isRenderError.ts
+/**
+* Whether Vue's `onErrorCaptured` info names a render or setup error — what
+* React's error boundary catches. Vue names the source in development and links
+* its error code in production (`…/error-reference/#runtime-1`).
+*/
+var isRenderError = (info) => info === "render function" || info === "setup function" || /#runtime-[01]$/.test(info);
+//#endregion
+export { isRenderError };
+
+//# sourceMappingURL=isRenderError.mjs.map

package/dist/js/remote-vue-components/src/lib/isRenderError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isRenderError.mjs","names":[],"sources":["../../../../../src/lib/isRenderError.ts"],"sourcesContent":["/**\n * Whether Vue's `onErrorCaptured` info names a render or setup error — what\n * React's error boundary catches. Vue names the source in development and links\n * its error code in production (`…/error-reference/#runtime-1`).\n */\nexport const isRenderError = (info: string): boolean =>\n  info === \"render function\" ||\n  info === \"setup function\" ||\n  /#runtime-[01]$/.test(info);\n"],"mappings":";;;;;;AAKA,IAAa,iBAAiB,SAC5B,SAAS,qBACT,SAAS,oBACT,iBAAiB,KAAK,IAAI"}

package/dist/js/remote-vue-components/src/lib/mobxSelector.mjs

@@ -0,0 +1,30 @@
+import { getCurrentScope, onScopeDispose, shallowRef } from "vue";
+import { autorun } from "mobx";
+//#region src/lib/mobxSelector.ts
+/**
+* Reads a MobX value as a Vue ref.
+*
+* The counterpart of `useSelector` in `@mittwald/flow-react-components`: the
+* state in `@mittwald/flow-components-base` is MobX and knows no framework, so
+* each binding brings its own subscription. This is that subscription, and it
+* is the whole of it — twelve lines against a shared model.
+*
+* `shallowRef`, because what MobX hands back is already the value to render;
+* making Vue walk into it would only cost a proxy and could fight MobX's own.
+*/
+var watchMobxValue = (select) => {
+	const value = shallowRef();
+	const stop = autorun(() => {
+		value.value = select();
+	});
+	if (!getCurrentScope()) {
+		stop();
+		throw new Error("watchMobxValue() must be called inside a component setup or an effectScope().");
+	}
+	onScopeDispose(stop);
+	return value;
+};
+//#endregion
+export { watchMobxValue as default, watchMobxValue };
+
+//# sourceMappingURL=mobxSelector.mjs.map

package/dist/js/remote-vue-components/src/lib/mobxSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobxSelector.mjs","names":[],"sources":["../../../../../src/lib/mobxSelector.ts"],"sourcesContent":["import { autorun } from \"mobx\";\nimport { getCurrentScope, onScopeDispose, shallowRef, type Ref } from \"vue\";\n\n/**\n * Reads a MobX value as a Vue ref.\n *\n * The counterpart of `useSelector` in `@mittwald/flow-react-components`: the\n * state in `@mittwald/flow-components-base` is MobX and knows no framework, so\n * each binding brings its own subscription. This is that subscription, and it\n * is the whole of it — twelve lines against a shared model.\n *\n * `shallowRef`, because what MobX hands back is already the value to render;\n * making Vue walk into it would only cost a proxy and could fight MobX's own.\n */\nexport const watchMobxValue = <T>(select: () => T): Readonly<Ref<T>> => {\n  const value = shallowRef<T>() as Ref<T>;\n\n  /* `autorun` runs its effect immediately, so the ref has a value on return. */\n  const stop = autorun(() => {\n    value.value = select();\n  });\n\n  /*\n   * A scope is required rather than optional: without one nothing would ever\n   * stop the `autorun`, and the ref would keep a disposed component's render\n   * alive with no way for the caller to intervene — it is handed a ref, not a\n   * stopper. `setup()` is a scope, and so is an explicit `effectScope()`.\n   */\n  if (!getCurrentScope()) {\n    stop();\n    throw new Error(\n      \"watchMobxValue() must be called inside a component setup or an effectScope().\",\n    );\n  }\n\n  onScopeDispose(stop);\n\n  return value;\n};\n\nexport default watchMobxValue;\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,kBAAqB,WAAsC;CACtE,MAAM,QAAQ,WAAc;CAG5B,MAAM,OAAO,cAAc;EACzB,MAAM,QAAQ,OAAO;CACvB,CAAC;CAQD,IAAI,CAAC,gBAAgB,GAAG;EACtB,KAAK;EACL,MAAM,IAAI,MACR,+EACF;CACF;CAEA,eAAe,IAAI;CAEnB,OAAO;AACT"}

package/dist/js/remote-vue-components/src/lib/propKeys.mjs

@@ -0,0 +1,40 @@
+import { camelize } from "vue";
+//#region src/lib/propKeys.ts
+/** `isRequired` → `is-required`, the way Vue's own `hyphenate` spells it. */
+var hyphenate = (key) => key.replace(/\B([A-Z])/g, "-$1").toLowerCase();
+/**
+* A prop off a vnode, whichever way the template spelled it. A vnode carries
+* its props as written; Vue camelizes only when it resolves the props of the
+* component itself.
+*/
+var readProp = (props, key) => props?.[key] ?? props?.[hyphenate(key)];
+/** Whether a key is kept dashed, the way Vue keeps `aria-*` and `data-*`. */
+var keepsDashes = (key) => key.startsWith("aria-") || key.startsWith("data-");
+/**
+* Whether a value is a boolean attribute written bare (`<X is-required>`),
+* which a template hands over as `""` — or as its own name, `is-required`.
+*/
+var isBareBoolean = (key, value) => value === "" || value === hyphenate(key);
+/**
+* Props off a vnode, normalized the way Vue normalizes the props a component
+* declares: keys camelized (except `aria-*`/`data-*`), and a bare attribute
+* read as `true` where the key is a boolean. For components that read another
+* component's vnode instead of receiving the props themselves.
+*/
+var normalizeVNodeProps = (props, booleanKeys = []) => {
+	const normalized = {};
+	for (const [rawKey, value] of Object.entries(props ?? {})) {
+		const key = keepsDashes(rawKey) ? rawKey : camelize(rawKey);
+		normalized[key] = booleanKeys.includes(key) && isBareBoolean(key, value) ? true : value;
+	}
+	return normalized;
+};
+/** A boolean prop off a vnode, whichever way the template spelled it. */
+var readBooleanProp = (props, key) => {
+	const value = readProp(props, key);
+	return isBareBoolean(key, value) ? true : value;
+};
+//#endregion
+export { hyphenate, normalizeVNodeProps, readBooleanProp, readProp };
+
+//# sourceMappingURL=propKeys.mjs.map

package/dist/js/remote-vue-components/src/lib/propKeys.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"propKeys.mjs","names":[],"sources":["../../../../../src/lib/propKeys.ts"],"sourcesContent":["import { camelize } from \"vue\";\n\n/** `isRequired` → `is-required`, the way Vue's own `hyphenate` spells it. */\nexport const hyphenate = (key: string): string =>\n  key.replace(/\\B([A-Z])/g, \"-$1\").toLowerCase();\n\n/**\n * A prop off a vnode, whichever way the template spelled it. A vnode carries\n * its props as written; Vue camelizes only when it resolves the props of the\n * component itself.\n */\nexport const readProp = (\n  props: Record<string, unknown> | null | undefined,\n  key: string,\n): unknown => props?.[key] ?? props?.[hyphenate(key)];\n\n/** Whether a key is kept dashed, the way Vue keeps `aria-*` and `data-*`. */\nconst keepsDashes = (key: string): boolean =>\n  key.startsWith(\"aria-\") || key.startsWith(\"data-\");\n\n/**\n * Whether a value is a boolean attribute written bare (`<X is-required>`),\n * which a template hands over as `\"\"` — or as its own name, `is-required`.\n */\nconst isBareBoolean = (key: string, value: unknown): boolean =>\n  value === \"\" || value === hyphenate(key);\n\n/**\n * Props off a vnode, normalized the way Vue normalizes the props a component\n * declares: keys camelized (except `aria-*`/`data-*`), and a bare attribute\n * read as `true` where the key is a boolean. For components that read another\n * component's vnode instead of receiving the props themselves.\n */\nexport const normalizeVNodeProps = (\n  props: Record<string, unknown> | null | undefined,\n  booleanKeys: readonly string[] = [],\n): Record<string, unknown> => {\n  const normalized: Record<string, unknown> = {};\n\n  for (const [rawKey, value] of Object.entries(props ?? {})) {\n    const key = keepsDashes(rawKey) ? rawKey : camelize(rawKey);\n    normalized[key] =\n      booleanKeys.includes(key) && isBareBoolean(key, value) ? true : value;\n  }\n\n  return normalized;\n};\n\n/** A boolean prop off a vnode, whichever way the template spelled it. */\nexport const readBooleanProp = (\n  props: Record<string, unknown> | null | undefined,\n  key: string,\n): unknown => {\n  const value = readProp(props, key);\n  return isBareBoolean(key, value) ? true : value;\n};\n"],"mappings":";;;AAGA,IAAa,aAAa,QACxB,IAAI,QAAQ,cAAc,KAAK,CAAC,CAAC,YAAY;;;;;;AAO/C,IAAa,YACX,OACA,QACY,QAAQ,QAAQ,QAAQ,UAAU,GAAG;;AAGnD,IAAM,eAAe,QACnB,IAAI,WAAW,OAAO,KAAK,IAAI,WAAW,OAAO;;;;;AAMnD,IAAM,iBAAiB,KAAa,UAClC,UAAU,MAAM,UAAU,UAAU,GAAG;;;;;;;AAQzC,IAAa,uBACX,OACA,cAAiC,CAAC,MACN;CAC5B,MAAM,aAAsC,CAAC;CAE7C,KAAK,MAAM,CAAC,QAAQ,UAAU,OAAO,QAAQ,SAAS,CAAC,CAAC,GAAG;EACzD,MAAM,MAAM,YAAY,MAAM,IAAI,SAAS,SAAS,MAAM;EAC1D,WAAW,OACT,YAAY,SAAS,GAAG,KAAK,cAAc,KAAK,KAAK,IAAI,OAAO;CACpE;CAEA,OAAO;AACT;;AAGA,IAAa,mBACX,OACA,QACY;CACZ,MAAM,QAAQ,SAAS,OAAO,GAAG;CACjC,OAAO,cAAc,KAAK,KAAK,IAAI,OAAO;AAC5C"}

package/dist/js/remote-vue-components/src/lib/stringifyError.mjs

@@ -0,0 +1,6 @@
+//#region src/lib/stringifyError.ts
+var stringifyError = (error) => typeof error === "object" && error instanceof Error ? error.message : String(error);
+//#endregion
+export { stringifyError };
+
+//# sourceMappingURL=stringifyError.mjs.map

package/dist/js/remote-vue-components/src/lib/stringifyError.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringifyError.mjs","names":[],"sources":["../../../../../src/lib/stringifyError.ts"],"sourcesContent":["export const stringifyError = (error: unknown) =>\n  typeof error === \"object\" && error instanceof Error\n    ? error.message\n    : String(error);\n"],"mappings":";AAAA,IAAa,kBAAkB,UAC7B,OAAO,UAAU,YAAY,iBAAiB,QAC1C,MAAM,UACN,OAAO,KAAK"}