fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/Client-HrMIqv7d.js

@@ -0,0 +1,1934 @@
+import * as asyncList from "@zag-js/async-list";
+import { VanillaMachine, mergeProps, normalizeProps, normalizeProps as normalizeProps$1, spreadProps } from "@zag-js/vanilla";
+import { ListCollection } from "@zag-js/collection";
+import { dataAttr } from "@zag-js/dom-query";
+import { match, uuid } from "@zag-js/utils";
+import { createAnatomy } from "@zag-js/anatomy";
+
+//#region Resources/Private/Client/src/lib/machine.ts
+/**
+* The Zag machine runtime that components run on. It takes `Partial` props: the `id` that Zag
+* requires is guaranteed at runtime by `Component.initHydrator()`.
+*/
+var Machine = class extends VanillaMachine {
+	constructor(machine, userProps) {
+		super(machine, userProps);
+	}
+	/** Changes props at runtime. Only the ones you pass change, the others stay. */
+	updateProps(newProps) {
+		super.updateProps(newProps);
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/async-list.ts
+/**
+* Wraps the machine of `@zag-js/async-list` for use without any DOM or hydration: construct it, call
+* `init()`, `subscribe()` to state changes and `destroy()` when done. Rendering is yours, do it from
+* inside `subscribe()`.
+*
+* Debouncing or throttling `setFilter()` is left to the caller, wrap the call site with the
+* `debounce` or `throttle` of `@zag-js/utils`, which this library already depends on.
+*/
+var AsyncList = class {
+	machine;
+	constructor(options) {
+		this.machine = new Machine(asyncList.machine, options);
+	}
+	/** The api of the current state of the list. It is read fresh on every access, don't hold on to it. */
+	get api() {
+		return asyncList.connect(this.machine.service);
+	}
+	/**
+	* Calls `fn` with the api on every future state change. It does not fire for the current state,
+	* read `api` first if you need it.
+	*
+	* @param fn - The listener.
+	* @returns A function that removes the listener.
+	*/
+	subscribe(fn) {
+		return this.machine.subscribe((service) => fn(asyncList.connect(service)));
+	}
+	/** Sets the filter and reloads the list with it. */
+	setFilter(filter) {
+		this.api.setFilter(filter);
+	}
+	/**
+	* Changes options at runtime, e.g. `dependencies` to trigger an `autoReload`. `load` is fixed
+	* when the list is constructed and can't be swapped here.
+	*/
+	updateProps(newProps) {
+		this.machine.updateProps(newProps);
+	}
+	/** Starts the machine, which loads the list for the first time. Call it once, after constructing. */
+	init() {
+		this.machine.start();
+	}
+	/** Stops the machine and cancels a load that is in flight. */
+	destroy() {
+		this.machine.stop();
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/component.ts
+/**
+* Base class of every primitive. A subclass builds its machine in `initMachine()`, connects it in
+* `initApi()` and spreads the props of its parts onto the DOM in `render()`. Call `init()` once to
+* start it.
+*
+* @example
+* ```typescript
+* class Counter extends Component<CounterProps, CounterApi> {
+*     static componentName = 'counter';
+*
+*     initMachine(props: CounterProps) {
+*         return new Machine(counter.machine, props);
+*     }
+*
+*     initApi() {
+*         return counter.connect(this.machine.service, normalizeProps);
+*     }
+*
+*     render() {
+*         const rootEl = this.hydrator.query('root');
+*         if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+*     }
+* }
+* ```
+*/
+var Component = class {
+	/** The document the component renders into. */
+	document;
+	#machine;
+	#api;
+	#hydrator;
+	#userProps;
+	/**
+	* The Fluid namespace identifier (e.g. "ui") this instance was mounted under - assigned by
+	* `mountAll`/`mount` right after their callback returns, so not yet available while it runs
+	* (`init()` included).
+	*/
+	namespace;
+	/** The name of the component, in camelCase. Every subclass has to set it. */
+	static componentName;
+	/** Alias of `document`. */
+	get doc() {
+		return this.document;
+	}
+	constructor(initialProps, userDocument = document) {
+		this.initialProps = initialProps;
+		this.document = userDocument;
+	}
+	/** Created by {@see init} - reading it earlier throws. */
+	get machine() {
+		return this.#requireInit(this.#machine, "machine");
+	}
+	/** Created by {@see init} - reading it earlier throws. */
+	get api() {
+		return this.#requireInit(this.#api, "api");
+	}
+	set api(api) {
+		this.#api = api;
+	}
+	/**
+	* Finds the component's parts by name, see {@see ComponentHydrator.query}. Created by
+	* {@see init} - reading it earlier throws.
+	*/
+	get hydrator() {
+		return this.#requireInit(this.#hydrator, "hydrator");
+	}
+	/**
+	* The props the instance runs on - what {@see transformProps} made of the ones it was created
+	* with. Created by {@see init} - reading it earlier throws.
+	*/
+	get userProps() {
+		return this.#requireInit(this.#userProps, "userProps");
+	}
+	#requireInit(value, member) {
+		if (value === void 0) throw new Error(`${this.getName()}: \`${member}\` was accessed before init(). It only exists once init() has run - call init() first.`);
+		return value;
+	}
+	/** Creates the hydrator that finds the parts of the component. It needs the `id` prop. */
+	initHydrator(props) {
+		const id = props.id;
+		if (!id) throw new Error("ComponentHydrator requires an id prop to initialize.");
+		return new ComponentHydrator(this.getName(), id, this.doc);
+	}
+	/**
+	* Builds everything the instance runs on - `userProps`, hydrator, machine and api - then renders
+	* once and starts the machine. Call it once after constructing.
+	*/
+	init() {
+		this.#userProps = this.transformProps(this.initialProps);
+		this.#hydrator = this.initHydrator(this.#userProps);
+		this.#machine = this.initMachine(this.#userProps);
+		this.#api = this.initApi();
+		this.render();
+		this.#machine.subscribe(() => {
+			this.#api = this.initApi();
+			this.render();
+		});
+		this.#machine.start();
+	}
+	/**
+	* Renders again with no prop change behind it. Use it after changing the DOM directly, e.g.
+	* after inserting a new `Template` instance, for a primitive with no prop that causes a render on
+	* its own. Combobox and Select don't need it: `updateProps({ collection })` already renders.
+	*/
+	refresh() {
+		this.machine.notify();
+	}
+	/** The `componentName` of the class. */
+	getName() {
+		return this.constructor.componentName;
+	}
+	/**
+	* Kebab form of {@see getName} - what actually appears in DOM-facing identifiers (part attribute
+	* names, hydration keys). See {@see ComponentHydrator.clientComponentName}.
+	*/
+	getClientName() {
+		return toKebabCase(this.getName());
+	}
+	/**
+	* Override to adjust the props before anything else sees them, e.g. to wrap a callback prop.
+	* Runs once, first in {@see init}: the result becomes `userProps`, which `initHydrator()` and
+	* `initMachine()` receive.
+	*/
+	transformProps(props) {
+		return props;
+	}
+	/**
+	* Another already-mounted instance of this same component, by root id - for a primitive that
+	* composes two independent instances of itself (Menu submenus). Only resolves once
+	* `mountAll`/`mount` assigned {@see namespace}.
+	*/
+	getPeerInstance(rootId) {
+		return this.namespace ? getComponentInstance(`${this.namespace}:${this.getName()}`, rootId) : void 0;
+	}
+	/** Changes props at runtime. Only the ones you pass change, the others stay. */
+	updateProps(newProps) {
+		this.machine.updateProps(newProps);
+	}
+	/** Stops the machine and releases the hydrator. */
+	destroy() {
+		this.machine.stop();
+		this.hydrator.destroy();
+	}
+	/** Applies the attributes and event handlers of a part's props to its element. */
+	spreadProps(node, attrs) {
+		spreadProps(node, attrs, this.machine.scope.id);
+	}
+	/** {@see spreadTextControlProps}: for a text control that mirrors what the user typed. */
+	spreadTextControlProps(node, attrs) {
+		spreadTextControlProps(node, attrs, this.machine.scope.id);
+	}
+	/**
+	* For every element matching `part`, reads its own `data-value` and hands `{el, value}` to
+	* `getProps`; if it returns a props object, spreads it onto that element via `spreadProps`.
+	* Returning `null`/`undefined` skips the element (e.g. a value that no longer resolves
+	* against a collection). Deliberately does not read any other attribute
+	* (disabled/invalid/current/...) or resolve a collection itself - callers read whatever flags
+	* they need off `el` and do their own value resolution, since both vary per primitive.
+	*/
+	spreadPropsByValue(part, getProps, options) {
+		this.hydrator.queryAll(part, options?.parent).forEach((el) => {
+			const value = el.dataset.value;
+			if (value === void 0) return;
+			const props = getProps({
+				el,
+				value
+			});
+			if (props) this.spreadProps(el, props);
+		});
+	}
+	spreadPropsByOptionalValue(part, getProps, options) {
+		this.hydrator.queryAll(part, options?.parent).forEach((el) => {
+			const value = el.dataset.value;
+			const props = getProps({
+				el,
+				value
+			});
+			if (props) this.spreadProps(el, props);
+		});
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/portal.ts
+const wrappersByOrigin = /* @__PURE__ */ new WeakMap();
+/**
+* @internal
+*
+* Moves every `[data-portal]` wrapper inside `root` to its destination. A wrapper whose container
+* does not exist stays where it is, unless it is the default portal, which goes to the end of the body.
+*/
+function movePortals(root, doc = document) {
+	for (const wrapper of root.querySelectorAll("[data-portal]")) {
+		const name = wrapper.dataset.portal || "default";
+		const container = Array.from(doc.querySelectorAll("template[data-portal-container]")).find((el) => el.dataset.portalContainer === name);
+		if (!container && name !== "default") continue;
+		const origin = doc.createElement("template");
+		origin.setAttribute("data-portal-origin", "");
+		wrapper.replaceWith(origin);
+		wrappersByOrigin.set(origin, wrapper);
+		if (container) container.after(wrapper);
+		else doc.body.append(wrapper);
+	}
+}
+/**
+* @internal
+*
+* Removes the portals that `root` moved out of itself, call it before removing `root`.
+*/
+function removePortalsWithin(root) {
+	for (const origin of root.querySelectorAll("template[data-portal-origin]")) {
+		const wrapper = wrappersByOrigin.get(origin);
+		if (!wrapper) continue;
+		removePortalsWithin(wrapper);
+		wrapper.remove();
+	}
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/hydration.ts
+/**
+* @internal
+*
+* A part's own name is lowerCamelCase (mirroring zag-js's own `ids` prop keys), but its attribute
+* always renders lower-kebab. Keep in sync with: Classes/Utility/ComponentNameUtility.php's
+* camelCaseToLowerCaseDashed().
+*/
+function toKebabCase(part) {
+	return part.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+/**
+* Splits a required `"namespace:name"` string (e.g. `"ui:select"`) into its two parts - every
+* public lookup below (`getHydrationData`, `mountAll`, `mount`, `getComponentInstance`) requires
+* this form, with no bare-name fallback: two collections can legitimately define a same-named
+* component with a different shape (a styled wrapper around a primitive it doesn't expose every
+* prop of), so the caller always states which one it means.
+*/
+function parseNamespacedComponentName(componentName) {
+	const separatorIndex = componentName.indexOf(":");
+	if (separatorIndex === -1) throw new Error(`[fluid-primitives] "${componentName}" must include a namespace, e.g. "ui:${componentName}" - mountAll/mount/getHydrationData/getComponentInstance always require one.`);
+	return {
+		namespace: componentName.slice(0, separatorIndex),
+		baseName: componentName.slice(separatorIndex + 1)
+	};
+}
+function getHydrationData(component, id) {
+	const hydrationData = window.FluidPrimitives?.hydrationData;
+	if (!hydrationData || typeof hydrationData !== "object") return null;
+	if (!component) return hydrationData;
+	const { namespace, baseName } = parseNamespacedComponentName(component);
+	const clientBaseName = toKebabCase(baseName);
+	let instances = hydrationData[namespace];
+	for (const segment of clientBaseName.split(".")) {
+		if (!instances || typeof instances !== "object") return null;
+		instances = instances[segment];
+	}
+	if (!instances) return null;
+	if (!id) return instances;
+	return instances[id] || null;
+}
+/**
+* Root components PHP found nested inside the tracked scope `scopeId` (a `ui:template` stencil's
+* own id, or a FieldArray row's own id) - see `HydrationRegistry::recordNestedComponent()`'s own
+* docblock for why this is authoritative, PHP-recorded data rather than something inferred from
+* scanning rendered DOM shape (which can't find a component that renders no DOM element of its own,
+* e.g. `Dialog`'s `Root`, or whose content has since portaled elsewhere).
+*/
+function getNestedComponents(scopeId) {
+	return window.FluidPrimitives?.nestedComponents?.[scopeId] ?? [];
+}
+/**
+* Finds a component instance that is already mounted, by the namespaced name it was mounted with and
+* its hydration id (the `id` prop it was rendered with). Works for instances from `mountAll()` and
+* `mount()` alike. It is for primitives that compose two independent instances of themselves at
+* runtime, e.g. the submenus of a Menu.
+*
+* @param componentName - The namespaced name, e.g. `ui:menu`.
+* @param id - The hydration id of the instance.
+* @returns The instance, or `undefined` if none is mounted under that id.
+*/
+function getComponentInstance(componentName, id) {
+	const { namespace, baseName } = parseNamespacedComponentName(componentName);
+	return window.FluidPrimitives?.componentInstances?.[namespace]?.[toKebabCase(baseName)]?.[id];
+}
+/** @internal */
+function getGlobals() {
+	const globals = window.FluidPrimitives?.globals;
+	if (!globals || typeof globals !== "object") return null;
+	return globals;
+}
+/** @internal */
+function getGlobal(key) {
+	const globals = getGlobals();
+	if (!globals || !(key in globals)) return;
+	return globals[key];
+}
+/**
+* Mounts every instance of a component that is not mounted yet and was not rendered with
+* `autoMount="{false}"`. It is safe to call more than once, e.g. after lazily inserted DOM adds new
+* instances: mounted ones are skipped.
+*
+* The `props` in the callback are typed from `componentName` via `HydrationPropsFor`. A component
+* without generated types gets an untyped bag.
+*
+* @param componentName - The namespaced name, e.g. `ui:select`.
+* @param callback - Creates the instance of one hydration entry and returns it.
+*
+* @example
+* ```typescript
+* mountAll('ui:accordion', ({ props }) => {
+*     const accordion = new Accordion(props);
+*     accordion.init();
+*     return accordion;
+* });
+* ```
+*/
+function mountAll(componentName, callback) {
+	const { namespace, baseName } = parseNamespacedComponentName(componentName);
+	const hydrationInstances = getHydrationData(componentName);
+	if (!hydrationInstances) return;
+	const clientBaseName = toKebabCase(baseName);
+	window.FluidPrimitives.componentInstances[namespace] ??= {};
+	window.FluidPrimitives.componentInstances[namespace][clientBaseName] ??= {};
+	const mountedInstances = window.FluidPrimitives.componentInstances[namespace][clientBaseName];
+	Object.keys(hydrationInstances).forEach((id) => {
+		if (hydrationInstances[id].autoMount === false) return;
+		if (mountedInstances[id]) return;
+		const instance = callback({
+			...hydrationInstances[id],
+			props: applyClientPropConverters(baseName, hydrationInstances[id].props),
+			createHydrator: () => new ComponentHydrator(baseName, id)
+		});
+		if (!instance) return;
+		instance.namespace = namespace;
+		mountedInstances[id] = instance;
+	});
+}
+/**
+* Destroys every mounted instance whose root element is `root` or inside it, and forgets it. Call it
+* before you remove a subtree from the DOM, e.g. a row of a FieldArray.
+*
+* Only the `root` part of an instance counts. A component without one, such as Dialog, is never
+* matched.
+*
+* @param root - The element that is about to be removed.
+*/
+function destroyComponentsWithin(root) {
+	if (root instanceof Element) removePortalsWithin(root);
+	if (!window.FluidPrimitives) return;
+	for (const namespaceBucket of Object.values(window.FluidPrimitives.componentInstances)) for (const instances of Object.values(namespaceBucket)) for (const [id, instance] of Object.entries(instances)) {
+		const rootPartSelector = instance.hydrator.selector("root");
+		if (!rootPartSelector) continue;
+		const isRootItself = root instanceof Element && root.matches(rootPartSelector);
+		const hasRootPartInNode = root.querySelector(rootPartSelector) !== null;
+		if (isRootItself || hasRootPartInNode) {
+			console.log(`Destroying component instance: ${instance.getClientName()}:${id}`);
+			instance.destroy();
+			delete instances[id];
+		}
+	}
+}
+/**
+* Mounts one instance by its `rootId`, also one that was rendered with `autoMount="{false}"`. Unlike
+* `mountAll()`, it creates a new instance on every call, which then replaces the one tracked before.
+* `getComponentInstance()` and `destroyComponentsWithin()` find it like any other.
+*
+* The `props` in the callback are typed like those of `mountAll()`.
+*
+* @param componentName - The namespaced name, e.g. `ui:dialog`.
+* @param rootId - The `rootId` the component was rendered with.
+* @param callback - Creates the instance and returns it.
+* @returns The instance, or `undefined` if there is no hydration entry for `rootId`.
+*/
+function mount(componentName, rootId, callback) {
+	const { namespace, baseName } = parseNamespacedComponentName(componentName);
+	const hydrationData = getHydrationData(componentName, rootId);
+	if (!hydrationData) return void 0;
+	const instance = callback({
+		...hydrationData,
+		props: applyClientPropConverters(baseName, hydrationData.props),
+		createHydrator: () => new ComponentHydrator(baseName, rootId)
+	});
+	if (!instance) return void 0;
+	instance.namespace = namespace;
+	const clientBaseName = toKebabCase(baseName);
+	window.FluidPrimitives.componentInstances[namespace] ??= {};
+	window.FluidPrimitives.componentInstances[namespace][clientBaseName] ??= {};
+	window.FluidPrimitives.componentInstances[namespace][clientBaseName][rootId] = instance;
+	return instance;
+}
+/**
+* Finds the parts of one component instance. Every part that `ui:ref` renders carries a
+* `data-<component>-<part>="<rootId>"` attribute, so a lookup needs no id and searches the whole
+* document by default. That is also what finds content that was portaled away from the root.
+*/
+var ComponentHydrator = class {
+	/** The name of the component, in camelCase. */
+	componentName;
+	/** The kebab-case form of `componentName`, as it appears in attribute names. */
+	clientComponentName;
+	/** The document the parts are searched in. */
+	doc;
+	/** The `rootId` the component was rendered with. */
+	rootId;
+	/**
+	* @param componentName - The name of the component, in camelCase.
+	* @param rootId - The `rootId` the component was rendered with. Throws if it is missing.
+	* @param doc - The document the parts are searched in.
+	*/
+	constructor(componentName, rootId, doc = document) {
+		this.componentName = componentName;
+		this.clientComponentName = toKebabCase(componentName);
+		this.doc = doc;
+		if (!rootId) throw new Error(`Root ID is required for component hydration: ${componentName}`);
+		this.rootId = rootId;
+	}
+	get attrPrefix() {
+		return `data-${this.clientComponentName.replaceAll(".", "-")}-`;
+	}
+	/** The name of the attribute that marks `part`, e.g. `data-accordion-item-trigger`. */
+	attr(part) {
+		return this.attrPrefix + toKebabCase(part);
+	}
+	/** The CSS selector of every element of `part` that belongs to this instance. */
+	selector(part) {
+		return `[${this.attr(part)}="${this.rootId}"]`;
+	}
+	/** The key that identifies `part`, and optionally one `value` of it, across this instance. */
+	scopeKey(part, value) {
+		const key = `${this.clientComponentName}:${this.rootId}:${toKebabCase(part)}`;
+		return value ? `${key}:${value}` : key;
+	}
+	/**
+	* Finds the first element of `part`.
+	*
+	* @param part - The name of the part, in camelCase.
+	* @param parent - Where to search, the whole document by default.
+	* @returns The element, or `null` if there is none.
+	*/
+	query(part, parent = this.doc) {
+		return parent.querySelector(this.selector(part));
+	}
+	/**
+	* Finds every element of `part`.
+	*
+	* @param part - The name of the part, in camelCase.
+	* @param parent - Where to search, the whole document by default.
+	*/
+	queryAll(part, parent = this.doc) {
+		return Array.from(parent.querySelectorAll(this.selector(part)));
+	}
+	/**
+	* Marks an element as `part` of this instance, like `ui:ref` does on the server. For elements
+	* you create after hydration.
+	*
+	* @param element - The element to mark.
+	* @param part - The name of the part, in camelCase.
+	* @param value - Sets `data-value`, for a part that exists once per item.
+	*/
+	stamp(element, part, value) {
+		element.setAttribute(this.attr(part), this.rootId);
+		if (value !== void 0) element.setAttribute("data-value", value);
+	}
+	/** The part this component's own scope marks `el` as (kebab-case), if any. */
+	getOwnPart(el) {
+		for (const { name, value } of el.attributes) if (value === this.rootId && name.startsWith(this.attrPrefix)) return name.slice(this.attrPrefix.length);
+		return null;
+	}
+	/**
+	* Sets `data-value` on every element within `root` (root included) that is a part of *this*
+	* component's own scope, for a new, real `value` - the shared half of
+	* {@see restampValue}/{@see renameValue}, which differ only in what they each then do about any
+	* nested, independent root component `root` happens to compose (a fresh copy vs. an in-place
+	* rename - see `restampValue`'s own docblock for why the two are never auto-detected from one
+	* another).
+	*
+	* `attributes`, if given, are additionally set on the same elements `value` is applied to - for
+	* primitives whose `render()` reads plain per-element data attributes rather than resolving a
+	* collection item (e.g. RadioGroup's `disabled`/`invalid`, NavigationMenu's `Link` `current`).
+	* A boolean value toggles a bare `data-x` attribute (e.g. `{ disabled: true }` -> `data-disabled`,
+	* present only when true); a string value sets `data-x="value"` directly.
+	*/
+	restampOwnScope(root, value, attributes) {
+		const restamp = (el) => {
+			if (this.getOwnPart(el) === null) return;
+			el.setAttribute("data-value", value);
+			for (const [name, attributeValue] of Object.entries(attributes ?? {})) if (typeof attributeValue === "string") el.setAttribute(`data-${name}`, attributeValue);
+			else el.toggleAttribute(`data-${name}`, attributeValue);
+		};
+		restamp(root);
+		root.querySelectorAll("*").forEach(restamp);
+	}
+	/**
+	* @internal
+	*
+	* Re-stamps `root` for a new, real `value` (via {@see restampOwnScope}) and prepares any
+	* nested, *independent* root component found inside it (e.g. a `Field`+`Input` composed inside
+	* a `FieldArray` row, or any other primitive that composes another one inside its own per-item
+	* markup) as a brand-new instance copied from its own pristine stencil data, via
+	* {@see prepareNestedRootComponents}. Use after cloning a `<template>` (see `Template`) to make
+	* the clone represent one real item/row in a single call, instead of manually setting
+	* `data-value` on the root and separately on every nested value-scoped part (e.g. a combobox
+	* item's own `item-text`/`item-indicator`) *and* separately preparing whatever independent
+	* components that item happens to compose. Fully generic - not
+	* tied to any one primitive - so a `<template>` item "just works" regardless of what it
+	* contains, without the calling primitive needing to know or handle that itself.
+	*
+	* Only for a *freshly cloned* item - one that has never been through this or
+	* {@see renameValue} before (a `<template>`'s content is never mutated by a previous clone, so
+	* this is always true right after `content.cloneNode(true)`). For an *existing* item pulled
+	* from the live DOM whose value is merely changing (e.g. `FieldArray` reindexing a later row
+	* down by one after an earlier row was removed), call {@see renameValue} instead.
+	*
+	* The two used to be auto-detected from a nested component's own *current* id shape (no
+	* `:value` suffix yet vs. already has one) rather than asked for explicitly - but that shape
+	* can't actually tell a never-touched, already-live server-rendered row apart from a
+	* never-touched template clone; both look identical. That silently mis-classified an
+	* already-mounted row as "fresh" the first time an earlier row's removal caused it to be
+	* reindexed: its DOM references moved out from under it (via `restampIdReferences`, which both
+	* paths run) without its `ComponentHydrator.rootId`/`componentInstances` entry following along -
+	* only {@see renameValue}'s path updates those - leaving its already-mounted `Field`/`Input`
+	* instances silently unable to find their own elements again. The caller already knows
+	* unambiguously which case it's in (a fresh `Template` clone vs. an element already in the
+	* document), so it now says so by calling the matching method instead of leaving it to a guess.
+	*
+	* `stencilKey` is the stencil's own {@see scopeKey} (see `Template`'s constructor, its only
+	* caller) - what nested root components `root` composes is looked up from
+	* `window.FluidPrimitives.nestedComponents[stencilKey]` (PHP-recorded, see
+	* `HydrationRegistry::recordNestedComponent()`), not found by scanning `root` itself. That's
+	* what lets this find a nested component regardless of what DOM shape it renders - including
+	* one that renders no identifiable wrapper of its own at all (e.g. `Dialog`'s `Root`, which is
+	* just `<f:slot />` - see `ui:portal`'s own `isRenderStencil` handling for the other half of
+	* making a portalled nested component work inside a stencil).
+	*
+	* Returns the distinct client component names of any nested root components found and
+	* prepared (empty when `root` contains none, the common case - e.g. `FileUpload`'s own item
+	* previews) - call the matching `mountAll()`s for each of these after inserting a freshly
+	* cloned item into the document, per `mountAll`'s own docblock ("after lazily-inserted DOM
+	* adds new instances").
+	*/
+	restampValue(root, value, stencilKey, attributes) {
+		this.restampOwnScope(root, value, attributes);
+		const ownPart = this.getOwnPart(root);
+		return prepareNestedRootComponents(stencilKey, root, value, ownPart ? this.scopeKey(ownPart, value) : null);
+	}
+	/**
+	* @internal
+	*
+	* Re-stamps `root` for a new, real `value` (via {@see restampOwnScope}) and re-keys every
+	* nested, independent root component found inside it (e.g. a `FieldArray` row's own
+	* `Field`+`Input`) to reference `value` instead of whatever position it previously held - both
+	* their DOM references (via {@see restampIdReferences}) and, for ones that are already live/mounted,
+	* their own `ComponentHydrator.rootId` and their entry in
+	* `window.FluidPrimitives.componentInstances`/`hydrationData` (via
+	* {@see renameNestedComponentEntry}), so their future re-renders keep resolving their own
+	* elements and later lookups (`getComponentInstance`, `destroyComponentsWithin`) keep finding
+	* them under their new id.
+	*
+	* For an *existing* item pulled from the live DOM whose position is merely shifting - never for
+	* a freshly cloned `<template>` item, which has no existing instance/hydration-data entry to
+	* re-key in the first place; use {@see restampValue} for that. See that method's own docblock
+	* for why the two are never auto-detected from one another.
+	*
+	* Looks up what `root` composes from `window.FluidPrimitives.nestedComponents[<scopeKey>]`,
+	* keyed by `root`'s own part and `data-value` *before* this call restamps it, which is why
+	* that's read first, before {@see restampOwnScope} changes it. That's a correct lookup key both
+	* for a row rendered for real (PHP records it there too - see `ComponentHydrationCollector`'s
+	* FieldArray-ambient-context check) and for one `restampValue` prepared earlier (which migrates
+	* the same entry to the row's new key as its own last step, for exactly this reason).
+	*
+	* Restamps id *references* (via {@see restampIdReferences}) across the whole document, not just
+	* `root`'s own subtree - unlike {@see restampValue}, where a fresh clone can't yet have anything
+	* portaled out of it (nothing composed by it has mounted/opened yet), `root` here is an existing,
+	* already-live item, so a nested component it composes may already have portaled its own content
+	* elsewhere in the document (e.g. an open `Popover`'s positioner, rendered via `ui:portal` into
+	* the page footer) by the time this runs. Scoping to `root` alone would restamp that component's
+	* trigger in place but silently miss its portaled content, leaving it referencing a now-stale id.
+	*/
+	renameValue(root, value) {
+		const ownPart = this.getOwnPart(root);
+		const previousScopeKey = ownPart ? this.scopeKey(ownPart, root.getAttribute("data-value") ?? void 0) : null;
+		this.restampOwnScope(root, value);
+		if (!ownPart || !previousScopeKey) return;
+		const remaps = nestedRootRemapsFromMetadata(previousScopeKey, value);
+		if (remaps.length === 0) return;
+		restampIdReferences(this.doc, remaps);
+		for (const { componentName, oldRootId, newRootId } of remaps) renameNestedComponentEntry(componentName, oldRootId, newRootId, remaps);
+		migrateNestedComponentsScope(previousScopeKey, this.scopeKey(ownPart, value), remaps);
+	}
+	/** Nothing to release yet, it exists so every instance can be destroyed alike. */
+	destroy() {}
+};
+/**
+* True when `id` references `rootId` as a whole id-segment - i.e. `id` either *is* `rootId`, or
+* contains it immediately followed by `:` - not merely as a substring. A plain `.includes()`
+* would false-positive match row `2`'s root id against row `20`'s (both contain the digit `2`).
+*/
+function referencesRootId(id, rootId) {
+	const index = id.indexOf(rootId);
+	if (index === -1) return false;
+	const charAfter = id[index + rootId.length];
+	return charAfter === void 0 || charAfter === ":";
+}
+/**
+* Rewrites, on every element in `root` (root itself included), whatever references one of
+* `remaps`' `oldRootId` so it references the matching `newRootId` instead: every part attribute of
+* that nested component (`data-<nested>-<part>="oldRootId"`), and any real `id` that embeds it (a
+* part given an explicit id through `ids`, see `ui:ref`). The id is rewritten via plain string
+* substitution, not recomputed from a formula - an Input's `label`/`input` parts are server-stamped
+* with their enclosing Field's own `label`/`control` ids (see `FieldIdMapping`), which an id
+* derived from Input's own root id would silently lose. Scoped to `root` (the whole cloned item,
+* not just one nested component's own subtree) since an override can reference a sibling
+* component's id, not just an ancestor's - or, from {@see ComponentHydrator.renameValue}, to the
+* whole document, when a nested component's content may already live outside `root` entirely (see
+* that method's own docblock).
+*/
+function restampIdReferences(root, remaps) {
+	const restamp = (el) => {
+		for (const { name, value } of Array.from(el.attributes)) if (name === "id") {
+			const match = remaps.find(({ oldRootId }) => referencesRootId(value, oldRootId));
+			if (match) el.setAttribute(name, value.replace(match.oldRootId, match.newRootId));
+		} else if (name.startsWith("data-")) {
+			const match = remaps.find(({ oldRootId }) => oldRootId === value);
+			if (match) el.setAttribute(name, match.newRootId);
+		}
+	};
+	if (root instanceof Element) restamp(root);
+	root.querySelectorAll("*").forEach(restamp);
+}
+/**
+* Remaps every value in a nested root component's `ids` prop override map using the same
+* old->new root id substitutions {@see restampIdReferences} applied to the DOM, so the hydration
+* props a later `mountAll()` constructs an instance from stay consistent with where its parts
+* actually live post-restamp - without this, a component like Input (whose `ids.label`/`ids.input`
+* may reference its enclosing Field's own ids, not its own) would keep looking for its label/
+* input elements at their stale, pre-restamp ids and find nothing.
+*/
+function remapIdsProp(ids, remaps) {
+	const remapped = {};
+	for (const [key, value] of Object.entries(ids)) {
+		const match = remaps.find(({ oldRootId }) => referencesRootId(value, oldRootId));
+		remapped[key] = match ? value.replace(match.oldRootId, match.newRootId) : value;
+	}
+	return remapped;
+}
+/**
+* Copies a stencil's cached hydration props to a freshly derived id, for a nested root component
+* found in a freshly cloned `<template>` item (see {@see prepareNestedRootComponents}). Deep-clones
+* the stencil's own props
+* (registered once at server-render time, when that one stencil instance rendered) rather than
+* moving them, since the stencil's own entry must stay put for the *next* clone to copy from too -
+* unlike {@see renameNestedComponentEntry}, which re-keys a single existing entry in place.
+*
+* Rewrites a `[]` "append" placeholder in any string `name` prop to `value` (the same trailing-
+* `[]`-means-append convention `form.path.ts`'s `appendFieldPathSegment`/`FieldContext.php` use).
+* Returns whether a stencil entry was actually found and copied, so a caller only counts this
+* component name as "found" when there was real hydration data to prepare.
+*/
+function copyNestedComponentEntry(componentName, stencilRootId, newRootId, remaps, value) {
+	const stencilData = getHydrationData(componentName, stencilRootId);
+	if (!stencilData) return false;
+	const rewrittenProps = {
+		...stencilData.props,
+		id: newRootId,
+		ids: remapIdsProp(stencilData.props.ids, remaps)
+	};
+	if (typeof rewrittenProps.name === "string" && rewrittenProps.name.includes("[]")) rewrittenProps.name = rewrittenProps.name.replace("[]", `[${value}]`);
+	const { namespace, baseName } = parseNamespacedComponentName(componentName);
+	const clientBaseName = toKebabCase(baseName);
+	window.FluidPrimitives.hydrationData[namespace] ??= {};
+	window.FluidPrimitives.hydrationData[namespace][clientBaseName] ??= {};
+	window.FluidPrimitives.hydrationData[namespace][clientBaseName][newRootId] = {
+		...stencilData,
+		props: rewrittenProps
+	};
+	return true;
+}
+/**
+* Re-keys a single nested root component's own entry from `oldRootId` to `newRootId` in place -
+* for an existing item pulled from the live DOM (see {@see ComponentHydrator.renameValue}), as
+* opposed to a fresh one still in its pristine stencil state (see
+* {@see copyNestedComponentEntry}). Updates both its `window.FluidPrimitives.
+* hydrationData` entry and, for one that's already live/mounted, its own `ComponentHydrator.
+* rootId` and its entry in `window.FluidPrimitives.componentInstances`, so its future
+* re-renders keep resolving their own elements correctly and later lookups
+* (`getComponentInstance`, `destroyComponentsWithin`) keep finding it under its new id.
+*/
+function renameNestedComponentEntry(componentName, oldRootId, newRootId, remaps) {
+	const { namespace, baseName } = parseNamespacedComponentName(componentName);
+	const clientBaseName = toKebabCase(baseName);
+	const instances = window.FluidPrimitives?.componentInstances?.[namespace]?.[clientBaseName];
+	const instance = instances?.[oldRootId];
+	if (instance) {
+		delete instances[oldRootId];
+		instances[newRootId] = instance;
+		instance.hydrator.rootId = newRootId;
+	}
+	const hydrationInstances = window.FluidPrimitives?.hydrationData?.[namespace]?.[clientBaseName];
+	const stencilData = hydrationInstances?.[oldRootId];
+	if (hydrationInstances && stencilData) {
+		delete hydrationInstances[oldRootId];
+		hydrationInstances[newRootId] = {
+			...stencilData,
+			props: {
+				...stencilData.props,
+				id: newRootId,
+				ids: remapIdsProp(stencilData.props.ids, remaps)
+			}
+		};
+	}
+}
+/**
+* Builds the `value`-suffixed id each root component PHP recorded as nested inside `scopeKey`
+* (see {@see getNestedComponents}) should move to - the metadata itself, not this formula, is what
+* tells the two apart from any *other* root component on the page.
+*
+* Recovers each one's stable, stencil-rooted prefix from its *current* recorded id first -
+* stripping back to before the last `:` segment, if it has one - so a component already renamed
+* once (`x:0` -> `x:1`) has that suffix *replaced* rather than accumulated (`x:0:1`). A component
+* that's never been touched at all (fresh from either a never-rendered-before-now server row or an
+* untouched `<template>` stencil) has no `:` in its rootId to strip, so this is a correct no-op for
+* it - its whole current id already is the stable prefix.
+*
+* Shared by both {@see prepareNestedRootComponents} (fresh `<template>` clones) and
+* {@see ComponentHydrator.renameValue} (existing items whose position is shifting) - the remap
+* shape itself doesn't differ between the two; only what each one does with it afterward (copy a
+* stencil's props to the new id vs. re-key an existing entry in place) does.
+*/
+function nestedRootRemapsFromMetadata(scopeKey, value) {
+	return getNestedComponents(scopeKey).map(({ name, id: currentRootId }) => {
+		const lastColonIndex = currentRootId.lastIndexOf(":");
+		return {
+			componentName: name,
+			oldRootId: currentRootId,
+			newRootId: `${lastColonIndex === -1 ? currentRootId : currentRootId.slice(0, lastColonIndex)}:${value}`
+		};
+	});
+}
+/**
+* Records a copy of `window.FluidPrimitives.nestedComponents[oldScopeKey]` (if present) under
+* `newScopeKey`, rewriting each entry's own `id` through the same `remaps`
+* {@see nestedRootRemapsFromMetadata} just computed from it - so a *later*
+* {@see ComponentHydrator.renameValue} on this same item (a second reindex) still finds it under
+* the id the item actually has by then, rather than the one it was first recorded under. Leaves
+* `oldScopeKey` in place: for a fresh clone that is the stencil, which the *next* clone needs too.
+* Returns whether there was anything to copy.
+*/
+function copyNestedComponentsScope(oldScopeKey, newScopeKey, remaps) {
+	const entries = window.FluidPrimitives?.nestedComponents?.[oldScopeKey];
+	if (!entries || oldScopeKey === newScopeKey) return false;
+	window.FluidPrimitives.nestedComponents ??= {};
+	window.FluidPrimitives.nestedComponents[newScopeKey] = entries.map((entry) => {
+		const match = remaps.find((remap) => remap.componentName === entry.name && remap.oldRootId === entry.id);
+		return match ? {
+			name: entry.name,
+			id: match.newRootId
+		} : entry;
+	});
+	return true;
+}
+/**
+* {@see copyNestedComponentsScope}, then drops `oldScopeKey` - for an existing item whose own key
+* is changing (see {@see ComponentHydrator.renameValue}), as opposed to a fresh clone.
+*/
+function migrateNestedComponentsScope(oldScopeKey, newScopeKey, remaps) {
+	if (copyNestedComponentsScope(oldScopeKey, newScopeKey, remaps)) delete window.FluidPrimitives.nestedComponents?.[oldScopeKey];
+}
+/**
+* Prepares every nested, independent root component inside a freshly cloned `<template>` item for
+* `value` - the fresh-clone half of {@see ComponentHydrator.restampValue}, which this backs. Every
+* element that *references* one of those root ids - not just the root element itself - is
+* re-stamped too, via {@see restampIdReferences} (which also fixes up any part whose id references
+* a *different* nested component's own id, e.g. Input's label/input reusing Field's), plus the
+* same substitution applied to each one's own `ids` prop override map via {@see remapIdsProp}.
+* Without this, a nested component's parts would keep the root id of the stencil they were cloned
+* from and stay attached to it, since they're outside `restampValue`'s own scope (which only
+* covers the *outer* component's own parts).
+*
+* Copies each one's stencil hydration data (registered once at server-render time, when that one
+* stencil instance rendered) to the new id via {@see copyNestedComponentEntry}, so a subsequent
+* `mountAll()` can construct it. Deliberately does not construct component instances itself -
+* there is no registry mapping a componentName to its constructor anywhere in this library (each
+* primitive's own `mountAll('field', callback)` call, with its own constructor, is defined
+* per-consumer in their own entry.ts) - see {@see ComponentHydrator.restampValue}'s own docblock
+* for what to do with the client component names this returns instead.
+*/
+function prepareNestedRootComponents(stencilKey, root, value, newScopeKey) {
+	const remaps = nestedRootRemapsFromMetadata(stencilKey, value);
+	if (remaps.length === 0) return [];
+	restampIdReferences(root, remaps);
+	const componentNames = /* @__PURE__ */ new Set();
+	for (const { componentName, oldRootId, newRootId } of remaps) if (copyNestedComponentEntry(componentName, oldRootId, newRootId, remaps, value)) componentNames.add(componentName);
+	if (newScopeKey) copyNestedComponentsScope(stencilKey, newScopeKey, remaps);
+	return Array.from(componentNames);
+}
+function getByPath(item, path) {
+	return path.split(".").reduce((value, key) => value?.[key], item);
+}
+function getListCollectionFromHydrationData(hydrationCollection) {
+	if (hydrationCollection instanceof ListCollection) return hydrationCollection;
+	const { itemToValueKey, itemToStringKey, isItemDisabledKey, groupByKey, groupSort } = hydrationCollection;
+	return new ListCollection({
+		items: hydrationCollection.items,
+		itemToValue: itemToValueKey ? (item) => getByPath(item, itemToValueKey) : void 0,
+		itemToString: itemToStringKey ? (item) => getByPath(item, itemToStringKey) : void 0,
+		isItemDisabled: isItemDisabledKey ? (item) => getByPath(item, isItemDisabledKey) : void 0,
+		groupBy: groupByKey ? (item) => getByPath(item, groupByKey) : void 0,
+		groupSort: groupSort ?? void 0
+	});
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/client-prop-converters.ts
+const converters = /* @__PURE__ */ new Map();
+/**
+* Registers which props of a component need converting before a `mountAll()` or `mount()` callback
+* receives them, e.g. the `collection` of a Select: JSON on the wire, a `ListCollection` once
+* converted.
+*
+* @param componentName - The component, e.g. `select`.
+* @param propConverters - The converters, by prop name.
+*/
+function registerClientPropConverters(componentName, propConverters) {
+	converters.set(toKebabCase(componentName), propConverters);
+}
+/**
+* @internal
+*
+* Runs every registered converter for `componentName` against `props`, called for every
+* registered key regardless of whether it's actually present on `props` - a converter is
+* registered per prop *name*, not per wire value, so it can supply a default for a prop the wire
+* data omitted entirely (e.g. Combobox's `collection` when a purely async, searchUrl-only combobox
+* sends none).
+*/
+function applyClientPropConverters(componentName, props) {
+	const componentConverters = converters.get(toKebabCase(componentName));
+	if (!componentConverters) return props;
+	const result = { ...props };
+	for (const [propName, convert] of Object.entries(componentConverters)) result[propName] = convert(result[propName], result);
+	return result;
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/delayed-indicator.ts
+const DEFAULT_SHOW_DELAY_MS = 150;
+const DEFAULT_MIN_VISIBLE_MS = 300;
+function assertFiniteNonNegative(value, name) {
+	if (!Number.isFinite(value) || value < 0) throw new RangeError(`DelayedIndicator: ${name} must be a finite number >= 0, got ${value}.`);
+	return value;
+}
+/**
+* Delays showing a transient value long enough to avoid flicker, and keeps it visible for a minimum
+* duration once shown. Feed it every new value through `set()`, typically straight from a subscribe
+* callback, and it forwards them to `onChange`. The values `isTransient` marks are held back for
+* `showDelayMs`, so a fast operation never flashes them. Once shown they stay for at least
+* `minVisibleMs`, so they can't vanish the instant they appeared.
+*
+* It works on any value, not only a boolean: one instance can drive a spinner and a status text
+* from the same source, so they never disagree.
+*/
+var DelayedIndicator = class {
+	showDelayMs;
+	minVisibleMs;
+	isTransient;
+	onChange;
+	phase = "idle";
+	latestValue;
+	timer = null;
+	shownAt = 0;
+	constructor(options) {
+		this.showDelayMs = assertFiniteNonNegative(options.showDelayMs ?? DEFAULT_SHOW_DELAY_MS, "showDelayMs");
+		this.minVisibleMs = assertFiniteNonNegative(options.minVisibleMs ?? DEFAULT_MIN_VISIBLE_MS, "minVisibleMs");
+		this.isTransient = options.isTransient;
+		this.onChange = options.onChange;
+	}
+	/**
+	* Passes a new value on, delayed as described above. It does not deduplicate: the same value
+	* again can still call `onChange` again, as this filters state over time, it is not a
+	* `distinctUntilChanged()`.
+	*
+	* @param value - The new value.
+	*/
+	set(value) {
+		this.latestValue = value;
+		const transient = this.isTransient(value);
+		if (this.phase === "idle") {
+			if (!transient) {
+				this.onChange(value);
+				return;
+			}
+			this.phase = "waiting";
+			this.timer = setTimeout(() => {
+				this.timer = null;
+				this.phase = "shown";
+				this.shownAt = performance.now();
+				this.onChange(this.latestValue);
+			}, this.showDelayMs);
+			return;
+		}
+		if (this.phase === "waiting") {
+			if (transient) return;
+			if (this.timer !== null) clearTimeout(this.timer);
+			this.timer = null;
+			this.phase = "idle";
+			this.onChange(value);
+			return;
+		}
+		if (transient) {
+			if (this.timer !== null) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
+			this.onChange(value);
+			return;
+		}
+		if (this.timer !== null) return;
+		const remaining = this.minVisibleMs - (performance.now() - this.shownAt);
+		const commit = () => {
+			this.timer = null;
+			this.phase = "idle";
+			this.onChange(this.latestValue);
+		};
+		if (remaining > 0) this.timer = setTimeout(commit, remaining);
+		else commit();
+	}
+	/**
+	* Cancels any timer that is running. Call it when the indicator is no longer needed, e.g. on
+	* teardown: otherwise a scheduled value can still reach `onChange` afterwards. It is safe to call
+	* when nothing is transient or shown.
+	*/
+	destroy() {
+		if (this.timer !== null) {
+			clearTimeout(this.timer);
+			this.timer = null;
+		}
+		this.phase = "idle";
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/extbase.ts
+/**
+* Reads the Extbase argument namespace (`tx_docs_docs`) of a frontend action URL, from its
+* `[controller]` or `[action]` query key. `UriBuilder::uriFor()` nests those under it, also for a
+* custom `pluginNamespace`.
+*
+* @param url - The URL of the action.
+* @returns The namespace, or `null` for a URL without such a key.
+*/
+function getArgumentPrefix(url) {
+	for (const key of new URL(url, document.baseURI).searchParams.keys()) {
+		const prefix = key.match(/^([^[\]]+)\[(?:action|controller)\]$/)?.[1];
+		if (prefix) return prefix;
+	}
+	return null;
+}
+/** Bracket notation (`demand[city]`, `ids[0]`) is what Extbase's argument mapper reads. */
+function flatten(value, key) {
+	if (value == null) return [];
+	if (Array.isArray(value) || value.constructor === Object) return Object.entries(value).flatMap(([k, v]) => flatten(v, key ? `${key}[${k}]` : k));
+	return [[key, value instanceof Blob ? value : String(value)]];
+}
+/**
+* Sends GET and POST requests to an Extbase controller action from your own code, e.g. from the
+* `load` callback of an async search. The data is nested under the Extbase argument namespace of the
+* URL, the way `f:uri.action` builds it.
+*/
+const extbase = {
+	/**
+	* GETs `url` with `data` appended as query parameters under its Extbase argument namespace. The
+	* URL's own query, `cHash` included, is kept - so the new parameters have to be listed in
+	* `FE.cacheHash.excludedParameters`, or TYPO3 rejects the request.
+	*
+	* @param url - The URL of the action, absolute or relative.
+	* @param data - The arguments. Nested objects and arrays are flattened into bracket notation.
+	* @param init - More options for `fetch`, e.g. `{ signal }`.
+	* @returns The native `Response`. A non-2xx status resolves normally, check `response.ok`.
+	*/
+	async get(url, data, init) {
+		const target = new URL(url, document.baseURI);
+		for (const [key, value] of flatten(data, getArgumentPrefix(url) ?? "")) target.searchParams.append(key, String(value));
+		return fetch(target, {
+			...init,
+			method: "GET"
+		});
+	},
+	/**
+	* POSTs `data` as `multipart/form-data`, nested under the URL's Extbase argument namespace. A
+	* URL without one gets `data` unprefixed.
+	*
+	* @param url - The URL of the action.
+	* @param data - The arguments. Nested objects and arrays are flattened into bracket notation, `null`
+	* and `undefined` are skipped, a `File` or `Blob` is sent as it is.
+	* @param init - More options for `fetch`, e.g. `{ signal }`.
+	* @returns The native `Response`. A non-2xx status resolves normally, check `response.ok`.
+	*/
+	async post(url, data, init) {
+		const body = new FormData();
+		for (const [key, value] of flatten(data, getArgumentPrefix(url) ?? "")) body.append(key, value);
+		return fetch(url, {
+			...init,
+			method: "POST",
+			body
+		});
+	},
+	getArgumentPrefix
+};
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.path.ts
+/** Matches one path segment: either a bare run of non-delimiter chars, or bracket contents. */
+const fieldPathSegmentPattern = /([^.[\]]+)|\[(.*?)\]/g;
+/** Sentinel for an empty `[]` segment - "append to this array" - distinct from any real field name. */
+const appendFieldPathSegment = Symbol("append-field-path-segment");
+/** Strips a trailing `[]` (the manual-bracket array-submission marker, e.g. `a11yNeeds[]`) if present. */
+function trimArraySuffix(fieldName) {
+	return fieldName.replace(/\[\]$/, "");
+}
+/**
+* Splits a field name into its path segments, treating `.` and `[...]` as equivalent
+* delimiters - `person.country` and `person[country]` both parse to `['person', 'country']`.
+* An all-digit segment becomes a number, and an empty `[]` becomes {@link appendFieldPathSegment}.
+*/
+function parseFieldPath(fieldName) {
+	const fieldPath = [];
+	for (const match of fieldName.matchAll(fieldPathSegmentPattern)) {
+		if (match[1]) {
+			const segment = match[1];
+			fieldPath.push(/^\d+$/.test(segment) ? Number(segment) : segment);
+			continue;
+		}
+		const bracketSegment = match[2] ?? "";
+		if (bracketSegment === "") {
+			fieldPath.push(appendFieldPathSegment);
+			continue;
+		}
+		fieldPath.push(/^\d+$/.test(bracketSegment) ? Number(bracketSegment) : bracketSegment);
+	}
+	return fieldPath;
+}
+/**
+* Joins path segments back into one bracketed name: the first segment stays bare, every
+* segment after it gets wrapped in `[...]`, and {@link appendFieldPathSegment} becomes `[]`.
+*/
+function stringifyFieldPathAsBrackets(fieldPath) {
+	let fieldName = "";
+	for (const segment of fieldPath) {
+		if (segment === appendFieldPathSegment) {
+			fieldName += "[]";
+			continue;
+		}
+		const segmentValue = String(segment);
+		fieldName += fieldName === "" ? segmentValue : `[${segmentValue}]`;
+	}
+	return fieldName;
+}
+/**
+* Parses `fieldName` (dot or bracket notation) and rebuilds it fully bracketed, with
+* `prefix` and `objectName` unshifted onto the front in that order. Used to rewrite submitted
+* `FormData` keys into the form's real Extbase argument name just before `fetch()`.
+*/
+function prefixFieldName(fieldName, prefix, objectName) {
+	if (fieldName === "") return "";
+	const fieldPath = parseFieldPath(fieldName);
+	if (objectName) fieldPath.unshift(objectName);
+	if (prefix) fieldPath.unshift(prefix);
+	return stringifyFieldPathAsBrackets(fieldPath);
+}
+/**
+* Resolves any field-name string (dot or bracket, optionally objectName-prefixed) to the exact
+* bracket-notation key the field registry uses.
+*/
+function toRegisteredFieldName(fieldName, objectName) {
+	const fieldPath = parseFieldPath(fieldName);
+	if (fieldPath.length === 0) return trimArraySuffix(fieldName);
+	if (objectName && fieldPath[0] === objectName) fieldPath.shift();
+	return trimArraySuffix(stringifyFieldPathAsBrackets(fieldPath));
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.registry.ts
+const registry$1 = /* @__PURE__ */ new WeakMap();
+function registerFormMachine(form, service) {
+	if (!form) return;
+	registry$1.set(form, {
+		machine: service,
+		fields: /* @__PURE__ */ new Map(),
+		expectedFieldCount: form.querySelectorAll("[data-field-root]").length || 0
+	});
+	form.dispatchEvent(new CustomEvent("fluid-primitives:form:registered", { bubbles: true }));
+}
+function registerFieldMachineForForm(el, fieldMachine) {
+	if (!el) return;
+	const form = resolveElToForm(el);
+	if (!form) return;
+	const handleEntry = (entry) => {
+		entry.fields.set(trimArraySuffix(fieldMachine.prop("name")), fieldMachine);
+		if (entry.fields.size === entry.expectedFieldCount) entry.machine.notify();
+		else if (entry.fields.size > entry.expectedFieldCount) entry.machine.notify?.();
+	};
+	const handler = () => {
+		const entry = registry$1.get(form);
+		if (!entry) return;
+		handleEntry(entry);
+		form.removeEventListener("fluid-primitives:form:registered", handler);
+	};
+	const entry = registry$1.get(form);
+	if (entry) handleEntry(entry);
+	else form.addEventListener("fluid-primitives:form:registered", handler);
+}
+/**
+* Drops a field's entry by identity rather than by name: the entry may have been re-keyed by a
+* rename, and a destroyed field's stopped machine must not keep counting as a field of the form.
+*/
+function unregisterFieldMachineForForm(el, fieldMachine) {
+	const fields = registry$1.get(resolveElToForm(el))?.fields;
+	if (!fields) return;
+	for (const [name, registered] of fields) if (registered === fieldMachine) fields.delete(name);
+}
+/**
+* Re-keys a registered field machine under a new field name and updates its
+* `name` prop, without touching its value/touched/dirty/error state. This is
+* how recurring-field rows stay contiguously indexed after removing a row in
+* the middle: later rows are renamed down by one instead of copying values
+* between DOM elements, which keeps working regardless of what kind of
+* control (native input, Select, NumberInput, ...) the field wraps.
+*/
+function renameFieldMachineForForm(el, oldName, newName) {
+	const form = resolveElToForm(el);
+	if (!form) return;
+	const entry = registry$1.get(form);
+	if (!entry) return;
+	const normalizedOldName = trimArraySuffix(oldName);
+	const fieldMachine = entry.fields.get(normalizedOldName);
+	if (!fieldMachine) return;
+	entry.fields.delete(normalizedOldName);
+	fieldMachine.updateProps({ name: newName });
+	entry.fields.set(trimArraySuffix(newName), fieldMachine);
+}
+function resolveElToForm(el) {
+	if (!el) return null;
+	if (el instanceof HTMLFormElement) return el;
+	return el.closest("form");
+}
+function getFormMachineFor(el) {
+	if (!el) return;
+	const form = resolveElToForm(el);
+	if (!form) return;
+	return registry$1.get(form)?.machine;
+}
+function getFieldMachinesFor(el) {
+	if (!el) return /* @__PURE__ */ new Map();
+	const form = resolveElToForm(el);
+	if (!form) return /* @__PURE__ */ new Map();
+	const entry = registry$1.get(form);
+	if (!entry) return /* @__PURE__ */ new Map();
+	return entry.fields;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.anatomy.ts
+/**
+* Derived from @zag-js/field of Zag.js (https://github.com/chakra-ui/zag, packages/machines/field,
+* commit 0ce8e3de63b571d37e438bcf28e64759466e56e9), MIT License, Copyright (c) 2021 Chakra UI.
+* Adapted for Fluid Primitives, the git history shows what changed from the original.
+*/
+const anatomy = createAnatomy("field").parts("root", "label", "control", "helperText", "errorText", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.dom.ts
+/** Dispatched on the field root once its settled value differs from the last one it announced. */
+const FIELD_VALUE_CHANGE_EVENT = "fluid-primitives:field:valuechange";
+const getRootId = (ctx) => ctx.ids?.root ?? ctx.id;
+const getControlId = (ctx) => ctx.ids?.control ?? `field:${ctx.id}:control`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `field:${ctx.id}:label`;
+const getErrorTextId = (ctx, match, id) => {
+	if (id) return id;
+	if (typeof match === "string") return `field:${ctx.id}:error-text:${match}`;
+	return ctx.ids?.errorText ?? `field:${ctx.id}:error-text`;
+};
+const getHelperTextId = (ctx) => ctx.ids?.helperText ?? `field:${ctx.id}:helper-text`;
+const queryRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const hasHelperText = (rootEl) => rootEl.querySelector(`[${parts.helperText.attr}]`) !== null;
+const getVisibleErrorTextIds = (rootEl) => Array.from(rootEl.querySelectorAll(`[${parts.errorText.attr}]`)).filter((el) => !el.hidden && el.id).map((el) => el.id);
+const componentRootAttribute = /^(data-.+-)root$/;
+/**
+* Whether `target` belongs to the field: inside its root, or a portaled part (a popup, say) of a
+* component rendered inside it. Those parts sit outside the root but carry
+* `data-<component>-<part>="<id of that component's root>"`, like the root itself.
+*/
+function isInsideField(rootEl, target) {
+	if (!(target instanceof Element)) return false;
+	if (rootEl.contains(target)) return true;
+	const prefixById = /* @__PURE__ */ new Map();
+	for (const el of rootEl.querySelectorAll("*")) for (const { name, value } of Array.from(el.attributes)) {
+		const match = componentRootAttribute.exec(name);
+		if (match && value) prefixById.set(value, match[1]);
+	}
+	if (prefixById.size === 0) return false;
+	for (let el = target; el; el = el.parentElement) for (const { name, value } of Array.from(el.attributes)) {
+		const prefix = prefixById.get(value);
+		if (prefix && name.startsWith(prefix)) return true;
+	}
+	return false;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.utils.ts
+const VALIDITY_KEYS = [
+	"badInput",
+	"customError",
+	"patternMismatch",
+	"rangeOverflow",
+	"rangeUnderflow",
+	"stepMismatch",
+	"tooLong",
+	"tooShort",
+	"typeMismatch",
+	"valueMissing"
+];
+const VALID_SNAPSHOT = Object.freeze({
+	badInput: false,
+	customError: false,
+	patternMismatch: false,
+	rangeOverflow: false,
+	rangeUnderflow: false,
+	stepMismatch: false,
+	tooLong: false,
+	tooShort: false,
+	typeMismatch: false,
+	valueMissing: false,
+	valid: true
+});
+/** Copy the live `ValidityState` — its getters are recomputed on every read. */
+function getValiditySnapshot(el) {
+	const snapshot = {};
+	for (const key of VALIDITY_KEYS) snapshot[key] = el.validity[key];
+	snapshot.valid = el.validity.valid;
+	return snapshot;
+}
+/**
+* A pristine empty required field is not an error yet. When `valueMissing` is the
+* only failure, report the field as valid until the user interacts or a submit forces it.
+*/
+function suppressValueMissing(validity) {
+	if (!validity.valueMissing) return validity;
+	if (!VALIDITY_KEYS.every((key) => key === "valueMissing" || !validity[key])) return validity;
+	return {
+		...validity,
+		valueMissing: false,
+		valid: true
+	};
+}
+/**
+* The native flags with `valueMissing` replaced. The field's own `required` and its value decide it,
+* not the control's `required` attribute: a Combobox's visible input holds label text, a group has no
+* control at all, and a placeholder option is always selected.
+*/
+function withValueMissing(validity, valueMissing) {
+	const next = {
+		...validity,
+		valueMissing
+	};
+	next.valid = VALIDITY_KEYS.every((key) => !next[key]);
+	return next;
+}
+function toErrorArray(result) {
+	if (result == null) return [];
+	return (Array.isArray(result) ? result : [result]).filter((error) => typeof error === "string" && error.length > 0);
+}
+/**
+* Priority: custom `validate` errors outrank native constraint errors.
+* (The controlled `invalid` prop outranks both, at the computed level.)
+*/
+function resolveValidation(options) {
+	const { customErrors, validity, nativeMessage } = options;
+	if (customErrors.length > 0) return {
+		errors: customErrors,
+		validity: {
+			...validity,
+			customError: true,
+			valid: false
+		}
+	};
+	if (!validity.valid) return {
+		errors: nativeMessage ? [nativeMessage] : [],
+		validity
+	};
+	return {
+		errors: [],
+		validity
+	};
+}
+/**
+* Description first, then visible error ids in DOM order.
+* Hidden error texts must not be referenced — screen readers still announce them.
+*/
+function composeDescribedBy(options) {
+	const ids = [];
+	if (options.hasHelperText) ids.push(options.helperTextId);
+	ids.push(...options.errorTextIds);
+	return ids.length > 0 ? ids.join(" ") : void 0;
+}
+/**
+* Whether this event should commit validation (make it visible).
+* `VALIDATE` / `SUBMIT.INVALID` always commit and do not go through this.
+*
+* Two rules go beyond the modes: an error that is showing revalidates on every change in every
+* mode, so it clears the moment it is fixed; and a blur only commits once the value was edited or a
+* submit was attempted, so tabbing through a pristine field, or a popup taking focus from its
+* trigger, shows nothing.
+*/
+function shouldCommit(options) {
+	const { mode, submitAttempted, eventType, edited, showingErrors } = options;
+	if (eventType === "CONTROL.BLUR") return mode === "onBlur" && (edited || submitAttempted);
+	if (eventType === "CONTROL.CHANGE") return mode === "onChange" || mode === "onSubmit" && submitAttempted || showingErrors;
+	return false;
+}
+/** Whether the error text should show for the given `match`. */
+function isErrorMatch(match, options) {
+	const { validity, invalid, disabled } = options;
+	if (match === true) return true;
+	if (match === false || disabled) return false;
+	if (typeof match === "string") return validity?.[match] === true;
+	return invalid;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.connect.ts
+function connect(service, normalize) {
+	const { send, context, prop, computed, scope } = service;
+	const disabled = computed("disabled");
+	const invalid = computed("invalid");
+	const valid = computed("valid");
+	const required = !!prop("required");
+	const readOnly = !!prop("readOnly");
+	const focused = !disabled && context.get("focused");
+	const touched = context.get("touched");
+	const dirty = context.get("dirty");
+	const filled = context.get("filled");
+	const validating = context.get("validating");
+	const ids = {
+		root: getRootId(scope),
+		control: getControlId(scope),
+		label: getLabelId(scope),
+		errorText: getErrorTextId(scope),
+		helperText: getHelperTextId(scope)
+	};
+	const ariaDescribedby = composeDescribedBy({
+		helperTextId: ids.helperText,
+		hasHelperText: context.get("hasHelperText"),
+		errorTextIds: context.get("errorTextIds")
+	});
+	function getFieldState() {
+		return {
+			disabled,
+			invalid,
+			valid,
+			required,
+			readOnly,
+			touched,
+			dirty,
+			filled,
+			focused,
+			validating
+		};
+	}
+	function getErrorTextState(props = {}) {
+		const shown = isErrorMatch(props.match, {
+			validity: context.get("validity"),
+			invalid,
+			disabled
+		});
+		return {
+			...getFieldState(),
+			hidden: !shown
+		};
+	}
+	function getIndicatorState(props) {
+		const fieldState = getFieldState();
+		const shown = match(props.type, {
+			required: () => fieldState.required,
+			invalid: () => fieldState.invalid,
+			valid: () => fieldState.valid === true,
+			validating: () => fieldState.validating
+		});
+		return {
+			...fieldState,
+			type: props.type,
+			hidden: !shown
+		};
+	}
+	function getControlBaseProps() {
+		const fieldState = getFieldState();
+		return {
+			...parts.control.attrs(scope.id),
+			id: ids.control,
+			name: prop("name"),
+			dir: prop("dir"),
+			disabled: fieldState.disabled,
+			required: fieldState.required,
+			"aria-invalid": fieldState.invalid || void 0,
+			"aria-describedby": ariaDescribedby,
+			...getDataAttrs(fieldState)
+		};
+	}
+	return {
+		ids,
+		disabled,
+		invalid,
+		valid,
+		required,
+		readOnly,
+		focused,
+		touched,
+		dirty,
+		filled,
+		validating,
+		errors: context.get("errors"),
+		validity: context.get("validity"),
+		ariaDescribedby,
+		validate() {
+			send({ type: "VALIDATE" });
+		},
+		clearErrors() {
+			send({ type: "ERRORS.CLEAR" });
+		},
+		reset() {
+			send({ type: "RESET" });
+		},
+		getRootState: getFieldState,
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs(scope.id),
+				dir: prop("dir"),
+				/** The name of the field. */
+				"data-name": prop("name"),
+				...getDataAttrs(getFieldState())
+			});
+		},
+		getLabelState: getFieldState,
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs(scope.id),
+				id: ids.label,
+				dir: prop("dir"),
+				htmlFor: ids.control,
+				...getDataAttrs(getFieldState())
+			});
+		},
+		getControlState: getFieldState,
+		getControlProps() {
+			return normalize.element({ ...getControlBaseProps() });
+		},
+		getInputProps() {
+			return normalize.input({
+				...getControlBaseProps(),
+				readOnly: getFieldState().readOnly
+			});
+		},
+		getTextareaProps() {
+			return normalize.textarea({
+				...getControlBaseProps(),
+				readOnly: getFieldState().readOnly
+			});
+		},
+		getSelectProps() {
+			return normalize.select({ ...getControlBaseProps() });
+		},
+		getHelperTextState: getFieldState,
+		getHelperTextProps() {
+			return normalize.element({
+				...parts.helperText.attrs(scope.id),
+				id: ids.helperText,
+				dir: prop("dir"),
+				...getDataAttrs(getFieldState())
+			});
+		},
+		getErrorTextState,
+		getErrorTextProps(props = {}) {
+			const errorTextState = getErrorTextState(props);
+			return normalize.element({
+				...parts.errorText.attrs(scope.id),
+				id: getErrorTextId(scope, props.match, props.id),
+				dir: prop("dir"),
+				hidden: errorTextState.hidden,
+				"aria-live": "polite",
+				...getDataAttrs(errorTextState)
+			});
+		},
+		getIndicatorState,
+		getIndicatorProps(props) {
+			const indicatorState = getIndicatorState(props);
+			return normalize.element({
+				...parts.indicator.attrs(scope.id),
+				dir: prop("dir"),
+				/** The state the indicator reflects. */
+				"data-type": indicatorState.type,
+				"aria-hidden": true,
+				hidden: indicatorState.hidden,
+				...getDataAttrs(indicatorState)
+			});
+		}
+	};
+}
+function getDataAttrs(state) {
+	return {
+		/** Present when the field is disabled, or it is inside a disabled fieldset. */
+		"data-disabled": dataAttr(state.disabled),
+		/** Present when the field is invalid: a native constraint failed, or `validate`, the form or the server reported an error. */
+		"data-invalid": dataAttr(state.invalid),
+		/** Present when the field has been validated and passed. */
+		"data-valid": dataAttr(state.valid === true),
+		/** Present when the field is required. */
+		"data-required": dataAttr(state.required),
+		/** Present when the field is read-only. */
+		"data-readonly": dataAttr(state.readOnly),
+		/** Present once the user has left the field at least once. */
+		"data-touched": dataAttr(state.touched),
+		/** Present when the value differs from the one the field started with. It goes away again when the user reverts the edit. */
+		"data-dirty": dataAttr(state.dirty),
+		/** Present when the field has a value. */
+		"data-filled": dataAttr(state.filled),
+		/** Present when focus is inside the field. */
+		"data-focus": dataAttr(state.focused)
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.value.ts
+function getCurrentFieldValue(rootEl, name, defaultValue) {
+	if (!rootEl) return getDefaultFieldValue(defaultValue);
+	return getFieldValueFromContainer(rootEl, name) ?? getDefaultFieldValue(defaultValue);
+}
+/**
+* The field value as one string, which is what the machine compares and tests for emptiness:
+* `''` for nothing (`null`, `[]`, or only the `''` entries a placeholder option leaves behind), a
+* plain string as is - not trimmed, native `valueMissing` treats whitespace as a value - and a
+* serialization for lists and files.
+*/
+function toComparableString(value) {
+	if (value === null) return "";
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) {
+		const entries = value.filter((entry) => entry !== "");
+		return entries.length > 0 ? serializeFieldValue(entries) : "";
+	}
+	return serializeFieldValue(value);
+}
+function getComparableFieldValue(rootEl, name, defaultValue) {
+	return toComparableString(getCurrentFieldValue(rootEl, name, defaultValue));
+}
+function getDefaultFieldValue(defaultValue) {
+	if (defaultValue === null || defaultValue === void 0 || defaultValue === false) return null;
+	if (defaultValue instanceof File) return defaultValue;
+	if (Array.isArray(defaultValue)) return defaultValue.filter((value) => value instanceof File || typeof value === "string");
+	if (typeof defaultValue === "string") return defaultValue;
+	return null;
+}
+function getFieldValueFromContainer(container, fieldName) {
+	const normalizedFieldName = trimArraySuffix(fieldName);
+	const selector = [
+		`input[name="${CSS.escape(normalizedFieldName)}"]`,
+		`input[name="${CSS.escape(normalizedFieldName)}[]"]`,
+		`select[name="${CSS.escape(normalizedFieldName)}"]`,
+		`select[name="${CSS.escape(normalizedFieldName)}[]"]`,
+		`textarea[name="${CSS.escape(normalizedFieldName)}"]`,
+		`textarea[name="${CSS.escape(normalizedFieldName)}[]"]`
+	].join(", ");
+	const elements = Array.from(container.querySelectorAll(selector));
+	if (elements.length === 0) return null;
+	if (elements.every((el) => el instanceof HTMLInputElement && el.type === "checkbox")) {
+		const checkboxes = elements;
+		const checkedValues = checkboxes.filter((input) => input.checked).map((input) => input.value || "on");
+		if (fieldName.endsWith("[]") || elements.some((el) => el.name.endsWith("[]")) || checkboxes.length > 1) return checkedValues;
+		return checkedValues[0] ?? null;
+	}
+	if (elements.every((el) => el instanceof HTMLInputElement && el.type === "radio")) return elements.find((input) => input.checked)?.value ?? null;
+	if (elements.length === 1) {
+		const [element] = elements;
+		if (element instanceof HTMLInputElement && element.type === "file") {
+			const files = element.files ? Array.from(element.files) : [];
+			return element.multiple ? files : files[0] ?? null;
+		}
+		if (element instanceof HTMLSelectElement && element.multiple) return Array.from(element.selectedOptions).map((option) => option.value);
+		return element.value ?? null;
+	}
+	return elements.map((element) => {
+		if (element instanceof HTMLInputElement && element.type === "file") return element.files?.[0];
+		return element.value;
+	}).filter((value) => value !== void 0);
+}
+function getFieldElement(form, fieldName) {
+	return form.querySelector([
+		`input[name="${CSS.escape(fieldName)}"]`,
+		`input[name="${CSS.escape(fieldName)}[]"]`,
+		`select[name="${CSS.escape(fieldName)}"]`,
+		`select[name="${CSS.escape(fieldName)}[]"]`,
+		`textarea[name="${CSS.escape(fieldName)}"]`,
+		`textarea[name="${CSS.escape(fieldName)}[]"]`
+	].join(", "));
+}
+function serializeFieldValue(value) {
+	return JSON.stringify(toSerializableFieldValue(value));
+}
+function toSerializableFieldValue(value) {
+	if (Array.isArray(value)) return value.map(toSerializableFieldValue);
+	if (value instanceof File) return {
+		name: value.name,
+		size: value.size,
+		type: value.type,
+		lastModified: value.lastModified
+	};
+	return value;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.handle.ts
+/** Dispatched on a field's root whenever a field named in its own `listenTo` changes value. */
+const FIELD_DEPENDENCY_CHANGE_EVENT = "fluid-primitives:field:dependencychange";
+function connectField(machine) {
+	return {
+		...connect(machine.service, normalizeProps),
+		...createFieldHandleExtras(machine)
+	};
+}
+function createFieldHandleExtras(machine) {
+	const { context, prop, refs } = machine;
+	return {
+		name: prop("name"),
+		getValue: () => getCurrentFieldValue(refs.get("rootEl"), prop("name"), prop("defaultValue")),
+		getErrorText() {
+			const errors = context.get("errors");
+			return errors.length > 0 ? errors.join(" ") : null;
+		},
+		getRootEl: () => refs.get("rootEl"),
+		getFormMachine: () => getFormMachineFor(refs.get("rootEl")),
+		setDisabled: (disabled) => machine.updateProps({ disabled }),
+		setRequired: (required) => machine.updateProps({ required }),
+		setReadOnly: (readOnly) => machine.updateProps({ readOnly }),
+		addDependencyChangeListener(callback) {
+			const rootEl = refs.get("rootEl");
+			if (!rootEl) return () => {};
+			const handler = (event) => {
+				callback(event.detail);
+			};
+			rootEl.addEventListener(FIELD_DEPENDENCY_CHANGE_EVENT, handler);
+			return () => rootEl.removeEventListener(FIELD_DEPENDENCY_CHANGE_EVENT, handler);
+		}
+	};
+}
+/** Reads the machine directly instead of building the whole api: the Form makes one per field per render. */
+function createFieldHandle(machine) {
+	const { context, computed, prop } = machine;
+	const disabled = computed("disabled");
+	return {
+		disabled,
+		required: !!prop("required"),
+		readOnly: !!prop("readOnly"),
+		invalid: computed("invalid"),
+		valid: computed("valid"),
+		touched: context.get("touched"),
+		dirty: context.get("dirty"),
+		filled: context.get("filled"),
+		focused: !disabled && context.get("focused"),
+		validating: context.get("validating"),
+		errors: context.get("errors"),
+		validate: () => machine.send({ type: "VALIDATE" }),
+		clearErrors: () => machine.send({ type: "ERRORS.CLEAR" }),
+		reset: () => machine.send({ type: "RESET" }),
+		...createFieldHandleExtras(machine)
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerFieldMachine(field, service) {
+	if (!field) return;
+	registry.set(field, service);
+	field.dispatchEvent(new CustomEvent("fluid-primitives:field:registered", { bubbles: true }));
+}
+function unregisterFieldMachine(field) {
+	registry.delete(field);
+}
+function getFieldMachineFor(el) {
+	if (!el) return;
+	return registry.get(el);
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/field-aware-component.ts
+const fieldProps = [...[
+	"invalid",
+	"disabled",
+	"readOnly",
+	"required"
+], "name"];
+/**
+* Base class of a primitive that can sit inside a Field. It takes `name`, `disabled`, `readOnly`,
+* `required` and `invalid` from the closest Field and follows its changes, and it tells the field
+* once it has hydrated.
+*/
+var FieldAwareComponent = class extends Component {
+	subscribedToField = false;
+	fieldMachine;
+	closestField = null;
+	/** The field's current api, for what a primitive merges into its own props when it renders. */
+	get field() {
+		return this.fieldMachine ? connectField(this.fieldMachine) : void 0;
+	}
+	getClosestField() {
+		return this.closestField || this.hydrator.query("root")?.closest("[data-field-root]") || null;
+	}
+	/** Builds the component like `Component.init()`, then tells the field that it is hydrated. */
+	init() {
+		super.init();
+		this.notifyFieldHydrated();
+	}
+	withFieldProps(props) {
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return props;
+		this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) return this.propsWithField(props, connectField(this.fieldMachine));
+		else {
+			const handler = () => {
+				this.fieldMachine = getFieldMachineFor(this.closestField);
+				this.updateProps(this.propsWithField(this.userProps, connectField(this.fieldMachine)));
+				this.notifyFieldHydrated();
+				this.closestField?.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+		return props;
+	}
+	/**
+	* Applies every later change of the field to the machine props. It waits for the field if that
+	* has not registered yet, and does nothing when there is no field around.
+	*/
+	subscribeToFieldService() {
+		if (this.subscribedToField) return;
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return;
+		if (!this.fieldMachine) this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) {
+			const fieldMachine = this.fieldMachine;
+			fieldMachine.subscribe(() => {
+				queueMicrotask(() => {
+					const field = connectField(fieldMachine);
+					const propsToUpdate = {};
+					for (const prop of fieldProps) {
+						const newValue = prop === "name" ? field.name : !!field[prop];
+						if (newValue !== (prop === "name" ? this.machine.prop(prop) : !!this.machine.prop(prop))) propsToUpdate[prop] = newValue;
+					}
+					if (Object.keys(propsToUpdate).length > 0) this.updateProps(propsToUpdate);
+					else this.machine.notify();
+				});
+			});
+			this.subscribedToField = true;
+		} else {
+			const handler = () => {
+				this.subscribeToFieldService();
+				this.closestField.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+	}
+	/**
+	* The field measured its starting value from the server HTML; a primitive may hydrate to a
+	* different state (a defaultChecked checkbox, a Select's selected option).
+	*/
+	notifyFieldHydrated() {
+		this.fieldMachine?.send({ type: "BASELINE" });
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/spread-props.ts
+const lastValues = /* @__PURE__ */ new WeakMap();
+/**
+* Like `spreadProps` for a text control, but it does not assign a `value` the control already
+* shows. Any assignment, even of the same text, makes the browser treat the value as set by a
+* script, and it stops reporting `tooShort` (`minlength`) for such a value. These controls mirror
+* what the user typed into their machine, so that assignment would happen on every keystroke.
+*
+* As in `spreadProps`, a value is only considered when it changed since the last call: the control
+* can be one event ahead of the machine, and must not be reset to the machine's older value.
+*/
+function spreadTextControlProps(node, attrs, scopeKey) {
+	const { value, ...rest } = attrs;
+	const cleanup = spreadProps(node, rest, scopeKey);
+	if (!lastValues.has(node) || lastValues.get(node) !== value) {
+		const next = value == null ? "" : String(value);
+		if (node.value !== next) node.value = next;
+	}
+	lastValues.set(node, value);
+	return cleanup;
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/template.ts
+/**
+* Clones the content of a `<template>` part, which must have exactly one root element, and throws
+* otherwise. It is a `DocumentFragment`, so you can append it directly: `root` stays a valid
+* reference to the element after the fragment has been emptied by the insertion.
+*
+* It works for any "clone a `<template>` and fill it with data that doesn't exist at server render
+* time" case, such as async search results, file upload previews or the rows of a FieldArray.
+*/
+var Template = class extends DocumentFragment {
+	/** The one root element of the clone. */
+	root;
+	/**
+	* The client names of the independent root components found inside the clone, empty without
+	* `options.value` or when there are none. Call their `mountAll()` after you insert the clone into
+	* the document.
+	*/
+	componentNames = [];
+	/**
+	* @param hydrator - The hydrator of the component that owns the `<template>`.
+	* @param part - The name of the `<template>` part.
+	* @param options - See `TemplateOptions`.
+	*/
+	constructor(hydrator, part, options = {}) {
+		super();
+		this.hydrator = hydrator;
+		const templateEl = hydrator.query(part);
+		if (!templateEl) throw new Error(`Template: no <template> found for part "${part}".`);
+		const content = templateEl.content.cloneNode(true);
+		if (content.children.length !== 1) throw new Error(`Template: "${part}" must have exactly one root element, found ${content.children.length}.`);
+		this.append(content);
+		this.root = this.firstElementChild;
+		if (options.value !== void 0) this.componentNames = hydrator.restampValue(this.root, options.value, hydrator.scopeKey(part), options.attributes);
+		movePortals(this);
+	}
+	/** Finds the first element of `part` inside the clone. */
+	query(part) {
+		return this.querySelector(this.hydrator.selector(part));
+	}
+	/** Finds every element of `part` inside the clone. */
+	queryAll(part) {
+		return Array.from(this.querySelectorAll(this.hydrator.selector(part)));
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/uid.ts
+/**
+* Creates an id that is unique within the page, e.g. for a part that needs an `id` to reference.
+*
+* @param prefix - Starts the id.
+*/
+function uid(prefix = "f") {
+	return "«" + prefix + uuid() + "»";
+}
+
+//#endregion
+export { getListCollectionFromHydrationData as $, queryRootEl as A, stringifyFieldPathAsBrackets as B, toErrorArray as C, getVisibleErrorTextIds as D, getControlEl as E, renameFieldMachineForForm as F, applyClientPropConverters as G, trimArraySuffix as H, unregisterFieldMachineForForm as I, destroyComponentsWithin as J, registerClientPropConverters as K, appendFieldPathSegment as L, getFormMachineFor as M, registerFieldMachineForForm as N, hasHelperText as O, registerFormMachine as P, getHydrationData as Q, parseFieldPath as R, suppressValueMissing as S, FIELD_VALUE_CHANGE_EVENT as T, extbase as U, toRegisteredFieldName as V, DelayedIndicator as W, getGlobal as X, getComponentInstance as Y, getGlobals as Z, serializeFieldValue as _, normalizeProps$1 as a, Machine as at, resolveValidation as b, registerFieldMachine as c, connectField as d, mount as et, createFieldHandle as f, getFieldValueFromContainer as g, getFieldElement as h, spreadTextControlProps as i, AsyncList as it, getFieldMachinesFor as j, isInsideField as k, unregisterFieldMachine as l, getCurrentFieldValue as m, Template as n, toKebabCase as nt, mergeProps as o, getComparableFieldValue as p, ComponentHydrator as q, spreadProps as r, Component as rt, FieldAwareComponent as s, uid as t, mountAll as tt, FIELD_DEPENDENCY_CHANGE_EVENT as u, VALID_SNAPSHOT as v, withValueMissing as w, shouldCommit as x, getValiditySnapshot as y, prefixFieldName as z };