@portnet/ui 6.0.2 → 6.0.3

package/dist/v2/tokens/breakpoints.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BREAKPOINT_KEYS = void 0;
 exports.bpValue = bpValue;
-exports.mq = exports["default"] = exports.breakpoints = void 0;
+exports.mq = exports.default = exports.breakpoints = void 0;
 /**
  * Breakpoint tokens — Portnet UI v2
  * Aligned with Design System v1.0 §07 (Responsive) + R-RS.1.
@@ -44,7 +44,7 @@ exports.mq = exports["default"] = exports.breakpoints = void 0;
  */
 
 /* Ascending, mobile-first. xs = 0 is the base band (phones 320-480). */
-var breakpoints = exports.breakpoints = Object.freeze({
+const breakpoints = exports.breakpoints = Object.freeze({
   xs: 0,
   sm: 481,
   md: 768,
@@ -57,12 +57,12 @@ var breakpoints = exports.breakpoints = Object.freeze({
 
 /* Ordered key list — the canonical iteration order for any mobile-first
  * cascade (base -> up). Re-used by Layout.js so the order can't drift. */
-var BREAKPOINT_KEYS = exports.BREAKPOINT_KEYS = Object.freeze(["xs", "sm", "md", "lg", "xl"]);
+const BREAKPOINT_KEYS = exports.BREAKPOINT_KEYS = Object.freeze(["xs", "sm", "md", "lg", "xl"]);
 
 /* MUI parity: down()/between() subtract this from the upper bound so a
  * `down(key)` query and the matching `up(key)` query never overlap at
  * the exact pixel. Mirrors MUI's default step (5/100 = 0.05px). */
-var STEP = 0.05;
+const STEP = 0.05;
 
 /**
  * Resolve a key to its numeric min-width, falling back to 0 for an
@@ -70,13 +70,13 @@ var STEP = 0.05;
  * emitting a NaN width (which silently disables the whole query).
  */
 function bpValue(key) {
-  var v = breakpoints[key];
+  const v = breakpoints[key];
   return typeof v === "number" ? v : 0;
 }
 
 /* Next key up the scale, or null when `key` is the largest. */
 function nextKey(key) {
-  var i = BREAKPOINT_KEYS.indexOf(key);
+  const i = BREAKPOINT_KEYS.indexOf(key);
   return i >= 0 && i < BREAKPOINT_KEYS.length - 1 ? BREAKPOINT_KEYS[i + 1] : null;
 }
 
@@ -95,20 +95,20 @@ function nextKey(key) {
  * Usage (sx object key):
  *   sx={{ [mq.up("md")]: { flexDirection: "row" } }}
  */
-var mq = exports.mq = Object.freeze({
-  up: function up(key) {
-    return "@media (min-width:".concat(bpValue(key), "px)");
+const mq = exports.mq = Object.freeze({
+  up(key) {
+    return `@media (min-width:${bpValue(key)}px)`;
   },
-  down: function down(key) {
-    return "@media (max-width:".concat(bpValue(key) - STEP, "px)");
+  down(key) {
+    return `@media (max-width:${bpValue(key) - STEP}px)`;
   },
-  between: function between(start, end) {
-    return "@media (min-width:".concat(bpValue(start), "px) and (max-width:").concat(bpValue(end) - STEP, "px)");
+  between(start, end) {
+    return `@media (min-width:${bpValue(start)}px) and (max-width:${bpValue(end) - STEP}px)`;
   },
-  only: function only(key) {
-    var next = nextKey(key);
+  only(key) {
+    const next = nextKey(key);
     return next ? mq.between(key, next) : mq.up(key);
   }
 });
-var _default = exports["default"] = breakpoints;
+var _default = exports.default = breakpoints;
 //# sourceMappingURL=breakpoints.js.map

package/dist/v2/tokens/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","names":["breakpoints","exports","Object","freeze","xs","sm","md","lg","xl","BREAKPOINT_KEYS","STEP","bpValue","key","v","nextKey","i","indexOf","length","mq","up","concat","down","between","start","end","only","next","_default"],"sources":["../../../src/lib/v2/tokens/breakpoints.ts"],"sourcesContent":["/**\r\n * Breakpoint tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §07 (Responsive) + R-RS.1.\r\n *\r\n * SINGLE SOURCE OF TRUTH for the responsive breakpoint scale.\r\n * Previously these lived inside tokens/density.js, conflating two\r\n * unrelated concerns (row/control density vs. viewport breakpoints).\r\n * They now live here; density.js re-exports `breakpoints` so every\r\n * existing `import { breakpoints } from \"@portnet/ui/v2/tokens\"`\r\n * (and the `densityLayout` shape) keeps working unchanged.\r\n *\r\n * Two layers consume this scale and MUST stay in lockstep:\r\n *   1. The MUI theme — createPortnetTheme wires `breakpoints` into\r\n *      createTheme's `breakpoints.values`, so `theme.breakpoints.up()`\r\n *      and every `sx={{ prop: { xs, md } }}` on a MUI component resolve\r\n *      against THESE values.\r\n *   2. The CSS layer — the `mq` helpers below emit the SAME media\r\n *      queries as strings, for:\r\n *        - the theme-free v2 Box/Stack responsive sx engine (Layout.js),\r\n *        - raw `.css` / container styles,\r\n *        - any `sx={{ [mq.up(\"md\")]: {...} }}`,\r\n *      and the `--bp-*` CSS variables emitted by cssVariables.js for\r\n *      pure-CSS / container-query consumers.\r\n *\r\n * IMPORTANT — keep `breakpoints` a PURE value map ({ key: number }).\r\n * MUI's createTheme iterates `breakpoints.values` to build its own\r\n * up/down/between; a non-numeric key (e.g. a helper function) would be\r\n * mis-read as a breakpoint named \"up\". Helpers therefore live on the\r\n * SEPARATE `mq` export, never on `breakpoints` itself.\r\n *\r\n * Charter viewport targets covered:\r\n *   - xs band : 320 / 360 / 375 / 390 / 414  (phones, base, no query)\r\n *   - md      : 768 / 820                     (tablet)\r\n *   - lg      : 1024                          (small desktop / landscape tablet)\r\n *   - xl band : 1280 / 1440 / 1920            (desktop)\r\n */\r\n\r\n/* Ascending, mobile-first. xs = 0 is the base band (phones 320-480). */\r\nexport const breakpoints = Object.freeze({\r\n  xs:    0,\r\n  sm:  481,\r\n  md:  768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n});\r\n\r\n/* Local key type — canonical union of breakpoint keys. Not exported;\r\n * the public token surface is unchanged. */\r\ntype BreakpointKey = keyof typeof breakpoints;\r\n\r\n/* Ordered key list — the canonical iteration order for any mobile-first\r\n * cascade (base -> up). Re-used by Layout.js so the order can't drift. */\r\nexport const BREAKPOINT_KEYS = Object.freeze([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const);\r\n\r\n/* MUI parity: down()/between() subtract this from the upper bound so a\r\n * `down(key)` query and the matching `up(key)` query never overlap at\r\n * the exact pixel. Mirrors MUI's default step (5/100 = 0.05px). */\r\nconst STEP = 0.05;\r\n\r\n/**\r\n * Resolve a key to its numeric min-width, falling back to 0 for an\r\n * unknown key so a typo degrades to \"always matches\" rather than\r\n * emitting a NaN width (which silently disables the whole query).\r\n */\r\nexport function bpValue(key: BreakpointKey): number {\r\n  const v = breakpoints[key];\r\n  return typeof v === \"number\" ? v : 0;\r\n}\r\n\r\n/* Next key up the scale, or null when `key` is the largest. */\r\nfunction nextKey(key: BreakpointKey) {\r\n  const i = BREAKPOINT_KEYS.indexOf(key);\r\n  return i >= 0 && i < BREAKPOINT_KEYS.length - 1\r\n    ? BREAKPOINT_KEYS[i + 1]\r\n    : null;\r\n}\r\n\r\n/**\r\n * Token-derived media-query string helpers. Output is identical in\r\n * intent to MUI's `theme.breakpoints.*` so the CSS layer and the\r\n * JS/MUI layer can never diverge.\r\n *\r\n *   mq.up(\"md\")            -> \"@media (min-width:<md>px)\"\r\n *   mq.down(\"md\")          -> \"@media (max-width:<md - 0.05>px)\"\r\n *   mq.between(\"sm\",\"lg\")  -> \"@media (min-width:<sm>px) and (max-width:<lg - 0.05>px)\"\r\n *   mq.only(\"md\")          -> mq.between(\"md\",\"lg\")\r\n *\r\n * Usage (theme-free CSS layer / raw stylesheet):\r\n *   `${mq.up(\"md\")}{ .x{ gap:24px } }`\r\n * Usage (sx object key):\r\n *   sx={{ [mq.up(\"md\")]: { flexDirection: \"row\" } }}\r\n */\r\nexport const mq = Object.freeze({\r\n  up(key: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(key)}px)`;\r\n  },\r\n  down(key: BreakpointKey): string {\r\n    return `@media (max-width:${bpValue(key) - STEP}px)`;\r\n  },\r\n  between(start: BreakpointKey, end: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(start)}px) and (max-width:${bpValue(end) - STEP}px)`;\r\n  },\r\n  only(key: BreakpointKey): string {\r\n    const next = nextKey(key);\r\n    return next ? mq.between(key, next) : mq.up(key);\r\n  },\r\n});\r\n\r\nexport default breakpoints;\r\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACO,IAAMA,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,MAAM,CAACC,MAAM,CAAC;EACvCC,EAAE,EAAK,CAAC;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC,CAAC;;AAEF;AACA;;AAGA;AACA;AACO,IAAMC,eAAe,GAAAR,OAAA,CAAAQ,eAAA,GAAGP,MAAM,CAACC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;;AAErF;AACA;AACA;AACA,IAAMO,IAAI,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAACC,GAAkB,EAAU;EAClD,IAAMC,CAAC,GAAGb,WAAW,CAACY,GAAG,CAAC;EAC1B,OAAO,OAAOC,CAAC,KAAK,QAAQ,GAAGA,CAAC,GAAG,CAAC;AACtC;;AAEA;AACA,SAASC,OAAOA,CAACF,GAAkB,EAAE;EACnC,IAAMG,CAAC,GAAGN,eAAe,CAACO,OAAO,CAACJ,GAAG,CAAC;EACtC,OAAOG,CAAC,IAAI,CAAC,IAAIA,CAAC,GAAGN,eAAe,CAACQ,MAAM,GAAG,CAAC,GAC3CR,eAAe,CAACM,CAAC,GAAG,CAAC,CAAC,GACtB,IAAI;AACV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,EAAE,GAAAjB,OAAA,CAAAiB,EAAA,GAAGhB,MAAM,CAACC,MAAM,CAAC;EAC9BgB,EAAE,WAAAA,GAACP,GAAkB,EAAU;IAC7B,4BAAAQ,MAAA,CAA4BT,OAAO,CAACC,GAAG,CAAC;EAC1C,CAAC;EACDS,IAAI,WAAAA,KAACT,GAAkB,EAAU;IAC/B,4BAAAQ,MAAA,CAA4BT,OAAO,CAACC,GAAG,CAAC,GAAGF,IAAI;EACjD,CAAC;EACDY,OAAO,WAAAA,QAACC,KAAoB,EAAEC,GAAkB,EAAU;IACxD,4BAAAJ,MAAA,CAA4BT,OAAO,CAACY,KAAK,CAAC,yBAAAH,MAAA,CAAsBT,OAAO,CAACa,GAAG,CAAC,GAAGd,IAAI;EACrF,CAAC;EACDe,IAAI,WAAAA,KAACb,GAAkB,EAAU;IAC/B,IAAMc,IAAI,GAAGZ,OAAO,CAACF,GAAG,CAAC;IACzB,OAAOc,IAAI,GAAGR,EAAE,CAACI,OAAO,CAACV,GAAG,EAAEc,IAAI,CAAC,GAAGR,EAAE,CAACC,EAAE,CAACP,GAAG,CAAC;EAClD;AACF,CAAC,CAAC;AAAC,IAAAe,QAAA,GAAA1B,OAAA,cAEYD,WAAW","ignoreList":[]}
+{"version":3,"file":"breakpoints.js","names":["breakpoints","exports","Object","freeze","xs","sm","md","lg","xl","BREAKPOINT_KEYS","STEP","bpValue","key","v","nextKey","i","indexOf","length","mq","up","down","between","start","end","only","next","_default","default"],"sources":["../../../src/lib/v2/tokens/breakpoints.ts"],"sourcesContent":["/**\r\n * Breakpoint tokens — Portnet UI v2\r\n * Aligned with Design System v1.0 §07 (Responsive) + R-RS.1.\r\n *\r\n * SINGLE SOURCE OF TRUTH for the responsive breakpoint scale.\r\n * Previously these lived inside tokens/density.js, conflating two\r\n * unrelated concerns (row/control density vs. viewport breakpoints).\r\n * They now live here; density.js re-exports `breakpoints` so every\r\n * existing `import { breakpoints } from \"@portnet/ui/v2/tokens\"`\r\n * (and the `densityLayout` shape) keeps working unchanged.\r\n *\r\n * Two layers consume this scale and MUST stay in lockstep:\r\n *   1. The MUI theme — createPortnetTheme wires `breakpoints` into\r\n *      createTheme's `breakpoints.values`, so `theme.breakpoints.up()`\r\n *      and every `sx={{ prop: { xs, md } }}` on a MUI component resolve\r\n *      against THESE values.\r\n *   2. The CSS layer — the `mq` helpers below emit the SAME media\r\n *      queries as strings, for:\r\n *        - the theme-free v2 Box/Stack responsive sx engine (Layout.js),\r\n *        - raw `.css` / container styles,\r\n *        - any `sx={{ [mq.up(\"md\")]: {...} }}`,\r\n *      and the `--bp-*` CSS variables emitted by cssVariables.js for\r\n *      pure-CSS / container-query consumers.\r\n *\r\n * IMPORTANT — keep `breakpoints` a PURE value map ({ key: number }).\r\n * MUI's createTheme iterates `breakpoints.values` to build its own\r\n * up/down/between; a non-numeric key (e.g. a helper function) would be\r\n * mis-read as a breakpoint named \"up\". Helpers therefore live on the\r\n * SEPARATE `mq` export, never on `breakpoints` itself.\r\n *\r\n * Charter viewport targets covered:\r\n *   - xs band : 320 / 360 / 375 / 390 / 414  (phones, base, no query)\r\n *   - md      : 768 / 820                     (tablet)\r\n *   - lg      : 1024                          (small desktop / landscape tablet)\r\n *   - xl band : 1280 / 1440 / 1920            (desktop)\r\n */\r\n\r\n/* Ascending, mobile-first. xs = 0 is the base band (phones 320-480). */\r\nexport const breakpoints = Object.freeze({\r\n  xs:    0,\r\n  sm:  481,\r\n  md:  768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n});\r\n\r\n/* Local key type — canonical union of breakpoint keys. Not exported;\r\n * the public token surface is unchanged. */\r\ntype BreakpointKey = keyof typeof breakpoints;\r\n\r\n/* Ordered key list — the canonical iteration order for any mobile-first\r\n * cascade (base -> up). Re-used by Layout.js so the order can't drift. */\r\nexport const BREAKPOINT_KEYS = Object.freeze([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const);\r\n\r\n/* MUI parity: down()/between() subtract this from the upper bound so a\r\n * `down(key)` query and the matching `up(key)` query never overlap at\r\n * the exact pixel. Mirrors MUI's default step (5/100 = 0.05px). */\r\nconst STEP = 0.05;\r\n\r\n/**\r\n * Resolve a key to its numeric min-width, falling back to 0 for an\r\n * unknown key so a typo degrades to \"always matches\" rather than\r\n * emitting a NaN width (which silently disables the whole query).\r\n */\r\nexport function bpValue(key: BreakpointKey): number {\r\n  const v = breakpoints[key];\r\n  return typeof v === \"number\" ? v : 0;\r\n}\r\n\r\n/* Next key up the scale, or null when `key` is the largest. */\r\nfunction nextKey(key: BreakpointKey) {\r\n  const i = BREAKPOINT_KEYS.indexOf(key);\r\n  return i >= 0 && i < BREAKPOINT_KEYS.length - 1\r\n    ? BREAKPOINT_KEYS[i + 1]\r\n    : null;\r\n}\r\n\r\n/**\r\n * Token-derived media-query string helpers. Output is identical in\r\n * intent to MUI's `theme.breakpoints.*` so the CSS layer and the\r\n * JS/MUI layer can never diverge.\r\n *\r\n *   mq.up(\"md\")            -> \"@media (min-width:<md>px)\"\r\n *   mq.down(\"md\")          -> \"@media (max-width:<md - 0.05>px)\"\r\n *   mq.between(\"sm\",\"lg\")  -> \"@media (min-width:<sm>px) and (max-width:<lg - 0.05>px)\"\r\n *   mq.only(\"md\")          -> mq.between(\"md\",\"lg\")\r\n *\r\n * Usage (theme-free CSS layer / raw stylesheet):\r\n *   `${mq.up(\"md\")}{ .x{ gap:24px } }`\r\n * Usage (sx object key):\r\n *   sx={{ [mq.up(\"md\")]: { flexDirection: \"row\" } }}\r\n */\r\nexport const mq = Object.freeze({\r\n  up(key: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(key)}px)`;\r\n  },\r\n  down(key: BreakpointKey): string {\r\n    return `@media (max-width:${bpValue(key) - STEP}px)`;\r\n  },\r\n  between(start: BreakpointKey, end: BreakpointKey): string {\r\n    return `@media (min-width:${bpValue(start)}px) and (max-width:${bpValue(end) - STEP}px)`;\r\n  },\r\n  only(key: BreakpointKey): string {\r\n    const next = nextKey(key);\r\n    return next ? mq.between(key, next) : mq.up(key);\r\n  },\r\n});\r\n\r\nexport default breakpoints;\r\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACO,MAAMA,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,MAAM,CAACC,MAAM,CAAC;EACvCC,EAAE,EAAK,CAAC;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAG,GAAG;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC,CAAC;;AAEF;AACA;;AAGA;AACA;AACO,MAAMC,eAAe,GAAAR,OAAA,CAAAQ,eAAA,GAAGP,MAAM,CAACC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;;AAErF;AACA;AACA;AACA,MAAMO,IAAI,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAACC,GAAkB,EAAU;EAClD,MAAMC,CAAC,GAAGb,WAAW,CAACY,GAAG,CAAC;EAC1B,OAAO,OAAOC,CAAC,KAAK,QAAQ,GAAGA,CAAC,GAAG,CAAC;AACtC;;AAEA;AACA,SAASC,OAAOA,CAACF,GAAkB,EAAE;EACnC,MAAMG,CAAC,GAAGN,eAAe,CAACO,OAAO,CAACJ,GAAG,CAAC;EACtC,OAAOG,CAAC,IAAI,CAAC,IAAIA,CAAC,GAAGN,eAAe,CAACQ,MAAM,GAAG,CAAC,GAC3CR,eAAe,CAACM,CAAC,GAAG,CAAC,CAAC,GACtB,IAAI;AACV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,EAAE,GAAAjB,OAAA,CAAAiB,EAAA,GAAGhB,MAAM,CAACC,MAAM,CAAC;EAC9BgB,EAAEA,CAACP,GAAkB,EAAU;IAC7B,OAAO,qBAAqBD,OAAO,CAACC,GAAG,CAAC,KAAK;EAC/C,CAAC;EACDQ,IAAIA,CAACR,GAAkB,EAAU;IAC/B,OAAO,qBAAqBD,OAAO,CAACC,GAAG,CAAC,GAAGF,IAAI,KAAK;EACtD,CAAC;EACDW,OAAOA,CAACC,KAAoB,EAAEC,GAAkB,EAAU;IACxD,OAAO,qBAAqBZ,OAAO,CAACW,KAAK,CAAC,sBAAsBX,OAAO,CAACY,GAAG,CAAC,GAAGb,IAAI,KAAK;EAC1F,CAAC;EACDc,IAAIA,CAACZ,GAAkB,EAAU;IAC/B,MAAMa,IAAI,GAAGX,OAAO,CAACF,GAAG,CAAC;IACzB,OAAOa,IAAI,GAAGP,EAAE,CAACG,OAAO,CAACT,GAAG,EAAEa,IAAI,CAAC,GAAGP,EAAE,CAACC,EAAE,CAACP,GAAG,CAAC;EAClD;AACF,CAAC,CAAC;AAAC,IAAAc,QAAA,GAAAzB,OAAA,CAAA0B,OAAA,GAEY3B,WAAW","ignoreList":[]}

package/dist/v2/tokens/chart.d.ts

@@ -0,0 +1,103 @@
+/**
+ * The palette, in display order. Entries 1-8 (indices 0-7) are the
+ * hue-balanced, CVD-verified core; 9-12 extend it.
+ */
+export declare const chartCategorical: readonly ["#C92E1D", "#A89318", "#3B7911", "#18A84B", "#127681", "#7A8CEC", "#9B30E1", "#E860B8", "#119870", "#B915B0", "#9A0DF9", "#965848"];
+/** Size of the hue-balanced core. Beyond it, separation is still verified but the sequence stops being evenly spaced. */
+export declare const CHART_CATEGORICAL_CORE = 8;
+/**
+ * Colour for the n-th category, cycling past the end of the palette.
+ *
+ * Non-finite or negative indices resolve to the first entry rather than
+ * throwing: a chart is a read-only view, and a bad index should not blank a
+ * page. In development an out-of-range index also warns, because CYCLING IS
+ * SILENT — two slices sharing a colour looks like a design choice, not like the
+ * data-loss it is.
+ */
+export declare function chartColor(index: number): string;
+/** Label colours, index-aligned with `chartCategorical`. */
+export declare const chartCategoricalOn: readonly string[];
+/** AA-safe colour for text drawn on top of `chartColor(index)`. Cycles identically. */
+export declare function chartColorOn(index: number): string;
+/**
+ * Non-data chart furniture — title, labels, canvas (capability gap G-54).
+ *
+ * ────────────────────────────────────────────────────────────────────────────────
+ * THIS IS A ROLE→TOKEN MAPPING, NOT A STORE OF VALUES, and the distinction is
+ * the justification. Every value below already exists in this library, and a
+ * module reading `ink.fgMuted` for its axis labels is already compliant with
+ * R-2.3. What no module can get right alone is WHICH token plays WHICH role:
+ * is a chart title an `h2` or an `h3`? are axis labels `xs` or `sm`? is the
+ * canvas `surface` or transparent?
+ *
+ * Left unanswered, each screen answers it again. Observed in
+ * `autorisation-admis-pour-conforme-fe` (Area 5): three bilan screens, five
+ * chart definitions, the same five-line block of title / label / canvas styling
+ * copied into each — agreeing only because they were copied from one another.
+ * The next module starts from a blank chart and picks `h2`, and nothing in code
+ * review can call that wrong, because the platform never said.
+ *
+ * So this is the answer, once: a chart title reads as a card title (`h3`,
+ * semibold, full-strength ink), its labels as hints (`xs`, muted ink), and its
+ * canvas is TRANSPARENT — the chart sits on whatever `Surface` holds it, and a
+ * hard-coded white canvas is exactly what breaks a chart in dark mode.
+ * ────────────────────────────────────────────────────────────────────────────────
+ *
+ * LIBRARY-AGNOSTIC BY CONSTRUCTION. Plain strings, no chart library imported,
+ * no option shape assumed: Highcharts, Recharts, Chart.js and a hand-written
+ * SVG all take these. A consumer maps them to its renderer's option names,
+ * which is a binding — and a binding holding no design values is not a
+ * duplication of this.
+ *
+ * FONT SIZES ARE STRINGS WITH UNITS, unlike `fontSize.*`, which are integers.
+ * Chart libraries pass their style objects to SVG attributes rather than to
+ * React's style prop, so they never get a unit appended for free — a bare `16`
+ * is silently ignored by some renderers and read as `16px` by others.
+ *
+ * WHAT THIS DOES NOT MAKE ACCESSIBLE. Nothing here supplies the text
+ * equivalent WCAG 1.1.1 requires of a chart, or the non-colour channel of
+ * 1.4.1. See the `ChartFigure` pattern, which carries the caption, and the note
+ * at the head of this file.
+ */
+export declare const chartChrome: Readonly<{
+    /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */
+    background: "transparent";
+    /** One family for every text in the chart — §02.2 UI stack. */
+    fontFamily: string;
+    /** Chart title: reads as a card title (§02.2 `h3`). */
+    title: Readonly<{
+        color: string;
+        fontSize: `${number}px`;
+        fontWeight: string;
+    }>;
+    /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */
+    label: Readonly<{
+        color: string;
+        fontSize: `${number}px`;
+    }>;
+}>;
+declare const chart: {
+    chartCategorical: readonly ["#C92E1D", "#A89318", "#3B7911", "#18A84B", "#127681", "#7A8CEC", "#9B30E1", "#E860B8", "#119870", "#B915B0", "#9A0DF9", "#965848"];
+    chartColor: typeof chartColor;
+    chartColorOn: typeof chartColorOn;
+    chartChrome: Readonly<{
+        /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */
+        background: "transparent";
+        /** One family for every text in the chart — §02.2 UI stack. */
+        fontFamily: string;
+        /** Chart title: reads as a card title (§02.2 `h3`). */
+        title: Readonly<{
+            color: string;
+            fontSize: `${number}px`;
+            fontWeight: string;
+        }>;
+        /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */
+        label: Readonly<{
+            color: string;
+            fontSize: `${number}px`;
+        }>;
+    }>;
+    CHART_CATEGORICAL_CORE: number;
+};
+export default chart;
+//# sourceMappingURL=chart.d.ts.map

package/dist/v2/tokens/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/tokens/chart.ts"],"names":[],"mappings":"AA+FA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,+IAalB,CAAC;AAEZ,yHAAyH;AACzH,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAehD;AAyCD,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,mBAE9B,CAAC;AAEF,uFAAuF;AACvF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMlD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,WAAW;IACtB,sFAAsF;;IAEtF,+DAA+D;;IAE/D,uDAAuD;;;;;;IAMvD,2EAA2E;;;;;EAK3E,CAAC;AAEH,QAAA,MAAM,KAAK;;;;;QAjBT,sFAAsF;;QAEtF,+DAA+D;;QAE/D,uDAAuD;;;;;;QAMvD,2EAA2E;;;;;;;CAa5E,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/v2/tokens/chart.js

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartChrome = exports.chartCategoricalOn = exports.chartCategorical = exports.CHART_CATEGORICAL_CORE = void 0;
+exports.chartColor = chartColor;
+exports.chartColorOn = chartColorOn;
+exports.default = void 0;
+var _contrast = require("../utils/contrast");
+var _colors = require("./colors");
+var _typography = require("./typography");
+/**
+ * Categorical chart palette — Portnet UI v2
+ *
+ * A cyclable sequence of visually distinct fills for CATEGORY series in
+ * charts (pie slices, stacked bars, multi-series lines). Charter §02.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-37)
+ *
+ * R-2.3 MUST: "aucune valeur magique : tout px/color/font-size passe par un
+ * token". R-AI.1 MUST repeats it for generated UI. Yet the library shipped only
+ * SEMANTIC colour: brand, ink, surface, border, the four severities and the six
+ * workflow statuses. None of them answers "give me N colours that a reader can
+ * tell apart", so every charting screen wrote its own list of hex literals.
+ *
+ * Observed in `refonte-frontend` (Area 4): THIRTY-TWO literals across two
+ * files — a 30-entry palette in `GraphiqueCamembert` (itself already
+ * de-duplicated from two copies) plus two more in
+ * `ChartBilanDPCIParDelegation`. The file carried a comment explaining, quite
+ * correctly, why it could not be fixed locally: mapping categories onto the
+ * SEMANTIC tones would make "red" mean *a category of measuring instrument*
+ * rather than *an error*, which R-2.2 exists to prevent. So the module was
+ * stuck between two MUST rules, and the only way out was here.
+ *
+ * >>> THE ARGUMENT FOR OWNING IT IS THE VERIFICATION, NOT THE STORAGE. Moving
+ * >>> thirty hex codes from a module to a library would only relocate them. The
+ * >>> reason they belong here is that a categorical palette carries three
+ * >>> claims no host can check for itself, and that this repository already has
+ * >>> the tooling for: each fill must clear the 3:1 non-text floor (WCAG
+ * >>> 1.4.11 / R-C.3) against the surface it sits on, the entries must stay
+ * >>> apart from each other, and they must stay apart under colour-vision
+ * >>> deficiency — a pie chart encodes its data in hue alone, so a palette that
+ * >>> collapses under deuteranopia loses the data, not just the styling. The
+ * >>> module's 30 literals had NONE of the three verified. See
+ * >>> __tests__/chart-palette.test.ts, which asserts all three. <<<
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * HOW THESE VALUES WERE DERIVED
+ *
+ * Hue-balanced, then constrained — not picked by eye:
+ *
+ *   1. Twelve hues, the first eight evenly spaced around the wheel, so the
+ *      sequence reads as intentional rather than arbitrary.
+ *   2. Lightness solved numerically per entry so that relative luminance lands
+ *      inside the window where a fill clears 3:1 against BOTH the light surface
+ *      (#FFFFFF) and the dark-mode surface. That window is roughly
+ *      L ∈ [0.119, 0.300] and it is why ONE array serves both themes — unlike
+ *      `status`, which needs a `dark.status` override. Entries alternate
+ *      between the two ends of the window, which adds a lightness difference to
+ *      the hue difference between neighbours.
+ *   3. Entries 9 to 12 were then chosen by maximising the minimum separation
+ *      against the first eight, measured as the WORST of three distances:
+ *      normal vision, deuteranopia and protanopia (Viénot simulation, CIE76).
+ *
+ * Measured properties (all pinned in the test):
+ *   · every entry ≥ 3.06:1 on #FFFFFF and ≥ 3.37:1 on the dark surface;
+ *   · minimum pairwise separation ≥ 12 ΔE under normal vision AND under both
+ *     simulated dichromacies — the closest pair is entry 1 (red) against
+ *     entry 3 (olive), at ~12.4.
+ *
+ * USE THE FIRST EIGHT WHERE YOU CAN. Entries 1-8 are the hue-balanced core;
+ * 9-12 extend it for larger sets. Past twelve, `chartColor` CYCLES, and two
+ * slices then share a colour — which is a defect in the chart, not in the
+ * palette. A series with more than a dozen categories should aggregate its
+ * tail into a single "Autres" slice: R-3.1 / R-3.2 cap what one screen may
+ * show at once for the same reason.
+ *
+ * COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes slices
+ * distinguishable; it does not make a chart accessible. Every consumer still
+ * owes a legend with text labels, and a text equivalent of the data — 1.1.1
+ * for the chart as a whole.
+ *
+ * Usage — prefer the JS token in a chart library, since SVG presentation
+ * attributes given a `var()` are not reliably resolved by every renderer:
+ *
+ *   import { chartColor } from "@portnet/ui/tokens";
+ *   <Cell fill={chartColor(index)} />
+ *
+ * In CSS or `sx`, the same values are emitted as `--chart-1` … `--chart-12`
+ * (see theme/cssVariables).
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * TEXT *ON* A SLICE IS A SECOND CONTRAST PROBLEM — see `chartColorOn`.
+ *
+ * The 3:1 floor above covers the FILL against the page. A percentage printed
+ * inside the slice is text on that fill, and owes 4.5:1 (WCAG 1.4.3). The
+ * palette deliberately spans two lightness tiers, so no single label colour
+ * works for all twelve: `refonte-frontend` printed `fill="white"` on all six
+ * of its pies, which was ~3:1 on half of them.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+/**
+ * The palette, in display order. Entries 1-8 (indices 0-7) are the
+ * hue-balanced, CVD-verified core; 9-12 extend it.
+ */
+const chartCategorical = exports.chartCategorical = Object.freeze(["#C92E1D",
+// 1  red
+"#A89318",
+// 2  amber / olive-gold
+"#3B7911",
+// 3  olive green
+"#18A84B",
+// 4  green
+"#127681",
+// 5  teal
+"#7A8CEC",
+// 6  periwinkle
+"#9B30E1",
+// 7  violet
+"#E860B8",
+// 8  pink
+"#119870",
+// 9  jade
+"#B915B0",
+// 10 magenta
+"#9A0DF9",
+// 11 blue-violet
+"#965848" // 12 brown
+]);
+
+/** Size of the hue-balanced core. Beyond it, separation is still verified but the sequence stops being evenly spaced. */
+const CHART_CATEGORICAL_CORE = exports.CHART_CATEGORICAL_CORE = 8;
+
+/**
+ * Colour for the n-th category, cycling past the end of the palette.
+ *
+ * Non-finite or negative indices resolve to the first entry rather than
+ * throwing: a chart is a read-only view, and a bad index should not blank a
+ * page. In development an out-of-range index also warns, because CYCLING IS
+ * SILENT — two slices sharing a colour looks like a design choice, not like the
+ * data-loss it is.
+ */
+function chartColor(index) {
+  const total = chartCategorical.length;
+  if (!Number.isFinite(index) || index < 0) {
+    return chartCategorical[0];
+  }
+  const i = Math.floor(index);
+  if (i >= total && process.env["NODE_ENV"] !== "production") {
+    // eslint-disable-next-line no-console
+    console.warn(`[@portnet/ui] chartColor(${i}): the palette holds ${total} colours, so ` + `this category reuses the colour of category ${i % total}. Aggregate ` + `the tail of the series instead (R-3.2).`);
+  }
+  return chartCategorical[i % total];
+}
+
+/**
+ * Label colour for text drawn ON a slice — `#FFFFFF` or `ink.fg`, whichever
+ * clears WCAG 1.4.3 AA against that fill.
+ *
+ * DERIVED, NOT TABULATED, and that is the whole point: a parallel array of
+ * twelve label colours would be a second list to keep in step with the first,
+ * and the failure mode of letting them drift is silent — unreadable text, at
+ * the exact spot where the chart states its numbers. Computed here with this
+ * library's own `contrastRatio`, so nudging a hue re-derives its label colour
+ * in the same breath.
+ *
+ * Measured: every entry pairs at ≥ 4.98:1, so the AA floor holds with margin
+ * on all twelve. The dev warning below is for a future hue that lands in the
+ * band where NEITHER candidate reaches 4.5:1 — possible in principle, since the
+ * fill constraint only bounds luminance to [0.119, 0.300].
+ */
+const LABEL_CANDIDATES = Object.freeze(["#FFFFFF", _colors.ink.fg]);
+function pickLabelColour(fill) {
+  let best = LABEL_CANDIDATES[0];
+  let bestRatio = 0;
+  for (const candidate of LABEL_CANDIDATES) {
+    const ratio = (0, _contrast.contrastRatio)(candidate, fill) ?? 0;
+    if (ratio > bestRatio) {
+      bestRatio = ratio;
+      best = candidate;
+    }
+  }
+  if (bestRatio < _contrast.WCAG_AA_NORMAL && process.env["NODE_ENV"] !== "production") {
+    // eslint-disable-next-line no-console
+    console.warn(`[@portnet/ui] chart fill ${fill} has no AA-compliant label colour ` + `(best ${bestRatio.toFixed(2)}:1). Draw the label outside the slice, or ` + `re-solve the fill's lightness.`);
+  }
+  return best;
+}
+
+/** Label colours, index-aligned with `chartCategorical`. */
+const chartCategoricalOn = exports.chartCategoricalOn = Object.freeze(chartCategorical.map(pickLabelColour));
+
+/** AA-safe colour for text drawn on top of `chartColor(index)`. Cycles identically. */
+function chartColorOn(index) {
+  const total = chartCategoricalOn.length;
+  if (!Number.isFinite(index) || index < 0) {
+    return chartCategoricalOn[0];
+  }
+  return chartCategoricalOn[Math.floor(index) % total];
+}
+
+/**
+ * Non-data chart furniture — title, labels, canvas (capability gap G-54).
+ *
+ * ────────────────────────────────────────────────────────────────────────────────
+ * THIS IS A ROLE→TOKEN MAPPING, NOT A STORE OF VALUES, and the distinction is
+ * the justification. Every value below already exists in this library, and a
+ * module reading `ink.fgMuted` for its axis labels is already compliant with
+ * R-2.3. What no module can get right alone is WHICH token plays WHICH role:
+ * is a chart title an `h2` or an `h3`? are axis labels `xs` or `sm`? is the
+ * canvas `surface` or transparent?
+ *
+ * Left unanswered, each screen answers it again. Observed in
+ * `autorisation-admis-pour-conforme-fe` (Area 5): three bilan screens, five
+ * chart definitions, the same five-line block of title / label / canvas styling
+ * copied into each — agreeing only because they were copied from one another.
+ * The next module starts from a blank chart and picks `h2`, and nothing in code
+ * review can call that wrong, because the platform never said.
+ *
+ * So this is the answer, once: a chart title reads as a card title (`h3`,
+ * semibold, full-strength ink), its labels as hints (`xs`, muted ink), and its
+ * canvas is TRANSPARENT — the chart sits on whatever `Surface` holds it, and a
+ * hard-coded white canvas is exactly what breaks a chart in dark mode.
+ * ────────────────────────────────────────────────────────────────────────────────
+ *
+ * LIBRARY-AGNOSTIC BY CONSTRUCTION. Plain strings, no chart library imported,
+ * no option shape assumed: Highcharts, Recharts, Chart.js and a hand-written
+ * SVG all take these. A consumer maps them to its renderer's option names,
+ * which is a binding — and a binding holding no design values is not a
+ * duplication of this.
+ *
+ * FONT SIZES ARE STRINGS WITH UNITS, unlike `fontSize.*`, which are integers.
+ * Chart libraries pass their style objects to SVG attributes rather than to
+ * React's style prop, so they never get a unit appended for free — a bare `16`
+ * is silently ignored by some renderers and read as `16px` by others.
+ *
+ * WHAT THIS DOES NOT MAKE ACCESSIBLE. Nothing here supplies the text
+ * equivalent WCAG 1.1.1 requires of a chart, or the non-colour channel of
+ * 1.4.1. See the `ChartFigure` pattern, which carries the caption, and the note
+ * at the head of this file.
+ */
+const chartChrome = exports.chartChrome = Object.freeze({
+  /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */
+  background: "transparent",
+  /** One family for every text in the chart — §02.2 UI stack. */
+  fontFamily: _typography.fontFamily.sans,
+  /** Chart title: reads as a card title (§02.2 `h3`). */
+  title: Object.freeze({
+    color: _colors.ink.fg,
+    fontSize: `${_typography.fontSize.h3}px`,
+    fontWeight: String(_typography.fontWeight.semibold)
+  }),
+  /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */
+  label: Object.freeze({
+    color: _colors.ink.fgMuted,
+    fontSize: `${_typography.fontSize.xs}px`
+  })
+});
+const chart = {
+  chartCategorical,
+  chartColor,
+  chartColorOn,
+  chartChrome,
+  CHART_CATEGORICAL_CORE
+};
+var _default = exports.default = chart;
+//# sourceMappingURL=chart.js.map

package/dist/v2/tokens/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":["_contrast","require","_colors","_typography","chartCategorical","exports","Object","freeze","CHART_CATEGORICAL_CORE","chartColor","index","total","length","Number","isFinite","i","Math","floor","process","env","console","warn","LABEL_CANDIDATES","ink","fg","pickLabelColour","fill","best","bestRatio","candidate","ratio","contrastRatio","WCAG_AA_NORMAL","toFixed","chartCategoricalOn","map","chartColorOn","chartChrome","background","fontFamily","sans","title","color","fontSize","h3","fontWeight","String","semibold","label","fgMuted","xs","chart","_default","default"],"sources":["../../../src/lib/v2/tokens/chart.ts"],"sourcesContent":["/**\r\n * Categorical chart palette — Portnet UI v2\r\n *\r\n * A cyclable sequence of visually distinct fills for CATEGORY series in\r\n * charts (pie slices, stacked bars, multi-series lines). Charter §02.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-37)\r\n *\r\n * R-2.3 MUST: \"aucune valeur magique : tout px/color/font-size passe par un\r\n * token\". R-AI.1 MUST repeats it for generated UI. Yet the library shipped only\r\n * SEMANTIC colour: brand, ink, surface, border, the four severities and the six\r\n * workflow statuses. None of them answers \"give me N colours that a reader can\r\n * tell apart\", so every charting screen wrote its own list of hex literals.\r\n *\r\n * Observed in `refonte-frontend` (Area 4): THIRTY-TWO literals across two\r\n * files — a 30-entry palette in `GraphiqueCamembert` (itself already\r\n * de-duplicated from two copies) plus two more in\r\n * `ChartBilanDPCIParDelegation`. The file carried a comment explaining, quite\r\n * correctly, why it could not be fixed locally: mapping categories onto the\r\n * SEMANTIC tones would make \"red\" mean *a category of measuring instrument*\r\n * rather than *an error*, which R-2.2 exists to prevent. So the module was\r\n * stuck between two MUST rules, and the only way out was here.\r\n *\r\n * >>> THE ARGUMENT FOR OWNING IT IS THE VERIFICATION, NOT THE STORAGE. Moving\r\n * >>> thirty hex codes from a module to a library would only relocate them. The\r\n * >>> reason they belong here is that a categorical palette carries three\r\n * >>> claims no host can check for itself, and that this repository already has\r\n * >>> the tooling for: each fill must clear the 3:1 non-text floor (WCAG\r\n * >>> 1.4.11 / R-C.3) against the surface it sits on, the entries must stay\r\n * >>> apart from each other, and they must stay apart under colour-vision\r\n * >>> deficiency — a pie chart encodes its data in hue alone, so a palette that\r\n * >>> collapses under deuteranopia loses the data, not just the styling. The\r\n * >>> module's 30 literals had NONE of the three verified. See\r\n * >>> __tests__/chart-palette.test.ts, which asserts all three. <<<\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * HOW THESE VALUES WERE DERIVED\r\n *\r\n * Hue-balanced, then constrained — not picked by eye:\r\n *\r\n *   1. Twelve hues, the first eight evenly spaced around the wheel, so the\r\n *      sequence reads as intentional rather than arbitrary.\r\n *   2. Lightness solved numerically per entry so that relative luminance lands\r\n *      inside the window where a fill clears 3:1 against BOTH the light surface\r\n *      (#FFFFFF) and the dark-mode surface. That window is roughly\r\n *      L ∈ [0.119, 0.300] and it is why ONE array serves both themes — unlike\r\n *      `status`, which needs a `dark.status` override. Entries alternate\r\n *      between the two ends of the window, which adds a lightness difference to\r\n *      the hue difference between neighbours.\r\n *   3. Entries 9 to 12 were then chosen by maximising the minimum separation\r\n *      against the first eight, measured as the WORST of three distances:\r\n *      normal vision, deuteranopia and protanopia (Viénot simulation, CIE76).\r\n *\r\n * Measured properties (all pinned in the test):\r\n *   · every entry ≥ 3.06:1 on #FFFFFF and ≥ 3.37:1 on the dark surface;\r\n *   · minimum pairwise separation ≥ 12 ΔE under normal vision AND under both\r\n *     simulated dichromacies — the closest pair is entry 1 (red) against\r\n *     entry 3 (olive), at ~12.4.\r\n *\r\n * USE THE FIRST EIGHT WHERE YOU CAN. Entries 1-8 are the hue-balanced core;\r\n * 9-12 extend it for larger sets. Past twelve, `chartColor` CYCLES, and two\r\n * slices then share a colour — which is a defect in the chart, not in the\r\n * palette. A series with more than a dozen categories should aggregate its\r\n * tail into a single \"Autres\" slice: R-3.1 / R-3.2 cap what one screen may\r\n * show at once for the same reason.\r\n *\r\n * COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes slices\r\n * distinguishable; it does not make a chart accessible. Every consumer still\r\n * owes a legend with text labels, and a text equivalent of the data — 1.1.1\r\n * for the chart as a whole.\r\n *\r\n * Usage — prefer the JS token in a chart library, since SVG presentation\r\n * attributes given a `var()` are not reliably resolved by every renderer:\r\n *\r\n *   import { chartColor } from \"@portnet/ui/tokens\";\r\n *   <Cell fill={chartColor(index)} />\r\n *\r\n * In CSS or `sx`, the same values are emitted as `--chart-1` … `--chart-12`\r\n * (see theme/cssVariables).\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * TEXT *ON* A SLICE IS A SECOND CONTRAST PROBLEM — see `chartColorOn`.\r\n *\r\n * The 3:1 floor above covers the FILL against the page. A percentage printed\r\n * inside the slice is text on that fill, and owes 4.5:1 (WCAG 1.4.3). The\r\n * palette deliberately spans two lightness tiers, so no single label colour\r\n * works for all twelve: `refonte-frontend` printed `fill=\"white\"` on all six\r\n * of its pies, which was ~3:1 on half of them.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n */\r\nimport { contrastRatio, WCAG_AA_NORMAL } from \"../utils/contrast\";\r\nimport { ink } from \"./colors\";\r\nimport { fontFamily, fontSize, fontWeight } from \"./typography\";\r\n\r\n/**\r\n * The palette, in display order. Entries 1-8 (indices 0-7) are the\r\n * hue-balanced, CVD-verified core; 9-12 extend it.\r\n */\r\nexport const chartCategorical = Object.freeze([\r\n  \"#C92E1D\", // 1  red\r\n  \"#A89318\", // 2  amber / olive-gold\r\n  \"#3B7911\", // 3  olive green\r\n  \"#18A84B\", // 4  green\r\n  \"#127681\", // 5  teal\r\n  \"#7A8CEC\", // 6  periwinkle\r\n  \"#9B30E1\", // 7  violet\r\n  \"#E860B8\", // 8  pink\r\n  \"#119870\", // 9  jade\r\n  \"#B915B0\", // 10 magenta\r\n  \"#9A0DF9\", // 11 blue-violet\r\n  \"#965848\", // 12 brown\r\n] as const);\r\n\r\n/** Size of the hue-balanced core. Beyond it, separation is still verified but the sequence stops being evenly spaced. */\r\nexport const CHART_CATEGORICAL_CORE = 8;\r\n\r\n/**\r\n * Colour for the n-th category, cycling past the end of the palette.\r\n *\r\n * Non-finite or negative indices resolve to the first entry rather than\r\n * throwing: a chart is a read-only view, and a bad index should not blank a\r\n * page. In development an out-of-range index also warns, because CYCLING IS\r\n * SILENT — two slices sharing a colour looks like a design choice, not like the\r\n * data-loss it is.\r\n */\r\nexport function chartColor(index: number): string {\r\n  const total = chartCategorical.length;\r\n  if (!Number.isFinite(index) || index < 0) {\r\n    return chartCategorical[0] as string;\r\n  }\r\n  const i = Math.floor(index);\r\n  if (i >= total && process.env[\"NODE_ENV\"] !== \"production\") {\r\n    // eslint-disable-next-line no-console\r\n    console.warn(\r\n      `[@portnet/ui] chartColor(${i}): the palette holds ${total} colours, so ` +\r\n        `this category reuses the colour of category ${i % total}. Aggregate ` +\r\n        `the tail of the series instead (R-3.2).`\r\n    );\r\n  }\r\n  return chartCategorical[i % total] as string;\r\n}\r\n\r\n/**\r\n * Label colour for text drawn ON a slice — `#FFFFFF` or `ink.fg`, whichever\r\n * clears WCAG 1.4.3 AA against that fill.\r\n *\r\n * DERIVED, NOT TABULATED, and that is the whole point: a parallel array of\r\n * twelve label colours would be a second list to keep in step with the first,\r\n * and the failure mode of letting them drift is silent — unreadable text, at\r\n * the exact spot where the chart states its numbers. Computed here with this\r\n * library's own `contrastRatio`, so nudging a hue re-derives its label colour\r\n * in the same breath.\r\n *\r\n * Measured: every entry pairs at ≥ 4.98:1, so the AA floor holds with margin\r\n * on all twelve. The dev warning below is for a future hue that lands in the\r\n * band where NEITHER candidate reaches 4.5:1 — possible in principle, since the\r\n * fill constraint only bounds luminance to [0.119, 0.300].\r\n */\r\nconst LABEL_CANDIDATES: readonly string[] = Object.freeze([\"#FFFFFF\", ink.fg]);\r\n\r\nfunction pickLabelColour(fill: string): string {\r\n  let best = LABEL_CANDIDATES[0] as string;\r\n  let bestRatio = 0;\r\n  for (const candidate of LABEL_CANDIDATES) {\r\n    const ratio = contrastRatio(candidate, fill) ?? 0;\r\n    if (ratio > bestRatio) {\r\n      bestRatio = ratio;\r\n      best = candidate;\r\n    }\r\n  }\r\n  if (bestRatio < WCAG_AA_NORMAL && process.env[\"NODE_ENV\"] !== \"production\") {\r\n    // eslint-disable-next-line no-console\r\n    console.warn(\r\n      `[@portnet/ui] chart fill ${fill} has no AA-compliant label colour ` +\r\n        `(best ${bestRatio.toFixed(2)}:1). Draw the label outside the slice, or ` +\r\n        `re-solve the fill's lightness.`\r\n    );\r\n  }\r\n  return best;\r\n}\r\n\r\n/** Label colours, index-aligned with `chartCategorical`. */\r\nexport const chartCategoricalOn = Object.freeze(\r\n  chartCategorical.map(pickLabelColour)\r\n);\r\n\r\n/** AA-safe colour for text drawn on top of `chartColor(index)`. Cycles identically. */\r\nexport function chartColorOn(index: number): string {\r\n  const total = chartCategoricalOn.length;\r\n  if (!Number.isFinite(index) || index < 0) {\r\n    return chartCategoricalOn[0] as string;\r\n  }\r\n  return chartCategoricalOn[Math.floor(index) % total] as string;\r\n}\r\n\r\n/**\r\n * Non-data chart furniture — title, labels, canvas (capability gap G-54).\r\n *\r\n * ────────────────────────────────────────────────────────────────────────────────\r\n * THIS IS A ROLE→TOKEN MAPPING, NOT A STORE OF VALUES, and the distinction is\r\n * the justification. Every value below already exists in this library, and a\r\n * module reading `ink.fgMuted` for its axis labels is already compliant with\r\n * R-2.3. What no module can get right alone is WHICH token plays WHICH role:\r\n * is a chart title an `h2` or an `h3`? are axis labels `xs` or `sm`? is the\r\n * canvas `surface` or transparent?\r\n *\r\n * Left unanswered, each screen answers it again. Observed in\r\n * `autorisation-admis-pour-conforme-fe` (Area 5): three bilan screens, five\r\n * chart definitions, the same five-line block of title / label / canvas styling\r\n * copied into each — agreeing only because they were copied from one another.\r\n * The next module starts from a blank chart and picks `h2`, and nothing in code\r\n * review can call that wrong, because the platform never said.\r\n *\r\n * So this is the answer, once: a chart title reads as a card title (`h3`,\r\n * semibold, full-strength ink), its labels as hints (`xs`, muted ink), and its\r\n * canvas is TRANSPARENT — the chart sits on whatever `Surface` holds it, and a\r\n * hard-coded white canvas is exactly what breaks a chart in dark mode.\r\n * ────────────────────────────────────────────────────────────────────────────────\r\n *\r\n * LIBRARY-AGNOSTIC BY CONSTRUCTION. Plain strings, no chart library imported,\r\n * no option shape assumed: Highcharts, Recharts, Chart.js and a hand-written\r\n * SVG all take these. A consumer maps them to its renderer's option names,\r\n * which is a binding — and a binding holding no design values is not a\r\n * duplication of this.\r\n *\r\n * FONT SIZES ARE STRINGS WITH UNITS, unlike `fontSize.*`, which are integers.\r\n * Chart libraries pass their style objects to SVG attributes rather than to\r\n * React's style prop, so they never get a unit appended for free — a bare `16`\r\n * is silently ignored by some renderers and read as `16px` by others.\r\n *\r\n * WHAT THIS DOES NOT MAKE ACCESSIBLE. Nothing here supplies the text\r\n * equivalent WCAG 1.1.1 requires of a chart, or the non-colour channel of\r\n * 1.4.1. See the `ChartFigure` pattern, which carries the caption, and the note\r\n * at the head of this file.\r\n */\r\nexport const chartChrome = Object.freeze({\r\n  /** Canvas fill. Transparent so the holding `Surface` shows through, light or dark. */\r\n  background: \"transparent\",\r\n  /** One family for every text in the chart — §02.2 UI stack. */\r\n  fontFamily: fontFamily.sans,\r\n  /** Chart title: reads as a card title (§02.2 `h3`). */\r\n  title: Object.freeze({\r\n    color: ink.fg,\r\n    fontSize: `${fontSize.h3}px`,\r\n    fontWeight: String(fontWeight.semibold),\r\n  }),\r\n  /** Axis labels, legend items, data labels drawn OUTSIDE a slice: hints. */\r\n  label: Object.freeze({\r\n    color: ink.fgMuted,\r\n    fontSize: `${fontSize.xs}px`,\r\n  }),\r\n});\r\n\r\nconst chart = {\r\n  chartCategorical,\r\n  chartColor,\r\n  chartColorOn,\r\n  chartChrome,\r\n  CHART_CATEGORICAL_CORE,\r\n};\r\nexport default chart;\r\n"],"mappings":";;;;;;;;;AA2FA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AA7FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACO,MAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,MAAM,CAACC,MAAM,CAAC,CAC5C,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS;AAAE;AACX,SAAS,CAAE;AAAA,CACH,CAAC;;AAEX;AACO,MAAMC,sBAAsB,GAAAH,OAAA,CAAAG,sBAAA,GAAG,CAAC;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,UAAUA,CAACC,KAAa,EAAU;EAChD,MAAMC,KAAK,GAAGP,gBAAgB,CAACQ,MAAM;EACrC,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACJ,KAAK,CAAC,IAAIA,KAAK,GAAG,CAAC,EAAE;IACxC,OAAON,gBAAgB,CAAC,CAAC,CAAC;EAC5B;EACA,MAAMW,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACP,KAAK,CAAC;EAC3B,IAAIK,CAAC,IAAI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","ignoreList":[]}