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

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.mjs","names":[],"sources":["../../../../../src/list/settings.ts"],"sourcesContent":["import {\n  injectSettings,\n  type SettingsStore,\n} from \"@/components/SettingsProvider\";\nimport type {\n  ListSettingsOperationOptions,\n  ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\n\n/**\n * Which keys survive how.\n *\n * The same matrix Flow's React `ListSettingsStore` holds: only the filters have\n * a \"store these\" button, so only they are written to a second, manual slot.\n */\nconst supports = {\n  activeFilters: { autosave: true, manualSave: true },\n  viewMode: { autosave: true, manualSave: false },\n  sorting: { autosave: true, manualSave: false },\n  search: { autosave: true, manualSave: false },\n} as const;\n\ntype SettingKey = keyof typeof supports;\n\n/**\n * The list's view settings, persisted — `ListSettingsStore` in\n * packages/components, key for key: the `SettingsProvider`'s store, component\n * `\"List\"`, key `<storageKey>.<setting>` plus a `.autosave` sibling.\n *\n * Unvalidated, unlike React's, which parses every value with a zod schema. A\n * value that is not what it should be is dropped by the model anyway — an\n * unknown filter value is deleted, an unknown sorting simply never matches.\n */\nexport const createListSettings = (\n  store: SettingsStore,\n  storageKey: string,\n): ListSettingsPort => {\n  const keyOf = (key: string, autosave = false): string =>\n    `${storageKey}.${key}${autosave ? \".autosave\" : \"\"}`;\n\n  const get = (key: SettingKey, options: ListSettingsOperationOptions) => {\n    const { autosave, manualSave = !autosave } = options;\n\n    return (\n      (supports[key].autosave && autosave\n        ? store.get(\"List\", keyOf(key, options.autosave))\n        : undefined) ??\n      (supports[key].manualSave && manualSave\n        ? store.get(\"List\", keyOf(key, false))\n        : undefined)\n    );\n  };\n\n  const set = (\n    key: SettingKey,\n    value: unknown,\n    options: ListSettingsOperationOptions,\n  ) => {\n    if (supports[key].manualSave && options.manualSave) {\n      store.set(\"List\", keyOf(key, false), value);\n    }\n    if (supports[key].autosave && options.autosave) {\n      store.set(\"List\", keyOf(key, true), value);\n    }\n  };\n\n  return { get, store: set } as ListSettingsPort;\n};\n\n/**\n * The persistence for a list: the surrounding `SettingsProvider`'s, or none —\n * like React, a list without a provider keeps nothing.\n */\nexport const useListSettings = (\n  storageKey: string | undefined,\n): ListSettingsPort | undefined => {\n  const store = injectSettings();\n\n  return storageKey && store\n    ? createListSettings(store, storageKey)\n    : undefined;\n};\n"],"mappings":";;;;;;;;AAeA,IAAM,WAAW;CACf,eAAe;EAAE,UAAU;EAAM,YAAY;CAAK;CAClD,UAAU;EAAE,UAAU;EAAM,YAAY;CAAM;CAC9C,SAAS;EAAE,UAAU;EAAM,YAAY;CAAM;CAC7C,QAAQ;EAAE,UAAU;EAAM,YAAY;CAAM;AAC9C;;;;;;;;;;AAaA,IAAa,sBACX,OACA,eACqB;CACrB,MAAM,SAAS,KAAa,WAAW,UACrC,GAAG,WAAW,GAAG,MAAM,WAAW,cAAc;CAElD,MAAM,OAAO,KAAiB,YAA0C;EACtE,MAAM,EAAE,UAAU,aAAa,CAAC,aAAa;EAE7C,QACG,SAAS,IAAI,CAAC,YAAY,WACvB,MAAM,IAAI,QAAQ,MAAM,KAAK,QAAQ,QAAQ,CAAC,IAC9C,KAAA,OACH,SAAS,IAAI,CAAC,cAAc,aACzB,MAAM,IAAI,QAAQ,MAAM,KAAK,KAAK,CAAC,IACnC,KAAA;CAER;CAEA,MAAM,OACJ,KACA,OACA,YACG;EACH,IAAI,SAAS,IAAI,CAAC,cAAc,QAAQ,YACtC,MAAM,IAAI,QAAQ,MAAM,KAAK,KAAK,GAAG,KAAK;EAE5C,IAAI,SAAS,IAAI,CAAC,YAAY,QAAQ,UACpC,MAAM,IAAI,QAAQ,MAAM,KAAK,IAAI,GAAG,KAAK;CAE7C;CAEA,OAAO;EAAE;EAAK,OAAO;CAAI;AAC3B;;;;;AAMA,IAAa,mBACX,eACiC;CACjC,MAAM,QAAQ,eAAe;CAE7B,OAAO,cAAc,QACjB,mBAAmB,OAAO,UAAU,IACpC,KAAA;AACN"}

package/dist/js/remote-vue-components/src/list/setupComponents.mjs

