@portnet/ui 6.0.2 → 6.0.3

package/dist/esm/v2/patterns/KeyboardShortcutsHelp.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardShortcutsHelp.js","names":["React","Modal","mergeLabels","jsx","_jsx","jsxs","_jsxs","isFocusOnTextEntry","el","document","activeElement","tag","tagName","HTMLElement","isContentEditable","ShortcutKey","_ref","children","style","display","minWidth","padding","background","border","borderBottomColor","borderRadius","boxShadow","fontFamily","fontSize","textAlign","lineHeight","color","SHORTCUT_ROW_SX","gridTemplateColumns","gap","alignItems","borderBottom","SHORTCUT_KEYS_SX","flexWrap","HELP_FOOTNOTE_SX","marginTop","paddingTop","borderTop","DEFAULT_LABELS","Object","freeze","footnoteIntro","footnoteOutro","listAriaLabel","keyJoiner","KeyboardShortcutsHelp","_ref2","_ref2$shortcuts","shortcuts","_ref2$title","title","labels","open","onOpenChange","_React$useState","useState","_React$useState2","_slicedToArray","uncontrolledOpen","setUncontrolledOpen","isControlled","undefined","isOpen","L","isOpenRef","useRef","current","onOpenChangeRef","isControlledRef","requestOpen","useCallback","next","_onOpenChangeRef$curr","call","useEffect","handler","event","key","ctrlKey","metaKey","altKey","preventDefault","window","addEventListener","removeEventListener","Array","isArray","length","onClose","size","margin","map","sc","i","keys","k","j","Fragment","description"],"sources":["../../../../src/lib/v2/patterns/KeyboardShortcutsHelp.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Modal from \"../components/Modal\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/* ── Body-only focus guard ────────────────────────────────────────\r\n * The \"?\" key is a printable character. If a user types \"?\" inside an\r\n * Input / Textarea / contentEditable element we must NOT hijack the\r\n * keypress to open the help — they're trying to type a question mark.\r\n *\r\n * BUTTON / A focus is NOT blocking by design: when the user has tabbed\r\n * onto an interactive non-text element, hitting \"?\" makes sense as a\r\n * help affordance (navigation mode, not text-entry mode).\r\n */\r\nfunction isFocusOnTextEntry(): boolean {\r\n  const el = typeof document !== \"undefined\" ? document.activeElement : null;\r\n  if (!el) return false;\r\n  const tag = el.tagName;\r\n  if (tag === \"INPUT\" || tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\r\n  if (el instanceof HTMLElement && el.isContentEditable) return true;\r\n  return false;\r\n}\r\n\r\nfunction ShortcutKey({ children }: { children?: React.ReactNode }) {\r\n  return (\r\n    <kbd\r\n      style={{\r\n        display: \"inline-block\",\r\n        minWidth: \"1.75em\",\r\n        padding: \"0.15em 0.5em\",\r\n        background: \"var(--bg-subtle)\",\r\n        border: \"1px solid var(--border)\",\r\n        borderBottomColor: \"var(--border-strong, var(--border))\",\r\n        borderRadius: \"var(--r-sm)\",\r\n        boxShadow: \"inset 0 -1px 0 var(--border)\",\r\n        fontFamily: \"var(--font-mono, monospace)\",\r\n        fontSize: \"var(--text-sm)\",\r\n        textAlign: \"center\",\r\n        lineHeight: 1.4,\r\n        color: \"var(--fg)\",\r\n      }}\r\n    >\r\n      {children}\r\n    </kbd>\r\n  );\r\n}\r\n\r\nconst SHORTCUT_ROW_SX: React.CSSProperties = {\r\n  display: \"grid\",\r\n  gridTemplateColumns: \"auto 1fr\",\r\n  gap: \"var(--s-4)\",\r\n  alignItems: \"center\",\r\n  padding: \"var(--s-2) 0\",\r\n  borderBottom: \"1px solid var(--border-subtle, var(--border))\",\r\n};\r\n\r\nconst SHORTCUT_KEYS_SX: React.CSSProperties = {\r\n  display: \"flex\",\r\n  gap: \"var(--s-1)\",\r\n  alignItems: \"center\",\r\n  flexWrap: \"wrap\",\r\n};\r\n\r\nconst HELP_FOOTNOTE_SX: React.CSSProperties = {\r\n  marginTop: \"var(--s-4)\",\r\n  paddingTop: \"var(--s-3)\",\r\n  borderTop: \"1px solid var(--border)\",\r\n  fontSize: \"var(--text-xs)\",\r\n  color: \"var(--fg-subtle)\",\r\n  lineHeight: 1.5,\r\n};\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  /* Footnote rendered below the shortcut list. Split into two parts so the\r\n   * keycap can be embedded in the middle without forcing the i18n string to\r\n   * carry HTML tags. */\r\n  footnoteIntro: \"Astuce : appuyez sur\",\r\n  footnoteOutro:\r\n    \"à tout moment pour ouvrir ou fermer cette aide. Les raccourcis s'activent uniquement quand votre curseur n'est pas dans un champ de saisie.\",\r\n  /* aria-label on the <dl> listing every shortcut. */\r\n  listAriaLabel: \"Liste des raccourcis clavier disponibles sur cette page\",\r\n  /* Joiner rendered between alternative keys for the same shortcut. */\r\n  keyJoiner: \"ou\",\r\n});\r\n\r\n/**\r\n * KeyboardShortcutsHelp — Portnet UI v2\r\n *\r\n * Charter §5.2 SHOULD — discoverable help overlay for page-level keyboard\r\n * shortcuts. Listens globally for \"?\" and opens a v2.Modal listing every\r\n * shortcut as <kbd> elements (WCAG 1.3.1 semantic).\r\n *\r\n * Self-contained: the host page only declares the shortcuts array and renders\r\n * <KeyboardShortcutsHelp shortcuts={…} /> once.\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <KeyboardShortcutsHelp\r\n *     title=\"Keyboard shortcuts\"\r\n *     labels={{\r\n *       footnoteIntro: \"Tip: press\",\r\n *       footnoteOutro: \"anytime to toggle this help…\",\r\n *       listAriaLabel: \"List of keyboard shortcuts available on this page\",\r\n *       keyJoiner:     \"or\",\r\n *     }}\r\n *     shortcuts={…}\r\n *   />\r\n *\r\n * Charter §5.2 SHOULD + WCAG 1.3.1 (semantic <kbd>) + 2.1.1 (keyboard\r\n * reachable) + R-M.* (modal focus trap inherited from v2.Modal).\r\n */\r\n\r\nexport interface KeyboardShortcut {\r\n  keys: string[];\r\n  description: React.ReactNode;\r\n}\r\n\r\nexport interface KeyboardShortcutsHelpLabels {\r\n  footnoteIntro?: string | undefined;\r\n  footnoteOutro?: string | undefined;\r\n  listAriaLabel?: string | undefined;\r\n  keyJoiner?: string | undefined;\r\n}\r\n\r\nexport interface KeyboardShortcutsHelpProps {\r\n  shortcuts?: KeyboardShortcut[] | undefined;\r\n  title?: React.ReactNode | undefined;\r\n  labels?: KeyboardShortcutsHelpLabels | undefined;\r\n  /**\r\n   * Optional CONTROLLED open state. Omit for the original self-contained\r\n   * behaviour (the \"?\" listener owns the state).\r\n   *\r\n   * Added because the panel had no trigger but the keystroke. Hosts wired it\r\n   * correctly and users still reported the shortcuts \"missing\" — they are, in\r\n   * every practical sense, if the only affordance is a key you have to already\r\n   * know about. Charter §05.2 asks for DISCOVERABLE help, and a host cannot add\r\n   * a menu item or button without being able to open this.\r\n   */\r\n  open?: boolean | undefined;\r\n  /** Called with the requested next state, for both \"?\" and the close button. */\r\n  onOpenChange?: ((open: boolean) => void) | undefined;\r\n}\r\n\r\nfunction KeyboardShortcutsHelp({\r\n  shortcuts = [],\r\n  title = \"Raccourcis clavier\",\r\n  labels,\r\n  open,\r\n  onOpenChange,\r\n}: KeyboardShortcutsHelpProps) {\r\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\r\n  const isControlled = open !== undefined;\r\n  const isOpen = isControlled ? open : uncontrolledOpen;\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  /* Refs so the \"?\" listener can stay on a `[]` dependency list — it must not\r\n   * be torn down and re-added on every open/close, and in controlled mode there\r\n   * is no functional-update form to fall back on. */\r\n  const isOpenRef = React.useRef(isOpen);\r\n  isOpenRef.current = isOpen;\r\n  const onOpenChangeRef = React.useRef(onOpenChange);\r\n  onOpenChangeRef.current = onOpenChange;\r\n  const isControlledRef = React.useRef(isControlled);\r\n  isControlledRef.current = isControlled;\r\n\r\n  const requestOpen = React.useCallback((next: boolean) => {\r\n    if (!isControlledRef.current) setUncontrolledOpen(next);\r\n    onOpenChangeRef.current?.(next);\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    const handler = (event: KeyboardEvent) => {\r\n      // Only react to \"?\" (Shift+/ on US, AltGr+, on many AZERTY layouts).\r\n      // event.key gives us the resolved character regardless of physical key.\r\n      if (event.key !== \"?\") return;\r\n\r\n      // Modifier keys (Ctrl, Meta, Alt) reserved for browser / OS shortcuts.\r\n      if (event.ctrlKey || event.metaKey || event.altKey) return;\r\n\r\n      // User is typing in a text field — let \"?\" through.\r\n      if (isFocusOnTextEntry()) return;\r\n\r\n      event.preventDefault();\r\n      requestOpen(!isOpenRef.current);\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", handler);\r\n    return () => window.removeEventListener(\"keydown\", handler);\r\n  }, [requestOpen]);\r\n\r\n  if (!Array.isArray(shortcuts) || shortcuts.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Modal\r\n      open={isOpen}\r\n      title={title}\r\n      onClose={() => requestOpen(false)}\r\n      size=\"md\"\r\n    >\r\n      <dl style={{ margin: 0, padding: 0 }} aria-label={L.listAriaLabel}>\r\n        {shortcuts.map((sc, i) => (\r\n          <div key={i} style={SHORTCUT_ROW_SX}>\r\n            <dt style={SHORTCUT_KEYS_SX}>\r\n              {sc.keys.map((k, j) => (\r\n                <React.Fragment key={j}>\r\n                  <ShortcutKey>{k}</ShortcutKey>\r\n                  {j < sc.keys.length - 1 && (\r\n                    <span\r\n                      aria-hidden=\"true\"\r\n                      style={{\r\n                        color: \"var(--fg-subtle)\",\r\n                        fontSize: \"var(--text-xs)\",\r\n                      }}\r\n                    >\r\n                      {L.keyJoiner}\r\n                    </span>\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </dt>\r\n            <dd style={{ margin: 0, fontSize: \"var(--text-body)\" }}>\r\n              {sc.description}\r\n            </dd>\r\n          </div>\r\n        ))}\r\n      </dl>\r\n      <div style={HELP_FOOTNOTE_SX}>\r\n        {L.footnoteIntro}{\" \"}\r\n        <ShortcutKey>?</ShortcutKey>{\" \"}\r\n        {L.footnoteOutro}\r\n      </div>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nexport default KeyboardShortcutsHelp;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,sBAAsB;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,SAASC,kBAAkBA,CAAA,EAAY;EACrC,IAAMC,EAAE,GAAG,OAAOC,QAAQ,KAAK,WAAW,GAAGA,QAAQ,CAACC,aAAa,GAAG,IAAI;EAC1E,IAAI,CAACF,EAAE,EAAE,OAAO,KAAK;EACrB,IAAMG,GAAG,GAAGH,EAAE,CAACI,OAAO;EACtB,IAAID,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,UAAU,IAAIA,GAAG,KAAK,QAAQ,EAAE,OAAO,IAAI;EAC1E,IAAIH,EAAE,YAAYK,WAAW,IAAIL,EAAE,CAACM,iBAAiB,EAAE,OAAO,IAAI;EAClE,OAAO,KAAK;AACd;AAEA,SAASC,WAAWA,CAAAC,IAAA,EAA+C;EAAA,IAA5CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAC7B,oBACEb,IAAA;IACEc,KAAK,EAAE;MACLC,OAAO,EAAE,cAAc;MACvBC,QAAQ,EAAE,QAAQ;MAClBC,OAAO,EAAE,cAAc;MACvBC,UAAU,EAAE,kBAAkB;MAC9BC,MAAM,EAAE,yBAAyB;MACjCC,iBAAiB,EAAE,qCAAqC;MACxDC,YAAY,EAAE,aAAa;MAC3BC,SAAS,EAAE,8BAA8B;MACzCC,UAAU,EAAE,6BAA6B;MACzCC,QAAQ,EAAE,gBAAgB;MAC1BC,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE,GAAG;MACfC,KAAK,EAAE;IACT,CAAE;IAAAd,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,IAAMe,eAAoC,GAAG;EAC3Cb,OAAO,EAAE,MAAM;EACfc,mBAAmB,EAAE,UAAU;EAC/BC,GAAG,EAAE,YAAY;EACjBC,UAAU,EAAE,QAAQ;EACpBd,OAAO,EAAE,cAAc;EACvBe,YAAY,EAAE;AAChB,CAAC;AAED,IAAMC,gBAAqC,GAAG;EAC5ClB,OAAO,EAAE,MAAM;EACfe,GAAG,EAAE,YAAY;EACjBC,UAAU,EAAE,QAAQ;EACpBG,QAAQ,EAAE;AACZ,CAAC;AAED,IAAMC,gBAAqC,GAAG;EAC5CC,SAAS,EAAE,YAAY;EACvBC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,yBAAyB;EACpCd,QAAQ,EAAE,gBAAgB;EAC1BG,KAAK,EAAE,kBAAkB;EACzBD,UAAU,EAAE;AACd,CAAC;AAED,IAAMa,cAAc,GAAGC,MAAM,CAACC,MAAM,CAAC;EACnC;AACF;AACA;EACEC,aAAa,EAAE,sBAAsB;EACrCC,aAAa,EACX,6IAA6I;EAC/I;EACAC,aAAa,EAAE,yDAAyD;EACxE;EACAC,SAAS,EAAE;AACb,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiCA,SAASC,qBAAqBA,CAAAC,KAAA,EAMC;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAL7BE,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;IAAAE,WAAA,GAAAH,KAAA,CACdI,KAAK;IAALA,KAAK,GAAAD,WAAA,cAAG,oBAAoB,GAAAA,WAAA;IAC5BE,MAAM,GAAAL,KAAA,CAANK,MAAM;IACNC,IAAI,GAAAN,KAAA,CAAJM,IAAI;IACJC,YAAY,GAAAP,KAAA,CAAZO,YAAY;EAEZ,IAAAC,eAAA,GAAgD3D,KAAK,CAAC4D,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA9DI,gBAAgB,GAAAF,gBAAA;IAAEG,mBAAmB,GAAAH,gBAAA;EAC5C,IAAMI,YAAY,GAAGR,IAAI,KAAKS,SAAS;EACvC,IAAMC,MAAM,GAAGF,YAAY,GAAGR,IAAI,GAAGM,gBAAgB;EACrD,IAAMK,CAAC,GAAGlE,WAAW,CAACyC,cAAc,EAAEa,MAAM,CAAC;;EAE7C;AACF;AACA;EACE,IAAMa,SAAS,GAAGrE,KAAK,CAACsE,MAAM,CAACH,MAAM,CAAC;EACtCE,SAAS,CAACE,OAAO,GAAGJ,MAAM;EAC1B,IAAMK,eAAe,GAAGxE,KAAK,CAACsE,MAAM,CAACZ,YAAY,CAAC;EAClDc,eAAe,CAACD,OAAO,GAAGb,YAAY;EACtC,IAAMe,eAAe,GAAGzE,KAAK,CAACsE,MAAM,CAACL,YAAY,CAAC;EAClDQ,eAAe,CAACF,OAAO,GAAGN,YAAY;EAEtC,IAAMS,WAAW,GAAG1E,KAAK,CAAC2E,WAAW,CAAC,UAACC,IAAa,EAAK;IAAA,IAAAC,qBAAA;IACvD,IAAI,CAACJ,eAAe,CAACF,OAAO,EAAEP,mBAAmB,CAACY,IAAI,CAAC;IACvD,CAAAC,qBAAA,GAAAL,eAAe,CAACD,OAAO,cAAAM,qBAAA,uBAAvBA,qBAAA,CAAAC,IAAA,CAAAN,eAAe,EAAWI,IAAI,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN5E,KAAK,CAAC+E,SAAS,CAAC,YAAM;IACpB,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAoB,EAAK;MACxC;MACA;MACA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;;MAEvB;MACA,IAAID,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACG,OAAO,IAAIH,KAAK,CAACI,MAAM,EAAE;;MAEpD;MACA,IAAI9E,kBAAkB,CAAC,CAAC,EAAE;MAE1B0E,KAAK,CAACK,cAAc,CAAC,CAAC;MACtBZ,WAAW,CAAC,CAACL,SAAS,CAACE,OAAO,CAAC;IACjC,CAAC;IAEDgB,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAER,OAAO,CAAC;IAC3C,OAAO;MAAA,OAAMO,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAET,OAAO,CAAC;IAAA;EAC7D,CAAC,EAAE,CAACN,WAAW,CAAC,CAAC;EAEjB,IAAI,CAACgB,KAAK,CAACC,OAAO,CAACtC,SAAS,CAAC,IAAIA,SAAS,CAACuC,MAAM,KAAK,CAAC,EAAE;IACvD,OAAO,IAAI;EACb;EAEA,oBACEtF,KAAA,CAACL,KAAK;IACJwD,IAAI,EAAEU,MAAO;IACbZ,KAAK,EAAEA,KAAM;IACbsC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMnB,WAAW,CAAC,KAAK,CAAC;IAAA,CAAC;IAClCoB,IAAI,EAAC,IAAI;IAAA7E,QAAA,gBAETb,IAAA;MAAIc,KAAK,EAAE;QAAE6E,MAAM,EAAE,CAAC;QAAE1E,OAAO,EAAE;MAAE,CAAE;MAAC,cAAY+C,CAAC,CAACpB,aAAc;MAAA/B,QAAA,EAC/DoC,SAAS,CAAC2C,GAAG,CAAC,UAACC,EAAE,EAAEC,CAAC;QAAA,oBACnB5F,KAAA;UAAaY,KAAK,EAAEc,eAAgB;UAAAf,QAAA,gBAClCb,IAAA;YAAIc,KAAK,EAAEmB,gBAAiB;YAAApB,QAAA,EACzBgF,EAAE,CAACE,IAAI,CAACH,GAAG,CAAC,UAACI,CAAC,EAAEC,CAAC;cAAA,oBAChB/F,KAAA,CAACN,KAAK,CAACsG,QAAQ;gBAAArF,QAAA,gBACbb,IAAA,CAACW,WAAW;kBAAAE,QAAA,EAAEmF;gBAAC,CAAc,CAAC,EAC7BC,CAAC,GAAGJ,EAAE,CAACE,IAAI,CAACP,MAAM,GAAG,CAAC,iBACrBxF,IAAA;kBACE,eAAY,MAAM;kBAClBc,KAAK,EAAE;oBACLa,KAAK,EAAE,kBAAkB;oBACzBH,QAAQ,EAAE;kBACZ,CAAE;kBAAAX,QAAA,EAEDmD,CAAC,CAACnB;gBAAS,CACR,CACP;cAAA,GAZkBoD,CAaL,CAAC;YAAA,CAClB;UAAC,CACA,CAAC,eACLjG,IAAA;YAAIc,KAAK,EAAE;cAAE6E,MAAM,EAAE,CAAC;cAAEnE,QAAQ,EAAE;YAAmB,CAAE;YAAAX,QAAA,EACpDgF,EAAE,CAACM;UAAW,CACb,CAAC;QAAA,GArBGL,CAsBL,CAAC;MAAA,CACP;IAAC,CACA,CAAC,eACL5F,KAAA;MAAKY,KAAK,EAAEqB,gBAAiB;MAAAtB,QAAA,GAC1BmD,CAAC,CAACtB,aAAa,EAAE,GAAG,eACrB1C,IAAA,CAACW,WAAW;QAAAE,QAAA,EAAC;MAAC,CAAa,CAAC,EAAC,GAAG,EAC/BmD,CAAC,CAACrB,aAAa;IAAA,CACb,CAAC;EAAA,CACD,CAAC;AAEZ;AAEA,eAAeG,qBAAqB","ignoreList":[]}
+{"version":3,"file":"KeyboardShortcutsHelp.js","names":["React","Modal","mergeLabels","jsx","_jsx","jsxs","_jsxs","isFocusOnTextEntry","el","document","activeElement","tag","tagName","HTMLElement","isContentEditable","ShortcutKey","children","style","display","minWidth","padding","background","border","borderBottomColor","borderRadius","boxShadow","fontFamily","fontSize","textAlign","lineHeight","color","SHORTCUT_ROW_SX","gridTemplateColumns","gap","alignItems","borderBottom","SHORTCUT_KEYS_SX","flexWrap","HELP_FOOTNOTE_SX","marginTop","paddingTop","borderTop","DEFAULT_LABELS","Object","freeze","footnoteIntro","footnoteOutro","listAriaLabel","keyJoiner","KeyboardShortcutsHelp","shortcuts","title","labels","open","onOpenChange","uncontrolledOpen","setUncontrolledOpen","useState","isControlled","undefined","isOpen","L","isOpenRef","useRef","current","onOpenChangeRef","isControlledRef","requestOpen","useCallback","next","useEffect","handler","event","key","ctrlKey","metaKey","altKey","preventDefault","window","addEventListener","removeEventListener","Array","isArray","length","onClose","size","margin","map","sc","i","keys","k","j","Fragment","description"],"sources":["../../../../src/lib/v2/patterns/KeyboardShortcutsHelp.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Modal from \"../components/Modal\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/* ── Body-only focus guard ────────────────────────────────────────\r\n * The \"?\" key is a printable character. If a user types \"?\" inside an\r\n * Input / Textarea / contentEditable element we must NOT hijack the\r\n * keypress to open the help — they're trying to type a question mark.\r\n *\r\n * BUTTON / A focus is NOT blocking by design: when the user has tabbed\r\n * onto an interactive non-text element, hitting \"?\" makes sense as a\r\n * help affordance (navigation mode, not text-entry mode).\r\n */\r\nfunction isFocusOnTextEntry(): boolean {\r\n  const el = typeof document !== \"undefined\" ? document.activeElement : null;\r\n  if (!el) return false;\r\n  const tag = el.tagName;\r\n  if (tag === \"INPUT\" || tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\r\n  if (el instanceof HTMLElement && el.isContentEditable) return true;\r\n  return false;\r\n}\r\n\r\nfunction ShortcutKey({ children }: { children?: React.ReactNode }) {\r\n  return (\r\n    <kbd\r\n      style={{\r\n        display: \"inline-block\",\r\n        minWidth: \"1.75em\",\r\n        padding: \"0.15em 0.5em\",\r\n        background: \"var(--bg-subtle)\",\r\n        border: \"1px solid var(--border)\",\r\n        borderBottomColor: \"var(--border-strong, var(--border))\",\r\n        borderRadius: \"var(--r-sm)\",\r\n        boxShadow: \"inset 0 -1px 0 var(--border)\",\r\n        fontFamily: \"var(--font-mono, monospace)\",\r\n        fontSize: \"var(--text-sm)\",\r\n        textAlign: \"center\",\r\n        lineHeight: 1.4,\r\n        color: \"var(--fg)\",\r\n      }}\r\n    >\r\n      {children}\r\n    </kbd>\r\n  );\r\n}\r\n\r\nconst SHORTCUT_ROW_SX: React.CSSProperties = {\r\n  display: \"grid\",\r\n  gridTemplateColumns: \"auto 1fr\",\r\n  gap: \"var(--s-4)\",\r\n  alignItems: \"center\",\r\n  padding: \"var(--s-2) 0\",\r\n  borderBottom: \"1px solid var(--border-subtle, var(--border))\",\r\n};\r\n\r\nconst SHORTCUT_KEYS_SX: React.CSSProperties = {\r\n  display: \"flex\",\r\n  gap: \"var(--s-1)\",\r\n  alignItems: \"center\",\r\n  flexWrap: \"wrap\",\r\n};\r\n\r\nconst HELP_FOOTNOTE_SX: React.CSSProperties = {\r\n  marginTop: \"var(--s-4)\",\r\n  paddingTop: \"var(--s-3)\",\r\n  borderTop: \"1px solid var(--border)\",\r\n  fontSize: \"var(--text-xs)\",\r\n  color: \"var(--fg-subtle)\",\r\n  lineHeight: 1.5,\r\n};\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  /* Footnote rendered below the shortcut list. Split into two parts so the\r\n   * keycap can be embedded in the middle without forcing the i18n string to\r\n   * carry HTML tags. */\r\n  footnoteIntro: \"Astuce : appuyez sur\",\r\n  footnoteOutro:\r\n    \"à tout moment pour ouvrir ou fermer cette aide. Les raccourcis s'activent uniquement quand votre curseur n'est pas dans un champ de saisie.\",\r\n  /* aria-label on the <dl> listing every shortcut. */\r\n  listAriaLabel: \"Liste des raccourcis clavier disponibles sur cette page\",\r\n  /* Joiner rendered between alternative keys for the same shortcut. */\r\n  keyJoiner: \"ou\",\r\n});\r\n\r\n/**\r\n * KeyboardShortcutsHelp — Portnet UI v2\r\n *\r\n * Charter §5.2 SHOULD — discoverable help overlay for page-level keyboard\r\n * shortcuts. Listens globally for \"?\" and opens a v2.Modal listing every\r\n * shortcut as <kbd> elements (WCAG 1.3.1 semantic).\r\n *\r\n * Self-contained: the host page only declares the shortcuts array and renders\r\n * <KeyboardShortcutsHelp shortcuts={…} /> once.\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <KeyboardShortcutsHelp\r\n *     title=\"Keyboard shortcuts\"\r\n *     labels={{\r\n *       footnoteIntro: \"Tip: press\",\r\n *       footnoteOutro: \"anytime to toggle this help…\",\r\n *       listAriaLabel: \"List of keyboard shortcuts available on this page\",\r\n *       keyJoiner:     \"or\",\r\n *     }}\r\n *     shortcuts={…}\r\n *   />\r\n *\r\n * Charter §5.2 SHOULD + WCAG 1.3.1 (semantic <kbd>) + 2.1.1 (keyboard\r\n * reachable) + R-M.* (modal focus trap inherited from v2.Modal).\r\n */\r\n\r\nexport interface KeyboardShortcut {\r\n  keys: string[];\r\n  description: React.ReactNode;\r\n}\r\n\r\nexport interface KeyboardShortcutsHelpLabels {\r\n  footnoteIntro?: string | undefined;\r\n  footnoteOutro?: string | undefined;\r\n  listAriaLabel?: string | undefined;\r\n  keyJoiner?: string | undefined;\r\n}\r\n\r\nexport interface KeyboardShortcutsHelpProps {\r\n  shortcuts?: KeyboardShortcut[] | undefined;\r\n  title?: React.ReactNode | undefined;\r\n  labels?: KeyboardShortcutsHelpLabels | undefined;\r\n  /**\r\n   * Optional CONTROLLED open state. Omit for the original self-contained\r\n   * behaviour (the \"?\" listener owns the state).\r\n   *\r\n   * Added because the panel had no trigger but the keystroke. Hosts wired it\r\n   * correctly and users still reported the shortcuts \"missing\" — they are, in\r\n   * every practical sense, if the only affordance is a key you have to already\r\n   * know about. Charter §05.2 asks for DISCOVERABLE help, and a host cannot add\r\n   * a menu item or button without being able to open this.\r\n   */\r\n  open?: boolean | undefined;\r\n  /** Called with the requested next state, for both \"?\" and the close button. */\r\n  onOpenChange?: ((open: boolean) => void) | undefined;\r\n}\r\n\r\nfunction KeyboardShortcutsHelp({\r\n  shortcuts = [],\r\n  title = \"Raccourcis clavier\",\r\n  labels,\r\n  open,\r\n  onOpenChange,\r\n}: KeyboardShortcutsHelpProps) {\r\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\r\n  const isControlled = open !== undefined;\r\n  const isOpen = isControlled ? open : uncontrolledOpen;\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  /* Refs so the \"?\" listener can stay on a `[]` dependency list — it must not\r\n   * be torn down and re-added on every open/close, and in controlled mode there\r\n   * is no functional-update form to fall back on. */\r\n  const isOpenRef = React.useRef(isOpen);\r\n  isOpenRef.current = isOpen;\r\n  const onOpenChangeRef = React.useRef(onOpenChange);\r\n  onOpenChangeRef.current = onOpenChange;\r\n  const isControlledRef = React.useRef(isControlled);\r\n  isControlledRef.current = isControlled;\r\n\r\n  const requestOpen = React.useCallback((next: boolean) => {\r\n    if (!isControlledRef.current) setUncontrolledOpen(next);\r\n    onOpenChangeRef.current?.(next);\r\n  }, []);\r\n\r\n  React.useEffect(() => {\r\n    const handler = (event: KeyboardEvent) => {\r\n      // Only react to \"?\" (Shift+/ on US, AltGr+, on many AZERTY layouts).\r\n      // event.key gives us the resolved character regardless of physical key.\r\n      if (event.key !== \"?\") return;\r\n\r\n      // Modifier keys (Ctrl, Meta, Alt) reserved for browser / OS shortcuts.\r\n      if (event.ctrlKey || event.metaKey || event.altKey) return;\r\n\r\n      // User is typing in a text field — let \"?\" through.\r\n      if (isFocusOnTextEntry()) return;\r\n\r\n      event.preventDefault();\r\n      requestOpen(!isOpenRef.current);\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", handler);\r\n    return () => window.removeEventListener(\"keydown\", handler);\r\n  }, [requestOpen]);\r\n\r\n  if (!Array.isArray(shortcuts) || shortcuts.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Modal\r\n      open={isOpen}\r\n      title={title}\r\n      onClose={() => requestOpen(false)}\r\n      size=\"md\"\r\n    >\r\n      <dl style={{ margin: 0, padding: 0 }} aria-label={L.listAriaLabel}>\r\n        {shortcuts.map((sc, i) => (\r\n          <div key={i} style={SHORTCUT_ROW_SX}>\r\n            <dt style={SHORTCUT_KEYS_SX}>\r\n              {sc.keys.map((k, j) => (\r\n                <React.Fragment key={j}>\r\n                  <ShortcutKey>{k}</ShortcutKey>\r\n                  {j < sc.keys.length - 1 && (\r\n                    <span\r\n                      aria-hidden=\"true\"\r\n                      style={{\r\n                        color: \"var(--fg-subtle)\",\r\n                        fontSize: \"var(--text-xs)\",\r\n                      }}\r\n                    >\r\n                      {L.keyJoiner}\r\n                    </span>\r\n                  )}\r\n                </React.Fragment>\r\n              ))}\r\n            </dt>\r\n            <dd style={{ margin: 0, fontSize: \"var(--text-body)\" }}>\r\n              {sc.description}\r\n            </dd>\r\n          </div>\r\n        ))}\r\n      </dl>\r\n      <div style={HELP_FOOTNOTE_SX}>\r\n        {L.footnoteIntro}{\" \"}\r\n        <ShortcutKey>?</ShortcutKey>{\" \"}\r\n        {L.footnoteOutro}\r\n      </div>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nexport default KeyboardShortcutsHelp;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,sBAAsB;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,SAASC,kBAAkBA,CAAA,EAAY;EACrC,MAAMC,EAAE,GAAG,OAAOC,QAAQ,KAAK,WAAW,GAAGA,QAAQ,CAACC,aAAa,GAAG,IAAI;EAC1E,IAAI,CAACF,EAAE,EAAE,OAAO,KAAK;EACrB,MAAMG,GAAG,GAAGH,EAAE,CAACI,OAAO;EACtB,IAAID,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,UAAU,IAAIA,GAAG,KAAK,QAAQ,EAAE,OAAO,IAAI;EAC1E,IAAIH,EAAE,YAAYK,WAAW,IAAIL,EAAE,CAACM,iBAAiB,EAAE,OAAO,IAAI;EAClE,OAAO,KAAK;AACd;AAEA,SAASC,WAAWA,CAAC;EAAEC;AAAyC,CAAC,EAAE;EACjE,oBACEZ,IAAA;IACEa,KAAK,EAAE;MACLC,OAAO,EAAE,cAAc;MACvBC,QAAQ,EAAE,QAAQ;MAClBC,OAAO,EAAE,cAAc;MACvBC,UAAU,EAAE,kBAAkB;MAC9BC,MAAM,EAAE,yBAAyB;MACjCC,iBAAiB,EAAE,qCAAqC;MACxDC,YAAY,EAAE,aAAa;MAC3BC,SAAS,EAAE,8BAA8B;MACzCC,UAAU,EAAE,6BAA6B;MACzCC,QAAQ,EAAE,gBAAgB;MAC1BC,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE,GAAG;MACfC,KAAK,EAAE;IACT,CAAE;IAAAd,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,MAAMe,eAAoC,GAAG;EAC3Cb,OAAO,EAAE,MAAM;EACfc,mBAAmB,EAAE,UAAU;EAC/BC,GAAG,EAAE,YAAY;EACjBC,UAAU,EAAE,QAAQ;EACpBd,OAAO,EAAE,cAAc;EACvBe,YAAY,EAAE;AAChB,CAAC;AAED,MAAMC,gBAAqC,GAAG;EAC5ClB,OAAO,EAAE,MAAM;EACfe,GAAG,EAAE,YAAY;EACjBC,UAAU,EAAE,QAAQ;EACpBG,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,gBAAqC,GAAG;EAC5CC,SAAS,EAAE,YAAY;EACvBC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,yBAAyB;EACpCd,QAAQ,EAAE,gBAAgB;EAC1BG,KAAK,EAAE,kBAAkB;EACzBD,UAAU,EAAE;AACd,CAAC;AAED,MAAMa,cAAc,GAAGC,MAAM,CAACC,MAAM,CAAC;EACnC;AACF;AACA;EACEC,aAAa,EAAE,sBAAsB;EACrCC,aAAa,EACX,6IAA6I;EAC/I;EACAC,aAAa,EAAE,yDAAyD;EACxE;EACAC,SAAS,EAAE;AACb,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiCA,SAASC,qBAAqBA,CAAC;EAC7BC,SAAS,GAAG,EAAE;EACdC,KAAK,GAAG,oBAAoB;EAC5BC,MAAM;EACNC,IAAI;EACJC;AAC0B,CAAC,EAAE;EAC7B,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGxD,KAAK,CAACyD,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMC,YAAY,GAAGL,IAAI,KAAKM,SAAS;EACvC,MAAMC,MAAM,GAAGF,YAAY,GAAGL,IAAI,GAAGE,gBAAgB;EACrD,MAAMM,CAAC,GAAG3D,WAAW,CAACwC,cAAc,EAAEU,MAAM,CAAC;;EAE7C;AACF;AACA;EACE,MAAMU,SAAS,GAAG9D,KAAK,CAAC+D,MAAM,CAACH,MAAM,CAAC;EACtCE,SAAS,CAACE,OAAO,GAAGJ,MAAM;EAC1B,MAAMK,eAAe,GAAGjE,KAAK,CAAC+D,MAAM,CAACT,YAAY,CAAC;EAClDW,eAAe,CAACD,OAAO,GAAGV,YAAY;EACtC,MAAMY,eAAe,GAAGlE,KAAK,CAAC+D,MAAM,CAACL,YAAY,CAAC;EAClDQ,eAAe,CAACF,OAAO,GAAGN,YAAY;EAEtC,MAAMS,WAAW,GAAGnE,KAAK,CAACoE,WAAW,CAAEC,IAAa,IAAK;IACvD,IAAI,CAACH,eAAe,CAACF,OAAO,EAAER,mBAAmB,CAACa,IAAI,CAAC;IACvDJ,eAAe,CAACD,OAAO,GAAGK,IAAI,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAENrE,KAAK,CAACsE,SAAS,CAAC,MAAM;IACpB,MAAMC,OAAO,GAAIC,KAAoB,IAAK;MACxC;MACA;MACA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;;MAEvB;MACA,IAAID,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACG,OAAO,IAAIH,KAAK,CAACI,MAAM,EAAE;;MAEpD;MACA,IAAIrE,kBAAkB,CAAC,CAAC,EAAE;MAE1BiE,KAAK,CAACK,cAAc,CAAC,CAAC;MACtBV,WAAW,CAAC,CAACL,SAAS,CAACE,OAAO,CAAC;IACjC,CAAC;IAEDc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAER,OAAO,CAAC;IAC3C,OAAO,MAAMO,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAET,OAAO,CAAC;EAC7D,CAAC,EAAE,CAACJ,WAAW,CAAC,CAAC;EAEjB,IAAI,CAACc,KAAK,CAACC,OAAO,CAAChC,SAAS,CAAC,IAAIA,SAAS,CAACiC,MAAM,KAAK,CAAC,EAAE;IACvD,OAAO,IAAI;EACb;EAEA,oBACE7E,KAAA,CAACL,KAAK;IACJoD,IAAI,EAAEO,MAAO;IACbT,KAAK,EAAEA,KAAM;IACbiC,OAAO,EAAEA,CAAA,KAAMjB,WAAW,CAAC,KAAK,CAAE;IAClCkB,IAAI,EAAC,IAAI;IAAArE,QAAA,gBAETZ,IAAA;MAAIa,KAAK,EAAE;QAAEqE,MAAM,EAAE,CAAC;QAAElE,OAAO,EAAE;MAAE,CAAE;MAAC,cAAYyC,CAAC,CAACd,aAAc;MAAA/B,QAAA,EAC/DkC,SAAS,CAACqC,GAAG,CAAC,CAACC,EAAE,EAAEC,CAAC,kBACnBnF,KAAA;QAAaW,KAAK,EAAEc,eAAgB;QAAAf,QAAA,gBAClCZ,IAAA;UAAIa,KAAK,EAAEmB,gBAAiB;UAAApB,QAAA,EACzBwE,EAAE,CAACE,IAAI,CAACH,GAAG,CAAC,CAACI,CAAC,EAAEC,CAAC,kBAChBtF,KAAA,CAACN,KAAK,CAAC6F,QAAQ;YAAA7E,QAAA,gBACbZ,IAAA,CAACW,WAAW;cAAAC,QAAA,EAAE2E;YAAC,CAAc,CAAC,EAC7BC,CAAC,GAAGJ,EAAE,CAACE,IAAI,CAACP,MAAM,GAAG,CAAC,iBACrB/E,IAAA;cACE,eAAY,MAAM;cAClBa,KAAK,EAAE;gBACLa,KAAK,EAAE,kBAAkB;gBACzBH,QAAQ,EAAE;cACZ,CAAE;cAAAX,QAAA,EAED6C,CAAC,CAACb;YAAS,CACR,CACP;UAAA,GAZkB4C,CAaL,CACjB;QAAC,CACA,CAAC,eACLxF,IAAA;UAAIa,KAAK,EAAE;YAAEqE,MAAM,EAAE,CAAC;YAAE3D,QAAQ,EAAE;UAAmB,CAAE;UAAAX,QAAA,EACpDwE,EAAE,CAACM;QAAW,CACb,CAAC;MAAA,GArBGL,CAsBL,CACN;IAAC,CACA,CAAC,eACLnF,KAAA;MAAKW,KAAK,EAAEqB,gBAAiB;MAAAtB,QAAA,GAC1B6C,CAAC,CAAChB,aAAa,EAAE,GAAG,eACrBzC,IAAA,CAACW,WAAW;QAAAC,QAAA,EAAC;MAAC,CAAa,CAAC,EAAC,GAAG,EAC/B6C,CAAC,CAACf,aAAa;IAAA,CACb,CAAC;EAAA,CACD,CAAC;AAEZ;AAEA,eAAeG,qBAAqB","ignoreList":[]}

package/dist/esm/v2/patterns/NetworkErrorBanner.js

@@ -19,13 +19,12 @@ import ErrorIcon from "@mui/icons-material/ErrorOutlined";
  *   Defaults stay French for back-compat.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function NetworkErrorBanner(_ref) {
-  var visible = _ref.visible,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? "Connexion perdue." : _ref$message,
-    onRetry = _ref.onRetry,
-    _ref$retryLabel = _ref.retryLabel,
-    retryLabel = _ref$retryLabel === void 0 ? "Réessayer" : _ref$retryLabel;
+function NetworkErrorBanner({
+  visible,
+  message = "Connexion perdue.",
+  onRetry,
+  retryLabel = "Réessayer"
+}) {
   if (!visible) return null;
   return /*#__PURE__*/_jsxs(Box, {
     role: "alert",

package/dist/esm/v2/patterns/NetworkErrorBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkErrorBanner.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","NetworkErrorBanner","_ref","visible","_ref$message","message","onRetry","_ref$retryLabel","retryLabel","role","className","children","fontSize","component","type","onClick","sx","background","border","color","borderRadius","padding","fontWeight","cursor","fontFamily","marginInlineStart","transition","outline","outlineOffset"],"sources":["../../../../src/lib/v2/patterns/NetworkErrorBanner.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * NetworkErrorBanner - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-4.3 - erreur réseau globale = bandeau persistant top, \"Réessayer\".\r\n * Z-index 2000 (above modals).\r\n *\r\n *   <NetworkErrorBanner\r\n *     visible={!online}\r\n *     message=\"Connexion perdue.\"\r\n *     onRetry={refresh}\r\n *   />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   `message` and `retryLabel` are direct overrides on the props.\r\n *   Defaults stay French for back-compat.\r\n */\r\n\r\nexport interface NetworkErrorBannerProps {\r\n  visible?: boolean | undefined;\r\n  message?: React.ReactNode | undefined;\r\n  onRetry?: (() => void) | undefined;\r\n  retryLabel?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction NetworkErrorBanner({\r\n  visible,\r\n  message = \"Connexion perdue.\",\r\n  onRetry,\r\n  retryLabel = \"Réessayer\",\r\n}: NetworkErrorBannerProps) {\r\n  if (!visible) return null;\r\n  return (\r\n    <Box role=\"alert\" aria-live=\"assertive\" className=\"pui-net-error-banner\">\r\n      <ErrorIcon fontSize=\"small\" aria-hidden=\"true\" />\r\n      <span>{message}</span>\r\n      {onRetry && (\r\n        <Box\r\n          component=\"button\"\r\n          type=\"button\"\r\n          onClick={onRetry}\r\n          className=\"pui-net-error-banner-retry\"\r\n          sx={{\r\n            // R-AI.1 - tokenised inverse colour mix (was rgba(255,255,255,...))\r\n            background: \"color-mix(in srgb, var(--fg-inverse) 20%, transparent)\",\r\n            border:\r\n              \"1px solid color-mix(in srgb, var(--fg-inverse) 35%, transparent)\",\r\n            color: \"inherit\",\r\n            borderRadius: \"var(--r-sm)\",\r\n            padding: \"var(--s-1) var(--s-3)\",\r\n            fontSize: \"var(--text-xs)\",\r\n            fontWeight: \"var(--fw-semibold)\",\r\n            cursor: \"pointer\",\r\n            fontFamily: \"inherit\",\r\n            // NEB-1 - logical inline-start margin so it sits correctly under RTL.\r\n            marginInlineStart: 0.5,\r\n            transition: \"background var(--duration-fast, 80ms) ease\",\r\n            \"&:hover\": {\r\n              background:\r\n                \"color-mix(in srgb, var(--fg-inverse) 30%, transparent)\",\r\n            },\r\n            // R-F.1 - focus visible required, charter §05.\r\n            \"&:focus-visible\": {\r\n              outline: \"2px solid var(--fg-inverse)\",\r\n              outlineOffset: \"var(--pui-outline-offset)\",\r\n            },\r\n          }}\r\n        >\r\n          {retryLabel}\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default NetworkErrorBanner;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AACnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAfA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwBA,SAASC,kBAAkBA,CAAAC,IAAA,EAKC;EAAA,IAJ1BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,YAAA,GAAAF,IAAA,CACPG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,mBAAmB,GAAAA,YAAA;IAC7BE,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,eAAA,GAAAL,IAAA,CACPM,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,WAAW,GAAAA,eAAA;EAExB,IAAI,CAACJ,OAAO,EAAE,OAAO,IAAI;EACzB,oBACEH,KAAA,CAACL,GAAG;IAACc,IAAI,EAAC,OAAO;IAAC,aAAU,WAAW;IAACC,SAAS,EAAC,sBAAsB;IAAAC,QAAA,gBACtEb,IAAA,CAACF,SAAS;MAACgB,QAAQ,EAAC,OAAO;MAAC,eAAY;IAAM,CAAE,CAAC,eACjDd,IAAA;MAAAa,QAAA,EAAON;IAAO,CAAO,CAAC,EACrBC,OAAO,iBACNR,IAAA,CAACH,GAAG;MACFkB,SAAS,EAAC,QAAQ;MAClBC,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAET,OAAQ;MACjBI,SAAS,EAAC,4BAA4B;MACtCM,EAAE,EAAE;QACF;QACAC,UAAU,EAAE,wDAAwD;QACpEC,MAAM,EACJ,kEAAkE;QACpEC,KAAK,EAAE,SAAS;QAChBC,YAAY,EAAE,aAAa;QAC3BC,OAAO,EAAE,uBAAuB;QAChCT,QAAQ,EAAE,gBAAgB;QAC1BU,UAAU,EAAE,oBAAoB;QAChCC,MAAM,EAAE,SAAS;QACjBC,UAAU,EAAE,SAAS;QACrB;QACAC,iBAAiB,EAAE,GAAG;QACtBC,UAAU,EAAE,4CAA4C;QACxD,SAAS,EAAE;UACTT,UAAU,EACR;QACJ,CAAC;QACD;QACA,iBAAiB,EAAE;UACjBU,OAAO,EAAE,6BAA6B;UACtCC,aAAa,EAAE;QACjB;MACF,CAAE;MAAAjB,QAAA,EAEDH;IAAU,CACR,CACN;EAAA,CACE,CAAC;AAEV;AAEA,eAAeP,kBAAkB","ignoreList":[]}
+{"version":3,"file":"NetworkErrorBanner.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","NetworkErrorBanner","visible","message","onRetry","retryLabel","role","className","children","fontSize","component","type","onClick","sx","background","border","color","borderRadius","padding","fontWeight","cursor","fontFamily","marginInlineStart","transition","outline","outlineOffset"],"sources":["../../../../src/lib/v2/patterns/NetworkErrorBanner.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * NetworkErrorBanner - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-4.3 - erreur réseau globale = bandeau persistant top, \"Réessayer\".\r\n * Z-index 2000 (above modals).\r\n *\r\n *   <NetworkErrorBanner\r\n *     visible={!online}\r\n *     message=\"Connexion perdue.\"\r\n *     onRetry={refresh}\r\n *   />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   `message` and `retryLabel` are direct overrides on the props.\r\n *   Defaults stay French for back-compat.\r\n */\r\n\r\nexport interface NetworkErrorBannerProps {\r\n  visible?: boolean | undefined;\r\n  message?: React.ReactNode | undefined;\r\n  onRetry?: (() => void) | undefined;\r\n  retryLabel?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction NetworkErrorBanner({\r\n  visible,\r\n  message = \"Connexion perdue.\",\r\n  onRetry,\r\n  retryLabel = \"Réessayer\",\r\n}: NetworkErrorBannerProps) {\r\n  if (!visible) return null;\r\n  return (\r\n    <Box role=\"alert\" aria-live=\"assertive\" className=\"pui-net-error-banner\">\r\n      <ErrorIcon fontSize=\"small\" aria-hidden=\"true\" />\r\n      <span>{message}</span>\r\n      {onRetry && (\r\n        <Box\r\n          component=\"button\"\r\n          type=\"button\"\r\n          onClick={onRetry}\r\n          className=\"pui-net-error-banner-retry\"\r\n          sx={{\r\n            // R-AI.1 - tokenised inverse colour mix (was rgba(255,255,255,...))\r\n            background: \"color-mix(in srgb, var(--fg-inverse) 20%, transparent)\",\r\n            border:\r\n              \"1px solid color-mix(in srgb, var(--fg-inverse) 35%, transparent)\",\r\n            color: \"inherit\",\r\n            borderRadius: \"var(--r-sm)\",\r\n            padding: \"var(--s-1) var(--s-3)\",\r\n            fontSize: \"var(--text-xs)\",\r\n            fontWeight: \"var(--fw-semibold)\",\r\n            cursor: \"pointer\",\r\n            fontFamily: \"inherit\",\r\n            // NEB-1 - logical inline-start margin so it sits correctly under RTL.\r\n            marginInlineStart: 0.5,\r\n            transition: \"background var(--duration-fast, 80ms) ease\",\r\n            \"&:hover\": {\r\n              background:\r\n                \"color-mix(in srgb, var(--fg-inverse) 30%, transparent)\",\r\n            },\r\n            // R-F.1 - focus visible required, charter §05.\r\n            \"&:focus-visible\": {\r\n              outline: \"2px solid var(--fg-inverse)\",\r\n              outlineOffset: \"var(--pui-outline-offset)\",\r\n            },\r\n          }}\r\n        >\r\n          {retryLabel}\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default NetworkErrorBanner;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AACnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAfA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwBA,SAASC,kBAAkBA,CAAC;EAC1BC,OAAO;EACPC,OAAO,GAAG,mBAAmB;EAC7BC,OAAO;EACPC,UAAU,GAAG;AACU,CAAC,EAAE;EAC1B,IAAI,CAACH,OAAO,EAAE,OAAO,IAAI;EACzB,oBACEF,KAAA,CAACL,GAAG;IAACW,IAAI,EAAC,OAAO;IAAC,aAAU,WAAW;IAACC,SAAS,EAAC,sBAAsB;IAAAC,QAAA,gBACtEV,IAAA,CAACF,SAAS;MAACa,QAAQ,EAAC,OAAO;MAAC,eAAY;IAAM,CAAE,CAAC,eACjDX,IAAA;MAAAU,QAAA,EAAOL;IAAO,CAAO,CAAC,EACrBC,OAAO,iBACNN,IAAA,CAACH,GAAG;MACFe,SAAS,EAAC,QAAQ;MAClBC,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAER,OAAQ;MACjBG,SAAS,EAAC,4BAA4B;MACtCM,EAAE,EAAE;QACF;QACAC,UAAU,EAAE,wDAAwD;QACpEC,MAAM,EACJ,kEAAkE;QACpEC,KAAK,EAAE,SAAS;QAChBC,YAAY,EAAE,aAAa;QAC3BC,OAAO,EAAE,uBAAuB;QAChCT,QAAQ,EAAE,gBAAgB;QAC1BU,UAAU,EAAE,oBAAoB;QAChCC,MAAM,EAAE,SAAS;QACjBC,UAAU,EAAE,SAAS;QACrB;QACAC,iBAAiB,EAAE,GAAG;QACtBC,UAAU,EAAE,4CAA4C;QACxD,SAAS,EAAE;UACTT,UAAU,EACR;QACJ,CAAC;QACD;QACA,iBAAiB,EAAE;UACjBU,OAAO,EAAE,6BAA6B;UACtCC,aAAa,EAAE;QACjB;MACF,CAAE;MAAAjB,QAAA,EAEDH;IAAU,CACR,CACN;EAAA,CACE,CAAC;AAEV;AAEA,eAAeJ,kBAAkB","ignoreList":[]}

package/dist/esm/v2/patterns/PageContent.js

@@ -1,9 +1,3 @@
-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); }
 import * as React from "react";
 import Box from "@mui/material/Box";
 
@@ -35,12 +29,13 @@ import Box from "@mui/material/Box";
  *   </PageContent>
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-function PageContent(_ref) {
-  var children = _ref.children,
-    gap = _ref.gap,
-    sx = _ref.sx;
+function PageContent({
+  children,
+  gap,
+  sx
+}) {
   return /*#__PURE__*/_jsx(Box, {
-    sx: _objectSpread({
+    sx: {
       /* Responsive padding — charter §7.1 bis */
       padding: {
         xs: "var(--s-3)" /* 12 px — mobile */,
@@ -50,11 +45,12 @@ function PageContent(_ref) {
       /* Section layout */
       display: "flex",
       flexDirection: "column",
-      gap: gap !== null && gap !== void 0 ? gap : "var(--s-4)",
+      gap: gap ?? "var(--s-4)",
       /* Prevent content from overflowing the viewport on narrow screens
          while still allowing inner scroll containers (DataGrid) to work. */
-      minWidth: 0
-    }, sx),
+      minWidth: 0,
+      ...sx
+    },
     children: children
   });
 }

package/dist/esm/v2/patterns/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","names":["React","Box","jsx","_jsx","PageContent","_ref","children","gap","sx","_objectSpread","padding","xs","sm","lg","display","flexDirection","minWidth"],"sources":["../../../../src/lib/v2/patterns/PageContent.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport type { SystemStyleObject } from \"@mui/system\";\r\n\r\n/**\r\n * PageContent — Portnet UI v2 (pattern)\r\n *\r\n * Charter §07 · Template canonique — zone contenu (§7.1 bis).\r\n *\r\n * Wraps the main content zone inside the shell applicatif with the\r\n * canonical responsive padding and vertical gap defined in §7.1 bis:\r\n *\r\n *   xs  ( 0 – 480 px )  → padding  12 px  (--s-3)\r\n *   sm  ( 481 – 1023 px) → padding  16 px  (--s-4)\r\n *   lg  ( 1024 px +    ) → padding  24 px  (--s-6)\r\n *\r\n * Usage:\r\n *   import { PageContent } from \"@portnet/ui\";\r\n *\r\n *   <PageContent>\r\n *     <FilterCard />\r\n *     <DataGrid ... />\r\n *   </PageContent>\r\n *\r\n * Override gap or add extra sx when the default section gap\r\n * (var(--s-4) = 16 px) is not appropriate for the context.\r\n *\r\n *   <PageContent gap=\"var(--s-6)\" sx={{ maxWidth: 720 }}>\r\n *     ...\r\n *   </PageContent>\r\n */\r\n\r\nexport interface PageContentProps {\r\n  /** Page sections / content */\r\n  children?: React.ReactNode | undefined;\r\n  /** Override the vertical gap between direct children (default var(--s-4)) */\r\n  gap?: string | undefined;\r\n  /** MUI sx overrides applied to the root Box */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction PageContent({ children, gap, sx }: PageContentProps) {\r\n  return (\r\n    <Box\r\n      sx={{\r\n        /* Responsive padding — charter §7.1 bis */\r\n        padding: {\r\n          xs: \"var(--s-3)\" /* 12 px — mobile */,\r\n          sm: \"var(--s-4)\" /* 16 px — tablet */,\r\n          lg: \"var(--s-6)\" /* 24 px — desktop */,\r\n        },\r\n        /* Section layout */\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: gap ?? \"var(--s-4)\",\r\n        /* Prevent content from overflowing the viewport on narrow screens\r\n           while still allowing inner scroll containers (DataGrid) to work. */\r\n        minWidth: 0,\r\n        ...(sx as SystemStyleObject<Theme>),\r\n      }}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default PageContent;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAInC;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;AA1BA,SAAAC,GAAA,IAAAC,IAAA;AAqCA,SAASC,WAAWA,CAAAC,IAAA,EAA0C;EAAA,IAAvCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;EACtC,oBACEL,IAAA,CAACF,GAAG;IACFO,EAAE,EAAAC,aAAA;MACA;MACAC,OAAO,EAAE;QACPC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;MACnB,CAAC;MACD;MACAC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,QAAQ;MACvBR,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,YAAY;MACxB;AACR;MACQS,QAAQ,EAAE;IAAC,GACPR,EAAE,CACN;IAAAF,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,eAAeF,WAAW","ignoreList":[]}
+{"version":3,"file":"PageContent.js","names":["React","Box","jsx","_jsx","PageContent","children","gap","sx","padding","xs","sm","lg","display","flexDirection","minWidth"],"sources":["../../../../src/lib/v2/patterns/PageContent.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport type { SystemStyleObject } from \"@mui/system\";\r\n\r\n/**\r\n * PageContent — Portnet UI v2 (pattern)\r\n *\r\n * Charter §07 · Template canonique — zone contenu (§7.1 bis).\r\n *\r\n * Wraps the main content zone inside the shell applicatif with the\r\n * canonical responsive padding and vertical gap defined in §7.1 bis:\r\n *\r\n *   xs  ( 0 – 480 px )  → padding  12 px  (--s-3)\r\n *   sm  ( 481 – 1023 px) → padding  16 px  (--s-4)\r\n *   lg  ( 1024 px +    ) → padding  24 px  (--s-6)\r\n *\r\n * Usage:\r\n *   import { PageContent } from \"@portnet/ui\";\r\n *\r\n *   <PageContent>\r\n *     <FilterCard />\r\n *     <DataGrid ... />\r\n *   </PageContent>\r\n *\r\n * Override gap or add extra sx when the default section gap\r\n * (var(--s-4) = 16 px) is not appropriate for the context.\r\n *\r\n *   <PageContent gap=\"var(--s-6)\" sx={{ maxWidth: 720 }}>\r\n *     ...\r\n *   </PageContent>\r\n */\r\n\r\nexport interface PageContentProps {\r\n  /** Page sections / content */\r\n  children?: React.ReactNode | undefined;\r\n  /** Override the vertical gap between direct children (default var(--s-4)) */\r\n  gap?: string | undefined;\r\n  /** MUI sx overrides applied to the root Box */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction PageContent({ children, gap, sx }: PageContentProps) {\r\n  return (\r\n    <Box\r\n      sx={{\r\n        /* Responsive padding — charter §7.1 bis */\r\n        padding: {\r\n          xs: \"var(--s-3)\" /* 12 px — mobile */,\r\n          sm: \"var(--s-4)\" /* 16 px — tablet */,\r\n          lg: \"var(--s-6)\" /* 24 px — desktop */,\r\n        },\r\n        /* Section layout */\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: gap ?? \"var(--s-4)\",\r\n        /* Prevent content from overflowing the viewport on narrow screens\r\n           while still allowing inner scroll containers (DataGrid) to work. */\r\n        minWidth: 0,\r\n        ...(sx as SystemStyleObject<Theme>),\r\n      }}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default PageContent;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAInC;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;AA1BA,SAAAC,GAAA,IAAAC,IAAA;AAqCA,SAASC,WAAWA,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC;AAAqB,CAAC,EAAE;EAC5D,oBACEJ,IAAA,CAACF,GAAG;IACFM,EAAE,EAAE;MACF;MACAC,OAAO,EAAE;QACPC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;MACnB,CAAC;MACD;MACAC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,QAAQ;MACvBP,GAAG,EAAEA,GAAG,IAAI,YAAY;MACxB;AACR;MACQQ,QAAQ,EAAE,CAAC;MACX,GAAIP;IACN,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,eAAeD,WAAW","ignoreList":[]}

package/dist/esm/v2/patterns/PreviewDrawer.js

@@ -0,0 +1,153 @@
+import * as React from "react";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import Button from "../components/Button";
+import Drawer from "../components/Drawer";
+import KV from "../components/KV";
+import KVGrid from "../components/KVGrid";
+import { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * PreviewDrawer — Portnet UI v2 (pattern)
+ *
+ * §Preview Drawer of the Platform Mandatory UX Patterns: the summary of a
+ * listing row — status, key information, quick actions — shown WITHOUT leaving
+ * the listing.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-40)
+ *
+ * §Row Interaction and §Preview Drawer are both MUST, on EVERY listing page of
+ * the platform: rows must be clickable, and clicking one must open a preview
+ * carrying summary, status, main information and quick actions. That is not a
+ * per-module feature, it is the platform's listing contract — and the library
+ * shipped only `Drawer`, the empty shell.
+ *
+ * So each module assembled the same body by hand, and the copies drifted where
+ * it is least visible: `ms-ti-fe` renders its label/value block with
+ * `KVGrid` + `KV`, while `refonte-frontend` had built a local `<dl>` with its
+ * own two-column grid — the same concept, two renderings, which is precisely
+ * what R-2.1 forbids. That module's Area 3 pass had to correct it before this
+ * promotion could even be considered.
+ *
+ * >>> AND THE SHELL WITHOUT THE BODY IS WHAT MADE THE UNSAFE VERSION LOOK
+ * >>> REASONABLE. The promoted implementation had carried an
+ * >>> `as unknown as DemandeRow` assertion, because a single component was
+ * >>> generic over the row type while computing its DEFAULTS from one specific
+ * >>> type's fields. Its own comment recorded the consequence: without those
+ * >>> defaults "the drawer does not fail — it shows dashes and an Unknown
+ * >>> status, which is worse than an error because it is noticed late". The
+ * >>> split below is what removes the cast rather than hiding it: THIS
+ * >>> component reads NO field of `row`. It renders what it is given and hands
+ * >>> the row back to the host's callbacks. A business default therefore lives
+ * >>> in a host wrapper whose `row` is a concrete type, and neither half has to
+ * >>> assert anything. <<<
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * VALUES, NOT ACCESSORS, AND THE REASON IS THE CLOSING ANIMATION.
+ * `title` / `status` / `items` are optional VALUES rather than
+ * `(row: T) => …` functions. Hosts pass them through a conditional spread
+ * (`{...(row ? { title: …, items: … } : {})}`), which requiring them would
+ * make invalid — the compiler cannot see that the spread always supplies the
+ * keys. The natural workaround, mounting the drawer only when a row exists,
+ * would UNMOUNT it on close and destroy `Drawer`'s 220 ms exit animation
+ * (Charter §08).
+ *
+ * Consequence accepted: a missing `title` is not a compile error, it falls back
+ * to `labels.fallbackTitle`. The gain is that the drawer can no longer PRETEND
+ * an arbitrary row is a particular business object.
+ *
+ * Renders nothing when `row` is null, so hosts can mount it unconditionally.
+ *
+ * Usage:
+ *
+ *   <PreviewDrawer<DemandeRow>
+ *     open={apercuOuvert}
+ *     onClose={fermer}
+ *     row={ligneApercu}
+ *     subtitle="Déclaration d'importation"
+ *     onOpenItem={consulter}
+ *     labels={{ open: "Consulter la demande" }}
+ *     {...(ligneApercu ? { title: ligneApercu.identifiant, items: fiche } : {})}
+ *   />
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LABELS = Object.freeze({
+  /** Generic on purpose: the business verb+object belongs to the host (§9.2). */
+  open: "Consulter",
+  fallbackTitle: "Détail"
+});
+
+/** One label/value line of the summary sheet. */
+
+function PreviewDrawer({
+  open,
+  onClose,
+  row,
+  subtitle,
+  title,
+  status,
+  items,
+  minColumnWidth,
+  onOpenItem,
+  canOpenItem,
+  actions,
+  onPrev,
+  onNext,
+  hasPrev,
+  hasNext,
+  children,
+  labels
+}) {
+  const L = mergeLabels(DEFAULT_LABELS, labels);
+  if (!row) return null;
+  const canOpen = canOpenItem ? canOpenItem(row) : true;
+  const lines = items ?? [];
+  return /*#__PURE__*/_jsxs(Drawer, {
+    open: open,
+    onClose: onClose,
+    title: title ?? L.fallbackTitle,
+    ...(subtitle !== undefined ? {
+      subtitle
+    } : {}),
+    ...(status !== undefined ? {
+      status
+    } : {}),
+    ...(onPrev ? {
+      onPrev
+    } : {}),
+    ...(onNext ? {
+      onNext
+    } : {}),
+    ...(hasPrev !== undefined ? {
+      hasPrev
+    } : {}),
+    ...(hasNext !== undefined ? {
+      hasNext
+    } : {}),
+    actions: actions ?? (canOpen && onOpenItem ? /*#__PURE__*/_jsx(Button, {
+      icon: /*#__PURE__*/_jsx(VisibilityIcon, {}),
+      onClick: () => onOpenItem(row),
+      children: L.open
+    }) : null),
+    children: [lines.length > 0 && /*#__PURE__*/_jsx(KVGrid, {
+      ...(minColumnWidth !== undefined ? {
+        minColumnWidth
+      } : {}),
+      children: lines.map((line, index) => /*#__PURE__*/_jsx(KV
+      // Index-based key on purpose: `label` is a ReactNode, so it is
+      // not always a usable key, and this list is not reorderable —
+      // it is rebuilt whole per row (R-R.3's exception).
+      , {
+        label: line.label,
+        ...(line.value !== undefined ? {
+          value: line.value
+        } : {}),
+        ...(line.mono !== undefined ? {
+          mono: line.mono
+        } : {})
+      }, index))
+    }), children]
+  });
+}
+export default PreviewDrawer;
+//# sourceMappingURL=PreviewDrawer.js.map

package/dist/esm/v2/patterns/PreviewDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewDrawer.js","names":["React","VisibilityIcon","Button","Drawer","KV","KVGrid","mergeLabels","jsx","_jsx","jsxs","_jsxs","DEFAULT_LABELS","Object","freeze","open","fallbackTitle","PreviewDrawer","onClose","row","subtitle","title","status","items","minColumnWidth","onOpenItem","canOpenItem","actions","onPrev","onNext","hasPrev","hasNext","children","labels","L","canOpen","lines","undefined","icon","onClick","length","map","line","index","label","value","mono"],"sources":["../../../../src/lib/v2/patterns/PreviewDrawer.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport VisibilityIcon from \"@mui/icons-material/Visibility\";\r\nimport Button from \"../components/Button\";\r\nimport Drawer from \"../components/Drawer\";\r\nimport KV from \"../components/KV\";\r\nimport KVGrid from \"../components/KVGrid\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * PreviewDrawer — Portnet UI v2 (pattern)\r\n *\r\n * §Preview Drawer of the Platform Mandatory UX Patterns: the summary of a\r\n * listing row — status, key information, quick actions — shown WITHOUT leaving\r\n * the listing.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-40)\r\n *\r\n * §Row Interaction and §Preview Drawer are both MUST, on EVERY listing page of\r\n * the platform: rows must be clickable, and clicking one must open a preview\r\n * carrying summary, status, main information and quick actions. That is not a\r\n * per-module feature, it is the platform's listing contract — and the library\r\n * shipped only `Drawer`, the empty shell.\r\n *\r\n * So each module assembled the same body by hand, and the copies drifted where\r\n * it is least visible: `ms-ti-fe` renders its label/value block with\r\n * `KVGrid` + `KV`, while `refonte-frontend` had built a local `<dl>` with its\r\n * own two-column grid — the same concept, two renderings, which is precisely\r\n * what R-2.1 forbids. That module's Area 3 pass had to correct it before this\r\n * promotion could even be considered.\r\n *\r\n * >>> AND THE SHELL WITHOUT THE BODY IS WHAT MADE THE UNSAFE VERSION LOOK\r\n * >>> REASONABLE. The promoted implementation had carried an\r\n * >>> `as unknown as DemandeRow` assertion, because a single component was\r\n * >>> generic over the row type while computing its DEFAULTS from one specific\r\n * >>> type's fields. Its own comment recorded the consequence: without those\r\n * >>> defaults \"the drawer does not fail — it shows dashes and an Unknown\r\n * >>> status, which is worse than an error because it is noticed late\". The\r\n * >>> split below is what removes the cast rather than hiding it: THIS\r\n * >>> component reads NO field of `row`. It renders what it is given and hands\r\n * >>> the row back to the host's callbacks. A business default therefore lives\r\n * >>> in a host wrapper whose `row` is a concrete type, and neither half has to\r\n * >>> assert anything. <<<\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * VALUES, NOT ACCESSORS, AND THE REASON IS THE CLOSING ANIMATION.\r\n * `title` / `status` / `items` are optional VALUES rather than\r\n * `(row: T) => …` functions. Hosts pass them through a conditional spread\r\n * (`{...(row ? { title: …, items: … } : {})}`), which requiring them would\r\n * make invalid — the compiler cannot see that the spread always supplies the\r\n * keys. The natural workaround, mounting the drawer only when a row exists,\r\n * would UNMOUNT it on close and destroy `Drawer`'s 220 ms exit animation\r\n * (Charter §08).\r\n *\r\n * Consequence accepted: a missing `title` is not a compile error, it falls back\r\n * to `labels.fallbackTitle`. The gain is that the drawer can no longer PRETEND\r\n * an arbitrary row is a particular business object.\r\n *\r\n * Renders nothing when `row` is null, so hosts can mount it unconditionally.\r\n *\r\n * Usage:\r\n *\r\n *   <PreviewDrawer<DemandeRow>\r\n *     open={apercuOuvert}\r\n *     onClose={fermer}\r\n *     row={ligneApercu}\r\n *     subtitle=\"Déclaration d'importation\"\r\n *     onOpenItem={consulter}\r\n *     labels={{ open: \"Consulter la demande\" }}\r\n *     {...(ligneApercu ? { title: ligneApercu.identifiant, items: fiche } : {})}\r\n *   />\r\n */\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  /** Generic on purpose: the business verb+object belongs to the host (§9.2). */\r\n  open: \"Consulter\",\r\n  fallbackTitle: \"Détail\",\r\n});\r\n\r\nexport interface PreviewDrawerLabels {\r\n  open?: string | undefined;\r\n  fallbackTitle?: string | undefined;\r\n}\r\n\r\n/** One label/value line of the summary sheet. */\r\nexport interface PreviewDrawerItem {\r\n  label: React.ReactNode;\r\n  value?: React.ReactNode | undefined;\r\n  /** Renders the value in the mono face — IDs, references, amounts (§2.2). */\r\n  mono?: boolean | undefined;\r\n}\r\n\r\nexport interface PreviewDrawerProps<T> {\r\n  open?: boolean | undefined;\r\n  onClose?: (() => void) | undefined;\r\n  /** The previewed row. `null` renders nothing. */\r\n  row: T | null;\r\n  /** What kind of thing this is. Host vocabulary (§9.4). */\r\n  subtitle?: React.ReactNode | undefined;\r\n  /** Falls back to `labels.fallbackTitle` — see the note on values vs accessors. */\r\n  title?: React.ReactNode | undefined;\r\n  /** Status chip. Build it from `Status` so it stays on the `--status-*` palette (R-2.2). */\r\n  status?: React.ReactNode | undefined;\r\n  /** The summary sheet. Rendered as `KVGrid` + `KV`. */\r\n  items?: readonly PreviewDrawerItem[] | undefined;\r\n  /** Track minimum of the summary grid, in px. Defaults to `KVGrid`'s own. */\r\n  minColumnWidth?: number | undefined;\r\n  /** Opens the full record. Without it, no default action is rendered. */\r\n  onOpenItem?: ((row: T) => void) | undefined;\r\n  /**\r\n   * Whether the open action applies to this row.\r\n   *\r\n   * Defaults to ALLOWED. This component knows no business status, so it cannot\r\n   * derive a masking rule — and inventing one would be worse than having none.\r\n   */\r\n  canOpenItem?: ((row: T) => boolean) | undefined;\r\n  /** Replaces the default action entirely. */\r\n  actions?: React.ReactNode | undefined;\r\n  onPrev?: (() => void) | undefined;\r\n  onNext?: (() => void) | undefined;\r\n  hasPrev?: boolean | undefined;\r\n  hasNext?: boolean | undefined;\r\n  /** Rendered under the summary sheet — tabs, documents, a nested grid. */\r\n  children?: React.ReactNode | undefined;\r\n  labels?: PreviewDrawerLabels | undefined;\r\n}\r\n\r\nfunction PreviewDrawer<T>({\r\n  open,\r\n  onClose,\r\n  row,\r\n  subtitle,\r\n  title,\r\n  status,\r\n  items,\r\n  minColumnWidth,\r\n  onOpenItem,\r\n  canOpenItem,\r\n  actions,\r\n  onPrev,\r\n  onNext,\r\n  hasPrev,\r\n  hasNext,\r\n  children,\r\n  labels,\r\n}: PreviewDrawerProps<T>) {\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  if (!row) return null;\r\n\r\n  const canOpen = canOpenItem ? canOpenItem(row) : true;\r\n  const lines: readonly PreviewDrawerItem[] = items ?? [];\r\n\r\n  return (\r\n    <Drawer\r\n      open={open}\r\n      onClose={onClose}\r\n      title={title ?? L.fallbackTitle}\r\n      {...(subtitle !== undefined ? { subtitle } : {})}\r\n      {...(status !== undefined ? { status } : {})}\r\n      {...(onPrev ? { onPrev } : {})}\r\n      {...(onNext ? { onNext } : {})}\r\n      {...(hasPrev !== undefined ? { hasPrev } : {})}\r\n      {...(hasNext !== undefined ? { hasNext } : {})}\r\n      actions={\r\n        actions ??\r\n        (canOpen && onOpenItem ? (\r\n          <Button icon={<VisibilityIcon />} onClick={() => onOpenItem(row)}>\r\n            {L.open}\r\n          </Button>\r\n        ) : null)\r\n      }\r\n    >\r\n      {lines.length > 0 && (\r\n        <KVGrid {...(minColumnWidth !== undefined ? { minColumnWidth } : {})}>\r\n          {lines.map((line, index) => (\r\n            <KV\r\n              // Index-based key on purpose: `label` is a ReactNode, so it is\r\n              // not always a usable key, and this list is not reorderable —\r\n              // it is rebuilt whole per row (R-R.3's exception).\r\n              key={index}\r\n              label={line.label}\r\n              {...(line.value !== undefined ? { value: line.value } : {})}\r\n              {...(line.mono !== undefined ? { mono: line.mono } : {})}\r\n            />\r\n          ))}\r\n        </KVGrid>\r\n      )}\r\n      {children}\r\n    </Drawer>\r\n  );\r\n}\r\n\r\nexport default PreviewDrawer;\r\n"],"mappings":"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","ignoreList":[]}