@portnet/ui 5.0.27 → 6.0.0

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

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

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+/**
+ * Tour - Portnet UI v2 (pattern)
+ *
+ * Charter §07 · "First-run tooltips" / onboarding. Step-by-step guided tour
+ * anchored to specific DOM elements with spotlight + tooltip nav.
+ *
+ *   <Tour
+ *     open={tourOpen}
+ *     steps={[
+ *       { target: "#nav-dashboard",    title: "Accueil",  content: "..." },
+ *       { target: "[data-tour='kpi']", title: "KPIs",     content: "...", placement: "bottom" },
+ *     ]}
+ *     onClose={() => setTourOpen(false)}
+ *     onComplete={() => markTourSeen()}
+ *   />
+ *
+ * Step state is INTERNAL (resets to 0 on every `open` → true transition).
+ * Host owns `open` and the "user has seen the tour" persistence.
+ *
+ * A11y: role="dialog" aria-modal="true"; aria-labelledby / aria-describedby;
+ * step counter in role="status" aria-live="polite"; step title + content are
+ * polite/atomic live regions so each step change is announced (TOUR-1); Esc
+ * closes; focus trapped.
+ *
+ * Target-not-found fallback: if the CSS selector doesn't match, the spotlight
+ * falls back to a full-screen dimmed backdrop and the tooltip renders centered.
+ */
+export type TourPlacement = "top" | "bottom" | "left" | "right" | "auto";
+export interface TourStep {
+    /** CSS selector for the element to highlight. */
+    target: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    /** Preferred side; "auto" (default) picks the side with the most space. */
+    placement?: TourPlacement;
+}
+export interface TourLabels {
+    prev?: React.ReactNode;
+    next?: React.ReactNode;
+    skip?: React.ReactNode;
+    finish?: React.ReactNode;
+    closeAria?: string;
+    stepCounter?: (cur: number, total: number) => React.ReactNode;
+}
+export interface TourProps {
+    open?: boolean;
+    steps?: TourStep[];
+    onClose?: () => void;
+    onComplete?: () => void;
+    labels?: TourLabels;
+}
+declare function Tour({ open, steps, onClose, onComplete, labels }: TourProps): React.ReactPortal | null;
+export default Tour;
+//# sourceMappingURL=Tour.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/patterns/Tour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,QAAQ;IACvB,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAwMD,iBAAS,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,SAAS,4BAkQpE;AAED,eAAe,IAAI,CAAC"}

package/dist/v2/patterns/Tour.js