@@ -0,0 +1,78 @@
+import { normalizeVNodeProps } from "../lib/propKeys.mjs";
+import { Fragment, withCtx } from "vue";
+//#region src/list/setupComponents.ts
+/**
+* A list is configured by the elements inside it, not by one big prop.
+*
+* `<List>` reads its filters, sortings, search and item view off the children
+* it was handed — the same shape Flow's React list has, where `deepFindOfType`
+* scans the children for `ListFilter` and friends. These components therefore
+* render nothing: they exist to be found.
+*/
+var booleanPropsOf = /* @__PURE__ */ new WeakMap();
+var setupComponent = (name, booleans = []) => {
+	const component = () => null;
+	component.displayName = name;
+	booleanPropsOf.set(component, booleans);
+	return component;
+};
+/** Whether a child of the list configures it rather than rendering. */
+var isListSetupComponent = (type) => typeof type === "function" && booleanPropsOf.has(type);
+var loaderFlags = [
+	"manualPagination",
+	"manualFiltering",
+	"manualSorting"
+];
+var ListStaticData = setupComponent("ListStaticData");
+var ListLoaderAsync = setupComponent("ListLoaderAsync", loaderFlags);
+var ListLoaderComposable = setupComponent("ListLoaderComposable", loaderFlags);
+var ListItem = setupComponent("ListItem", ["showList", "showTiles"]);
+var ListSearch = setupComponent("ListSearch", [
+	"autoSubmit",
+	"autosave",
+	"autoFocus"
+]);
+var ListSorting = setupComponent("ListSorting", ["autosave", "defaultEnabled"]);
+var ListFilter = setupComponent("ListFilter", ["autosave", "manualSave"]);
+var ListTable = setupComponent("ListTable");
+var ListTableHeader = setupComponent("ListTableHeader");
+var ListTableColumn = setupComponent("ListTableColumn");
+var ListTableBody = setupComponent("ListTableBody");
+var ListTableRow = setupComponent("ListTableRow");
+var ListTableCell = setupComponent("ListTableCell");
+var isVNode$1 = (value) => typeof value === "object" && value !== null && "type" in value;
+/**
+* Every setup element of one kind, wherever it sits in the children.
+*
+* Walks fragments and arrays, because `v-for` and `<template>` both produce
+* them, but stops at a component: a `ListFilter` inside another component's
+* slot is that component's business, and Flow's React list draws the same
+* line.
+*/
+var findSetups = (children, component) => {
+	const found = [];
+	const walk = (node) => {
+		if (Array.isArray(node)) {
+			node.forEach(walk);
+			return;
+		}
+		if (!isVNode$1(node)) return;
+		if (node.type === component) {
+			const slots = node.children;
+			const render = slots?.default;
+			found.push({
+				props: normalizeVNodeProps(node.props, booleanPropsOf.get(component)),
+				render: typeof render === "function" ? withCtx(render, slots?._ctx) : void 0
+			});
+			return;
+		}
+		if (node.type === Fragment) walk(node.children);
+	};
+	walk(children);
+	return found;
+};
+var findSetup = (children, component) => findSetups(children, component)[0];
+//#endregion
+export { ListFilter, ListItem, ListLoaderAsync, ListLoaderComposable, ListSearch, ListSorting, ListStaticData, ListTable, ListTableBody, ListTableCell, ListTableColumn, ListTableHeader, ListTableRow, findSetup, findSetups, isListSetupComponent };
+
+//# sourceMappingURL=setupComponents.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setupComponents.mjs","names":["isVNode"],"sources":["../../../../../src/list/setupComponents.ts"],"sourcesContent":["import {\n  Fragment,\n  withCtx,\n  type Component,\n  type ComponentInternalInstance,\n  type FunctionalComponent,\n  type VNode,\n} from \"vue\";\nimport { normalizeVNodeProps } from \"@/lib/propKeys\";\nimport type { AnyRecord } from \"@/lib/types\";\n\n/**\n * A setup element: it renders nothing and carries what the list reads off it.\n *\n * Functional and typed over an open record, because both halves of that are the\n * authoring surface: JSX needs a call signature on the element type, and the\n * props here are the list's contract (`property`, `mode`, `loader`, …) rather\n * than the component's — the component never sees them.\n */\nexport type ListSetupComponent = FunctionalComponent<AnyRecord>;\n\n/**\n * A list is configured by the elements inside it, not by one big prop.\n *\n * `<List>` reads its filters, sortings, search and item view off the children\n * it was handed — the same shape Flow's React list has, where `deepFindOfType`\n * scans the children for `ListFilter` and friends. These components therefore\n * render nothing: they exist to be found.\n */\nconst booleanPropsOf = new WeakMap<Component, readonly string[]>();\n\n/*\n * `booleans` are the props a bare attribute sets to `true` — Vue does that for\n * declared props only, and these declare none.\n */\nconst setupComponent = (\n  name: string,\n  booleans: readonly string[] = [],\n): ListSetupComponent => {\n  const component: ListSetupComponent = () => null;\n  component.displayName = name;\n  booleanPropsOf.set(component, booleans);\n  return component;\n};\n\n/** Whether a child of the list configures it rather than rendering. */\nexport const isListSetupComponent = (type: unknown): boolean =>\n  typeof type === \"function\" && booleanPropsOf.has(type as Component);\n\nconst loaderFlags = [\"manualPagination\", \"manualFiltering\", \"manualSorting\"];\n\nexport const ListStaticData = setupComponent(\"ListStaticData\");\nexport const ListLoaderAsync = setupComponent(\"ListLoaderAsync\", loaderFlags);\nexport const ListLoaderComposable = setupComponent(\n  \"ListLoaderComposable\",\n  loaderFlags,\n);\nexport const ListItem = setupComponent(\"ListItem\", [\"showList\", \"showTiles\"]);\nexport const ListSearch = setupComponent(\"ListSearch\", [\n  \"autoSubmit\",\n  \"autosave\",\n  \"autoFocus\",\n]);\nexport const ListSorting = setupComponent(\"ListSorting\", [\n  \"autosave\",\n  \"defaultEnabled\",\n]);\nexport const ListFilter = setupComponent(\"ListFilter\", [\n  \"autosave\",\n  \"manualSave\",\n]);\n\n/*\n * The table view's shape. Named `ListTable*` rather than `Table*`: this package\n * already exports the standalone Flow table's elements under those names, and\n * two star exports offering one name resolve to nothing — silently.\n */\nexport const ListTable = setupComponent(\"ListTable\");\nexport const ListTableHeader = setupComponent(\"ListTableHeader\");\nexport const ListTableColumn = setupComponent(\"ListTableColumn\");\nexport const ListTableBody = setupComponent(\"ListTableBody\");\nexport const ListTableRow = setupComponent(\"ListTableRow\");\nexport const ListTableCell = setupComponent(\"ListTableCell\");\n\nexport interface FoundSetup {\n  props: AnyRecord;\n  /** The element's scoped default slot, where it has one. */\n  render?: (slotProps: AnyRecord) => unknown;\n}\n\nconst isVNode = (value: unknown): value is VNode =>\n  typeof value === \"object\" && value !== null && \"type\" in value;\n\n/**\n * Every setup element of one kind, wherever it sits in the children.\n *\n * Walks fragments and arrays, because `v-for` and `<template>` both produce\n * them, but stops at a component: a `ListFilter` inside another component's\n * slot is that component's business, and Flow's React list draws the same\n * line.\n */\nexport const findSetups = (\n  children: unknown,\n  component: Component,\n): FoundSetup[] => {\n  const found: FoundSetup[] = [];\n\n  const walk = (node: unknown): void => {\n    if (Array.isArray(node)) {\n      node.forEach(walk);\n      return;\n    }\n    if (!isVNode(node)) {\n      return;\n    }\n    if (node.type === component) {\n      const slots = node.children as\n        | {\n            default?: (slotProps: AnyRecord) => unknown;\n            _ctx?: ComponentInternalInstance | null;\n          }\n        | undefined;\n      const render = slots?.default;\n\n      found.push({\n        props: normalizeVNodeProps(node.props, booleanPropsOf.get(component)),\n        /*\n         * Bound to whoever wrote the slot. A setup element never mounts, so\n         * Vue never wraps its slot the way it does a component's, and the list\n         * calling it from its own render would otherwise pass off the\n         * extension's item content as the list's own — which is what decides\n         * whether a component counts as used (`isRenderedByComposition`).\n         */\n        render:\n          typeof render === \"function\"\n            ? (withCtx(render, slots?._ctx) as typeof render)\n            : undefined,\n      });\n      return;\n    }\n    if (node.type === Fragment) {\n      walk(node.children);\n    }\n  };\n\n  walk(children);\n\n  return found;\n};\n\nexport const findSetup = (\n  children: unknown,\n  component: Component,\n): FoundSetup | undefined => findSetups(children, component)[0];\n"],"mappings":";;;;;;;;;;;AA6BA,IAAM,iCAAiB,IAAI,QAAsC;AAMjE,IAAM,kBACJ,MACA,WAA8B,CAAC,MACR;CACvB,MAAM,kBAAsC;CAC5C,UAAU,cAAc;CACxB,eAAe,IAAI,WAAW,QAAQ;CACtC,OAAO;AACT;;AAGA,IAAa,wBAAwB,SACnC,OAAO,SAAS,cAAc,eAAe,IAAI,IAAiB;AAEpE,IAAM,cAAc;CAAC;CAAoB;CAAmB;AAAe;AAE3E,IAAa,iBAAiB,eAAe,gBAAgB;AAC7D,IAAa,kBAAkB,eAAe,mBAAmB,WAAW;AAC5E,IAAa,uBAAuB,eAClC,wBACA,WACF;AACA,IAAa,WAAW,eAAe,YAAY,CAAC,YAAY,WAAW,CAAC;AAC5E,IAAa,aAAa,eAAe,cAAc;CACrD;CACA;CACA;AACF,CAAC;AACD,IAAa,cAAc,eAAe,eAAe,CACvD,YACA,gBACF,CAAC;AACD,IAAa,aAAa,eAAe,cAAc,CACrD,YACA,YACF,CAAC;AAOD,IAAa,YAAY,eAAe,WAAW;AACnD,IAAa,kBAAkB,eAAe,iBAAiB;AAC/D,IAAa,kBAAkB,eAAe,iBAAiB;AAC/D,IAAa,gBAAgB,eAAe,eAAe;AAC3D,IAAa,eAAe,eAAe,cAAc;AACzD,IAAa,gBAAgB,eAAe,eAAe;AAQ3D,IAAMA,aAAW,UACf,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU;;;;;;;;;AAU3D,IAAa,cACX,UACA,cACiB;CACjB,MAAM,QAAsB,CAAC;CAE7B,MAAM,QAAQ,SAAwB;EACpC,IAAI,MAAM,QAAQ,IAAI,GAAG;GACvB,KAAK,QAAQ,IAAI;GACjB;EACF;EACA,IAAI,CAACA,UAAQ,IAAI,GACf;EAEF,IAAI,KAAK,SAAS,WAAW;GAC3B,MAAM,QAAQ,KAAK;GAMnB,MAAM,SAAS,OAAO;GAEtB,MAAM,KAAK;IACT,OAAO,oBAAoB,KAAK,OAAO,eAAe,IAAI,SAAS,CAAC;IAQpE,QACE,OAAO,WAAW,aACb,QAAQ,QAAQ,OAAO,IAAI,IAC5B,KAAA;GACR,CAAC;GACD;EACF;EACA,IAAI,KAAK,SAAS,UAChB,KAAK,KAAK,QAAQ;CAEtB;CAEA,KAAK,QAAQ;CAEb,OAAO;AACT;AAEA,IAAa,aACX,UACA,cAC2B,WAAW,UAAU,SAAS,CAAC,CAAC"}

