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

package/dist/js/remote-vue-components/src/overlays/Popover.mjs

@@ -0,0 +1,87 @@
+import { composition } from "../lib/composition.mjs";
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { ClearPropsContext } from "../auto-generated/ClearPropsContext.mjs";
+import { PopoverContent } from "../auto-generated/PopoverContent.mjs";
+import { provideOverlayContext, useOverlayHandlers, useOwnController } from "./overlayController.mjs";
+import { defineComponent, h, onMounted, watch } from "vue";
+//#region src/overlays/Popover.ts
+var styles = { popover: "flow--popover" };
+var Popover = defineComponent({
+	name: "Popover",
+	inheritAttrs: false,
+	props: {
+		/** Whether the popover shows a tip pointing at its trigger. */
+		withTip: {
+			type: Boolean,
+			default: false
+		},
+		/** Whether the popover holds a dialog. */
+		isDialogContent: {
+			type: Boolean,
+			default: void 0
+		},
+		/** A fixed width. */
+		width: {
+			type: [String, Number],
+			default: void 0
+		},
+		/** A controller to open and close the popover from anywhere. */
+		controller: {
+			type: Object,
+			default: void 0
+		},
+		/**
+		* Whether the popover is open. Use it to control its state — then
+		* `onOpenChange` must update the state this value comes from.
+		*/
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* Whether the popover is open initially, when it has a controller of its
+		* own. @default false
+		*/
+		isDefaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* Called with the new state whenever the popover opens or closes. It only
+		* reports the change; it never performs or suppresses it.
+		*/
+		onOpenChange: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		onMounted(useComponentUsage("Popover"));
+		const controller = useOwnController(() => props.controller, "Popover", () => ({ isDefaultOpen: props.isDefaultOpen }));
+		provideOverlayContext("Popover", () => controller.value);
+		const notifyOpenChange = (isOpen) => {
+			props.onOpenChange?.(isOpen);
+		};
+		useOverlayHandlers(() => controller.value, { onOpenChange: () => props.onOpenChange ? notifyOpenChange : void 0 });
+		watch(() => [props.isOpen, controller.value.isOpen.value], ([isOpen, current]) => {
+			if (isOpen !== void 0 && isOpen !== current) controller.value.syncOpen(isOpen);
+		}, { immediate: true });
+		return () => {
+			const { class: className, ...contentAttrs } = attrs;
+			return h(ClearPropsContext, null, () => h(PopoverContent, {
+				...contentAttrs,
+				class: [styles.popover, className].filter(Boolean).join(" "),
+				withTip: props.withTip,
+				isDialogContent: props.isDialogContent,
+				width: props.width,
+				isOpen: controller.value.isOpen.value,
+				onOpenChange: controller.value.setOpen
+			}, () => slots.default?.()));
+		};
+	}
+});
+composition(Popover);
+//#endregion
+export { Popover, Popover as default };
+
+//# sourceMappingURL=Popover.mjs.map

package/dist/js/remote-vue-components/src/overlays/Popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.mjs","names":[],"sources":["../../../../../src/overlays/Popover.ts"],"sourcesContent":["import { ClearPropsContext, PopoverContent } from \"@/auto-generated\";\nimport {\n  provideOverlayContext,\n  useOwnController,\n  useOverlayHandlers,\n  type OverlayController,\n} from \"@/overlays/overlayController\";\nimport { defineComponent, h, onMounted, watch, type PropType } from \"vue\";\nimport { composition } from \"@/lib/composition\";\nimport { useComponentUsage } from \"@/composables/useComponentUsage\";\n\n/* Flow's own class names — see the note in Modal.ts. */\nconst styles = {\n  popover: \"flow--popover\",\n};\n\nexport const Popover = defineComponent({\n  name: \"Popover\",\n\n  /* The rest — `placement`, `offset`, … — goes to `PopoverContent`. */\n  inheritAttrs: false,\n\n  props: {\n    /** Whether the popover shows a tip pointing at its trigger. */\n    withTip: { type: Boolean, default: false },\n    /** Whether the popover holds a dialog. */\n    isDialogContent: { type: Boolean, default: undefined },\n    /** A fixed width. */\n    width: {\n      type: [String, Number] as PropType<string | number>,\n      default: undefined,\n    },\n    /** A controller to open and close the popover from anywhere. */\n    controller: {\n      type: Object as PropType<OverlayController>,\n      default: undefined,\n    },\n    /**\n     * Whether the popover is open. Use it to control its state — then\n     * `onOpenChange` must update the state this value comes from.\n     */\n    isOpen: { type: Boolean, default: undefined },\n    /**\n     * Whether the popover is open initially, when it has a controller of its\n     * own. @default false\n     */\n    isDefaultOpen: { type: Boolean, default: undefined },\n    /**\n     * Called with the new state whenever the popover opens or closes. It only\n     * reports the change; it never performs or suppresses it.\n     */\n    onOpenChange: {\n      type: Function as PropType<(isOpen: boolean) => void>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { slots, attrs }) {\n    /* Flow's React `Popover` is a `flowComponent` and reports itself. */\n    onMounted(useComponentUsage(\"Popover\"));\n\n    const controller = useOwnController(\n      () => props.controller,\n      \"Popover\",\n      () => ({ isDefaultOpen: props.isDefaultOpen }),\n    );\n\n    provideOverlayContext(\"Popover\", () => controller.value);\n\n    /* The return value is dropped, as in Flow: this cannot abort. */\n    const notifyOpenChange = (isOpen: boolean): void => {\n      props.onOpenChange?.(isOpen);\n    };\n    useOverlayHandlers(() => controller.value, {\n      onOpenChange: () => (props.onOpenChange ? notifyOpenChange : undefined),\n    });\n\n    /*\n     * A controlled `isOpen` is mirrored into the controller, unreported —\n     * and again after a close the app did not follow, as in Flow.\n     */\n    watch(\n      () => [props.isOpen, controller.value.isOpen.value] as const,\n      ([isOpen, current]) => {\n        if (isOpen !== undefined && isOpen !== current) {\n          controller.value.syncOpen(isOpen);\n        }\n      },\n      { immediate: true },\n    );\n\n    return () => {\n      const { class: className, ...contentAttrs } = attrs;\n\n      /* A UI component: Flow clears the host's props context around it. */\n      return h(ClearPropsContext, null, () =>\n        h(\n          PopoverContent,\n          {\n            ...contentAttrs,\n            class: [styles.popover, className].filter(Boolean).join(\" \"),\n            withTip: props.withTip,\n            isDialogContent: props.isDialogContent,\n            width: props.width,\n            isOpen: controller.value.isOpen.value,\n            onOpenChange: controller.value.setOpen,\n          },\n          () => slots.default?.(),\n        ),\n      );\n    };\n  },\n});\n\ncomposition(Popover);\n\nexport default Popover;\n"],"mappings":";;;;;;;AAYA,IAAM,SAAS,EACb,SAAS,gBACX;AAEA,IAAa,UAAU,gBAAgB;CACrC,MAAM;CAGN,cAAc;CAEd,OAAO;;EAEL,SAAS;GAAE,MAAM;GAAS,SAAS;EAAM;;EAEzC,iBAAiB;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;EAErD,OAAO;GACL,MAAM,CAAC,QAAQ,MAAM;GACrB,SAAS,KAAA;EACX;;EAEA,YAAY;GACV,MAAM;GACN,SAAS,KAAA;EACX;;;;;EAKA,QAAQ;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;;;;EAK5C,eAAe;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;;;;;EAKnD,cAAc;GACZ,MAAM;GACN,SAAS,KAAA;EACX;CACF;CAEA,MAAM,OAAO,EAAE,OAAO,SAAS;EAE7B,UAAU,kBAAkB,SAAS,CAAC;EAEtC,MAAM,aAAa,uBACX,MAAM,YACZ,kBACO,EAAE,eAAe,MAAM,cAAc,EAC9C;EAEA,sBAAsB,iBAAiB,WAAW,KAAK;EAGvD,MAAM,oBAAoB,WAA0B;GAClD,MAAM,eAAe,MAAM;EAC7B;EACA,yBAAyB,WAAW,OAAO,EACzC,oBAAqB,MAAM,eAAe,mBAAmB,KAAA,EAC/D,CAAC;EAMD,YACQ,CAAC,MAAM,QAAQ,WAAW,MAAM,OAAO,KAAK,IACjD,CAAC,QAAQ,aAAa;GACrB,IAAI,WAAW,KAAA,KAAa,WAAW,SACrC,WAAW,MAAM,SAAS,MAAM;EAEpC,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,aAAa;GACX,MAAM,EAAE,OAAO,WAAW,GAAG,iBAAiB;GAG9C,OAAO,EAAE,mBAAmB,YAC1B,EACE,gBACA;IACE,GAAG;IACH,OAAO,CAAC,OAAO,SAAS,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;IAC3D,SAAS,MAAM;IACf,iBAAiB,MAAM;IACvB,OAAO,MAAM;IACb,QAAQ,WAAW,MAAM,OAAO;IAChC,cAAc,WAAW,MAAM;GACjC,SACM,MAAM,UAAU,CACxB,CACF;EACF;CACF;AACF,CAAC;AAED,YAAY,OAAO"}

