@flux-ui/components 3.0.0-next.71 → 3.0.0-next.73

package/dist/index.js

@@ -2369,7 +2369,7 @@ function useTooltipInjection_default() {
 	return inject(FluxTooltipInjectionKey, { calculate: () => void 0 });
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+utils@3.35.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+utils@3.37.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
 function t$1(e, t) {
 	return Math.round(e / t) * t;
 }
@@ -6585,7 +6585,7 @@ useMode(definition$2);
 useMode(definition$1);
 useMode(definition);
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.35.0+f97c77f67c914c00/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.37.0+f97c77f67c914c00/node_modules/@basmilius/http-client/dist/index.mjs
 function adapter_default(Parent) {
 	return class extends Parent {
 		constructor(...args) {
@@ -6593,6 +6593,11 @@ function adapter_default(Parent) {
 		}
 	};
 }
+function bound_default() {
+	return (target, method) => {
+		target[method] = target[method].bind(target);
+	};
+}
 /**
 * Checks if the two given values are equal. When both values are a
 * dto, the check is done by firstly converthing them to JSON.
@@ -6616,7 +6621,7 @@ var TRIGGER = Symbol();
 * Checks if the given object is a dto.
 */
 function isDto_default(obj) {
-	return obj && typeof obj === "object" && !!obj[NAME];
+	return typeof obj === "object" && obj !== null && NAME in obj;
 }
 /**
 * Asserts that the given object is a dto.
@@ -6671,6 +6676,9 @@ var markDtoClean = circularProtect_default(function(obj) {
 	if (!obj[CHILDREN] || obj[CHILDREN].length === 0) return;
 	obj[CHILDREN].filter(isDtoDirty_default).forEach(markDtoClean);
 });
+function isProxiedArray_default(value) {
+	return Array.isArray(value) && PARENT in value;
+}
 /**
 * Marks the given dto dirty.
 */
@@ -6697,7 +6705,7 @@ function relateDtoTo_default(dto, parent, key) {
 */
 function relateValueTo_default(dto, key, value) {
 	if (isDto_default(value)) relateDtoTo_default(value, dto, key);
-	else if (Array.isArray(value)) {
+	else if (isProxiedArray_default(value)) {
 		for (const item of value) {
 			if (!isDto_default(item)) continue;
 			relateDtoTo_default(item, dto, key);
@@ -6729,7 +6737,7 @@ function unrelateDtoFrom_default(dto, parent) {
 */
 function unrelateValueFrom_default(dto, value) {
 	if (isDto_default(value)) unrelateDtoFrom_default(value, dto);
-	else if (Array.isArray(value)) {
+	else if (isProxiedArray_default(value)) {
 		for (const item of value) if (isDto_default(item)) unrelateDtoFrom_default(item, dto);
 		value[PARENT] = void 0;
 		value[PARENT_KEY] = void 0;
@@ -6773,7 +6781,7 @@ var arrayProxy_default = {
 	}
 };
 /**
-* Checks if the given key should be ignored by the proxy.
+* Checks if the proxy should ignore the given key.
 */
 function ignored(target, key) {
 	return typeof key === "symbol" || typeof target[key] === "function" || key === "length";
@@ -6818,7 +6826,7 @@ var instanceProxy_default = {
 		const oldValue = descriptor.get?.call(target) ?? void 0;
 		if (areEqual_default(value, oldValue)) return true;
 		unrelateValueFrom_default(target, oldValue);
-		if (Array.isArray(value) && !value[PROXY]) value = new Proxy(value, arrayProxy_default);
+		if (Array.isArray(value) && !isProxiedArray_default(value)) value = new Proxy(value, arrayProxy_default);
 		descriptor.set.call(target, value);
 		relateValueTo_default(target, key, value);
 		markDtoDirty(target, key);
@@ -6942,7 +6950,7 @@ function dto_default(clazz) {
 	K$2(clazz.prototype, DESCRIPTORS, descriptors);
 	K$2(clazz.prototype, NAME, clazz.name);
 	K$2(clazz.prototype, PROPERTIES, properties);
-	K$2(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance?.[NAME] === clazz.name);
+	K$2(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance !== null && NAME in instance && instance[NAME] === clazz.name);
 	G$2(clazz, "clone", clone_default);
 	G$2(clazz, "fill", fill_default);
 	G$2(clazz, "toJSON", toJSON_default);
@@ -6963,6 +6971,12 @@ function __decorate(decorators, target, key, desc) {
 	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
+var X$2 = class {
+	test() {
+		return true;
+	}
+};
+__decorate([bound_default()], X$2.prototype, "test", null);
 var BlobResponse = class BlobResponse {
 	get blob() {
 		return this.#blob;
@@ -7075,7 +7089,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 		const defaultFilename = `download-${DateTime.now().toFormat("yyyy-MM-dd HH-mm-ss")}`;
 		if (!header.startsWith("attachment")) return defaultFilename;
 		const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(header);
-		if ((matches?.length || 0) < 2) return defaultFilename;
+		if (!matches || matches.length < 2) return defaultFilename;
 		return matches[1].replaceAll("'", "").replaceAll("\"", "").replaceAll("/", "-").replaceAll(":", "-");
 	}
 	static parseRequestError(data, statusCode) {
@@ -7083,12 +7097,7 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 	}
 	static parseValidationError(data) {
 		let errors;
-		if (data.errors) {
-			errors = {};
-			Object.entries(data.errors).forEach(([key, value]) => {
-				errors[key] = _HttpAdapter.parseValidationError(value);
-			});
-		}
+		if (data.errors) errors = Object.fromEntries(Object.entries(data.errors).map(([key, value]) => [key, _HttpAdapter.parseValidationError(value)]));
 		return new ValidationError_default(data.code, data.error, data.error_description, errors, data.params);
 	}
 };
@@ -7195,7 +7204,7 @@ function ye$1(e, t, n) {
 	onScopeDispose(o);
 }
 //#endregion
-//#region ../internals/dist/composable-5ooZTjm_.js
+//#region ../internals/dist/composable-BLswOqxr.js
 function _$1(e, t) {
 	let n = ref(!1), r = ref(e), i = computed(() => {
 		let e = [], t = unref(r).month, n = unref(r).startOf(`month`);
@@ -7401,11 +7410,13 @@ function O$1(t, n = {}) {
 function k$1(e, t) {
 	let n = `flux/${e}`, r = ref(i() ?? t);
 	function i() {
-		if (n in localStorage) {
+		if (!(n in localStorage)) return null;
+		try {
 			let e = JSON.parse(localStorage.getItem(n));
 			return Array.isArray(e) && e[0] === `DateTime` && (e = DateTime.fromISO(e[1])), e;
+		} catch {
+			return null;
 		}
-		return null;
 	}
 	return watch(r, (e) => {
 		let t = e;
@@ -7682,779 +7693,403 @@ var FluxIcon_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
-//#region src/component/FluxPressable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$61 = [
-	"href",
-	"rel",
-	"target"
-];
-//#endregion
-//#region src/component/FluxPressable.vue
-var FluxPressable_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxPressable",
-	props: {
-		componentType: {},
-		href: {},
-		rel: {},
-		target: {},
-		to: {}
-	},
-	emits: [
-		"click",
-		"mouseenter",
-		"mouseleave"
-	],
-	setup(__props, { emit: __emit, attrs: $attrs }) {
-		const emit = __emit;
-		const hoverListeners = {
-			onMouseenter: (evt) => emit("mouseenter", evt),
-			onMouseleave: (evt) => emit("mouseleave", evt)
-		};
-		function onClick(evt, navigate) {
-			emit("click", evt);
-			if (evt.defaultPrevented) return;
-			navigate?.(evt);
-		}
-		return (_ctx, _cache) => {
-			const _component_router_link = resolveComponent("router-link");
-			return __props.componentType === "route" ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, $attrs, toHandlers(hoverListeners), {
-				rel: __props.rel,
-				target: __props.target,
-				to: __props.to,
-				onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
-			}), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16, [
-				"rel",
-				"target",
-				"to"
-			])) : __props.componentType === "link" ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, $attrs, toHandlers(hoverListeners, true), {
-				href: __props.href,
-				rel: __props.rel,
-				target: __props.target,
-				onClick: _cache[1] || (_cache[1] = ($event) => onClick($event))
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$61)) : __props.componentType === "button" ? (openBlock(), createElementBlock("button", mergeProps({ key: 2 }, $attrs, toHandlers(hoverListeners, true), { onClick: _cache[2] || (_cache[2] = ($event) => onClick($event)) }), [renderSlot(_ctx.$slots, "default")], 16)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, $attrs, toHandlers(hoverListeners, true), { onClick }), [renderSlot(_ctx.$slots, "default")], 16));
-		};
-	}
-});
-var Spinner_module_default = {
-	spinner: `spinner`,
-	spinnerTrack: `spinner-track`,
-	spinnerEffect: `spinner-effect`,
-	spinnerValue: `spinner-value`
+var Overlay_module_default = {
+	overlayView: `overlay-view`,
+	overlayProvider: `overlay-provider overlay-view`,
+	overlayShade: `overlay-shade overlay-view`,
+	overlay: `overlay`,
+	overlayTransitionLeaveActive: `overlay-transition-leave-active`,
+	slideOverTransitionLeaveActive: `slide-over-transition-leave-active`,
+	basePaneStructure: `base-pane-structure`,
+	paneFooter: `pane-footer`,
+	isCurrent: `is-current`,
+	overlaySmall: `overlay-small overlay`,
+	overlayMedium: `overlay-medium overlay`,
+	overlayLarge: `overlay-large overlay`,
+	slideOver: `slide-over overlay`,
+	paneHeader: `pane-header`,
+	tabs: `tabs`,
+	tabBarDefault: `tab-bar-default`,
+	paneHeaderCaption: `pane-header-caption`,
+	overlayTransitionEnterActive: `overlay-transition-enter-active`,
+	overlayTransitionEnterFrom: `overlay-transition-enter-from`,
+	overlayTransitionLeaveTo: `overlay-transition-leave-to`,
+	slideOverTransitionEnterActive: `slide-over-transition-enter-active`,
+	slideOverTransitionEnterFrom: `slide-over-transition-enter-from`,
+	slideOverTransitionLeaveTo: `slide-over-transition-leave-to`
 };
 //#endregion
-//#region src/component/FluxSpinner.vue
-var FluxSpinner_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxSpinner",
-	props: { size: {} },
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", {
-				class: normalizeClass(unref(Spinner_module_default).spinner),
-				viewBox: "0 0 24 24",
-				style: normalizeStyle({ fontSize: __props.size && `${__props.size}px` })
-			}, [
-				createElementVNode("circle", {
-					class: normalizeClass(unref(Spinner_module_default).spinnerTrack),
-					cx: "12",
-					cy: "12",
-					r: "10",
-					fill: "transparent",
-					"stroke-width": "4"
-				}, null, 2),
-				createElementVNode("circle", {
-					class: normalizeClass(unref(Spinner_module_default).spinnerEffect),
-					cx: "12",
-					cy: "12",
-					r: "10",
-					fill: "transparent",
-					"stroke-width": "4",
-					"stroke-dasharray": "21 45",
-					"stroke-dashoffset": "30",
-					"stroke-linecap": "round"
-				}, null, 2),
-				createElementVNode("circle", {
-					class: normalizeClass(unref(Spinner_module_default).spinnerValue),
-					cx: "12",
-					cy: "12",
-					r: "10",
-					fill: "transparent",
-					"stroke-width": "4",
-					"stroke-dasharray": "21 45",
-					"stroke-dashoffset": "30",
-					"stroke-linecap": "round"
-				}, null, 2)
-			], 6);
-		};
+//#region src/util/createDialogRenderer.ts
+var TARGET_SELECTOR = `.${Overlay_module_default.overlayProvider.replaceAll(" ", ".")}`;
+var DIALOG_ID = 0;
+function createDialogRenderer_default(attrs, props, emit, slots, className, transition) {
+	const dialogId = `flux-dialog:${DIALOG_ID++}`;
+	let unregister = null;
+	let zIndex = 0;
+	const dialogRef = ref();
+	F$1(dialogRef);
+	onUnmounted(() => {
+		unregister?.();
+	});
+	watch(dialogRef, (dialog, _, onCleanup) => {
+		if (!dialog) return;
+		dialog.addEventListener("keydown", onKeyDown, { passive: true });
+		onCleanup(() => {
+			dialog.removeEventListener("keydown", onKeyDown);
+		});
+	});
+	function onKeyDown(evt) {
+		if (evt.key !== "Escape" || !unregister || !props.isCloseable) return;
+		emit("close");
 	}
-});
-var Button_module_default$1 = {
-	button: `button`,
-	isSmall: `is-small`,
-	isMedium: `is-medium`,
-	isLarge: `is-large`,
-	isXl: `is-xl`,
-	isFilled: `is-filled`,
-	spinner: `spinner`,
-	buttonIcon: `button-icon`,
-	buttonLabel: `button-label`,
-	badge: `badge`
-};
+	return () => {
+		const { dialogCount } = useFluxStore();
+		const children = a$2(slots.default?.() ?? []);
+		const isVisible = children.length > 0 && children.some((child) => child.type !== Comment);
+		let content;
+		if (isVisible) {
+			if (!unregister) [zIndex, unregister] = registerDialog();
+			content = h("div", {
+				key: props.viewKey ?? dialogId,
+				ref: dialogRef,
+				class: [className, zIndex === dialogCount && Overlay_module_default.isCurrent],
+				style: { zIndex: zIndex + 1e3 },
+				tabindex: 0
+			}, children);
+		} else {
+			unregister?.();
+			unregister = null;
+		}
+		return h(Teleport, {
+			defer: true,
+			disabled: !content,
+			to: TARGET_SELECTOR
+		}, [h(transition, attrs, { default: () => content })]);
+	};
+}
 //#endregion
-//#region src/component/FluxButton.vue?vue&type=script&setup=true&lang.ts
-var SLOTS = [
-	"default",
-	"after",
-	"before",
-	"iconLeading",
-	"iconTrailing",
-	"label"
-];
+//#region src/composable/private/useAsyncFilterOptions.ts
+function useAsyncFilterOptions_default(params) {
+	const { isLoading, loaded } = X$1();
+	const debouncedModelSearch = Y$1(params.modelSearch, 150);
+	const fetchOptions = computed(() => loaded(params.fetchOptions));
+	const fetchRelevant = computed(() => loaded(params.fetchRelevant));
+	const fetchSearch = computed(() => loaded(params.fetchSearch));
+	const selectedOptions = ref([]);
+	const visibleOptions = ref([]);
+	const options = computed(() => {
+		const options = [];
+		const search = unref(params.modelSearch);
+		const selected = unref(selectedOptions);
+		const visible = unref(visibleOptions);
+		visible.forEach((vo) => options.push(vo));
+		selected.forEach((so) => {
+			if (isFluxFilterOptionItem(so) && visible.find((vo) => isFluxFilterOptionItem(vo) && vo.value === so.value)) return;
+			if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) return;
+			options.push(so);
+		});
+		return options;
+	});
+	watch(params.currentValueIds, async (ids) => {
+		if (ids.length === 0) return;
+		selectedOptions.value = await unref(fetchOptions)(ids);
+	}, { immediate: true });
+	watch(debouncedModelSearch, async (searchQuery) => {
+		if (searchQuery.length > 0) visibleOptions.value = await unref(fetchSearch)(searchQuery);
+		else visibleOptions.value = await unref(fetchRelevant)();
+	}, { immediate: true });
+	return {
+		isLoading,
+		options
+	};
+}
 //#endregion
-//#region src/component/FluxButton.vue
-var FluxButton_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxButton",
-	props: {
-		type: { default: "button" },
-		disabled: { type: Boolean },
-		iconLeading: {},
-		iconTrailing: {},
-		isFilled: { type: Boolean },
-		isLoading: { type: Boolean },
-		isSubmit: { type: Boolean },
-		label: {},
-		size: { default: "medium" },
-		tabindex: { default: 0 },
-		href: {},
-		rel: {},
-		target: {},
-		to: {},
-		cssClass: {},
-		cssClassIcon: {},
-		cssClassLabel: {}
-	},
-	emits: [
-		"click",
-		"mouseenter",
-		"mouseleave"
-	],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const disabled = useDisabled_default(toRef(() => __props.disabled));
-		function onClick(evt) {
-			if (unref(disabled) || __props.isLoading) {
-				evt.preventDefault();
-				evt.stopPropagation();
-				return;
-			}
-			emit("click", evt);
+//#region src/composable/private/useDateFlyout.ts
+function useDateFlyout_default(modelValue, flyoutRef, options = {}) {
+	const localValue = ref(null);
+	watch(modelValue, (value) => {
+		localValue.value = options.transformIn ? options.transformIn(value) : value;
+	}, { immediate: true });
+	watch(localValue, (value) => {
+		unref(flyoutRef)?.close();
+		if (options.compareKey && options.compareKey(modelValue.value) === options.compareKey(value)) return;
+		modelValue.value = value;
+	});
+	return localValue;
+}
+//#endregion
+//#region src/composable/private/useDropdownPopup.ts
+/**
+* Shared dropdown-popup infrastructure for select-like components. Manages:
+* - open/close state
+* - click-outside (close when clicking outside popup + anchor)
+* - focus-back-to-anchor on close
+* - focus-the-inner-focus-element on open
+* - Escape/Tab keyboard handling
+*/
+function useDropdownPopup(options) {
+	const isOpen = ref(false);
+	function open() {
+		if (unref(options.disabled) || unref(options.readonly)) return;
+		isOpen.value = true;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function toggle() {
+		if (unref(options.disabled) || unref(options.readonly)) return;
+		isOpen.value = !unref(isOpen);
+	}
+	function focusAnchor() {
+		nextTick(() => _$2(options.anchorRef)?.focus());
+	}
+	function onKeyDownBase(evt) {
+		if (evt.key === "Escape" && unref(isOpen)) {
+			evt.preventDefault();
+			isOpen.value = false;
+			focusAnchor();
+			return true;
 		}
-		function onMouseEnter(evt) {
-			emit("mouseenter", evt);
+		if (evt.key === "Tab" && unref(isOpen)) {
+			isOpen.value = false;
+			return true;
 		}
-		function onMouseLeave(evt) {
-			emit("mouseleave", evt);
+		return false;
+	}
+	if (typeof window !== "undefined") {
+		K$1([options.anchorRef, options.popupRef], isOpen, () => isOpen.value = false);
+		K$1(options.anchorRef, isOpen, () => unref(options.focusElement)?.focus());
+	}
+	watch(isOpen, (opened) => {
+		if (!opened) {
+			options.onClose?.();
+			return;
 		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxPressable_default, {
-				"component-type": __props.type,
-				class: normalizeClass(unref(clsx)(__props.cssClass, __props.isFilled && unref(Button_module_default$1).isFilled, __props.size === "small" && unref(Button_module_default$1).isSmall, __props.size === "medium" && unref(Button_module_default$1).isMedium, __props.size === "large" && unref(Button_module_default$1).isLarge, __props.size === "xl" && unref(Button_module_default$1).isXl)),
-				type: __props.isSubmit ? "submit" : "button",
-				"aria-disabled": unref(disabled) ? true : void 0,
-				disabled: unref(disabled) ? true : void 0,
-				tabindex: unref(disabled) ? -1 : __props.tabindex,
-				href: __props.href,
-				rel: __props.rel,
-				target: __props.target,
-				to: __props.to,
-				onClick,
-				onMouseenter: onMouseEnter,
-				onMouseleave: onMouseLeave
-			}, {
-				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "before"),
-					renderSlot(_ctx.$slots, "iconLeading", {}, () => [__props.isLoading && (__props.iconLeading || !__props.iconTrailing) ? (openBlock(), createBlock(FluxSpinner_default, {
-						key: 0,
-						size: 20
-					})) : __props.iconLeading ? (openBlock(), createBlock(FluxIcon_default, {
-						key: 1,
-						class: normalizeClass(__props.cssClassIcon),
-						name: __props.iconLeading
-					}, null, 8, ["class", "name"])) : createCommentVNode("", true)]),
-					renderSlot(_ctx.$slots, "label", {}, () => [__props.label ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(__props.cssClassLabel)
-					}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)]),
-					renderSlot(_ctx.$slots, "iconTrailing", {}, () => [__props.isLoading && !__props.iconLeading && __props.iconTrailing ? (openBlock(), createBlock(FluxSpinner_default, {
-						key: 0,
-						size: 20
-					})) : __props.iconTrailing ? (openBlock(), createBlock(FluxIcon_default, {
-						key: 1,
-						class: normalizeClass(__props.cssClassIcon),
-						name: __props.iconTrailing
-					}, null, 8, ["class", "name"])) : createCommentVNode("", true)]),
-					renderSlot(_ctx.$slots, "after")
-				]),
-				_: 3
-			}, 8, [
-				"component-type",
-				"class",
-				"type",
-				"aria-disabled",
-				"disabled",
-				"tabindex",
-				"href",
-				"rel",
-				"target",
-				"to"
-			]);
+		nextTick(() => unref(options.focusElement)?.focus());
+		options.onOpen?.();
+	});
+	return {
+		isOpen,
+		open,
+		close,
+		toggle,
+		focusAnchor,
+		onKeyDownBase
+	};
+}
+//#endregion
+//#region src/composable/private/useFormSelect.ts
+function useFormSelect_default(modelValue, isMultiple, options, searchQuery) {
+	const values = computed(() => {
+		const model = unref(modelValue);
+		return Array.isArray(model) ? model : [model];
+	});
+	const groups = computed(() => {
+		const groups = [];
+		const search = unref(searchQuery)?.trim().toLowerCase();
+		const available = unref(options).filter((o) => isFluxFormSelectGroup(o) || !search || o.label.toLowerCase().includes(search)).filter((o) => isFluxFormSelectGroup(o) || !isMultiple || !unref(selected).find((s) => s.value === o.value));
+		if (available.length === 0) return [];
+		if (!available.find(isFluxFormSelectGroup)) return [[null, available]];
+		for (let i = 0; i < available.length;) {
+			const item = available[i];
+			if (isFluxFormSelectOption(item)) {
+				++i;
+				groups.push([null, [item]]);
+				continue;
+			}
+			const subItems = [];
+			for (++i; i <= available.length; ++i) {
+				const subItem = available[i];
+				if (isFluxFormSelectGroup(subItem) || i === available.length) {
+					if (subItems.length > 0) groups.push([item, subItems]);
+					break;
+				}
+				subItems.push(subItem);
+			}
+		}
+		return groups;
+	});
+	const selected = computed(() => unref(values).map((v) => unref(options).find((o) => isFluxFormSelectOption(o) && o.value === v)).filter(isFluxFormSelectOption));
+	return {
+		groups,
+		selected,
+		values
+	};
+}
+//#endregion
+//#region src/composable/private/useKanbanAutoScroll.ts
+var AUTOSCROLL_ZONE = 40;
+var AUTOSCROLL_MAX_SPEED = 12;
+/**
+* Drives horizontal (board) and vertical (column body) auto-scroll while a drag
+* is in progress. Reads the active scroll containers via the option callbacks.
+*/
+function useKanbanAutoScroll(options) {
+	let frame = null;
+	let deltaX = 0;
+	let deltaY = 0;
+	let verticalTarget = null;
+	function onPointerMove(clientX, clientY) {
+		const board = options.getBoardElement();
+		const target = options.getVerticalTarget();
+		deltaX = board ? computeScrollDelta(board.getBoundingClientRect(), clientX, "horizontal") : 0;
+		deltaY = target ? computeScrollDelta(target.getBoundingClientRect(), clientY, "vertical") : 0;
+		verticalTarget = target;
+		if (deltaX !== 0 || deltaY !== 0) start();
+		else stop();
+	}
+	function start() {
+		if (frame !== null) return;
+		const tick = () => {
+			const board = options.getBoardElement();
+			if (deltaX !== 0 && board) board.scrollLeft += deltaX;
+			if (deltaY !== 0 && verticalTarget) verticalTarget.scrollTop += deltaY;
+			if (deltaX === 0 && deltaY === 0) {
+				frame = null;
+				return;
+			}
+			frame = requestAnimationFrame(tick);
 		};
+		frame = requestAnimationFrame(tick);
 	}
-});
+	function stop() {
+		if (frame !== null) {
+			cancelAnimationFrame(frame);
+			frame = null;
+		}
+		deltaX = 0;
+		deltaY = 0;
+		verticalTarget = null;
+	}
+	return {
+		onPointerMove,
+		stop
+	};
+}
+function computeScrollDelta(rect, position, axis) {
+	const start = axis === "horizontal" ? rect.left : rect.top;
+	const end = axis === "horizontal" ? rect.right : rect.bottom;
+	if (position < start + AUTOSCROLL_ZONE) {
+		const distance = Math.max(0, position - start);
+		return -Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+	}
+	if (position > end - AUTOSCROLL_ZONE) {
+		const distance = Math.max(0, end - position);
+		return Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+	}
+	return 0;
+}
 //#endregion
-//#region src/css/component/Action.module.scss
-var { "buttonIcon": _0$15, "buttonLabel": _1$6, "button": _2$5 } = Button_module_default$1;
-var Action_module_default = {
-	action: `action ${_2$5}`,
-	spinner: `spinner`,
-	actionIcon: `action-icon ${_0$15}`,
-	isDestructive: `is-destructive`,
-	actionLabel: `action-label ${_1$6}`,
-	actionBar: `action-bar`,
-	separator: `separator`,
-	formInput: `form-input`,
-	basePaneStructure: `base-pane-structure`,
-	actionPane: `action-pane`,
-	actionPaneGrid: `action-pane-grid`,
-	actionPaneBody: `action-pane-body`,
-	paneBody: `pane-body`
+//#region src/composable/private/useKanban.ts
+var DRAG_LEAVE_GRACE_MS = 50;
+var WITHIN_COLUMN_DELTA = {
+	up: -1,
+	down: 1
 };
-//#endregion
-//#region src/component/FluxAction.vue
-var FluxAction_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAction",
-	props: {
-		type: {},
-		disabled: { type: Boolean },
-		isLoading: { type: Boolean },
-		isSubmit: { type: Boolean },
-		label: {},
-		tabindex: {},
-		href: {},
-		rel: {},
-		target: {},
-		to: {},
-		icon: {},
-		isDestructive: { type: Boolean }
-	},
-	emits: [
-		"click",
-		"mouseenter",
-		"mouseleave"
-	],
-	setup(__props, { emit: $emit }) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxButton_default, mergeProps({
-				disabled: __props.disabled,
-				isLoading: __props.isLoading,
-				label: __props.label,
-				href: __props.href,
-				rel: __props.rel,
-				target: __props.target,
-				to: __props.to,
-				type: __props.type
-			}, {
-				"css-class": unref(Action_module_default).action,
-				"css-class-icon": unref(Action_module_default).actionIcon,
-				"css-class-label": unref(Action_module_default).actionLabel,
-				class: __props.isDestructive && unref(Action_module_default).isDestructive,
-				"icon-leading": __props.icon,
-				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
-				onMouseenter: _cache[1] || (_cache[1] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[2] || (_cache[2] = ($event) => $emit("mouseleave", $event))
-			}), null, 16, [
-				"css-class",
-				"css-class-icon",
-				"css-class-label",
-				"class",
-				"icon-leading"
-			]);
-		};
-	}
-});
-var Overlay_module_default = {
-	overlayView: `overlay-view`,
-	overlayProvider: `overlay-provider overlay-view`,
-	overlayShade: `overlay-shade overlay-view`,
-	overlay: `overlay`,
-	overlayTransitionLeaveActive: `overlay-transition-leave-active`,
-	slideOverTransitionLeaveActive: `slide-over-transition-leave-active`,
-	basePaneStructure: `base-pane-structure`,
-	paneFooter: `pane-footer`,
-	isCurrent: `is-current`,
-	overlaySmall: `overlay-small overlay`,
-	overlayMedium: `overlay-medium overlay`,
-	overlayLarge: `overlay-large overlay`,
-	slideOver: `slide-over overlay`,
-	paneHeader: `pane-header`,
-	tabs: `tabs`,
-	tabBarDefault: `tab-bar-default`,
-	paneHeaderCaption: `pane-header-caption`,
-	overlayTransitionEnterActive: `overlay-transition-enter-active`,
-	overlayTransitionEnterFrom: `overlay-transition-enter-from`,
-	overlayTransitionLeaveTo: `overlay-transition-leave-to`,
-	slideOverTransitionEnterActive: `slide-over-transition-enter-active`,
-	slideOverTransitionEnterFrom: `slide-over-transition-enter-from`,
-	slideOverTransitionLeaveTo: `slide-over-transition-leave-to`
+var ACROSS_COLUMN_DELTA = {
+	left: -1,
+	right: 1
 };
-//#endregion
-//#region src/util/createDialogRenderer.ts
-var TARGET_SELECTOR = `.${Overlay_module_default.overlayProvider.replaceAll(" ", ".")}`;
-var DIALOG_ID = 0;
-function createDialogRenderer_default(attrs, props, emit, slots, className, transition) {
-	const dialogId = `flux-dialog:${DIALOG_ID++}`;
-	let unregister = null;
-	let zIndex = 0;
-	const dialogRef = ref();
-	F$1(dialogRef);
-	onUnmounted(() => {
-		unregister?.();
+/**
+* Internal composable for managing kanban drag-and-drop state.
+* Provides item registration, drag tracking, drop target management,
+* keyboard drag-and-drop, column reordering, drop validation and auto-scroll.
+*/
+function useKanban(options) {
+	const dragState = ref(null);
+	const columnDragState = ref(null);
+	const isOverColumnId = ref(null);
+	const itemRegistry = /* @__PURE__ */ new WeakMap();
+	const itemElementsById = /* @__PURE__ */ new Map();
+	const columnRegistry = /* @__PURE__ */ new WeakMap();
+	const columnElementsById = /* @__PURE__ */ new Map();
+	const columnBodyById = /* @__PURE__ */ new Map();
+	const dragEnterCounts = /* @__PURE__ */ new Map();
+	let boardElement = null;
+	let clearTimer = null;
+	const autoScroll = useKanbanAutoScroll({
+		getBoardElement: () => boardElement,
+		getVerticalTarget: () => {
+			const state = unref(dragState);
+			return state && state.dropColumnId !== null ? columnBodyById.get(state.dropColumnId) ?? null : null;
+		}
 	});
-	watch(dialogRef, (dialog, _, onCleanup) => {
-		if (!dialog) return;
-		dialog.addEventListener("keydown", onKeyDown, { passive: true });
-		onCleanup(() => {
-			dialog.removeEventListener("keydown", onKeyDown);
-		});
+	const grabbedId = computed(() => {
+		const state = unref(dragState);
+		return state !== null && state.mode === "keyboard" ? state.itemId : null;
 	});
-	function onKeyDown(evt) {
-		if (evt.key !== "Escape" || !unregister || !props.isCloseable) return;
-		emit("close");
+	const currentMoveEvent = computed(() => tryBuildMoveEvent(unref(dragState)));
+	const isDropAllowed = computed(() => {
+		const event = unref(currentMoveEvent);
+		return event === null || validateMove(event);
+	});
+	function tryBuildMoveEvent(state) {
+		if (!state || state.dropColumnId === null) return null;
+		return {
+			itemId: state.itemId,
+			fromColumnId: state.fromColumnId,
+			toColumnId: state.dropColumnId,
+			beforeItemId: state.beforeItemId ?? void 0
+		};
 	}
-	return () => {
-		const { dialogCount } = useFluxStore();
-		const children = a$2(slots.default?.() ?? []);
-		const isVisible = children.length > 0 && children.some((child) => child.type !== Comment);
-		let content;
-		if (isVisible) {
-			if (!unregister) [zIndex, unregister] = registerDialog();
-			content = h("div", {
-				key: props.viewKey ?? dialogId,
-				ref: dialogRef,
-				class: [className, zIndex === dialogCount && Overlay_module_default.isCurrent],
-				style: { zIndex: zIndex + 1e3 },
-				tabindex: 0
-			}, children);
-		} else {
-			unregister?.();
-			unregister = null;
+	function validateMove(event) {
+		const validate = unref(options.canMove);
+		return validate ? validate(event) : true;
+	}
+	function clearTimerIfAny() {
+		if (clearTimer !== null) {
+			clearTimeout(clearTimer);
+			clearTimer = null;
 		}
-		return h(Teleport, {
-			defer: true,
-			disabled: !content,
-			to: TARGET_SELECTOR
-		}, [h(transition, attrs, { default: () => content })]);
-	};
-}
-//#endregion
-//#region src/util/createLabelForDateRange.ts
-function createLabelForDateRange_default(start, end, preventCustom = false) {
-	const translate = useTranslate_default();
-	if (start.day === end.day && start.month === end.month && start.year === end.year) return start.toLocaleString({
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	});
-	if (start.month === end.month && start.year === end.year) return `${start.toLocaleString({ day: "numeric" })} – ${end.toLocaleString({
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	})}`;
-	if (start.year === end.year) return `${start.toLocaleString({
-		day: "numeric",
-		month: "short"
-	})} – ${end.toLocaleString({
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	})}`;
-	if (preventCustom) return `${start.toLocaleString({
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	})} – ${end.toLocaleString({
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	})}`;
-	return translate("flux.customPeriod");
-}
-//#endregion
-//#region src/util/defineFilter.ts
-function defineFilter(factory) {
-	return factory;
-}
-//#endregion
-//#region src/util/filter.ts
-function isFluxFilterOptionHeader(obj) {
-	return "title" in obj;
-}
-function isFluxFilterOptionItem(obj) {
-	return "label" in obj && "value" in obj;
-}
-function isResettable(definition, value) {
-	if (!definition || definition.defaultValue === void 0) return false;
-	return !isFilterValueEqual(value, definition.defaultValue);
-}
-function isFilterValueEqual(a, b) {
-	if (a === b) return true;
-	if (DateTime.isDateTime(a) && DateTime.isDateTime(b)) return a.equals(b);
-	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((value, index) => isFilterValueEqual(value, b[index]));
-	return false;
-}
-function pickFilterCommon(props) {
-	return {
-		name: props.name,
-		label: props.label,
-		icon: props.icon,
-		disabled: props.disabled,
-		defaultValue: props.defaultValue,
-		onChange: props.onChange,
-		onClear: props.onClear
-	};
-}
-function generateMultiOptionsLabel(translate, options, values) {
-	const selected = options.filter((o) => values.includes(o.value)).length;
-	if (selected <= 0) return null;
-	if (selected === 1) return options.find((o) => values.includes(o.value)).label;
-	return translate("flux.nSelected", { n: selected });
-}
-//#endregion
-//#region src/composable/private/useAsyncFilterOptions.ts
-function useAsyncFilterOptions_default(params) {
-	const { isLoading, loaded } = X$1();
-	const debouncedModelSearch = Y$1(params.modelSearch, 150);
-	const fetchOptions = computed(() => loaded(params.fetchOptions));
-	const fetchRelevant = computed(() => loaded(params.fetchRelevant));
-	const fetchSearch = computed(() => loaded(params.fetchSearch));
-	const selectedOptions = ref([]);
-	const visibleOptions = ref([]);
-	const options = computed(() => {
-		const options = [];
-		const search = unref(params.modelSearch);
-		const selected = unref(selectedOptions);
-		const visible = unref(visibleOptions);
-		visible.forEach((vo) => options.push(vo));
-		selected.forEach((so) => {
-			if (isFluxFilterOptionItem(so) && visible.find((vo) => isFluxFilterOptionItem(vo) && vo.value === so.value)) return;
-			if (isFluxFilterOptionItem(so) && !so.label.toLowerCase().includes(search.toLowerCase())) return;
-			options.push(so);
-		});
-		return options;
-	});
-	watch(params.currentValueIds, async (ids) => {
-		if (ids.length === 0) return;
-		selectedOptions.value = await unref(fetchOptions)(ids);
-	}, { immediate: true });
-	watch(debouncedModelSearch, async (searchQuery) => {
-		if (searchQuery.length > 0) visibleOptions.value = await unref(fetchSearch)(searchQuery);
-		else visibleOptions.value = await unref(fetchRelevant)();
-	}, { immediate: true });
-	return {
-		isLoading,
-		options
-	};
-}
-//#endregion
-//#region src/composable/private/useDateFlyout.ts
-function useDateFlyout_default(modelValue, flyoutRef, options = {}) {
-	const localValue = ref(null);
-	watch(modelValue, (value) => {
-		localValue.value = options.transformIn ? options.transformIn(value) : value;
-	}, { immediate: true });
-	watch(localValue, (value) => {
-		unref(flyoutRef)?.close();
-		if (options.compareKey && options.compareKey(modelValue.value) === options.compareKey(value)) return;
-		modelValue.value = value;
-	});
-	return localValue;
-}
-//#endregion
-//#region src/composable/private/useDropdownPopup.ts
-/**
-* Shared dropdown-popup infrastructure for select-like components. Manages:
-* - open/close state
-* - click-outside (close when clicking outside popup + anchor)
-* - focus-back-to-anchor on close
-* - focus-the-inner-focus-element on open
-* - Escape/Tab keyboard handling
-*/
-function useDropdownPopup(options) {
-	const isOpen = ref(false);
-	function open() {
-		if (unref(options.disabled) || unref(options.readonly)) return;
-		isOpen.value = true;
 	}
-	function close() {
-		isOpen.value = false;
+	function isSelfDrop(state) {
+		return state.fromColumnId === state.dropColumnId && state.beforeItemId === (state.originBeforeItemId ?? null);
 	}
-	function toggle() {
-		if (unref(options.disabled) || unref(options.readonly)) return;
-		isOpen.value = !unref(isOpen);
+	function getColumnIndex(columnId) {
+		if (!boardElement) return -1;
+		return Array.from(boardElement.children).filter((child) => columnRegistry.has(child)).findIndex((elm) => columnRegistry.get(elm)?.columnId === columnId);
 	}
-	function focusAnchor() {
-		nextTick(() => _$2(options.anchorRef)?.focus());
+	function getColumnByIndex(index) {
+		if (!boardElement) return null;
+		const elm = Array.from(boardElement.children).filter((child) => columnRegistry.has(child))[index];
+		return elm ? columnRegistry.get(elm) : null;
 	}
-	function onKeyDownBase(evt) {
-		if (evt.key === "Escape" && unref(isOpen)) {
-			evt.preventDefault();
-			isOpen.value = false;
-			focusAnchor();
-			return true;
-		}
-		if (evt.key === "Tab" && unref(isOpen)) {
-			isOpen.value = false;
-			return true;
-		}
-		return false;
+	function getItemsInColumn(columnId) {
+		const body = columnBodyById.get(columnId);
+		if (!body) return [];
+		return Array.from(body.children).map((child) => itemRegistry.get(child)?.itemId).filter((id) => id !== void 0);
 	}
-	if (typeof window !== "undefined") {
-		K$1([options.anchorRef, options.popupRef], isOpen, () => isOpen.value = false);
-		K$1(options.anchorRef, isOpen, () => unref(options.focusElement)?.focus());
+	function registerItem(element, itemId) {
+		itemRegistry.set(element, { itemId });
+		itemElementsById.set(itemId, element);
 	}
-	watch(isOpen, (opened) => {
-		if (!opened) {
-			options.onClose?.();
-			return;
-		}
-		nextTick(() => unref(options.focusElement)?.focus());
-		options.onOpen?.();
-	});
-	return {
-		isOpen,
-		open,
-		close,
-		toggle,
-		focusAnchor,
-		onKeyDownBase
-	};
-}
-//#endregion
-//#region src/composable/private/useFormSelect.ts
-function useFormSelect_default(modelValue, isMultiple, options, searchQuery) {
-	const values = computed(() => {
-		const model = unref(modelValue);
-		return Array.isArray(model) ? model : [model];
-	});
-	const groups = computed(() => {
-		const groups = [];
-		const search = unref(searchQuery)?.trim().toLowerCase();
-		const available = unref(options).filter((o) => isFluxFormSelectGroup(o) || !search || o.label.toLowerCase().includes(search)).filter((o) => isFluxFormSelectGroup(o) || !isMultiple || !unref(selected).find((s) => s.value === o.value));
-		if (available.length === 0) return [];
-		if (!available.find(isFluxFormSelectGroup)) return [[null, available]];
-		for (let i = 0; i < available.length;) {
-			const item = available[i];
-			if (isFluxFormSelectOption(item)) {
-				++i;
-				groups.push([null, [item]]);
-				continue;
-			}
-			const subItems = [];
-			for (++i; i <= available.length; ++i) {
-				const subItem = available[i];
-				if (isFluxFormSelectGroup(subItem) || i === available.length) {
-					if (subItems.length > 0) groups.push([item, subItems]);
-					break;
-				}
-				subItems.push(subItem);
-			}
-		}
-		return groups;
-	});
-	const selected = computed(() => unref(values).map((v) => unref(options).find((o) => isFluxFormSelectOption(o) && o.value === v)).filter(isFluxFormSelectOption));
-	return {
-		groups,
-		selected,
-		values
-	};
-}
-//#endregion
-//#region src/composable/private/useKanbanAutoScroll.ts
-var AUTOSCROLL_ZONE = 40;
-var AUTOSCROLL_MAX_SPEED = 12;
-/**
-* Drives horizontal (board) and vertical (column body) auto-scroll while a drag
-* is in progress. Reads the active scroll containers via the option callbacks.
-*/
-function useKanbanAutoScroll(options) {
-	let frame = null;
-	let deltaX = 0;
-	let deltaY = 0;
-	let verticalTarget = null;
-	function onPointerMove(clientX, clientY) {
-		const board = options.getBoardElement();
-		const target = options.getVerticalTarget();
-		deltaX = board ? computeScrollDelta(board.getBoundingClientRect(), clientX, "horizontal") : 0;
-		deltaY = target ? computeScrollDelta(target.getBoundingClientRect(), clientY, "vertical") : 0;
-		verticalTarget = target;
-		if (deltaX !== 0 || deltaY !== 0) start();
-		else stop();
+	function unregisterItem(element) {
+		const info = itemRegistry.get(element);
+		if (info) itemElementsById.delete(info.itemId);
+		itemRegistry.delete(element);
 	}
-	function start() {
-		if (frame !== null) return;
-		const tick = () => {
-			const board = options.getBoardElement();
-			if (deltaX !== 0 && board) board.scrollLeft += deltaX;
-			if (deltaY !== 0 && verticalTarget) verticalTarget.scrollTop += deltaY;
-			if (deltaX === 0 && deltaY === 0) {
-				frame = null;
-				return;
-			}
-			frame = requestAnimationFrame(tick);
-		};
-		frame = requestAnimationFrame(tick);
+	function getItemInfo(element) {
+		return itemRegistry.get(element);
 	}
-	function stop() {
-		if (frame !== null) {
-			cancelAnimationFrame(frame);
-			frame = null;
+	function registerColumn(element, columnId) {
+		columnRegistry.set(element, { columnId });
+		columnElementsById.set(columnId, element);
+	}
+	function unregisterColumn(element) {
+		const info = columnRegistry.get(element);
+		if (info) {
+			columnElementsById.delete(info.columnId);
+			columnBodyById.delete(info.columnId);
+			dragEnterCounts.delete(info.columnId);
+			if (isOverColumnId.value === info.columnId) isOverColumnId.value = null;
 		}
-		deltaX = 0;
-		deltaY = 0;
-		verticalTarget = null;
+		columnRegistry.delete(element);
 	}
-	return {
-		onPointerMove,
-		stop
-	};
-}
-function computeScrollDelta(rect, position, axis) {
-	const start = axis === "horizontal" ? rect.left : rect.top;
-	const end = axis === "horizontal" ? rect.right : rect.bottom;
-	if (position < start + AUTOSCROLL_ZONE) {
-		const distance = Math.max(0, position - start);
-		return -Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+	function getColumnInfo(element) {
+		return columnRegistry.get(element);
 	}
-	if (position > end - AUTOSCROLL_ZONE) {
-		const distance = Math.max(0, end - position);
-		return Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
-	}
-	return 0;
-}
-//#endregion
-//#region src/composable/private/useKanban.ts
-var DRAG_LEAVE_GRACE_MS = 50;
-var WITHIN_COLUMN_DELTA = {
-	up: -1,
-	down: 1
-};
-var ACROSS_COLUMN_DELTA = {
-	left: -1,
-	right: 1
-};
-/**
-* Internal composable for managing kanban drag-and-drop state.
-* Provides item registration, drag tracking, drop target management,
-* keyboard drag-and-drop, column reordering, drop validation and auto-scroll.
-*/
-function useKanban(options) {
-	const dragState = ref(null);
-	const columnDragState = ref(null);
-	const isOverColumnId = ref(null);
-	const itemRegistry = /* @__PURE__ */ new WeakMap();
-	const itemElementsById = /* @__PURE__ */ new Map();
-	const columnRegistry = /* @__PURE__ */ new WeakMap();
-	const columnElementsById = /* @__PURE__ */ new Map();
-	const columnBodyById = /* @__PURE__ */ new Map();
-	const dragEnterCounts = /* @__PURE__ */ new Map();
-	let boardElement = null;
-	let clearTimer = null;
-	const autoScroll = useKanbanAutoScroll({
-		getBoardElement: () => boardElement,
-		getVerticalTarget: () => {
-			const state = unref(dragState);
-			return state && state.dropColumnId !== null ? columnBodyById.get(state.dropColumnId) ?? null : null;
-		}
-	});
-	const grabbedId = computed(() => {
-		const state = unref(dragState);
-		return state !== null && state.mode === "keyboard" ? state.itemId : null;
-	});
-	const currentMoveEvent = computed(() => tryBuildMoveEvent(unref(dragState)));
-	const isDropAllowed = computed(() => {
-		const event = unref(currentMoveEvent);
-		return event === null || validateMove(event);
-	});
-	function tryBuildMoveEvent(state) {
-		if (!state || state.dropColumnId === null) return null;
-		return {
-			itemId: state.itemId,
-			fromColumnId: state.fromColumnId,
-			toColumnId: state.dropColumnId,
-			beforeItemId: state.beforeItemId ?? void 0
-		};
-	}
-	function validateMove(event) {
-		const validate = unref(options.canMove);
-		return validate ? validate(event) : true;
-	}
-	function clearTimerIfAny() {
-		if (clearTimer !== null) {
-			clearTimeout(clearTimer);
-			clearTimer = null;
-		}
-	}
-	function isSelfDrop(state) {
-		return state.fromColumnId === state.dropColumnId && state.beforeItemId === (state.originBeforeItemId ?? null);
-	}
-	function getColumnIndex(columnId) {
-		if (!boardElement) return -1;
-		return Array.from(boardElement.children).filter((child) => columnRegistry.has(child)).findIndex((elm) => columnRegistry.get(elm)?.columnId === columnId);
-	}
-	function getColumnByIndex(index) {
-		if (!boardElement) return null;
-		const elm = Array.from(boardElement.children).filter((child) => columnRegistry.has(child))[index];
-		return elm ? columnRegistry.get(elm) : null;
-	}
-	function getItemsInColumn(columnId) {
-		const body = columnBodyById.get(columnId);
-		if (!body) return [];
-		return Array.from(body.children).map((child) => itemRegistry.get(child)?.itemId).filter((id) => id !== void 0);
-	}
-	function registerItem(element, itemId) {
-		itemRegistry.set(element, { itemId });
-		itemElementsById.set(itemId, element);
-	}
-	function unregisterItem(element) {
-		const info = itemRegistry.get(element);
-		if (info) itemElementsById.delete(info.itemId);
-		itemRegistry.delete(element);
-	}
-	function getItemInfo(element) {
-		return itemRegistry.get(element);
-	}
-	function registerColumn(element, columnId) {
-		columnRegistry.set(element, { columnId });
-		columnElementsById.set(columnId, element);
-	}
-	function unregisterColumn(element) {
-		const info = columnRegistry.get(element);
-		if (info) {
-			columnElementsById.delete(info.columnId);
-			columnBodyById.delete(info.columnId);
-			dragEnterCounts.delete(info.columnId);
-			if (isOverColumnId.value === info.columnId) isOverColumnId.value = null;
-		}
-		columnRegistry.delete(element);
-	}
-	function getColumnInfo(element) {
-		return columnRegistry.get(element);
-	}
-	function setBoardElement(element) {
-		boardElement = element;
+	function setBoardElement(element) {
+		boardElement = element;
 	}
 	function setColumnBodyElement(columnId, element) {
 		if (element) columnBodyById.set(columnId, element);
@@ -9271,48 +8906,456 @@ function useTreeView(params) {
 				return false;
 		}
 	}
-	watch(highlightedIndex, (index) => {
-		if (index < 0) return;
-		nextTick(() => unref(params.nodeElementRefs)?.[index]?.scrollIntoView({ block: "nearest" }));
-	});
-	watch(params.visibleNodes, (nodes) => {
-		if (unref(highlightedIndex) >= nodes.length) highlightedIndex.value = Math.max(-1, nodes.length - 1);
-	});
-	return {
-		highlightedIndex,
-		toggleExpand,
-		onExpandClick,
-		onKeyNavigate
-	};
-}
+	watch(highlightedIndex, (index) => {
+		if (index < 0) return;
+		nextTick(() => unref(params.nodeElementRefs)?.[index]?.scrollIntoView({ block: "nearest" }));
+	});
+	watch(params.visibleNodes, (nodes) => {
+		if (unref(highlightedIndex) >= nodes.length) highlightedIndex.value = Math.max(-1, nodes.length - 1);
+	});
+	return {
+		highlightedIndex,
+		toggleExpand,
+		onExpandClick,
+		onKeyNavigate
+	};
+}
+//#endregion
+//#region src/util/createLabelForDateRange.ts
+function createLabelForDateRange_default(start, end, preventCustom = false) {
+	const translate = useTranslate_default();
+	if (start.day === end.day && start.month === end.month && start.year === end.year) return start.toLocaleString({
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	});
+	if (start.month === end.month && start.year === end.year) return `${start.toLocaleString({ day: "numeric" })} – ${end.toLocaleString({
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	})}`;
+	if (start.year === end.year) return `${start.toLocaleString({
+		day: "numeric",
+		month: "short"
+	})} – ${end.toLocaleString({
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	})}`;
+	if (preventCustom) return `${start.toLocaleString({
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	})} – ${end.toLocaleString({
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	})}`;
+	return translate("flux.customPeriod");
+}
+//#endregion
+//#region src/util/defineFilter.ts
+function defineFilter(factory) {
+	return factory;
+}
+//#endregion
+//#region src/util/filter.ts
+function isFluxFilterOptionHeader(obj) {
+	return "title" in obj;
+}
+function isFluxFilterOptionItem(obj) {
+	return "label" in obj && "value" in obj;
+}
+function isResettable(definition, value) {
+	if (!definition || definition.defaultValue === void 0) return false;
+	return !isFilterValueEqual(value, definition.defaultValue);
+}
+function isFilterValueEqual(a, b) {
+	if (a === b) return true;
+	if (DateTime.isDateTime(a) && DateTime.isDateTime(b)) return a.equals(b);
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((value, index) => isFilterValueEqual(value, b[index]));
+	return false;
+}
+function pickFilterCommon(props) {
+	return {
+		name: props.name,
+		label: props.label,
+		icon: props.icon,
+		disabled: props.disabled,
+		defaultValue: props.defaultValue,
+		onChange: props.onChange,
+		onClear: props.onClear
+	};
+}
+function generateMultiOptionsLabel(translate, options, values) {
+	const selected = options.filter((o) => values.includes(o.value)).length;
+	if (selected <= 0) return null;
+	if (selected === 1) return options.find((o) => values.includes(o.value)).label;
+	return translate("flux.nSelected", { n: selected });
+}
+//#endregion
+//#region src/util/sanitizeUrl.ts
+var DANGEROUS_PROTOCOL = /^(javascript|vbscript|data):/i;
+/**
+* Removes control characters (and the Unicode line/paragraph separators) that
+* browsers ignore inside URLs but which can be used to obfuscate the scheme,
+* e.g. `java\tscript:alert(1)`.
+*/
+function stripControlChars(value) {
+	let out = "";
+	for (let i = 0; i < value.length; i++) {
+		const code = value.charCodeAt(i);
+		if (code <= 32 || code >= 127 && code <= 159 || code === 8232 || code === 8233) continue;
+		out += value[i];
+	}
+	return out;
+}
+/**
+* Sanitizes a URL intended for an `href` attribute. Returns `undefined` when the
+* URL uses a dangerous scheme (`javascript:`, `vbscript:`, `data:`) so the attribute
+* is omitted instead of becoming a script-execution or data-injection vector.
+* Safe and relative URLs are returned unchanged.
+*/
+function sanitizeUrl_default(href) {
+	if (!href) return href;
+	if (DANGEROUS_PROTOCOL.test(stripControlChars(href))) return;
+	return href;
+}
+//#endregion
+//#region src/component/FluxPressable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$61 = [
+	"href",
+	"rel",
+	"target"
+];
+//#endregion
+//#region src/component/FluxPressable.vue
+var FluxPressable_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxPressable",
+	props: {
+		componentType: {},
+		href: {},
+		rel: {},
+		target: {},
+		to: {}
+	},
+	emits: [
+		"click",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(__props, { emit: __emit, attrs: $attrs }) {
+		const emit = __emit;
+		const resolvedRel = computed(() => {
+			if (__props.rel) return __props.rel;
+			return __props.target === "_blank" ? "noopener noreferrer" : void 0;
+		});
+		const hoverListeners = {
+			onMouseenter: (evt) => emit("mouseenter", evt),
+			onMouseleave: (evt) => emit("mouseleave", evt)
+		};
+		function onClick(evt, navigate) {
+			emit("click", evt);
+			if (evt.defaultPrevented) return;
+			navigate?.(evt);
+		}
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return __props.componentType === "route" ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, $attrs, toHandlers(hoverListeners), {
+				rel: resolvedRel.value,
+				target: __props.target,
+				to: __props.to,
+				onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"rel",
+				"target",
+				"to"
+			])) : __props.componentType === "link" ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, $attrs, toHandlers(hoverListeners, true), {
+				href: unref(sanitizeUrl_default)(__props.href),
+				rel: resolvedRel.value,
+				target: __props.target,
+				onClick: _cache[1] || (_cache[1] = ($event) => onClick($event))
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$61)) : __props.componentType === "button" ? (openBlock(), createElementBlock("button", mergeProps({ key: 2 }, $attrs, toHandlers(hoverListeners, true), { onClick: _cache[2] || (_cache[2] = ($event) => onClick($event)) }), [renderSlot(_ctx.$slots, "default")], 16)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, $attrs, toHandlers(hoverListeners, true), { onClick }), [renderSlot(_ctx.$slots, "default")], 16));
+		};
+	}
+});
+var Spinner_module_default = {
+	spinner: `spinner`,
+	spinnerTrack: `spinner-track`,
+	spinnerEffect: `spinner-effect`,
+	spinnerValue: `spinner-value`
+};
+//#endregion
+//#region src/component/FluxSpinner.vue
+var FluxSpinner_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxSpinner",
+	props: { size: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				class: normalizeClass(unref(Spinner_module_default).spinner),
+				viewBox: "0 0 24 24",
+				style: normalizeStyle({ fontSize: __props.size && `${__props.size}px` })
+			}, [
+				createElementVNode("circle", {
+					class: normalizeClass(unref(Spinner_module_default).spinnerTrack),
+					cx: "12",
+					cy: "12",
+					r: "10",
+					fill: "transparent",
+					"stroke-width": "4"
+				}, null, 2),
+				createElementVNode("circle", {
+					class: normalizeClass(unref(Spinner_module_default).spinnerEffect),
+					cx: "12",
+					cy: "12",
+					r: "10",
+					fill: "transparent",
+					"stroke-width": "4",
+					"stroke-dasharray": "21 45",
+					"stroke-dashoffset": "30",
+					"stroke-linecap": "round"
+				}, null, 2),
+				createElementVNode("circle", {
+					class: normalizeClass(unref(Spinner_module_default).spinnerValue),
+					cx: "12",
+					cy: "12",
+					r: "10",
+					fill: "transparent",
+					"stroke-width": "4",
+					"stroke-dasharray": "21 45",
+					"stroke-dashoffset": "30",
+					"stroke-linecap": "round"
+				}, null, 2)
+			], 6);
+		};
+	}
+});
+var Button_module_default$1 = {
+	button: `button`,
+	isSmall: `is-small`,
+	isMedium: `is-medium`,
+	isLarge: `is-large`,
+	isXl: `is-xl`,
+	isFilled: `is-filled`,
+	spinner: `spinner`,
+	buttonIcon: `button-icon`,
+	buttonLabel: `button-label`,
+	badge: `badge`
+};
+//#endregion
+//#region src/component/FluxButton.vue?vue&type=script&setup=true&lang.ts
+var SLOTS = [
+	"default",
+	"after",
+	"before",
+	"iconLeading",
+	"iconTrailing",
+	"label"
+];
+//#endregion
+//#region src/component/FluxButton.vue
+var FluxButton_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxButton",
+	props: {
+		type: { default: "button" },
+		disabled: { type: Boolean },
+		iconLeading: {},
+		iconTrailing: {},
+		isFilled: { type: Boolean },
+		isLoading: { type: Boolean },
+		isSubmit: { type: Boolean },
+		label: {},
+		size: { default: "medium" },
+		tabindex: { default: 0 },
+		href: {},
+		rel: {},
+		target: {},
+		to: {},
+		cssClass: {},
+		cssClassIcon: {},
+		cssClassLabel: {}
+	},
+	emits: [
+		"click",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const disabled = useDisabled_default(toRef(() => __props.disabled));
+		function onClick(evt) {
+			if (unref(disabled) || __props.isLoading) {
+				evt.preventDefault();
+				evt.stopPropagation();
+				return;
+			}
+			emit("click", evt);
+		}
+		function onMouseEnter(evt) {
+			emit("mouseenter", evt);
+		}
+		function onMouseLeave(evt) {
+			emit("mouseleave", evt);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FluxPressable_default, {
+				"component-type": __props.type,
+				class: normalizeClass(unref(clsx)(__props.cssClass, __props.isFilled && unref(Button_module_default$1).isFilled, __props.size === "small" && unref(Button_module_default$1).isSmall, __props.size === "medium" && unref(Button_module_default$1).isMedium, __props.size === "large" && unref(Button_module_default$1).isLarge, __props.size === "xl" && unref(Button_module_default$1).isXl)),
+				type: __props.isSubmit ? "submit" : "button",
+				"aria-disabled": unref(disabled) ? true : void 0,
+				disabled: unref(disabled) ? true : void 0,
+				tabindex: unref(disabled) ? -1 : __props.tabindex,
+				href: __props.href,
+				rel: __props.rel,
+				target: __props.target,
+				to: __props.to,
+				onClick,
+				onMouseenter: onMouseEnter,
+				onMouseleave: onMouseLeave
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "before"),
+					renderSlot(_ctx.$slots, "iconLeading", {}, () => [__props.isLoading && (__props.iconLeading || !__props.iconTrailing) ? (openBlock(), createBlock(FluxSpinner_default, {
+						key: 0,
+						size: 20
+					})) : __props.iconLeading ? (openBlock(), createBlock(FluxIcon_default, {
+						key: 1,
+						class: normalizeClass(__props.cssClassIcon),
+						name: __props.iconLeading
+					}, null, 8, ["class", "name"])) : createCommentVNode("", true)]),
+					renderSlot(_ctx.$slots, "label", {}, () => [__props.label ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(__props.cssClassLabel)
+					}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)]),
+					renderSlot(_ctx.$slots, "iconTrailing", {}, () => [__props.isLoading && !__props.iconLeading && __props.iconTrailing ? (openBlock(), createBlock(FluxSpinner_default, {
+						key: 0,
+						size: 20
+					})) : __props.iconTrailing ? (openBlock(), createBlock(FluxIcon_default, {
+						key: 1,
+						class: normalizeClass(__props.cssClassIcon),
+						name: __props.iconTrailing
+					}, null, 8, ["class", "name"])) : createCommentVNode("", true)]),
+					renderSlot(_ctx.$slots, "after")
+				]),
+				_: 3
+			}, 8, [
+				"component-type",
+				"class",
+				"type",
+				"aria-disabled",
+				"disabled",
+				"tabindex",
+				"href",
+				"rel",
+				"target",
+				"to"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/css/component/Action.module.scss
+var { "button": _0$15, "buttonIcon": _1$6, "buttonLabel": _2$5 } = Button_module_default$1;
+var Action_module_default = {
+	action: `action ${_0$15}`,
+	spinner: `spinner`,
+	actionIcon: `action-icon ${_1$6}`,
+	isDestructive: `is-destructive`,
+	actionLabel: `action-label ${_2$5}`,
+	actionBar: `action-bar`,
+	separator: `separator`,
+	formInput: `form-input`,
+	basePaneStructure: `base-pane-structure`,
+	actionPane: `action-pane`,
+	actionPaneGrid: `action-pane-grid`,
+	actionPaneBody: `action-pane-body`,
+	paneBody: `pane-body`
+};
+//#endregion
+//#region src/component/FluxAction.vue
+var FluxAction_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAction",
+	props: {
+		type: {},
+		disabled: { type: Boolean },
+		isLoading: { type: Boolean },
+		isSubmit: { type: Boolean },
+		label: {},
+		tabindex: {},
+		href: {},
+		rel: {},
+		target: {},
+		to: {},
+		icon: {},
+		isDestructive: { type: Boolean }
+	},
+	emits: [
+		"click",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(__props, { emit: $emit }) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FluxButton_default, mergeProps({
+				disabled: __props.disabled,
+				isLoading: __props.isLoading,
+				label: __props.label,
+				href: __props.href,
+				rel: __props.rel,
+				target: __props.target,
+				to: __props.to,
+				type: __props.type
+			}, {
+				"css-class": unref(Action_module_default).action,
+				"css-class-icon": unref(Action_module_default).actionIcon,
+				"css-class-label": unref(Action_module_default).actionLabel,
+				class: __props.isDestructive && unref(Action_module_default).isDestructive,
+				"icon-leading": __props.icon,
+				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => $emit("mouseenter", $event)),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => $emit("mouseleave", $event))
+			}), null, 16, [
+				"css-class",
+				"css-class-icon",
+				"css-class-label",
+				"class",
+				"icon-leading"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/css/component/Button.module.scss
-var { "button": _0$14, "buttonLabel": _1$5, "buttonIcon": _2$4 } = Button_module_default$1;
+var { "button": _0$14, "buttonIcon": _1$5, "buttonLabel": _2$4 } = Button_module_default$1;
 var Button_module_default = {
 	primaryButton: `primary-button ${_0$14}`,
 	spinner: `spinner`,
-	primaryButtonIcon: `primary-button-icon ${_2$4}`,
-	primaryButtonLabel: `primary-button-label ${_1$5}`,
+	primaryButtonIcon: `primary-button-icon ${_1$5}`,
+	primaryButtonLabel: `primary-button-label ${_2$4}`,
 	secondaryButton: `secondary-button ${_0$14}`,
-	secondaryButtonIcon: `secondary-button-icon ${_2$4}`,
-	secondaryButtonLabel: `secondary-button-label ${_1$5}`,
+	secondaryButtonIcon: `secondary-button-icon ${_1$5}`,
+	secondaryButtonLabel: `secondary-button-label ${_2$4}`,
 	destructiveButton: `destructive-button ${_0$14}`,
-	destructiveButtonIcon: `destructive-button-icon ${_2$4}`,
-	destructiveButtonLabel: `destructive-button-label ${_1$5}`,
+	destructiveButtonIcon: `destructive-button-icon ${_1$5}`,
+	destructiveButtonLabel: `destructive-button-label ${_2$4}`,
 	baseLinkButton: `base-link-button ${_0$14}`,
 	primaryLinkButton: `primary-link-button base-link-button ${_0$14}`,
-	primaryLinkButtonIcon: `primary-link-button-icon ${_2$4}`,
-	primaryLinkButtonLabel: `primary-link-button-label ${_1$5}`,
+	primaryLinkButtonIcon: `primary-link-button-icon ${_1$5}`,
+	primaryLinkButtonLabel: `primary-link-button-label ${_2$4}`,
 	secondaryLinkButton: `secondary-link-button base-link-button ${_0$14}`,
-	secondaryLinkButtonIcon: `secondary-link-button-icon ${_2$4}`,
-	secondaryLinkButtonLabel: `secondary-link-button-label ${_1$5}`,
+	secondaryLinkButtonIcon: `secondary-link-button-icon ${_1$5}`,
+	secondaryLinkButtonLabel: `secondary-link-button-label ${_2$4}`,
 	linkButton: `link-button ${_0$14}`,
-	linkButtonIcon: `link-button-icon ${_2$4}`,
+	linkButtonIcon: `link-button-icon ${_1$5}`,
 	icon: `icon`,
-	linkButtonLabel: `link-button-label ${_1$5}`,
+	linkButtonLabel: `link-button-label ${_2$4}`,
 	publishButton: `publish-button primary-button ${_0$14}`,
-	publishButtonIcon: `publish-button-icon primary-button-icon ${_2$4}`,
-	publishButtonLabel: `publish-button-label primary-button-label ${_1$5}`,
+	publishButtonIcon: `publish-button-icon primary-button-icon ${_1$5}`,
+	publishButtonLabel: `publish-button-label primary-button-label ${_2$4}`,
 	publishButtonAnimation: `publish-button-animation`,
 	isDone: `is-done`,
 	publishButtonAnimationArrow: `publish-button-animation-arrow`,
@@ -12989,249 +13032,64 @@ var Comment_module_default = {
 	isTyping: `is-typing`,
 	commentTyping: `comment-typing`
 };
-//#endregion
-//#region src/component/FluxComment.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = { key: 0 };
-var _hoisted_2$17 = ["datetime"];
-//#endregion
-//#region src/component/FluxComment.vue
-var FluxComment_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxComment",
-	props: {
-		avatarAlt: {},
-		avatarFallback: { default: "colorized" },
-		avatarFallbackIcon: { default: "user" },
-		avatarFallbackInitials: {},
-		avatarSrc: {},
-		isReceived: { type: Boolean },
-		isTyping: { type: Boolean },
-		postedBy: {},
-		postedOn: {}
-	},
-	setup(__props) {
-		const translate = useTranslate_default();
-		const isJustNowVisible = computed(() => __props.postedOn && Math.abs(__props.postedOn.diffNow().as("seconds")) < 15);
-		const iso = computed(() => __props.postedOn?.toISO() ?? null);
-		const relative = computed(() => __props.postedOn?.toRelative() ?? null);
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(clsx)(unref(Comment_module_default).comment, __props.isTyping && unref(Comment_module_default).isTyping, __props.isReceived && unref(Comment_module_default).isReceived)),
-				role: "article"
-			}, [
-				createVNode(FluxAvatar_default, {
-					alt: __props.avatarAlt,
-					fallback: __props.avatarFallback,
-					"fallback-icon": __props.avatarFallbackIcon,
-					"fallback-initials": __props.avatarFallbackInitials,
-					size: 42,
-					src: __props.avatarSrc
-				}, null, 8, [
-					"alt",
-					"fallback",
-					"fallback-icon",
-					"fallback-initials",
-					"src"
-				]),
-				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentContent) }, [__props.isTyping ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(unref(Comment_module_default).commentTyping)
-				}, null, 2)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
-				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentFooter) }, [__props.isReceived && __props.postedBy ? (openBlock(), createElementBlock("span", _hoisted_1$48, toDisplayString(__props.postedBy), 1)) : createCommentVNode("", true), iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
-					key: 1,
-					datetime: iso.value
-				}, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$17)) : createCommentVNode("", true)], 2)
-			], 2);
-		};
-	}
-});
-var Slider_module_default = {
-	slider: `slider`,
-	isDisabled: `is-disabled`,
-	isDragging: `is-dragging`,
-	sliderThumb: `slider-thumb`,
-	sliderTrack: `slider-track`,
-	sliderTrackValue: `slider-track-value`,
-	tick: `tick`,
-	tickLarge: `tick-large tick`,
-	tickSmall: `tick-small tick`,
-	ticks: `ticks`
-};
-//#endregion
-//#region src/css/component/primitive/CoordinatePicker.module.scss
-var { "sliderThumb": _0$10 } = Slider_module_default;
-var CoordinatePicker_module_default = {
-	coordinatePicker: `coordinate-picker`,
-	coordinatePickerThumb: `coordinate-picker-thumb ${_0$10}`,
-	isDisabled: `is-disabled`,
-	isDragging: `is-dragging`
-};
-//#endregion
-//#region src/component/primitive/CoordinatePickerThumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = [
-	"aria-disabled",
-	"aria-valuetext",
-	"tabindex"
-];
-//#endregion
-//#region src/component/primitive/CoordinatePickerThumb.vue
-var CoordinatePickerThumb_default = /* @__PURE__ */ defineComponent({
-	__name: "CoordinatePickerThumb",
-	props: {
-		disabled: { type: Boolean },
-		isDragging: { type: Boolean },
-		position: {}
-	},
-	emits: [
-		"decrement",
-		"grab",
-		"increment"
-	],
-	setup(__props, { emit: __emit }) {
-		const $emit = __emit;
-		const emit = __emit;
-		const disabled = useDisabled_default(toRef(() => __props.disabled));
-		function onKeyDown(evt) {
-			if (unref(disabled)) return;
-			switch (evt.key) {
-				case "ArrowUp":
-					emit("decrement", false, true);
-					break;
-				case "ArrowDown":
-					emit("increment", false, true);
-					break;
-				case "ArrowLeft":
-					emit("decrement", true, false);
-					break;
-				case "ArrowRight":
-					emit("increment", true, false);
-					break;
-				default: return;
-			}
-			evt.preventDefault();
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				class: normalizeClass(unref(clsx)(unref(CoordinatePicker_module_default).coordinatePickerThumb, unref(disabled) && unref(CoordinatePicker_module_default).isDisabled, __props.isDragging && unref(CoordinatePicker_module_default).isDragging)),
-				style: normalizeStyle({
-					top: `${__props.position[1] * 100}%`,
-					left: `${__props.position[0] * 100}%`
-				}),
-				role: "slider",
-				"aria-disabled": unref(disabled) ? true : void 0,
-				"aria-valuetext": `X: ${Math.round(__props.position[0] * 100)}%, Y: ${Math.round(__props.position[1] * 100)}%`,
-				tabindex: unref(disabled) ? -1 : 0,
-				type: "button",
-				onKeydown: onKeyDown,
-				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$47);
-		};
-	}
-});
-//#endregion
-//#region src/component/primitive/CoordinatePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = ["aria-disabled", "aria-label"];
-//#endregion
-//#region src/component/primitive/CoordinatePicker.vue
-var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
-	__name: "CoordinatePicker",
-	props: /* @__PURE__ */ mergeModels({
-		ariaLabel: {},
-		disabled: { type: Boolean },
-		max: { default: 100 },
-		min: { default: 0 },
-		step: { default: 1 }
-	}, {
-		"modelValue": { default: [0, 0] },
-		"modelModifiers": {}
-	}),
-	emits: /* @__PURE__ */ mergeModels(["dragging"], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const modelValue = useModel(__props, "modelValue");
-		const disabled = useDisabled_default(toRef(() => __props.disabled));
-		const rootRef = useTemplateRef("root");
-		const isDragging = ref(false);
-		const max = computed(() => Array.isArray(__props.max) ? __props.max : [__props.max, __props.max]);
-		const min = computed(() => Array.isArray(__props.min) ? __props.min : [__props.min, __props.min]);
-		const step = computed(() => Array.isArray(__props.step) ? __props.step : [__props.step, __props.step]);
-		const thumbPosition = computed(() => [(unref(modelValue)[0] - unref(min)[0]) / (unref(max)[0] - unref(min)[0]), (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])]);
-		function onDecrement(x, y) {
-			if (unref(disabled)) return;
-			let [valueX, valueY] = unref(modelValue);
-			const [maxX, maxY] = unref(max);
-			const [minX, minY] = unref(min);
-			const [stepX, stepY] = unref(step);
-			if (x) valueX = +t$1(Math.max(minX, Math.min(maxX, valueX - stepX)), stepX).toPrecision(4);
-			if (y) valueY = +t$1(Math.max(minY, Math.min(maxY, valueY - stepY)), stepY).toPrecision(4);
-			modelValue.value = [valueX, valueY];
-		}
-		function onIncrement(x, y) {
-			if (unref(disabled)) return;
-			let [valueX, valueY] = unref(modelValue);
-			const [maxX, maxY] = unref(max);
-			const [minX, minY] = unref(min);
-			const [stepX, stepY] = unref(step);
-			if (x) valueX = +t$1(Math.max(minX, Math.min(maxX, valueX + stepX)), stepX).toPrecision(4);
-			if (y) valueY = +t$1(Math.max(minY, Math.min(maxY, valueY + stepY)), stepY).toPrecision(4);
-			modelValue.value = [valueX, valueY];
-		}
-		function onPointerDown(evt) {
-			if (unref(disabled)) return;
-			isDragging.value = true;
-			document.addEventListener("pointermove", onPointerMove);
-			document.addEventListener("pointerup", onPointerUp, { passive: true });
-			requestAnimationFrame(() => onPointerMove(evt));
-		}
-		function onPointerMove(evt) {
-			const root = _$2(rootRef);
-			if (!unref(isDragging) || !root) return;
-			const [maxX, maxY] = unref(max);
-			const [minX, minY] = unref(min);
-			const [stepX, stepY] = unref(step);
-			let { top, left, width, height } = root.getBoundingClientRect();
-			top += 6;
-			left += 6;
-			width -= 12;
-			height -= 12;
-			const x = Math.max(0, Math.min(1, (evt.clientX - left) / width));
-			const y = Math.max(0, Math.min(1, (evt.clientY - top) / height));
-			modelValue.value = [+t$1(x * (maxX - minX) + minX, stepX).toPrecision(4), +t$1(y * (maxY - minY) + minY, stepY).toPrecision(4)];
-			evt.preventDefault();
-		}
-		function onPointerUp() {
-			isDragging.value = false;
-			document.removeEventListener("pointermove", onPointerMove);
-			document.removeEventListener("pointerup", onPointerUp);
-		}
-		watch(isDragging, (isDragging) => emit("dragging", isDragging));
-		onUnmounted(() => {
-			document.removeEventListener("pointermove", onPointerMove);
-			document.removeEventListener("pointerup", onPointerUp);
-		});
+//#endregion
+//#region src/component/FluxComment.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$48 = { key: 0 };
+var _hoisted_2$17 = ["datetime"];
+//#endregion
+//#region src/component/FluxComment.vue
+var FluxComment_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxComment",
+	props: {
+		avatarAlt: {},
+		avatarFallback: { default: "colorized" },
+		avatarFallbackIcon: { default: "user" },
+		avatarFallbackInitials: {},
+		avatarSrc: {},
+		isReceived: { type: Boolean },
+		isTyping: { type: Boolean },
+		postedBy: {},
+		postedOn: {}
+	},
+	setup(__props) {
+		const translate = useTranslate_default();
+		const isJustNowVisible = computed(() => __props.postedOn && Math.abs(__props.postedOn.diffNow().as("seconds")) < 15);
+		const iso = computed(() => __props.postedOn?.toISO() ?? null);
+		const relative = computed(() => __props.postedOn?.toRelative() ?? null);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				ref: "root",
-				class: normalizeClass(unref(CoordinatePicker_module_default).coordinatePicker),
-				"aria-disabled": unref(disabled) ? true : void 0,
-				"aria-label": __props.ariaLabel,
-				onPointerdown: onPointerDown
-			}, [createVNode(CoordinatePickerThumb_default, {
-				disabled: unref(disabled),
-				"is-dragging": isDragging.value,
-				position: thumbPosition.value,
-				onDecrement,
-				onIncrement
-			}, null, 8, [
-				"disabled",
-				"is-dragging",
-				"position"
-			])], 42, _hoisted_1$46);
+				class: normalizeClass(unref(clsx)(unref(Comment_module_default).comment, __props.isTyping && unref(Comment_module_default).isTyping, __props.isReceived && unref(Comment_module_default).isReceived)),
+				role: "article"
+			}, [
+				createVNode(FluxAvatar_default, {
+					alt: __props.avatarAlt,
+					fallback: __props.avatarFallback,
+					"fallback-icon": __props.avatarFallbackIcon,
+					"fallback-initials": __props.avatarFallbackInitials,
+					size: 42,
+					src: __props.avatarSrc
+				}, null, 8, [
+					"alt",
+					"fallback",
+					"fallback-icon",
+					"fallback-initials",
+					"src"
+				]),
+				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentContent) }, [__props.isTyping ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(Comment_module_default).commentTyping)
+				}, null, 2)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
+				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentFooter) }, [__props.isReceived && __props.postedBy ? (openBlock(), createElementBlock("span", _hoisted_1$48, toDisplayString(__props.postedBy), 1)) : createCommentVNode("", true), iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
+					key: 1,
+					datetime: iso.value
+				}, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$17)) : createCommentVNode("", true)], 2)
+			], 2);
 		};
 	}
 });
 //#endregion
 //#region src/component/FluxFormFieldAddition.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = { key: 1 };