package/dist/js/remote-vue-components/src/list/styles.mjs

@@ -0,0 +1,32 @@
+//#region src/list/styles.ts
+var listStyles = {
+	list: "flow--list",
+	listWrapper: "flow--list--list-wrapper",
+	hideVisuallyEmptyView: "flow--list--hide-visually-empty-view",
+	items: "flow--list--items",
+	itemsLoading: "flow--list--items--is-loading",
+	itemsTiles: "flow--list--items--tiles",
+	footer: "flow--list--footer",
+	header: "flow--list--header",
+	headerContent: "flow--list--header--header-content",
+	headerOptions: "flow--list--header--options",
+	headerWithSearch: "flow--list--header--with-search",
+	headerActions: "flow--list--header--actions",
+	headerAction: "flow--list--header--action",
+	hideOnMobile: "flow--list--header--hide-on-mobile",
+	hideOnDesktop: "flow--list--header--hide-on-desktop",
+	activeFilters: "flow--list--header--active-filters",
+	searchField: "flow--list--header--search-field",
+	hideVisuallyActions: "flow--list--header--hide-visually-actions",
+	selectAllCheckbox: "flow--list--header--all-filters-modal--select-all-checkbox"
+};
+/** The list item view's own classes, from `ListItemView.module.scss`. */
+var itemViewStyles = { action: "flow--list--list-item-view--action" };
+var className = (...parts) => {
+	const used = parts.filter((p) => !!p);
+	return used.length > 0 ? used.join(" ") : void 0;
+};
+//#endregion
+export { className, itemViewStyles, listStyles };
+
+//# sourceMappingURL=styles.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../../../../src/list/styles.ts"],"sourcesContent":["/*\n * Flow's own class names, from the List's CSS modules.\n *\n * Generated from each file's path (`flow--list--header--options` is\n * `Header.module.scss`'s `.options`), shipped in `@mittwald/flow-stylesheet`,\n * and not importable from a published package — so a Vue rebuild of a React\n * composition has to name them. The same trade `Modal` makes, and the same\n * argument for marking `List` `@flr-generate` instead.\n */\nexport const listStyles = {\n  list: \"flow--list\",\n  listWrapper: \"flow--list--list-wrapper\",\n  hideVisuallyEmptyView: \"flow--list--hide-visually-empty-view\",\n  items: \"flow--list--items\",\n  itemsLoading: \"flow--list--items--is-loading\",\n  itemsTiles: \"flow--list--items--tiles\",\n  footer: \"flow--list--footer\",\n  header: \"flow--list--header\",\n  headerContent: \"flow--list--header--header-content\",\n  headerOptions: \"flow--list--header--options\",\n  headerWithSearch: \"flow--list--header--with-search\",\n  headerActions: \"flow--list--header--actions\",\n  headerAction: \"flow--list--header--action\",\n  hideOnMobile: \"flow--list--header--hide-on-mobile\",\n  hideOnDesktop: \"flow--list--header--hide-on-desktop\",\n  activeFilters: \"flow--list--header--active-filters\",\n  searchField: \"flow--list--header--search-field\",\n  hideVisuallyActions: \"flow--list--header--hide-visually-actions\",\n  selectAllCheckbox:\n    \"flow--list--header--all-filters-modal--select-all-checkbox\",\n} as const;\n\n/** The list item view's own classes, from `ListItemView.module.scss`. */\nexport const itemViewStyles = {\n  action: \"flow--list--list-item-view--action\",\n} as const;\n\nexport const className = (\n  ...parts: (string | false | undefined)[]\n): string | undefined => {\n  const used = parts.filter((p): p is string => !!p);\n  return used.length > 0 ? used.join(\" \") : undefined;\n};\n"],"mappings":";AASA,IAAa,aAAa;CACxB,MAAM;CACN,aAAa;CACb,uBAAuB;CACvB,OAAO;CACP,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,eAAe;CACf,eAAe;CACf,kBAAkB;CAClB,eAAe;CACf,cAAc;CACd,cAAc;CACd,eAAe;CACf,eAAe;CACf,aAAa;CACb,qBAAqB;CACrB,mBACE;AACJ;;AAGA,IAAa,iBAAiB,EAC5B,QAAQ,qCACV;AAEA,IAAa,aACX,GAAG,UACoB;CACvB,MAAM,OAAO,MAAM,QAAQ,MAAmB,CAAC,CAAC,CAAC;CACjD,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,GAAG,IAAI,KAAA;AAC5C"}

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