package/dist/js/remote-vue-components/src/overlays/childProps.mjs

@@ -0,0 +1,159 @@
+import { flattenHandlers, isHandlerKey } from "../lib/handlers.mjs";
+import { hyphenate } from "../lib/propKeys.mjs";
+import { Comment, Fragment, cloneVNode, createTextVNode, getCurrentInstance, h, isVNode, normalizeClass, withCtx } from "vue";
+//#region src/overlays/childProps.ts
+var DynamicProp = class {
+	value;
+	constructor(value) {
+		this.value = value;
+	}
+};
+/**
+* A prop that wins over the child's own, and a handler that runs after the
+* child's — what `dynamic()` does in Flow's props context. The value is usually
+* derived from the child's props (`Modal`'s `closeModal` rule).
+*/
+var dynamic = (value) => new DynamicProp(value);
+/**
+* Merges props into a child the way Flow's props context merges them: the
+* child's own value wins unless the rule is `dynamic`, classes are joined, and
+* handlers are chained — the context's, the child's, then the dynamic ones.
+*
+* `cloneVNode` alone merges the other way round (the added props win), so the
+* props are rebuilt here. A template may write a key kebab-case; both spellings
+* count as the child's own.
+*/
+var withContextProps = (child, contextProps) => {
+	const merged = { ...child.props };
+	for (const [key, rule] of Object.entries(contextProps)) {
+		const isDynamic = rule instanceof DynamicProp;
+		const value = isDynamic ? rule.value : rule;
+		if (key === "class") {
+			merged.class = normalizeClass([value, merged.class]);
+			continue;
+		}
+		if (isHandlerKey(key)) {
+			const context = flattenHandlers(value);
+			const own = flattenHandlers(merged[key]);
+			const handlers = isDynamic ? [...own, ...context] : [...context, ...own];
+			merged[key] = handlers.length > 1 ? handlers : handlers[0];
+			continue;
+		}
+		const kebabKey = hyphenate(key);
+		if (isDynamic) {
+			delete merged[kebabKey];
+			merged[key] = value;
+		} else if (merged[key] === void 0 && merged[kebabKey] === void 0) merged[key] = value;
+	}
+	const clone = cloneVNode(child, {});
+	clone.props = merged;
+	return clone;
+};
+/**
+* Vue's stand-in for Flow's `PropsContext`.
+*
+* Flow configures the components inside a composite — the `Heading` of a
+* `Modal`, the `Button` of an `Action` — through a React context every
+* `flowComponent` reads. There is no such context on the Vue side, so the
+* composite reaches its children directly, merging the way the context does
+* (`withContextProps`).
+*
+* The difference that matters: this only reaches the children the composite was
+* handed, not arbitrary descendants. A `Heading` nested one component deeper
+* than the composite expects is left alone.
+*/
+var mapChildren = (children, decide) => flattenChildren(children).map((child) => {
+	const props = decide(child);
+	return props ? withContextProps(child, props) : child;
+});
+/**
+* Slots hand back fragments wherever the author wrote a list or a `v-for`, and
+* comments wherever a `v-if` did not match. Both have to be seen through, or a
+* composite's rules miss every child inside them. A render function may also
+* hand back `null`, a boolean, a nested array or a bare string, which Vue
+* normalizes only later.
+*/
+var flattenChildren = (children) => {
+	const result = [];
+	const walk = (child) => {
+		if (Array.isArray(child)) child.forEach(walk);
+		else if (typeof child === "string" || typeof child === "number") result.push(createTextVNode(String(child)));
+		else if (!isVNode(child) || child.type === Comment) return;
+		else if (child.type === Fragment && Array.isArray(child.children)) walk(child.children);
+		else result.push(child);
+	};
+	walk(children);
+	return result;
+};
+var ownerOf = (node) => node.ctx;
+var slotOwnerOf = (node, slots) => slots._ctx ?? ownerOf(node);
+/**
+* `h(node.type, …)` with new slots, owned by whoever wrote `node`.
+*
+* `h` alone would hand the node and every slot to the composite rendering it:
+* the extension's `Heading` inside a `Modal` would count as the `Modal`'s own.
+* Each slot runs as its author's again, and the node keeps its author.
+*/
+var rebuildWithSlots = (node, slots) => {
+	const owner = slotOwnerOf(node, slots);
+	const ownedSlots = Object.fromEntries(Object.entries(slots).filter(([key]) => !key.startsWith("_")).map(([key, slot]) => [key, typeof slot === "function" ? withCtx(slot, owner) : slot]));
+	const rebuilt = h(node.type, node.props ?? void 0, ownedSlots);
+	rebuilt.ctx = ownerOf(node);
+	return rebuilt;
+};
+var cloneIfMounted = (child) => child.el === null ? child : cloneVNode(child);
+/**
+* The default slot of a node, whatever form its children took.
+*
+* A template and `h(X, null, () => …)` hand a component a slot object.
+* `vue/jsx-runtime` and `h(X, null, [ … ])` hand it a string or an array, which
+* Vue turns into a default slot only when the component mounts — as it does a
+* slot object whose `default` is a value rather than a function.
+*/
+var defaultSlotOf = (children) => {
+	if (children === null || children === void 0) return;
+	if (typeof children !== "object" || Array.isArray(children)) return () => children;
+	const slot = children.default;
+	if (typeof slot === "function") return slot;
+	return slot === null || slot === void 0 ? void 0 : () => slot;
+};
+/**
+* Rebuilds a child around new default-slot content.
+*
+* This replaces what a child was handed outright — which is what a composite
+* needs when it does not configure a child but _wraps_ it. Flow's `Modal` does
+* exactly that to its heading: the title goes into a container and the close
+* button is appended beside it.
+*
+* Rebuilt rather than cloned: `cloneVNode` merges props and leaves children
+* alone. The slot is called raw, the way the vnode carries it, and Vue only
+* normalizes a slot's result when the component itself reads it — so the result
+* goes through `flattenChildren`: a slot written `() => h(X)` hands back one
+* vnode, not a list.
+*/
+var withSlotContent = (node, build) => {
+	const slots = node.children;
+	const defaultSlot = defaultSlotOf(slots);
+	const rendered = (...args) => defaultSlot ? flattenChildren(defaultSlot(...args)).map(cloneIfMounted) : [];
+	const composite = getCurrentInstance();
+	const buildAsComposite = withCtx((content) => build(content), composite);
+	return rebuildWithSlots(node, {
+		...typeof slots === "object" && slots && !Array.isArray(slots) ? slots : {},
+		default: (...args) => buildAsComposite(rendered(...args))
+	});
+};
+/**
+* Applies nested rules, each level to the children of the one above — as far
+* down as the rules go, where `mapChildren` reaches one level.
+*/
+var applyChildRules = (children, rules) => flattenChildren(children).map((child) => {
+	const rule = rules(child);
+	if (!rule) return child;
+	const configured = rule.props ? withContextProps(child, rule.props) : child;
+	const nested = rule.children;
+	return nested ? withSlotContent(configured, (rendered) => applyChildRules(rendered, nested)) : configured;
+});
+//#endregion
+export { applyChildRules, defaultSlotOf, dynamic, flattenChildren, mapChildren, withContextProps, withSlotContent };
+
+//# sourceMappingURL=childProps.mjs.map