+var _hoisted_1$47 = { key: 1 };
 //#endregion
 //#region src/component/FluxFormFieldAddition.vue
 var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
@@ -13253,7 +13111,7 @@ var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 					name: __props.icon,
 					size: 16
 				}, null, 8, ["class", "name"])) : createCommentVNode("", true),
-				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$45, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
+				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$47, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
@@ -13261,7 +13119,7 @@ var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = ["for"];
+var _hoisted_1$46 = ["for"];
 //#endregion
 //#region src/component/FluxFormField.vue
 var FluxFormField_default = /* @__PURE__ */ defineComponent({
@@ -13285,13 +13143,16 @@ var FluxFormField_default = /* @__PURE__ */ defineComponent({
 					for: unref(id),
 					class: normalizeClass(unref(Form_module_default).formFieldHeader)
 				}, [
-					createElementVNode("span", { class: normalizeClass(unref(Form_module_default).formFieldLabel) }, toDisplayString(__props.label), 3),
-					__props.isOptional ? (openBlock(), createElementBlock("span", {
+					__props.label ? (openBlock(), createElementBlock("span", {
 						key: 0,
+						class: normalizeClass(unref(Form_module_default).formFieldLabel)
+					}, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
+					__props.isOptional ? (openBlock(), createElementBlock("span", {
+						key: 1,
 						class: normalizeClass(unref(Form_module_default).formFieldOptional)
 					}, " (" + toDisplayString(unref(translate)("flux.optional")) + ") ", 3)) : createCommentVNode("", true),
 					"value" in slots ? (openBlock(), createElementBlock("span", {
-						key: 1,
+						key: 2,
 						class: normalizeClass(unref(Form_module_default).formFieldValue)
 					}, [renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({
 						currentLength: __props.currentLength,
@@ -13302,7 +13163,7 @@ var FluxFormField_default = /* @__PURE__ */ defineComponent({
 						label: __props.label,
 						maxLength: __props.maxLength
 					})))], 2)) : createCommentVNode("", true)
-				], 10, _hoisted_1$44),
+				], 10, _hoisted_1$46),
 				renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ id: unref(id) }))),
 				__props.currentLength && __props.maxLength && __props.maxLength > 0 ? (openBlock(), createElementBlock("span", {
 					key: 0,
@@ -13334,7 +13195,7 @@ var FluxFormField_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$43 = ["aria-disabled"];
+var _hoisted_1$45 = ["aria-disabled"];
 var _hoisted_2$16 = [
 	"id",
 	"name",
@@ -13538,7 +13399,7 @@ var FluxFormInput_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Form_module_default).formInputIconTrailing),
 					size: 18
 				}, null, 8, ["class"])) : createCommentVNode("", true)
