@portnet/ui 5.0.27 → 6.0.0

package/dist/v2/patterns/SkeletonPageShell.js

@@ -0,0 +1,347 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Skeleton = require("../components/Skeleton");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+ * SkeletonPageShell — Portnet UI v2 (pattern)
+ *
+ * Route-level `Suspense` fallback: a skeleton of the canonical page skeleton
+ * (Charter §07 / §7.1 bis), sized to match `ActionBar` + `PageContent`.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-02)
+ *
+ * R-P.1 MUST: "Routing avec `React.lazy` + `Suspense`, **fallback skeleton
+ * page**". The library shipped every skeleton PART — `Skeleton`, `SkeletonRow`,
+ * `SkeletonKPI`, `SkeletonDetailHero`, `SkeletonTabContent`, `SkeletonText` —
+ * and `PageBusy`, but nothing that satisfies R-P.1 directly:
+ *
+ *   - `PageBusy` is a full-viewport spinner, and R-8.1 MUST forbids exactly that
+ *     for navigation ("jamais de spinner full-screen sur navigation"). It cannot
+ *     be the route fallback.
+ *   - the parts are shaped for *inside* a page, not for the page frame.
+ *
+ * So every module hand-built a `RoutePageFallback` — observed in
+ * `procuration-portnet-fe` and `procuration-fe`, independently written.
+ *
+ * THE COUPLING IS THE ARGUMENT. To avoid the layout shift a skeleton exists to
+ * prevent, the fallback's padding must equal `ActionBar`'s and `PageContent`'s
+ * exactly. A module can only get that by reading this library's source and
+ * copying literals — which then silently rot the next time either component's
+ * padding changes. Only the library can keep them in lockstep, so only the
+ * library should own it. Values below are copied from the two components in this
+ * same directory; a change there must change them here.
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * Accessibility (R-Sk.3). ONE labelled `aria-busy` region wraps the whole
+ * shell, and every child is an `aria-hidden` `Skeleton` primitive. This
+ * deliberately does NOT compose `SkeletonText` / `SkeletonTabContent`, because
+ * each of those carries its own `aria-busy` + `aria-label`, and nesting live
+ * regions makes a screen reader announce a page load two or three times.
+ *
+ * Dimensions come from density tokens (`--btn-h`, `--input-h`, `--row-h`)
+ * rather than px literals, so the reserved space follows a
+ * `data-density="compact"` switch instead of being 6–8 px wrong under it.
+ *
+ * Usage:
+ *   <Suspense fallback={<SkeletonPageShell variant="list" />}>
+ *     <Outlet />
+ *   </Suspense>
+ */
+/* ── Copied from ActionBar.tsx / PageContent.tsx in this directory ──────────
+ * If either changes, change these with it. */
+var ACTION_BAR_PADDING = Object.freeze({
+  xs: "var(--s-3)",
+  sm: "var(--s-3) var(--s-4)",
+  lg: "var(--s-3) var(--s-6)"
+});
+var PAGE_CONTENT_PADDING = Object.freeze({
+  xs: "var(--s-3)",
+  sm: "var(--s-4)",
+  lg: "var(--s-6)"
+});
+var FILTER_STRIP_SX = Object.freeze({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--s-3)",
+  padding: "var(--s-4)",
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-lg)"
+});
+var TABLE_SHELL_SX = Object.freeze({
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-lg)",
+  overflow: "hidden"
+});
+
+/** Filter strip + table rows. */
+function ListBody(_ref) {
+  var rows = _ref.rows;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      sx: FILTER_STRIP_SX,
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          sx: {
+            flex: "1 1 240px",
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: "42%",
+            height: 11,
+            style: {
+              marginBottom: "var(--s-2)"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            height: "var(--input-h)",
+            radius: 8
+          })]
+        }, i);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: TABLE_SHELL_SX,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        sx: {
+          display: "flex",
+          gap: "var(--s-4)",
+          padding: "var(--s-3) var(--s-4)",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--bg-subtle)"
+        },
+        children: ["18%", "26%", "14%", "16%", "12%"].map(function (w) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: w,
+            height: 11
+          }, w);
+        })
+      }), Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-4)",
+            padding: "0 var(--s-4)",
+            height: "var(--row-h)",
+            borderBottom: "1px solid var(--border)"
+          },
+          children: ["18%", "26%", "14%", "16%", "12%"].map(function (w) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+              width: w,
+              height: 13
+            }, w);
+          })
+        }, i);
+      })]
+    })]
+  });
+}
+
+/** Horizontal stepper + two-column field grid. */
+function FormBody(_ref2) {
+  var rows = _ref2.rows;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--s-4)",
+        padding: "var(--s-4)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-2)",
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: 24,
+            height: 24,
+            radius: 9999
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: "60%",
+            height: 12
+          })]
+        }, i);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          md: "1fr 1fr"
+        },
+        gap: "var(--s-4)",
+        padding: "var(--s-5)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: "38%",
+            height: 11,
+            style: {
+              marginBottom: "var(--s-2)"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            height: "var(--input-h)",
+            radius: 8
+          })]
+        }, i);
+      })
+    })]
+  });
+}
+
+/** Hero card + tab strip + tab content. */
+function DetailBody(_ref3) {
+  var rows = _ref3.rows;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.SkeletonDetailHero, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      sx: {
+        display: "flex",
+        gap: "var(--s-4)"
+      },
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+          width: 96,
+          height: 14
+        }, i);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-3)",
+        padding: "var(--s-5)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          sx: {
+            display: "flex",
+            gap: "var(--s-4)"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: "22%",
+            height: 12
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+            width: "".concat(44 + i % 3 * 10, "%"),
+            height: 12
+          })]
+        }, i);
+      })
+    })]
+  });
+}
+function SkeletonPageShell(_ref4) {
+  var _ref4$variant = _ref4.variant,
+    variant = _ref4$variant === void 0 ? "list" : _ref4$variant,
+    _ref4$breadcrumb = _ref4.breadcrumb,
+    breadcrumb = _ref4$breadcrumb === void 0 ? true : _ref4$breadcrumb,
+    _ref4$subtitle = _ref4.subtitle,
+    subtitle = _ref4$subtitle === void 0 ? true : _ref4$subtitle,
+    _ref4$action = _ref4.action,
+    action = _ref4$action === void 0 ? true : _ref4$action,
+    _ref4$rows = _ref4.rows,
+    rows = _ref4$rows === void 0 ? 6 : _ref4$rows,
+    _ref4$loadingLabel = _ref4.loadingLabel,
+    loadingLabel = _ref4$loadingLabel === void 0 ? "Chargement de la page…" : _ref4$loadingLabel,
+    sx = _ref4.sx;
+  var safeRows = Math.max(1, Math.floor(rows));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    "aria-busy": "true",
+    "aria-label": loadingLabel,
+    sx: _objectSpread({
+      minWidth: 0
+    }, sx),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: {
+        background: "var(--bg)",
+        padding: ACTION_BAR_PADDING
+      },
+      children: [breadcrumb && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+        width: "34%",
+        height: 12,
+        style: {
+          marginBottom: "var(--s-2)"
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+        sx: {
+          display: "flex",
+          alignItems: {
+            xs: "flex-start",
+            sm: "center"
+          },
+          justifyContent: "space-between",
+          flexWrap: {
+            xs: "wrap",
+            sm: "nowrap"
+          },
+          gap: {
+            xs: "var(--s-2)",
+            sm: "var(--s-4)"
+          }
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+          width: "42%",
+          height: 22
+        }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+          width: 148,
+          height: "var(--btn-h)",
+          radius: 8
+        })]
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+        width: "56%",
+        height: 13,
+        style: {
+          marginTop: "var(--s-1)"
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: {
+        padding: PAGE_CONTENT_PADDING,
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-4)",
+        minWidth: 0
+      },
+      children: [variant === "list" && /*#__PURE__*/(0, _jsxRuntime.jsx)(ListBody, {
+        rows: safeRows
+      }), variant === "form" && /*#__PURE__*/(0, _jsxRuntime.jsx)(FormBody, {
+        rows: safeRows
+      }), variant === "detail" && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailBody, {
+        rows: safeRows
+      })]
+    })]
+  });
+}
+var _default = exports["default"] = SkeletonPageShell;
+//# sourceMappingURL=SkeletonPageShell.js.map