package/dist/js/remote-vue-components/src/overlays/childProps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"childProps.mjs","names":[],"sources":["../../../../../src/overlays/childProps.ts"],"sourcesContent":["import {\n  cloneVNode,\n  Comment,\n  createTextVNode,\n  Fragment,\n  getCurrentInstance,\n  h,\n  isVNode,\n  normalizeClass,\n  Text,\n  withCtx,\n  type Component,\n  type ComponentInternalInstance,\n  type VNode,\n} from \"vue\";\nimport { flattenHandlers, isHandlerKey } from \"@/lib/handlers\";\nimport { hyphenate } from \"@/lib/propKeys\";\nimport type { AnyRecord } from \"@/lib/types\";\n\nclass DynamicProp {\n  public constructor(public readonly value: unknown) {}\n}\n\n/**\n * A prop that wins over the child's own, and a handler that runs after the\n * child's — what `dynamic()` does in Flow's props context. The value is usually\n * derived from the child's props (`Modal`'s `closeModal` rule).\n */\nexport const dynamic = (value: unknown): DynamicProp => new DynamicProp(value);\n\n/**\n * Merges props into a child the way Flow's props context merges them: the\n * child's own value wins unless the rule is `dynamic`, classes are joined, and\n * handlers are chained — the context's, the child's, then the dynamic ones.\n *\n * `cloneVNode` alone merges the other way round (the added props win), so the\n * props are rebuilt here. A template may write a key kebab-case; both spellings\n * count as the child's own.\n */\nexport const withContextProps = (\n  child: VNode,\n  contextProps: AnyRecord,\n): VNode => {\n  const merged: AnyRecord = { ...child.props };\n\n  for (const [key, rule] of Object.entries(contextProps)) {\n    const isDynamic = rule instanceof DynamicProp;\n    const value: unknown = isDynamic ? rule.value : rule;\n\n    if (key === \"class\") {\n      merged.class = normalizeClass([value, merged.class]);\n      continue;\n    }\n\n    if (isHandlerKey(key)) {\n      const context = flattenHandlers(value);\n      const own = flattenHandlers(merged[key]);\n      const handlers = isDynamic ? [...own, ...context] : [...context, ...own];\n      merged[key] = handlers.length > 1 ? handlers : handlers[0];\n      continue;\n    }\n\n    const kebabKey = hyphenate(key);\n    if (isDynamic) {\n      delete merged[kebabKey];\n      merged[key] = value;\n    } else if (merged[key] === undefined && merged[kebabKey] === undefined) {\n      merged[key] = value;\n    }\n  }\n\n  const clone = cloneVNode(child, {});\n  clone.props = merged;\n  return clone;\n};\n\n/**\n * Vue's stand-in for Flow's `PropsContext`.\n *\n * Flow configures the components inside a composite — the `Heading` of a\n * `Modal`, the `Button` of an `Action` — through a React context every\n * `flowComponent` reads. There is no such context on the Vue side, so the\n * composite reaches its children directly, merging the way the context does\n * (`withContextProps`).\n *\n * The difference that matters: this only reaches the children the composite was\n * handed, not arbitrary descendants. A `Heading` nested one component deeper\n * than the composite expects is left alone.\n */\nexport const mapChildren = (\n  children: VNode[] | undefined,\n  decide: (child: VNode) => AnyRecord | undefined,\n): VNode[] =>\n  flattenChildren(children).map((child) => {\n    const props = decide(child);\n    return props ? withContextProps(child, props) : child;\n  });\n\n/**\n * Slots hand back fragments wherever the author wrote a list or a `v-for`, and\n * comments wherever a `v-if` did not match. Both have to be seen through, or a\n * composite's rules miss every child inside them. A render function may also\n * hand back `null`, a boolean, a nested array or a bare string, which Vue\n * normalizes only later.\n */\nexport const flattenChildren = (children: unknown): VNode[] => {\n  const result: VNode[] = [];\n\n  const walk = (child: unknown): void => {\n    if (Array.isArray(child)) {\n      child.forEach(walk);\n    } else if (typeof child === \"string\" || typeof child === \"number\") {\n      result.push(createTextVNode(String(child)));\n    } else if (!isVNode(child) || child.type === Comment) {\n      return;\n    } else if (child.type === Fragment && Array.isArray(child.children)) {\n      walk(child.children);\n    } else {\n      result.push(child);\n    }\n  };\n\n  walk(children);\n\n  return result;\n};\n\n/** Whether a node renders text rather than a component. */\nexport const isTextChild = (child: VNode): boolean => child.type === Text;\n\ntype Owner = ComponentInternalInstance | null | undefined;\n\n/*\n * Who wrote a node, and who wrote its slots. Vue keeps both on the node (`ctx`,\n * and `_ctx` on the slots object) and decides from them which instance a slot\n * renders under — and this package decides from it whether a component counts\n * as the extension's (`isRenderedByComposition`).\n */\nconst ownerOf = (node: VNode): Owner => (node as { ctx?: Owner }).ctx;\n\nconst slotOwnerOf = (node: VNode, slots: object): Owner =>\n  (slots as { _ctx?: Owner })._ctx ?? ownerOf(node);\n\n/**\n * `h(node.type, …)` with new slots, owned by whoever wrote `node`.\n *\n * `h` alone would hand the node and every slot to the composite rendering it:\n * the extension's `Heading` inside a `Modal` would count as the `Modal`'s own.\n * Each slot runs as its author's again, and the node keeps its author.\n */\nconst rebuildWithSlots = (\n  node: VNode,\n  slots: Record<string, unknown>,\n): VNode => {\n  const owner = slotOwnerOf(node, slots);\n  const ownedSlots = Object.fromEntries(\n    Object.entries(slots)\n      .filter(([key]) => !key.startsWith(\"_\"))\n      .map(([key, slot]) => [\n        key,\n        typeof slot === \"function\"\n          ? withCtx(slot as (...args: unknown[]) => unknown, owner)\n          : slot,\n      ]),\n  );\n  const rebuilt = h(\n    node.type as Component,\n    node.props ?? undefined,\n    ownedSlots,\n  );\n  (rebuilt as { ctx?: Owner }).ctx = ownerOf(node);\n  return rebuilt;\n};\n\n/* Vue's `cloneIfMounted`: a mounted vnode is patched in place, never reused. */\nconst cloneIfMounted = (child: VNode): VNode =>\n  child.el === null ? child : cloneVNode(child);\n\n/**\n * The default slot of a node, whatever form its children took.\n *\n * A template and `h(X, null, () => …)` hand a component a slot object.\n * `vue/jsx-runtime` and `h(X, null, [ … ])` hand it a string or an array, which\n * Vue turns into a default slot only when the component mounts — as it does a\n * slot object whose `default` is a value rather than a function.\n */\nexport const defaultSlotOf = (\n  children: unknown,\n): ((...args: unknown[]) => unknown) | undefined => {\n  if (children === null || children === undefined) {\n    return undefined;\n  }\n  if (typeof children !== \"object\" || Array.isArray(children)) {\n    return () => children;\n  }\n  const slot = (children as Record<string, unknown>).default;\n  if (typeof slot === \"function\") {\n    return slot as (...args: unknown[]) => unknown;\n  }\n  return slot === null || slot === undefined ? undefined : () => slot;\n};\n\n/**\n * Rebuilds a child around new default-slot content.\n *\n * This replaces what a child was handed outright — which is what a composite\n * needs when it does not configure a child but _wraps_ it. Flow's `Modal` does\n * exactly that to its heading: the title goes into a container and the close\n * button is appended beside it.\n *\n * Rebuilt rather than cloned: `cloneVNode` merges props and leaves children\n * alone. The slot is called raw, the way the vnode carries it, and Vue only\n * normalizes a slot's result when the component itself reads it — so the result\n * goes through `flattenChildren`: a slot written `() => h(X)` hands back one\n * vnode, not a list.\n */\nexport const withSlotContent = (\n  node: VNode,\n  build: (rendered: VNode[]) => VNode[],\n): VNode => {\n  const slots = node.children;\n  const defaultSlot = defaultSlotOf(slots);\n\n  const rendered = (...args: unknown[]): VNode[] =>\n    defaultSlot\n      ? flattenChildren(defaultSlot(...args)).map(cloneIfMounted)\n      : [];\n\n  /*\n   * The content is the author's, the wrapping around it the composite's: what\n   * `build` adds — a container, a close button — runs as the composite that\n   * asked for it.\n   */\n  const composite = getCurrentInstance();\n  const buildAsComposite = withCtx(\n    (content: VNode[]) => build(content),\n    composite,\n  ) as (content: VNode[]) => VNode[];\n\n  return rebuildWithSlots(node, {\n    ...(typeof slots === \"object\" && slots && !Array.isArray(slots)\n      ? (slots as Record<string, unknown>)\n      : {}),\n    default: (...args: unknown[]) => buildAsComposite(rendered(...args)),\n  });\n};\n\n/**\n * What a composite writes for one kind of child: the props it merges in, and\n * the rules for what that child renders — Flow's nested props context entries\n * (`Content: { Heading: { level: 3 } }`).\n */\nexport interface ChildRule {\n  props?: AnyRecord;\n  children?: ChildRules;\n}\n\nexport type ChildRules = (child: VNode) => ChildRule | undefined;\n\n/**\n * Applies nested rules, each level to the children of the one above — as far\n * down as the rules go, where `mapChildren` reaches one level.\n */\nexport const applyChildRules = (\n  children: VNode[] | undefined,\n  rules: ChildRules,\n): VNode[] =>\n  flattenChildren(children).map((child) => {\n    const rule = rules(child);\n    if (!rule) {\n      return child;\n    }\n\n    const configured = rule.props ? withContextProps(child, rule.props) : child;\n    const nested = rule.children;\n\n    return nested\n      ? withSlotContent(configured, (rendered) =>\n          applyChildRules(rendered, nested),\n        )\n      : configured;\n  });\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/overlays/createOverlayTrigger.mjs

@@ -0,0 +1,51 @@
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { DialogTrigger } from "../auto-generated/DialogTrigger.mjs";
+import { applyChildRules } from "./childProps.mjs";
+import { provideOverlayContext, useOwnController } from "./overlayController.mjs";
+import { Action } from "../components/Action.mjs";
+import { defineComponent, h, onMounted } from "vue";
+//#region src/overlays/createOverlayTrigger.ts
+/**
+* Builds `ModalTrigger`, `PopoverTrigger` and `LightBoxTrigger`.
+*
+* In Flow all three are the same component with a different overlay type — a
+* `DialogTrigger` around a trigger element and an overlay, with a props context
+* that gives the trigger's `Button` its `onPress`. Here that is merged into the
+* `Button` directly.
+*
+* `reportsUsage`: whether Flow's React trigger is a `flowComponent`, which
+* reports itself.
+*/
+var createOverlayTrigger = (name, overlayType, { reportsUsage }) => defineComponent({
+	name,
+	props: {
+		/** Whether the overlay starts open. */
+		isDefaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		/** A controller to open and close the overlay from anywhere. */
+		controller: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		if (reportsUsage) onMounted(useComponentUsage(name));
+		const controller = useOwnController(() => props.controller, void 0, () => ({ isDefaultOpen: props.isDefaultOpen }));
+		provideOverlayContext(overlayType, () => controller.value, { isOverlayContent: false });
+		const triggerRules = (child) => child.type === Button ? { props: { onPress: controller.value.open } } : child.type === Action ? { children: triggerRules } : void 0;
+		return () => {
+			const children = applyChildRules(slots.default?.(), triggerRules);
+			return h(DialogTrigger, {
+				isOpen: controller.value.isOpen.value,
+				onOpenChange: controller.value.setOpen
+			}, () => children);
+		};
+	}
+});
+//#endregion
+export { createOverlayTrigger };
+
+//# sourceMappingURL=createOverlayTrigger.mjs.map

package/dist/js/remote-vue-components/src/overlays/createOverlayTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOverlayTrigger.mjs","names":[],"sources":["../../../../../src/overlays/createOverlayTrigger.ts"],"sourcesContent":["import { Button, DialogTrigger } from \"@/auto-generated\";\nimport { Action } from \"@/components/Action\";\nimport { applyChildRules, type ChildRules } from \"@/overlays/childProps\";\nimport {\n  provideOverlayContext,\n  useOwnController,\n  type OverlayController,\n  type OverlayType,\n} from \"@/overlays/overlayController\";\nimport { useComponentUsage } from \"@/composables/useComponentUsage\";\nimport { defineComponent, h, onMounted, type PropType } from \"vue\";\n\n/**\n * Builds `ModalTrigger`, `PopoverTrigger` and `LightBoxTrigger`.\n *\n * In Flow all three are the same component with a different overlay type — a\n * `DialogTrigger` around a trigger element and an overlay, with a props context\n * that gives the trigger's `Button` its `onPress`. Here that is merged into the\n * `Button` directly.\n *\n * `reportsUsage`: whether Flow's React trigger is a `flowComponent`, which\n * reports itself.\n */\nexport const createOverlayTrigger = (\n  name: string,\n  overlayType: OverlayType,\n  { reportsUsage }: { reportsUsage: boolean },\n) =>\n  defineComponent({\n    name,\n\n    props: {\n      /** Whether the overlay starts open. */\n      isDefaultOpen: { type: Boolean, default: false },\n      /** A controller to open and close the overlay from anywhere. */\n      controller: {\n        type: Object as PropType<OverlayController>,\n        default: undefined,\n      },\n    },\n\n    setup(props, { slots }) {\n      if (reportsUsage) {\n        onMounted(useComponentUsage(name));\n      }\n\n      const controller = useOwnController(\n        () => props.controller,\n        undefined,\n        () => ({ isDefaultOpen: props.isDefaultOpen }),\n      );\n\n      /* By name only: the trigger button is not inside the overlay. */\n      provideOverlayContext(overlayType, () => controller.value, {\n        isOverlayContent: false,\n      });\n\n      /*\n       * Flow's props context names `Button`, and reaches it through an\n       * `Action`, which passes the context on.\n       */\n      const triggerRules: ChildRules = (child) =>\n        child.type === Button\n          ? { props: { onPress: controller.value.open } }\n          : child.type === Action\n            ? { children: triggerRules }\n            : undefined;\n\n      return () => {\n        const children = applyChildRules(slots.default?.(), triggerRules);\n\n        return h(\n          DialogTrigger,\n          {\n            isOpen: controller.value.isOpen.value,\n            onOpenChange: controller.value.setOpen,\n          },\n          () => children,\n        );\n      };\n    },\n  });\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,IAAa,wBACX,MACA,aACA,EAAE,mBAEF,gBAAgB;CACd;CAEA,OAAO;;EAEL,eAAe;GAAE,MAAM;GAAS,SAAS;EAAM;;EAE/C,YAAY;GACV,MAAM;GACN,SAAS,KAAA;EACX;CACF;CAEA,MAAM,OAAO,EAAE,SAAS;EACtB,IAAI,cACF,UAAU,kBAAkB,IAAI,CAAC;EAGnC,MAAM,aAAa,uBACX,MAAM,YACZ,KAAA,UACO,EAAE,eAAe,MAAM,cAAc,EAC9C;EAGA,sBAAsB,mBAAmB,WAAW,OAAO,EACzD,kBAAkB,MACpB,CAAC;EAMD,MAAM,gBAA4B,UAChC,MAAM,SAAS,SACX,EAAE,OAAO,EAAE,SAAS,WAAW,MAAM,KAAK,EAAE,IAC5C,MAAM,SAAS,SACb,EAAE,UAAU,aAAa,IACzB,KAAA;EAER,aAAa;GACX,MAAM,WAAW,gBAAgB,MAAM,UAAU,GAAG,YAAY;GAEhE,OAAO,EACL,eACA;IACE,QAAQ,WAAW,MAAM,OAAO;IAChC,cAAc,WAAW,MAAM;GACjC,SACM,QACR;EACF;CACF;AACF,CAAC"}