-			], 10, _hoisted_1$43);
+			], 10, _hoisted_1$45);
 		};
 	}
 });
@@ -13709,7 +13570,7 @@ var FluxPaneFooter_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxPaneHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$42 = { key: 0 };
+var _hoisted_1$44 = { key: 0 };
 var _hoisted_2$15 = { key: 1 };
 //#endregion
 //#region src/component/FluxPaneHeader.vue
@@ -13733,7 +13594,7 @@ var FluxPaneHeader_default = /* @__PURE__ */ defineComponent({
 				__props.title || __props.subtitle ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: normalizeClass(unref(Pane_module_default).paneHeaderCaption)
-				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$42, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_2$15, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$44, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_2$15, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "after")
 			], 2);
 		};
@@ -13756,10 +13617,10 @@ var DialogLayout_default = /* @__PURE__ */ defineComponent({
 						icon: __props.icon,
 						title: __props.title
 					}, null, 8, ["icon", "title"]),
-					__props.message ? (openBlock(), createBlock(FluxPaneBody_default, {
-						key: 0,
-						innerHTML: __props.message
-					}, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+					__props.message ? (openBlock(), createBlock(FluxPaneBody_default, { key: 0 }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.message), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
 					$slots.default ? (openBlock(), createBlock(FluxPaneBody_default, { key: 1 }, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 						_: 3
@@ -13844,7 +13705,7 @@ var FilterBadge_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Menu.module.scss
-var { "buttonIcon": _0$9, "button": _1$3, "buttonLabel": _2$2 } = Button_module_default$1;
+var { "button": _0$10, "buttonIcon": _1$3, "buttonLabel": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -13852,9 +13713,9 @@ var Menu_module_default = {
 	menuGroup: `menu-group`,
 	menuGroupHorizontal: `menu-group-horizontal menu-group`,
 	menuGroupVertical: `menu-group-vertical menu-group`,
-	menuItem: `menu-item ${_1$3}`,
+	menuItem: `menu-item ${_0$10}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_0$9}`,
+	menuItemIcon: `menu-item-icon ${_1$3}`,
 	menuItemLabel: `menu-item-label ${_2$2}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
@@ -13864,7 +13725,7 @@ var Menu_module_default = {
 	menuCollapsibleOpened: `menu-collapsible-opened menu-collapsible`,
 	menuCollapsibleBody: `menu-collapsible-body`,
 	menuCollapsibleContent: `menu-collapsible-content`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_0$9}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_1$3}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -13896,7 +13757,7 @@ var FluxMenuGroup_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxMenuItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$41 = ["src", "alt"];
+var _hoisted_1$43 = ["src", "alt"];
 //#endregion
 //#region src/component/FluxMenuItem.vue
 var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
@@ -13973,7 +13834,7 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Menu_module_default).menuItemImage),
 					src: __props.imageSrc,
 					alt: __props.imageAlt ?? ""
-				}, null, 10, _hoisted_1$41)]),
+				}, null, 10, _hoisted_1$43)]),
 				key: "1"
 			} : slots.before ? {
 				name: "iconLeading",
@@ -14379,6 +14240,18 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+var Slider_module_default = {
+	slider: `slider`,
+	isDisabled: `is-disabled`,
+	isDragging: `is-dragging`,
+	sliderThumb: `slider-thumb`,
+	sliderTrack: `slider-track`,
+	sliderTrackValue: `slider-track-value`,
+	tick: `tick`,
+	tickLarge: `tick-large tick`,
+	tickSmall: `tick-small tick`,
+	ticks: `ticks`
+};
 //#endregion
 //#region src/component/FluxTicks.vue
 var FluxTicks_default = /* @__PURE__ */ defineComponent({
@@ -14409,7 +14282,7 @@ var FluxTicks_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/primitive/SliderBase.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = ["aria-disabled"];
+var _hoisted_1$42 = ["aria-disabled"];
 //#endregion
 //#region src/component/primitive/SliderBase.vue
 var SliderBase_default = /* @__PURE__ */ defineComponent({
@@ -14462,13 +14335,13 @@ var SliderBase_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				lower: __props.min,
 				upper: __props.max
-			}, null, 8, ["lower", "upper"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$40);
+			}, null, 8, ["lower", "upper"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$42);
 		};
 	}
 });
 //#endregion
 //#region src/component/primitive/SliderThumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$39 = [
+var _hoisted_1$41 = [
 	"aria-disabled",
 	"aria-label",
 	"aria-valuemax",
@@ -14527,7 +14400,7 @@ var SliderThumb_default = /* @__PURE__ */ defineComponent({
 				type: "button",
 				onKeydown: onKeyDown,
 				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$39);
+			}, null, 46, _hoisted_1$41);
 		};
 	}
 });
@@ -14632,7 +14505,7 @@ var Divider_module_default = {
 };
 //#endregion
 //#region src/component/FluxSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$38 = ["aria-orientation"];
+var _hoisted_1$40 = ["aria-orientation"];
 //#endregion
 //#region src/component/FluxSeparator.vue
 var FluxSeparator_default = /* @__PURE__ */ defineComponent({
@@ -14644,7 +14517,7 @@ var FluxSeparator_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(__props.direction === "horizontal" ? unref(Divider_module_default).separatorHorizontal : unref(Divider_module_default).separatorVertical),
 				role: "separator",
 				"aria-orientation": __props.direction
-			}, null, 10, _hoisted_1$38);
+			}, null, 10, _hoisted_1$40);
 		};
 	}
 });
@@ -14878,6 +14751,179 @@ var FluxFormSlider_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+//#endregion
+//#region src/css/component/primitive/CoordinatePicker.module.scss
+var { "sliderThumb": _0$9 } = Slider_module_default;
+var CoordinatePicker_module_default = {
+	coordinatePicker: `coordinate-picker`,
+	coordinatePickerThumb: `coordinate-picker-thumb ${_0$9}`,
+	isDisabled: `is-disabled`,
+	isDragging: `is-dragging`
+};
+//#endregion
+//#region src/component/primitive/CoordinatePickerThumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$39 = [
+	"aria-disabled",
+	"aria-valuetext",
+	"tabindex"
+];
+//#endregion
+//#region src/component/primitive/CoordinatePickerThumb.vue
+var CoordinatePickerThumb_default = /* @__PURE__ */ defineComponent({
+	__name: "CoordinatePickerThumb",
+	props: {
+		disabled: { type: Boolean },
+		isDragging: { type: Boolean },
+		position: {}
+	},
+	emits: [
+		"decrement",
+		"grab",
+		"increment"
+	],
+	setup(__props, { emit: __emit }) {
+		const $emit = __emit;
+		const emit = __emit;
+		const disabled = useDisabled_default(toRef(() => __props.disabled));
+		function onKeyDown(evt) {
+			if (unref(disabled)) return;
+			switch (evt.key) {
+				case "ArrowUp":
+					emit("decrement", false, true);
+					break;
+				case "ArrowDown":
+					emit("increment", false, true);
+					break;
+				case "ArrowLeft":
+					emit("decrement", true, false);
+					break;
+				case "ArrowRight":
+					emit("increment", true, false);
+					break;
+				default: return;
+			}
+			evt.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				class: normalizeClass(unref(clsx)(unref(CoordinatePicker_module_default).coordinatePickerThumb, unref(disabled) && unref(CoordinatePicker_module_default).isDisabled, __props.isDragging && unref(CoordinatePicker_module_default).isDragging)),
+				style: normalizeStyle({
+					top: `${__props.position[1] * 100}%`,
+					left: `${__props.position[0] * 100}%`
+				}),
+				role: "slider",
+				"aria-disabled": unref(disabled) ? true : void 0,
+				"aria-valuetext": `X: ${Math.round(__props.position[0] * 100)}%, Y: ${Math.round(__props.position[1] * 100)}%`,
+				tabindex: unref(disabled) ? -1 : 0,
+				type: "button",
+				onKeydown: onKeyDown,
+				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
+			}, null, 46, _hoisted_1$39);
+		};
+	}
+});
+//#endregion
+//#region src/component/primitive/CoordinatePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$38 = ["aria-disabled", "aria-label"];
+//#endregion
+//#region src/component/primitive/CoordinatePicker.vue
+var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
+	__name: "CoordinatePicker",
+	props: /* @__PURE__ */ mergeModels({
+		ariaLabel: {},
+		disabled: { type: Boolean },
+		max: { default: 100 },
+		min: { default: 0 },
+		step: { default: 1 }
+	}, {
+		"modelValue": { default: [0, 0] },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["dragging"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const modelValue = useModel(__props, "modelValue");
+		const disabled = useDisabled_default(toRef(() => __props.disabled));
+		const rootRef = useTemplateRef("root");
+		const isDragging = ref(false);
+		const max = computed(() => Array.isArray(__props.max) ? __props.max : [__props.max, __props.max]);
+		const min = computed(() => Array.isArray(__props.min) ? __props.min : [__props.min, __props.min]);
+		const step = computed(() => Array.isArray(__props.step) ? __props.step : [__props.step, __props.step]);
+		const thumbPosition = computed(() => [(unref(modelValue)[0] - unref(min)[0]) / (unref(max)[0] - unref(min)[0]), (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])]);
+		function onDecrement(x, y) {
+			if (unref(disabled)) return;
+			let [valueX, valueY] = unref(modelValue);
+			const [maxX, maxY] = unref(max);
+			const [minX, minY] = unref(min);
+			const [stepX, stepY] = unref(step);
+			if (x) valueX = +t$1(Math.max(minX, Math.min(maxX, valueX - stepX)), stepX).toPrecision(4);
+			if (y) valueY = +t$1(Math.max(minY, Math.min(maxY, valueY - stepY)), stepY).toPrecision(4);
+			modelValue.value = [valueX, valueY];
+		}
+		function onIncrement(x, y) {
+			if (unref(disabled)) return;
+			let [valueX, valueY] = unref(modelValue);
+			const [maxX, maxY] = unref(max);
+			const [minX, minY] = unref(min);
+			const [stepX, stepY] = unref(step);
+			if (x) valueX = +t$1(Math.max(minX, Math.min(maxX, valueX + stepX)), stepX).toPrecision(4);
+			if (y) valueY = +t$1(Math.max(minY, Math.min(maxY, valueY + stepY)), stepY).toPrecision(4);
+			modelValue.value = [valueX, valueY];
+		}
+		function onPointerDown(evt) {
+			if (unref(disabled)) return;
+			isDragging.value = true;
+			document.addEventListener("pointermove", onPointerMove);
+			document.addEventListener("pointerup", onPointerUp, { passive: true });
+			requestAnimationFrame(() => onPointerMove(evt));
+		}
+		function onPointerMove(evt) {
+			const root = _$2(rootRef);
+			if (!unref(isDragging) || !root) return;
+			const [maxX, maxY] = unref(max);
+			const [minX, minY] = unref(min);
+			const [stepX, stepY] = unref(step);
+			let { top, left, width, height } = root.getBoundingClientRect();
+			top += 6;
+			left += 6;
+			width -= 12;
+			height -= 12;
+			const x = Math.max(0, Math.min(1, (evt.clientX - left) / width));
+			const y = Math.max(0, Math.min(1, (evt.clientY - top) / height));
+			modelValue.value = [+t$1(x * (maxX - minX) + minX, stepX).toPrecision(4), +t$1(y * (maxY - minY) + minY, stepY).toPrecision(4)];
+			evt.preventDefault();
+		}
+		function onPointerUp() {
+			isDragging.value = false;
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
+		}
+		watch(isDragging, (isDragging) => emit("dragging", isDragging));
+		onUnmounted(() => {
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "root",
+				class: normalizeClass(unref(CoordinatePicker_module_default).coordinatePicker),
+				"aria-disabled": unref(disabled) ? true : void 0,
+				"aria-label": __props.ariaLabel,
+				onPointerdown: onPointerDown
+			}, [createVNode(CoordinatePickerThumb_default, {
+				disabled: unref(disabled),
+				"is-dragging": isDragging.value,
+				position: thumbPosition.value,
+				onDecrement,
+				onIncrement
+			}, null, 8, [
+				"disabled",
+				"is-dragging",
+				"position"
+			])], 42, _hoisted_1$38);
+		};
+	}
+});
 var Color_module_default = {
 	colorPicker: `color-picker`,
 	colorPickerPreview: `color-picker-preview`,
@@ -15452,7 +15498,7 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Pagination.module.scss
-var { "secondaryButton": _0$8, "secondaryButtonLabel": _1$2, "secondaryButtonIcon": _2$1 } = Button_module_default;
+var { "secondaryButton": _0$8, "secondaryButtonIcon": _1$2, "secondaryButtonLabel": _2$1 } = Button_module_default;
 var Pagination_module_default = {
 	pagination: `pagination`,
 	paginationButton: `pagination-button ${_0$8}`,
@@ -15460,8 +15506,8 @@ var Pagination_module_default = {
 	paginationButtonArrow: `pagination-button-arrow`,
 	paginationButtonCurrent: `pagination-button-current`,
 	paginationButtonSpacer: `pagination-button-spacer`,
-	paginationButtonIcon: `pagination-button-icon ${_2$1}`,
-	paginationButtonLabel: `pagination-button-label ${_1$2}`,
+	paginationButtonIcon: `pagination-button-icon ${_1$2}`,
+	paginationButtonLabel: `pagination-button-label ${_2$1}`,
 	paginationBar: `pagination-bar`,
 	paginationBarLimit: `pagination-bar-limit`,
 	paginationBarLimitDisplayingOf: `pagination-bar-limit-displaying-of`,