@nexxtmove/ui 1.26.0 → 1.27.0

package/dist/components/molecules/Tree/Tree.vue.d.ts

@@ -0,0 +1,31 @@
+import { NexxtIconName } from '../../atoms/Icon/Icon.vue';
+export interface NexxtTreeNode {
+    /** Unique within the tree; this is what `selected` and `collapsed` hold. */
+    id: string;
+    label: string;
+    icon?: NexxtIconName;
+    /** A node with children gets a chevron and can be folded. */
+    children?: NexxtTreeNode[];
+}
+export interface NexxtTreeProps {
+    /** The top-level nodes; nest `children` for deeper levels. */
+    nodes: NexxtTreeNode[];
+    /** Accessible name for the tree, e.g. the heading above it. */
+    label: string;
+}
+type __VLS_Props = NexxtTreeProps;
+type __VLS_ModelProps = {
+    'selected'?: string | null;
+    /** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
+    'collapsed'?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selected": (value: string | null) => any;
+    "update:collapsed": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { CustomIconName } from './components/atoms/Icon/customIcons';
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue';
 export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molecules/PageCard/PageCard.vue';
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
+export type { NexxtTreeNode, NexxtTreeProps } from './components/molecules/Tree/Tree.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
 export type { EditorFlexDirectionMessages, EditorFlexDirectionValue, } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 export type { EditorGapMessages, EditorGapValue, } from './components/editor/molecules/EditorGap/EditorGap.vue';
@@ -93,4 +94,5 @@ export { default as NexxtToast } from './components/molecules/Toast/Toast.vue';
 export { default as NexxtToaster } from './components/organisms/Toaster/Toaster.vue';
 export { default as NexxtToggleGroup } from './components/molecules/ToggleGroup/ToggleGroup.vue';
 export { default as NexxtTooltip } from './components/atoms/Tooltip/Tooltip.vue';
+export { default as NexxtTree } from './components/molecules/Tree/Tree.vue';
 export { default as NexxtVideoPlayer } from './components/organisms/VideoPlayer/VideoPlayer.vue';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { Fragment as e, Teleport as t, Transition as n, TransitionGroup as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createStaticVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, nextTick as v, normalizeClass as y, normalizeProps as b, normalizeStyle as x, onMounted as S, onUnmounted as C, openBlock as w, ref as T, renderList as E, renderSlot as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, useAttrs as j, useCssVars as M, useModel as N, useTemplateRef as P, vModelCheckbox as F, vModelDynamic as I, vModelText as L, watch as R, watchEffect as z, withCtx as B, withDirectives as V, withKeys as H, withModifiers as U } from "vue";
 import ee from "@number-flow/vue";
-import { addMonths as W, eachDayOfInterval as G, endOfDay as te, endOfMonth as K, endOfWeek as ne, format as q, getHours as re, getMinutes as ie, isAfter as ae, isBefore as oe, isSameDay as se, isSameMonth as ce, setHours as le, setMinutes as ue, startOfDay as de, startOfMonth as fe, startOfWeek as pe, subMonths as me } from "date-fns";
-import { fromZonedTime as he, toZonedTime as J } from "date-fns-tz";
-import { nl as ge } from "date-fns/locale";
-import { ColorAreaArea as _e, ColorAreaRoot as ve, ColorAreaThumb as ye, ColorFieldInput as Y, ColorFieldRoot as be, ColorSliderRoot as xe, ColorSliderThumb as Se, ColorSliderTrack as Ce, ColorSwatch as we, DialogClose as Te, DialogContent as Ee, DialogDescription as De, DialogOverlay as Oe, DialogPortal as ke, DialogRoot as Ae, DialogTitle as je, PaginationEllipsis as Me, PaginationFirst as Ne, PaginationLast as Pe, PaginationList as Fe, PaginationListItem as Ie, PaginationNext as Le, PaginationPrev as Re, PaginationRoot as ze, SliderRange as Be, SliderRoot as Ve, SliderThumb as He, SliderTrack as Ue, TooltipContent as We, TooltipPortal as Ge, TooltipProvider as Ke, TooltipRoot as qe, TooltipTrigger as Je, colorToString as Ye, normalizeColor as Xe, setChannelValue as Ze } from "reka-ui";
+import { addMonths as W, eachDayOfInterval as te, endOfDay as ne, endOfMonth as G, endOfWeek as re, format as K, getHours as ie, getMinutes as ae, isAfter as oe, isBefore as se, isSameDay as ce, isSameMonth as le, setHours as ue, setMinutes as de, startOfDay as fe, startOfMonth as pe, startOfWeek as me, subMonths as he } from "date-fns";
+import { fromZonedTime as ge, toZonedTime as q } from "date-fns-tz";
+import { nl as _e } from "date-fns/locale";
+import { ColorAreaArea as ve, ColorAreaRoot as ye, ColorAreaThumb as be, ColorFieldInput as J, ColorFieldRoot as Y, ColorSliderRoot as xe, ColorSliderThumb as Se, ColorSliderTrack as Ce, ColorSwatch as we, DialogClose as Te, DialogContent as Ee, DialogDescription as De, DialogOverlay as Oe, DialogPortal as ke, DialogRoot as Ae, DialogTitle as je, PaginationEllipsis as Me, PaginationFirst as Ne, PaginationLast as Pe, PaginationList as Fe, PaginationListItem as Ie, PaginationNext as Le, PaginationPrev as Re, PaginationRoot as ze, SliderRange as Be, SliderRoot as Ve, SliderThumb as He, SliderTrack as Ue, TooltipContent as We, TooltipPortal as Ge, TooltipProvider as Ke, TooltipRoot as qe, TooltipTrigger as Je, colorToString as Ye, normalizeColor as Xe, setChannelValue as Ze } from "reka-ui";
 import { autoUpdate as Qe, flip as $e, offset as et, shift as tt, size as nt, useFloating as rt } from "@floating-ui/vue";
 import { useEventListener as it, useFullscreen as at, useMediaControls as ot, useResizeObserver as st } from "@vueuse/core";
 //#region src/components/molecules/TimelineEvent/TimelineTypes.ts
@@ -590,9 +590,9 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	],
 	setup(e, { emit: t }) {
 		let r = e, a = t, l = i(() => {
-			let e = q(r.viewDate, "MMM", { locale: r.locale }).replace(".", "").trim();
+			let e = K(r.viewDate, "MMM", { locale: r.locale }).replace(".", "").trim();
 			return e.charAt(0).toUpperCase() + e.slice(1) + ".";
-		}), u = i(() => q(r.viewDate, "yyyy")), d = {
+		}), u = i(() => K(r.viewDate, "yyyy")), d = {
 			enterActiveClass: "transition-all duration-200 ease-out",
 			enterFromClass: "translate-y-full",
 			leaveActiveClass: "transition-all duration-200 ease-out absolute inset-x-0 top-0",
@@ -686,14 +686,14 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	emits: ["select"],
 	setup(t, { expose: n, emit: r }) {
 		let a = t, l = r, u = P("dayButtonsRef"), d = (e) => {
-			let t = J(e, a.timezone), n = J(/* @__PURE__ */ new Date(), a.timezone);
-			return se(t, n);
-		}, f = (e) => a.modelValue ? se(e, a.modelValue) : !1, p = (e) => a.markedDates.some((t) => se(t, e)), m = i(() => {
+			let t = q(e, a.timezone), n = q(/* @__PURE__ */ new Date(), a.timezone);
+			return ce(t, n);
+		}, f = (e) => a.modelValue ? ce(e, a.modelValue) : !1, p = (e) => a.markedDates.some((t) => ce(t, e)), m = i(() => {
 			let e = [];
 			for (let t = 0; t < a.calendarDays.length; t += 7) e.push(a.calendarDays.slice(t, t + 7));
 			return e;
 		}), h = i(() => a.calendarDays.length === 0 ? [] : a.calendarDays.slice(0, 7).map((e) => {
-			let t = q(e, "EEEEEE", { locale: a.locale });
+			let t = K(e, "EEEEEE", { locale: a.locale });
 			return t.charAt(0).toUpperCase() + t.slice(1);
 		})), g = (e, t) => {
 			let n = t;
@@ -722,9 +722,9 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			n >= 0 && n < a.calendarDays.length && (e.preventDefault(), u.value?.[n]?.focus());
 		};
 		return S(() => {
-			a.calendarDays.findIndex((e) => a.modelValue && se(e, a.modelValue) || !a.modelValue && d(e));
+			a.calendarDays.findIndex((e) => a.modelValue && ce(e, a.modelValue) || !a.modelValue && d(e));
 		}), n({ focus: (e) => {
-			let t = a.calendarDays.findIndex((t) => se(t, e));
+			let t = a.calendarDays.findIndex((t) => ce(t, e));
 			t !== -1 && u.value?.[t]?.focus();
 		} }), (n, r) => (w(), s("div", Nt, [c("div", Pt, [(w(!0), s(e, null, E(h.value, (e) => (w(), s("div", {
 			key: e,
@@ -747,11 +747,11 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			ref: u,
 			type: "button",
 			disabled: t.isDisabled(e),
-			"aria-label": A(q)(e, "d MMMM yyyy", { locale: t.locale }),
-			tabindex: A(ce)(e, t.viewDate) ? 0 : -1,
+			"aria-label": A(K)(e, "d MMMM yyyy", { locale: t.locale }),
+			tabindex: A(le)(e, t.viewDate) ? 0 : -1,
 			class: y([
 				"relative flex size-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1",
-				A(ce)(e, t.viewDate) ? "text-gray-900" : "text-gray-300",
+				A(le)(e, t.viewDate) ? "text-gray-900" : "text-gray-300",
 				f(e) ? "bg-cornflower-blue-500 font-medium text-white!" : "",
 				d(e) && !f(e) ? "font-medium text-cornflower-blue-500! ring-1 ring-cornflower-blue-500" : "",
 				d(e) && f(e) ? "ring-2 ring-cornflower-blue-500 ring-offset-2" : "",
@@ -760,7 +760,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			]),
 			onClick: (t) => l("select", e),
 			onKeydown: (e) => g(e, r * 7 + n)
-		}, [c("span", Rt, k(A(q)(e, "d")), 1), p(e) ? (w(), s("span", {
+		}, [c("span", Rt, k(A(K)(e, "d")), 1), p(e) ? (w(), s("span", {
 			key: 0,
 			class: y(["absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full", f(e) ? "bg-white" : "bg-cornflower-blue-500"])
 		}, null, 2)) : o("", !0)], 42, Lt)], 8, It))), 128))]))), 128))]));
