@tekkare/romulus 0.1.51 → 0.1.52

package/dist/runtime/components/ViewPill.vue

@@ -139,7 +139,7 @@ onBeforeUnmount(() => {
       :aria-expanded="open"
       @click="open = !open"
     >
-      <RmIcon name="BookmarkSimple" weight="fill" :size="16" class="rm-vpill__icon" />
+      <RmIcon name="BookmarkSimple" :size="16" class="rm-vpill__icon" />
       <span class="rm-vpill__key">{{ t.key }}</span>
       <span class="rm-vpill__value">{{ label }}</span>
       <span v-if="dirty" class="rm-vpill__dot" :title="t.unsaved" aria-hidden="true" />
@@ -194,5 +194,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:var(--color-secondary);flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;flex-shrink:0;height:8px;width:8px}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
+.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;flex-shrink:0;height:8px;width:8px}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
 </style>

package/dist/runtime/composables/useChartTheme.d.ts

@@ -1,6 +1,6 @@
 export declare function useChartTheme(): {
     night: import("vue").Ref<boolean, boolean>;
-    cvd: import("vue").Ref<boolean, boolean>;
+    cvdSafe: import("vue").Ref<boolean, boolean>;
     theme: import("vue").ComputedRef<import("../utils/chart").RmChartTheme>;
     palette: import("vue").ComputedRef<import("../utils/chart").RmPalette>;
     decal: import("vue").ComputedRef<boolean>;

package/dist/runtime/composables/useChartTheme.js

@@ -1,15 +1,16 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { rmChartTheme, rmPalette } from "../utils/chart.js";
-const CVD_CLASSES = ["cvd-deutera", "cvd-protan", "cvd-trita", "cvd-mono"];
 export function useChartTheme() {
   const night = ref(false);
-  const cvd = ref(false);
+  const cvdSafe = ref(false);
+  const decalOn = ref(false);
   let observer = null;
   function read() {
     if (typeof document === "undefined") return;
     const list = document.body.classList;
     night.value = list.contains("night");
-    cvd.value = CVD_CLASSES.some((c) => list.contains(c));
+    cvdSafe.value = list.contains("pal-cvd-safe");
+    decalOn.value = list.contains("chart-decal");
   }
   onMounted(() => {
     read();
@@ -21,7 +22,7 @@ export function useChartTheme() {
     observer = null;
   });
   const theme = computed(() => rmChartTheme(night.value));
-  const palette = computed(() => rmPalette(cvd.value ? "cvdSafe" : "default", night.value));
-  const decal = computed(() => cvd.value);
-  return { night, cvd, theme, palette, decal };
+  const palette = computed(() => rmPalette(cvdSafe.value ? "cvdSafe" : "default", night.value));
+  const decal = computed(() => decalOn.value || cvdSafe.value);
+  return { night, cvdSafe, theme, palette, decal };
 }

package/dist/runtime/composables/useRmCardActions.d.ts

@@ -0,0 +1,32 @@
+/**
+ * useRmCardActions - ce que fait le menu en haut a droite d'une carte.
+ *
+ * Le menu est le meme sur toutes les cartes du portail, donc son travail vit
+ * dans le paquet : deux apps ne peuvent pas sortir le PNG d'un graphique avec
+ * deux en-tetes differents, ni nommer leurs fichiers autrement. Les fichiers
+ * sont produits par les generateurs du panneau d'export (`useRmExport`), pas
+ * par une seconde chaine parallele : la carte n'est qu'un perimetre plus
+ * etroit que la page.
+ *
+ * La donnee, elle, est relue dans le DOM de la carte (`rmCardSheets`) faute
+ * d'une declaration de la page : c'est ce qui rend le menu utilisable sur les
+ * cartes deja ecrites, sans les rouvrir une par une.
+ */
+import type { RmExportSheet } from '../utils/export.js';
+/** Les actions qu'une carte propose. `link` copie, il ne telecharge pas. */
+export type RmCardAction = 'png' | 'svg' | 'csv' | 'xlsx' | 'link';
+export interface RmCardActionContext {
+    /** La carte visee. */
+    card: Element;
+    lang?: 'fr' | 'en';
+    /** Nom du fichier et de l'onglet. A defaut, le titre lu dans la carte. */
+    name?: string;
+    /** Lien copie par « Copier le lien direct ». A defaut, l'URL courante. */
+    link?: string;
+    /** Onglets fournis par la page, quand elle a mieux que le rendu a l'ecran. */
+    sheets?: RmExportSheet[];
+}
+export declare function useRmCardActions(): {
+    runCardAction: (action: RmCardAction, context: RmCardActionContext) => Promise<import("./useRmExport").RmExportResult>;
+    toggleCardFullscreen: (card: Element) => Promise<void>;
+};

package/dist/runtime/composables/useRmCardActions.js

@@ -0,0 +1,53 @@
+import { rmCardCharts, rmCardSheets, rmCardTitle } from "../utils/cardData.js";
+import { useRmExport } from "./useRmExport.js";
+const FILE_NAME_MAX = 60;
+function fileNameOf(label) {
+  const flat = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  if (!flat) return "export";
+  if (flat.length <= FILE_NAME_MAX) return flat;
+  const cut = flat.slice(0, FILE_NAME_MAX);
+  return cut.slice(0, cut.lastIndexOf("-") + 1 || FILE_NAME_MAX).replace(/-+$/, "");
+}
+function configOf(format, fileName) {
+  return {
+    format,
+    range: "all",
+    sections: ["table", "charts", "kpi", "sources"],
+    columns: [],
+    options: ["logo", "sources"],
+    fileName,
+    layout: "table",
+    schedule: "once",
+    frequency: "",
+    email: false
+  };
+}
+function absolute(link) {
+  if (!link) return void 0;
+  if (typeof window === "undefined") return link;
+  return new URL(link, window.location.href).href;
+}
+export function useRmCardActions() {
+  const { run } = useRmExport();
+  async function runCardAction(action, context) {
+    const { card, lang = "fr" } = context;
+    const title = context.name || rmCardTitle(card) || "Export";
+    const format = action === "link" ? "link" : action;
+    const sheets = action === "png" || action === "svg" ? [] : context.sheets?.length ? context.sheets : await rmCardSheets(card, title, lang);
+    return run(configOf(format, fileNameOf(title)), {
+      title,
+      sheets,
+      charts: rmCardCharts(card).map((el) => ({ title, el })),
+      permalink: absolute(context.link)
+    }, lang);
+  }
+  async function toggleCardFullscreen(card) {
+    if (typeof document === "undefined") return;
+    if (document.fullscreenElement) {
+      await document.exitFullscreen();
+      return;
+    }
+    await card.requestFullscreen?.();
+  }
+  return { runCardAction, toggleCardFullscreen };
+}

package/dist/runtime/composables/useRmDialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Comportement clavier commun aux surfaces bloquantes (modale, tiroir).
+ *
+ * La checklist d'accessibilite du design system demande trois choses d'une
+ * surface qui recouvre la page, et aucune ne s'obtient en CSS :
+ *
+ * 1. `Escape` la ferme. Sans ca, un utilisateur au clavier qui ouvre une
+ *    modale par erreur doit retrouver la croix a la souris.
+ * 2. Le focus entre dedans a l'ouverture et n'en sort plus au `Tab`. Sinon le
+ *    focus continue de parcourir la page derriere, invisible sous le voile :
+ *    l'utilisateur tabule dans le vide.
+ * 3. Le focus revient a l'element qui a ouvert la surface a la fermeture,
+ *    pour ne pas renvoyer au debut du document.
+ *
+ * `aria-modal="true"` dit aux lecteurs d'ecran d'ignorer le reste de la page ;
+ * il ne deplace pas le focus clavier, d'ou le piege ci-dessous.
+ */
+import { type Ref } from 'vue';
+export interface RmDialogOptions {
+    /** Surface ouverte. */
+    open: Ref<boolean>;
+    /** Racine de la surface, portee par un `ref` de template. */
+    surface: Ref<HTMLElement | null>;
+    /** Appele par `Escape`. */
+    close: () => void;
+}
+export declare function useRmDialog({ open, surface, close }: RmDialogOptions): void;

package/dist/runtime/composables/useRmDialog.js

@@ -0,0 +1,64 @@
+import { nextTick, onBeforeUnmount, watch } from "vue";
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function focusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+export function useRmDialog({ open, surface, close }) {
+  let opener = null;
+  function onKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const root = surface.value;
+    if (!root) return;
+    const items = focusables(root);
+    if (!items.length) {
+      event.preventDefault();
+      root.focus();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === root)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  function bind() {
+    document.addEventListener("keydown", onKeydown, true);
+  }
+  function unbind() {
+    document.removeEventListener("keydown", onKeydown, true);
+  }
+  watch(open, async (isOpen) => {
+    if (typeof document === "undefined") return;
+    if (isOpen) {
+      opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      bind();
+      await nextTick();
+      const root = surface.value;
+      if (!root) return;
+      const items = focusables(root);
+      (items[0] ?? root).focus();
+      return;
+    }
+    unbind();
+    if (opener?.isConnected) opener.focus();
+    opener = null;
+  });
+  onBeforeUnmount(unbind);
+}

package/dist/runtime/composables/useRmExport.js

@@ -87,8 +87,22 @@ async function raster(markup, width, height, scale = 2) {
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
   return canvas;
 }
+const PRINTABLE_SUBSTITUTES = [
+  [/€/g, "EUR"],
+  [/[’‘]/g, "'"],
+  [/[“”]/g, '"'],
+  [/[–—]/g, "-"],
+  [/…/g, "..."],
+  [/≥/g, ">="],
+  [/≤/g, "<="],
+  [/[  ]/g, " "]
+];
 function printable(text) {
-  return text.replace(/[^\u0000-\u00ff]/g, "").replace(/\s{2,}/g, " ").trim();
+  const substituted = PRINTABLE_SUBSTITUTES.reduce(
+    (out, [pattern, replacement]) => out.replace(pattern, replacement),
+    text
+  );
+  return substituted.replace(/[^\u0000-\u00ff]/g, "").replace(/\s{2,}/g, " ").trim();
 }
 function cardsOf(payload, config, lang) {
   if (payload.cards?.length) return payload.cards.slice(0, payload.cardLimit ?? 100);
@@ -355,17 +369,16 @@ export function useRmExport() {
       doc.setTextColor(...ink);
       doc.setFont("helvetica", "bold");
       doc.setFontSize(10);
-      doc.text(lang === "en" ? "Active filters" : "Filtres actifs", margin, y);
+      doc.text(lang === "en" ? "Reading this view" : "Lecture de la vue", margin, y);
       y += 5;
       doc.setFont("helvetica", "normal");
       doc.setFontSize(9);
       doc.setTextColor(...grey);
-      payload.filters.forEach((filter) => {
-        const lines = doc.splitTextToSize(printable(`${filter.label} : ${filter.value}`), inner);
-        doc.text(lines, margin, y);
-        y += lines.length * 4.5;
-      });
-      y += 4;
+      const applied = payload.filters.map((filter) => `${filter.label} = ${filter.value}`).join(" ; ");
+      const legend = lang === "en" ? `This report reproduces the page as it was displayed, with the following filters: ${applied}.` : `Ce rapport reprend la page telle qu'elle \xE9tait affich\xE9e, avec les filtres suivants : ${applied}.`;
+      const lines = doc.splitTextToSize(printable(legend), inner);
+      doc.text(lines, margin, y);
+      y += lines.length * 4.5 + 4;
     }
     const charts = config.sections.includes("charts") ? payload.charts ?? [] : [];
     for (const chart of charts) {
@@ -468,13 +481,13 @@ export function useRmExport() {
       }
     }
     if (config.sections.includes("table")) {
-      const MAX_COLUMNS = 8;
+      const MAX_COLUMNS = landscape ? 16 : 10;
       payload.sheets.forEach((sheet) => {
         const all = columnsOf(sheet, config.columns);
         const columns = all.slice(0, MAX_COLUMNS);
         const rows = rowsOf(sheet, payload.limit);
         if (!config.sections.includes("cards")) rowCount += rows.length;
-        doc.addPage("a4", "landscape");
+        doc.addPage();
         const wide = doc.internal.pageSize.getWidth() - margin * 2;
         doc.setTextColor(...ink);
         doc.setFont("helvetica", "bold");
@@ -496,7 +509,15 @@ export function useRmExport() {
           startY: margin + 10,
           head: [columns.map((column) => printable(column.column))],
           body: rows.map((row) => columns.map((column) => printable(cellText(column.value(row), lang)))),
-          styles: { fontSize: 6.5, cellPadding: 1.4, overflow: "linebreak", textColor: ink, minCellWidth: wide / columns.length / 2 },
+          // Passe huit colonnes, la police et les marges se resserrent : c'est
+          // ce qui fait tenir un suivi mensuel complet sans casser les mots.
+          styles: {
+            fontSize: columns.length > 8 ? 5.5 : 6.5,
+            cellPadding: columns.length > 8 ? 1 : 1.4,
+            overflow: "linebreak",
+            textColor: ink,
+            minCellWidth: wide / columns.length / 2
+          },
           headStyles: { fillColor: violet, textColor: [255, 255, 255], fontStyle: "bold", valign: "middle" },
           alternateRowStyles: { fillColor: [250, 250, 253] },
           margin: { left: margin, right: margin, top: margin, bottom: margin },

package/dist/runtime/composables/useTheme.d.ts

@@ -1,4 +1,5 @@
-export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'trita' | 'mono';
+export type RmCvdMode = 'none' | 'deutera' | 'protan' | 'tritan' | 'mono';
+export type RmChartPalette = 'default' | 'cvdSafe';
 export type RmTextScale = 'normal' | 'large' | 'xl';
 export declare function useRomulusTheme(): {
     night: Readonly<import("vue").Ref<boolean, boolean>>;
@@ -7,11 +8,15 @@ export declare function useRomulusTheme(): {
     compact: Readonly<import("vue").Ref<boolean, boolean>>;
     cvd: Readonly<import("vue").Ref<RmCvdMode, RmCvdMode>>;
     textScale: Readonly<import("vue").Ref<RmTextScale, RmTextScale>>;
+    chartPalette: Readonly<import("vue").Ref<RmChartPalette, RmChartPalette>>;
+    chartDecal: Readonly<import("vue").Ref<boolean, boolean>>;
     setNight: (value: boolean) => void;
     setHighContrast: (value: boolean) => void;
     setReduceMotion: (value: boolean) => void;
     setCompact: (value: boolean) => void;
     setCvd: (mode: RmCvdMode) => void;
     setTextScale: (scale: RmTextScale) => void;
+    setChartPalette: (palette: RmChartPalette) => void;
+    setChartDecal: (value: boolean) => void;
     reset: () => void;
 };

package/dist/runtime/composables/useTheme.js

@@ -3,13 +3,15 @@ import { rmWithoutTransitions } from "../utils/transitionGuard.js";
 const CVD_CLASSES = {
   deutera: "cvd-deutera",
   protan: "cvd-protan",
-  trita: "cvd-trita",
+  tritan: "cvd-tritan",
   mono: "cvd-mono"
 };
 const TEXT_CLASSES = {
   large: "text-large",
   xl: "text-xl"
 };
+const PALETTE_CLASS = "pal-cvd-safe";
+const DECAL_CLASS = "chart-decal";
 export function useRomulusTheme() {
   const night = ref(false);
   const highContrast = ref(false);
@@ -17,6 +19,8 @@ export function useRomulusTheme() {
   const compact = ref(false);
   const cvd = ref("none");
   const textScale = ref("normal");
+  const chartPalette = ref("default");
+  const chartDecal = ref(false);
   const apply = rmWithoutTransitions;
   const setNight = (value) => apply(() => {
     night.value = value;
@@ -46,6 +50,14 @@ export function useRomulusTheme() {
     Object.values(TEXT_CLASSES).forEach((c) => body.classList.remove(c));
     if (scale !== "normal") body.classList.add(TEXT_CLASSES[scale]);
   });
+  const setChartPalette = (palette) => apply(() => {
+    chartPalette.value = palette;
+    document.body.classList.toggle(PALETTE_CLASS, palette === "cvdSafe");
+  });
+  const setChartDecal = (value) => apply(() => {
+    chartDecal.value = value;
+    document.body.classList.toggle(DECAL_CLASS, value);
+  });
   const reset = () => apply(() => {
     const { body } = document;
     night.value = false;
@@ -54,11 +66,15 @@ export function useRomulusTheme() {
     compact.value = false;
     cvd.value = "none";
     textScale.value = "normal";
+    chartPalette.value = "default";
+    chartDecal.value = false;
     body.classList.remove(
       "night",
       "high-contrast",
       "reduce-motion",
       "density-compact",
+      PALETTE_CLASS,
+      DECAL_CLASS,
       ...Object.values(CVD_CLASSES),
       ...Object.values(TEXT_CLASSES)
     );
@@ -72,6 +88,8 @@ export function useRomulusTheme() {
     const found = Object.entries(CVD_CLASSES).find(([, c]) => list.contains(c));
     cvd.value = found ? found[0] : "none";
     textScale.value = list.contains("text-xl") ? "xl" : list.contains("text-large") ? "large" : "normal";
+    chartPalette.value = list.contains(PALETTE_CLASS) ? "cvdSafe" : "default";
+    chartDecal.value = list.contains(DECAL_CLASS);
   });
   return {
     night: readonly(night),
@@ -80,12 +98,16 @@ export function useRomulusTheme() {
     compact: readonly(compact),
     cvd: readonly(cvd),
     textScale: readonly(textScale),
+    chartPalette: readonly(chartPalette),
+    chartDecal: readonly(chartDecal),
     setNight,
     setHighContrast,
     setReduceMotion,
     setCompact,
     setCvd,
     setTextScale,
+    setChartPalette,
+    setChartDecal,
     reset
   };
 }

package/dist/runtime/plugins/a11yFilters.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/a11yFilters.client.js

@@ -0,0 +1,30 @@
+import { defineNuxtPlugin } from "#app";
+const ROOT_ID = "rm-a11y-filters";
+const FILTERS = [
+  ["a11y-deutera", "0.625 0.375 0 0 0  0.7 0.3 0 0 0  0 0.3 0.7 0 0  0 0 0 1 0"],
+  ["a11y-protan", "0.567 0.433 0 0 0  0.558 0.442 0 0 0  0 0.242 0.758 0 0  0 0 0 1 0"],
+  ["a11y-tritan", "0.95 0.05 0 0 0  0 0.433 0.567 0 0  0 0.475 0.525 0 0  0 0 0 1 0"],
+  ["a11y-mono", "0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"]
+];
+const SVG_NS = "http://www.w3.org/2000/svg";
+export default defineNuxtPlugin(() => {
+  if (document.getElementById(ROOT_ID)) return;
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("id", ROOT_ID);
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  svg.setAttribute("aria-hidden", "true");
+  svg.style.position = "absolute";
+  const defs = document.createElementNS(SVG_NS, "defs");
+  for (const [id, values] of FILTERS) {
+    const filter = document.createElementNS(SVG_NS, "filter");
+    filter.setAttribute("id", id);
+    const matrix = document.createElementNS(SVG_NS, "feColorMatrix");
+    matrix.setAttribute("type", "matrix");
+    matrix.setAttribute("values", values);
+    filter.appendChild(matrix);
+    defs.appendChild(filter);
+  }
+  svg.appendChild(defs);
+  document.body.appendChild(svg);
+});

package/dist/runtime/utils/cardData.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Ce qu'une carte porte, relu dans son DOM au moment ou l'utilisateur demande
+ * un export depuis son menu d'actions.
+ *
+ * Le menu vit sur toutes les cartes du portail (graphique, tableau, groupe de
+ * KPI, carte de resultat) et il n'y en a pas deux qui declarent leur donnee de
+ * la meme facon. Plutot que d'imposer a chaque page de redeclarer ce qu'elle
+ * affiche deja (et de laisser les deux diverger a la premiere retouche), on
+ * relit le rendu : une carte devient exportable sans une ligne dans la page.
+ *
+ * Une page qui a mieux a offrir (la donnee complete, les nombres bruts) passe
+ * ses propres onglets a `RmCardActions` via `sheets` ; ce module n'est que le
+ * defaut.
+ *
+ * Deux regles communes :
+ *
+ * - les valeurs d'un tableau sont prises telles qu'elles sont ecrites a
+ *   l'ecran, mise en forme comprise. Celles d'un graphique viennent de son
+ *   option ECharts, donc en nombres : c'est la seule source qui les porte
+ *   encore brutes ;
+ * - un graphe dessine dans une cellule (courbe de tendance d'une ligne) est
+ *   une decoration du tableau : il ne fait pas un export a lui seul.
+ */
+import type { RmExportSheet } from './export.js';
+/** La carte qui contient un noeud, quel que soit le composant qui la rend. */
+export declare function rmCardOf(el: Element | null): HTMLElement | null;
+/**
+ * Titre d'une carte. Le contexte (l'annee, le secteur) est repris avec lui :
+ * trois cartes de classement ne different que par lui, et deux fichiers nommes
+ * pareil ne se distinguent plus dans un dossier de telechargement.
+ */
+export declare function rmCardTitle(card: Element): string;
+/** Les graphes exportables d'une carte, vides tant que la donnee n'est pas rendue. */
+export declare function rmCardCharts(card: Element): HTMLElement[];
+/**
+ * Ce qu'une carte peut mettre dans un classeur ou un CSV, par ordre de
+ * fidelite : son tableau s'il en a un, sinon ses graphes, sinon ses chiffres
+ * cles, sinon ses champs. Un seul de ces registres est retenu : un tableau et
+ * le graphe qui le resume portent la meme donnee deux fois.
+ */
+export declare function rmCardSheets(card: Element, name: string, lang?: 'fr' | 'en'): Promise<RmExportSheet[]>;

package/dist/runtime/utils/cardData.js

@@ -0,0 +1,138 @@
+const CARD_SELECTOR = ".chart-card, .rm-table-card, .rm-rcard";
+const CHART_SELECTOR = ".rm-chart .echart";
+const WORDS = {
+  fr: { label: "Libell\xE9", value: "Valeur", series: "S\xE9rie", table: "Tableau", field: "Champ", chart: "Graphique", title: "Intitul\xE9", subtitle: "Compl\xE9ment", source: "Provenance" },
+  en: { label: "Label", value: "Value", series: "Series", table: "Table", field: "Field", chart: "Chart", title: "Name", subtitle: "Details", source: "Provenance" }
+};
+function cellText(el) {
+  return (el?.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+export function rmCardOf(el) {
+  return el?.closest(CARD_SELECTOR) ?? null;
+}
+export function rmCardTitle(card) {
+  const title = cellText(card.querySelector(".chart-card-title")) || cellText(card.querySelector(".rm-table-card__title")) || cellText(card.querySelector(".rm-rcard__title"));
+  if (!title) return "";
+  const context = cellText(card.querySelector(".chart-card-context"));
+  return context ? `${title} (${context})` : title;
+}
+export function rmCardCharts(card) {
+  return [...card.querySelectorAll(CHART_SELECTOR)].filter(
+    (holder) => holder.querySelector("svg") && !holder.closest("table")
+  );
+}
+function sheetOf(name, columns, rows) {
+  return {
+    name,
+    schema: columns.map((column, index) => ({
+      column,
+      value: (row) => row?.[index] ?? null
+    })),
+    data: rows
+  };
+}
+function tableSheets(card, name, lang) {
+  const t = WORDS[lang];
+  return [...card.querySelectorAll("table")].flatMap((table, index) => {
+    const head = [...table.querySelectorAll("thead th")].map((th) => cellText(th));
+    const rows = [...table.querySelectorAll("tbody tr")].map((tr) => [...tr.querySelectorAll("th, td")].map((cell) => cellText(cell))).filter((cells) => cells.some((cell) => cell !== ""));
+    if (!rows.length) return [];
+    const columns = head.length ? head : rows[0].map((_, position) => `${t.value} ${position + 1}`);
+    const sheetName = index === 0 ? name : `${name} (${t.table} ${index + 1})`;
+    return [sheetOf(sheetName, columns, rows)];
+  });
+}
+function pointValue(point) {
+  if (point === null || point === void 0) return null;
+  if (Array.isArray(point)) return point[point.length - 1] ?? null;
+  if (typeof point === "object") return point.value ?? null;
+  return point;
+}
+function pointName(point) {
+  if (point && typeof point === "object" && !Array.isArray(point)) {
+    return String(point.name ?? "");
+  }
+  if (Array.isArray(point)) return String(point[0] ?? "");
+  return "";
+}
+function axisCategories(option) {
+  const axes = [...option.xAxis ?? [], ...option.yAxis ?? []];
+  const category = axes.find((axis) => axis?.type === "category" && Array.isArray(axis.data) && axis.data.length);
+  return category ? category.data : null;
+}
+async function chartSheets(card, name, lang) {
+  const holders = rmCardCharts(card);
+  if (!holders.length) return [];
+  const t = WORDS[lang];
+  const echarts = await import("echarts");
+  return holders.flatMap((holder, index) => {
+    const instance = echarts.getInstanceByDom(holder);
+    if (!instance) return [];
+    const option = instance.getOption();
+    const series = (option.series ?? []).filter((entry) => Array.isArray(entry?.data));
+    if (!series.length) return [];
+    const sheetName = index === 0 ? name : `${name} (${t.chart} ${index + 1})`;
+    const categories = axisCategories(option);
+    if (categories) {
+      const columns = [t.label, ...series.map((entry, position) => String(entry.name || `${t.series} ${position + 1}`))];
+      const rows2 = categories.map((category, line) => [
+        category,
+        ...series.map((entry) => pointValue(entry.data[line]))
+      ]);
+      return [sheetOf(sheetName, columns, rows2)];
+    }
+    const flat = series[0];
+    const rows = flat.data.map((point) => [pointName(point), pointValue(point)]).filter((row) => row[0] !== "");
+    if (!rows.length) return [];
+    return [sheetOf(sheetName, [t.label, String(flat.name || t.value)], rows)];
+  });
+}
+function kpiSheets(card, name, lang) {
+  const t = WORDS[lang];
+  const rows = [...card.querySelectorAll(".rm-kpibar__item, .kpi-card")].map((item) => [
+    [
+      cellText(item.querySelector(".rm-kpibar__legend, .kpi-label")),
+      cellText(item.querySelector(".rm-kpibar__subtitle, .kpi-foot"))
+    ].filter(Boolean).join(", "),
+    cellText(item.querySelector(".rm-kpibar__value, .kpi-value"))
+  ]).filter((row) => row[1] !== "");
+  return rows.length ? [sheetOf(name, [t.label, t.value], rows)] : [];
+}
+function resultSheets(card, name, lang) {
+  const t = WORDS[lang];
+  const rows = [];
+  const push = (label, value) => {
+    if (value) rows.push([label, value]);
+  };
+  push(t.title, rmCardTitle(card));
+  push(t.subtitle, cellText(card.querySelector(".rm-rcard__subtitle")));
+  const count = cellText(card.querySelector(".rm-rcard__count-value"));
+  if (count) {
+    push(
+      cellText(card.querySelector(".rm-rcard__count-label")) || t.value,
+      [count, cellText(card.querySelector(".rm-rcard__count-extra"))].filter(Boolean).join(" \xB7 ")
+    );
+  }
+  card.querySelectorAll(".rm-rcard__meta > *").forEach((item) => {
+    const text = cellText(item);
+    const [head, ...rest] = text.split("\xB7");
+    if (rest.length) push(head.trim(), rest.join("\xB7").trim());
+    else push(t.field, text);
+  });
+  card.querySelectorAll(".rm-rcard__main p, .rm-rcard__main li").forEach((item) => {
+    if (item.closest(".rm-rcard__meta") || item.classList.contains("rm-rcard__more")) return;
+    push(t.field, cellText(item));
+  });
+  push(t.source, cellText(card.querySelector(".rm-rcard__footer")));
+  return rows.length ? [sheetOf(name, [t.field, t.value], rows)] : [];
+}
+export async function rmCardSheets(card, name, lang = "fr") {
+  const label = name || rmCardTitle(card) || WORDS[lang].table;
+  const tables = tableSheets(card, label, lang);
+  if (tables.length) return tables;
+  const charts = await chartSheets(card, label, lang);
+  if (charts.length) return charts;
+  const kpis = kpiSheets(card, label, lang);
+  if (kpis.length) return kpis;
+  return resultSheets(card, label, lang);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",