package/dist/v2/patterns/SkeletonPageShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonPageShell.js","names":["_Box","_interopRequireDefault","require","_Skeleton","_jsxRuntime","obj","__esModule","_typeof","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","ACTION_BAR_PADDING","freeze","xs","sm","lg","PAGE_CONTENT_PADDING","FILTER_STRIP_SX","display","flexWrap","gap","padding","background","border","borderRadius","TABLE_SHELL_SX","overflow","ListBody","_ref","rows","jsxs","Fragment","children","jsx","sx","map","flex","minWidth","Skeleton","width","height","style","marginBottom","radius","borderBottom","w","Array","from","_","alignItems","FormBody","_ref2","gridTemplateColumns","md","DetailBody","_ref3","SkeletonDetailHero","flexDirection","concat","SkeletonPageShell","_ref4","_ref4$variant","variant","_ref4$breadcrumb","breadcrumb","_ref4$subtitle","subtitle","_ref4$action","action","_ref4$rows","_ref4$loadingLabel","loadingLabel","safeRows","Math","max","floor","justifyContent","marginTop","_default","exports"],"sources":["../../../src/lib/v2/patterns/SkeletonPageShell.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport type { SystemStyleObject } from \"@mui/system\";\r\nimport { Skeleton, SkeletonDetailHero } from \"../components/Skeleton\";\r\n\r\n/**\r\n * SkeletonPageShell — Portnet UI v2 (pattern)\r\n *\r\n * Route-level `Suspense` fallback: a skeleton of the canonical page skeleton\r\n * (Charter §07 / §7.1 bis), sized to match `ActionBar` + `PageContent`.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-02)\r\n *\r\n * R-P.1 MUST: \"Routing avec `React.lazy` + `Suspense`, **fallback skeleton\r\n * page**\". The library shipped every skeleton PART — `Skeleton`, `SkeletonRow`,\r\n * `SkeletonKPI`, `SkeletonDetailHero`, `SkeletonTabContent`, `SkeletonText` —\r\n * and `PageBusy`, but nothing that satisfies R-P.1 directly:\r\n *\r\n *   - `PageBusy` is a full-viewport spinner, and R-8.1 MUST forbids exactly that\r\n *     for navigation (\"jamais de spinner full-screen sur navigation\"). It cannot\r\n *     be the route fallback.\r\n *   - the parts are shaped for *inside* a page, not for the page frame.\r\n *\r\n * So every module hand-built a `RoutePageFallback` — observed in\r\n * `procuration-portnet-fe` and `procuration-fe`, independently written.\r\n *\r\n * THE COUPLING IS THE ARGUMENT. To avoid the layout shift a skeleton exists to\r\n * prevent, the fallback's padding must equal `ActionBar`'s and `PageContent`'s\r\n * exactly. A module can only get that by reading this library's source and\r\n * copying literals — which then silently rot the next time either component's\r\n * padding changes. Only the library can keep them in lockstep, so only the\r\n * library should own it. Values below are copied from the two components in this\r\n * same directory; a change there must change them here.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * Accessibility (R-Sk.3). ONE labelled `aria-busy` region wraps the whole\r\n * shell, and every child is an `aria-hidden` `Skeleton` primitive. This\r\n * deliberately does NOT compose `SkeletonText` / `SkeletonTabContent`, because\r\n * each of those carries its own `aria-busy` + `aria-label`, and nesting live\r\n * regions makes a screen reader announce a page load two or three times.\r\n *\r\n * Dimensions come from density tokens (`--btn-h`, `--input-h`, `--row-h`)\r\n * rather than px literals, so the reserved space follows a\r\n * `data-density=\"compact\"` switch instead of being 6–8 px wrong under it.\r\n *\r\n * Usage:\r\n *   <Suspense fallback={<SkeletonPageShell variant=\"list\" />}>\r\n *     <Outlet />\r\n *   </Suspense>\r\n */\r\n\r\nexport type SkeletonPageShellVariant = \"list\" | \"form\" | \"detail\";\r\n\r\nexport interface SkeletonPageShellProps {\r\n  /**\r\n   * Which page archetype to mime (R-Sk.2 — \"forme et nombre miment le contenu\r\n   * réel\").\r\n   *\r\n   * - `list`   — filter strip + table rows (listing screens)\r\n   * - `form`   — stepper + two-column field grid (create / edit screens)\r\n   * - `detail` — hero card + tab content (consultation screens)\r\n   *\r\n   * @default \"list\"\r\n   */\r\n  variant?: SkeletonPageShellVariant;\r\n  /** Reserve the breadcrumb row. @default true */\r\n  breadcrumb?: boolean;\r\n  /** Reserve the subtitle line. @default true */\r\n  subtitle?: boolean;\r\n  /** Reserve a primary CTA in the header. @default true */\r\n  action?: boolean;\r\n  /** Rows in the `list` variant / field pairs in `form`. @default 6 */\r\n  rows?: number;\r\n  /** Accessible name of the busy region. Localise per host. */\r\n  loadingLabel?: string;\r\n  /** sx overrides applied to the outer region. */\r\n  sx?: SxProps<Theme>;\r\n}\r\n\r\n/* ── Copied from ActionBar.tsx / PageContent.tsx in this directory ──────────\r\n * If either changes, change these with it. */\r\nconst ACTION_BAR_PADDING = Object.freeze({\r\n  xs: \"var(--s-3)\",\r\n  sm: \"var(--s-3) var(--s-4)\",\r\n  lg: \"var(--s-3) var(--s-6)\",\r\n});\r\n\r\nconst PAGE_CONTENT_PADDING = Object.freeze({\r\n  xs: \"var(--s-3)\",\r\n  sm: \"var(--s-4)\",\r\n  lg: \"var(--s-6)\",\r\n});\r\n\r\nconst FILTER_STRIP_SX = Object.freeze({\r\n  display: \"flex\",\r\n  flexWrap: \"wrap\",\r\n  gap: \"var(--s-3)\",\r\n  padding: \"var(--s-4)\",\r\n  background: \"var(--surface)\",\r\n  border: \"1px solid var(--border)\",\r\n  borderRadius: \"var(--r-lg)\",\r\n});\r\n\r\nconst TABLE_SHELL_SX = Object.freeze({\r\n  background: \"var(--surface)\",\r\n  border: \"1px solid var(--border)\",\r\n  borderRadius: \"var(--r-lg)\",\r\n  overflow: \"hidden\",\r\n});\r\n\r\n/** Filter strip + table rows. */\r\nfunction ListBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <Box sx={FILTER_STRIP_SX}>\r\n        {[0, 1, 2].map((i) => (\r\n          <Box key={i} sx={{ flex: \"1 1 240px\", minWidth: 0 }}>\r\n            <Skeleton\r\n              width=\"42%\"\r\n              height={11}\r\n              style={{ marginBottom: \"var(--s-2)\" }}\r\n            />\r\n            <Skeleton height=\"var(--input-h)\" radius={8} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n\r\n      <Box sx={TABLE_SHELL_SX}>\r\n        {/* Header band, then rows at the live row height. */}\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            gap: \"var(--s-4)\",\r\n            padding: \"var(--s-3) var(--s-4)\",\r\n            borderBottom: \"1px solid var(--border)\",\r\n            background: \"var(--bg-subtle)\",\r\n          }}\r\n        >\r\n          {[\"18%\", \"26%\", \"14%\", \"16%\", \"12%\"].map((w) => (\r\n            <Skeleton key={w} width={w} height={11} />\r\n          ))}\r\n        </Box>\r\n\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box\r\n            key={i}\r\n            sx={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: \"var(--s-4)\",\r\n              padding: \"0 var(--s-4)\",\r\n              height: \"var(--row-h)\",\r\n              borderBottom: \"1px solid var(--border)\",\r\n            }}\r\n          >\r\n            {[\"18%\", \"26%\", \"14%\", \"16%\", \"12%\"].map((w) => (\r\n              <Skeleton key={w} width={w} height={13} />\r\n            ))}\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\n/** Horizontal stepper + two-column field grid. */\r\nfunction FormBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <Box\r\n        sx={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          gap: \"var(--s-4)\",\r\n          padding: \"var(--s-4)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {[0, 1, 2].map((i) => (\r\n          <Box\r\n            key={i}\r\n            sx={{ display: \"flex\", alignItems: \"center\", gap: \"var(--s-2)\", flex: 1 }}\r\n          >\r\n            <Skeleton width={24} height={24} radius={9999} />\r\n            <Skeleton width=\"60%\" height={12} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n\r\n      <Box\r\n        sx={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: { xs: \"1fr\", md: \"1fr 1fr\" },\r\n          gap: \"var(--s-4)\",\r\n          padding: \"var(--s-5)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box key={i}>\r\n            <Skeleton\r\n              width=\"38%\"\r\n              height={11}\r\n              style={{ marginBottom: \"var(--s-2)\" }}\r\n            />\r\n            <Skeleton height=\"var(--input-h)\" radius={8} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\n/** Hero card + tab strip + tab content. */\r\nfunction DetailBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <SkeletonDetailHero />\r\n\r\n      <Box sx={{ display: \"flex\", gap: \"var(--s-4)\" }}>\r\n        {[0, 1, 2].map((i) => (\r\n          <Skeleton key={i} width={96} height={14} />\r\n        ))}\r\n      </Box>\r\n\r\n      <Box\r\n        sx={{\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          gap: \"var(--s-3)\",\r\n          padding: \"var(--s-5)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box key={i} sx={{ display: \"flex\", gap: \"var(--s-4)\" }}>\r\n            <Skeleton width=\"22%\" height={12} />\r\n            <Skeleton width={`${44 + (i % 3) * 10}%`} height={12} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\nfunction SkeletonPageShell({\r\n  variant = \"list\",\r\n  breadcrumb = true,\r\n  subtitle = true,\r\n  action = true,\r\n  rows = 6,\r\n  loadingLabel = \"Chargement de la page…\",\r\n  sx,\r\n}: SkeletonPageShellProps) {\r\n  const safeRows = Math.max(1, Math.floor(rows));\r\n\r\n  return (\r\n    <Box\r\n      aria-busy=\"true\"\r\n      aria-label={loadingLabel}\r\n      sx={{ minWidth: 0, ...(sx as SystemStyleObject<Theme>) }}\r\n    >\r\n      {/* ── ActionBar zone ── */}\r\n      <Box sx={{ background: \"var(--bg)\", padding: ACTION_BAR_PADDING }}>\r\n        {breadcrumb && (\r\n          <Skeleton\r\n            width=\"34%\"\r\n            height={12}\r\n            style={{ marginBottom: \"var(--s-2)\" }}\r\n          />\r\n        )}\r\n\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            alignItems: { xs: \"flex-start\", sm: \"center\" },\r\n            justifyContent: \"space-between\",\r\n            flexWrap: { xs: \"wrap\", sm: \"nowrap\" },\r\n            gap: { xs: \"var(--s-2)\", sm: \"var(--s-4)\" },\r\n          }}\r\n        >\r\n          {/* Title: 18px on xs, 22px on sm+, matching ActionBar's h1. */}\r\n          <Skeleton width=\"42%\" height={22} />\r\n          {action && (\r\n            <Skeleton width={148} height=\"var(--btn-h)\" radius={8} />\r\n          )}\r\n        </Box>\r\n\r\n        {subtitle && (\r\n          <Skeleton\r\n            width=\"56%\"\r\n            height={13}\r\n            style={{ marginTop: \"var(--s-1)\" }}\r\n          />\r\n        )}\r\n      </Box>\r\n\r\n      {/* ── PageContent zone ── */}\r\n      <Box\r\n        sx={{\r\n          padding: PAGE_CONTENT_PADDING,\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          gap: \"var(--s-4)\",\r\n          minWidth: 0,\r\n        }}\r\n      >\r\n        {variant === \"list\" && <ListBody rows={safeRows} />}\r\n        {variant === \"form\" && <FormBody rows={safeRows} />}\r\n        {variant === \"detail\" && <DetailBody rows={safeRows} />}\r\n      </Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default SkeletonPageShell;\r\n"],"mappings":";;;;;;AAAA,IAAAA,IAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,SAAA,GAAAD,OAAA;AAAsE,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAF,GAAA,sCAAAE,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAJ,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAG,MAAA,IAAAH,GAAA,CAAAK,WAAA,KAAAF,MAAA,IAAAH,GAAA,KAAAG,MAAA,CAAAG,SAAA,qBAAAN,GAAA,KAAAE,OAAA,CAAAF,GAAA;AAAA,SAAAO,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAC,MAAA,CAAAD,IAAA,CAAAF,MAAA,OAAAG,MAAA,CAAAC,qBAAA,QAAAC,OAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAJ,MAAA,GAAAC,cAAA,KAAAI,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAJ,MAAA,CAAAK,wBAAA,CAAAR,MAAA,EAAAO,GAAA,EAAAE,UAAA,OAAAP,IAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,IAAA,EAAAG,OAAA,YAAAH,IAAA;AAAA,SAAAU,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAf,OAAA,CAAAI,MAAA,CAAAc,MAAA,OAAAC,OAAA,WAAAC,GAAA,IAAAC,eAAA,CAAAP,MAAA,EAAAM,GAAA,EAAAF,MAAA,CAAAE,GAAA,SAAAhB,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAT,MAAA,EAAAV,MAAA,CAAAkB,yBAAA,CAAAJ,MAAA,KAAAlB,OAAA,CAAAI,MAAA,CAAAc,MAAA,GAAAC,OAAA,WAAAC,GAAA,IAAAhB,MAAA,CAAAoB,cAAA,CAAAV,MAAA,EAAAM,GAAA,EAAAhB,MAAA,CAAAK,wBAAA,CAAAS,MAAA,EAAAE,GAAA,iBAAAN,MAAA;AAAA,SAAAO,gBAAA5B,GAAA,EAAA2B,GAAA,EAAAK,KAAA,IAAAL,GAAA,GAAAM,cAAA,CAAAN,GAAA,OAAAA,GAAA,IAAA3B,GAAA,IAAAW,MAAA,CAAAoB,cAAA,CAAA/B,GAAA,EAAA2B,GAAA,IAAAK,KAAA,EAAAA,KAAA,EAAAf,UAAA,QAAAiB,YAAA,QAAAC,QAAA,oBAAAnC,GAAA,CAAA2B,GAAA,IAAAK,KAAA,WAAAhC,GAAA;AAAA,SAAAiC,eAAAG,GAAA,QAAAT,GAAA,GAAAU,YAAA,CAAAD,GAAA,oBAAAlC,OAAA,CAAAyB,GAAA,iBAAAA,GAAA,GAAAW,MAAA,CAAAX,GAAA;AAAA,SAAAU,aAAAE,KAAA,EAAAC,IAAA,QAAAtC,OAAA,CAAAqC,KAAA,kBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAApC,MAAA,CAAAuC,WAAA,OAAAD,IAAA,KAAAE,SAAA,QAAAC,GAAA,GAAAH,IAAA,CAAAI,IAAA,CAAAN,KAAA,EAAAC,IAAA,oBAAAtC,OAAA,CAAA0C,GAAA,uBAAAA,GAAA,YAAAE,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA,KAEtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA8BA;AACA;AACA,IAAMS,kBAAkB,GAAGrC,MAAM,CAACsC,MAAM,CAAC;EACvCC,EAAE,EAAE,YAAY;EAChBC,EAAE,EAAE,uBAAuB;EAC3BC,EAAE,EAAE;AACN,CAAC,CAAC;AAEF,IAAMC,oBAAoB,GAAG1C,MAAM,CAACsC,MAAM,CAAC;EACzCC,EAAE,EAAE,YAAY;EAChBC,EAAE,EAAE,YAAY;EAChBC,EAAE,EAAE;AACN,CAAC,CAAC;AAEF,IAAME,eAAe,GAAG3C,MAAM,CAACsC,MAAM,CAAC;EACpCM,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,GAAG,EAAE,YAAY;EACjBC,OAAO,EAAE,YAAY;EACrBC,UAAU,EAAE,gBAAgB;EAC5BC,MAAM,EAAE,yBAAyB;EACjCC,YAAY,EAAE;AAChB,CAAC,CAAC;AAEF,IAAMC,cAAc,GAAGnD,MAAM,CAACsC,MAAM,CAAC;EACnCU,UAAU,EAAE,gBAAgB;EAC5BC,MAAM,EAAE,yBAAyB;EACjCC,YAAY,EAAE,aAAa;EAC3BE,QAAQ,EAAE;AACZ,CAAC,CAAC;;AAEF;AACA,SAASC,QAAQA,CAAAC,IAAA,EAA6B;EAAA,IAA1BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EACtB,oBACE,IAAAnE,WAAA,CAAAoE,IAAA,EAAApE,WAAA,CAAAqE,QAAA;IAAAC,QAAA,gBACE,IAAAtE,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;MAAC4E,EAAE,EAAEjB,eAAgB;MAAAe,QAAA,EACtB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACG,GAAG,CAAC,UAAClD,CAAC;QAAA,oBACf,IAAAvB,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;UAAS4E,EAAE,EAAE;YAAEE,IAAI,EAAE,WAAW;YAAEC,QAAQ,EAAE;UAAE,CAAE;UAAAL,QAAA,gBAClD,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YACPC,KAAK,EAAC,KAAK;YACXC,MAAM,EAAE,EAAG;YACXC,KAAK,EAAE;cAAEC,YAAY,EAAE;YAAa;UAAE,CACvC,CAAC,eACF,IAAAhF,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACE,MAAM,EAAC,gBAAgB;YAACG,MAAM,EAAE;UAAE,CAAE,CAAC;QAAA,GANvC1D,CAOL,CAAC;MAAA,CACP;IAAC,CACC,CAAC,eAEN,IAAAvB,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;MAAC4E,EAAE,EAAET,cAAe;MAAAO,QAAA,gBAEtB,IAAAtE,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;QACF4E,EAAE,EAAE;UACFhB,OAAO,EAAE,MAAM;UACfE,GAAG,EAAE,YAAY;UACjBC,OAAO,EAAE,uBAAuB;UAChCuB,YAAY,EAAE,yBAAyB;UACvCtB,UAAU,EAAE;QACd,CAAE;QAAAU,QAAA,EAED,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAACG,GAAG,CAAC,UAACU,CAAC;UAAA,oBACzC,IAAAnF,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAASC,KAAK,EAAEM,CAAE;YAACL,MAAM,EAAE;UAAG,GAAxBK,CAA0B,CAAC;QAAA,CAC3C;MAAC,CACC,CAAC,EAELC,KAAK,CAACC,IAAI,CAAC;QAAE5D,MAAM,EAAE0C;MAAK,CAAC,EAAE,UAACmB,CAAC,EAAE/D,CAAC;QAAA,oBACjC,IAAAvB,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;UAEF4E,EAAE,EAAE;YACFhB,OAAO,EAAE,MAAM;YACf+B,UAAU,EAAE,QAAQ;YACpB7B,GAAG,EAAE,YAAY;YACjBC,OAAO,EAAE,cAAc;YACvBmB,MAAM,EAAE,cAAc;YACtBI,YAAY,EAAE;UAChB,CAAE;UAAAZ,QAAA,EAED,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAACG,GAAG,CAAC,UAACU,CAAC;YAAA,oBACzC,IAAAnF,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;cAASC,KAAK,EAAEM,CAAE;cAACL,MAAM,EAAE;YAAG,GAAxBK,CAA0B,CAAC;UAAA,CAC3C;QAAC,GAZG5D,CAaF,CAAC;MAAA,CACP,CAAC;IAAA,CACC,CAAC;EAAA,CACN,CAAC;AAEP;;AAEA;AACA,SAASiE,QAAQA,CAAAC,KAAA,EAA6B;EAAA,IAA1BtB,IAAI,GAAAsB,KAAA,CAAJtB,IAAI;EACtB,oBACE,IAAAnE,WAAA,CAAAoE,IAAA,EAAApE,WAAA,CAAAqE,QAAA;IAAAC,QAAA,gBACE,IAAAtE,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;MACF4E,EAAE,EAAE;QACFhB,OAAO,EAAE,MAAM;QACf+B,UAAU,EAAE,QAAQ;QACpB7B,GAAG,EAAE,YAAY;QACjBC,OAAO,EAAE,YAAY;QACrBC,UAAU,EAAE,gBAAgB;QAC5BC,MAAM,EAAE,yBAAyB;QACjCC,YAAY,EAAE;MAChB,CAAE;MAAAQ,QAAA,EAED,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACG,GAAG,CAAC,UAAClD,CAAC;QAAA,oBACf,IAAAvB,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;UAEF4E,EAAE,EAAE;YAAEhB,OAAO,EAAE,MAAM;YAAE+B,UAAU,EAAE,QAAQ;YAAE7B,GAAG,EAAE,YAAY;YAAEgB,IAAI,EAAE;UAAE,CAAE;UAAAJ,QAAA,gBAE1E,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACC,KAAK,EAAE,EAAG;YAACC,MAAM,EAAE,EAAG;YAACG,MAAM,EAAE;UAAK,CAAE,CAAC,eACjD,IAAAjF,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACC,KAAK,EAAC,KAAK;YAACC,MAAM,EAAE;UAAG,CAAE,CAAC;QAAA,GAJ/BvD,CAKF,CAAC;MAAA,CACP;IAAC,CACC,CAAC,eAEN,IAAAvB,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;MACF4E,EAAE,EAAE;QACFhB,OAAO,EAAE,MAAM;QACfkC,mBAAmB,EAAE;UAAEvC,EAAE,EAAE,KAAK;UAAEwC,EAAE,EAAE;QAAU,CAAC;QACjDjC,GAAG,EAAE,YAAY;QACjBC,OAAO,EAAE,YAAY;QACrBC,UAAU,EAAE,gBAAgB;QAC5BC,MAAM,EAAE,yBAAyB;QACjCC,YAAY,EAAE;MAChB,CAAE;MAAAQ,QAAA,EAEDc,KAAK,CAACC,IAAI,CAAC;QAAE5D,MAAM,EAAE0C;MAAK,CAAC,EAAE,UAACmB,CAAC,EAAE/D,CAAC;QAAA,oBACjC,IAAAvB,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;UAAA0E,QAAA,gBACF,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YACPC,KAAK,EAAC,KAAK;YACXC,MAAM,EAAE,EAAG;YACXC,KAAK,EAAE;cAAEC,YAAY,EAAE;YAAa;UAAE,CACvC,CAAC,eACF,IAAAhF,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACE,MAAM,EAAC,gBAAgB;YAACG,MAAM,EAAE;UAAE,CAAE,CAAC;QAAA,GANvC1D,CAOL,CAAC;MAAA,CACP;IAAC,CACC,CAAC;EAAA,CACN,CAAC;AAEP;;AAEA;AACA,SAASqE,UAAUA,CAAAC,KAAA,EAA6B;EAAA,IAA1B1B,IAAI,GAAA0B,KAAA,CAAJ1B,IAAI;EACxB,oBACE,IAAAnE,WAAA,CAAAoE,IAAA,EAAApE,WAAA,CAAAqE,QAAA;IAAAC,QAAA,gBACE,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA+F,kBAAkB,IAAE,CAAC,eAEtB,IAAA9F,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;MAAC4E,EAAE,EAAE;QAAEhB,OAAO,EAAE,MAAM;QAAEE,GAAG,EAAE;MAAa,CAAE;MAAAY,QAAA,EAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACG,GAAG,CAAC,UAAClD,CAAC;QAAA,oBACf,IAAAvB,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;UAASC,KAAK,EAAE,EAAG;UAACC,MAAM,EAAE;QAAG,GAAzBvD,CAA2B,CAAC;MAAA,CAC5C;IAAC,CACC,CAAC,eAEN,IAAAvB,WAAA,CAAAuE,GAAA,EAAC3E,IAAA,WAAG;MACF4E,EAAE,EAAE;QACFhB,OAAO,EAAE,MAAM;QACfuC,aAAa,EAAE,QAAQ;QACvBrC,GAAG,EAAE,YAAY;QACjBC,OAAO,EAAE,YAAY;QACrBC,UAAU,EAAE,gBAAgB;QAC5BC,MAAM,EAAE,yBAAyB;QACjCC,YAAY,EAAE;MAChB,CAAE;MAAAQ,QAAA,EAEDc,KAAK,CAACC,IAAI,CAAC;QAAE5D,MAAM,EAAE0C;MAAK,CAAC,EAAE,UAACmB,CAAC,EAAE/D,CAAC;QAAA,oBACjC,IAAAvB,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;UAAS4E,EAAE,EAAE;YAAEhB,OAAO,EAAE,MAAM;YAAEE,GAAG,EAAE;UAAa,CAAE;UAAAY,QAAA,gBACtD,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACC,KAAK,EAAC,KAAK;YAACC,MAAM,EAAE;UAAG,CAAE,CAAC,eACpC,IAAA9E,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;YAACC,KAAK,KAAAmB,MAAA,CAAK,EAAE,GAAIzE,CAAC,GAAG,CAAC,GAAI,EAAE,MAAI;YAACuD,MAAM,EAAE;UAAG,CAAE,CAAC;QAAA,GAFhDvD,CAGL,CAAC;MAAA,CACP;IAAC,CACC,CAAC;EAAA,CACN,CAAC;AAEP;AAEA,SAAS0E,iBAAiBA,CAAAC,KAAA,EAQC;EAAA,IAAAC,aAAA,GAAAD,KAAA,CAPzBE,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,MAAM,GAAAA,aAAA;IAAAE,gBAAA,GAAAH,KAAA,CAChBI,UAAU;IAAVA,UAAU,GAAAD,gBAAA,cAAG,IAAI,GAAAA,gBAAA;IAAAE,cAAA,GAAAL,KAAA,CACjBM,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,IAAI,GAAAA,cAAA;IAAAE,YAAA,GAAAP,KAAA,CACfQ,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,IAAI,GAAAA,YAAA;IAAAE,UAAA,GAAAT,KAAA,CACb/B,IAAI;IAAJA,IAAI,GAAAwC,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAAC,kBAAA,GAAAV,KAAA,CACRW,YAAY;IAAZA,YAAY,GAAAD,kBAAA,cAAG,wBAAwB,GAAAA,kBAAA;IACvCpC,EAAE,GAAA0B,KAAA,CAAF1B,EAAE;EAEF,IAAMsC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAAC9C,IAAI,CAAC,CAAC;EAE9C,oBACE,IAAAnE,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;IACF,aAAU,MAAM;IAChB,cAAYiH,YAAa;IACzBrC,EAAE,EAAAnD,aAAA;MAAIsD,QAAQ,EAAE;IAAC,GAAMH,EAAE,CAAgC;IAAAF,QAAA,gBAGzD,IAAAtE,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;MAAC4E,EAAE,EAAE;QAAEZ,UAAU,EAAE,WAAW;QAAED,OAAO,EAAEV;MAAmB,CAAE;MAAAqB,QAAA,GAC/DgC,UAAU,iBACT,IAAAtG,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;QACPC,KAAK,EAAC,KAAK;QACXC,MAAM,EAAE,EAAG;QACXC,KAAK,EAAE;UAAEC,YAAY,EAAE;QAAa;MAAE,CACvC,CACF,eAED,IAAAhF,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;QACF4E,EAAE,EAAE;UACFhB,OAAO,EAAE,MAAM;UACf+B,UAAU,EAAE;YAAEpC,EAAE,EAAE,YAAY;YAAEC,EAAE,EAAE;UAAS,CAAC;UAC9C8D,cAAc,EAAE,eAAe;UAC/BzD,QAAQ,EAAE;YAAEN,EAAE,EAAE,MAAM;YAAEC,EAAE,EAAE;UAAS,CAAC;UACtCM,GAAG,EAAE;YAAEP,EAAE,EAAE,YAAY;YAAEC,EAAE,EAAE;UAAa;QAC5C,CAAE;QAAAkB,QAAA,gBAGF,IAAAtE,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;UAACC,KAAK,EAAC,KAAK;UAACC,MAAM,EAAE;QAAG,CAAE,CAAC,EACnC4B,MAAM,iBACL,IAAA1G,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;UAACC,KAAK,EAAE,GAAI;UAACC,MAAM,EAAC,cAAc;UAACG,MAAM,EAAE;QAAE,CAAE,CACzD;MAAA,CACE,CAAC,EAELuB,QAAQ,iBACP,IAAAxG,WAAA,CAAAuE,GAAA,EAACxE,SAAA,CAAA6E,QAAQ;QACPC,KAAK,EAAC,KAAK;QACXC,MAAM,EAAE,EAAG;QACXC,KAAK,EAAE;UAAEoC,SAAS,EAAE;QAAa;MAAE,CACpC,CACF;IAAA,CACE,CAAC,eAGN,IAAAnH,WAAA,CAAAoE,IAAA,EAACxE,IAAA,WAAG;MACF4E,EAAE,EAAE;QACFb,OAAO,EAAEL,oBAAoB;QAC7BE,OAAO,EAAE,MAAM;QACfuC,aAAa,EAAE,QAAQ;QACvBrC,GAAG,EAAE,YAAY;QACjBiB,QAAQ,EAAE;MACZ,CAAE;MAAAL,QAAA,GAED8B,OAAO,KAAK,MAAM,iBAAI,IAAApG,WAAA,CAAAuE,GAAA,EAACN,QAAQ;QAACE,IAAI,EAAE2C;MAAS,CAAE,CAAC,EAClDV,OAAO,KAAK,MAAM,iBAAI,IAAApG,WAAA,CAAAuE,GAAA,EAACiB,QAAQ;QAACrB,IAAI,EAAE2C;MAAS,CAAE,CAAC,EAClDV,OAAO,KAAK,QAAQ,iBAAI,IAAApG,WAAA,CAAAuE,GAAA,EAACqB,UAAU;QAACzB,IAAI,EAAE2C;MAAS,CAAE,CAAC;IAAA,CACpD,CAAC;EAAA,CACH,CAAC;AAEV;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEcpB,iBAAiB","ignoreList":[]}