@@ -786,17 +786,17 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	emits: ["select"],
 	setup(t, { emit: n }) {
 		let r = t, a = n, o = i(() => Array.from({ length: 12 }, (e, t) => {
-			let n = J(new Date(Date.UTC(r.viewYear, t, 1)), r.timezone), i = q(n, "LLL", { locale: r.locale }).replace(".", "").trim();
+			let n = q(new Date(Date.UTC(r.viewYear, t, 1)), r.timezone), i = K(n, "LLL", { locale: r.locale }).replace(".", "").trim();
 			return {
 				index: t,
 				label: i.charAt(0).toUpperCase() + i.slice(1)
 			};
 		})), c = (e) => {
-			let t = r.viewYear, n = J(new Date(Date.UTC(t, e, 1)), r.timezone);
-			return !!(r.minDate && K(n) < de(J(r.minDate, r.timezone)) || r.maxDate && fe(n) > te(J(r.maxDate, r.timezone)));
+			let t = r.viewYear, n = q(new Date(Date.UTC(t, e, 1)), r.timezone);
+			return !!(r.minDate && G(n) < fe(q(r.minDate, r.timezone)) || r.maxDate && pe(n) > ne(q(r.maxDate, r.timezone)));
 		}, l = (e) => {
 			if (!r.modelValue) return !1;
-			let t = J(r.modelValue, r.timezone);
+			let t = q(r.modelValue, r.timezone);
 			return t.getFullYear() === r.viewYear && t.getMonth() === e;
 		}, u = (e) => e === r.currentMonth;
 		return (t, n) => (w(), s("div", Bt, [(w(!0), s(e, null, E(o.value, (e) => (w(), s("button", {
@@ -826,7 +826,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	emits: ["select"],
 	setup(t, { emit: n }) {
 		let r = t, a = n, o = P("yearScrollerRef"), l = i(() => {
-			let e = r.minDate ? J(r.minDate, r.timezone).getFullYear() : r.viewYear - 100, t = r.maxDate ? J(r.maxDate, r.timezone).getFullYear() : r.viewYear + 20;
+			let e = r.minDate ? q(r.minDate, r.timezone).getFullYear() : r.viewYear - 100, t = r.maxDate ? q(r.maxDate, r.timezone).getFullYear() : r.viewYear + 20;
 			return Array.from({ length: t - e + 1 }, (t, n) => e + n);
 		}), u = (e) => {
 			if (!o.value) return;
@@ -862,16 +862,16 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
 		let n = e, r = t, a = i({
-			get: () => n.modelValue ? re(n.modelValue) : re(/* @__PURE__ */ new Date()),
+			get: () => n.modelValue ? ie(n.modelValue) : ie(/* @__PURE__ */ new Date()),
 			set: (e) => {
 				let t = n.modelValue || /* @__PURE__ */ new Date();
-				r("update:modelValue", le(t, Number(e)));
+				r("update:modelValue", ue(t, Number(e)));
 			}
 		}), o = i({
-			get: () => n.modelValue ? ie(n.modelValue) : ie(/* @__PURE__ */ new Date()),
+			get: () => n.modelValue ? ae(n.modelValue) : ae(/* @__PURE__ */ new Date()),
 			set: (e) => {
 				let t = n.modelValue || /* @__PURE__ */ new Date();
-				r("update:modelValue", ue(t, Number(e)));
+				r("update:modelValue", de(t, Number(e)));
 			}
 		}), l = (e) => e.toString().padStart(2, "0"), u = () => {
 			a.value = (a.value + 1) % 24;
@@ -916,7 +916,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	name: "NexxtCalendar",
 	__name: "Calendar",
 	props: /*@__PURE__*/ g({
-		locale: { default: () => ge },
+		locale: { default: () => _e },
 		markedDates: { default: () => [] },
 		disabledDates: { default: () => [] },
 		minDate: {},
@@ -936,41 +936,41 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ g(["select"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let r = N(e, "modelValue"), l = t, u = T(r.value ? J(new Date(r.value), e.timezone) : J(/* @__PURE__ */ new Date(), e.timezone)), d = T("days"), p = T(null), m = T("fade");
+		let r = N(e, "modelValue"), l = t, u = T(r.value ? q(new Date(r.value), e.timezone) : q(/* @__PURE__ */ new Date(), e.timezone)), d = T("days"), p = T(null), m = T("fade");
 		R(r, (t) => {
-			t && (u.value = J(new Date(t), e.timezone));
+			t && (u.value = q(new Date(t), e.timezone));
 		});
 		let h = i(() => {
-			let e = pe(fe(u.value), { weekStartsOn: 1 }), t = ne(K(u.value), { weekStartsOn: 1 });
-			return G({
+			let e = me(pe(u.value), { weekStartsOn: 1 }), t = re(G(u.value), { weekStartsOn: 1 });
+			return te({
 				start: e,
 				end: t
 			});
 		}), g = (t) => {
-			let n = J(t, e.timezone);
-			return !!(e.disabledDates.some((t) => se(J(t, e.timezone), n)) || e.minDate && oe(n, de(J(e.minDate, e.timezone))) || e.maxDate && ae(n, te(J(e.maxDate, e.timezone))));
+			let n = q(t, e.timezone);
+			return !!(e.disabledDates.some((t) => ce(q(t, e.timezone), n)) || e.minDate && se(n, fe(q(e.minDate, e.timezone))) || e.maxDate && oe(n, ne(q(e.maxDate, e.timezone))));
 		}, v = (t) => {
-			let n = J(t, e.timezone);
-			g(n) || (ce(n, u.value) || (u.value = fe(n)), r.value = he(n, e.timezone), l("select", r.value));
+			let n = q(t, e.timezone);
+			g(n) || (le(n, u.value) || (u.value = pe(n)), r.value = ge(n, e.timezone), l("select", r.value));
 		}, b = (t) => {
 			m.value = "fade";
-			let n = J(new Date(Date.UTC(u.value.getUTCFullYear(), t, 1)), e.timezone);
+			let n = q(new Date(Date.UTC(u.value.getUTCFullYear(), t, 1)), e.timezone);
 			u.value = n, d.value = "days";
 		}, x = (t) => {
-			let n = J(new Date(Date.UTC(t, u.value.getUTCMonth(), 1)), e.timezone);
+			let n = q(new Date(Date.UTC(t, u.value.getUTCMonth(), 1)), e.timezone);
 			u.value = n, d.value = "months";
 		}, S = i(() => {
 			if (d.value !== "days") return !1;
 			if (!e.minDate) return !0;
-			let t = me(u.value, 1);
-			return !oe(K(t), de(J(e.minDate, e.timezone)));
+			let t = he(u.value, 1);
+			return !se(G(t), fe(q(e.minDate, e.timezone)));
 		}), C = i(() => {
 			if (d.value !== "days") return !1;
 			if (!e.maxDate) return !0;
 			let t = W(u.value, 1);
-			return !ae(fe(t), te(J(e.maxDate, e.timezone)));
+			return !oe(pe(t), ne(q(e.maxDate, e.timezone)));
 		}), E = () => {
-			S.value && (m.value = "slide-prev", u.value = me(u.value, 1));
+			S.value && (m.value = "slide-prev", u.value = he(u.value, 1));
 		}, D = () => {
 			C.value && (m.value = "slide-next", u.value = W(u.value, 1));
 		}, O = () => {
@@ -1455,7 +1455,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 					}, null, 8, ["class"])
 				], 10, dn)]),
 				content: B(() => [c("div", { class: y(["flex flex-col gap-4 rounded-xl bg-white p-4 ring ring-gray-200", e.matchWidth ? "w-full" : "w-70"]) }, [
-					f(A(ve), {
+					f(A(ye), {
 						"model-value": u.value,
 						"color-space": "hsl",
 						"x-channel": "saturation",
@@ -1463,11 +1463,11 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 						class: "relative",
 						"onUpdate:color": C
 					}, {
-						default: B(({ style: e }) => [c("div", fn, [f(A(_e), {
+						default: B(({ style: e }) => [c("div", fn, [f(A(ve), {
 							class: "relative h-40 w-full cursor-crosshair outline-none",
 							style: x(e)
 						}, {
-							default: B(() => [f(A(ye), { class: "block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing" })]),
+							default: B(() => [f(A(be), { class: "block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing" })]),
 							_: 1
 						}, 8, ["style"])])]),
 						_: 1
@@ -1516,55 +1516,55 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 						name: "chevron-down",
 						class: "text-[12px]",
 						"aria-hidden": "true"
-					})])])) : o("", !0)]), _.value === "hex" ? (w(), a(A(be), {
+					})])])) : o("", !0)]), _.value === "hex" ? (w(), a(A(Y), {
 						key: 0,
 						"model-value": g.value,
 						class: "w-full",
 						"onUpdate:color": C
 					}, {
-						default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", p.value ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+						default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", p.value ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 							class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 							placeholder: "#000000",
 							onInput: E
 						})], 2), p.value ? (w(), s("p", vn, k(p.value), 1)) : o("", !0)]),
 						_: 1
 					}, 8, ["model-value"])) : _.value === "hsl" ? (w(), s("div", yn, [
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "hue",
 							"color-space": "hsl",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.hue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.hue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "H",
 								onInput: i[2] ||= (e) => D(e, "hue")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "saturation",
 							"color-space": "hsl",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.saturation ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.saturation ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "S",
 								onInput: i[3] ||= (e) => D(e, "saturation")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "lightness",
 							"color-space": "hsl",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.lightness ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.lightness ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "L",
 								onInput: i[4] ||= (e) => D(e, "lightness")
@@ -1572,42 +1572,42 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 							_: 1
 						}, 8, ["model-value"])
 					])) : _.value === "rgb" ? (w(), s("div", bn, [
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "red",
 							"color-space": "rgb",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.red ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.red ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "R",
 								onInput: i[5] ||= (e) => D(e, "red")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "green",
 							"color-space": "rgb",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.green ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.green ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "G",
 								onInput: i[6] ||= (e) => D(e, "green")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
-						f(A(be), {
+						f(A(Y), {
 							"model-value": u.value,
 							channel: "blue",
 							"color-space": "rgb",
 							class: "flex-1",
 							"onUpdate:color": C
 						}, {
-							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.blue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(Y), {
+							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.blue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(J), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "B",
 								onInput: i[7] ||= (e) => D(e, "blue")
@@ -1796,21 +1796,21 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			return !R.value.some((t) => t.label.toLowerCase() === e);
 		}), ee = i(() => z.value.length > 0 || V.value), W = (e) => {
 			v.value = [...v.value, L(e)], D.value = "";
-		}, G = (e) => {
+		}, te = (e) => {
 			let t = L(e);
 			v.value = v.value[0] === t ? [] : [t], D.value = "", _("select");
-		}, te = () => {
+		}, ne = () => {
 			if (p.singleSelect) {
-				z.value.length > 0 ? G(z.value[0]) : p.allowNew && K();
+				z.value.length > 0 ? te(z.value[0]) : p.allowNew && G();
 				return;
 			}
-			z.value.length === 1 ? W(z.value[0]) : p.allowNew && K();
-		}, K = () => {
+			z.value.length === 1 ? W(z.value[0]) : p.allowNew && G();
+		}, G = () => {
 			let e = D.value.trim();
 			if (!e) return;
 			let t = e.toLowerCase(), n = R.value.some((e) => e.label.toLowerCase() === t), r = p.options.some((e) => I(e).toLowerCase() === t);
 			n || r || (p.singleSelect ? (v.value = [e], D.value = "", _("select")) : (v.value = [...v.value, e], D.value = ""));
-		}, ne = (e) => {
+		}, re = (e) => {
 			v.value = v.value.filter((t) => t !== e);
 		};
 		return l({ focus: () => {
@@ -1830,7 +1830,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			placeholder: A(h),
 			"aria-label": A(h),
 			onFocus: l[1] ||= (e) => O.value = !0,
-			onKeydown: H(te, ["enter"])
+			onKeydown: H(ne, ["enter"])
 		}, null, 8, [
 			"modelValue",
 			"left-icon",
@@ -1859,7 +1859,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 					key: e.value,
 					class: "origin-left cursor-pointer",
 					"aria-label": `Verwijder ${e.label}`,
-					onClick: (t) => ne(e.value)
+					onClick: (t) => re(e.value)
 				}, [f(sn, {
 					ghost: !0,
 					class: "group",
@@ -1893,7 +1893,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 				role: "option",
 				"aria-selected": v.value.includes(L(e)),
 				class: y(["flex w-full cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none", { "font-medium text-cornflower-blue-600": t.singleSelect && v.value.includes(L(e)) }]),
-				onClick: (n) => t.singleSelect ? G(e) : W(e)
+				onClick: (n) => t.singleSelect ? te(e) : W(e)
 			}, [d(k(I(e)) + " ", 1), t.singleSelect && v.value.includes(L(e)) ? (w(), a(Z, {
 				key: 0,
 				name: "check",
@@ -1901,7 +1901,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			})) : o("", !0)], 10, Pn))), 128))]), V.value ? (w(), s("div", {
 				key: 0,
 				class: "flex grow-0 items-center gap-4 border-t border-gray-100 px-6 py-3 whitespace-normal text-gray-700",
-				onClick: l[2] ||= (e) => K()
+				onClick: l[2] ||= (e) => G()
 			}, [f(Z, {
 				name: "plus",
 				class: "cursor-pointer small-normal",
@@ -1921,7 +1921,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 				class: "w-full",
 				"left-icon": A(m),
 				placeholder: A(h),
-				onKeydown: H(te, ["enter"])
+				onKeydown: H(ne, ["enter"])
 			}, null, 8, [
 				"modelValue",
 				"left-icon",
@@ -1950,7 +1950,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 						key: e.value,
 						class: "origin-left cursor-pointer",
 						"aria-label": `Verwijder ${e.label}`,
-						onClick: (t) => ne(e.value)
+						onClick: (t) => re(e.value)
 					}, [f(sn, {
 						ghost: !0,
 						class: "group",
@@ -1973,7 +1973,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 				role: "option",
 				"aria-selected": v.value.includes(L(e)),
 				class: y(["flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none", { "font-medium text-cornflower-blue-600": t.singleSelect && v.value.includes(L(e)) }]),
-				onClick: (n) => t.singleSelect ? G(e) : W(e)
+				onClick: (n) => t.singleSelect ? te(e) : W(e)
 			}, [d(k(I(e)) + " ", 1), t.singleSelect && v.value.includes(L(e)) ? (w(), a(Z, {
 				key: 0,
 				name: "check",
@@ -1982,7 +1982,7 @@ var pt = { funda: { render: ft } }, Z = /* @__PURE__ */ p({
 			V.value ? (w(), s("div", {
 				key: 0,
 				class: "flex grow-0 items-center gap-4 border-t border-gray-100 px-6 py-3 whitespace-normal text-gray-700",
-				onClick: l[5] ||= (e) => K()
+				onClick: l[5] ||= (e) => G()
 			}, [f(Z, {
 				name: "plus",
 				class: "cursor-pointer small-normal",
@@ -6981,26 +6981,204 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), Tl = [
+}), Tl = ["aria-label"], El = [
+	"aria-level",
+	"aria-posinset",
+	"aria-setsize",
+	"aria-selected",
+	"aria-expanded",
+	"tabindex",
+	"data-tree-id",
+	"onClick",
+	"onFocus"
+], Dl = ["onClick"], Ol = {
+	key: 1,
+	class: "size-5 shrink-0"
+}, kl = { class: "truncate" }, Al = 22, jl = "transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms", Ml = /* @__PURE__ */ p({
+	name: "NexxtTree",
+	__name: "Tree",
+	props: /*@__PURE__*/ g({
+		nodes: {},
+		label: {}
+	}, {
+		selected: { default: null },
+		selectedModifiers: {},
+		collapsed: { default: () => [] },
+		collapsedModifiers: {}
+	}),
+	emits: ["update:selected", "update:collapsed"],
+	setup(t) {
+		let n = t, l = N(t, "selected"), u = N(t, "collapsed"), d = P("root"), p = T(null), m = i(() => {
+			let e = [], t = (n, r, i) => {
+				n.forEach((a, o) => {
+					let s = !!a.children?.length, c = s && !u.value.includes(a.id);
+					e.push({
+						node: a,
+						depth: r,
+						parentId: i,
+						expandable: s,
+						expanded: c,
+						position: o + 1,
+						setSize: n.length
+					}), c && t(a.children, r + 1, a.id);
+				});
+			};
+			return t(n.nodes, 0, null), e;
+		}), h = i(() => !!l.value && m.value.some((e) => e.node.id === l.value)), g = T({
+			top: 0,
+			height: 0
+		}), _ = P("highlightElement"), b = {
+			none: "",
+			select: "transition-[transform,opacity] duration-200 ease-out-strong",
+			move: "transition-[transform,opacity] duration-200 ease-in-out-strong"
+		}, C = T("none"), D = (e) => Array.from(d.value?.querySelectorAll("[data-tree-id]") ?? []).find((t) => t.dataset.treeId === e && !t.classList.contains("absolute")), O = async () => {
+			if (await v(), !d.value || !h.value) return;
+			let e = D(l.value);
+			e && (g.value = {
+				top: e.offsetTop,
+				height: e.offsetHeight
+			});
+		}, A = async (e) => {
+			let t = C.value;
+			C.value = "none", await e(), await v(), d.value?.getBoundingClientRect(), C.value = t;
+		};
+		R([l, m], ([e], [t]) => {
+			C.value = e === t ? "move" : "select", O();
+		}), st(d, () => {
+			_.value?.getAnimations().length || A(O);
+		}), S(() => A(async () => {
+			await O(), await document.fonts?.ready, await O();
+		}));
+		let j = (e) => {
+			let t = e;
+			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			let n = D(m.value.find((e) => e.node.id === t.dataset.treeId)?.parentId), r = n ? t.offsetTop - (n.offsetTop + n.offsetHeight) : 0;
+			t.style.transition = "none", t.style.transform = `translateY(${-r}px)`, t.style.opacity = "0", t.style.pointerEvents = "none", t.getBoundingClientRect(), t.style.transition = jl, t.style.transform = "", t.style.opacity = "";
+		}, M = (e) => {
+			let t = e;
+			t.style.transition = "", t.style.pointerEvents = "";
+		}, F = i(() => {
+			let e = m.value.map((e) => e.node.id);
+			return p.value && e.includes(p.value) ? p.value : l.value && e.includes(l.value) ? l.value : e[0] ?? null;
+		}), I = (e) => {
+			u.value = u.value.includes(e) ? u.value.filter((t) => t !== e) : [...u.value, e];
+		}, L = async (e) => {
+			p.value = e, await v(), Array.from(d.value?.querySelectorAll("[data-tree-id]") ?? []).find((t) => t.dataset.treeId === e)?.focus();
+		}, z = (e) => {
+			let t = m.value.findIndex((e) => e.node.id === F.value), n = m.value[t];
+			if (!n) return;
+			let r = (e) => {
+				e && L(e.node.id);
+			};
+			switch (e.key) {
+				case "ArrowDown":
+					r(m.value[t + 1]);
+					break;
+				case "ArrowUp":
+					r(m.value[t - 1]);
+					break;
+				case "Home":
+					r(m.value[0]);
+					break;
+				case "End":
+					r(m.value[m.value.length - 1]);
+					break;
+				case "ArrowRight":
+					n.expandable && !n.expanded ? I(n.node.id) : n.expanded && r(m.value[t + 1]);
+					break;
+				case "ArrowLeft":
+					n.expanded ? I(n.node.id) : n.parentId && L(n.parentId);
+					break;
+				case "Enter":
+				case " ":
+					l.value = n.node.id;
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		};
+		return (n, i) => (w(), s("div", {
+			ref_key: "root",
+			ref: d,
+			role: "tree",
+			"aria-label": t.label,
+			class: "relative isolate",
+			onKeydown: z
+		}, [c("div", {
+			ref_key: "highlightElement",
+			ref: _,
+			"aria-hidden": "true",
+			class: y(["pointer-events-none absolute top-0 left-0 -z-10 w-full rounded-md bg-cornflower-blue-50 motion-reduce:transition-none", [b[C.value], h.value ? "opacity-100" : "opacity-0"]]),
+			style: x({
+				transform: `translateY(${g.value.top}px)`,
+				height: `${g.value.height}px`
+			}),
+			"data-tree-highlight": ""
+		}, null, 6), f(r, {
+			tag: "div",
+			role: "group",
+			"leave-active-class": "invisible absolute w-full transition-none!",
+			"move-class": "transition-transform duration-200 ease-in-out-strong motion-reduce:transition-none",
+			onEnter: j,
+			onAfterEnter: M,
+			onEnterCancelled: M
+		}, {
+			default: B(() => [(w(!0), s(e, null, E(m.value, (e) => (w(), s("div", {
+				key: e.node.id,
+				role: "treeitem",
+				"aria-level": e.depth + 1,
+				"aria-posinset": e.position,
+				"aria-setsize": e.setSize,
+				"aria-selected": l.value === e.node.id,
+				"aria-expanded": e.expandable ? e.expanded : void 0,
+				tabindex: e.node.id === F.value ? 0 : -1,
+				"data-tree-id": e.node.id,
+				class: y(["group mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none", l.value === e.node.id ? "text-cornflower-blue-600" : "text-gray-800 hover:bg-gray-100"]),
+				style: x({ paddingLeft: `${e.depth * Al + 4}px` }),
+				onClick: (t) => l.value = e.node.id,
+				onFocus: (t) => p.value = e.node.id
+			}, [
+				e.expandable ? (w(), s("button", {
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					class: "flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors duration-150 group-hover:text-gray-600 hover:text-gray-600 motion-reduce:transition-none",
+					onClick: U((t) => I(e.node.id), ["stop"])
+				}, [f(Z, {
+					name: "chevron-down",
+					class: y(["extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none", !e.expanded && "-rotate-90"])
+				}, null, 8, ["class"])], 8, Dl)) : (w(), s("span", Ol)),
+				e.node.icon ? (w(), a(Z, {
+					key: 2,
+					name: e.node.icon,
+					class: y(["shrink-0 transition-colors duration-150 motion-reduce:transition-none", l.value === e.node.id ? "text-cornflower-blue-600" : "text-gray-600"])
+				}, null, 8, ["name", "class"])) : o("", !0),
+				c("span", kl, k(e.node.label), 1)
+			], 46, El))), 128))]),
+			_: 1
+		})], 40, Tl));
+	}
+}), Nl = [
 	"src",
 	"loop",
 	"aria-label"
-], El = {
+], Pl = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Dl = { class: "heading-4" }, Ol = { class: "max-w-xs truncate extra-small-normal text-white/50" }, kl = {
+}, Fl = { class: "heading-4" }, Il = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Ll = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Al = {
+}, Rl = {
 	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, jl = [
+}, zl = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Ml = { class: "flex items-center gap-2" }, Nl = ["aria-label"], Pl = { class: "extra-small-normal text-white/70 tabular-nums" }, Fl = ["aria-label"], Il = ["aria-label"], Ll = /* @__PURE__ */ p({
+], Bl = { class: "flex items-center gap-2" }, Vl = ["aria-label"], Hl = { class: "extra-small-normal text-white/70 tabular-nums" }, Ul = ["aria-label"], Wl = ["aria-label"], Gl = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -7041,27 +7219,27 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 		R(g, (e) => {
 			!e && H && (H = !1, V.value = null);
 		});
-		let G = (e) => {
+		let te = (e) => {
 			if (!z.value) return 0;
 			let t = z.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
 			return Math.max(0, Math.min(1, (n - t.left) / t.width));
-		}, te = (e) => {
-			V.value = G(e);
-		}, K = (e) => {
+		}, ne = (e) => {
+			V.value = te(e);
+		}, G = (e) => {
 			if (!m.value) return;
 			let t = Math.max(0, Math.min(m.value, p.value + e));
 			H = !0, p.value = t;
-		}, ne = (e) => {
-			e.key === "ArrowLeft" ? (e.preventDefault(), K(-5)) : e.key === "ArrowRight" ? (e.preventDefault(), K(5)) : e.key === "Home" ? (e.preventDefault(), K(-Infinity)) : e.key === "End" && (e.preventDefault(), K(Infinity));
-		}, q = () => {
+		}, re = (e) => {
+			e.key === "ArrowLeft" ? (e.preventDefault(), G(-5)) : e.key === "ArrowRight" ? (e.preventDefault(), G(5)) : e.key === "Home" ? (e.preventDefault(), G(-Infinity)) : e.key === "End" && (e.preventDefault(), G(Infinity));
+		}, K = () => {
 			V.value !== null && m.value ? (H = !0, p.value = V.value * m.value) : V.value = null;
 		};
 		return it(document, "mousemove", (e) => {
-			V.value !== null && (V.value = G(e));
+			V.value !== null && (V.value = te(e));
 		}), it(document, "mouseup", () => {
-			V.value !== null && q();
+			V.value !== null && K();
 		}), it(document, "touchend", () => {
-			V.value !== null && q();
+			V.value !== null && K();
 		}), S(() => {
 			r.autoplay && (u.value = !0), r.muted && (h.value = !0);
 		}), t({
@@ -7081,15 +7259,15 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => E.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : I()
-			}, null, 42, Tl),
-			E.value ? (w(), s("div", El, [
+			}, null, 42, Nl),
+			E.value ? (w(), s("div", Pl, [
 				f(Z, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", Dl, k(a.value.error), 1),
-				c("p", Ol, k(e.src), 1)
+				c("p", Fl, k(a.value.error), 1),
+				c("p", Il, k(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -7097,7 +7275,7 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", kl, [c("div", Al, [f(Z, {
+				default: B(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Ll, [c("div", Rl, [f(Z, {
 					name: D.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -7118,14 +7296,14 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 				"aria-valuetext": F(W.value),
 				tabindex: "0",
 				class: "relative h-1.5 cursor-pointer rounded-full bg-white/20",
-				onMousedown: te,
-				onTouchstart: U(te, ["prevent"]),
-				onKeydown: ne,
+				onMousedown: ne,
+				onTouchstart: U(ne, ["prevent"]),
+				onKeydown: re,
 				onTouchmove: r[2] ||= U((e) => {
-					V.value !== null && (V.value = G(e));
+					V.value !== null && (V.value = te(e));
 				}, ["prevent"]),
 				onTouchend: r[3] ||= () => {
-					V.value !== null && q();
+					V.value !== null && K();
 				}
 			}, [
 				c("div", {
@@ -7140,7 +7318,7 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 					class: "absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100",
 					style: x({ left: `${ee.value}%` })
 				}, null, 4)
-			], 40, jl), c("div", Ml, [
+			], 40, zl), c("div", Bl, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
@@ -7150,8 +7328,8 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 					name: A(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Nl),
-				c("span", Pl, k(F(W.value)) + " / " + k(F(A(m))), 1),
+				}, null, 8, ["name"])], 8, Vl),
+				c("span", Hl, k(F(W.value)) + " / " + k(F(A(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -7162,7 +7340,7 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 					name: A(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Fl),
+				}, null, 8, ["name"])], 8, Ul),
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -7172,10 +7350,10 @@ var Ks = { render: Gs }, qs = { class: "flex items-center justify-end self-stret
 					name: A(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Il)
+				}, null, 8, ["name"])], 8, Wl)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { ct as EVENT_CONFIG_MAP, lt as NexxtAnimatedNumber, ht as NexxtAnnouncement, bt as NexxtAvatar, St as NexxtButton, en as NexxtCalendar, rn as NexxtCard, on as NexxtCheckbox, sn as NexxtChip, Sn as NexxtColorPicker, Un as NexxtCombobox, Hn as NexxtComboboxPanel, Xn as NexxtContactInfoCard, lr as NexxtCountrySelect, pr as NexxtCustomerJourneyTile, mr as NexxtDatePicker, Sr as NexxtDoughnutChart, Dr as NexxtDropdownButton, Kr as NexxtEditorAlignItems, ri as NexxtEditorBorder, oi as NexxtEditorColor, ci as NexxtEditorFlexDirection, mi as NexxtEditorGap, Ei as NexxtEditorHeadingType, Oi as NexxtEditorJustifyContent, ea as NexxtEditorPadding, aa as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, sa as NexxtEditorTextAlign, ua as NexxtEnergyLabel, Q as NexxtFloatingPanel, ma as NexxtHeader, Z as NexxtIcon, ga as NexxtInfoBlock, kn as NexxtInputField, wa as NexxtInputSelect, Ea as NexxtLoader, Aa as NexxtModal, Ma as NexxtModalFooter, co as NexxtPageCard, mo as NexxtPageContainer, ro as NexxtPageMockup, go as NexxtPageTypeTile, _o as NexxtPagination, xo as NexxtPresenceIndicator, No as NexxtProgressBar, Wo as NexxtPropertyCard, zo as NexxtPropertyListing, os as NexxtReferenceCard, Ci as NexxtSelect, ls as NexxtSelectableOption, hs as NexxtSidebarMenuItem, _s as NexxtSkeleton, xs as NexxtSkeletonPropertyCard, Xr as NexxtSlider, ws as NexxtSocialIcons, Os as NexxtSocialMediaCustomTemplate, Ls as NexxtSocialMediaTemplate, Zs as NexxtSocialMediaType, uc as NexxtSource, _t as NexxtSquircle, dc as NexxtStepperHeader, kr as NexxtSwitch, vc as NexxtTabbedContent, jc as NexxtTable, mc as NexxtTabs, Gc as NexxtTemplateCard, Yc as NexxtTextarea, nl as NexxtTimelineEvent, ll as NexxtTimelineLanes, ml as NexxtTimelinePhaseblock, gl as NexxtTimelineTrack, Cl as NexxtToast, wl as NexxtToaster, Wr as NexxtToggleGroup, Ir as NexxtTooltip, Ll as NexxtVideoPlayer, X as PHASE_MAP, sc as SOURCE_MAP };
+export { ct as EVENT_CONFIG_MAP, lt as NexxtAnimatedNumber, ht as NexxtAnnouncement, bt as NexxtAvatar, St as NexxtButton, en as NexxtCalendar, rn as NexxtCard, on as NexxtCheckbox, sn as NexxtChip, Sn as NexxtColorPicker, Un as NexxtCombobox, Hn as NexxtComboboxPanel, Xn as NexxtContactInfoCard, lr as NexxtCountrySelect, pr as NexxtCustomerJourneyTile, mr as NexxtDatePicker, Sr as NexxtDoughnutChart, Dr as NexxtDropdownButton, Kr as NexxtEditorAlignItems, ri as NexxtEditorBorder, oi as NexxtEditorColor, ci as NexxtEditorFlexDirection, mi as NexxtEditorGap, Ei as NexxtEditorHeadingType, Oi as NexxtEditorJustifyContent, ea as NexxtEditorPadding, aa as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, sa as NexxtEditorTextAlign, ua as NexxtEnergyLabel, Q as NexxtFloatingPanel, ma as NexxtHeader, Z as NexxtIcon, ga as NexxtInfoBlock, kn as NexxtInputField, wa as NexxtInputSelect, Ea as NexxtLoader, Aa as NexxtModal, Ma as NexxtModalFooter, co as NexxtPageCard, mo as NexxtPageContainer, ro as NexxtPageMockup, go as NexxtPageTypeTile, _o as NexxtPagination, xo as NexxtPresenceIndicator, No as NexxtProgressBar, Wo as NexxtPropertyCard, zo as NexxtPropertyListing, os as NexxtReferenceCard, Ci as NexxtSelect, ls as NexxtSelectableOption, hs as NexxtSidebarMenuItem, _s as NexxtSkeleton, xs as NexxtSkeletonPropertyCard, Xr as NexxtSlider, ws as NexxtSocialIcons, Os as NexxtSocialMediaCustomTemplate, Ls as NexxtSocialMediaTemplate, Zs as NexxtSocialMediaType, uc as NexxtSource, _t as NexxtSquircle, dc as NexxtStepperHeader, kr as NexxtSwitch, vc as NexxtTabbedContent, jc as NexxtTable, mc as NexxtTabs, Gc as NexxtTemplateCard, Yc as NexxtTextarea, nl as NexxtTimelineEvent, ll as NexxtTimelineLanes, ml as NexxtTimelinePhaseblock, gl as NexxtTimelineTrack, Cl as NexxtToast, wl as NexxtToaster, Wr as NexxtToggleGroup, Ir as NexxtTooltip, Ml as NexxtTree, Gl as NexxtVideoPlayer, X as PHASE_MAP, sc as SOURCE_MAP };

package/dist/nuxt.js

@@ -49,6 +49,7 @@ var s = {
 	NexxtTimelineLanes: "components/molecules/TimelineLanes/TimelineLanes.vue",
 	NexxtToast: "components/molecules/Toast/Toast.vue",
 	NexxtToggleGroup: "components/molecules/ToggleGroup/ToggleGroup.vue",
+	NexxtTree: "components/molecules/Tree/Tree.vue",
 	NexxtCalendar: "components/organisms/Calendar/Calendar.vue",
 	NexxtColorPicker: "components/organisms/ColorPicker/ColorPicker.vue",
 	NexxtCombobox: "components/organisms/Combobox/Combobox.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/molecules/Tree/Tree.vue

@@ -0,0 +1,342 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+export interface NexxtTreeNode {
+  /** Unique within the tree; this is what `selected` and `collapsed` hold. */
+  id: string
+  label: string
+  icon?: NexxtIconName
+  /** A node with children gets a chevron and can be folded. */
+  children?: NexxtTreeNode[]
+}
+
+export interface NexxtTreeProps {
+  /** The top-level nodes; nest `children` for deeper levels. */
+  nodes: NexxtTreeNode[]
+  /** Accessible name for the tree, e.g. the heading above it. */
+  label: string
+}
+
+interface Row {
+  node: NexxtTreeNode
+  depth: number
+  parentId: string | null
+  expandable: boolean
+  expanded: boolean
+  position: number
+  setSize: number
+}
+
+defineOptions({ name: 'NexxtTree' })
+
+const props = defineProps<NexxtTreeProps>()
+
+const selected = defineModel<string | null>('selected', { default: null })
+/** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
+const collapsed = defineModel<string[]>('collapsed', { default: () => [] })
+
+const INDENT = 22
+
+const root = useTemplateRef<HTMLElement>('root')
+const focusedId = ref<string | null>(null)
+
+// The visible rows in document order; children of a collapsed node are left out
+const rows = computed(() => {
+  const result: Row[] = []
+
+  const walk = (nodes: NexxtTreeNode[], depth: number, parentId: string | null) => {
+    nodes.forEach((node, index) => {
+      const expandable = !!node.children?.length
+      const expanded = expandable && !collapsed.value.includes(node.id)
+
+      result.push({
+        node,
+        depth,
+        parentId,
+        expandable,
+        expanded,
+        position: index + 1,
+        setSize: nodes.length,
+      })
+
+      if (expanded) walk(node.children!, depth + 1, node.id)
+    })
+  }
+
+  walk(props.nodes, 0, null)
+
+  return result
+})
+
+// A row is only highlighted while it is actually on screen; collapsing its parent fades the
+// highlight out rather than dropping it, so reopening slides it back from the same spot
+const selectionVisible = computed(
+  () => !!selected.value && rows.value.some((row) => row.node.id === selected.value),
+)
+
+/** Geometry of the moving highlight, relative to the tree container. */
+const highlight = ref({ top: 0, height: 0 })
+const highlightElement = useTemplateRef<HTMLElement>('highlightElement')
+
+/**
+ * How the highlight travels to its next spot. A selection arrives on the row it was clicked on,
+ * so it decelerates; a row change drags the highlight along with a row that is sliding under
+ * the `move` transition, so it has to use that transition's duration and curve or the two come
+ * apart on screen. The first render and layout corrections do not travel at all.
+ */
+const MOTION = {
+  none: '',
+  select: 'transition-[transform,opacity] duration-200 ease-out-strong',
+  move: 'transition-[transform,opacity] duration-200 ease-in-out-strong',
+}
+
+const motion = ref<keyof typeof MOTION>('none')
+
+/**
+ * Matched on the dataset rather than in a selector, so an id never needs escaping. A row that is
+ * leaving keeps its id for another beat, but it is out of the flow — `absolute` marks it — and
+ * folding the same node straight back open would otherwise find that stale one.
+ */
+const rowElement = (id: string | null | undefined) =>
+  Array.from(root.value?.querySelectorAll<HTMLElement>('[data-tree-id]') ?? []).find(
+    (element) => element.dataset.treeId === id && !element.classList.contains('absolute'),
+  )
+
+const updateHighlight = async () => {
+  await nextTick()
+  if (!root.value || !selectionVisible.value) return
+
+  const element = rowElement(selected.value)
+
+  if (element) highlight.value = { top: element.offsetTop, height: element.offsetHeight }
+}
+
+/**
+ * Reposition without animating, for the first render and for layout corrections. Reading the
+ * geometry makes the browser commit the new position while the transition is still off; the
+ * class coming back after that has nothing left to animate. Deliberately not `requestAnimationFrame`:
+ * that never fires while the tree sits in a hidden tab, which would leave it unable to animate.
+ */
+const jumpTo = async (reposition: () => Promise<void>) => {
+  const previous = motion.value
+  motion.value = 'none'
+
+  await reposition()
+  await nextTick()
+  root.value?.getBoundingClientRect()
+
+  motion.value = previous
+}
+
+// Rows above the selection can appear or disappear, so every row change is a reposition too
+watch([selected, rows], ([id], [previousId]) => {
+  motion.value = id === previousId ? 'move' : 'select'
+  updateHighlight()
+})
+
+// A resize corrects the geometry — late webfonts, a narrower panel — so it never animates.
+// Expanding and collapsing resizes the tree too, and there the highlight is mid-flight: forcing
+// the geometry then cancels its transition and teleports it to the row's end position.
+useResizeObserver(root, () => {
+  if (highlightElement.value?.getAnimations().length) return
+
+  jumpTo(updateHighlight)
+})
+
+onMounted(() =>
+  jumpTo(async () => {
+    await updateHighlight()
+    // Fallback metrics put the rows at another height, which would animate once the real font lands
+    await document.fonts?.ready
+    await updateHighlight()
+  }),
+)
+
+/**
+ * Children unfold from under their parent. They are inserted at their final spot, where the rows
+ * below them are still sliding down to make room, so each one starts stacked on the parent's
+ * bottom edge and travels to its slot on the same duration and curve as the `move` transition.
+ * Fading in is what keeps the stack readable: on the way out from under the parent the children
+ * cover each other and the rows below, so the label only comes up over the last stretch, once
+ * everything has all but landed. Inline rather than in `enter-active-class`, because the two
+ * properties need their own timing.
+ */
+const ENTER_TRANSITION = 'transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms'
+
+const onEnter = (element: Element) => {
+  const row = element as HTMLElement
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+  const parent = rowElement(
+    rows.value.find((item) => item.node.id === row.dataset.treeId)?.parentId,
+  )
+  const travel = parent ? row.offsetTop - (parent.offsetTop + parent.offsetHeight) : 0
+
+  row.style.transition = 'none'
+  row.style.transform = `translateY(${-travel}px)`
+  row.style.opacity = '0'
+  // Nothing to click on a row that is still on its way and cannot be read yet
+  row.style.pointerEvents = 'none'
+
+  // Commits the start of the travel while the transition is off, so only the way back animates
+  row.getBoundingClientRect()
+
+  row.style.transition = ENTER_TRANSITION
+  row.style.transform = ''
+  row.style.opacity = ''
+}
+
+const onEnterDone = (element: Element) => {
+  const row = element as HTMLElement
+
+  row.style.transition = ''
+  row.style.pointerEvents = ''
+}
+
+// One tab stop for the whole tree: the focused row, else the selected one, else the first
+const tabStopId = computed(() => {
+  const ids = rows.value.map((row) => row.node.id)
+
+  if (focusedId.value && ids.includes(focusedId.value)) return focusedId.value
+  if (selected.value && ids.includes(selected.value)) return selected.value
+
+  return ids[0] ?? null
+})
+
+const toggle = (id: string) => {
+  collapsed.value = collapsed.value.includes(id)
+    ? collapsed.value.filter((item) => item !== id)
+    : [...collapsed.value, id]
+}
+
+const focusRow = async (id: string) => {
+  focusedId.value = id
+  await nextTick()
+
+  // Matched on the dataset rather than in a selector, so an id never needs escaping
+  Array.from(root.value?.querySelectorAll<HTMLElement>('[data-tree-id]') ?? [])
+    .find((element) => element.dataset.treeId === id)
+    ?.focus()
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  const index = rows.value.findIndex((row) => row.node.id === tabStopId.value)
+  const row = rows.value[index]
+  if (!row) return
+
+  const move = (target: Row | undefined) => {
+    if (target) focusRow(target.node.id)
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      move(rows.value[index + 1])
+      break
+    case 'ArrowUp':
+      move(rows.value[index - 1])
+      break
+    case 'Home':
+      move(rows.value[0])
+      break
+    case 'End':
+      move(rows.value[rows.value.length - 1])
+      break
+    case 'ArrowRight':
+      if (row.expandable && !row.expanded) toggle(row.node.id)
+      else if (row.expanded) move(rows.value[index + 1])
+      break
+    case 'ArrowLeft':
+      if (row.expanded) toggle(row.node.id)
+      else if (row.parentId) focusRow(row.parentId)
+      break
+    case 'Enter':
+    case ' ':
+      selected.value = row.node.id
+      break
+    default:
+      return
+  }
+
+  event.preventDefault()
+}
+</script>
+
+<template>
+  <div ref="root" role="tree" :aria-label="label" class="relative isolate" @keydown="onKeydown">
+    <!-- One highlight for the whole tree: selecting another row slides it instead of
+         repainting two backgrounds. Behind the rows, so their hover still reads. -->
+    <div
+      ref="highlightElement"
+      aria-hidden="true"
+      class="pointer-events-none absolute top-0 left-0 -z-10 w-full rounded-md bg-cornflower-blue-50 motion-reduce:transition-none"
+      :class="[MOTION[motion], selectionVisible ? 'opacity-100' : 'opacity-0']"
+      :style="{ transform: `translateY(${highlight.top}px)`, height: `${highlight.height}px` }"
+      data-tree-highlight
+    />
+
+    <!-- A `group` keeps the tree/treeitem relation intact now that the rows sit one level
+         deeper. Leaving rows go absolute so the remaining ones slide up right away, and go
+         invisible with them: out of the flow they stack on the first one's spot while the rows
+         below slide over them, which read as a flash of doubled labels. Folding away is not a
+         departure worth animating — the rows sliding up under the parent tell the story. -->
+    <TransitionGroup
+      tag="div"
+      role="group"
+      leave-active-class="invisible absolute w-full transition-none!"
+      move-class="transition-transform duration-200 ease-in-out-strong motion-reduce:transition-none"
+      @enter="onEnter"
+      @after-enter="onEnterDone"
+      @enter-cancelled="onEnterDone"
+    >
+      <!-- Every row keeps `small-normal`: switching the selected one to semibold widened its
+           label, which made the text jump. Colour carries the selection instead. -->
+      <div
+        v-for="row in rows"
+        :key="row.node.id"
+        role="treeitem"
+        :aria-level="row.depth + 1"
+        :aria-posinset="row.position"
+        :aria-setsize="row.setSize"
+        :aria-selected="selected === row.node.id"
+        :aria-expanded="row.expandable ? row.expanded : undefined"
+        :tabindex="row.node.id === tabStopId ? 0 : -1"
+        :data-tree-id="row.node.id"
+        class="group mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+        :class="
+          selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-800 hover:bg-gray-100'
+        "
+        :style="{ paddingLeft: `${row.depth * INDENT + 4}px` }"
+        @click="selected = row.node.id"
+        @focus="focusedId = row.node.id"
+      >
+        <!-- Out of the tab order: the arrow keys expand and collapse for keyboard users.
+             Stays grey on the selected row: the chevron is a control, not part of the label. -->
+        <button
+          v-if="row.expandable"
+          type="button"
+          tabindex="-1"
+          aria-hidden="true"
+          class="flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors duration-150 group-hover:text-gray-600 hover:text-gray-600 motion-reduce:transition-none"
+          @click.stop="toggle(row.node.id)"
+        >
+          <NexxtIcon
+            name="chevron-down"
+            class="extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none"
+            :class="!row.expanded && '-rotate-90'"
+          />
+        </button>
+        <span v-else class="size-5 shrink-0" />
+
+        <NexxtIcon
+          v-if="row.node.icon"
+          :name="row.node.icon"
+          class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
+          :class="selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
+        />
+        <span class="truncate">{{ row.node.label }}</span>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>

package/src/components.json

@@ -46,6 +46,7 @@
   "NexxtTimelineLanes": "components/molecules/TimelineLanes/TimelineLanes.vue",
   "NexxtToast": "components/molecules/Toast/Toast.vue",
   "NexxtToggleGroup": "components/molecules/ToggleGroup/ToggleGroup.vue",
+  "NexxtTree": "components/molecules/Tree/Tree.vue",
   "NexxtCalendar": "components/organisms/Calendar/Calendar.vue",
   "NexxtColorPicker": "components/organisms/ColorPicker/ColorPicker.vue",
   "NexxtCombobox": "components/organisms/Combobox/Combobox.vue",

package/src/index.ts

@@ -18,6 +18,7 @@ export type {
   NexxtPageCardSlots,
 } from './components/molecules/PageCard/PageCard.vue'
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue'
+export type { NexxtTreeNode, NexxtTreeProps } from './components/molecules/Tree/Tree.vue'
 export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
@@ -137,4 +138,5 @@ export { default as NexxtToast } from './components/molecules/Toast/Toast.vue'
 export { default as NexxtToaster } from './components/organisms/Toaster/Toaster.vue'
 export { default as NexxtToggleGroup } from './components/molecules/ToggleGroup/ToggleGroup.vue'
 export { default as NexxtTooltip } from './components/atoms/Tooltip/Tooltip.vue'
+export { default as NexxtTree } from './components/molecules/Tree/Tree.vue'
 export { default as NexxtVideoPlayer } from './components/organisms/VideoPlayer/VideoPlayer.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -49,4 +49,10 @@
 
   --spacing-8xl: 100rem;
   --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
+
+  /* Motion easings. `ease-out-strong` decelerates hard: things that arrive or
+     settle into place. `ease-in-out-strong` for elements that move from one
+     spot to another. */
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 }