@@ -0,0 +1,116 @@
+import { useLanguage } from "../composables/remoteContext.mjs";
+import { composition } from "../lib/composition.mjs";
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { ActionGroup } from "../auto-generated/ActionGroup.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { ClearPropsContext } from "../auto-generated/ClearPropsContext.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { LightBoxGallery } from "../auto-generated/LightBoxGallery.mjs";
+import { OverlayContent } from "../auto-generated/OverlayContent.mjs";
+import { IconClose } from "../icons/components/IconClose.mjs";
+import { applyChildRules, flattenChildren } from "./childProps.mjs";
+import { provideOverlayContext, useOverlayHandlers, useOwnController } from "./overlayController.mjs";
+import { Action } from "../components/Action.mjs";
+import { ActionBatch } from "../components/ActionBatch.mjs";
+import { lightBoxCloseTexts } from "./locales.mjs";
+import { defineComponent, h, onMounted } from "vue";
+//#region src/overlays/LightBox.ts
+var styles = {
+	overlay: "flow--overlay",
+	lightBox: "flow--light-box",
+	fitScreen: "flow--light-box--fit-screen",
+	content: "flow--light-box--content",
+	actions: "flow--light-box--actions",
+	actionGroup: "flow--light-box--action-group",
+	gallery: "flow--light-box--gallery"
+};
+var lightStaticButton = {
+	variant: "solid",
+	color: "light-static"
+};
+var buttonRules = (child) => child.type === Button ? { props: lightStaticButton } : child.type === Action || child.type === ActionBatch ? { children: buttonRules } : void 0;
+var childRules = (child) => child.type === ActionGroup ? {
+	props: {
+		class: styles.actionGroup,
+		spacing: "m",
+		preserveOrder: true
+	},
+	children: buttonRules
+} : child.type === LightBoxGallery ? { props: { class: styles.gallery } } : void 0;
+var LightBox = defineComponent({
+	name: "LightBox",
+	inheritAttrs: false,
+	props: {
+		/** Whether content may exceed the available screen space. @default true */
+		fitScreen: {
+			type: Boolean,
+			default: true
+		},
+		/** A controller to open and close the light box from anywhere. */
+		controller: {
+			type: Object,
+			default: void 0
+		},
+		/** Whether a click outside closes the light box. @default true */
+		isDismissable: {
+			type: Boolean,
+			default: true
+		},
+		/** Whether the light box is open. Use it to control its state. */
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		onOpen: {
+			type: Function,
+			default: void 0
+		},
+		onClose: {
+			type: Function,
+			default: void 0
+		},
+		onOpenChange: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		onMounted(useComponentUsage("LightBox"));
+		const language = useLanguage();
+		const controller = useOwnController(() => props.controller, "LightBox");
+		provideOverlayContext("Modal", () => controller.value);
+		useOverlayHandlers(() => controller.value, {
+			onOpen: () => props.onOpen,
+			onClose: () => props.onClose,
+			onOpenChange: () => props.onOpenChange
+		});
+		return () => {
+			const className = [
+				styles.overlay,
+				styles.lightBox,
+				props.fitScreen ? styles.fitScreen : void 0,
+				attrs.class
+			].filter(Boolean).join(" ");
+			const children = applyChildRules(slots.default?.(), childRules);
+			const isActionGroup = (child) => child.type === ActionGroup;
+			const actionGroups = flattenChildren(children).filter(isActionGroup);
+			const content = flattenChildren(children).filter((child) => !isActionGroup(child));
+			const closeButton = h(Button, {
+				...lightStaticButton,
+				"aria-label": language.value?.startsWith("de") ? lightBoxCloseTexts["de-DE"] : lightBoxCloseTexts["en-US"],
+				onPress: () => controller.value.close()
+			}, () => h(IconClose));
+			return h(ClearPropsContext, null, () => h(OverlayContent, {
+				class: className,
+				isOpen: props.isOpen ?? controller.value.isOpen.value,
+				isDismissable: props.isDismissable,
+				onOpenChange: controller.value.setOpen
+			}, () => [h(Div, { class: styles.content }, () => content), h(Div, { class: styles.actions }, () => [closeButton, ...actionGroups])]));
+		};
+	}
+});
+composition(LightBox);
+//#endregion
+export { LightBox, LightBox as default };
+
+//# sourceMappingURL=LightBox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LightBox.mjs","names":[],"sources":["../../../../../src/overlays/LightBox.ts"],"sourcesContent":["import {\n  ActionGroup,\n  Button,\n  ClearPropsContext,\n  Div,\n  LightBoxGallery,\n  OverlayContent,\n} from \"@/auto-generated\";\nimport Action from \"@/components/Action\";\nimport ActionBatch from \"@/components/ActionBatch\";\nimport { useLanguage } from \"@/composables/remoteContext\";\nimport { IconClose } from \"@/icons\";\nimport { lightBoxCloseTexts } from \"@/overlays/locales\";\nimport {\n  applyChildRules,\n  flattenChildren,\n  type ChildRules,\n} from \"@/overlays/childProps\";\nimport {\n  provideOverlayContext,\n  useOwnController,\n  useOverlayHandlers,\n  type OverlayCloseHandler,\n  type OverlayController,\n  type OverlayOpenHandler,\n  type OverlayOpenStateHandler,\n} from \"@/overlays/overlayController\";\nimport { defineComponent, h, onMounted, type PropType, type VNode } 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  overlay: \"flow--overlay\",\n  lightBox: \"flow--light-box\",\n  fitScreen: \"flow--light-box--fit-screen\",\n  content: \"flow--light-box--content\",\n  actions: \"flow--light-box--actions\",\n  actionGroup: \"flow--light-box--action-group\",\n  gallery: \"flow--light-box--gallery\",\n};\n\nconst lightStaticButton = { variant: \"solid\", color: \"light-static\" } as const;\n\n/* Flow's `ActionGroup: { Button: … }`, through the actions inside it too. */\nconst buttonRules: ChildRules = (child) =>\n  child.type === Button\n    ? { props: lightStaticButton }\n    : child.type === Action || child.type === ActionBatch\n      ? { children: buttonRules }\n      : undefined;\n\nconst childRules: ChildRules = (child) =>\n  child.type === ActionGroup\n    ? {\n        props: {\n          class: styles.actionGroup,\n          spacing: \"m\",\n          preserveOrder: true,\n        },\n        children: buttonRules,\n      }\n    : child.type === LightBoxGallery\n      ? { props: { class: styles.gallery } }\n      : undefined;\n\nexport const LightBox = defineComponent({\n  name: \"LightBox\",\n\n  inheritAttrs: false,\n\n  props: {\n    /** Whether content may exceed the available screen space. @default true */\n    fitScreen: { type: Boolean, default: true },\n    /** A controller to open and close the light box from anywhere. */\n    controller: {\n      type: Object as PropType<OverlayController>,\n      default: undefined,\n    },\n    /** Whether a click outside closes the light box. @default true */\n    isDismissable: { type: Boolean, default: true },\n    /** Whether the light box is open. Use it to control its state. */\n    isOpen: { type: Boolean, default: undefined },\n    onOpen: {\n      type: Function as PropType<OverlayOpenHandler>,\n      default: undefined,\n    },\n    onClose: {\n      type: Function as PropType<OverlayCloseHandler>,\n      default: undefined,\n    },\n    onOpenChange: {\n      type: Function as PropType<OverlayOpenStateHandler>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { slots, attrs }) {\n    /* Flow's React `LightBox` is a `flowComponent` and reports itself. */\n    onMounted(useComponentUsage(\"LightBox\"));\n\n    const language = useLanguage();\n    const controller = useOwnController(() => props.controller, \"LightBox\");\n\n    /* Registered as a `Modal`, as Flow's `Overlay` registers it. */\n    provideOverlayContext(\"Modal\", () => controller.value);\n\n    useOverlayHandlers(() => controller.value, {\n      onOpen: () => props.onOpen,\n      onClose: () => props.onClose,\n      onOpenChange: () => props.onOpenChange,\n    });\n\n    return () => {\n      const className = [\n        styles.overlay,\n        styles.lightBox,\n        props.fitScreen ? styles.fitScreen : undefined,\n        attrs.class,\n      ]\n        .filter(Boolean)\n        .join(\" \");\n\n      /*\n       * Flow tunnels the `ActionGroup` out of the content into the actions,\n       * behind the close button.\n       */\n      const children = applyChildRules(slots.default?.(), childRules);\n      const isActionGroup = (child: VNode) => child.type === ActionGroup;\n      const actionGroups = flattenChildren(children).filter(isActionGroup);\n      const content = flattenChildren(children).filter(\n        (child) => !isActionGroup(child),\n      );\n\n      const closeButton = h(\n        Button,\n        {\n          ...lightStaticButton,\n          \"aria-label\": language.value?.startsWith(\"de\")\n            ? lightBoxCloseTexts[\"de-DE\"]\n            : lightBoxCloseTexts[\"en-US\"],\n          onPress: () => controller.value.close(),\n        },\n        () => h(IconClose),\n      );\n\n      /* A UI component: Flow clears the host's props context around it. */\n      return h(ClearPropsContext, null, () =>\n        h(\n          OverlayContent,\n          {\n            class: className,\n            isOpen: props.isOpen ?? controller.value.isOpen.value,\n            isDismissable: props.isDismissable,\n            onOpenChange: controller.value.setOpen,\n          },\n          () => [\n            h(Div, { class: styles.content }, () => content),\n            h(Div, { class: styles.actions }, () => [\n              closeButton,\n              ...actionGroups,\n            ]),\n          ],\n        ),\n      );\n    };\n  },\n});\n\ncomposition(LightBox);\n\nexport default LightBox;\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCA,IAAM,SAAS;CACb,SAAS;CACT,UAAU;CACV,WAAW;CACX,SAAS;CACT,SAAS;CACT,aAAa;CACb,SAAS;AACX;AAEA,IAAM,oBAAoB;CAAE,SAAS;CAAS,OAAO;AAAe;AAGpE,IAAM,eAA2B,UAC/B,MAAM,SAAS,SACX,EAAE,OAAO,kBAAkB,IAC3B,MAAM,SAAS,UAAU,MAAM,SAAS,cACtC,EAAE,UAAU,YAAY,IACxB,KAAA;AAER,IAAM,cAA0B,UAC9B,MAAM,SAAS,cACX;CACE,OAAO;EACL,OAAO,OAAO;EACd,SAAS;EACT,eAAe;CACjB;CACA,UAAU;AACZ,IACA,MAAM,SAAS,kBACb,EAAE,OAAO,EAAE,OAAO,OAAO,QAAQ,EAAE,IACnC,KAAA;AAER,IAAa,WAAW,gBAAgB;CACtC,MAAM;CAEN,cAAc;CAEd,OAAO;;EAEL,WAAW;GAAE,MAAM;GAAS,SAAS;EAAK;;EAE1C,YAAY;GACV,MAAM;GACN,SAAS,KAAA;EACX;;EAEA,eAAe;GAAE,MAAM;GAAS,SAAS;EAAK;;EAE9C,QAAQ;GAAE,MAAM;GAAS,SAAS,KAAA;EAAU;EAC5C,QAAQ;GACN,MAAM;GACN,SAAS,KAAA;EACX;EACA,SAAS;GACP,MAAM;GACN,SAAS,KAAA;EACX;EACA,cAAc;GACZ,MAAM;GACN,SAAS,KAAA;EACX;CACF;CAEA,MAAM,OAAO,EAAE,OAAO,SAAS;EAE7B,UAAU,kBAAkB,UAAU,CAAC;EAEvC,MAAM,WAAW,YAAY;EAC7B,MAAM,aAAa,uBAAuB,MAAM,YAAY,UAAU;EAGtE,sBAAsB,eAAe,WAAW,KAAK;EAErD,yBAAyB,WAAW,OAAO;GACzC,cAAc,MAAM;GACpB,eAAe,MAAM;GACrB,oBAAoB,MAAM;EAC5B,CAAC;EAED,aAAa;GACX,MAAM,YAAY;IAChB,OAAO;IACP,OAAO;IACP,MAAM,YAAY,OAAO,YAAY,KAAA;IACrC,MAAM;GACR,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAMX,MAAM,WAAW,gBAAgB,MAAM,UAAU,GAAG,UAAU;GAC9D,MAAM,iBAAiB,UAAiB,MAAM,SAAS;GACvD,MAAM,eAAe,gBAAgB,QAAQ,CAAC,CAAC,OAAO,aAAa;GACnE,MAAM,UAAU,gBAAgB,QAAQ,CAAC,CAAC,QACvC,UAAU,CAAC,cAAc,KAAK,CACjC;GAEA,MAAM,cAAc,EAClB,QACA;IACE,GAAG;IACH,cAAc,SAAS,OAAO,WAAW,IAAI,IACzC,mBAAmB,WACnB,mBAAmB;IACvB,eAAe,WAAW,MAAM,MAAM;GACxC,SACM,EAAE,SAAS,CACnB;GAGA,OAAO,EAAE,mBAAmB,YAC1B,EACE,gBACA;IACE,OAAO;IACP,QAAQ,MAAM,UAAU,WAAW,MAAM,OAAO;IAChD,eAAe,MAAM;IACrB,cAAc,WAAW,MAAM;GACjC,SACM,CACJ,EAAE,KAAK,EAAE,OAAO,OAAO,QAAQ,SAAS,OAAO,GAC/C,EAAE,KAAK,EAAE,OAAO,OAAO,QAAQ,SAAS,CACtC,aACA,GAAG,YACL,CAAC,CACH,CACF,CACF;EACF;CACF;AACF,CAAC;AAED,YAAY,QAAQ"}

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