package/dist/v2/patterns/SortableHeader.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { Alignment, AriaSort, SortDescriptor } from "../types/common";
+/**
+ * SortableHeader - Portnet UI v2 (pattern)
+ *
+ * Charter R-DG.7 - clickable header, ↑/↓ indicator, multi-sort with order badge.
+ *
+ * Single-sort: click → asc, click again → desc, click again → off.
+ * Multi-sort: shift+click adds a sort, badge shows priority.
+ *
+ *   const [sort, setSort] = useState([{ key: "date", dir: "desc" }]);
+ *   <th>
+ *     <SortableHeader sortKey="date" sort={sort} setSort={setSort}>
+ *       Date
+ *     </SortableHeader>
+ *   </th>
+ *
+ * A11y note (R-Ar.1):
+ *   The trigger is a real <button>, not <div role="button">. WAI-ARIA's
+ *   sortable column header pattern is <th aria-sort="..."><button>Label</button>;
+ *   DataGrid already hoists aria-sort onto the <th> (see getAriaSort below),
+ *   so this component only needs to be a real button.
+ *
+ * NOTE on aria-sort: SortableHeader does NOT set aria-sort. The aria-sort
+ * attribute belongs on the column header element (<th> / <TableCell>) per
+ * WAI-ARIA, NOT on a child interactive element. DataGrid (the canonical
+ * caller) hoists aria-sort onto the TableCell. Custom integrators wrapping
+ * SortableHeader directly in their own <th> must set aria-sort themselves
+ * - see `getAriaSort()` exported below.
+ */
+export interface SortableHeaderProps {
+    children: React.ReactNode;
+    sortKey: string;
+    sort: SortDescriptor[];
+    setSort: React.Dispatch<React.SetStateAction<SortDescriptor[]>>;
+    align?: Alignment;
+}
+declare function SortableHeader({ children, sortKey, sort, setSort, align }: SortableHeaderProps): React.JSX.Element;
+/**
+ * Helper - returns the WAI-ARIA aria-sort token for a column header,
+ * given the current sort state and the column key. Set this on the <th>
+ * (or MUI TableCell) that wraps the SortableHeader.
+ */
+export declare function getAriaSort(sort: SortDescriptor[], sortKey: string): AriaSort;
+export { applySort } from "./_sort";
+export default SortableHeader;
+//# sourceMappingURL=SortableHeader.d.ts.map