@@ -0,0 +1,473 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Button = _interopRequireDefault(require("../components/Button"));
+var _useFocusTrap = _interopRequireDefault(require("../hooks/useFocusTrap"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); } /**
+ * Tour - Portnet UI v2 (pattern)
+ *
+ * Charter §07 · "First-run tooltips" / onboarding. Step-by-step guided tour
+ * anchored to specific DOM elements with spotlight + tooltip nav.
+ *
+ *   <Tour
+ *     open={tourOpen}
+ *     steps={[
+ *       { target: "#nav-dashboard",    title: "Accueil",  content: "..." },
+ *       { target: "[data-tour='kpi']", title: "KPIs",     content: "...", placement: "bottom" },
+ *     ]}
+ *     onClose={() => setTourOpen(false)}
+ *     onComplete={() => markTourSeen()}
+ *   />
+ *
+ * Step state is INTERNAL (resets to 0 on every `open` → true transition).
+ * Host owns `open` and the "user has seen the tour" persistence.
+ *
+ * A11y: role="dialog" aria-modal="true"; aria-labelledby / aria-describedby;
+ * step counter in role="status" aria-live="polite"; step title + content are
+ * polite/atomic live regions so each step change is announced (TOUR-1); Esc
+ * closes; focus trapped.
+ *
+ * Target-not-found fallback: if the CSS selector doesn't match, the spotlight
+ * falls back to a full-screen dimmed backdrop and the tooltip renders centered.
+ */ /** Resolved target geometry (plus the element, for potential callers). */ /** Resolved tooltip position; `placement` is the chosen side (or "center"). */
+var PADDING = 8; // spotlight extra around target bbox
+var TOOLTIP_GAP = 12; // distance from target to tooltip edge
+var TOOLTIP_WIDTH = 320;
+var TOOLTIP_MAX_HEIGHT = 360;
+var VIEWPORT_MARGIN = 8; // min distance from viewport edges
+
+var DEFAULT_LABELS = Object.freeze({
+  prev: "Précédent",
+  next: "Suivant",
+  skip: "Ignorer",
+  finish: "Terminer",
+  closeAria: "Fermer la visite guidée",
+  stepCounter: function stepCounter(cur, total) {
+    return "".concat(cur, " sur ").concat(total);
+  }
+});
+
+/**
+ * Try to resolve a CSS selector to its element's bounding rect. Returns null
+ * on any failure (selector invalid, element absent). Defensive — host typos
+ * shouldn't crash the tour.
+ */
+function getElementRect(selector) {
+  if (!selector || typeof document === "undefined") return null;
+  try {
+    var el = document.querySelector(selector);
+    if (!el) return null;
+    var r = el.getBoundingClientRect();
+    return {
+      top: r.top,
+      left: r.left,
+      right: r.right,
+      bottom: r.bottom,
+      width: r.width,
+      height: r.height,
+      el: el
+    };
+  } catch (_unused) {
+    // Invalid selector syntax → catch SyntaxError, return null.
+    return null;
+  }
+}
+
+/**
+ * Compute the tooltip's top/left given a target rect, a placement preference,
+ * and the viewport bounds. Auto picks the side with the most clearance;
+ * clamps to viewport.
+ */
+function computeTooltipPosition(targetRect, placement, vw, vh) {
+  var p = placement || "auto";
+  if (p === "auto") {
+    var space = {
+      top: targetRect.top,
+      bottom: vh - targetRect.bottom,
+      left: targetRect.left,
+      right: vw - targetRect.right
+    };
+    // Pick the side with the most clearance. Stable on ties — first entry
+    // wins (Object.entries order is insertion order, ES2015+).
+    var best = Object.entries(space).sort(function (a, b) {
+      return b[1] - a[1];
+    })[0];
+    if (best) p = best[0];
+  }
+  var top;
+  var left;
+  switch (p) {
+    case "top":
+      top = targetRect.top - TOOLTIP_GAP - TOOLTIP_MAX_HEIGHT;
+      left = targetRect.left + targetRect.width / 2 - TOOLTIP_WIDTH / 2;
+      break;
+    case "bottom":
+      top = targetRect.bottom + TOOLTIP_GAP;
+      left = targetRect.left + targetRect.width / 2 - TOOLTIP_WIDTH / 2;
+      break;
+    case "left":
+      top = targetRect.top + targetRect.height / 2 - TOOLTIP_MAX_HEIGHT / 2;
+      left = targetRect.left - TOOLTIP_GAP - TOOLTIP_WIDTH;
+      break;
+    case "right":
+      top = targetRect.top + targetRect.height / 2 - TOOLTIP_MAX_HEIGHT / 2;
+      left = targetRect.right + TOOLTIP_GAP;
+      break;
+    default:
+      top = targetRect.bottom + TOOLTIP_GAP;
+      left = targetRect.left;
+  }
+
+  // Clamp to viewport with a small margin so the tooltip never touches the edge.
+  left = Math.max(VIEWPORT_MARGIN, Math.min(left, vw - TOOLTIP_WIDTH - VIEWPORT_MARGIN));
+  top = Math.max(VIEWPORT_MARGIN, Math.min(top, vh - TOOLTIP_MAX_HEIGHT - VIEWPORT_MARGIN));
+  return {
+    top: top,
+    left: left,
+    placement: p
+  };
+}
+
+/* ── Hoisted sx (Batch 14 D5 pattern) ─────────────────────────────── */
+
+var SPOTLIGHT_BG = "color-mix(in srgb, var(--fg) 60%, transparent)";
+var SPOTLIGHT_BASE_SX = Object.freeze({
+  position: "fixed",
+  background: SPOTLIGHT_BG,
+  zIndex: "var(--z-modal)",
+  pointerEvents: "auto"
+});
+var BACKDROP_FALLBACK_SX = Object.freeze({
+  position: "fixed",
+  inset: 0,
+  background: SPOTLIGHT_BG,
+  zIndex: "var(--z-modal)",
+  pointerEvents: "auto"
+});
+var TOOLTIP_BASE_SX = Object.freeze({
+  position: "fixed",
+  width: TOOLTIP_WIDTH,
+  maxHeight: TOOLTIP_MAX_HEIGHT,
+  overflowY: "auto",
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-lg)",
+  boxShadow: "var(--shadow-lg)",
+  padding: "var(--s-4)",
+  zIndex: "var(--z-tooltip)"
+});
+var TOOLTIP_HEADER_SX = Object.freeze({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "var(--s-2)",
+  marginBottom: "var(--s-2)"
+});
+var TOOLTIP_TITLE_SX = Object.freeze({
+  fontSize: "var(--text-h4)",
+  fontWeight: "var(--fw-bold)",
+  color: "var(--fg)"
+});
+var TOOLTIP_CLOSE_SX = Object.freeze({
+  color: "var(--fg-muted)",
+  marginRight: "calc(-1 * var(--s-1))",
+  marginTop: "calc(-1 * var(--s-1))"
+});
+var TOOLTIP_CONTENT_SX = Object.freeze({
+  fontSize: "var(--text-sm)",
+  color: "var(--fg-muted)",
+  marginBottom: "var(--s-3)",
+  lineHeight: "var(--lh-normal)"
+});
+var TOOLTIP_FOOTER_SX = Object.freeze({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--s-2)"
+});
+var STEP_COUNTER_SX = Object.freeze({
+  fontSize: "var(--text-xs)",
+  color: "var(--fg-subtle)",
+  fontVariantNumeric: "tabular-nums"
+});
+var NAV_BUTTONS_SX = Object.freeze({
+  display: "flex",
+  gap: "var(--s-2)"
+});
+function Tour(_ref) {
+  var open = _ref.open,
+    steps = _ref.steps,
+    onClose = _ref.onClose,
+    onComplete = _ref.onComplete,
+    labels = _ref.labels;
+  var L = React.useMemo(function () {
+    return labels ? _objectSpread(_objectSpread({}, DEFAULT_LABELS), labels) : DEFAULT_LABELS;
+  }, [labels]);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    stepIdx = _React$useState2[0],
+    setStepIdx = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    targetRect = _React$useState4[0],
+    setTargetRect = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    tooltipPos = _React$useState6[0],
+    setTooltipPos = _React$useState6[1];
+  var _React$useState7 = React.useState({
+      w: 0,
+      h: 0
+    }),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    viewport = _React$useState8[0],
+    setViewport = _React$useState8[1];
+  var tooltipRef = React.useRef(null);
+  var titleId = React.useId();
+  var contentId = React.useId();
+  var currentStep = steps && steps[stepIdx];
+
+  // Focus trap activates ONLY after tooltipPos is computed (tooltip actually
+  // mounted with a non-null ref). On first open, tooltipPos is null until the
+  // position effect runs, so the trap would otherwise activate against a null ref.
+  (0, _useFocusTrap["default"])(tooltipRef, !!open && tooltipPos != null);
+
+  // Reset to step 0 on each open transition.
+  React.useEffect(function () {
+    if (open) setStepIdx(0);
+  }, [open]);
+
+  // Compute target rect + tooltip position. Re-runs on step change and on
+  // window scroll/resize.
+  React.useEffect(function () {
+    if (!open || !currentStep) return undefined;
+    var recompute = function recompute() {
+      var w = window.innerWidth;
+      var h = window.innerHeight;
+      setViewport({
+        w: w,
+        h: h
+      });
+      var rect = getElementRect(currentStep.target);
+      setTargetRect(rect);
+      if (rect) {
+        setTooltipPos(computeTooltipPosition(rect, currentStep.placement, w, h));
+      } else {
+        // Fallback: center the tooltip when target not found.
+        setTooltipPos({
+          top: Math.max(VIEWPORT_MARGIN, (h - TOOLTIP_MAX_HEIGHT) / 2),
+          left: Math.max(VIEWPORT_MARGIN, (w - TOOLTIP_WIDTH) / 2),
+          placement: "center"
+        });
+      }
+    };
+    recompute();
+
+    // Scroll the target into view on each step change; no-ops if not found.
+    var initialEl = typeof document !== "undefined" ? function () {
+      try {
+        return document.querySelector(currentStep.target);
+      } catch (_unused2) {
+        return null;
+      }
+    }() : null;
+    if (initialEl && typeof initialEl.scrollIntoView === "function") {
+      initialEl.scrollIntoView({
+        block: "center",
+        behavior: "smooth"
+      });
+    }
+
+    // TOUR-2 (perf) — coalesce scroll/resize into ONE recompute per frame.
+    // recompute() does a querySelector + getBoundingClientRect + up to 4
+    // setState calls, so running it on every raw scroll event is wasteful;
+    // rAF-throttle to at most once per animation frame. `true` (capture)
+    // catches scroll on any ancestor (default scroll events don't bubble).
+    var rafId = null;
+    var onViewportChange = function onViewportChange() {
+      if (rafId != null) return; // a frame is already scheduled
+      rafId = window.requestAnimationFrame(function () {
+        rafId = null;
+        recompute();
+      });
+    };
+    window.addEventListener("scroll", onViewportChange, true);
+    window.addEventListener("resize", onViewportChange);
+    return function () {
+      window.removeEventListener("scroll", onViewportChange, true);
+      window.removeEventListener("resize", onViewportChange);
+      if (rafId != null) window.cancelAnimationFrame(rafId);
+    };
+  }, [open, currentStep]);
+
+  // Esc closes the tour. Window-bound — same pattern as Modal / Drawer.
+  React.useEffect(function () {
+    if (!open) return undefined;
+    var onKey = function onKey(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return function () {
+      return window.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+  if (!open || !steps || steps.length === 0 || !currentStep) return null;
+  var total = steps.length;
+  var isFirst = stepIdx === 0;
+  var isLast = stepIdx === total - 1;
+  var goNext = function goNext() {
+    if (isLast) {
+      onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    } else {
+      setStepIdx(stepIdx + 1);
+    }
+  };
+  var goPrev = function goPrev() {
+    if (!isFirst) setStepIdx(stepIdx - 1);
+  };
+  var skip = function skip() {
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  };
+
+  // Spotlight: 4 dark overlays around the target bbox. Each is clickable → skip.
+  var spotlight = targetRect && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      onClick: skip,
+      sx: _objectSpread(_objectSpread({}, SPOTLIGHT_BASE_SX), {}, {
+        left: 0,
+        top: 0,
+        width: "100vw",
+        height: Math.max(0, targetRect.top - PADDING)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      onClick: skip,
+      sx: _objectSpread(_objectSpread({}, SPOTLIGHT_BASE_SX), {}, {
+        left: 0,
+        top: Math.max(0, targetRect.top - PADDING),
+        width: Math.max(0, targetRect.left - PADDING),
+        height: targetRect.height + 2 * PADDING
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      onClick: skip,
+      sx: _objectSpread(_objectSpread({}, SPOTLIGHT_BASE_SX), {}, {
+        left: targetRect.right + PADDING,
+        top: Math.max(0, targetRect.top - PADDING),
+        width: Math.max(0, viewport.w - (targetRect.right + PADDING)),
+        height: targetRect.height + 2 * PADDING
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      onClick: skip,
+      sx: _objectSpread(_objectSpread({}, SPOTLIGHT_BASE_SX), {}, {
+        left: 0,
+        top: targetRect.bottom + PADDING,
+        width: "100vw",
+        height: Math.max(0, viewport.h - (targetRect.bottom + PADDING))
+      })
+    })]
+  });
+
+  // Backdrop fallback when target not found — full-screen dimmed overlay.
+  var backdropFallback = !targetRect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+    onClick: skip,
+    sx: BACKDROP_FALLBACK_SX
+  });
+
+  // Tooltip — only renders once tooltipPos is computed.
+  var tooltip = tooltipPos && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    ref: tooltipRef,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": titleId,
+    "aria-describedby": contentId,
+    sx: _objectSpread(_objectSpread({}, TOOLTIP_BASE_SX), {}, {
+      top: tooltipPos.top,
+      left: tooltipPos.left
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: TOOLTIP_HEADER_SX,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        id: titleId,
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        sx: TOOLTIP_TITLE_SX,
+        children: currentStep.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], {
+        size: "small",
+        onClick: skip,
+        "aria-label": L.closeAria,
+        sx: TOOLTIP_CLOSE_SX,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close["default"], {
+          fontSize: "small"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      id: contentId,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      sx: TOOLTIP_CONTENT_SX,
+      children: currentStep.content
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+      sx: TOOLTIP_FOOTER_SX,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        role: "status",
+        "aria-live": "polite",
+        sx: STEP_COUNTER_SX,
+        children: L.stepCounter(stepIdx + 1, total)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+        sx: NAV_BUTTONS_SX,
+        children: [!isFirst && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          variant: "ghost",
+          size: "sm",
+          onClick: goPrev,
+          children: L.prev
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          variant: "ghost",
+          size: "sm",
+          onClick: skip,
+          children: L.skip
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          variant: "primary",
+          size: "sm",
+          onClick: goNext,
+          children: isLast ? L.finish : L.next
+        })]
+      })]
+    })]
+  });
+
+  // Portal to document.body so the tour escapes any host overflow/transform
+  // context that would clip absolute positioning.
+  if (typeof document === "undefined") return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [spotlight, backdropFallback, tooltip]
+  }), document.body);
+}
+var _default = exports["default"] = Tour;
+//# sourceMappingURL=Tour.js.map