package/dist/js/remote-vue-components/src/overlays/locales.mjs

@@ -0,0 +1,32 @@
+//#region src/overlays/locales.ts
+/**
+* `Modal confirmOnClose`, from
+* `packages/components/src/components/Modal/locales/*.locale.json`. `close`
+* also labels the modal's own close button, as Flow's `close` key does.
+*/
+var confirmCloseTexts = {
+	"en-US": {
+		heading: "Unsaved changes",
+		text: "You have unsaved changes. Are you sure you want to close? All changes will be lost.",
+		close: "Close",
+		keepOpen: "Keep editing"
+	},
+	"de-DE": {
+		heading: "Ungespeicherte Änderungen",
+		text: "Du hast ungespeicherte Änderungen. Möchtest du wirklich schließen? Alle Änderungen gehen dabei verloren.",
+		close: "Schließen",
+		keepOpen: "Weiter bearbeiten"
+	}
+};
+/**
+* The `LightBox` close button's label, from
+* `packages/components/src/components/LightBox/locales/*.locale.json`.
+*/
+var lightBoxCloseTexts = {
+	"de-DE": "Schließen",
+	"en-US": "Close"
+};
+//#endregion
+export { confirmCloseTexts, lightBoxCloseTexts };
+
+//# sourceMappingURL=locales.mjs.map

