@plumile/backoffice-react 0.1.116 → 0.1.120

package/lib/esm/components/backoffice/billing/BackofficeBillingUsageChart.js

@@ -0,0 +1,60 @@
+import { rangeText as e, root as t, totalValue as n } from "./backofficeBillingUsageChart.css.js";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { FormattedDate as o } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
+import { TimeSeriesLineChart as s } from "@plumile/ui/components/charts/TimeSeriesLineChart.js";
+import { formatCurrencyAmount as c } from "@plumile/ui/shared/currencyAmount.js";
+import { toUtcDailyCategorySeries as l } from "@plumile/ui/shared/timeSeries.js";
+//#region src/components/backoffice/billing/BackofficeBillingUsageChart.tsx
+var u = "->", d = ({ ariaLabel: d, buckets: f, categories: p, currency: m, emptyLabel: h, from: g, rangePrefix: _, to: v, totalAmount: y }) => {
+	let b = r(() => p.map((e) => e.id), [p]), x = r(() => Object.fromEntries(p.map((e) => [e.id, e.color])), [p]), S = r(() => Object.fromEntries(p.map((e) => [e.id, e.label])), [p]), C = r(() => g == null || v == null ? [] : l({
+		fromIsoDateTime: g,
+		toIsoDateTime: v,
+		buckets: f,
+		categories: b
+	}), [
+		f,
+		b,
+		g,
+		v
+	]), w = (e) => c({
+		amount: e,
+		currency: m
+	});
+	return f.length === 0 ? /* @__PURE__ */ i("p", {
+		className: e,
+		children: h
+	}) : /* @__PURE__ */ a("div", {
+		className: t,
+		children: [
+			/* @__PURE__ */ i("p", {
+				className: n,
+				children: w(y)
+			}),
+			g != null && v != null && /* @__PURE__ */ a("p", {
+				className: "txvbqb8p txvbqbva3 txvbqbfcp",
+				children: [
+					_,
+					" ",
+					/* @__PURE__ */ i(o, { value: g }),
+					" ",
+					u,
+					" ",
+					/* @__PURE__ */ i(o, { value: v })
+				]
+			}),
+			/* @__PURE__ */ i(s, {
+				ariaLabel: d,
+				categoryColorById: x,
+				categoryLabel: (e) => S[e] ?? e,
+				categoryOrder: b,
+				formatValue: w,
+				series: C
+			})
+		]
+	});
+};
+//#endregion
+export { d as BackofficeBillingUsageChart, d as default };
+
+//# sourceMappingURL=BackofficeBillingUsageChart.js.map

