@plumile/backoffice-react 0.2.3 → 0.2.6

package/lib/esm/pages/BackofficeEntityListPage.helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListPage.helpers.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.helpers.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'react';\n\nimport type {\n  BackofficeRuntimeEntityFormMutationActionSpec,\n  BackofficeEntityRouteActionSpec,\n  BackofficeListActionSpec,\n  BackofficeRuntimeConnectionListConfig,\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport type { DataTableColumn } from '@plumile/ui/components/data-table/DataTable.js';\nimport type { TFunction } from 'i18next';\n\nimport type { BackofficeSizedDataTableColumn } from '../components/backoffice/columns/buildDataTableColumns.js';\n\ntype ButtonVariant = ComponentProps<typeof Button>['variant'];\n\nconst ROW_FLAGS_SLOT_PX = 24;\nconst ROW_FLAGS_GAP_PX = 6;\nconst ROW_FLAGS_PADDING_X_PX = 4;\n\nconst ACTIONS_SLOT_PX = 32;\nconst ACTIONS_GAP_PX = 8;\nconst ACTIONS_PADDING_X_PX = 12;\nconst ACTIONS_SAFETY_PX = 4;\n\nconst listColumnTrackBySize: Record<\n  BackofficeSizedDataTableColumn<unknown>['size'],\n  string\n> = {\n  xs: 'minmax(3.5rem, 7rem)',\n  s: 'minmax(5rem, 10rem)',\n  statusAction: 'minmax(7rem, 12rem)',\n  m: 'minmax(7rem, 14rem)',\n  l: 'minmax(9rem, 18rem)',\n  xl: 'minmax(11rem, 24rem)',\n  fluid: 'minmax(0, 1fr)',\n};\n\nexport const computeRowFlagsColumnWidthPx = (flagCount: number): number => {\n  if (flagCount <= 0) {\n    return 0;\n  }\n  return (\n    ROW_FLAGS_PADDING_X_PX * 2 +\n    ROW_FLAGS_SLOT_PX * flagCount +\n    ROW_FLAGS_GAP_PX * Math.max(0, flagCount - 1)\n  );\n};\n\nexport const computeActionsColumnWidthPx = (actionCount: number): number => {\n  if (actionCount <= 0) {\n    return 0;\n  }\n  return (\n    ACTIONS_SAFETY_PX +\n    ACTIONS_PADDING_X_PX * 2 +\n    ACTIONS_SLOT_PX * actionCount +\n    ACTIONS_GAP_PX * Math.max(0, actionCount - 1)\n  );\n};\n\nexport const resolveTrackBySize = (\n  column: DataTableColumn<unknown>,\n  fallback: string,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '60px';\n  }\n  if (column.isPrimary === true) {\n    return 'minmax(0, 1.4fr)';\n  }\n  if ('size' in column && typeof column.size === 'string') {\n    return listColumnTrackBySize[\n      column.size as BackofficeSizedDataTableColumn<unknown>['size']\n    ];\n  }\n  return fallback;\n};\n\nexport const isRouteAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityRouteActionSpec<null> => {\n  return action.kind === 'route';\n};\n\nexport const isFormMutationAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeRuntimeEntityFormMutationActionSpec<null> => {\n  return action.kind === 'formMutation';\n};\n\nexport const resolveActionVariant = (\n  actionVariant: ButtonVariant | undefined,\n  index: number,\n): Exclude<ButtonVariant, undefined> => {\n  if (actionVariant != null) {\n    return actionVariant;\n  }\n  if (index === 0) {\n    return 'primary';\n  }\n  return 'secondary';\n};\n\nexport const resolveRowId = (row: unknown): string | null => {\n  if (row == null || typeof row !== 'object') {\n    return null;\n  }\n  if (!('id' in row)) {\n    return null;\n  }\n  const value = (row as { id?: unknown }).id;\n  if (typeof value !== 'string') {\n    return null;\n  }\n  const trimmed = value.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nexport type ConnectionListConfig = BackofficeRuntimeResolvedListFacetConfig & {\n  list: BackofficeRuntimeConnectionListConfig;\n};\n\nexport const resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const buildActionsColumn = (options: {\n  ariaLabel: string;\n  fallback: string;\n  resolveDetailHref: (id: string) => string | null;\n  className?: string;\n  renderAction: (input: { href: string; ariaLabel: string }) => JSX.Element;\n}): DataTableColumn<unknown> => {\n  const { ariaLabel, fallback, resolveDetailHref, className, renderAction } =\n    options;\n\n  return {\n    id: 'actions',\n    header: '',\n    className,\n    mobileRole: 'action',\n    cell: (row) => {\n      const id = resolveRowId(row);\n      if (id == null) {\n        return fallback;\n      }\n      const href = resolveDetailHref(id);\n      if (href == null) {\n        return fallback;\n      }\n      return renderAction({ href, ariaLabel });\n    },\n  };\n};\n"],"mappings":";AAkBA,IASM,IAGF;CACF,IAAI;CACJ,GAAG;CACH,cAAc;CACd,GAAG;CACH,GAAG;CACH,IAAI;CACJ,OAAO;AACT,GAEa,KAAgC,MACvC,KAAa,IACR,IAGP,IACA,KAAoB,IACpB,IAAmB,KAAK,IAAI,GAAG,IAAY,CAAC,GAInC,KAA+B,MACtC,KAAe,IACV,IAGP,KAEA,KAAkB,IAClB,IAAiB,KAAK,IAAI,GAAG,IAAc,CAAC,GAInC,KACX,GACA,MAEI,EAAO,eAAe,WACjB,SAEL,EAAO,cAAc,KAChB,qBAEL,UAAU,KAAU,OAAO,EAAO,QAAS,WACtC,EACL,EAAO,QAGJ,GAGI,KACX,MAEO,EAAO,SAAS,SAGZ,KACX,MAEO,EAAO,SAAS,gBAGZ,KACX,GACA,MAEI,MAGA,MAAU,IACL,YAEF,cAGI,KAAgB,MAAgC;CAI3D,IAHmB,OAAO,KAAQ,aAA9B,KAGA,EAAE,QAAQ,IACZ,OAAO;CAET,IAAM,IAAS,EAAyB;CACxC,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,KAAK;CAI3B,OAHI,MAAY,KACP,OAEF;AACT,GAMa,KAAgB,GAAkB,MACtC,EAAM,CAAI,GAGN,KAAsB,MAMH;CAC9B,IAAM,EAAE,cAAW,aAAU,sBAAmB,cAAW,oBACzD;CAEF,OAAO;EACL,IAAI;EACJ,QAAQ;EACR;EACA,YAAY;EACZ,OAAO,MAAQ;GACb,IAAM,IAAK,EAAa,CAAG;GAC3B,IAAI,KAAM,MACR,OAAO;GAET,IAAM,IAAO,EAAkB,CAAE;GAIjC,OAHI,KAAQ,OACH,IAEF,EAAa;IAAE;IAAM;GAAU,CAAC;EACzC;CACF;AACF"}
+{"version":3,"file":"BackofficeEntityListPage.helpers.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.helpers.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport type {\n  BackofficeRuntimeEntityFormMutationActionSpec,\n  BackofficeActionTone,\n  BackofficeEntityRouteActionSpec,\n  BackofficeActionVariant,\n  BackofficeListActionSpec,\n  BackofficeRuntimeConnectionListConfig,\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { ResponsiveRecordListColumn } from '@plumile/ui';\nimport type { TFunction } from 'i18next';\n\nimport type { BackofficeSizedDataTableColumn } from '../components/backoffice/columns/buildDataTableColumns.js';\n\nconst ROW_FLAGS_SLOT_PX = 24;\nconst ROW_FLAGS_GAP_PX = 6;\nconst ROW_FLAGS_PADDING_X_PX = 4;\n\nconst ACTIONS_SLOT_PX = 32;\nconst ACTIONS_GAP_PX = 8;\nconst ACTIONS_PADDING_X_PX = 12;\nconst ACTIONS_SAFETY_PX = 4;\n\nconst listColumnTrackBySize: Record<\n  BackofficeSizedDataTableColumn<unknown>['size'],\n  string\n> = {\n  xs: 'minmax(3.5rem, 7rem)',\n  s: 'minmax(5rem, 10rem)',\n  statusAction: 'minmax(7rem, 12rem)',\n  m: 'minmax(7rem, 14rem)',\n  l: 'minmax(9rem, 18rem)',\n  xl: 'minmax(11rem, 24rem)',\n  fluid: 'minmax(0, 1fr)',\n};\n\nexport const computeRowFlagsColumnWidthPx = (flagCount: number): number => {\n  if (flagCount <= 0) {\n    return 0;\n  }\n  return (\n    ROW_FLAGS_PADDING_X_PX * 2 +\n    ROW_FLAGS_SLOT_PX * flagCount +\n    ROW_FLAGS_GAP_PX * Math.max(0, flagCount - 1)\n  );\n};\n\nexport const computeActionsColumnWidthPx = (actionCount: number): number => {\n  if (actionCount <= 0) {\n    return 0;\n  }\n  return (\n    ACTIONS_SAFETY_PX +\n    ACTIONS_PADDING_X_PX * 2 +\n    ACTIONS_SLOT_PX * actionCount +\n    ACTIONS_GAP_PX * Math.max(0, actionCount - 1)\n  );\n};\n\nexport const resolveTrackBySize = (\n  column: ResponsiveRecordListColumn<unknown>,\n  fallback: string,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '60px';\n  }\n  if (column.isPrimary === true) {\n    return 'minmax(0, 1.4fr)';\n  }\n  if ('size' in column && typeof column.size === 'string') {\n    return listColumnTrackBySize[\n      column.size as BackofficeSizedDataTableColumn<unknown>['size']\n    ];\n  }\n  return fallback;\n};\n\nexport const isRouteAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityRouteActionSpec<null> => {\n  return action.kind === 'route';\n};\n\nexport const isFormMutationAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeRuntimeEntityFormMutationActionSpec<null> => {\n  return action.kind === 'formMutation';\n};\n\nexport const resolveActionPresentation = (\n  actionVariant: BackofficeActionVariant | undefined,\n  actionTone: BackofficeActionTone | undefined,\n  index: number,\n): { variant: BackofficeActionVariant; tone: BackofficeActionTone } => {\n  const isPrimary = index === 0;\n  let variant = actionVariant;\n  let tone = actionTone;\n  if (variant == null) {\n    variant = 'soft';\n    if (isPrimary) {\n      variant = 'solid';\n    }\n  }\n  if (tone == null) {\n    tone = 'neutral';\n    if (isPrimary) {\n      tone = 'brand';\n    }\n  }\n  return {\n    variant,\n    tone,\n  };\n};\n\nexport const resolveRowId = (row: unknown): string | null => {\n  if (row == null || typeof row !== 'object') {\n    return null;\n  }\n  if (!('id' in row)) {\n    return null;\n  }\n  const value = (row as { id?: unknown }).id;\n  if (typeof value !== 'string') {\n    return null;\n  }\n  const trimmed = value.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nexport type ConnectionListConfig = BackofficeRuntimeResolvedListFacetConfig & {\n  list: BackofficeRuntimeConnectionListConfig;\n};\n\nexport const resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const buildActionsColumn = (options: {\n  ariaLabel: string;\n  fallback: string;\n  resolveDetailHref: (id: string) => string | null;\n  className?: string;\n  renderAction: (input: { href: string; ariaLabel: string }) => JSX.Element;\n}): ResponsiveRecordListColumn<unknown> => {\n  const { ariaLabel, fallback, resolveDetailHref, className, renderAction } =\n    options;\n\n  return {\n    id: 'actions',\n    header: ariaLabel,\n    ...(className == null ? {} : { classes: { cell: className } }),\n    mobileRole: 'action',\n    cell: (row) => {\n      const id = resolveRowId(row);\n      if (id == null) {\n        return fallback;\n      }\n      const href = resolveDetailHref(id);\n      if (href == null) {\n        return fallback;\n      }\n      return renderAction({ href, ariaLabel });\n    },\n  };\n};\n"],"mappings":";AAiBA,IASM,IAGF;CACF,IAAI;CACJ,GAAG;CACH,cAAc;CACd,GAAG;CACH,GAAG;CACH,IAAI;CACJ,OAAO;AACT,GAEa,KAAgC,MACvC,KAAa,IACR,IAGP,IACA,KAAoB,IACpB,IAAmB,KAAK,IAAI,GAAG,IAAY,CAAC,GAInC,KAA+B,MACtC,KAAe,IACV,IAGP,KAEA,KAAkB,IAClB,IAAiB,KAAK,IAAI,GAAG,IAAc,CAAC,GAInC,KACX,GACA,MAEI,EAAO,eAAe,WACjB,SAEL,EAAO,cAAc,KAChB,qBAEL,UAAU,KAAU,OAAO,EAAO,QAAS,WACtC,EACL,EAAO,QAGJ,GAGI,KACX,MAEO,EAAO,SAAS,SAGZ,KACX,MAEO,EAAO,SAAS,gBAGZ,KACX,GACA,GACA,MACqE;CACrE,IAAM,IAAY,MAAU,GACxB,IAAU,GACV,IAAO;CAaX,OAZI,MACF,IAAU,QACN,MACF,IAAU,WAGV,MACF,IAAO,WACH,MACF,IAAO,WAGJ;EACL;EACA;CACF;AACF,GAEa,KAAgB,MAAgC;CAI3D,IAHmB,OAAO,KAAQ,aAA9B,KAGA,EAAE,QAAQ,IACZ,OAAO;CAET,IAAM,IAAS,EAAyB;CACxC,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,KAAK;CAI3B,OAHI,MAAY,KACP,OAEF;AACT,GAMa,KAAgB,GAAkB,MACtC,EAAM,CAAI,GAGN,KAAsB,MAMQ;CACzC,IAAM,EAAE,cAAW,aAAU,sBAAmB,cAAW,oBACzD;CAEF,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,GAAI,KAAa,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAU,EAAE;EAC5D,YAAY;EACZ,OAAO,MAAQ;GACb,IAAM,IAAK,EAAa,CAAG;GAC3B,IAAI,KAAM,MACR,OAAO;GAET,IAAM,IAAO,EAAkB,CAAE;GAIjC,OAHI,KAAQ,OACH,IAEF,EAAa;IAAE;IAAM;GAAU,CAAC;EACzC;CACF;AACF"}