package/dist/js/remote-vue-components/src/overlays/locales.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"locales.mjs","names":[],"sources":["../../../../../src/overlays/locales.ts"],"sourcesContent":["/*\n * The overlays' UI text, copied from Flow's locale files.\n *\n * Flow's are compiled into the React bundle by a locale plugin and are not\n * importable from a published package, so the only way a Vue binding can put\n * words on these overlays is to carry its own. A rewording on the Flow side\n * fails `src/tests/CopiedTexts.test.ts`. The generated `Modal` this layer\n * argues for would remove the copy.\n */\n\n/**\n * `Modal confirmOnClose`, from\n * `packages/components/src/components/Modal/locales/*.locale.json`. `close`\n * also labels the modal's own close button, as Flow's `close` key does.\n */\nexport const confirmCloseTexts = {\n  \"en-US\": {\n    heading: \"Unsaved changes\",\n    text: \"You have unsaved changes. Are you sure you want to close? All changes will be lost.\",\n    close: \"Close\",\n    keepOpen: \"Keep editing\",\n  },\n  \"de-DE\": {\n    heading: \"Ungespeicherte Änderungen\",\n    text: \"Du hast ungespeicherte Änderungen. Möchtest du wirklich schließen? Alle Änderungen gehen dabei verloren.\",\n    close: \"Schließen\",\n    keepOpen: \"Weiter bearbeiten\",\n  },\n};\n\n/**\n * The `LightBox` close button's label, from\n * `packages/components/src/components/LightBox/locales/*.locale.json`.\n */\nexport const lightBoxCloseTexts = { \"de-DE\": \"Schließen\", \"en-US\": \"Close\" };\n"],"mappings":";;;;;;AAeA,IAAa,oBAAoB;CAC/B,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACP,UAAU;CACZ;AACF;;;;;AAMA,IAAa,qBAAqB;CAAE,SAAS;CAAa,SAAS;AAAQ"}

package/dist/js/remote-vue-components/src/overlays/overlayController.mjs

@@ -0,0 +1,142 @@
+import { computed, inject, markRaw, provide, ref, watchEffect } from "vue";
+//#region src/overlays/overlayController.ts
+var controllers = /* @__PURE__ */ new WeakSet();
+/** Whether a value is a controller, rather than options naming one. */
+var isOverlayController = (value) => typeof value === "object" && value !== null && controllers.has(value);
+var addTo = (handlers) => (handler) => {
+	handlers.add(handler);
+	return () => handlers.delete(handler);
+};
+/**
+* Builds a controller around an existing `isOpen`, so a second controller can
+* drive the same state — which is how the confirmation modal is bound to its
+* parent's `isConfirmingClose`.
+*/
+var createOverlayControllerFor = (isOpen) => {
+	const confirmOnClose = ref(false);
+	const isConfirmingClose = ref(false);
+	const onOpenHandlers = /* @__PURE__ */ new Set();
+	const onCloseHandlers = /* @__PURE__ */ new Set();
+	const onOpenChangeHandlers = /* @__PURE__ */ new Set();
+	let inFlight;
+	const apply = (toOpen) => {
+		if (isOpen.value === toOpen || inFlight === toOpen) return;
+		inFlight = toOpen;
+		try {
+			const run = (handlers) => [...handlers].map((handler) => handler(toOpen)).includes(false);
+			if (!(run(toOpen ? onOpenHandlers : onCloseHandlers) || run(onOpenChangeHandlers))) isOpen.value = toOpen;
+		} finally {
+			inFlight = void 0;
+		}
+	};
+	const open = () => {
+		isConfirmingClose.value = false;
+		apply(true);
+	};
+	const closeNow = () => {
+		isConfirmingClose.value = false;
+		apply(false);
+	};
+	const close = (options = {}) => {
+		if (!options.bypassConfirmation && confirmOnClose.value && isOpen.value) {
+			isConfirmingClose.value = true;
+			return;
+		}
+		closeNow();
+	};
+	const controller = {
+		isOpen,
+		confirmOnClose,
+		isConfirmingClose,
+		open,
+		close,
+		toggle: () => isOpen.value ? close() : open(),
+		setOpen: (nextIsOpen, options) => nextIsOpen ? open() : close(options),
+		syncOpen: (nextIsOpen) => {
+			isOpen.value = nextIsOpen;
+		},
+		requestClose: () => close(),
+		confirmClose: closeNow,
+		cancelClose: () => isConfirmingClose.value = false,
+		cancelConfirmation: () => isConfirmingClose.value = false,
+		addOnOpen: addTo(onOpenHandlers),
+		addOnClose: addTo(onCloseHandlers),
+		addOnOpenChange: addTo(onOpenChangeHandlers)
+	};
+	controllers.add(markRaw(controller));
+	return controller;
+};
+/**
+* Registers an overlay's `onOpen`/`onClose`/`onOpenChange` props on its
+* controller for as long as it is mounted — Flow's `useUpdateOptions`.
+*/
+var useOverlayHandlers = (controller, handlers) => {
+	watchEffect((onCleanup) => {
+		const target = controller();
+		const onOpen = handlers.onOpen?.();
+		const onClose = handlers.onClose?.();
+		const onOpenChange = handlers.onOpenChange?.();
+		const disposers = [
+			onOpen && target.addOnOpen(onOpen),
+			onClose && target.addOnClose(onClose),
+			onOpenChange && target.addOnOpenChange(onOpenChange)
+		];
+		onCleanup(() => disposers.forEach((dispose) => dispose?.()));
+	});
+};
+var createOverlayController = (options = {}) => createOverlayControllerFor(ref(options.isDefaultOpen ?? false));
+function useOverlayController(typeOrOptions, options = {}) {
+	if (typeof typeOrOptions !== "string") return createOverlayController(typeOrOptions);
+	const { reuseControllerFromContext = true } = options;
+	return (reuseControllerFromContext ? injectOverlayController(typeOrOptions) : void 0) ?? createOverlayController(options);
+}
+/**
+* Flow's `useModalController(options)`: `useOverlayController("Modal",
+* options)`.
+*/
+var useModalController = (options) => useOverlayController("Modal", options);
+var overlayContextKey = Symbol("flowOverlayContext");
+var injectOverlayContext = () => inject(overlayContextKey, { byType: {} });
+/**
+* Provides the context for a subtree. The controller may be a getter: an
+* overlay whose `controller` prop changes hands its subtree the new one, and
+* the context reads it when it is asked rather than when it was provided.
+*/
+var provideOverlayContext = (type, controller, options = {}) => {
+	const { isOverlayContent = true } = options;
+	const parent = injectOverlayContext();
+	const current = typeof controller === "function" ? controller : () => controller;
+	provide(overlayContextKey, {
+		get byType() {
+			return {
+				...parent.byType,
+				[type]: current()
+			};
+		},
+		get nearest() {
+			return isOverlayContent ? current() : parent.nearest;
+		}
+	});
+};
+/**
+* The controller an overlay or trigger drives, in Flow's order of precedence:
+* the one the app passes, the one of a surrounding trigger of that type, or one
+* of its own. It follows the prop — Flow reads it on every render.
+*/
+var useOwnController = (fromProp, inheritFrom, options = () => ({})) => {
+	const context = injectOverlayContext();
+	let own;
+	return computed(() => fromProp() ?? (inheritFrom ? context.byType[inheritFrom] : void 0) ?? (own ??= createOverlayController(options())));
+};
+/**
+* The controller of the surrounding overlay of that type — or, without a type,
+* of the overlay this component is inside.
+*/
+var injectOverlayController = (type) => {
+	const context = injectOverlayContext();
+	return type ? context.byType[type] : context.nearest;
+};
+//#endregion
+export { createOverlayController, createOverlayControllerFor, injectOverlayContext, injectOverlayController, isOverlayController, provideOverlayContext, useModalController, useOverlayController, useOverlayHandlers, useOwnController };
+
+//# sourceMappingURL=overlayController.mjs.map