package/lib/esm/components/backoffice/billing/BackofficeBillingUsageChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeBillingUsageChart.js","names":[],"sources":["../../../../../src/components/backoffice/billing/BackofficeBillingUsageChart.tsx"],"sourcesContent":["import { useMemo, type JSX } from 'react';\nimport { FormattedDate } from '@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js';\nimport { TimeSeriesLineChart } from '@plumile/ui/components/charts/TimeSeriesLineChart.js';\nimport { formatCurrencyAmount } from '@plumile/ui/shared/currencyAmount.js';\nimport { toUtcDailyCategorySeries } from '@plumile/ui/shared/timeSeries.js';\n\nimport * as styles from './backofficeBillingUsageChart.css.js';\n\nexport type BackofficeBillingUsageChartBucket = {\n  readonly day: string;\n  readonly category: string;\n  readonly value: number;\n};\n\nexport type BackofficeBillingUsageChartCategory = {\n  readonly id: string;\n  readonly label: string;\n  readonly color: string;\n};\n\nexport type BackofficeBillingUsageChartProps = {\n  readonly currency: string;\n  readonly totalAmount: number;\n  readonly from: string | null;\n  readonly to: string | null;\n  readonly buckets: readonly BackofficeBillingUsageChartBucket[];\n  readonly categories: readonly BackofficeBillingUsageChartCategory[];\n  readonly emptyLabel: string;\n  readonly rangePrefix: string;\n  readonly ariaLabel: string;\n};\n\nconst dateSeparator = '->';\n\nexport const BackofficeBillingUsageChart = ({\n  ariaLabel,\n  buckets,\n  categories,\n  currency,\n  emptyLabel,\n  from,\n  rangePrefix,\n  to,\n  totalAmount,\n}: BackofficeBillingUsageChartProps): JSX.Element => {\n  const categoryOrder = useMemo(() => {\n    return categories.map((category) => {\n      return category.id;\n    });\n  }, [categories]);\n\n  const categoryColorById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.color];\n      }),\n    );\n  }, [categories]);\n\n  const categoryLabelById = useMemo(() => {\n    return Object.fromEntries(\n      categories.map((category) => {\n        return [category.id, category.label];\n      }),\n    );\n  }, [categories]);\n\n  const series = useMemo(() => {\n    if (from == null || to == null) {\n      return [];\n    }\n\n    return toUtcDailyCategorySeries({\n      fromIsoDateTime: from,\n      toIsoDateTime: to,\n      buckets,\n      categories: categoryOrder,\n    });\n  }, [buckets, categoryOrder, from, to]);\n\n  const formatChartValue = (value: number): string => {\n    return formatCurrencyAmount({\n      amount: value,\n      currency,\n    });\n  };\n\n  if (buckets.length === 0) {\n    return <p className={styles.rangeText}>{emptyLabel}</p>;\n  }\n\n  return (\n    <div className={styles.root}>\n      <p className={styles.totalValue}>{formatChartValue(totalAmount)}</p>\n      {from != null && to != null && (\n        <p className={styles.rangeText}>\n          {rangePrefix} <FormattedDate value={from} /> {dateSeparator}{' '}\n          <FormattedDate value={to} />\n        </p>\n      )}\n      <TimeSeriesLineChart\n        ariaLabel={ariaLabel}\n        categoryColorById={categoryColorById}\n        categoryLabel={(category) => {\n          return categoryLabelById[category] ?? category;\n        }}\n        categoryOrder={categoryOrder}\n        formatValue={formatChartValue}\n        series={series}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeBillingUsageChart;\n"],"mappings":";;;;;;;;AAgCA,IAAM,IAAgB,MAET,KAA+B,EAC1C,cACA,YACA,eACA,aACA,eACA,SACA,gBACA,OACA,qBACmD;CACnD,IAAM,IAAgB,QACb,EAAW,KAAK,MACd,EAAS,GAChB,EACD,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAoB,QACjB,OAAO,YACZ,EAAW,KAAK,MACP,CAAC,EAAS,IAAI,EAAS,MAAM,CACpC,CACH,EACA,CAAC,EAAW,CAAC,EAEV,IAAS,QACT,KAAQ,QAAQ,KAAM,OACjB,EAAE,GAGJ,EAAyB;EAC9B,iBAAiB;EACjB,eAAe;EACf;EACA,YAAY;EACb,CAAC,EACD;EAAC;EAAS;EAAe;EAAM;EAAG,CAAC,EAEhC,KAAoB,MACjB,EAAqB;EAC1B,QAAQ;EACR;EACD,CAAC;CAOJ,OAJI,EAAQ,WAAW,IACd,kBAAC,KAAD;EAAG,WAAW;YAAmB;EAAe,CAAA,GAIvD,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,KAAD;IAAG,WAAW;cAAoB,EAAiB,EAAY;IAAK,CAAA;GACnE,KAAQ,QAAQ,KAAM,QACrB,kBAAC,KAAD;IAAG,WAAW;cAAd;KACG;KAAY;KAAC,kBAAC,GAAD,EAAe,OAAO,GAAQ,CAAA;;KAAE;KAAe;KAC7D,kBAAC,GAAD,EAAe,OAAO,GAAM,CAAA;KAC1B;;GAEN,kBAAC,GAAD;IACa;IACQ;IACnB,gBAAgB,MACP,EAAkB,MAAa;IAEzB;IACf,aAAa;IACL;IACR,CAAA;GACE"}

package/lib/esm/components/backoffice/billing/backofficeBillingUsageChart.css.js

@@ -0,0 +1,7 @@
+/* empty css                                           */
+//#region src/components/backoffice/billing/backofficeBillingUsageChart.css.ts
+var e = "txvbqb9ip txvbqbai7 txvbqbaog", t = "txvbqb9y txvbqba9 txvbqbamp txvbqbv9z txvbqbfcp", n = "txvbqb8p txvbqbva3 txvbqbfcp";
+//#endregion
+export { n as rangeText, e as root, t as totalValue };
+
+//# sourceMappingURL=backofficeBillingUsageChart.css.js.map

package/lib/esm/components/backoffice/billing/backofficeBillingUsageChart.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeBillingUsageChart.css.js","names":[],"sources":["../../../../../src/components/backoffice/billing/backofficeBillingUsageChart.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const totalValue = sprinkles({\n  fontSize: {\n    base: '2xl',\n    md: '3xl',\n  },\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const rangeText = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n  margin: 0,\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/columns/buildDataTableColumns.js

@@ -1,8 +1,8 @@
 import { BackofficeInlineLink as e } from "../links/BackofficeInlineLink.js";
 import { Fragment as t, jsx as n } from "react/jsx-runtime";
-import { BACKOFFICE_DATE_TIME_OPTIONS as r } from "@plumile/backoffice-core/constants.js";
-import i from "@plumile/router/routing/Link.js";
-import { FormattedDate as a } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
+import { FormattedDate as r } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
+import { BACKOFFICE_DATE_TIME_OPTIONS as i } from "@plumile/backoffice-core/constants.js";
+import a from "@plumile/router/routing/Link.js";
 import { Tag as o } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
 //#region src/components/backoffice/columns/buildDataTableColumns.tsx
 var s = (e, t) => e(t), c = (e, t) => e == null || typeof e == "string" && e.trim() === "" ? t : String(e), l = (e) => {
@@ -25,7 +25,7 @@ function u(u, d) {
 				case "text": return c(l.value(s), m);
 				case "link": {
 					let e = l.value(s);
-					return e == null || typeof e == "string" && e.trim() === "" ? m : /* @__PURE__ */ n(i, {
+					return e == null || typeof e == "string" && e.trim() === "" ? m : /* @__PURE__ */ n(a, {
 						to: l.to(s),
 						children: e
 					});
@@ -39,10 +39,10 @@ function u(u, d) {
 						children: e
 					});
 				}
-				case "dateTime": return /* @__PURE__ */ n(a, {
+				case "dateTime": return /* @__PURE__ */ n(r, {
 					value: l.value(s),
 					fallback: m,
-					options: r
+					options: i
 				});
 				case "entityRef": {
 					let t = l.value(s);

package/lib/esm/components/backoffice/layout/buildSidebarSections.js

@@ -1,74 +1,80 @@
-import { buildEntityGroupLookup as e, isActivePath as t, resolveGroupItems as n, resolveHubEntityIds as r, resolveLabel as i, resolveSidebarGroups as a, resolveSidebarHub as o } from "./sidebarUtils.js";
-import { actionButton as s } from "./backofficeSidebarActions.css.js";
-import { jsx as c } from "react/jsx-runtime";
-import { SidebarTasksSvg as l } from "@plumile/ui/icons/SidebarTasksSvg.js";
-import { SidebarHomeSvg as u } from "@plumile/ui/icons/SidebarHomeSvg.js";
-import { BackofficeSidebarHistorySvg as d } from "@plumile/ui/icons/backoffice/BackofficeSidebarHistorySvg.js";
-import { GripDotsSvg as f } from "@plumile/ui/icons/GripDotsSvg.js";
-import { PinFilledSvg as p } from "@plumile/ui/icons/PinFilledSvg.js";
-import { PinSvg as m } from "@plumile/ui/icons/PinSvg.js";
+import { buildEntityGroupLookup as e, isActivePath as t, joinBackofficePath as n, resolveGroupItems as r, resolveHubEntityIds as i, resolveLabel as a, resolveSidebarGroups as o, resolveSidebarHub as s } from "./sidebarUtils.js";
+import { actionButton as c } from "./backofficeSidebarActions.css.js";
+import { findBackofficeDashboardRegistration as l } from "../../../provider/dashboardRegistrations.js";
+import { jsx as u } from "react/jsx-runtime";
+import { SidebarTasksSvg as d } from "@plumile/ui/icons/SidebarTasksSvg.js";
+import { SidebarHomeSvg as f } from "@plumile/ui/icons/SidebarHomeSvg.js";
+import { BackofficeSidebarHistorySvg as p } from "@plumile/ui/icons/backoffice/BackofficeSidebarHistorySvg.js";
+import { GripDotsSvg as m } from "@plumile/ui/icons/GripDotsSvg.js";
+import { PinFilledSvg as h } from "@plumile/ui/icons/PinFilledSvg.js";
+import { PinSvg as g } from "@plumile/ui/icons/PinSvg.js";
 //#region src/components/backoffice/layout/buildSidebarSections.tsx
-var h = (e, t, n = 18) => e == null ? t ?? null : /* @__PURE__ */ c(e, {
+var _ = (e, t, n = 18) => e == null ? t ?? null : /* @__PURE__ */ u(e, {
 	width: n,
 	height: n,
 	"aria-hidden": "true"
 });
-function g(g) {
-	let { basePath: _, pathname: v, entities: y, sidebar: b, permissions: x, searchQuery: S, tApp: C, t: w, pinnedEntityIds: T = [], recentItems: E = [], onTogglePin: D, onReorderPin: O, collapsedByGroupId: k, onGroupCollapsedChange: A, sidebarCollapsed: j = !1 } = g, M = a(y, b), N = Object.entries(M), P = new Set(T), F = w("sidebar.actions.pin"), I = w("sidebar.actions.unpin"), L = w("sidebar.actions.reorder"), R = e(M, b), z = S?.trim().toLowerCase() ?? "", B = (e) => z === "" || e.toLowerCase().includes(z), V = (e) => {
-		if (D == null) return null;
-		let t = P.has(e), n = F, r = m;
-		return t && (n = I, r = p), /* @__PURE__ */ c("button", {
+function v(v) {
+	let { basePath: y, pathname: b, entities: x, dashboards: S = [], sidebar: C, permissions: w, searchQuery: T, tApp: E, t: D, pinnedEntityIds: O = [], recentItems: k = [], onTogglePin: A, onReorderPin: j, collapsedByGroupId: M, onGroupCollapsedChange: N, sidebarCollapsed: P = !1 } = v, F = o(x, C), I = Object.entries(F), L = new Set(O), R = D("sidebar.actions.pin"), z = D("sidebar.actions.unpin"), B = D("sidebar.actions.reorder"), V = e(F, C), H = T?.trim().toLowerCase() ?? "", U = (e) => H === "" || e.toLowerCase().includes(H), W = (e) => {
+		if (A == null) return null;
+		let t = L.has(e), n = R, r = g;
+		return t && (n = z, r = h), /* @__PURE__ */ u("button", {
 			type: "button",
-			className: s,
+			className: c,
 			"aria-pressed": t,
 			"aria-label": n,
 			title: n,
 			onClick: (t) => {
-				t.preventDefault(), t.stopPropagation(), D(e);
+				t.preventDefault(), t.stopPropagation(), A(e);
 			},
-			children: /* @__PURE__ */ c(r, {
+			children: /* @__PURE__ */ u(r, {
 				width: 14,
 				height: 14,
 				"aria-hidden": "true"
 			})
 		});
-	}, H = (e) => {
-		if (b?.isItemVisible?.({
+	}, G = (e, r) => {
+		let i = e?.id ?? "dashboard", o = {
 			kind: "dashboard",
-			id: "dashboard"
-		}, x) === !1) return null;
-		let n = w("sidebar.items.dashboard");
-		return B(n) ? {
-			id: "dashboard",
+			id: i
+		};
+		if (C?.isItemVisible?.(o, w) === !1) return null;
+		let s = l(S, i), c = e?.label;
+		if (c == null && s != null && (c = a(s.label, E)), c ??= D("sidebar.items.dashboard"), !U(c)) return null;
+		let d = y, p = "dashboard";
+		i !== "dashboard" && (d = n(y, `dashboard/${i}`), p = `dashboard-${i}`);
+		let m = t(b, d);
+		return i === "dashboard" && (m = b === y || b === `${y}/dashboard`), {
+			id: p,
 			data: {
 				kind: "dashboard",
-				id: "dashboard",
-				groupId: e
+				id: i,
+				groupId: r
 			},
-			label: n,
-			href: _,
-			icon: h(void 0, /* @__PURE__ */ c(u, {
+			label: c,
+			href: d,
+			icon: _(e?.icon ?? s?.icon, /* @__PURE__ */ u(f, {
 				width: 18,
 				height: 18,
 				"aria-hidden": "true"
 			})),
-			isActive: t(v, _),
-			ariaLabel: n
-		} : null;
-	}, U = (e) => {
-		let { entityId: n, groupId: r, groupIcon: a, itemIcon: o, itemLabel: s, enableReorder: u } = e, d = y[n];
-		if (d == null) return null;
-		let p = {
+			isActive: m,
+			ariaLabel: c
+		};
+	}, K = (e) => {
+		let { entityId: n, groupId: r, groupIcon: i, itemIcon: o, itemLabel: s, enableReorder: c } = e, l = x[n];
+		if (l == null) return null;
+		let f = {
 			kind: "entity",
 			id: n
 		};
-		if (d.kind === "tool" && (p = {
+		if (l.kind === "tool" && (f = {
 			kind: "tool",
 			id: n
-		}), b?.isItemVisible?.(p, x) === !1) return null;
-		if (d.kind === "tool") {
-			let e = s ?? i(d.label, C);
-			return z !== "" && !e.toLowerCase().includes(z) ? null : {
+		}), C?.isItemVisible?.(f, w) === !1) return null;
+		if (l.kind === "tool") {
+			let e = s ?? a(l.label, E);
+			return H !== "" && !e.toLowerCase().includes(H) ? null : {
 				id: `tool-${n}`,
 				data: {
 					kind: "tool",
@@ -76,69 +82,54 @@ function g(g) {
 					groupId: r
 				},
 				label: e,
-				href: d.routes.list,
-				icon: h(o ?? a, /* @__PURE__ */ c(l, {
+				href: l.routes.list,
+				icon: _(o ?? i, /* @__PURE__ */ u(d, {
 					width: 18,
 					height: 18,
 					"aria-hidden": "true"
 				})),
-				isActive: t(v, d.routes.list),
+				isActive: t(b, l.routes.list),
 				ariaLabel: e,
-				actionSlot: V(n)
+				actionSlot: W(n)
 			};
 		}
-		if (!d.hasList) return null;
-		let m = s ?? i(d.label, C);
-		if (z !== "" && !m.toLowerCase().includes(z)) return null;
-		let g, _, S, w, T = !1;
-		u === !0 && O != null && (T = !0, g = /* @__PURE__ */ c(f, {
+		if (!l.hasList) return null;
+		let p = s ?? a(l.label, E);
+		if (H !== "" && !p.toLowerCase().includes(H)) return null;
+		let h;
+		c === !0 && j != null && (h = /* @__PURE__ */ u(m, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
-		}), _ = (e) => {
-			let { dataTransfer: t } = e;
-			t.effectAllowed = "move", t.setData("text/plain", n);
-		}, S = (e) => {
-			e.preventDefault();
-			let { dataTransfer: t } = e;
-			t.dropEffect = "move";
-		}, w = (e) => {
-			e.preventDefault();
-			let t = e.dataTransfer.getData("text/plain");
-			t === "" || t === n || O(t, n);
-		});
-		let E;
-		return g != null && (E = L), {
+		}));
+		let g;
+		return h != null && (g = B), {
 			id: n,
 			data: {
 				kind: "entity",
 				id: n,
 				groupId: r
 			},
-			label: m,
-			href: d.routes.list,
-			icon: h(o ?? a, /* @__PURE__ */ c(l, {
+			label: p,
+			href: l.routes.list,
+			icon: _(o ?? i, /* @__PURE__ */ u(d, {
 				width: 18,
 				height: 18,
 				"aria-hidden": "true"
 			})),
-			isActive: t(v, d.routes.list),
-			ariaLabel: m,
-			actionSlot: V(n),
-			dragHandleSlot: g,
-			dragHandleLabel: E,
-			draggable: T,
-			onDragStart: _,
-			onDragOver: S,
-			onDrop: w
+			isActive: t(b, l.routes.list),
+			ariaLabel: p,
+			actionSlot: W(n),
+			dragHandleSlot: h,
+			dragHandleLabel: g
 		};
-	}, W = (e) => {
-		let { hub: n, groupId: a, icon: o } = e, s = {
+	}, q = (e) => {
+		let { hub: n, groupId: r, icon: o } = e, s = {
 			kind: "hub",
 			id: n.id
 		};
-		if (b?.isItemVisible?.(s, x) === !1) return null;
-		let u = r(n), d = u.map((e) => y[e] ?? null).filter((e) => {
+		if (C?.isItemVisible?.(s, w) === !1) return null;
+		let c = i(n), l = c.map((e) => x[e] ?? null).filter((e) => {
 			if (e == null) return !1;
 			let t = "entity";
 			e.kind === "tool" && (t = "tool");
@@ -146,54 +137,61 @@ function g(g) {
 				kind: t,
 				id: e.id
 			};
-			return !(b?.isItemVisible?.(n, x) === !1 || e.kind !== "tool" && !e.hasList);
+			return !(C?.isItemVisible?.(n, w) === !1 || e.kind !== "tool" && !e.hasList);
 		});
-		if (u.length > 0 && d.length === 0) return null;
-		let f = i(n.title, C), p = B(f), m = d.some((e) => B(i(e.label, C)));
+		if (c.length > 0 && l.length === 0) return null;
+		let f = a(n.title, E), p = U(f), m = l.some((e) => U(a(e.label, E)));
 		if (!p && !m) return null;
-		let g = t(v, n.href) || d.some((e) => t(v, e.routes.list));
+		let h = t(b, n.href) || l.some((e) => t(b, e.routes.list));
 		return {
 			id: `hub-${n.id}`,
 			data: {
 				kind: "hub",
 				id: n.id,
-				groupId: a
+				groupId: r
 			},
 			label: f,
 			href: n.href,
-			icon: h(o, /* @__PURE__ */ c(l, {
+			icon: _(o, /* @__PURE__ */ u(d, {
 				width: 18,
 				height: 18,
 				"aria-hidden": "true"
 			})),
-			isActive: g,
+			isActive: h,
 			ariaLabel: f
 		};
-	}, G = [], K = b?.primaryItems ?? [];
-	if (K.length > 0) {
-		let e = K.map((e) => {
-			if (e.kind === "dashboard") return H();
-			if (e.kind === "hub") return W({
-				hub: o(e, b),
+	}, J = [], Y = C?.primaryItems ?? [];
+	if (Y.length > 0) {
+		let e = Y.map((e) => {
+			if (e.kind === "dashboard") {
+				let t;
+				return e.label != null && (t = a(e.label, E)), G({
+					id: e.id,
+					icon: e.icon,
+					label: t
+				});
+			}
+			if (e.kind === "hub") return q({
+				hub: s(e, C),
 				icon: e.icon
 			});
 			let t;
-			return e.label != null && (t = i(e.label, C)), U({
+			return e.label != null && (t = a(e.label, E)), K({
 				entityId: e.id,
 				itemIcon: e.icon,
 				itemLabel: t
 			});
 		}).filter((e) => e != null);
-		e.length > 0 && G.push({
+		e.length > 0 && J.push({
 			id: "primary",
 			items: e,
 			collapsible: !1
 		});
 	}
-	if (T.length > 0) {
-		let e = T.map((e) => {
-			let t = R.get(e);
-			return U({
+	if (O.length > 0) {
+		let e = O.map((e) => {
+			let t = V.get(e);
+			return K({
 				entityId: e,
 				groupId: t?.groupId,
 				groupIcon: t?.groupIcon,
@@ -201,27 +199,39 @@ function g(g) {
 				enableReorder: !0
 			});
 		}).filter((e) => e != null);
-		e.length > 0 && G.push({
-			id: "pinned",
-			title: w("sidebar.sections.pinned"),
-			icon: h(void 0, /* @__PURE__ */ c(m, {
-				width: 16,
-				height: 16,
-				"aria-hidden": "true"
-			})),
-			items: e,
-			collapsible: !1
-		});
+		if (e.length > 0) {
+			let t;
+			j != null && e.length > 1 && (t = {
+				enabled: !0,
+				onReorder: j
+			});
+			let n = e;
+			t ?? (n = e.map((e) => {
+				let { dragHandleSlot: t, dragHandleLabel: n, ...r } = e;
+				return r;
+			})), J.push({
+				id: "pinned",
+				title: D("sidebar.sections.pinned"),
+				icon: _(void 0, /* @__PURE__ */ u(g, {
+					width: 16,
+					height: 16,
+					"aria-hidden": "true"
+				})),
+				items: n,
+				collapsible: !1,
+				reorder: t
+			});
+		}
 	}
-	if (E.length > 0) {
-		let e = E.map((e) => {
-			if (y[e.id] == null) return null;
+	if (k.length > 0) {
+		let e = k.map((e) => {
+			if (x[e.id] == null) return null;
 			let n = {
 				kind: e.kind,
 				id: e.id
 			};
-			if (b?.isItemVisible?.(n, x) === !1 || z !== "" && !e.label.toLowerCase().includes(z)) return null;
-			let r = R.get(e.id);
+			if (C?.isItemVisible?.(n, w) === !1 || H !== "" && !e.label.toLowerCase().includes(H)) return null;
+			let r = V.get(e.id);
 			return {
 				id: `recent-${e.kind}-${e.id}`,
 				data: {
@@ -231,19 +241,19 @@ function g(g) {
 				},
 				label: e.label,
 				href: e.href,
-				icon: h(r?.itemIcon ?? r?.groupIcon, /* @__PURE__ */ c(l, {
+				icon: _(r?.itemIcon ?? r?.groupIcon, /* @__PURE__ */ u(d, {
 					width: 18,
 					height: 18,
 					"aria-hidden": "true"
 				})),
-				isActive: t(v, e.href),
+				isActive: t(b, e.href),
 				ariaLabel: e.label
 			};
 		}).filter((e) => e != null);
-		e.length > 0 && G.push({
+		e.length > 0 && J.push({
 			id: "recent",
-			title: w("sidebar.sections.recent"),
-			icon: h(void 0, /* @__PURE__ */ c(d, {
+			title: D("sidebar.sections.recent"),
+			icon: _(void 0, /* @__PURE__ */ u(p, {
 				width: 16,
 				height: 16,
 				"aria-hidden": "true"
@@ -252,55 +262,61 @@ function g(g) {
 			collapsible: !1
 		});
 	}
-	return N.forEach(([e, t]) => {
-		if (t.isVisible != null && !t.isVisible(x)) return;
-		let r = [], a = n(t);
-		a.length > 0 && a.forEach((n) => {
-			if (n.kind === "dashboard") {
-				let t = H(e);
-				t != null && r.push(t);
+	return I.forEach(([e, t]) => {
+		if (t.isVisible != null && !t.isVisible(w)) return;
+		let n = [], i = r(t);
+		i.length > 0 && i.forEach((r) => {
+			if (r.kind === "dashboard") {
+				let i;
+				r.label != null && (i = a(r.label, E));
+				let o = G({
+					id: r.id,
+					icon: r.icon ?? t.icon,
+					label: i
+				}, e);
+				o != null && n.push(o);
 				return;
 			}
-			if (n.kind === "hub") {
-				let i = W({
-					hub: o(n, b),
+			if (r.kind === "hub") {
+				let i = q({
+					hub: s(r, C),
 					groupId: e,
-					icon: n.icon ?? t.icon
+					icon: r.icon ?? t.icon
 				});
-				i != null && r.push(i);
+				i != null && n.push(i);
 				return;
 			}
-			let a;
-			n.label != null && (a = i(n.label, C));
-			let s = U({
-				entityId: n.id,
+			let i;
+			r.label != null && (i = a(r.label, E));
+			let o = K({
+				entityId: r.id,
 				groupId: e,
 				groupIcon: t.icon,
-				itemIcon: n.icon,
-				itemLabel: a
+				itemIcon: r.icon,
+				itemLabel: i
 			});
-			s != null && r.push(s);
+			o != null && n.push(o);
 		});
-		let s = r;
-		if (j && t.behavior?.showInCollapsedRail !== !0 && (s = r.filter((e) => e.id === "dashboard" || e.isActive === !0)), s.length === 0) return;
+		let o = n;
+		if (P && t.behavior?.showInCollapsedRail !== !0 && (o = n.filter((e) => e.data?.kind === "dashboard" || e.isActive === !0)), o.length === 0) return;
 		let c;
-		t.title != null && (c = i(t.title, C));
-		let l = k?.[e], u;
-		A != null && (u = (t) => {
-			A(e, t);
-		}), G.push({
+		t.title != null && (c = a(t.title, E));
+		let l = M?.[e], u;
+		N != null && (u = (t) => {
+			N(e, t);
+		}), J.push({
 			id: e,
 			title: c,
-			icon: h(t.icon, void 0, 16),
-			items: s,
+			icon: _(t.icon, void 0, 16),
+			items: o,
 			collapsible: t.behavior?.collapsible ?? !0,
 			defaultCollapsed: t.behavior?.defaultCollapsed ?? !0,
 			isCollapsed: l,
 			onCollapsedChange: u
 		});
-	}), G;
+	}), J;
 }
 //#endregion
-export { g as buildSidebarSections };
+export { v as buildSidebarSections };
 
 //# sourceMappingURL=buildSidebarSections.js.map