package/lib/esm/pages/BackofficeEntityListPage.js

@@ -8,47 +8,46 @@ import { RowFlagsCell as o } from "../components/backoffice/list/RowFlagsCell.js
 import { BackofficeEntityListScaffold as s } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
 import { useBackofficeListUrlState as c } from "../hooks/useBackofficeListUrlState.js";
 import { BackofficeEntityListRouteProvider as l } from "./BackofficeEntityListRouteContext.js";
-import { buildActionsColumn as u, computeActionsColumnWidthPx as d, computeRowFlagsColumnWidthPx as f, isFormMutationAction as p, isRouteAction as m, resolveActionVariant as h, resolveLabel as g, resolveTrackBySize as _ } from "./BackofficeEntityListPage.helpers.js";
+import { buildActionsColumn as u, computeActionsColumnWidthPx as d, computeRowFlagsColumnWidthPx as f, isFormMutationAction as p, isRouteAction as m, resolveActionPresentation as h, resolveLabel as g, resolveTrackBySize as _ } from "./BackofficeEntityListPage.helpers.js";
 import { actionTrigger as v, actionsColumnCell as y, headerActions as b } from "./backofficeEntityListPage.css.js";
 import { Suspense as x, useCallback as S, useMemo as C, useRef as w, useState as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { useTranslation as O } from "react-i18next";
-import { Button as k } from "@plumile/ui/atomic/atoms/button/Button.js";
-import A from "@plumile/router/routing/Link.js";
-import { LinkButton as j } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
-import { TableCell as M } from "@plumile/ui/components/data-table/TableCell.js";
-import { EyeSvg as N } from "@plumile/ui/icons/EyeSvg.js";
+import { TableCellContent as E } from "@plumile/ui";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useTranslation as k } from "react-i18next";
+import { Button as A, RouterButtonLink as j } from "@plumile/ui/button";
+import M from "@plumile/router/routing/Link.js";
+import { EyeSvg as N } from "@plumile/ui/icons/EyeSvg";
 //#region src/pages/BackofficeEntityListPage.tsx