package/dist/js/remote-vue-components/src/overlays/overlayController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayController.mjs","names":[],"sources":["../../../../../src/overlays/overlayController.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  markRaw,\n  provide,\n  ref,\n  watchEffect,\n  type ComputedRef,\n  type InjectionKey,\n  type Raw,\n  type Ref,\n} from \"vue\";\n\n/**\n * The Vue counterpart of Flow's `OverlayController`.\n *\n * Flow's version is a MobX model shared through React context; here the state\n * is a `ref` and the sharing is `provide`/`inject`. Same contract: a trigger\n * opens it, the overlay reads it, and anything inside can close it.\n */\nexport type OverlayOpenHandler = () => unknown;\nexport type OverlayCloseHandler = () => unknown;\nexport type OverlayOpenStateHandler = (isOpen: boolean) => unknown;\n\nexport interface OverlayCloseOptions {\n  /** Close without asking, even when the overlay requires confirmation. */\n  bypassConfirmation?: boolean;\n}\n\n/*\n * `Raw`, as `markRaw` makes it: reactive state keeps the controller as it is,\n * and its type says so too.\n */\nexport interface OverlayController extends Raw<Record<never, never>> {\n  isOpen: Ref<boolean>;\n  /**\n   * Whether closing has to be confirmed first. Set by a `<Modal\n   * confirm-on-close>`, not by the app.\n   */\n  confirmOnClose: Ref<boolean>;\n  /** Whether the confirmation is on screen right now. */\n  isConfirmingClose: Ref<boolean>;\n  open: () => void;\n  /**\n   * Closes — or asks first, when the overlay requires confirmation and\n   * `bypassConfirmation` is not set. Flow's `close(options)`.\n   */\n  close: (options?: OverlayCloseOptions) => void;\n  toggle: () => void;\n  setOpen: (isOpen: boolean, options?: OverlayCloseOptions) => void;\n  /**\n   * Sets the state without running a handler — to mirror a controlled `isOpen`,\n   * whose change came from the app.\n   */\n  syncOpen: (isOpen: boolean) => void;\n  /** `close()` without options: asks first, when the overlay requires it. */\n  requestClose: () => void;\n  /** Answers a pending confirmation with yes: the overlay closes. */\n  confirmClose: () => void;\n  /** Answers a pending confirmation with no: the overlay stays open. */\n  cancelClose: () => void;\n  /** Flow's name for `cancelClose`. */\n  cancelConfirmation: () => void;\n  /*\n   * As in Flow: a handler returning `false` aborts the change. Each returns\n   * its disposer.\n   */\n  addOnOpen: (handler: OverlayOpenHandler) => () => void;\n  addOnClose: (handler: OverlayCloseHandler) => () => void;\n  addOnOpenChange: (handler: OverlayOpenStateHandler) => () => void;\n}\n\nexport interface CreateOverlayControllerOptions {\n  /** Whether the overlay starts open. @default false */\n  isDefaultOpen?: boolean;\n}\n\nexport interface UseOverlayControllerOptions extends CreateOverlayControllerOptions {\n  /**\n   * Hand back the controller of the surrounding overlay of the requested type,\n   * when there is one, instead of a new one — as in Flow. @default true\n   */\n  reuseControllerFromContext?: boolean;\n}\n\nconst controllers = new WeakSet<object>();\n\n/** Whether a value is a controller, rather than options naming one. */\nexport const isOverlayController = (\n  value: unknown,\n): value is OverlayController =>\n  typeof value === \"object\" && value !== null && controllers.has(value);\n\nconst addTo =\n  <T>(handlers: Set<T>) =>\n  (handler: T): (() => void) => {\n    handlers.add(handler);\n    return () => handlers.delete(handler);\n  };\n\n/**\n * Builds a controller around an existing `isOpen`, so a second controller can\n * drive the same state — which is how the confirmation modal is bound to its\n * parent's `isConfirmingClose`.\n */\nexport const createOverlayControllerFor = (\n  isOpen: Ref<boolean>,\n): OverlayController => {\n  const confirmOnClose = ref(false);\n  const isConfirmingClose = ref(false);\n  const onOpenHandlers = new Set<OverlayOpenHandler>();\n  const onCloseHandlers = new Set<OverlayCloseHandler>();\n  const onOpenChangeHandlers = new Set<OverlayOpenStateHandler>();\n  /* Flow's `openStateInFlight`: a handler setting the state again is a no-op. */\n  let inFlight: boolean | undefined;\n\n  /* Flow's `applyOpenState`, after the confirmation. */\n  const apply = (toOpen: boolean): void => {\n    if (isOpen.value === toOpen || inFlight === toOpen) {\n      return;\n    }\n    inFlight = toOpen;\n    try {\n      const run = (handlers: Set<(isOpen: boolean) => unknown>) =>\n        [...handlers].map((handler) => handler(toOpen)).includes(false);\n      const aborted =\n        run(toOpen ? onOpenHandlers : onCloseHandlers) ||\n        run(onOpenChangeHandlers);\n      if (!aborted) {\n        isOpen.value = toOpen;\n      }\n    } finally {\n      inFlight = undefined;\n    }\n  };\n\n  const open = () => {\n    isConfirmingClose.value = false;\n    apply(true);\n  };\n\n  const closeNow = () => {\n    isConfirmingClose.value = false;\n    apply(false);\n  };\n\n  /*\n   * Every close an app or the host can ask for goes through here, so a dismiss\n   * — Escape, a click outside — is confirmed just like a button. The host\n   * reports that dismiss as `openChange(false)`, and leaving `isOpen` alone is\n   * what puts the overlay back: it is a controlled prop on the host's side.\n   */\n  const close = (options: OverlayCloseOptions = {}) => {\n    if (!options.bypassConfirmation && confirmOnClose.value && isOpen.value) {\n      isConfirmingClose.value = true;\n      return;\n    }\n    closeNow();\n  };\n\n  const controller: OverlayController = {\n    isOpen,\n    confirmOnClose,\n    isConfirmingClose,\n    open,\n    close,\n    toggle: () => (isOpen.value ? close() : open()),\n    setOpen: (nextIsOpen: boolean, options?: OverlayCloseOptions) =>\n      nextIsOpen ? open() : close(options),\n    syncOpen: (nextIsOpen: boolean) => {\n      isOpen.value = nextIsOpen;\n    },\n    requestClose: () => close(),\n    confirmClose: closeNow,\n    cancelClose: () => (isConfirmingClose.value = false),\n    cancelConfirmation: () => (isConfirmingClose.value = false),\n    addOnOpen: addTo(onOpenHandlers),\n    addOnClose: addTo(onCloseHandlers),\n    addOnOpenChange: addTo(onOpenChangeHandlers),\n  };\n  /*\n   * Raw, so `reactive()`, `ref()` or a store hold the controller itself: a\n   * proxy would unwrap its refs and miss the `controllers` set.\n   */\n  controllers.add(markRaw(controller));\n  return controller;\n};\n\n/**\n * Registers an overlay's `onOpen`/`onClose`/`onOpenChange` props on its\n * controller for as long as it is mounted — Flow's `useUpdateOptions`.\n */\nexport const useOverlayHandlers = (\n  controller: () => OverlayController,\n  handlers: {\n    onOpen?: () => OverlayOpenHandler | undefined;\n    onClose?: () => OverlayCloseHandler | undefined;\n    onOpenChange?: () => OverlayOpenStateHandler | undefined;\n  },\n): void => {\n  watchEffect((onCleanup) => {\n    const target = controller();\n    const onOpen = handlers.onOpen?.();\n    const onClose = handlers.onClose?.();\n    const onOpenChange = handlers.onOpenChange?.();\n    const disposers = [\n      onOpen && target.addOnOpen(onOpen),\n      onClose && target.addOnClose(onClose),\n      onOpenChange && target.addOnOpenChange(onOpenChange),\n    ];\n    onCleanup(() => disposers.forEach((dispose) => dispose?.()));\n  });\n};\n\nexport const createOverlayController = (\n  options: CreateOverlayControllerOptions = {},\n): OverlayController =>\n  createOverlayControllerFor(ref(options.isDefaultOpen ?? false));\n\n/**\n * A controller an app can hold itself, to open an overlay from anywhere —\n * Flow's `useOverlayController(type, options)`. Given a type, it hands back the\n * surrounding overlay's controller of that type when there is one, as Flow\n * does; `reuseControllerFromContext: false` asks for a new one regardless.\n *\n * Also takes the options alone, for a controller that belongs to no type. Call\n * it in `setup()`: the surrounding overlay is found through `inject`.\n */\nexport function useOverlayController(\n  type: OverlayType,\n  options?: UseOverlayControllerOptions,\n): OverlayController;\nexport function useOverlayController(\n  options?: CreateOverlayControllerOptions,\n): OverlayController;\nexport function useOverlayController(\n  typeOrOptions?: OverlayType | CreateOverlayControllerOptions,\n  options: UseOverlayControllerOptions = {},\n): OverlayController {\n  if (typeof typeOrOptions !== \"string\") {\n    return createOverlayController(typeOrOptions);\n  }\n  const { reuseControllerFromContext = true } = options;\n  const fromContext = reuseControllerFromContext\n    ? injectOverlayController(typeOrOptions)\n    : undefined;\n  return fromContext ?? createOverlayController(options);\n}\n\n/**\n * Flow's `useModalController(options)`: `useOverlayController(\"Modal\",\n * options)`.\n */\nexport const useModalController = (\n  options?: UseOverlayControllerOptions,\n): OverlayController => useOverlayController(\"Modal\", options);\n\n/** The overlays a controller can be registered for, by Flow component name. */\nexport type OverlayType = \"Modal\" | \"Popover\" | \"LightBox\";\n\n/**\n * Flow's `OverlayContext`: the surrounding overlays' controllers by component\n * name, and the one whose content this subtree is. A trigger registers its\n * controller by name only — its button is not inside the overlay it opens.\n */\nexport interface OverlayContext {\n  byType: Partial<Record<OverlayType, OverlayController>>;\n  nearest?: OverlayController;\n}\n\nconst overlayContextKey: InjectionKey<OverlayContext> =\n  Symbol(\"flowOverlayContext\");\n\nexport const injectOverlayContext = (): OverlayContext =>\n  inject(overlayContextKey, { byType: {} });\n\n/**\n * Provides the context for a subtree. The controller may be a getter: an\n * overlay whose `controller` prop changes hands its subtree the new one, and\n * the context reads it when it is asked rather than when it was provided.\n */\nexport const provideOverlayContext = (\n  type: OverlayType,\n  controller: OverlayController | (() => OverlayController),\n  options: { isOverlayContent?: boolean } = {},\n): void => {\n  const { isOverlayContent = true } = options;\n  const parent = injectOverlayContext();\n  const current =\n    typeof controller === \"function\" ? controller : () => controller;\n\n  provide(overlayContextKey, {\n    get byType() {\n      return { ...parent.byType, [type]: current() };\n    },\n    get nearest() {\n      return isOverlayContent ? current() : parent.nearest;\n    },\n  });\n};\n\n/**\n * The controller an overlay or trigger drives, in Flow's order of precedence:\n * the one the app passes, the one of a surrounding trigger of that type, or one\n * of its own. It follows the prop — Flow reads it on every render.\n */\nexport const useOwnController = (\n  fromProp: () => OverlayController | undefined,\n  inheritFrom: OverlayType | undefined,\n  options: () => CreateOverlayControllerOptions = () => ({}),\n): ComputedRef<OverlayController> => {\n  const context = injectOverlayContext();\n  let own: OverlayController | undefined;\n\n  return computed(\n    () =>\n      fromProp() ??\n      (inheritFrom ? context.byType[inheritFrom] : undefined) ??\n      (own ??= createOverlayController(options())),\n  );\n};\n\n/**\n * The controller of the surrounding overlay of that type — or, without a type,\n * of the overlay this component is inside.\n */\nexport const injectOverlayController = (\n  type?: OverlayType,\n): OverlayController | undefined => {\n  const context = injectOverlayContext();\n  return type ? context.byType[type] : context.nearest;\n};\n"],"mappings":";;AAqFA,IAAM,8BAAc,IAAI,QAAgB;;AAGxC,IAAa,uBACX,UAEA,OAAO,UAAU,YAAY,UAAU,QAAQ,YAAY,IAAI,KAAK;AAEtE,IAAM,SACA,cACH,YAA6B;CAC5B,SAAS,IAAI,OAAO;CACpB,aAAa,SAAS,OAAO,OAAO;AACtC;;;;;;AAOF,IAAa,8BACX,WACsB;CACtB,MAAM,iBAAiB,IAAI,KAAK;CAChC,MAAM,oBAAoB,IAAI,KAAK;CACnC,MAAM,iCAAiB,IAAI,IAAwB;CACnD,MAAM,kCAAkB,IAAI,IAAyB;CACrD,MAAM,uCAAuB,IAAI,IAA6B;CAE9D,IAAI;CAGJ,MAAM,SAAS,WAA0B;EACvC,IAAI,OAAO,UAAU,UAAU,aAAa,QAC1C;EAEF,WAAW;EACX,IAAI;GACF,MAAM,OAAO,aACX,CAAC,GAAG,QAAQ,CAAC,CAAC,KAAK,YAAY,QAAQ,MAAM,CAAC,CAAC,CAAC,SAAS,KAAK;GAIhE,IAAI,EAFF,IAAI,SAAS,iBAAiB,eAAe,KAC7C,IAAI,oBAAoB,IAExB,OAAO,QAAQ;EAEnB,UAAU;GACR,WAAW,KAAA;EACb;CACF;CAEA,MAAM,aAAa;EACjB,kBAAkB,QAAQ;EAC1B,MAAM,IAAI;CACZ;CAEA,MAAM,iBAAiB;EACrB,kBAAkB,QAAQ;EAC1B,MAAM,KAAK;CACb;CAQA,MAAM,SAAS,UAA+B,CAAC,MAAM;EACnD,IAAI,CAAC,QAAQ,sBAAsB,eAAe,SAAS,OAAO,OAAO;GACvE,kBAAkB,QAAQ;GAC1B;EACF;EACA,SAAS;CACX;CAEA,MAAM,aAAgC;EACpC;EACA;EACA;EACA;EACA;EACA,cAAe,OAAO,QAAQ,MAAM,IAAI,KAAK;EAC7C,UAAU,YAAqB,YAC7B,aAAa,KAAK,IAAI,MAAM,OAAO;EACrC,WAAW,eAAwB;GACjC,OAAO,QAAQ;EACjB;EACA,oBAAoB,MAAM;EAC1B,cAAc;EACd,mBAAoB,kBAAkB,QAAQ;EAC9C,0BAA2B,kBAAkB,QAAQ;EACrD,WAAW,MAAM,cAAc;EAC/B,YAAY,MAAM,eAAe;EACjC,iBAAiB,MAAM,oBAAoB;CAC7C;CAKA,YAAY,IAAI,QAAQ,UAAU,CAAC;CACnC,OAAO;AACT;;;;;AAMA,IAAa,sBACX,YACA,aAKS;CACT,aAAa,cAAc;EACzB,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,SAAS,SAAS;EACjC,MAAM,UAAU,SAAS,UAAU;EACnC,MAAM,eAAe,SAAS,eAAe;EAC7C,MAAM,YAAY;GAChB,UAAU,OAAO,UAAU,MAAM;GACjC,WAAW,OAAO,WAAW,OAAO;GACpC,gBAAgB,OAAO,gBAAgB,YAAY;EACrD;EACA,gBAAgB,UAAU,SAAS,YAAY,UAAU,CAAC,CAAC;CAC7D,CAAC;AACH;AAEA,IAAa,2BACX,UAA0C,CAAC,MAE3C,2BAA2B,IAAI,QAAQ,iBAAiB,KAAK,CAAC;AAkBhE,SAAgB,qBACd,eACA,UAAuC,CAAC,GACrB;CACnB,IAAI,OAAO,kBAAkB,UAC3B,OAAO,wBAAwB,aAAa;CAE9C,MAAM,EAAE,6BAA6B,SAAS;CAI9C,QAHoB,6BAChB,wBAAwB,aAAa,IACrC,KAAA,MACkB,wBAAwB,OAAO;AACvD;;;;;AAMA,IAAa,sBACX,YACsB,qBAAqB,SAAS,OAAO;AAe7D,IAAM,oBACJ,OAAO,oBAAoB;AAE7B,IAAa,6BACX,OAAO,mBAAmB,EAAE,QAAQ,CAAC,EAAE,CAAC;;;;;;AAO1C,IAAa,yBACX,MACA,YACA,UAA0C,CAAC,MAClC;CACT,MAAM,EAAE,mBAAmB,SAAS;CACpC,MAAM,SAAS,qBAAqB;CACpC,MAAM,UACJ,OAAO,eAAe,aAAa,mBAAmB;CAExD,QAAQ,mBAAmB;EACzB,IAAI,SAAS;GACX,OAAO;IAAE,GAAG,OAAO;KAAS,OAAO,QAAQ;GAAE;EAC/C;EACA,IAAI,UAAU;GACZ,OAAO,mBAAmB,QAAQ,IAAI,OAAO;EAC/C;CACF,CAAC;AACH;;;;;;AAOA,IAAa,oBACX,UACA,aACA,iBAAuD,CAAC,OACrB;CACnC,MAAM,UAAU,qBAAqB;CACrC,IAAI;CAEJ,OAAO,eAEH,SAAS,MACR,cAAc,QAAQ,OAAO,eAAe,KAAA,OAC5C,QAAQ,wBAAwB,QAAQ,CAAC,EAC9C;AACF;;;;;AAMA,IAAa,2BACX,SACkC;CAClC,MAAM,UAAU,qBAAqB;CACrC,OAAO,OAAO,QAAQ,OAAO,QAAQ,QAAQ;AAC/C"}