package/dist/v2/patterns/SortableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHeader.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/patterns/SortableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAc,EAAE,EAAE,mBAAmB,qBAkFhG;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,QAAQ,CAI7E;AAMD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAe,cAAc,CAAC"}

package/dist/v2/patterns/SortableHeader.js

@@ -0,0 +1,193 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applySort", {
+  enumerable: true,
+  get: function get() {
+    return _sort.applySort;
+  }
+});
+exports["default"] = void 0;
+exports.getAriaSort = getAriaSort;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
+var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
+var _UnfoldMore = _interopRequireDefault(require("@mui/icons-material/UnfoldMore"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _sort = require("./_sort");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } /**
+ * SortableHeader - Portnet UI v2 (pattern)
+ *
+ * Charter R-DG.7 - clickable header, ↑/↓ indicator, multi-sort with order badge.
+ *
+ * Single-sort: click → asc, click again → desc, click again → off.
+ * Multi-sort: shift+click adds a sort, badge shows priority.
+ *
+ *   const [sort, setSort] = useState([{ key: "date", dir: "desc" }]);
+ *   <th>
+ *     <SortableHeader sortKey="date" sort={sort} setSort={setSort}>
+ *       Date
+ *     </SortableHeader>
+ *   </th>
+ *
+ * A11y note (R-Ar.1):
+ *   The trigger is a real <button>, not <div role="button">. WAI-ARIA's
+ *   sortable column header pattern is <th aria-sort="..."><button>Label</button>;
+ *   DataGrid already hoists aria-sort onto the <th> (see getAriaSort below),
+ *   so this component only needs to be a real button.
+ *
+ * NOTE on aria-sort: SortableHeader does NOT set aria-sort. The aria-sort
+ * attribute belongs on the column header element (<th> / <TableCell>) per
+ * WAI-ARIA, NOT on a child interactive element. DataGrid (the canonical
+ * caller) hoists aria-sort onto the TableCell. Custom integrators wrapping
+ * SortableHeader directly in their own <th> must set aria-sort themselves
+ * - see `getAriaSort()` exported below.
+ */
+function SortableHeader(_ref) {
+  var children = _ref.children,
+    sortKey = _ref.sortKey,
+    sort = _ref.sort,
+    setSort = _ref.setSort,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "left" : _ref$align;
+  var entry = sort.find(function (s) {
+    return s.key === sortKey;
+  });
+  var idx = entry ? sort.findIndex(function (s) {
+    return s.key === sortKey;
+  }) : -1;
+  var dir = entry === null || entry === void 0 ? void 0 : entry.dir;
+  var click = function click(e) {
+    var multi = e.shiftKey;
+    setSort(function (prev) {
+      var exists = prev.find(function (s) {
+        return s.key === sortKey;
+      });
+      if (!multi) {
+        if (exists) return exists.dir === "asc" ? [{
+          key: sortKey,
+          dir: "desc"
+        }] : [];
+        return [{
+          key: sortKey,
+          dir: "asc"
+        }];
+      }
+      if (!exists) return [].concat(_toConsumableArray(prev), [{
+        key: sortKey,
+        dir: "asc"
+      }]);
+      if (exists.dir === "asc") return prev.map(function (s) {
+        return s.key === sortKey ? _objectSpread(_objectSpread({}, s), {}, {
+          dir: "desc"
+        }) : s;
+      });
+      return prev.filter(function (s) {
+        return s.key !== sortKey;
+      });
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    component: "button",
+    type: "button",
+    onClick: click,
+    sx: {
+      // <button> reset - neutralise UA defaults so the look matches the
+      // surrounding <th> styling.
+      background: "transparent",
+      border: 0,
+      padding: 0,
+      font: "inherit",
+      color: "inherit",
+      // Layout (unchanged from the previous Box-as-div version).
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5,
+      cursor: "pointer",
+      userSelect: "none",
+      justifyContent: align === "right" ? "flex-end" : "flex-start",
+      "&:focus-visible": {
+        outline: "2px solid var(--accent)",
+        outlineOffset: "var(--pui-outline-offset)",
+        borderRadius: "var(--r-sm)"
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      component: "span",
+      "aria-hidden": "true",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        color: dir ? "var(--accent)" : "var(--fg-subtle)"
+      },
+      children: [dir === "asc" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowUpward["default"], {
+        sx: {
+          fontSize: 12
+        }
+      }), dir === "desc" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDownward["default"], {
+        sx: {
+          fontSize: 12
+        }
+      }), !dir && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnfoldMore["default"], {
+        sx: {
+          fontSize: 12
+        }
+      }), sort.length > 1 && idx >= 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        component: "span",
+        sx: {
+          // R-T.1 - was 9 px (below charter floor even for captions). 11 px
+          // is the legible-caption sweet spot; the badge is a 1-digit
+          // integer so width impact is negligible.
+          fontSize: 11,
+          fontWeight: "var(--fw-bold)",
+          padding: "1px 5px",
+          marginLeft: 0.25,
+          borderRadius: "var(--r-full)",
+          background: "var(--accent)",
+          color: "var(--accent-fg)",
+          lineHeight: 1.4
+        },
+        children: idx + 1
+      })]
+    })]
+  });
+}
+
+/**
+ * Helper - returns the WAI-ARIA aria-sort token for a column header,
+ * given the current sort state and the column key. Set this on the <th>
+ * (or MUI TableCell) that wraps the SortableHeader.
+ */
+function getAriaSort(sort, sortKey) {
+  var entry = sort.find(function (s) {
+    return s.key === sortKey;
+  });
+  if (!entry) return "none";
+  return entry.dir === "asc" ? "ascending" : "descending";
+}
+
+/* ── applySort — locale-correct sorting ──────────────────────────────
+ * Extracted to ./_sort (shared with the useSortedRows hook). Re-exported
+ * here so the public call site `import { applySort } from ".../SortableHeader"`
+ * and the patterns barrel are unchanged. */
+var _default = exports["default"] = SortableHeader;
+//# sourceMappingURL=SortableHeader.js.map