@@ -0,0 +1,272 @@
+import { useLanguage } from "../composables/remoteContext.mjs";
+import { composition } from "../lib/composition.mjs";
+import { useComponentUsage } from "../composables/useComponentUsage.mjs";
+import { readProp } from "../lib/propKeys.mjs";
+import { AccentBox } from "../auto-generated/AccentBox.mjs";
+import { ActionGroup } from "../auto-generated/ActionGroup.mjs";
+import { Button } from "../auto-generated/Button.mjs";
+import { ClearPropsContext } from "../auto-generated/ClearPropsContext.mjs";
+import { ColumnLayout } from "../auto-generated/ColumnLayout.mjs";
+import { Content } from "../auto-generated/Content.mjs";
+import { Div } from "../auto-generated/Div.mjs";
+import { Header } from "../auto-generated/Header.mjs";
+import { Heading } from "../auto-generated/Heading.mjs";
+import { OverlayContent } from "../auto-generated/OverlayContent.mjs";
+import { Section } from "../auto-generated/Section.mjs";
+import { Text } from "../auto-generated/Text.mjs";
+import { IconClose } from "../icons/components/IconClose.mjs";
+import { applyChildRules, dynamic, withSlotContent } from "./childProps.mjs";
+import { createOverlayControllerFor, isOverlayController, provideOverlayContext, useOverlayHandlers, useOwnController } from "./overlayController.mjs";
+import { Action } from "../components/Action.mjs";
+import { confirmCloseTexts } from "./locales.mjs";
+import { defineComponent, h, onBeforeUnmount, onMounted, useId, watch, watchEffect } from "vue";
+//#region src/overlays/Modal.ts
+var styles = {
+	overlay: "flow--overlay",
+	modal: "flow--modal",
+	offCanvas: "flow--modal--off-canvas",
+	left: "flow--modal--left",
+	size: (size) => `flow--modal--size-${size}`,
+	header: "flow--modal--header",
+	headerTitle: "flow--modal--header-title",
+	closeButton: "flow--modal--close-button",
+	alwaysVisible: "flow--modal--always-visible",
+	alwaysHidden: "flow--modal--always-hidden",
+	content: "flow--modal--content",
+	columnLayout: "flow--modal--column-layout",
+	accentBox: "flow--modal--accent-box",
+	actionGroup: "flow--modal--action-group"
+};
+/**
+* The chrome Flow puts around a modal's heading: the title in its own
+* container, and the close button beside it.
+*
+* Not props on the heading but a rebuild of what it was handed — the reason
+* `withSlotContent` exists. The close button clears the props context around
+* it, the way Flow's does, so the modal's own rules for `Button` do not reach
+* it, and it closes without asking again: this button _is_ the deliberate way
+* out.
+*/
+var withHeaderChrome = (heading, closeLabel, showCloseButton) => withSlotContent(heading, (title) => [h(Div, { class: styles.headerTitle }, () => title), h(ClearPropsContext, null, () => h(Action, { closeModal: { bypassConfirmation: true } }, () => h(Button, {
+	variant: "plain",
+	color: "secondary",
+	"aria-label": closeLabel,
+	class: [styles.closeButton, showCloseButton === true ? styles.alwaysVisible : showCloseButton === false ? styles.alwaysHidden : void 0].filter(Boolean).join(" ")
+}, () => h(IconClose))))]);
+/**
+* Lets an `Action` in the modal's footer close without asking again.
+*
+* Only where the action already closes something: Flow's props context rewrites
+* an existing `closeModal`/`closeOverlay` and adds none, and an `Action` that
+* merely runs something must not be turned into a close button. An explicit
+* `bypassConfirmation` in the object form wins, as in Flow.
+*/
+var withBypassedConfirmation = (child) => {
+	if (child.type !== Action) return;
+	const bypassed = {};
+	for (const name of ["closeModal", "closeOverlay"]) {
+		const value = readProp(child.props, name);
+		if (value === void 0 || value === null || value === false) continue;
+		bypassed[name] = dynamic(isOverlayController(value) || typeof value === "string" && value !== "" ? {
+			bypassConfirmation: true,
+			overlay: value
+		} : typeof value === "object" ? {
+			bypassConfirmation: true,
+			...value
+		} : { bypassConfirmation: true });
+	}
+	return Object.keys(bypassed).length > 0 ? bypassed : void 0;
+};
+var headingLevel3 = (child) => child.type === Heading ? { props: { level: 3 } } : void 0;
+var nestedHeadingRules = (child) => child.type === Heading ? { props: { level: 3 } } : child.type === Section ? {
+	props: { hideSeparator: true },
+	children: (grandChild) => grandChild.type === Header ? { children: headingLevel3 } : headingLevel3(grandChild)
+} : child.type === Header ? { children: headingLevel3 } : void 0;
+/**
+* Asks before a `<Modal confirm-on-close>` closes.
+*
+* Bound to the parent's `isConfirmingClose` rather than holding state of its
+* own: a dismiss of this modal is then the same event as answering "keep
+* editing", and there is one place that decides whether the parent closes.
+*
+* Annotated rather than inferred — it renders a `Modal` and the `Modal` renders
+* it, and without an annotation TypeScript cannot break that cycle (TS7022).
+*/
+var ConfirmCloseModal = defineComponent({
+	name: "ConfirmCloseModal",
+	props: { parent: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const language = useLanguage();
+		const controller = createOverlayControllerFor(props.parent.isConfirmingClose);
+		return () => {
+			const texts = language.value?.startsWith("de") ? confirmCloseTexts["de-DE"] : confirmCloseTexts["en-US"];
+			return h(Modal, { controller }, () => [
+				h(Heading, null, () => texts.heading),
+				h(Content, null, () => h(Text, null, () => texts.text)),
+				h(ActionGroup, null, () => [h(Action, { onAction: props.parent.confirmClose }, () => h(Button, { color: "danger" }, () => texts.close)), h(Action, { onAction: props.parent.cancelClose }, () => h(Button, {
+					color: "secondary",
+					variant: "soft"
+				}, () => texts.keepOpen))])
+			]);
+		};
+	}
+});
+var Modal = defineComponent({
+	name: "Modal",
+	inheritAttrs: false,
+	props: {
+		/** The size of the modal. @default "s" */
+		size: {
+			type: String,
+			default: "s"
+		},
+		/** Whether the modal is displayed as an off canvas. */
+		offCanvas: {
+			type: Boolean,
+			default: false
+		},
+		/** Which side the off canvas comes from. @default "right" */
+		offCanvasOrientation: {
+			type: String,
+			default: "right"
+		},
+		/** Whether a click outside closes the modal. @default true */
+		isDismissable: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* Whether the close button is always visible (`true`) or always hidden
+		* (`false`). By default Flow decides by screen size.
+		*/
+		showCloseButton: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* Whether closing the modal has to be confirmed — use it to protect unsaved
+		* changes.
+		*/
+		confirmOnClose: {
+			type: Boolean,
+			default: false
+		},
+		/** A controller to open and close the modal from anywhere. */
+		controller: {
+			type: Object,
+			default: void 0
+		},
+		/** Whether the modal is open. Use it to control the modal state. */
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* Whether the modal is open initially, when it has a controller of its own
+		* — not one from a trigger or the `controller` prop. @default false
+		*/
+		isDefaultOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		/** Called when the modal opens. Returning `false` keeps it closed. */
+		onOpen: {
+			type: Function,
+			default: void 0
+		},
+		/** Called when the modal closes. Returning `false` keeps it open. */
+		onClose: {
+			type: Function,
+			default: void 0
+		},
+		/**
+		* Called with the new state whenever the modal opens or closes. Returning
+		* `false` aborts the change.
+		*/
+		onOpenChange: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { slots, attrs }) {
+		onMounted(useComponentUsage("Modal"));
+		const language = useLanguage();
+		const headingId = useId();
+		const controller = useOwnController(() => props.controller, "Modal", () => ({ isDefaultOpen: props.isDefaultOpen }));
+		provideOverlayContext("Modal", () => controller.value);
+		useOverlayHandlers(() => controller.value, {
+			onOpen: () => props.onOpen,
+			onClose: () => props.onClose,
+			onOpenChange: () => props.onOpenChange
+		});
+		watchEffect(() => {
+			controller.value.confirmOnClose.value = props.confirmOnClose;
+		});
+		const release = (released) => {
+			released.confirmOnClose.value = false;
+			released.isConfirmingClose.value = false;
+		};
+		watch(controller, (next, previous) => release(previous));
+		onBeforeUnmount(() => release(controller.value));
+		const childRules = (child) => {
+			if (child.type === Heading) return { props: {
+				class: styles.header,
+				level: 2,
+				id: headingId
+			} };
+			if (child.type === Content) return {
+				props: { class: styles.content },
+				children: nestedHeadingRules
+			};
+			if (child.type === ColumnLayout) return {
+				props: {
+					class: styles.columnLayout,
+					l: [2, 1],
+					m: [1]
+				},
+				children: (grandChild) => grandChild.type === AccentBox ? { props: {
+					class: styles.accentBox,
+					backgroundColor: "neutral"
+				} } : nestedHeadingRules(grandChild)
+			};
+			if (child.type === ActionGroup) return {
+				props: {
+					class: styles.actionGroup,
+					spacing: "m"
+				},
+				children: (grandChild) => {
+					const props = withBypassedConfirmation(grandChild);
+					return props ? { props } : void 0;
+				}
+			};
+		};
+		return () => {
+			const className = [
+				styles.overlay,
+				props.offCanvas ? styles.offCanvas : styles.modal,
+				styles.size(props.size),
+				props.offCanvas && props.offCanvasOrientation === "left" ? styles.left : void 0,
+				attrs.class
+			].filter(Boolean).join(" ");
+			const texts = language.value?.startsWith("de") ? confirmCloseTexts["de-DE"] : confirmCloseTexts["en-US"];
+			const children = applyChildRules(slots.default?.(), childRules).map((child) => child.type === Heading ? withHeaderChrome(child, texts.close, props.showCloseButton) : child);
+			if (props.confirmOnClose) children.push(h(ConfirmCloseModal, { parent: controller.value }));
+			return h(ClearPropsContext, null, () => h(OverlayContent, {
+				class: className,
+				isOpen: props.isOpen ?? controller.value.isOpen.value,
+				isDismissable: props.isDismissable,
+				"aria-labelledby": headingId,
+				onOpenChange: controller.value.setOpen
+			}, () => children));
+		};
+	}
+});
+composition(ConfirmCloseModal);
+composition(Modal);
+//#endregion
+export { Modal, Modal as default };
+
+//# sourceMappingURL=Modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../../src/overlays/Modal.ts"],"sourcesContent":["import {\n  AccentBox,\n  ActionGroup,\n  Button,\n  ClearPropsContext,\n  ColumnLayout,\n  Content,\n  Div,\n  Header,\n  Heading,\n  OverlayContent,\n  Section,\n  Text,\n} from \"@/auto-generated\";\nimport { IconClose } from \"@/icons\";\nimport Action from \"@/components/Action\";\nimport { useLanguage } from \"@/composables/remoteContext\";\nimport { confirmCloseTexts } from \"@/overlays/locales\";\nimport {\n  applyChildRules,\n  dynamic,\n  withSlotContent,\n  type ChildRules,\n} from \"@/overlays/childProps\";\nimport { readProp } from \"@/lib/propKeys\";\nimport {\n  createOverlayControllerFor,\n  isOverlayController,\n  provideOverlayContext,\n  useOwnController,\n  useOverlayHandlers,\n  type OverlayCloseHandler,\n  type OverlayController,\n  type OverlayOpenHandler,\n  type OverlayOpenStateHandler,\n} from \"@/overlays/overlayController\";\nimport type { AnyRecord } from \"@/lib/types\";\nimport {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  useId,\n  watch,\n  watchEffect,\n  type Component,\n  type PropType,\n  type VNode,\n} from \"vue\";\nimport { composition } from \"@/lib/composition\";\nimport { useComponentUsage } from \"@/composables/useComponentUsage\";\n\nexport type ModalSize = \"s\" | \"m\" | \"l\";\n\n/*\n * Flow's `Modal` is a React composition, not a remote element: it renders an\n * `OverlayContent` and configures the components inside it through a props\n * context — the header, the content padding, the footer spacing. Both halves\n * are rebuilt here, so a Vue app writes `Modal` and not the overlay plumbing.\n *\n * The class names are Flow's own, taken from `Modal.module.scss` by way of the\n * generated `flow--…` names. They are internal, and repeating them is the price\n * of a composition that lives in React: the alternative — marking `Modal`\n * `@flr-generate`, so the host materialises the whole thing from one element —\n * would make this file unnecessary.\n */\nconst styles = {\n  overlay: \"flow--overlay\",\n  modal: \"flow--modal\",\n  offCanvas: \"flow--modal--off-canvas\",\n  left: \"flow--modal--left\",\n  size: (size: ModalSize) => `flow--modal--size-${size}`,\n  header: \"flow--modal--header\",\n  headerTitle: \"flow--modal--header-title\",\n  closeButton: \"flow--modal--close-button\",\n  alwaysVisible: \"flow--modal--always-visible\",\n  alwaysHidden: \"flow--modal--always-hidden\",\n  content: \"flow--modal--content\",\n  columnLayout: \"flow--modal--column-layout\",\n  accentBox: \"flow--modal--accent-box\",\n  actionGroup: \"flow--modal--action-group\",\n};\n\n/**\n * The chrome Flow puts around a modal's heading: the title in its own\n * container, and the close button beside it.\n *\n * Not props on the heading but a rebuild of what it was handed — the reason\n * `withSlotContent` exists. The close button clears the props context around\n * it, the way Flow's does, so the modal's own rules for `Button` do not reach\n * it, and it closes without asking again: this button _is_ the deliberate way\n * out.\n */\nconst withHeaderChrome = (\n  heading: VNode,\n  closeLabel: string,\n  showCloseButton: boolean | undefined,\n): VNode =>\n  withSlotContent(heading, (title) => [\n    h(Div, { class: styles.headerTitle }, () => title),\n    h(ClearPropsContext, null, () =>\n      h(Action, { closeModal: { bypassConfirmation: true } }, () =>\n        h(\n          Button,\n          {\n            variant: \"plain\",\n            color: \"secondary\",\n            \"aria-label\": closeLabel,\n            class: [\n              styles.closeButton,\n              showCloseButton === true\n                ? styles.alwaysVisible\n                : showCloseButton === false\n                  ? styles.alwaysHidden\n                  : undefined,\n            ]\n              .filter(Boolean)\n              .join(\" \"),\n          },\n          () => h(IconClose),\n        ),\n      ),\n    ),\n  ]);\n\n/**\n * Lets an `Action` in the modal's footer close without asking again.\n *\n * Only where the action already closes something: Flow's props context rewrites\n * an existing `closeModal`/`closeOverlay` and adds none, and an `Action` that\n * merely runs something must not be turned into a close button. An explicit\n * `bypassConfirmation` in the object form wins, as in Flow.\n */\nconst withBypassedConfirmation = (child: VNode): AnyRecord | undefined => {\n  if (child.type !== Action) {\n    return undefined;\n  }\n\n  const bypassed: AnyRecord = {};\n\n  for (const name of [\"closeModal\", \"closeOverlay\"]) {\n    const value = readProp(child.props, name);\n\n    if (value === undefined || value === null || value === false) {\n      continue;\n    }\n\n    /*\n     * A controller names the overlay, like a type name does — spread, it\n     * would lose its identity and the action would close the modal instead.\n     */\n    bypassed[name] = dynamic(\n      isOverlayController(value) || (typeof value === \"string\" && value !== \"\")\n        ? { bypassConfirmation: true, overlay: value }\n        : typeof value === \"object\"\n          ? { bypassConfirmation: true, ...value }\n          : { bypassConfirmation: true },\n    );\n  }\n\n  return Object.keys(bypassed).length > 0 ? bypassed : undefined;\n};\n\n/*\n * Flow's `nestedHeadingProps`: inside the content, headings are one level\n * down, and a section drops its separator.\n */\nconst headingLevel3: ChildRules = (child) =>\n  child.type === Heading ? { props: { level: 3 } } : undefined;\n\nconst nestedHeadingRules: ChildRules = (child) =>\n  child.type === Heading\n    ? { props: { level: 3 } }\n    : child.type === Section\n      ? {\n          props: { hideSeparator: true },\n          children: (grandChild) =>\n            grandChild.type === Header\n              ? { children: headingLevel3 }\n              : headingLevel3(grandChild),\n        }\n      : child.type === Header\n        ? { children: headingLevel3 }\n        : undefined;\n\n/**\n * Asks before a `<Modal confirm-on-close>` closes.\n *\n * Bound to the parent's `isConfirmingClose` rather than holding state of its\n * own: a dismiss of this modal is then the same event as answering \"keep\n * editing\", and there is one place that decides whether the parent closes.\n *\n * Annotated rather than inferred — it renders a `Modal` and the `Modal` renders\n * it, and without an annotation TypeScript cannot break that cycle (TS7022).\n */\nconst ConfirmCloseModal: Component = defineComponent({\n  name: \"ConfirmCloseModal\",\n\n  props: {\n    parent: {\n      type: Object as PropType<OverlayController>,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const language = useLanguage();\n    const controller = createOverlayControllerFor(\n      props.parent.isConfirmingClose,\n    );\n\n    return () => {\n      const texts = language.value?.startsWith(\"de\")\n        ? confirmCloseTexts[\"de-DE\"]\n        : confirmCloseTexts[\"en-US\"];\n\n      return h(Modal, { controller }, () => [\n        h(Heading, null, () => texts.heading),\n        h(Content, null, () => h(Text, null, () => texts.text)),\n        h(ActionGroup, null, () => [\n          h(Action, { onAction: props.parent.confirmClose }, () =>\n            h(Button, { color: \"danger\" }, () => texts.close),\n          ),\n          h(Action, { onAction: props.parent.cancelClose }, () =>\n            h(\n              Button,\n              { color: \"secondary\", variant: \"soft\" },\n              () => texts.keepOpen,\n            ),\n          ),\n        ]),\n      ]);\n    };\n  },\n});\n\nexport const Modal = defineComponent({\n  name: \"Modal\",\n\n  /* Like Flow's, a modal passes on only the props it knows. */\n  inheritAttrs: false,\n\n  props: {\n    /** The size of the modal. @default \"s\" */\n    size: { type: String as PropType<ModalSize>, default: \"s\" },\n    /** Whether the modal is displayed as an off canvas. */\n    offCanvas: { type: Boolean, default: false },\n    /** Which side the off canvas comes from. @default \"right\" */\n    offCanvasOrientation: {\n      type: String as PropType<\"left\" | \"right\">,\n      default: \"right\",\n    },\n    /** Whether a click outside closes the modal. @default true */\n    isDismissable: { type: Boolean, default: true },\n    /**\n     * Whether the close button is always visible (`true`) or always hidden\n     * (`false`). By default Flow decides by screen size.\n     */\n    showCloseButton: { type: Boolean, default: undefined },\n    /**\n     * Whether closing the modal has to be confirmed — use it to protect unsaved\n     * changes.\n     */\n    confirmOnClose: { type: Boolean, default: false },\n    /** A controller to open and close the modal from anywhere. */\n    controller: {\n      type: Object as PropType<OverlayController>,\n      default: undefined,\n    },\n    /** Whether the modal is open. Use it to control the modal state. */\n    isOpen: { type: Boolean, default: undefined },\n    /**\n     * Whether the modal is open initially, when it has a controller of its own\n     * — not one from a trigger or the `controller` prop. @default false\n     */\n    isDefaultOpen: { type: Boolean, default: undefined },\n    /** Called when the modal opens. Returning `false` keeps it closed. */\n    onOpen: {\n      type: Function as PropType<OverlayOpenHandler>,\n      default: undefined,\n    },\n    /** Called when the modal closes. Returning `false` keeps it open. */\n    onClose: {\n      type: Function as PropType<OverlayCloseHandler>,\n      default: undefined,\n    },\n    /**\n     * Called with the new state whenever the modal opens or closes. Returning\n     * `false` aborts the change.\n     */\n    onOpenChange: {\n      type: Function as PropType<OverlayOpenStateHandler>,\n      default: undefined,\n    },\n  },\n\n  setup(props, { slots, attrs }) {\n    /* Flow's React `Modal` is a `flowComponent` and reports itself. */\n    onMounted(useComponentUsage(\"Modal\"));\n\n    const language = useLanguage();\n    /*\n     * The dialog is labelled by its own heading, so the two need an id they\n     * agree on. Flow generates one with `useId`; `useId` exists in Vue too,\n     * and both sides end up with an id the host rewrites anyway — what has to\n     * match is that the heading carries one at all.\n     */\n    const headingId = useId();\n    /*\n     * Three ways to own the state, in Flow's order of precedence: a\n     * controller the app passes, the controller of a surrounding trigger, or\n     * one of its own.\n     */\n    const controller = useOwnController(\n      () => props.controller,\n      \"Modal\",\n      () => ({ isDefaultOpen: props.isDefaultOpen }),\n    );\n\n    // So an `Action` inside finds it.\n    provideOverlayContext(\"Modal\", () => controller.value);\n\n    useOverlayHandlers(() => controller.value, {\n      onOpen: () => props.onOpen,\n      onClose: () => props.onClose,\n      onOpenChange: () => props.onOpenChange,\n    });\n\n    /*\n     * The requirement lives on the controller, not on this component: what\n     * asks for the confirmation is a close, and a close arrives at the\n     * controller — from an `Action` inside, from the host's dismiss, or from\n     * an app holding the controller itself.\n     */\n    watchEffect(() => {\n      controller.value.confirmOnClose.value = props.confirmOnClose;\n    });\n\n    /*\n     * Taken back, because the controller usually outlives the modal: a\n     * trigger keeps it, and the next modal it opens would inherit a\n     * requirement it never asked for. The same goes for a controller the\n     * app swapped for another.\n     */\n    const release = (released: OverlayController) => {\n      released.confirmOnClose.value = false;\n      released.isConfirmingClose.value = false;\n    };\n    watch(controller, (next, previous) => release(previous));\n    onBeforeUnmount(() => release(controller.value));\n\n    /* Flow's props context for the modal's children, rule for rule. */\n    const childRules: ChildRules = (child) => {\n      if (child.type === Heading) {\n        return { props: { class: styles.header, level: 2, id: headingId } };\n      }\n      if (child.type === Content) {\n        return {\n          props: { class: styles.content },\n          children: nestedHeadingRules,\n        };\n      }\n      if (child.type === ColumnLayout) {\n        return {\n          props: { class: styles.columnLayout, l: [2, 1], m: [1] },\n          children: (grandChild) =>\n            grandChild.type === AccentBox\n              ? {\n                  props: {\n                    class: styles.accentBox,\n                    backgroundColor: \"neutral\",\n                  },\n                }\n              : nestedHeadingRules(grandChild),\n        };\n      }\n      if (child.type === ActionGroup) {\n        /*\n         * The footer is the deliberate way out, so its actions close\n         * without asking again — the rule Flow's `Modal` writes for\n         * `ActionGroup > Action`. An `Action` anywhere else in the modal is\n         * an incidental close and is confirmed.\n         */\n        return {\n          props: { class: styles.actionGroup, spacing: \"m\" },\n          children: (grandChild) => {\n            const props = withBypassedConfirmation(grandChild);\n            return props ? { props } : undefined;\n          },\n        };\n      }\n      return undefined;\n    };\n\n    return () => {\n      const className = [\n        styles.overlay,\n        props.offCanvas ? styles.offCanvas : styles.modal,\n        styles.size(props.size),\n        props.offCanvas && props.offCanvasOrientation === \"left\"\n          ? styles.left\n          : undefined,\n        attrs.class,\n      ]\n        .filter(Boolean)\n        .join(\" \");\n\n      const texts = language.value?.startsWith(\"de\")\n        ? confirmCloseTexts[\"de-DE\"]\n        : confirmCloseTexts[\"en-US\"];\n\n      const children: VNode[] = applyChildRules(\n        slots.default?.(),\n        childRules,\n      ).map((child) =>\n        child.type === Heading\n          ? withHeaderChrome(child, texts.close, props.showCloseButton)\n          : child,\n      );\n\n      if (props.confirmOnClose) {\n        children.push(h(ConfirmCloseModal, { parent: controller.value }));\n      }\n\n      /* A UI component: Flow clears the host's props context around it. */\n      return h(ClearPropsContext, null, () =>\n        h(\n          OverlayContent,\n          {\n            class: className,\n            isOpen: props.isOpen ?? controller.value.isOpen.value,\n            isDismissable: props.isDismissable,\n            \"aria-labelledby\": headingId,\n            onOpenChange: controller.value.setOpen,\n          },\n          () => children,\n        ),\n      );\n    };\n  },\n});\n\ncomposition(ConfirmCloseModal);\ncomposition(Modal);\n\nexport default Modal;\n"],"mappings":"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"}