package/dist/js/remote-vue-components/src/overlays/triggers.mjs

@@ -0,0 +1,13 @@
+import { composition } from "../lib/composition.mjs";
+import { createOverlayTrigger } from "./createOverlayTrigger.mjs";
+//#region src/overlays/triggers.ts
+/** Opens a `Modal`. */
+var ModalTrigger = composition(createOverlayTrigger("ModalTrigger", "Modal", { reportsUsage: true }));
+/** Opens a `Popover`. */
+var PopoverTrigger = composition(createOverlayTrigger("PopoverTrigger", "Popover", { reportsUsage: true }));
+/** Opens a `LightBox`. */
+var LightBoxTrigger = composition(createOverlayTrigger("LightBoxTrigger", "LightBox", { reportsUsage: false }));
+//#endregion
+export { LightBoxTrigger, ModalTrigger, PopoverTrigger };
+
+//# sourceMappingURL=triggers.mjs.map

package/dist/js/remote-vue-components/src/overlays/triggers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"triggers.mjs","names":[],"sources":["../../../../../src/overlays/triggers.ts"],"sourcesContent":["import { composition } from \"@/lib/composition\";\nimport { createOverlayTrigger } from \"@/overlays/createOverlayTrigger\";\n\n/** Opens a `Modal`. */\nexport const ModalTrigger = composition(\n  createOverlayTrigger(\"ModalTrigger\", \"Modal\", { reportsUsage: true }),\n);\n\n/** Opens a `Popover`. */\nexport const PopoverTrigger = composition(\n  createOverlayTrigger(\"PopoverTrigger\", \"Popover\", { reportsUsage: true }),\n);\n\n/** Opens a `LightBox`. */\nexport const LightBoxTrigger = composition(\n  createOverlayTrigger(\"LightBoxTrigger\", \"LightBox\", { reportsUsage: false }),\n);\n"],"mappings":";;;;AAIA,IAAa,eAAe,YAC1B,qBAAqB,gBAAgB,SAAS,EAAE,cAAc,KAAK,CAAC,CACtE;;AAGA,IAAa,iBAAiB,YAC5B,qBAAqB,kBAAkB,WAAW,EAAE,cAAc,KAAK,CAAC,CAC1E;;AAGA,IAAa,kBAAkB,YAC7B,qBAAqB,mBAAmB,YAAY,EAAE,cAAc,MAAM,CAAC,CAC7E"}