-var P = (e, t, n, r) => {
-	let i = t != null && t.length > 0, s = e;
-	if (i) {
+var P = (e, t, n, r, i) => {
+	let s = t != null && t.length > 0, c = e;
+	if (s) {
 		let n = [{
 			id: "__rowFlags",
-			header: "",
-			className: a,
+			header: i,
+			classes: { cell: a },
 			mobileRole: "badge",
-			cell: (e) => /* @__PURE__ */ E(o, {
+			cell: (e) => /* @__PURE__ */ D(o, {
 				row: e,
 				flags: t,
 				tApp: r
 			})
-		}, ...e], i = n.some((e) => e.isPrimary === !0);
-		s = n, i || (s = n.map((e, t) => t === 1 ? {
+		}, ...e], s = n.some((e) => e.isPrimary === !0);
+		c = n, s || (c = n.map((e, t) => t === 1 ? {
 			...e,
 			isPrimary: !0
 		} : e));
 	}
-	let c = 0;
-	i && (c = t.length);
-	let l = f(c), u = d(n), p = 0;
-	i && (p = 1);
-	let m = s.length - p - 1, h = s.slice(p, p + Math.max(0, m)).map((e) => _(e, "1fr")).join(" "), g = "";
-	return g = i ? `${l}px ${h} ${u}px` : `${h} ${u}px`, {
-		columns: s,
-		gridTemplateColumns: g
+	let l = 0;
+	s && (l = t.length);
+	let u = f(l), p = d(n), m = 0;
+	s && (m = 1);
+	let h = c.length - m - 1, g = c.slice(m, m + Math.max(0, h)).map((e) => _(e, "1fr")).join(" "), v = "";
+	return v = s ? `${u}px ${g} ${p}px` : `${g} ${p}px`, {
+		columns: c,
+		gridTemplateColumns: v
 	};
 }, F = ({ children: i, config: a, breadcrumb: o }) => {
-	let d = a.list, { t: f } = O(), { t: _ } = e(), [F, I] = T(null), [L, R] = T(0), z = w(null), B = S((e) => {
+	let d = a.list, { t: f } = k(), { t: _ } = e(), [F, I] = T(null), [L, R] = T(0), z = w(null), B = S((e) => {
 		z.current = e;
 	}, []), { columns: V, gridTemplateColumns: H } = C(() => {
 		let e = n(d.columns, {
@@ -59,19 +58,19 @@ var P = (e, t, n, r) => {
 			fallback: _("common.notAvailable"),
 			className: y,
 			resolveDetailHref: (e) => a.routes.detail(e),
-			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ E(M.Actions, { children: /* @__PURE__ */ E(A, {
+			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ D(E.Actions, { children: /* @__PURE__ */ D(M, {
 				to: e,
 				className: v,
 				"aria-label": t,
 				title: t,
 				preloadOnHover: "code",
-				children: /* @__PURE__ */ E(N, {
+				children: /* @__PURE__ */ D(N, {
 					width: 16,
 					height: 16
 				})
 			}) })
 		});
-		return P([...e, t], d.rowFlags, 1, f);
+		return P([...e, t], d.rowFlags, 1, f, _("list.columns.flags"));
 	}, [
 		a.routes,
 		d.columns,
@@ -81,38 +80,40 @@ var P = (e, t, n, r) => {
 	]), U = S((e) => d.getRowId(e), [d]), { state: W, pushState: G } = c(a), K = S(() => {
 		R((e) => e + 1), z.current?.();
 	}, []), q = C(() => a.listActions ?? [], [a.listActions]), J = C(() => q.filter((e) => e.isVisible == null || e.isVisible(null)), [q]), Y = C(() => {
-		if (J.length !== 0) return /* @__PURE__ */ E("div", {
+		if (J.length !== 0) return /* @__PURE__ */ D("div", {
 			className: b,
 			children: J.map((e, t) => {
-				let { variant: n } = e, r = g(e.label, f), i = r;
-				e.ariaLabel != null && (i = g(e.ariaLabel, f));
-				let a = h(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
+				let n = g(e.label, f), r = n;
+				e.ariaLabel != null && (r = g(e.ariaLabel, f));
+				let i = h(e.variant, e.tone, t), a = e.size ?? "small", o = e.isDisabled?.(null) === !0;
 				if (m(e)) {
 					let t = e.to(null);
-					return /* @__PURE__ */ E(j, {
+					return /* @__PURE__ */ D(j, {
 						to: t,
-						variant: a,
-						size: o,
-						isDisabled: s,
-						"aria-label": i,
+						variant: i.variant,
+						tone: i.tone,
+						size: a,
+						disabled: o,
+						"aria-label": r,
 						preloadOnHover: "code-and-data",
-						children: r
+						children: n
 					}, e.id);
 				}
-				return p(e) ? /* @__PURE__ */ E(k, {
+				return p(e) ? /* @__PURE__ */ D(A, {
 					type: "button",
-					variant: a,
-					size: o,
-					disabled: s,
+					variant: i.variant,
+					tone: i.tone,
+					size: a,
+					disabled: o,
 					onClick: () => {
 						I(e.id);
 					},
-					"aria-label": i,
-					children: r
+					"aria-label": r,
+					children: n
 				}, e.id) : null;
 			})
 		});
-	}, [f, J]), X = q.find((e) => e.id === F), Z = () => /* @__PURE__ */ E(s, {
+	}, [f, J]), X = q.find((e) => e.id === F), Z = () => /* @__PURE__ */ D(s, {
 		config: a,
 		state: W,
 		pushState: G,
@@ -154,27 +155,27 @@ var P = (e, t, n, r) => {
 		B,
 		W
 	]);
-	return /* @__PURE__ */ D(r, {
+	return /* @__PURE__ */ O(r, {
 		breadcrumb: o,
-		children: [/* @__PURE__ */ E(l, {
+		children: [/* @__PURE__ */ D(l, {
 			value: Q,
-			children: /* @__PURE__ */ E(x, {
+			children: /* @__PURE__ */ D(x, {
 				fallback: Z(),
 				children: i
 			})
-		}), X != null && p(X) && /* @__PURE__ */ E(t, {
-			isOpen: !0,
+		}), X != null && p(X) && /* @__PURE__ */ D(t, {
+			open: !0,
 			action: X,
 			node: null,
-			onClose: () => {
-				I(null);
+			onOpenChange: (e) => {
+				e || I(null);
 			},
 			onSuccess: K
 		})]
 	});
 }, I = ({ children: e, entityManifest: t, config: n }) => {
-	let { t: r } = O(), a = i(n, r);
-	return /* @__PURE__ */ E(F, {
+	let { t: r } = k(), a = i(n, r);
+	return /* @__PURE__ */ D(F, {
 		children: e,
 		entityManifest: t,
 		config: n,

package/lib/esm/pages/BackofficeEntityListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import {\n  Suspense,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedListLayoutRoute,\n  BackofficeRuntimeResolvedListFacetConfig,\n  BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { LinkButton } from '@plumile/ui/atomic/atoms/button/LinkButton.js';\nimport {\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\nimport { TableCell } from '@plumile/ui/components/data-table/TableCell.js';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { BackofficeEntityListRouteProvider } from './BackofficeEntityListRouteContext.js';\nimport {\n  buildActionsColumn,\n  computeActionsColumnWidthPx,\n  computeRowFlagsColumnWidthPx,\n  isFormMutationAction,\n  isRouteAction,\n  resolveLabel,\n  resolveActionVariant,\n  resolveTrackBySize,\n  type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n  children?: ReactNode;\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  prepared: BackofficePreparedListLayoutRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n  inputColumns: readonly DataTableColumn<Row>[],\n  rowFlags: readonly BackofficeRowFlagSpec<Row>[] | undefined,\n  actionCount: number,\n  tApp: TFunction,\n): {\n  columns: readonly DataTableColumn<Row>[];\n  gridTemplateColumns?: string;\n} => {\n  const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n  let columns = inputColumns;\n  if (hasFlags) {\n    const flagsColumn: DataTableColumn<Row> = {\n      id: '__rowFlags',\n      header: '',\n      className: rowFlagsColumnCell,\n      mobileRole: 'badge',\n      cell: (row) => {\n        return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n      },\n    };\n\n    // Ensure we never pick the flags column as \"primary\".\n    const withFlags = [flagsColumn, ...inputColumns];\n    const hasPrimary = withFlags.some((col) => {\n      return col.isPrimary === true;\n    });\n\n    columns = withFlags;\n    if (!hasPrimary) {\n      columns = withFlags.map((col, index) => {\n        if (index === 1) {\n          return { ...col, isPrimary: true };\n        }\n        return col;\n      });\n    }\n  }\n\n  let flagCount = 0;\n  if (hasFlags) {\n    flagCount = rowFlags.length;\n  }\n  const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n  const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n  // We always include the right-side \"actions\" column in list pages.\n  let leftColumnCount = 0;\n  if (hasFlags) {\n    leftColumnCount = 1;\n  }\n  const middleCount = columns.length - leftColumnCount - 1;\n\n  const middleTracks = columns\n    .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n    .map((column) => {\n      return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n    })\n    .join(' ');\n\n  let gridTemplateColumns = '';\n  if (hasFlags) {\n    gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n  } else {\n    gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n  }\n\n  return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n  children,\n  config,\n  breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config' | 'prepared'> & {\n  config: ConnectionListConfig;\n  breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element | null => {\n  const listConfig = config.list;\n\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n  const [countFetchKey, setCountFetchKey] = useState(0);\n  const refreshRef = useRef<(() => void) | null>(null);\n\n  const registerRefresh = useCallback((refresh: (() => void) | null) => {\n    refreshRef.current = refresh;\n  }, []);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly DataTableColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      className: pageStyles.actionsColumnCell,\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n      renderAction: ({ href, ariaLabel }) => {\n        return (\n          <TableCell.Actions>\n            <Link\n              to={href}\n              className={pageStyles.actionTrigger}\n              aria-label={ariaLabel}\n              title={ariaLabel}\n              preloadOnHover=\"code\"\n            >\n              <EyeSvg width={16} height={16} />\n            </Link>\n          </TableCell.Actions>\n        );\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n  }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n\n  const handleRefreshRequest = useCallback(() => {\n    setCountFetchKey((current) => {\n      return current + 1;\n    });\n    refreshRef.current?.();\n  }, []);\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const { variant: actionVariant } = action;\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const variant = resolveActionVariant(actionVariant, index);\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <LinkButton\n                key={action.id}\n                to={href}\n                variant={variant}\n                size={size}\n                isDisabled={isDisabled}\n                aria-label={ariaLabel}\n                preloadOnHover=\"code-and-data\"\n              >\n                {label}\n              </LinkButton>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  const renderLoadingScaffold = () => {\n    return (\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={[]}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={false}\n        isLoadingMore={false}\n        incrementalError={null}\n        isRefreshing={false}\n        onLoadMore={() => {}}\n        onRetryLoadMore={() => {}}\n        onRefresh={handleRefreshRequest}\n        totalCount={null}\n        isLoadingInitial\n      />\n    );\n  };\n\n  const contextValue = useMemo(() => {\n    return {\n      config,\n      state,\n      pushState,\n      headerActions,\n      columns,\n      gridTemplateColumns,\n      getRowId,\n      countFetchKey,\n      bumpCountFetchKey: () => {\n        setCountFetchKey((current) => {\n          return current + 1;\n        });\n      },\n      registerRefresh,\n    };\n  }, [\n    columns,\n    config,\n    countFetchKey,\n    getRowId,\n    gridTemplateColumns,\n    headerActions,\n    pushState,\n    registerRefresh,\n    state,\n  ]);\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <BackofficeEntityListRouteProvider value={contextValue}>\n        <Suspense fallback={renderLoadingScaffold()}>{children}</Suspense>\n      </BackofficeEntityListRouteProvider>\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          isOpen\n          action={activeFormAction}\n          node={null}\n          onClose={() => {\n            setActiveFormActionId(null);\n          }}\n          onSuccess={handleRefreshRequest}\n        />\n      )}\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport const BackofficeEntityListPage = ({\n  children,\n  entityManifest,\n  config,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n  return (\n    <BackofficeEntityConnectionListPage\n      children={children}\n      entityManifest={entityManifest}\n      config={config}\n      breadcrumb={breadcrumb}\n    />\n  );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import {\n  Suspense,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedListLayoutRoute,\n  BackofficeRuntimeResolvedListFacetConfig,\n  BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button, RouterButtonLink } from '@plumile/ui/button';\nimport {\n  type GetRowId,\n  type ResponsiveRecordListColumn,\n  TableCellContent,\n} from '@plumile/ui';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { BackofficeEntityListRouteProvider } from './BackofficeEntityListRouteContext.js';\nimport {\n  buildActionsColumn,\n  computeActionsColumnWidthPx,\n  computeRowFlagsColumnWidthPx,\n  isFormMutationAction,\n  isRouteAction,\n  resolveLabel,\n  resolveActionPresentation,\n  resolveTrackBySize,\n  type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n  children?: ReactNode;\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  prepared: BackofficePreparedListLayoutRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n  inputColumns: readonly ResponsiveRecordListColumn<Row>[],\n  rowFlags: readonly BackofficeRowFlagSpec<Row>[] | undefined,\n  actionCount: number,\n  tApp: TFunction,\n  flagsHeader: string,\n): {\n  columns: readonly ResponsiveRecordListColumn<Row>[];\n  gridTemplateColumns?: string;\n} => {\n  const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n  let columns = inputColumns;\n  if (hasFlags) {\n    const flagsColumn: ResponsiveRecordListColumn<Row> = {\n      id: '__rowFlags',\n      header: flagsHeader,\n      classes: { cell: rowFlagsColumnCell },\n      mobileRole: 'badge',\n      cell: (row) => {\n        return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n      },\n    };\n\n    // Ensure we never pick the flags column as \"primary\".\n    const withFlags = [flagsColumn, ...inputColumns];\n    const hasPrimary = withFlags.some((col) => {\n      return col.isPrimary === true;\n    });\n\n    columns = withFlags;\n    if (!hasPrimary) {\n      columns = withFlags.map((col, index) => {\n        if (index === 1) {\n          return { ...col, isPrimary: true };\n        }\n        return col;\n      });\n    }\n  }\n\n  let flagCount = 0;\n  if (hasFlags) {\n    flagCount = rowFlags.length;\n  }\n  const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n  const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n  // We always include the right-side \"actions\" column in list pages.\n  let leftColumnCount = 0;\n  if (hasFlags) {\n    leftColumnCount = 1;\n  }\n  const middleCount = columns.length - leftColumnCount - 1;\n\n  const middleTracks = columns\n    .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n    .map((column) => {\n      return resolveTrackBySize(\n        column as ResponsiveRecordListColumn<unknown>,\n        '1fr',\n      );\n    })\n    .join(' ');\n\n  let gridTemplateColumns = '';\n  if (hasFlags) {\n    gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n  } else {\n    gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n  }\n\n  return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n  children,\n  config,\n  breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config' | 'prepared'> & {\n  config: ConnectionListConfig;\n  breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element | null => {\n  const listConfig = config.list;\n\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n  const [countFetchKey, setCountFetchKey] = useState(0);\n  const refreshRef = useRef<(() => void) | null>(null);\n\n  const registerRefresh = useCallback((refresh: (() => void) | null) => {\n    refreshRef.current = refresh;\n  }, []);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly ResponsiveRecordListColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      className: pageStyles.actionsColumnCell,\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n      renderAction: ({ href, ariaLabel }) => {\n        return (\n          <TableCellContent.Actions>\n            <Link\n              to={href}\n              className={pageStyles.actionTrigger}\n              aria-label={ariaLabel}\n              title={ariaLabel}\n              preloadOnHover=\"code\"\n            >\n              <EyeSvg width={16} height={16} />\n            </Link>\n          </TableCellContent.Actions>\n        );\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(\n      allColumns,\n      listConfig.rowFlags,\n      1,\n      tApp,\n      t('list.columns.flags'),\n    );\n  }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n\n  const handleRefreshRequest = useCallback(() => {\n    setCountFetchKey((current) => {\n      return current + 1;\n    });\n    refreshRef.current?.();\n  }, []);\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const presentation = resolveActionPresentation(\n            action.variant,\n            action.tone,\n            index,\n          );\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <RouterButtonLink\n                key={action.id}\n                to={href}\n                variant={presentation.variant}\n                tone={presentation.tone}\n                size={size}\n                disabled={isDisabled}\n                aria-label={ariaLabel}\n                preloadOnHover=\"code-and-data\"\n              >\n                {label}\n              </RouterButtonLink>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={presentation.variant}\n                tone={presentation.tone}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  const renderLoadingScaffold = () => {\n    return (\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={[]}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={false}\n        isLoadingMore={false}\n        incrementalError={null}\n        isRefreshing={false}\n        onLoadMore={() => {}}\n        onRetryLoadMore={() => {}}\n        onRefresh={handleRefreshRequest}\n        totalCount={null}\n        isLoadingInitial\n      />\n    );\n  };\n\n  const contextValue = useMemo(() => {\n    return {\n      config,\n      state,\n      pushState,\n      headerActions,\n      columns,\n      gridTemplateColumns,\n      getRowId,\n      countFetchKey,\n      bumpCountFetchKey: () => {\n        setCountFetchKey((current) => {\n          return current + 1;\n        });\n      },\n      registerRefresh,\n    };\n  }, [\n    columns,\n    config,\n    countFetchKey,\n    getRowId,\n    gridTemplateColumns,\n    headerActions,\n    pushState,\n    registerRefresh,\n    state,\n  ]);\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <BackofficeEntityListRouteProvider value={contextValue}>\n        <Suspense fallback={renderLoadingScaffold()}>{children}</Suspense>\n      </BackofficeEntityListRouteProvider>\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          open\n          action={activeFormAction}\n          node={null}\n          onOpenChange={(open) => {\n            if (!open) setActiveFormActionId(null);\n          }}\n          onSuccess={handleRefreshRequest}\n        />\n      )}\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport const BackofficeEntityListPage = ({\n  children,\n  entityManifest,\n  config,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n  return (\n    <BackofficeEntityConnectionListPage\n      children={children}\n      entityManifest={entityManifest}\n      config={config}\n      breadcrumb={breadcrumb}\n    />\n  );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}

package/lib/esm/pages/BackofficeEntityListRouteContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListRouteContext.js","names":[],"sources":["../../../src/pages/BackofficeEntityListRouteContext.tsx"],"sourcesContent":["import { createContext, useContext, type JSX } from 'react';\nimport {\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nimport type { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport type { ConnectionListConfig } from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListRouteContextValue = {\n  config: ConnectionListConfig;\n  state: ReturnType<typeof useBackofficeListUrlState>['state'];\n  pushState: ReturnType<typeof useBackofficeListUrlState>['pushState'];\n  headerActions: JSX.Element | undefined;\n  columns: readonly DataTableColumn<unknown>[];\n  gridTemplateColumns?: string;\n  getRowId: GetRowId<unknown>;\n  countFetchKey: number;\n  bumpCountFetchKey: () => void;\n  registerRefresh: (refresh: (() => void) | null) => void;\n};\n\nconst BackofficeEntityListRouteContext =\n  createContext<BackofficeEntityListRouteContextValue | null>(null);\n\nexport const BackofficeEntityListRouteProvider = ({\n  children,\n  value,\n}: {\n  children: JSX.Element;\n  value: BackofficeEntityListRouteContextValue;\n}): JSX.Element => {\n  return (\n    <BackofficeEntityListRouteContext.Provider value={value}>\n      {children}\n    </BackofficeEntityListRouteContext.Provider>\n  );\n};\n\nexport const useBackofficeEntityListRouteContext =\n  (): BackofficeEntityListRouteContextValue => {\n    const value = useContext(BackofficeEntityListRouteContext);\n    if (value == null) {\n      throw new Error('BackofficeEntityListRouteContext is missing.');\n    }\n    return value;\n  };\n"],"mappings":";;;AAsBA,IAAM,IACJ,EAA4D,IAAI,GAErD,KAAqC,EAChD,aACA,eAME,kBAAC,EAAiC,UAAlC;CAAkD;CAC/C;AACwC,CAAA,GAIlC,UACkC;CAC3C,IAAM,IAAQ,EAAW,CAAgC;CACzD,IAAI,KAAS,MACX,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}
+{"version":3,"file":"BackofficeEntityListRouteContext.js","names":[],"sources":["../../../src/pages/BackofficeEntityListRouteContext.tsx"],"sourcesContent":["import { createContext, useContext, type JSX } from 'react';\nimport { type GetRowId, type ResponsiveRecordListColumn } from '@plumile/ui';\n\nimport type { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport type { ConnectionListConfig } from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListRouteContextValue = {\n  config: ConnectionListConfig;\n  state: ReturnType<typeof useBackofficeListUrlState>['state'];\n  pushState: ReturnType<typeof useBackofficeListUrlState>['pushState'];\n  headerActions: JSX.Element | undefined;\n  columns: readonly ResponsiveRecordListColumn<unknown>[];\n  gridTemplateColumns?: string;\n  getRowId: GetRowId<unknown>;\n  countFetchKey: number;\n  bumpCountFetchKey: () => void;\n  registerRefresh: (refresh: (() => void) | null) => void;\n};\n\nconst BackofficeEntityListRouteContext =\n  createContext<BackofficeEntityListRouteContextValue | null>(null);\n\nexport const BackofficeEntityListRouteProvider = ({\n  children,\n  value,\n}: {\n  children: JSX.Element;\n  value: BackofficeEntityListRouteContextValue;\n}): JSX.Element => {\n  return (\n    <BackofficeEntityListRouteContext.Provider value={value}>\n      {children}\n    </BackofficeEntityListRouteContext.Provider>\n  );\n};\n\nexport const useBackofficeEntityListRouteContext =\n  (): BackofficeEntityListRouteContextValue => {\n    const value = useContext(BackofficeEntityListRouteContext);\n    if (value == null) {\n      throw new Error('BackofficeEntityListRouteContext is missing.');\n    }\n    return value;\n  };\n"],"mappings":";;;AAmBA,IAAM,IACJ,EAA4D,IAAI,GAErD,KAAqC,EAChD,aACA,eAME,kBAAC,EAAiC,UAAlC;CAAkD;CAC/C;AACwC,CAAA,GAIlC,UACkC;CAC3C,IAAM,IAAQ,EAAW,CAAgC;CACzD,IAAI,KAAS,MACX,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}

package/lib/esm/pages/BackofficeHubPage.js

@@ -8,7 +8,7 @@ import { buildHubBreadcrumb as o } from "../components/backoffice/layout/breadcr
 import { useMemo as s, useState as c } from "react";
 import { jsx as l } from "react/jsx-runtime";
 import { useTranslation as u } from "react-i18next";
-import { SidebarTasksSvg as d } from "@plumile/ui/icons/SidebarTasksSvg.js";
+import { SidebarTasksSvg as d } from "@plumile/ui/icons/SidebarTasksSvg";
 import { DetailPageTemplate as f } from "@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js";
 //#region src/pages/BackofficeHubPage.tsx
 var p = (e, t) => {

package/lib/esm/pages/BackofficeHubPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeHubPage.js","names":[],"sources":["../../../src/pages/BackofficeHubPage.tsx"],"sourcesContent":["import { useMemo, useState, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { DetailPageTemplate } from '@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js';\nimport { SidebarTasksSvg } from '@plumile/ui/icons/SidebarTasksSvg.js';\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../provider/BackofficeConfigContext.js';\nimport type { BackofficeIconComponent } from '../provider/types.js';\nimport type { BackofficePreparedHubRoute } from '../router/createBackofficeRoutes.js';\nimport {\n  BackofficeHubTemplate,\n  type BackofficeHubTemplateGroup,\n  type BackofficeHubTemplateSearch,\n} from '../components/backoffice/hub/BackofficeHubTemplate.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildHubBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { useBackofficePermissions } from '../components/backoffice/layout/BackofficePermissionsContext.js';\nimport { resolveLabel } from '../components/backoffice/layout/sidebarUtils.js';\n\nexport type BackofficeHubPageProps = {\n  prepared: BackofficePreparedHubRoute;\n};\n\ntype HubPageItemView = {\n  id: string;\n  kind: 'entity' | 'tool';\n  label: string;\n  href: string;\n  icon: ReactNode;\n};\n\ntype HubPageGroupView = {\n  id: string;\n  title: string;\n  description: string | null;\n  icon: ReactNode | undefined;\n  items: readonly HubPageItemView[];\n};\n\nconst renderIcon = (\n  Icon: BackofficeIconComponent | undefined,\n  size: number,\n): ReactNode | undefined => {\n  if (Icon == null) {\n    return undefined;\n  }\n  return <Icon width={size} height={size} aria-hidden=\"true\" />;\n};\n\nconst isItemVisible = (input: {\n  entity: BackofficeEntityManifestMap[string] | null | undefined;\n  kind: 'entity' | 'tool';\n  permissions: unknown;\n  sidebar: ReturnType<typeof useBackofficeConfig>['sidebar'];\n}): boolean => {\n  const { entity, kind, permissions, sidebar } = input;\n  if (entity == null) {\n    return false;\n  }\n  if (kind === 'entity' && entity.kind !== 'tool' && !entity.hasList) {\n    return false;\n  }\n  const isVisible = sidebar?.isItemVisible?.(\n    {\n      kind,\n      id: entity.id,\n    },\n    permissions,\n  );\n  return isVisible !== false;\n};\n\nexport const BackofficeHubPage = ({\n  prepared,\n}: BackofficeHubPageProps): JSX.Element => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities, sidebar } = useBackofficeConfig();\n  const permissions = useBackofficePermissions();\n  const [search, setSearch] = useState('');\n  const { hub } = prepared;\n  const title = resolveLabel(hub.title, tApp);\n  let description: string | undefined;\n  if (hub.description != null) {\n    description = resolveLabel(hub.description, tApp);\n  }\n  const breadcrumb = buildHubBreadcrumb({ id: hub.id, title });\n  const normalizedSearch = search.trim().toLowerCase();\n  const searchEnabled = hub.search?.enabled !== false;\n  let searchPlaceholder = t('hub.search.placeholder');\n  if (hub.search?.placeholder != null) {\n    searchPlaceholder = resolveLabel(hub.search.placeholder, tApp);\n  }\n\n  const groups = useMemo<readonly HubPageGroupView[]>(() => {\n    return hub.groups\n      .map((group) => {\n        const items = group.items\n          .map((item): HubPageItemView | null => {\n            const entity = entities[item.id];\n            if (entity == null) {\n              return null;\n            }\n            if (\n              !isItemVisible({\n                entity,\n                kind: item.kind,\n                permissions,\n                sidebar,\n              })\n            ) {\n              return null;\n            }\n            const entityConfig = entity;\n            const label = resolveLabel(entityConfig.label, tApp);\n            if (\n              normalizedSearch !== '' &&\n              !label.toLowerCase().includes(normalizedSearch)\n            ) {\n              return null;\n            }\n            return {\n              id: item.id,\n              kind: item.kind,\n              label,\n              href: entityConfig.routes.list,\n              icon: renderIcon(item.icon, 20),\n            };\n          })\n          .filter((item): item is HubPageItemView => {\n            return item != null;\n          });\n        let groupDescription: string | null = null;\n        if (group.description != null) {\n          groupDescription = resolveLabel(group.description, tApp);\n        }\n        return {\n          id: group.id,\n          title: resolveLabel(group.title, tApp),\n          description: groupDescription,\n          icon: renderIcon(group.icon, 18),\n          items,\n        };\n      })\n      .filter((group) => {\n        return group.items.length > 0;\n      });\n  }, [entities, hub.groups, normalizedSearch, permissions, sidebar, tApp]);\n\n  let emptyTitle = t('hub.empty.title');\n  if (hub.emptyState?.title != null) {\n    emptyTitle = resolveLabel(hub.emptyState.title, tApp);\n  }\n  let emptyDescription = t('hub.empty.description');\n  if (hub.emptyState?.description != null) {\n    emptyDescription = resolveLabel(hub.emptyState.description, tApp);\n  }\n  let subtitle = t('hub.subtitle');\n  if (description != null) {\n    subtitle = description;\n  }\n  const hasMixedKinds = groups.some((group) => {\n    const kinds = new Set(\n      group.items.map((item) => {\n        return item.kind;\n      }),\n    );\n    return kinds.size > 1;\n  });\n\n  const templateGroups = useMemo<readonly BackofficeHubTemplateGroup[]>(() => {\n    return groups.map((group) => {\n      return {\n        id: group.id,\n        title: group.title,\n        description: group.description,\n        icon: group.icon,\n        items: group.items.map((item) => {\n          let metaLabel: string | null = null;\n          if (hasMixedKinds) {\n            metaLabel = t('hub.itemKinds.entity');\n            if (item.kind === 'tool') {\n              metaLabel = t('hub.itemKinds.tool');\n            }\n          }\n          return {\n            id: item.id,\n            kind: item.kind,\n            label: item.label,\n            href: item.href,\n            icon: item.icon,\n            metaLabel,\n          };\n        }),\n      };\n    });\n  }, [groups, hasMixedKinds, t]);\n\n  let searchConfig: BackofficeHubTemplateSearch | undefined;\n  if (searchEnabled) {\n    searchConfig = {\n      value: search,\n      onChange: setSearch,\n      placeholder: searchPlaceholder,\n    };\n  }\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <DetailPageTemplate\n        header={{\n          title,\n          subtitle,\n        }}\n      >\n        <BackofficeHubTemplate\n          groups={templateGroups}\n          search={searchConfig}\n          emptyState={{\n            title: emptyTitle,\n            description: emptyDescription,\n            icon: <SidebarTasksSvg width={28} height={28} aria-hidden=\"true\" />,\n          }}\n        />\n      </DetailPageTemplate>\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport default BackofficeHubPage;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeHubPage.js","names":[],"sources":["../../../src/pages/BackofficeHubPage.tsx"],"sourcesContent":["import { useMemo, useState, type JSX, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { DetailPageTemplate } from '@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js';\nimport { SidebarTasksSvg } from '@plumile/ui/icons/SidebarTasksSvg';\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../provider/BackofficeConfigContext.js';\nimport type { BackofficeIconComponent } from '../provider/types.js';\nimport type { BackofficePreparedHubRoute } from '../router/createBackofficeRoutes.js';\nimport {\n  BackofficeHubTemplate,\n  type BackofficeHubTemplateGroup,\n  type BackofficeHubTemplateSearch,\n} from '../components/backoffice/hub/BackofficeHubTemplate.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildHubBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { useBackofficePermissions } from '../components/backoffice/layout/BackofficePermissionsContext.js';\nimport { resolveLabel } from '../components/backoffice/layout/sidebarUtils.js';\n\nexport type BackofficeHubPageProps = {\n  prepared: BackofficePreparedHubRoute;\n};\n\ntype HubPageItemView = {\n  id: string;\n  kind: 'entity' | 'tool';\n  label: string;\n  href: string;\n  icon: ReactNode;\n};\n\ntype HubPageGroupView = {\n  id: string;\n  title: string;\n  description: string | null;\n  icon: ReactNode | undefined;\n  items: readonly HubPageItemView[];\n};\n\nconst renderIcon = (\n  Icon: BackofficeIconComponent | undefined,\n  size: number,\n): ReactNode | undefined => {\n  if (Icon == null) {\n    return undefined;\n  }\n  return <Icon width={size} height={size} aria-hidden=\"true\" />;\n};\n\nconst isItemVisible = (input: {\n  entity: BackofficeEntityManifestMap[string] | null | undefined;\n  kind: 'entity' | 'tool';\n  permissions: unknown;\n  sidebar: ReturnType<typeof useBackofficeConfig>['sidebar'];\n}): boolean => {\n  const { entity, kind, permissions, sidebar } = input;\n  if (entity == null) {\n    return false;\n  }\n  if (kind === 'entity' && entity.kind !== 'tool' && !entity.hasList) {\n    return false;\n  }\n  const isVisible = sidebar?.isItemVisible?.(\n    {\n      kind,\n      id: entity.id,\n    },\n    permissions,\n  );\n  return isVisible !== false;\n};\n\nexport const BackofficeHubPage = ({\n  prepared,\n}: BackofficeHubPageProps): JSX.Element => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities, sidebar } = useBackofficeConfig();\n  const permissions = useBackofficePermissions();\n  const [search, setSearch] = useState('');\n  const { hub } = prepared;\n  const title = resolveLabel(hub.title, tApp);\n  let description: string | undefined;\n  if (hub.description != null) {\n    description = resolveLabel(hub.description, tApp);\n  }\n  const breadcrumb = buildHubBreadcrumb({ id: hub.id, title });\n  const normalizedSearch = search.trim().toLowerCase();\n  const searchEnabled = hub.search?.enabled !== false;\n  let searchPlaceholder = t('hub.search.placeholder');\n  if (hub.search?.placeholder != null) {\n    searchPlaceholder = resolveLabel(hub.search.placeholder, tApp);\n  }\n\n  const groups = useMemo<readonly HubPageGroupView[]>(() => {\n    return hub.groups\n      .map((group) => {\n        const items = group.items\n          .map((item): HubPageItemView | null => {\n            const entity = entities[item.id];\n            if (entity == null) {\n              return null;\n            }\n            if (\n              !isItemVisible({\n                entity,\n                kind: item.kind,\n                permissions,\n                sidebar,\n              })\n            ) {\n              return null;\n            }\n            const entityConfig = entity;\n            const label = resolveLabel(entityConfig.label, tApp);\n            if (\n              normalizedSearch !== '' &&\n              !label.toLowerCase().includes(normalizedSearch)\n            ) {\n              return null;\n            }\n            return {\n              id: item.id,\n              kind: item.kind,\n              label,\n              href: entityConfig.routes.list,\n              icon: renderIcon(item.icon, 20),\n            };\n          })\n          .filter((item): item is HubPageItemView => {\n            return item != null;\n          });\n        let groupDescription: string | null = null;\n        if (group.description != null) {\n          groupDescription = resolveLabel(group.description, tApp);\n        }\n        return {\n          id: group.id,\n          title: resolveLabel(group.title, tApp),\n          description: groupDescription,\n          icon: renderIcon(group.icon, 18),\n          items,\n        };\n      })\n      .filter((group) => {\n        return group.items.length > 0;\n      });\n  }, [entities, hub.groups, normalizedSearch, permissions, sidebar, tApp]);\n\n  let emptyTitle = t('hub.empty.title');\n  if (hub.emptyState?.title != null) {\n    emptyTitle = resolveLabel(hub.emptyState.title, tApp);\n  }\n  let emptyDescription = t('hub.empty.description');\n  if (hub.emptyState?.description != null) {\n    emptyDescription = resolveLabel(hub.emptyState.description, tApp);\n  }\n  let subtitle = t('hub.subtitle');\n  if (description != null) {\n    subtitle = description;\n  }\n  const hasMixedKinds = groups.some((group) => {\n    const kinds = new Set(\n      group.items.map((item) => {\n        return item.kind;\n      }),\n    );\n    return kinds.size > 1;\n  });\n\n  const templateGroups = useMemo<readonly BackofficeHubTemplateGroup[]>(() => {\n    return groups.map((group) => {\n      return {\n        id: group.id,\n        title: group.title,\n        description: group.description,\n        icon: group.icon,\n        items: group.items.map((item) => {\n          let metaLabel: string | null = null;\n          if (hasMixedKinds) {\n            metaLabel = t('hub.itemKinds.entity');\n            if (item.kind === 'tool') {\n              metaLabel = t('hub.itemKinds.tool');\n            }\n          }\n          return {\n            id: item.id,\n            kind: item.kind,\n            label: item.label,\n            href: item.href,\n            icon: item.icon,\n            metaLabel,\n          };\n        }),\n      };\n    });\n  }, [groups, hasMixedKinds, t]);\n\n  let searchConfig: BackofficeHubTemplateSearch | undefined;\n  if (searchEnabled) {\n    searchConfig = {\n      value: search,\n      onChange: setSearch,\n      placeholder: searchPlaceholder,\n    };\n  }\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <DetailPageTemplate\n        header={{\n          title,\n          subtitle,\n        }}\n      >\n        <BackofficeHubTemplate\n          groups={templateGroups}\n          search={searchConfig}\n          emptyState={{\n            title: emptyTitle,\n            description: emptyDescription,\n            icon: <SidebarTasksSvg width={28} height={28} aria-hidden=\"true\" />,\n          }}\n        />\n      </DetailPageTemplate>\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport default BackofficeHubPage;\n"],"mappings":"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"}

package/lib/esm/pages/BackofficeLayoutPage.js

@@ -3,26 +3,24 @@ import { useBackofficeReactTranslation as t } from "../i18n/useBackofficeReactTr
 import { useBackofficeConfig as n } from "../provider/BackofficeConfigContext.js";
 import { BackofficeTopbarPortalContextProvider as r } from "../components/backoffice/layout/breadcrumb/BackofficeTopbarPortalContext.js";
 import { resolveActiveEntityId as i, resolveSidebarGroups as a, resolveVisibleEntityIds as ee } from "../components/backoffice/layout/sidebarUtils.js";
-import { BackofficePermissionsProvider as o } from "../components/backoffice/layout/BackofficePermissionsContext.js";
-import { buildSidebarSections as s } from "../components/backoffice/layout/buildSidebarSections.js";
-import te from "../components/backoffice/layout/mapViewerToSidebarProfileView.js";
-import { BackofficeContentBoundary as ne } from "../components/backoffice/routing/BackofficeContentBoundary.js";
-import { useRelayEnvironment as re } from "../relay/useRelayEnvironment.js";
-import ie from "../hooks/useBackofficeSidebarPins.js";
-import ae from "../hooks/useSidebarGroupCollapse.js";
-import { useCallback as oe, useContext as se, useEffect as c, useMemo as l, useState as u } from "react";
+import { BackofficePermissionsProvider as te } from "../components/backoffice/layout/BackofficePermissionsContext.js";
+import { buildSidebarSections as o } from "../components/backoffice/layout/buildSidebarSections.js";
+import ne from "../components/backoffice/layout/mapViewerToSidebarProfileView.js";
+import { BackofficeContentBoundary as re } from "../components/backoffice/routing/BackofficeContentBoundary.js";
+import { useRelayEnvironment as ie } from "../relay/useRelayEnvironment.js";
+import ae from "../hooks/useBackofficeSidebarPins.js";
+import oe from "../hooks/useSidebarGroupCollapse.js";
+import { useCallback as se, useContext as ce, useEffect as s, useMemo as c, useState as l } from "react";
+import { AdminShellLayout as le, SidebarProfileMenu as u, ToastProvider as ue } from "@plumile/ui";
 import { jsx as d } from "react/jsx-runtime";
-import { useTranslation as ce } from "react-i18next";
-import { commitMutation as le, usePreloadedQuery as f } from "react-relay";
-import { ToastProvider as ue } from "@plumile/ui/atomic/molecules/toast/ToastProvider.js";
-import de from "@plumile/router/routing/RoutingContext.js";
-import { GlobalSearchInput as fe } from "@plumile/ui/backoffice/molecules/global_search_input/GlobalSearchInput.js";
-import pe from "@plumile/router/routing/useLocation.js";
-import { resetRelayStore as me } from "@plumile/relay/environment.js";
-import { AdminShellLayout as he } from "@plumile/ui/admin/templates/admin_shell_layout/AdminShellLayout.js";
-import { SidebarProfileMenu as p } from "@plumile/ui/components/navigation/sidebar/SidebarProfileMenu.js";
+import { useTranslation as de } from "react-i18next";
+import { commitMutation as fe, usePreloadedQuery as f } from "react-relay";
+import pe from "@plumile/router/routing/RoutingContext.js";
+import { GlobalSearchInput as me } from "@plumile/ui/backoffice/molecules/global_search_input/GlobalSearchInput.js";
+import he from "@plumile/router/routing/useLocation.js";
+import { resetRelayStore as ge } from "@plumile/relay/environment.js";
 //#region src/pages/BackofficeLayoutPage.tsx
-var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", ve = (e) => {
+var _e = "plumile:backoffice:recent-items", ve = "plumile:backoffice:sidebar", ye = (e) => {
 	if (typeof window > "u") return [];
 	try {
 		let t = window.localStorage.getItem(e);
@@ -36,20 +34,20 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 	} catch {
 		return [];
 	}
-}, ye = (e, t) => {
+}, p = (e, t) => {
 	if (!(typeof window > "u")) try {
 		window.localStorage.setItem(e, JSON.stringify(t));
 	} catch {}
 }, m = ({ children: f, permissions: m, authStatus: h, activeGroupId: g }) => {
-	let { t: _ } = ce(), { t: v } = t(), { pathname: y } = pe(), b = se(de), x = re(), { auth: S, basePath: C, dashboards: w, entities: T, sidebar: E } = n(), [D, be] = u(""), O = E?.preferences?.storageKey ?? _e, k = E?.preferences?.persistCollapsed === !0, [A, xe] = u(() => {
+	let { t: _ } = de(), { t: v } = t(), { pathname: y } = he(), b = ce(pe), x = ie(), { auth: S, basePath: C, dashboards: w, entities: T, sidebar: E } = n(), [D, be] = l(""), O = E?.preferences?.storageKey ?? ve, k = E?.preferences?.persistCollapsed === !0, [A, xe] = l(() => {
 		if (!k || typeof window > "u") return !1;
 		try {
 			return window.localStorage.getItem(`${O}:collapsed`) === "true";
 		} catch {
 			return !1;
 		}
-	}), [j, M] = u(!1), [N, P] = u(null), F = E?.recentItems, I = F?.enabled === !0, L = F?.storageKey ?? ge, R = F?.maxItems ?? 8, [z, Se] = u(() => I ? ve(L) : []);
-	c(() => {
+	}), [j, M] = l(!1), [N, P] = l(null), F = E?.recentItems, I = F?.enabled === !0, L = F?.storageKey ?? _e, R = F?.maxItems ?? 8, [z, Se] = l(() => I ? ye(L) : []);
+	s(() => {
 		if (!(!k || typeof window > "u")) try {
 			window.localStorage.setItem(`${O}:collapsed`, String(A));
 		} catch {}
@@ -58,13 +56,13 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		k,
 		O
 	]);
-	let B = l(() => a(T, E), [T, E]), Ce = l(() => Object.keys(B), [B]), we = l(() => Object.fromEntries(Object.entries(B).map(([e, t]) => [e, t.behavior?.defaultCollapsed ?? !0])), [B]), Te = l(() => ee(B, T, E, m), [
+	let B = c(() => a(T, E), [T, E]), Ce = c(() => Object.keys(B), [B]), we = c(() => Object.fromEntries(Object.entries(B).map(([e, t]) => [e, t.behavior?.defaultCollapsed ?? !0])), [B]), Te = c(() => ee(B, T, E, m), [
 		T,
 		B,
 		m,
 		E
-	]), V = l(() => i(y, T), [T, y]);
-	c(() => {
+	]), V = c(() => i(y, T), [T, y]);
+	s(() => {
 		if (!I || V == null) return;
 		let e = T[V];
 		if (e == null || e.kind !== "tool" && !e.hasList) return;
@@ -79,7 +77,7 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		};
 		Se((e) => {
 			let t = [r, ...e.filter((e) => e.id !== r.id || e.kind !== r.kind)].slice(0, R);
-			return ye(L, t), t;
+			return p(L, t), t;
 		});
 	}, [
 		V,
@@ -89,7 +87,7 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		L,
 		_
 	]);
-	let H = E?.pinnedItems?.enabled === !0, { pins: Ee, toggle: De, reorder: Oe } = ie({
+	let H = E?.pinnedItems?.enabled === !0, { pins: Ee, toggle: De, reorder: Oe } = ae({
 		enabled: H,
 		storageKey: E?.pinnedItems?.storageKey,
 		visibleEntityIds: Te
@@ -97,13 +95,13 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 	H && (U = Ee, W = De, G = Oe);
 	let K;
 	E?.preferences?.storageKey != null && (K = `${E.preferences.storageKey}:groups`);
-	let { collapsedByGroupId: q, setCollapsed: J } = ae({
+	let { collapsedByGroupId: q, setCollapsed: J } = oe({
 		groupIds: Ce,
 		activeGroupId: g,
 		defaultCollapsedByGroupId: we,
 		persist: E?.preferences?.persistGroups === !0,
 		storageKey: K
-	}), ke = l(() => s({
+	}), ke = c(() => o({
 		basePath: C,
 		pathname: y,
 		entities: T,
@@ -136,7 +134,7 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		W,
 		v,
 		_
-	]), Ae = l(() => s({
+	]), Ae = c(() => o({
 		basePath: C,
 		pathname: y,
 		entities: T,
@@ -169,12 +167,12 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		W,
 		v,
 		_
-	]), Y = oe(() => {
+	]), Y = se(() => {
 		j || (M(!0), (async () => {
 			try {
 				let t = await S.logout.load();
 				await new Promise((e, n) => {
-					le(x, {
+					fe(x, {
 						mutation: t.logoutMutation,
 						variables: {},
 						onCompleted: () => {
@@ -184,7 +182,7 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 							n(e);
 						}
 					});
-				}), localStorage.removeItem("auth_token"), localStorage.removeItem("remember_me"), me(), b?.history.push({ pathname: e(C) });
+				}), localStorage.removeItem("auth_token"), localStorage.removeItem("remember_me"), ge(), b?.history.push({ pathname: e(C) });
 			} finally {
 				M(!1);
 			}
@@ -195,59 +193,69 @@ var ge = "plumile:backoffice:recent-items", _e = "plumile:backoffice:sidebar", v
 		j,
 		x,
 		b
-	]), X = h?.me ?? null, Z = l(() => te({
+	]), X = h?.me ?? null, Z = c(() => ne({
 		viewer: X,
 		unknownUserLabel: v("sidebar.profile.unknownUser")
-	}), [v, X]), je = /* @__PURE__ */ d(p, {
-		collapsed: !1,
+	}), [v, X]), je = /* @__PURE__ */ d(u, {
 		viewer: Z,
+		sectionTitle: v("sidebar.profile.title"),
 		labels: {
-			sectionTitle: v("sidebar.profile.title"),
 			menuAriaLabel: v("sidebar.profile.menuAriaLabel"),
-			signOut: v("sidebar.profile.actions.signOut")
+			triggerAriaLabel: `${v("sidebar.profile.menuAriaLabel")}: ${Z.displayName}`
 		},
-		onSignOut: Y,
-		isSigningOut: j
-	}), Me = /* @__PURE__ */ d(p, {
-		collapsed: !1,
+		items: [{
+			kind: "action",
+			id: "sign-out",
+			label: v("sidebar.profile.actions.signOut"),
+			onSelect: Y,
+			disabled: j,
+			tone: "danger"
+		}]
+	}), Me = /* @__PURE__ */ d(u, {
 		viewer: Z,
+		sectionTitle: v("sidebar.profile.title"),
 		labels: {
-			sectionTitle: v("sidebar.profile.title"),
 			menuAriaLabel: v("sidebar.profile.menuAriaLabel"),
-			signOut: v("sidebar.profile.actions.signOut")
+			triggerAriaLabel: `${v("sidebar.profile.menuAriaLabel")}: ${Z.displayName}`
 		},
-		onSignOut: Y,
-		isSigningOut: j
+		items: [{
+			kind: "action",
+			id: "sign-out",
+			label: v("sidebar.profile.actions.signOut"),
+			onSelect: Y,
+			disabled: j,
+			tone: "danger"
+		}]
 	}), Q = null;
-	N != null && (Q = /* @__PURE__ */ d(ne, { children: f }));
-	let $ = /* @__PURE__ */ d(fe, {
+	N != null && (Q = /* @__PURE__ */ d(re, { children: f }));
+	let $ = /* @__PURE__ */ d(me, {
 		value: D,
 		onChange: be,
 		placeholder: v("sidebar.search.placeholder"),
 		ariaLabel: v("sidebar.search.placeholder")
 	});
-	return /* @__PURE__ */ d(ue, { children: /* @__PURE__ */ d(he, {
+	return /* @__PURE__ */ d(ue, { children: /* @__PURE__ */ d(le, {
 		sidebar: {
 			sections: ke,
 			search: $,
 			footer: je,
-			isCollapsed: A,
+			collapsed: A,
 			onCollapsedChange: xe,
-			collapseToggleLabel: v("sidebar.actions.collapseSidebar"),
-			expandToggleLabel: v("sidebar.actions.expandSidebar"),
-			navigationAriaLabel: v("sidebar.navigationAriaLabel")
+			collapseLabel: v("sidebar.actions.collapseSidebar"),
+			expandLabel: v("sidebar.actions.expandSidebar"),
+			navigationLabel: v("sidebar.navigationAriaLabel")
 		},
 		mobileSidebar: {
 			sections: Ae,
 			search: $,
 			footer: Me,
-			isCollapsed: !1,
 			hideCollapseToggle: !0,
-			navigationAriaLabel: v("sidebar.navigationAriaLabel")
+			navigationLabel: v("sidebar.navigationAriaLabel")
 		},
 		topbar: { breadcrumb: /* @__PURE__ */ d("div", { ref: P }) },
+		containedScrollLabel: v("sidebar.contentAriaLabel"),
 		contentScrollMode: "contained",
-		children: /* @__PURE__ */ d(o, {
+		children: /* @__PURE__ */ d(te, {
 			permissions: m,
 			children: /* @__PURE__ */ d(r, {
 				value: {