package/dist/js/remote-vue-components/src/version.mjs

@@ -0,0 +1,9 @@
+import { Version } from "@mittwald/flow-remote-core";
+//#region src/version.ts
+var communicationVersion = Version.v5;
+var packageVersion = "1.5.0";
+var version = communicationVersion;
+//#endregion
+export { communicationVersion, packageVersion, version };
+
+//# sourceMappingURL=version.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version.mjs","names":[],"sources":["../../../../src/version.ts"],"sourcesContent":["import { Version } from \"@mittwald/flow-remote-core\";\n\nexport const communicationVersion = Version.v5;\nexport const packageVersion = __FLOW_REMOTE_VUE_COMPONENTS_PACKAGE_VERSION__;\n\nexport const version = communicationVersion;\n"],"mappings":";;AAEA,IAAa,uBAAuB,QAAQ;AAC5C,IAAa,iBAAA;AAEb,IAAa,UAAU"}

package/dist/types/_bundled/flow-components-base/action/ActionState.d.ts

@@ -0,0 +1,36 @@
+export type ActionStateValue = "isIdle" | "isSucceeded" | "isPending" | "isExecuting" | "isFailed";
+/** How long each state lasts, in ms. */
+export declare const actionStateDurations: {
+    /** An async action counts as pending only after this long. */
+    pending: number;
+    succeeded: number;
+    failed: number;
+};
+/**
+ * What an `Action` shows on its button: executing, pending, then succeeded or
+ * failed for a moment, then idle again.
+ *
+ * A synchronous action shows success only with `showFeedback`, an async one
+ * unless `showFeedback` is `false`. A failure is shown either way.
+ */
+export declare class ActionState {
+    private showFeedback?;
+    state: ActionStateValue;
+    private setPendingTimeout;
+    error: unknown;
+    private isAsync;
+    constructor();
+    updateState(newState: ActionStateValue): void;
+    get isBusy(): boolean;
+    onAsyncStart(): void;
+    onSucceeded(): Promise<void>;
+    onFailed(error?: unknown): Promise<void>;
+    withFeedback(feedback?: boolean): this;
+    private startFailedFeedback;
+    private startSucceededFeedback;
+    private resetAfterDone;
+    private clearPendingTimeout;
+    private onDone;
+    private startPending;
+}
+export default ActionState;