@tekkare/romulus 0.1.12 → 0.1.14

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.11",
+  "version": "0.1.13",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -21,6 +21,7 @@ const module = defineNuxtModule({
     if (options.baseStyles)
       nuxt.options.css.push(resolve(runtimeDir, "assets/styles/base.css"));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/components.css"));
+    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/chrome.css"));
     if (options.utilities)
       nuxt.options.css.push(resolve(runtimeDir, "assets/styles/utilities.css"));
     await addComponentsDir({
@@ -38,6 +39,10 @@ const module = defineNuxtModule({
         { rel: "stylesheet", href: fontsHref }
       );
     }
+    const phosphorHref = "https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css";
+    if (!nuxt.options.app.head.link.some((l) => l.href === phosphorHref)) {
+      nuxt.options.app.head.link.push({ rel: "stylesheet", href: phosphorHref });
+    }
   }
 });
 

package/dist/runtime/assets/styles/chrome.css

@@ -0,0 +1 @@
+body.lcollapsed{padding-left:var(--sidebar-collapsed-w)}.nav-item .icn i,.rpanel-item .icn i{font-size:16px}.strip-icon i,.topbar-toggle i{font-size:18px}.chev i,.chev-r i{font-size:11px}.topbar-toggle{align-items:center;border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:16px;height:32px;justify-content:center;width:32px}.topbar-toggle:hover{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-secondary)}.logo-mark{align-items:center;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:6px;box-shadow:0 2px 6px rgba(107,63,255,.25);color:var(--color-text-inverse);display:flex;flex-shrink:0;font-size:14px;height:28px;justify-content:center;width:28px}.logo-mark,.logo-text{font-family:var(--font-serif);font-weight:700}.logo-text{font-size:16px;line-height:1}.logo-sub{color:var(--text-muted);font-size:10px;letter-spacing:.05em;margin-top:2px;text-transform:uppercase}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border-default);bottom:0;display:flex;flex-direction:column;left:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;transition:width .24s cubic-bezier(.2,0,0,1);width:var(--sidebar-w);z-index:70}.sidebar-top{border-bottom:1px solid var(--border-default);flex-shrink:0;height:var(--topbar-h);justify-content:space-between;padding:0 14px}.sidebar-top,.sidebar-top .logo-block{align-items:center;display:flex;gap:8px}.sidebar-top .logo-block{min-width:0}body.lcollapsed .sidebar-top{justify-content:center;padding:0}body.lcollapsed .sidebar-top .logo-block{display:none}body.lcollapsed .sidebar-top .logo-mark{display:flex}.sidebar-search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:999px;display:flex;gap:10px;margin:10px 12px 4px;padding:7px 14px;transition:border-color .15s,background .15s}.sidebar-search:focus-within,.sidebar-search:hover{background:var(--bg-surface);border-color:var(--color-violet-pale)}.sidebar-search i{color:var(--text-muted);flex-shrink:0;font-size:14px}.sidebar-search input{background:transparent;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:13px;min-width:0;outline:none}.sidebar-search input::-moz-placeholder{color:var(--text-muted)}.sidebar-search input::placeholder{color:var(--text-muted)}.sidebar-search kbd{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:4px;color:var(--text-secondary);flex-shrink:0;font-family:inherit;font-size:10px;font-weight:600;padding:1px 5px}body.lcollapsed .sidebar-search{display:none}body.lcollapsed .sidebar{width:var(--sidebar-collapsed-w)}.nav-group{padding:4px 0}.nav-section-header{padding:14px 14px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nav-section-header .label,.nav-section-header span{color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.nav-section-header .chev{color:var(--text-muted);font-size:10px;transition:transform .2s}.nav-section.collapsed .chev{transform:rotate(-90deg)}.nav-section.collapsed .nav-items{display:none}.nav-item{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:10px;padding:7px 14px 7px 22px;transition:background .15s,color .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nav-item .icn{color:var(--text-muted);flex-shrink:0;text-align:center;width:16px}.nav-item .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}.nav-item .chev-r{color:var(--text-muted);font-size:10px;transition:transform .2s}.nav-item.has-children.open .chev-r{transform:rotate(90deg)}.nav-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.nav-item:hover .icn{color:var(--text-secondary)}.nav-item.active{background:linear-gradient(90deg,var(--color-violet-pale) 0,var(--bg-hover) 100%);color:var(--color-primary);font-weight:700;position:relative}.nav-item.active:before{background:var(--color-secondary);border-radius:0 4px 4px 0;bottom:5px;content:"";left:0;position:absolute;top:5px;width:4px}.nav-item.active .icn{color:var(--color-secondary)}.nav-subitems{background:var(--bg-surface-2);border-bottom:1px solid var(--border-soft);border-top:1px solid var(--border-soft);display:none;padding:2px 0 4px}.nav-item.has-children.open+.nav-subitems{display:block}.nav-subitem{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:12px;gap:8px;padding:6px 14px 6px 44px}.nav-subitem:hover{background:var(--bg-surface-3);color:var(--text-primary)}.nav-subitem.active{background:linear-gradient(90deg,var(--color-violet-pale) 0,var(--bg-hover) 100%);color:var(--color-primary);font-weight:700;position:relative}.nav-subitem.active:before{background:var(--color-secondary);border-radius:0 4px 4px 0;bottom:4px;content:"";left:0;position:absolute;top:4px;width:4px}.sidebar-footer{border-top:1px solid var(--border-default);display:flex;flex-direction:column;gap:4px;margin-top:auto;padding:10px 8px}.sb-user{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:10px 12px;transition:background .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sb-user:hover{background:var(--bg-surface-3)}.sb-user-avatar{align-items:center;background:linear-gradient(135deg,var(--color-secondary),var(--color-accent-teal));border-radius:50%;box-shadow:0 2px 6px rgba(107,63,255,.22);color:var(--color-text-inverse);display:flex;flex-shrink:0;font-family:var(--font-serif);font-size:13px;font-weight:700;height:36px;justify-content:center;width:36px}.sb-user-info{flex:1;min-width:0}.sb-user-name{color:var(--text-primary);font-size:13px;font-weight:600;line-height:1.25}.sb-user-name,.sb-user-org{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-user-org{color:var(--text-muted);font-size:11px;line-height:1.2;margin-top:2px}.sb-user-chev{color:var(--text-muted);flex-shrink:0;font-size:13px}.sb-actions{display:flex;gap:4px}.sb-actions .sb-lang,.sb-actions a{align-items:center;border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;flex:1;font-family:inherit;font-size:12px;font-weight:600;gap:5px;justify-content:center;padding:8px 10px;text-decoration:none;transition:background .15s,color .15s}.sb-actions .sb-lang:hover,.sb-actions a:hover{background:var(--bg-surface-3);color:var(--text-primary)}.sb-actions a.primary{color:var(--color-primary)}.sb-actions a.primary:hover{background:var(--bg-hover);color:var(--color-secondary)}.sb-actions i{font-size:13px}body.lcollapsed .sidebar .chev-r,body.lcollapsed .sidebar .lbl,body.lcollapsed .sidebar .nav-section-header,body.lcollapsed .sidebar-footer{display:none}body.lcollapsed .sidebar .nav-item.has-children.open+.nav-subitems,body.lcollapsed .sidebar .nav-subitems{display:none!important}body.lcollapsed .sidebar .nav-item.has-children.open .chev-r{transform:none}body.lcollapsed .sidebar .nav-group{border-top:1px solid var(--border-soft);padding:4px 0}body.lcollapsed .sidebar .nav-group:first-of-type{border-top:none}.nav-subitems.flyout,body.lcollapsed .sidebar .nav-item.has-children.open+.nav-subitems.flyout,body.lcollapsed .sidebar .nav-subitems.flyout{animation:flyout-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-left:none;border-radius:0 8px 8px 0;box-shadow:var(--shadow-lg);display:block!important;left:var(--sidebar-collapsed-w);min-width:220px;padding:8px 0;position:fixed;z-index:100}.nav-subitems.flyout:before{border-bottom:1px solid var(--border-soft);color:var(--text-muted);content:attr(data-parent-label);display:block;font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:4px;padding:6px 16px 8px;text-transform:uppercase}.nav-subitems.flyout .nav-subitem{font-size:13px;padding:8px 16px}body.lcollapsed .sidebar .nav-item{position:relative}body.lcollapsed .sidebar .nav-item[data-tip]:hover:after{background:var(--text-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);color:var(--color-text-inverse);content:attr(data-tip);font-size:12px;font-weight:500;left:var(--sidebar-collapsed-w);margin-left:6px;padding:5px 10px;pointer-events:none;position:fixed;top:var(--tip-top,0);white-space:nowrap;z-index:110}.rsidebar .strip-icon{position:relative}.rsidebar .strip-icon[data-tip]:hover:before{background:var(--text-primary);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);color:var(--color-text-inverse);content:attr(data-tip);font-size:12px;font-weight:500;margin-right:6px;padding:5px 10px;pointer-events:none;position:fixed;right:var(--rsidebar-collapsed-w);top:var(--tip-top,0);white-space:nowrap;z-index:110}body.ropen .rsidebar .strip-icon[data-tip]:hover:before{display:none}.rsidebar .strip-icon.has-flyout.show-flyout .rflyout{display:block}body.ropen .rsidebar .rflyout{display:none!important}body.lcollapsed .nav-item{justify-content:center;padding:10px 0}body.lcollapsed .nav-section-header{justify-content:center;padding:8px 0}.rsidebar{background:var(--bg-surface);border-left:1px solid var(--border-default);bottom:0;display:flex;flex-direction:column;overflow:hidden;position:fixed;right:0;top:0;width:var(--rsidebar-collapsed-w);z-index:70}.rstrip-top{align-items:center;border-bottom:1px solid var(--border-default);display:flex;flex-shrink:0;height:var(--topbar-h);justify-content:center}.rstrip-collapsed{align-items:stretch;gap:4px;padding:8px}.rstrip-collapsed,.strip-icon{display:flex;flex-direction:column}.strip-icon{align-items:center;border-radius:8px;color:var(--text-secondary);cursor:pointer;gap:5px;justify-content:center;padding:10px 4px;position:relative;transition:background .15s,color .15s}.strip-icon i{font-size:19px;transition:color .15s}.strip-icon .strip-label{color:inherit;font-size:10px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap}.strip-icon:hover{background:var(--bg-surface-3);color:var(--text-primary)}.strip-icon.active,.strip-icon:hover i{color:var(--color-secondary)}.strip-icon.active{background:var(--bg-hover)}.strip-icon.active i{color:var(--color-secondary)}.strip-icon .dot{background:var(--color-notification);border-radius:50%;box-shadow:0 0 0 2px var(--color-text-inverse);height:8px;position:absolute;right:14px;top:6px;width:8px}.strip-icon.is-live .dot{background:var(--color-success);box-shadow:0 0 0 2px var(--bg-surface)}.strip-icon.is-live .dot:after{animation:stripLivePulse 1.8s ease-out infinite;background:var(--color-success);border-radius:50%;content:"";inset:-2px;position:absolute}.strip-icon.is-live .strip-label{background:var(--color-success);border-radius:var(--radius-pill);color:var(--color-text-inverse);display:inline-block;font-weight:var(--weight-bold);letter-spacing:.04em;line-height:1.2;margin-top:2px;padding:2px var(--space-6);text-transform:uppercase}@media (prefers-reduced-motion:reduce){.strip-icon.is-live .dot:after{animation:none}}.strip-badge{align-items:center;background:var(--color-primary);border-radius:999px;box-shadow:0 0 0 2px var(--color-text-inverse);color:var(--color-text-inverse);display:flex;font-size:9px;font-variant-numeric:tabular-nums;font-weight:700;height:16px;justify-content:center;line-height:1;min-width:18px;padding:0 5px;position:absolute;right:8px;top:4px}.strip-divider{background:var(--bg-surface-3);margin:6px auto;width:70%}body.ropen .rpanel-open{display:block}.ptabs.export-toptabs{align-items:stretch;border-bottom:1px solid var(--border-default);gap:0;height:auto;margin:0 0 var(--space-20);padding:0}.ptabs.export-toptabs .ptab{align-items:center;display:inline-flex;font-size:var(--font-14);font-weight:var(--weight-semibold);gap:var(--space-6);padding:var(--space-12) var(--space-16)}.ptabs.export-toptabs .ptab i{font-size:var(--font-16)}.ptabs.export-toptabs .lib-tab-count{background:var(--bg-surface-3);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);min-width:18px;padding:0 var(--space-6);text-align:center}.ptabs.export-toptabs .ptab.active .lib-tab-count{background:var(--bg-hover);color:var(--color-secondary)}.ptabs.views-toptabs{align-items:stretch;border-bottom:1px solid var(--border-default);gap:0;height:auto;margin:0 0 var(--space-16);padding:0}.ptabs.views-toptabs .ptab{align-items:center;display:inline-flex;font-size:var(--font-14);font-weight:var(--weight-semibold);gap:var(--space-6);padding:var(--space-12) var(--space-16)}.ptabs.views-toptabs .ptab i{font-size:var(--font-16)}.ptabs.views-toptabs .lib-tab-count{background:var(--bg-surface-3);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);min-width:18px;padding:0 var(--space-6);text-align:center}.ptabs.views-toptabs .ptab.active .lib-tab-count{background:var(--bg-hover);color:var(--color-secondary)}.ptabs.alerts-toptabs{gap:var(--space-4);margin:0 0 var(--space-16);padding:0}.ptabs.alerts-toptabs .ptab{font-size:var(--font-13);padding:var(--space-8) var(--space-12)}.ptabs.alerts-toptabs .ptab i{font-size:var(--font-16)}.topbar{background:var(--bg-surface);border-bottom:1px solid var(--border-default);padding-top:28px;position:sticky;top:var(--topbar-merged-h);transition:padding-top .2s ease;z-index:31}.topbar.compact{padding-top:10px}.topbar.compact .pane-title{font-size:19px;margin-bottom:8px}.ptabs{align-items:flex-end;display:flex;gap:4px;height:var(--tabs-h);padding:0 32px}.ptab{border-bottom:3px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;padding:0 20px 12px;position:relative;transition:color .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ptab:hover{color:var(--text-primary)}.ptab.active{background:linear-gradient(180deg,transparent 30%,rgba(var(--brand-rgb),.06) 100%);border-bottom-color:var(--color-primary);border-radius:6px 6px 0 0;color:var(--color-primary);font-weight:700}.strip-icon--hub{display:none}.strip-divider{background:var(--border-default);height:1px;margin:var(--space-8) auto var(--space-4);width:60%}.topbar>*{margin-left:auto;margin-right:auto;max-width:var(--content-max-w);width:100%}body.lcollapsed .hint{left:calc(var(--sidebar-collapsed-w) + 16px)}body.ropen .hint{right:calc(var(--rsidebar-w) + 16px)}.mobile-hamburger{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;display:none;height:40px;justify-content:center;left:10px;position:fixed;top:10px;width:40px;z-index:260}.mobile-hamburger i{color:var(--text-primary);font-size:18px}.mobile-backdrop{background:rgba(0,0,0,.4);display:none;inset:0;position:fixed;z-index:240}body.lopen .mobile-backdrop{display:block}@media (max-width:767px){.mobile-hamburger{display:inline-flex}body.lopen .mobile-hamburger{display:none}.sidebar{box-shadow:4px 0 16px rgba(0,0,0,.15);transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,0,0,1);width:280px;z-index:250}body.lopen .sidebar{transform:translateX(0)}body.lcollapsed .sidebar{width:280px}#rDrawer,.rsidebar{display:none!important}.ptabs{flex-wrap:nowrap;overflow-x:auto;padding:0 14px;scrollbar-width:thin}.ptabs::-webkit-scrollbar{height:4px}.ptab{flex-shrink:0;white-space:nowrap}}body.rm-shell{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);margin:0;padding-left:var(--sidebar-w);padding-right:var(--rsidebar-collapsed-w);padding-top:var(--topbar-merged-h);transition:padding .24s cubic-bezier(.2,0,0,1)}body.rm-shell.lcollapsed{padding-left:var(--sidebar-collapsed-w)}body.rm-switching.rm-shell,body.theme-switching.rm-shell{transition:none!important}@media (max-width:767px){body.rm-shell,body.rm-shell.lcollapsed{padding-left:0;padding-right:0}}.nav-item,.nav-section-header,.ptab,.sb-actions a,.strip-icon,.topbar-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-shadow:none;color:inherit;font:inherit;margin:0;text-align:inherit;text-decoration:none}.topbar-toggle{background:var(--bg-surface);border:1px solid var(--border-default)}.nav-section-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;width:100%}.strip-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/dist/runtime/assets/styles/components.css

@@ -1 +1 @@
-.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}
+.grid-2{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.grid-2-1{display:grid;gap:20px;grid-template-columns:2fr 1fr}.pane-title{color:var(--text-primary);font-family:var(--font-serif);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 16px}.pane-sub{color:var(--text-muted);font-size:13px;line-height:1.55;margin:0 0 24px;max-width:78ch}.chart-section{margin-inline:auto;max-width:var(--content-max-w,1440px);padding:0 0 40px;width:100%}.section-label{align-items:center;color:var(--text-secondary);display:flex;font-size:11px;font-weight:700;gap:8px;letter-spacing:.12em;margin:40px 0 18px;text-transform:uppercase}body.text-large .pane-title{font-size:38px}body.text-xl .pane-title{font-size:46px}body.text-large .section-label{font-size:13px}body.text-xl .section-label{font-size:14px}.chart-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s}.chart-card:hover{border-color:var(--color-violet-pale);box-shadow:0 6px 16px rgba(107,63,255,.1),0 1px 3px rgba(30,41,59,.04)}.chart-card-head{padding:22px 64px 14px 24px;position:relative}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 5px}.chart-card-context{color:var(--text-muted);font-size:12px;line-height:1.55;margin:0}.chart-card-actions{position:absolute;right:12px;top:12px}.cc-export{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .15s,color .15s,border-color .15s;width:28px}.cc-export:hover{color:var(--color-secondary)}.cc-export:hover,.chart-card-actions.open .cc-export{background:var(--bg-hover);border-color:var(--color-violet-pale)}.chart-card-actions.open .cc-export{color:var(--color-primary)}.cc-menu{animation:cc-menu-in .12s cubic-bezier(.2,0,0,1);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);display:none;min-width:200px;padding:6px 0;position:absolute;right:0;top:34px;z-index:var(--z-modal)}.chart-card-actions.open .cc-menu{display:block}.cc-menu-section{color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;padding:8px 14px 4px;text-transform:uppercase}.cc-menu-item{align-items:center;background:none;border:0;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;gap:10px;padding:7px 14px;text-align:left;width:100%}.cc-menu-item i{color:var(--text-muted);font-size:14px}.cc-menu-item:hover{background:var(--bg-surface-3);color:var(--text-primary)}.cc-menu-item:hover i{color:var(--text-secondary)}.cc-menu-divider{background:var(--bg-surface-3);height:1px;margin:4px 0}@keyframes cc-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.chart-card-body{flex:1;padding:4px 12px 8px}.chart-card-foot{align-items:center;background:var(--bg-surface-2);border-radius:0 0 10px 10px;border-top:1px solid var(--border-soft);color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 24px}.chart-card-foot .src{align-items:center;display:flex;gap:4px}.chart-card-foot .src b{color:var(--text-secondary);font-weight:600}.chart-card-foot .dot{background:var(--border-default);border-radius:50%;height:3px;width:3px}.chart-card-foot .updated{color:var(--text-secondary);font-weight:500}.kpi-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 2px 8px rgba(30,41,59,.06);padding:16px 18px}.kpi-label{color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.1em;margin:0 0 6px;text-transform:uppercase}.kpi-value{color:var(--color-primary);font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1;margin:0}.kpi-value.healthcare{color:var(--color-healthcare)}.kpi-value.discovery{color:var(--color-discovery)}.kpi-value.pharma{color:var(--color-pharma)}.kpi-value.databank{color:var(--color-databank)}.kpi-trend{align-items:center;display:inline-flex;font-size:12px;font-weight:600;gap:4px;margin-top:6px}.kpi-trend i{font-size:11px}.kpi-trend--up{color:var(--color-success)}.kpi-trend--down{color:var(--color-danger)}.kpi-foot,.kpi-trend--flat{color:var(--text-muted)}.kpi-foot{font-size:11px;margin-top:4px}.badge{border-radius:4px;display:inline-block;font-size:10px;font-weight:600;padding:2px 8px}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}.badge-error{background:var(--color-danger-bg);color:var(--color-danger)}.badge-info{background:var(--bg-hover);color:var(--color-primary)}.badge-grey{background:var(--bg-surface-3);color:var(--text-secondary)}table.tk{border-collapse:collapse;font-size:13px;width:100%}.sr-only,table.tk>caption.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}table.tk caption{caption-side:top;color:var(--text-primary);font-size:var(--font-13);font-weight:var(--weight-bold);padding:0 0 var(--space-8);text-align:left}table.tk th{background:var(--bg-surface-2);border-bottom:1px solid var(--border-default);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.08em;padding:12px 14px;text-align:left;text-transform:uppercase}table.tk tbody th[scope=row]{background:transparent;font-size:var(--font-13);font-weight:var(--weight-bold);letter-spacing:0;text-transform:none}table.tk tbody th[scope=row],table.tk td{border-bottom:1px solid var(--border-soft);color:var(--text-primary)}table.tk td{padding:12px 14px}table.tk tbody tr:nth-child(2n) td,table.tk tbody tr:nth-child(2n) th[scope=row]{background:var(--bg-surface-2)}table.tk tbody tr:hover td,table.tk tbody tr:hover th[scope=row]{background:var(--bg-hover)}table.tk th[aria-sort]{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}table.tk th[aria-sort]:hover{color:var(--text-primary)}.tk-wrap{overflow-x:auto}.tk-num{font-variant-numeric:tabular-nums;text-align:right}.nav-group{display:flex;flex-direction:column}.nav-group-header{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:11px;font-weight:700;gap:8px;letter-spacing:.08em;padding:8px 12px;text-align:left;text-transform:uppercase;transition:color var(--duration-fast) var(--ease-out);width:100%}.nav-group-header:hover{color:var(--text-secondary)}.nav-group-header .caret{display:inline-flex;margin-left:auto;transition:transform var(--duration-fast) var(--ease-out)}.nav-group[data-open=true]>.nav-group-header{color:var(--color-primary)}.nav-group[data-open=true]>.nav-group-header .caret{transform:rotate(180deg)}.nav-group-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.cc-export:focus-visible,.cc-menu-item:focus-visible,.chart-card :focus-visible,.nav-group-header:focus-visible,table.tk th[aria-sort]:focus-visible{box-shadow:var(--shadow-focus);outline:2px solid var(--color-secondary);outline-offset:2px}.cc-menu-item,.nav-group-header{min-height:40px}body.text-large .kpi-label{font-size:13px}body.text-large .kpi-value{font-size:34px}body.text-large .kpi-trend{font-size:14px}body.text-large .kpi-foot{font-size:13px}body.text-large .chart-card-title{font-size:17px}body.text-large .chart-card-context{font-size:14px}body.text-large .chart-card-foot{font-size:12px}body.text-large .badge{font-size:12px;padding:3px 9px}body.text-large table.tk{font-size:15px}body.text-large table.tk th{font-size:13px}body.text-xl .kpi-label{font-size:14px}body.text-xl .kpi-value{font-size:40px}body.text-xl .kpi-trend{font-size:16px}body.text-xl .kpi-foot{font-size:14px}body.text-xl .chart-card-title{font-size:20px}body.text-xl .chart-card-context{font-size:16px}body.text-xl .chart-card-foot{font-size:14px}body.text-xl .badge{font-size:14px;padding:3px 10px}body.text-xl table.tk{font-size:16px}body.text-xl table.tk th{font-size:14px}body.high-contrast .cc-export,body.high-contrast .cc-menu,body.high-contrast .chart-card,body.high-contrast .kpi-card{border-width:2px}body.high-contrast .chart-card:hover{border-color:var(--border-default)}body.rm-switching,body.rm-switching *,body.rm-switching :after,body.rm-switching :before,body.theme-switching,body.theme-switching *,body.theme-switching :after,body.theme-switching :before{transition:none!important}body.high-contrast *{box-shadow:none!important}

package/dist/runtime/assets/styles/tokens.css

@@ -1 +1 @@
-:root{--sidebar-w:220px;--sidebar-collapsed-w:56px;--rsidebar-w:280px;--rsidebar-collapsed-w:76px;--topbar-h:56px;--tabs-h:46px;--analysis-header-h:124px;--sourcebar-h:38px;--filterbar-h:56px;--color-primary:#2100ad;--color-primary-hover:#1a0088;--color-secondary:#6b3fff;--color-accent-soft:#b485ff;--color-violet-pale:#d6ccff;--color-healthcare:#4164ee;--color-discovery:#07816f;--color-pharma:#f7520e;--color-databank:#e04380;--color-healthcare-active:#3451d4;--color-discovery-active:#066b5c;--color-pharma-active:#d9470c;--color-databank-active:#c73a6f;--color-pharma-soft:#ff7942;--healthcare-rgb:65,100,238;--discovery-rgb:7,129,111;--pharma-rgb:247,82,14;--databank-rgb:224,67,128;--surface-rgb:255,255,255;--shadow-rgb:30,41,59;--color-accent-teal:#00d4a8;--color-notification:#e59;--color-text-inverse:#fff;--color-success:#16a34a;--color-success-bg:#dcfce7;--color-warning:#d97706;--color-warning-bg:#fef3c7;--color-danger:#dc2626;--color-danger-bg:#fee2e2;--color-info:#4164ee;--color-info-bg:#dbeafe;--bg-app:#eef1f5;--bg-surface:#fff;--bg-surface-2:#fbfbfd;--bg-surface-3:#f5f5f9;--bg-hover:#eef1fe;--border-default:#dbdef0;--border-soft:#f0f1f7;--text-primary:#1e293b;--text-secondary:#525670;--text-muted:#878ca6;--brand-rgb:33,0,173;--chart-cat-1:#2100ad;--chart-cat-2:#00a38e;--chart-cat-3:#e67e22;--chart-cat-4:#d63384;--chart-cat-5:#4164ee;--chart-cat-6:#16a34a;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:999px;--font-10:10px;--font-11:11px;--font-12:12px;--font-13:13px;--font-14:14px;--font-16:16px;--font-18:18px;--font-22:22px;--font-24:24px;--font-32:32px;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--font-serif:"Caudex",Georgia,serif;--font-sans:"Figtree",system-ui,sans-serif;--font-mono:"SF Mono",Menlo,monospace;--shadow-xs:0 1px 2px rgba(30,41,59,.04);--shadow-sm:0 2px 6px rgba(30,41,59,.06),0 1px 2px rgba(30,41,59,.03);--shadow-md:0 4px 12px rgba(30,41,59,.06),0 1px 3px rgba(30,41,59,.04);--shadow-lg:0 8px 24px rgba(30,41,59,.12);--shadow-focus:0 0 0 3px rgba(107,63,255,.14);--duration-instant:100ms;--duration-fast:150ms;--duration-base:240ms;--duration-slow:400ms;--duration-slowest:600ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.5,1.6,.4,1);--z-base:1;--z-sticky:20;--z-header:30;--z-drawer:40;--z-modal:50;--z-toast:60;--z-help:70}body.night{--color-primary:#9b7cff;--color-secondary:#b485ff;--color-accent-soft:#d6ccff;--color-healthcare:#7aa0ff;--color-discovery:#2ecc71;--color-pharma:#ff8c00;--color-databank:#f472b6;--color-healthcare-active:#4164ee;--color-discovery-active:#07816f;--color-pharma-active:#f7520e;--color-databank-active:#e04380;--healthcare-rgb:122,160,255;--discovery-rgb:46,204,113;--pharma-rgb:255,140,0;--databank-rgb:244,114,182;--surface-rgb:26,26,36;--shadow-rgb:0,0,0;--bg-app:#0e0e14;--bg-surface:#1a1a24;--bg-surface-2:#232330;--bg-surface-3:#2a2a38;--bg-hover:#2d2a42;--border-default:#45455c;--border-soft:#32323f;--text-primary:#f5f6fa;--text-secondary:#cfd3e5;--text-muted:#8a90a8;--brand-rgb:155,124,255;--color-success:#6fe8c5;--color-success-bg:rgba(0,212,168,.18);--color-warning:#fbbf24;--color-warning-bg:rgba(245,158,11,.18);--color-danger:#fca5a5;--color-danger-bg:rgba(239,68,68,.18);--color-info:#7aa0ff;--color-info-bg:rgba(65,100,238,.18);--chart-cat-1:#9b7cff;--chart-cat-2:#6fe8c5;--chart-cat-3:#fbbf24;--chart-cat-4:#f472b6;--chart-cat-5:#7b9ef5;--chart-cat-6:#bef264;background:var(--bg-app);color:var(--text-primary)}body.high-contrast:not(.night){--text-primary:#000;--text-secondary:#1a1a24;--text-muted:#2f2f40;--border-default:#000;--border-soft:#525670;--bg-app:#fff;--bg-surface:#fff;--bg-surface-2:#fff;--bg-surface-3:#f0f1f7;--bg-hover:#ffe56b;--color-primary:#1100a0;--color-primary-hover:#0a0070;--color-secondary:#5028d8;--color-success:#006b2c;--color-warning:#8c4500;--color-danger:#a60000;--color-info:#0040c8}body.night.high-contrast{--text-primary:#fff;--text-secondary:#f5f6fa;--text-muted:#cfd3e5;--border-default:#fff;--border-soft:#b8bcd0;--bg-app:#000;--bg-surface:#000;--bg-surface-2:#000;--bg-surface-3:#000;--bg-hover:#ffe56b;--color-primary:#d6ccff;--color-primary-hover:#fff;--color-secondary:#e5daff;--color-accent-soft:#fff;--color-success:#6fe8c5;--color-warning:#fbbf24;--color-danger:#fca5a5;--color-info:#7aa0ff;--brand-rgb:214,204,255}body.reduce-motion *,body.reduce-motion :after,body.reduce-motion :before{animation:none!important;scroll-behavior:auto!important;transition:none!important}:root{--r-color-primary-50:#f0f4ff;--r-color-primary-100:#dce5fd;--r-color-primary-200:#b9cbfb;--r-color-primary-300:#96b0f9;--r-color-primary-400:#7395f5;--r-color-primary-500:#5a7ef2;--r-color-primary-600:var(--color-healthcare);--r-color-primary-700:#3451d4;--r-color-primary-800:#283fb0;--r-color-primary-900:#1c2d8a;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:var(--color-success);--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:var(--color-warning);--r-color-danger-500:#ef4444;--r-color-danger-600:var(--color-danger);--r-color-white:#fff;--r-color-black:#000;--r-font-family:var(--font-sans);--r-font-mono:var(--font-mono);--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:var(--weight-normal);--r-font-weight-medium:var(--weight-medium);--r-font-weight-semibold:var(--weight-semibold);--r-font-weight-bold:var(--weight-bold);--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:var(--space-4);--r-space-2:var(--space-8);--r-space-3:var(--space-12);--r-space-4:var(--space-16);--r-space-5:var(--space-20);--r-space-6:var(--space-24);--r-space-8:var(--space-32);--r-space-10:var(--space-40);--r-space-12:var(--space-48);--r-radius-none:0;--r-radius-sm:var(--radius-sm);--r-radius-md:var(--radius-md);--r-radius-lg:var(--radius-lg);--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:var(--radius-pill);--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:var(--duration-fast) var(--ease-in-out);--r-transition-base:200ms var(--ease-in-out);--r-transition-slow:var(--duration-slow) var(--ease-in-out)}
+:root{--sidebar-w:220px;--sidebar-collapsed-w:56px;--rsidebar-w:280px;--rsidebar-collapsed-w:76px;--topbar-h:56px;--topbar-merged-h:0px;--tabs-h:46px;--analysis-header-h:124px;--sourcebar-h:38px;--filterbar-h:56px;--color-primary:#2100ad;--color-primary-hover:#1a0088;--color-secondary:#6b3fff;--color-accent-soft:#b485ff;--color-violet-pale:#d6ccff;--color-healthcare:#4164ee;--color-discovery:#07816f;--color-pharma:#f7520e;--color-databank:#e04380;--color-healthcare-active:#3451d4;--color-discovery-active:#066b5c;--color-pharma-active:#d9470c;--color-databank-active:#c73a6f;--color-pharma-soft:#ff7942;--healthcare-rgb:65,100,238;--discovery-rgb:7,129,111;--pharma-rgb:247,82,14;--databank-rgb:224,67,128;--surface-rgb:255,255,255;--shadow-rgb:30,41,59;--color-accent-teal:#00d4a8;--color-notification:#e59;--color-text-inverse:#fff;--color-success:#16a34a;--color-success-bg:#dcfce7;--color-warning:#d97706;--color-warning-bg:#fef3c7;--color-danger:#dc2626;--color-danger-bg:#fee2e2;--color-info:#4164ee;--color-info-bg:#dbeafe;--bg-app:#eef1f5;--bg-surface:#fff;--bg-surface-2:#fbfbfd;--bg-surface-3:#f5f5f9;--bg-hover:#eef1fe;--border-default:#dbdef0;--border-soft:#f0f1f7;--text-primary:#1e293b;--text-secondary:#525670;--text-muted:#878ca6;--brand-rgb:33,0,173;--chart-cat-1:#2100ad;--chart-cat-2:#00a38e;--chart-cat-3:#e67e22;--chart-cat-4:#d63384;--chart-cat-5:#4164ee;--chart-cat-6:#16a34a;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-pill:999px;--font-10:10px;--font-11:11px;--font-12:12px;--font-13:13px;--font-14:14px;--font-16:16px;--font-18:18px;--font-22:22px;--font-24:24px;--font-32:32px;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--font-serif:"Caudex",Georgia,serif;--font-sans:"Figtree",system-ui,sans-serif;--font-mono:"SF Mono",Menlo,monospace;--shadow-xs:0 1px 2px rgba(30,41,59,.04);--shadow-sm:0 2px 6px rgba(30,41,59,.06),0 1px 2px rgba(30,41,59,.03);--shadow-md:0 4px 12px rgba(30,41,59,.06),0 1px 3px rgba(30,41,59,.04);--shadow-lg:0 8px 24px rgba(30,41,59,.12);--shadow-focus:0 0 0 3px rgba(107,63,255,.14);--duration-instant:100ms;--duration-fast:150ms;--duration-base:240ms;--duration-slow:400ms;--duration-slowest:600ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.5,1.6,.4,1);--z-base:1;--z-sticky:20;--z-header:30;--z-drawer:40;--z-modal:50;--z-toast:60;--z-help:70}body.night{--color-primary:#9b7cff;--color-secondary:#b485ff;--color-accent-soft:#d6ccff;--color-healthcare:#7aa0ff;--color-discovery:#2ecc71;--color-pharma:#ff8c00;--color-databank:#f472b6;--color-healthcare-active:#4164ee;--color-discovery-active:#07816f;--color-pharma-active:#f7520e;--color-databank-active:#e04380;--healthcare-rgb:122,160,255;--discovery-rgb:46,204,113;--pharma-rgb:255,140,0;--databank-rgb:244,114,182;--surface-rgb:26,26,36;--shadow-rgb:0,0,0;--bg-app:#0e0e14;--bg-surface:#1a1a24;--bg-surface-2:#232330;--bg-surface-3:#2a2a38;--bg-hover:#2d2a42;--border-default:#45455c;--border-soft:#32323f;--text-primary:#f5f6fa;--text-secondary:#cfd3e5;--text-muted:#8a90a8;--brand-rgb:155,124,255;--color-success:#6fe8c5;--color-success-bg:rgba(0,212,168,.18);--color-warning:#fbbf24;--color-warning-bg:rgba(245,158,11,.18);--color-danger:#fca5a5;--color-danger-bg:rgba(239,68,68,.18);--color-info:#7aa0ff;--color-info-bg:rgba(65,100,238,.18);--chart-cat-1:#9b7cff;--chart-cat-2:#6fe8c5;--chart-cat-3:#fbbf24;--chart-cat-4:#f472b6;--chart-cat-5:#7b9ef5;--chart-cat-6:#bef264;background:var(--bg-app);color:var(--text-primary)}body.high-contrast:not(.night){--text-primary:#000;--text-secondary:#1a1a24;--text-muted:#2f2f40;--border-default:#000;--border-soft:#525670;--bg-app:#fff;--bg-surface:#fff;--bg-surface-2:#fff;--bg-surface-3:#f0f1f7;--bg-hover:#ffe56b;--color-primary:#1100a0;--color-primary-hover:#0a0070;--color-secondary:#5028d8;--color-success:#006b2c;--color-warning:#8c4500;--color-danger:#a60000;--color-info:#0040c8}body.night.high-contrast{--text-primary:#fff;--text-secondary:#f5f6fa;--text-muted:#cfd3e5;--border-default:#fff;--border-soft:#b8bcd0;--bg-app:#000;--bg-surface:#000;--bg-surface-2:#000;--bg-surface-3:#000;--bg-hover:#ffe56b;--color-primary:#d6ccff;--color-primary-hover:#fff;--color-secondary:#e5daff;--color-accent-soft:#fff;--color-success:#6fe8c5;--color-warning:#fbbf24;--color-danger:#fca5a5;--color-info:#7aa0ff;--brand-rgb:214,204,255}body.reduce-motion *,body.reduce-motion :after,body.reduce-motion :before{animation:none!important;scroll-behavior:auto!important;transition:none!important}:root{--r-color-primary-50:#f0f4ff;--r-color-primary-100:#dce5fd;--r-color-primary-200:#b9cbfb;--r-color-primary-300:#96b0f9;--r-color-primary-400:#7395f5;--r-color-primary-500:#5a7ef2;--r-color-primary-600:var(--color-healthcare);--r-color-primary-700:#3451d4;--r-color-primary-800:#283fb0;--r-color-primary-900:#1c2d8a;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:var(--color-success);--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:var(--color-warning);--r-color-danger-500:#ef4444;--r-color-danger-600:var(--color-danger);--r-color-white:#fff;--r-color-black:#000;--r-font-family:var(--font-sans);--r-font-mono:var(--font-mono);--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:var(--weight-normal);--r-font-weight-medium:var(--weight-medium);--r-font-weight-semibold:var(--weight-semibold);--r-font-weight-bold:var(--weight-bold);--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:var(--space-4);--r-space-2:var(--space-8);--r-space-3:var(--space-12);--r-space-4:var(--space-16);--r-space-5:var(--space-20);--r-space-6:var(--space-24);--r-space-8:var(--space-32);--r-space-10:var(--space-40);--r-space-12:var(--space-48);--r-radius-none:0;--r-radius-sm:var(--radius-sm);--r-radius-md:var(--radius-md);--r-radius-lg:var(--radius-lg);--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:var(--radius-pill);--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:var(--duration-fast) var(--ease-in-out);--r-transition-base:200ms var(--ease-in-out);--r-transition-slow:var(--duration-slow) var(--ease-in-out)}

package/dist/runtime/components/AiChat.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+export interface AiChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  timestamp?: Date
+}
+
+export interface AiChatSuggestion {
+  icon?: string
+  label: string
+  message: string
+}
+
+export interface RmAiChatProps {
+  /** Whether the chat drawer is open */
+  modelValue: boolean
+  /** Chat title displayed in the header */
+  title?: string
+  /** Emoji or text icon for the header */
+  icon?: string
+  /** Input placeholder text */
+  placeholder?: string
+  /** Suggestion buttons displayed on empty state */
+  suggestions?: AiChatSuggestion[]
+  /** Chat messages */
+  messages?: AiChatMessage[]
+  /** Whether the assistant is currently responding */
+  loading?: boolean
+  /** Loading indicator text */
+  loadingText?: string
+  /** Welcome message displayed when no messages */
+  welcomeMessage?: string
+  /** Drawer size */
+  drawerSize?: 'sm' | 'md' | 'lg' | 'xl'
+  /** Show the floating trigger button */
+  showTrigger?: boolean
+}
+
+const props = withDefaults(defineProps<RmAiChatProps>(), {
+  title: 'AI Assistant',
+  icon: '',
+  placeholder: 'Type a message...',
+  suggestions: () => [],
+  messages: () => [],
+  loading: false,
+  loadingText: 'Thinking...',
+  welcomeMessage: 'Hello! How can I help you today?',
+  drawerSize: 'md',
+  showTrigger: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'send': [message: string]
+  'clear': []
+}>()
+
+const inputValue = ref('')
+const messagesContainer = ref<HTMLElement | null>(null)
+
+function open() {
+  emit('update:modelValue', true)
+}
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function toggle() {
+  emit('update:modelValue', !props.modelValue)
+}
+
+function handleSubmit() {
+  if (!inputValue.value.trim() || props.loading) return
+  const message = inputValue.value
+  inputValue.value = ''
+  emit('send', message)
+  scrollToBottom()
+}
+
+function handleSuggestion(suggestion: AiChatSuggestion) {
+  emit('send', suggestion.message)
+  scrollToBottom()
+}
+
+function handleClear() {
+  emit('clear')
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+    }
+  })
+}
+
+// Scroll to bottom when drawer opens or new messages arrive
+watch(() => props.modelValue, (open) => {
+  if (open) scrollToBottom()
+})
+
+watch(() => props.messages.length, () => {
+  scrollToBottom()
+})
+
+// Simple markdown renderer
+function renderMarkdown(text: string): string {
+  if (!text) return ''
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/^(\d+)\.\s+(.+)$/gm, '<li class="rm-ai-chat-numbered">$2</li>')
+    .replace(/^[-*]\s+(.+)$/gm, '<li class="rm-ai-chat-bullet">$1</li>')
+    .replace(/((?:<li class="rm-ai-chat-numbered">.*?<\/li>)+)/g, '<ol>$1</ol>')
+    .replace(/((?:<li class="rm-ai-chat-bullet">.*?<\/li>)+)/g, '<ul>$1</ul>')
+    .replace(/\n/g, '<br>')
+}
+
+// Close on Escape
+onMounted(() => {
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.modelValue) {
+      close()
+    }
+  }
+  document.addEventListener('keydown', handleEscape)
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleEscape)
+  })
+})
+
+defineExpose({ open, close, toggle, scrollToBottom })
+</script>
+
+<template>
+  <!-- Floating trigger button -->
+  <button
+    v-if="showTrigger"
+    class="rm-ai-chat-trigger"
+    :class="{ 'rm-ai-chat-trigger--open': modelValue }"
+    @click="toggle"
+  >
+    <slot name="trigger">
+      <RmIcon name="Robot" :size="24" weight="duotone" />
+    </slot>
+  </button>
+
+  <!-- Chat Drawer -->
+  <RmDrawer
+    :model-value="modelValue"
+    :size="drawerSize"
+    side="right"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <div class="rm-ai-chat-header">
+        <span v-if="icon" class="rm-ai-chat-header__icon">{{ icon }}</span>
+        <RmIcon v-else name="Robot" :size="22" weight="duotone" class="rm-ai-chat-header__robot" />
+        <h3 class="rm-ai-chat-header__title">{{ title }}</h3>
+      </div>
+      <button class="rm-ai-chat-header__clear" @click="handleClear" title="Clear chat">
+        <RmIcon name="Trash" :size="16" />
+      </button>
+    </template>
+
+    <div class="rm-ai-chat-body">
+      <div ref="messagesContainer" class="rm-ai-chat-messages">
+        <!-- Welcome state -->
+        <div v-if="messages.length === 0" class="rm-ai-chat-welcome">
+          <div class="rm-ai-chat-message rm-ai-chat-message--assistant rm-ai-chat-message--welcome">
+            <div class="rm-ai-chat-avatar rm-ai-chat-avatar--assistant">
+              <RmIcon name="Robot" :size="18" weight="duotone" />
+            </div>
+            <div class="rm-ai-chat-bubble rm-ai-chat-bubble--assistant rm-ai-chat-bubble--welcome">
+              <slot name="welcome">
+                {{ welcomeMessage }}
+              </slot>
+            </div>
+          </div>
+
+          <div v-if="suggestions.length" class="rm-ai-chat-suggestions">
+            <p class="rm-ai-chat-suggestions__hint">Try asking:</p>
+            <button
+              v-for="(suggestion, i) in suggestions"
+              :key="i"
+              class="rm-ai-chat-suggestion"
+              @click="handleSuggestion(suggestion)"
+            >
+              <span v-if="suggestion.icon" class="rm-ai-chat-suggestion__icon">{{ suggestion.icon }}</span>
+              {{ suggestion.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Messages -->
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          class="rm-ai-chat-message"
+          :class="`rm-ai-chat-message--${message.role}`"
+        >
+          <div class="rm-ai-chat-avatar" :class="`rm-ai-chat-avatar--${message.role}`">
+            <RmIcon v-if="message.role === 'assistant'" name="Robot" :size="18" weight="duotone" />
+            <RmIcon v-else name="User" :size="18" />
+          </div>
+          <div class="rm-ai-chat-bubble" :class="`rm-ai-chat-bubble--${message.role}`">
+            <div v-html="renderMarkdown(message.content)" />
+            <slot name="message-footer" :message="message" />
+          </div>
+        </div>
+
+        <!-- Loading indicator -->
+        <div v-if="loading" class="rm-ai-chat-message rm-ai-chat-message--assistant">
+          <div class="rm-ai-chat-avatar rm-ai-chat-avatar--assistant">
+            <RmIcon name="Robot" :size="18" weight="duotone" />
+          </div>
+          <div class="rm-ai-chat-bubble rm-ai-chat-bubble--assistant">
+            <div class="rm-ai-chat-loading">
+              <span class="rm-ai-chat-loading__pulse" />
+              <RmIcon name="CircleNotch" :size="16" class="rm-ai-chat-loading__icon" />
+              <span class="rm-ai-chat-loading__text">{{ loadingText }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <form class="rm-ai-chat-input" @submit.prevent="handleSubmit">
+        <div class="rm-ai-chat-input__wrapper">
+          <input
+            v-model="inputValue"
+            type="text"
+            :placeholder="placeholder"
+            :disabled="loading"
+            @keydown.enter.prevent="handleSubmit"
+          />
+          <button type="submit" :disabled="loading || !inputValue.trim()" class="rm-ai-chat-input__send">
+            <RmIcon name="PaperPlaneRight" :size="18" weight="fill" />
+          </button>
+        </div>
+      </form>
+    </template>
+  </RmDrawer>
+</template>
+
+<style scoped>
+.rm-ai-chat-trigger{align-items:center;background:linear-gradient(135deg,var(--r-color-primary-500) 0,var(--r-color-primary-600) 100%);border:none;border-radius:var(--r-radius-full);bottom:24px;box-shadow:var(--r-shadow-lg);color:var(--r-color-white);cursor:pointer;display:flex;height:52px;justify-content:center;position:fixed;right:24px;transition:all var(--r-transition-base);width:52px;z-index:89}.rm-ai-chat-trigger:hover{box-shadow:var(--r-shadow-xl);transform:scale(1.08)}.rm-ai-chat-trigger--open{opacity:.7;transform:scale(.9)}.rm-ai-chat-header{align-items:center;display:flex;gap:10px}.rm-ai-chat-header__icon{font-size:22px}.rm-ai-chat-header__robot{color:var(--r-color-primary-500)}.rm-ai-chat-header__title{color:var(--r-color-gray-900);font-size:var(--r-text-lg);font-weight:var(--r-font-weight-semibold);margin:0}.rm-ai-chat-header__clear{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;height:32px;justify-content:center;margin-right:8px;transition:all var(--r-transition-fast);width:32px}.rm-ai-chat-header__clear:hover{background-color:var(--r-color-gray-100);color:var(--r-color-gray-600)}.rm-ai-chat-body{display:flex;flex-direction:column;height:100%;margin:-24px}.rm-ai-chat-messages{background-color:var(--r-color-gray-50);display:flex;flex:1;flex-direction:column;gap:16px;overflow-y:auto;padding:20px}.rm-ai-chat-welcome{display:flex;flex-direction:column;gap:20px}.rm-ai-chat-bubble--welcome{background:linear-gradient(135deg,#f0f9ff,#e0f2fe)!important;border:1px solid #bae6fd}.rm-ai-chat-suggestions{align-items:center;display:flex;flex-direction:column;gap:8px}.rm-ai-chat-suggestions__hint{color:var(--r-color-gray-400);font-size:var(--r-text-xs);font-weight:var(--r-font-weight-medium);margin:0}.rm-ai-chat-suggestion{align-items:center;background:var(--r-color-white);border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-lg);color:var(--r-color-gray-600);cursor:pointer;display:flex;font-size:var(--r-text-sm);gap:8px;padding:10px 14px;text-align:left;transition:all var(--r-transition-fast);width:100%}.rm-ai-chat-suggestion:hover{background:var(--r-color-gray-50);border-color:var(--r-color-primary-400);color:var(--r-color-primary-600);transform:translateX(4px)}.rm-ai-chat-suggestion__icon{flex-shrink:0}.rm-ai-chat-message{animation:rm-ai-chat-fade-in .2s ease;display:flex;gap:10px}.rm-ai-chat-message--user{flex-direction:row-reverse}@keyframes rm-ai-chat-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.rm-ai-chat-avatar{align-items:center;border-radius:var(--r-radius-full);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.rm-ai-chat-avatar--assistant{background:var(--r-color-primary-50);color:var(--r-color-primary-500)}.rm-ai-chat-avatar--user{background:linear-gradient(135deg,var(--r-color-primary-500) 0,var(--r-color-primary-600) 100%);color:var(--r-color-white)}.rm-ai-chat-bubble{border-radius:16px;font-size:var(--r-text-sm);line-height:var(--r-leading-relaxed);max-width:80%;padding:10px 14px}.rm-ai-chat-bubble--user{background:linear-gradient(135deg,var(--r-color-primary-500) 0,var(--r-color-primary-600) 100%);border-bottom-right-radius:4px;color:var(--r-color-white)}.rm-ai-chat-bubble--assistant{background:var(--r-color-white);border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);color:var(--r-color-gray-700)}.rm-ai-chat-bubble :deep(ol),.rm-ai-chat-bubble :deep(ul){margin:6px 0;padding-left:20px}.rm-ai-chat-bubble :deep(li){margin:3px 0}.rm-ai-chat-bubble :deep(ol){list-style-type:decimal}.rm-ai-chat-bubble :deep(ul){list-style-type:disc}.rm-ai-chat-bubble :deep(strong){font-weight:var(--r-font-weight-semibold)}.rm-ai-chat-loading{align-items:center;display:flex;gap:8px;padding:2px 0}.rm-ai-chat-loading__pulse{animation:rm-ai-chat-pulse 2.5s ease-in-out infinite;background:rgba(99,102,241,.08);border-radius:var(--r-radius-full);height:28px;position:absolute;width:28px}.rm-ai-chat-loading__icon{animation:rm-ai-chat-spin 1.2s linear infinite;color:var(--r-color-primary-500);z-index:1}.rm-ai-chat-loading__text{color:var(--r-color-gray-500);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium)}@keyframes rm-ai-chat-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rm-ai-chat-pulse{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:0;transform:scale(1.3)}}.rm-ai-chat-input{margin:0}.rm-ai-chat-input__wrapper{align-items:center;background:var(--r-color-gray-100);border-radius:var(--r-radius-lg);display:flex;gap:8px;padding:4px 4px 4px 16px}.rm-ai-chat-input__wrapper input{background:none;border:none;color:var(--r-color-gray-800);flex:1;font-family:inherit;font-size:var(--r-text-sm);outline:none;padding:10px 0}.rm-ai-chat-input__wrapper input::-moz-placeholder{color:var(--r-color-gray-400)}.rm-ai-chat-input__wrapper input::placeholder{color:var(--r-color-gray-400)}.rm-ai-chat-input__send{align-items:center;background:linear-gradient(135deg,var(--r-color-primary-500) 0,var(--r-color-primary-600) 100%);border:none;border-radius:var(--r-radius-md);color:var(--r-color-white);cursor:pointer;display:flex;flex-shrink:0;height:38px;justify-content:center;transition:all var(--r-transition-fast);width:38px}.rm-ai-chat-input__send:hover:not(:disabled){transform:scale(1.05)}.rm-ai-chat-input__send:disabled{cursor:not-allowed;opacity:.5}
+</style>

package/dist/runtime/components/AppShell.vue

@@ -0,0 +1,68 @@
+<!--
+  RmAppShell - le chrome d'application du design system : barre laterale fixe
+  a gauche, strip d'actions fixe a droite, contenu decale entre les deux.
+
+  Structure et classes reprises de `app-shell.html`. La regle n°0 du skill est
+  de ne jamais reconstruire ce chrome de memoire : ce composant ne fait que
+  poser le markup attendu et gerer l'etat de repli.
+
+  Le decalage vit sur `body.rm-shell`, pose au montage et retire au demontage.
+  Sans ce retrait, une app multi-layout garderait le decalage sur ses autres
+  ecrans apres avoir quitte celui-ci.
+-->
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { rmWithoutTransitions } from '../utils/transitionGuard'
+
+const props = withDefaults(defineProps<{
+  /** Barre laterale repliee au chargement. */
+  navCollapsed?: boolean
+}>(), { navCollapsed: false })
+
+const collapsed = ref(props.navCollapsed)
+const stripOpen = ref(false)
+
+function sync() {
+  if (typeof document === 'undefined') return
+  const { body } = document
+  body.classList.add('rm-shell')
+  body.classList.toggle('lcollapsed', collapsed.value)
+  body.classList.toggle('ropen', stripOpen.value)
+}
+
+onMounted(sync)
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return
+  document.body.classList.remove('rm-shell', 'lcollapsed', 'ropen')
+})
+
+// Sans la garde, replier la barre laterale ne fait rien : sa largeur vient
+// d'un `var()` et la propriete est sous transition (cf. utils/transitionGuard).
+function toggleNav() {
+  rmWithoutTransitions(() => {
+    collapsed.value = !collapsed.value
+    sync()
+  })
+}
+function setStrip(open: boolean) {
+  rmWithoutTransitions(() => {
+    stripOpen.value = open
+    sync()
+  })
+}
+
+defineExpose({ collapsed, stripOpen, toggleNav, setStrip })
+</script>
+
+<template>
+  <div class="rm-app-shell">
+    <slot name="nav" :collapsed="collapsed" :toggle="toggleNav" />
+    <slot name="strip" :open="stripOpen" :set-open="setStrip" />
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.rm-app-shell{display:contents}
+</style>

package/dist/runtime/components/HybridTable.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * HybridTable — a table with inline horizontal bars behind values.
+ * Each row shows a label, a value, and a bar proportional to the max value.
+ */
+
+export interface HybridTableRow {
+  label: string
+  value: number
+}
+
+const props = withDefaults(defineProps<{
+  rows: HybridTableRow[]
+  title?: string
+  color?: string
+  maxVisible?: number
+  valueFormatter?: (val: number) => string
+}>(), {
+  title: undefined,
+  color: '#4164EE',
+  maxVisible: 10,
+  valueFormatter: (val: number) => val.toLocaleString(),
+})
+
+const showAll = ref(false)
+
+const maxValue = computed(() => Math.max(...props.rows.map(r => r.value), 1))
+
+const visibleRows = computed(() => {
+  if (showAll.value) return props.rows
+  return props.rows.slice(0, props.maxVisible)
+})
+
+const hasMore = computed(() => props.rows.length > props.maxVisible)
+</script>
+
+<template>
+  <div class="hybrid-table">
+    <h3 v-if="title" class="hybrid-table__title">{{ title }}</h3>
+
+    <div class="hybrid-table__list">
+      <div
+        v-for="(row, idx) in visibleRows"
+        :key="idx"
+        class="hybrid-table__row"
+      >
+        <span class="hybrid-table__label">{{ row.label }}</span>
+        <div class="hybrid-table__bar-wrapper">
+          <div
+            class="hybrid-table__bar"
+            :style="{ width: `${(row.value / maxValue) * 100}%`, backgroundColor: color }"
+          />
+        </div>
+        <span class="hybrid-table__value">{{ valueFormatter(row.value) }}</span>
+      </div>
+    </div>
+
+    <button
+      v-if="hasMore"
+      class="hybrid-table__toggle"
+      @click="showAll = !showAll"
+    >
+      {{ showAll ? 'Show less' : `Show all (${rows.length})` }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.hybrid-table{font-family:var(--r-font-family)}.hybrid-table__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.hybrid-table__list{display:flex;flex-direction:column;gap:6px}.hybrid-table__row{align-items:center;display:flex;gap:12px;padding:6px 0}.hybrid-table__label{color:var(--r-color-gray-700);flex-shrink:0;font-size:13px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hybrid-table__bar-wrapper{background:var(--r-color-gray-50);border-radius:4px;flex:1;height:20px;overflow:hidden}.hybrid-table__bar{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}.hybrid-table__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600;min-width:50px;text-align:right}.hybrid-table__toggle{background:none;border:none;color:#4164ee;cursor:pointer;font-family:var(--r-font-family);font-size:13px;margin-top:8px;padding:0;text-decoration:underline}.hybrid-table__toggle:hover{color:#3451d4}
+</style>

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { PhX } from '@phosphor-icons/vue'
+
+export interface RmModalProps {
+  /** Whether the modal is open */
+  modelValue: boolean
+  /** Size: sm, md, lg, xl */
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  /** Mode: fixed (size is fixed) or free (adapts to content) */
+  mode?: 'fixed' | 'free'
+}
+
+const props = withDefaults(defineProps<RmModalProps>(), {
+  size: 'md',
+  mode: 'fixed',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+const sizeMap: Record<string, { width: string; height: string }> = {
+  sm: { width: '480px', height: '360px' },
+  md: { width: '640px', height: '500px' },
+  lg: { width: '800px', height: '640px' },
+  xl: { width: '960px', height: '780px' },
+}
+
+const modalStyle = computed(() => {
+  const s = sizeMap[props.size] ?? sizeMap.md
+  if (props.mode === 'fixed') {
+    return { width: s.width, height: s.height }
+  }
+  return { width: s.width, maxHeight: '85vh' }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="rm-modal">
+      <div
+        v-if="modelValue"
+        class="rm-modal-overlay"
+        @click.self="close"
+      >
+        <div class="rm-modal" :style="modalStyle">
+          <div class="rm-modal__header">
+            <div class="rm-modal__header-content">
+              <slot name="header" />
+            </div>
+            <button class="rm-modal__close" @click="close">
+              <PhX :size="20" />
+            </button>
+          </div>
+
+          <div v-if="$slots.tabs" class="rm-modal__tabs">
+            <slot name="tabs" />
+          </div>
+
+          <div class="rm-modal__body">
+            <slot />
+          </div>
+
+          <div v-if="$slots.footer" class="rm-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:20px 24px 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--r-color-gray-50);color:var(--r-color-gray-700)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:24px}.rm-modal__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}
+</style>

package/dist/runtime/components/NavBar.vue

@@ -0,0 +1,147 @@
+<!--
+  RmNavBar - la barre laterale du design system : identite, recherche, sections
+  de navigation, pied avec utilisateur et sortie.
+
+  Markup et classes reprises de `app-shell.html` (`.sidebar`, `.sidebar-top`,
+  `.sidebar-search`, `.nav-group`, `.nav-section`, `.nav-item`,
+  `.sidebar-footer`). Les icones utilisent la police Phosphor via
+  `<i class="ph ph-...">`, comme le design system : les regles de taille
+  d'oip.css ciblent cet element, un SVG ne les recevrait pas.
+
+  Les sections sont un accordeon exclusif : huit vues ne tiennent pas
+  depliees. L'etat vit ici, pas dans chaque section.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+export interface RmNavItem {
+  label: string
+  /** Icone Phosphor, nom en kebab-case sans le prefixe `ph-`. */
+  icon: string
+  to: string
+}
+export interface RmNavSection {
+  key: string
+  label: string
+  items: RmNavItem[]
+}
+
+const props = withDefaults(defineProps<{
+  /** Nom court affiche a cote du logo. */
+  name: string
+  /** Sous-titre du logo. */
+  subtitle?: string
+  sections: RmNavSection[]
+  /** Chemin actif, pour marquer l'item courant. */
+  activePath?: string
+  collapsed?: boolean
+  searchPlaceholder?: string
+  /** Bloc utilisateur du pied. Masque si absent. */
+  user?: { initials: string, name: string, org?: string }
+  /** Lien de sortie du pied. */
+  exitLabel?: string
+  exitHref?: string
+}>(), {
+  subtitle: undefined,
+  activePath: undefined,
+  collapsed: false,
+  searchPlaceholder: 'Rechercher...',
+  user: undefined,
+  exitLabel: undefined,
+  exitHref: undefined,
+})
+
+const emit = defineEmits<{
+  toggle: []
+  navigate: [to: string]
+  search: [term: string]
+}>()
+
+// Section ouverte : celle qui contient le chemin actif, sinon la premiere.
+const sectionOf = (path?: string) =>
+  props.sections.find(s => s.items.some(i => i.to === path))?.key ?? props.sections[0]?.key ?? null
+
+const openSection = ref<string | null>(sectionOf(props.activePath))
+watch(() => props.activePath, (path) => {
+  const key = sectionOf(path)
+  if (key && key !== openSection.value) openSection.value = key
+})
+
+const term = ref('')
+watch(term, v => emit('search', v))
+
+const initials = computed(() => props.user?.initials ?? '')
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-top">
+      <div class="logo-block">
+        <div class="logo-mark">{{ name.charAt(0) }}</div>
+        <div>
+          <div class="logo-text">{{ name }}</div>
+          <div v-if="subtitle" class="logo-sub">{{ subtitle }}</div>
+        </div>
+      </div>
+      <button
+        class="topbar-toggle"
+        type="button"
+        :aria-label="collapsed ? 'Déplier la barre latérale' : 'Replier la barre latérale'"
+        :aria-expanded="!collapsed"
+        @click="emit('toggle')"
+      >
+        <i class="ph ph-sidebar-simple" />
+      </button>
+    </div>
+
+    <div class="sidebar-search">
+      <i class="ph ph-magnifying-glass" />
+      <input v-model="term" type="text" :placeholder="searchPlaceholder" aria-label="Rechercher dans la navigation">
+      <kbd>⌘K</kbd>
+    </div>
+
+    <div v-for="section in sections" :key="section.key" class="nav-group">
+      <div class="nav-section">
+        <button
+          class="nav-section-header"
+          type="button"
+          :aria-expanded="openSection === section.key"
+          @click="openSection = openSection === section.key ? null : section.key"
+        >
+          <span class="label">{{ section.label }}</span>
+          <span class="chev"><i class="ph ph-caret-down" /></span>
+        </button>
+        <div v-show="openSection === section.key" class="nav-items">
+          <a
+            v-for="item in section.items"
+            :key="item.to"
+            class="nav-item"
+            :class="{ active: item.to === activePath }"
+            :href="item.to"
+            :data-tip="collapsed ? item.label : undefined"
+            @click.prevent="emit('navigate', item.to)"
+          >
+            <span class="icn"><i :class="`ph ph-${item.icon}`" /></span>
+            <span class="lbl">{{ item.label }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-footer">
+      <div v-if="user" class="sb-user">
+        <div class="sb-user-avatar">{{ initials }}</div>
+        <div class="sb-user-info">
+          <div class="sb-user-name">{{ user.name }}</div>
+          <div v-if="user.org" class="sb-user-org">{{ user.org }}</div>
+        </div>
+      </div>
+      <div class="sb-actions">
+        <slot name="footer-actions" />
+        <a v-if="exitHref" class="primary" :href="exitHref">
+          <i class="ph ph-arrow-up-right" /> {{ exitLabel ?? 'Sortir' }}
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>

package/dist/runtime/components/SimpleBar.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * SimpleBar — lightweight horizontal bar chart without ApexCharts.
+ * Pure CSS, no dependencies. Great for small inline visualizations.
+ */
+
+export interface SimpleBarItem {
+  label: string
+  value: number
+  color?: string
+}
+
+const props = withDefaults(defineProps<{
+  items: SimpleBarItem[]
+  title?: string
+  showValues?: boolean
+  showPercent?: boolean
+  height?: number
+}>(), {
+  title: undefined,
+  showValues: true,
+  showPercent: false,
+  height: 24,
+})
+
+const { PALETTE } = useChartTheme()
+
+const total = computed(() => props.items.reduce((sum, i) => sum + i.value, 0))
+const maxValue = computed(() => Math.max(...props.items.map(i => i.value), 1))
+</script>
+
+<template>
+  <div class="simple-bar">
+    <h3 v-if="title" class="simple-bar__title">{{ title }}</h3>
+
+    <!-- Stacked bar -->
+    <div v-if="showPercent" class="simple-bar__stacked" :style="{ height: `${height}px` }">
+      <div
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="simple-bar__segment"
+        :style="{
+          width: `${(item.value / total) * 100}%`,
+          backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
+        }"
+      />
+    </div>
+
+    <!-- Individual bars -->
+    <div class="simple-bar__list">
+      <div
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="simple-bar__item"
+      >
+        <div class="simple-bar__item-header">
+          <span
+            class="simple-bar__dot"
+            :style="{ backgroundColor: item.color ?? PALETTE[idx % PALETTE.length] }"
+          />
+          <span class="simple-bar__label">{{ item.label }}</span>
+          <span v-if="showValues" class="simple-bar__value">
+            {{ item.value.toLocaleString() }}
+            <span v-if="showPercent" class="simple-bar__pct">
+              ({{ total > 0 ? ((item.value / total) * 100).toFixed(1) : 0 }}%)
+            </span>
+          </span>
+        </div>
+        <div v-if="!showPercent" class="simple-bar__track" :style="{ height: `${height}px` }">
+          <div
+            class="simple-bar__fill"
+            :style="{
+              width: `${(item.value / maxValue) * 100}%`,
+              backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
+            }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.simple-bar{font-family:var(--r-font-family)}.simple-bar__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.simple-bar__stacked{border-radius:6px;display:flex;margin-bottom:12px;overflow:hidden}.simple-bar__segment{min-width:2px;transition:width .4s ease}.simple-bar__segment:first-child{border-radius:6px 0 0 6px}.simple-bar__segment:last-child{border-radius:0 6px 6px 0}.simple-bar__list{display:flex;flex-direction:column;gap:8px}.simple-bar__item-header{align-items:center;display:flex;gap:8px;margin-bottom:4px}.simple-bar__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.simple-bar__label{color:var(--r-color-gray-700);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.simple-bar__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600}.simple-bar__pct{color:var(--r-color-gray-400);font-weight:400}.simple-bar__track{background:var(--r-color-gray-50);border-radius:4px;overflow:hidden}.simple-bar__fill{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}
+</style>

package/dist/runtime/components/Table.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { PhCaretUp, PhCaretDown } from '@phosphor-icons/vue'
+
+export interface RmTableColumn {
+  key: string
+  label: string
+  sortable?: boolean
+  align?: 'left' | 'center' | 'right'
+  width?: string
+}
+
+export interface RmTableProps {
+  columns: RmTableColumn[]
+  rows: Record<string, any>[]
+  sortField?: string
+  sortOrder?: 'asc' | 'desc'
+  striped?: boolean
+  hoverable?: boolean
+  stickyHeader?: boolean
+  maxHeight?: string
+  loading?: boolean
+  emptyText?: string
+}
+
+const props = withDefaults(defineProps<RmTableProps>(), {
+  sortField: '',
+  sortOrder: 'asc',
+  striped: true,
+  hoverable: true,
+  stickyHeader: true,
+  maxHeight: '500px',
+  loading: false,
+  emptyText: 'No data',
+})
+
+const emit = defineEmits<{
+  sort: [field: string, order: 'asc' | 'desc']
+  rowClick: [row: Record<string, any>, index: number]
+}>()
+
+const currentSort = ref(props.sortField)
+const currentOrder = ref<'asc' | 'desc'>(props.sortOrder)
+
+function toggleSort(col: RmTableColumn) {
+  if (!col.sortable) return
+
+  if (currentSort.value === col.key) {
+    currentOrder.value = currentOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    currentSort.value = col.key
+    currentOrder.value = 'asc'
+  }
+
+  emit('sort', currentSort.value, currentOrder.value)
+}
+
+function getCellValue(row: Record<string, any>, key: string): any {
+  return key.split('.').reduce((obj, k) => obj?.[k], row)
+}
+
+const sortedRows = computed(() => {
+  if (!currentSort.value) return props.rows
+
+  return [...props.rows].sort((a, b) => {
+    const aVal = getCellValue(a, currentSort.value) ?? ''
+    const bVal = getCellValue(b, currentSort.value) ?? ''
+
+    const aStr = Array.isArray(aVal) ? aVal.join(', ') : String(aVal)
+    const bStr = Array.isArray(bVal) ? bVal.join(', ') : String(bVal)
+
+    const aNum = Number(aStr)
+    const bNum = Number(bStr)
+    const isNumeric = !isNaN(aNum) && !isNaN(bNum) && aStr !== '' && bStr !== ''
+
+    const cmp = isNumeric ? aNum - bNum : aStr.localeCompare(bStr)
+    return currentOrder.value === 'asc' ? cmp : -cmp
+  })
+})
+</script>
+
+<template>
+  <div class="rm-table-wrapper" :style="maxHeight !== 'auto' && stickyHeader ? { maxHeight } : undefined">
+    <table class="rm-table">
+      <thead class="rm-table__head" :class="{ 'rm-table__head--sticky': stickyHeader }">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="rm-table__th"
+            :class="[
+              col.align && `rm-table__th--${col.align}`,
+              col.sortable && 'rm-table__th--sortable',
+            ]"
+            :style="col.width ? { width: col.width } : undefined"
+            @click="toggleSort(col)"
+          >
+            <span class="rm-table__th-content">
+              {{ col.label }}
+              <span v-if="col.sortable" class="rm-table__sort">
+                <PhCaretUp
+                  :size="10"
+                  :weight="currentSort === col.key && currentOrder === 'asc' ? 'bold' : 'regular'"
+                  :class="{ 'rm-table__sort--active': currentSort === col.key && currentOrder === 'asc' }"
+                />
+                <PhCaretDown
+                  :size="10"
+                  :weight="currentSort === col.key && currentOrder === 'desc' ? 'bold' : 'regular'"
+                  :class="{ 'rm-table__sort--active': currentSort === col.key && currentOrder === 'desc' }"
+                />
+              </span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody v-if="loading">
+        <tr v-for="i in 5" :key="i">
+          <td v-for="col in columns" :key="col.key" class="rm-table__td">
+            <div class="rm-table__skeleton" />
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody v-else-if="sortedRows.length === 0">
+        <tr>
+          <td :colspan="columns.length" class="rm-table__empty">
+            {{ emptyText }}
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody v-else>
+        <tr
+          v-for="(row, idx) in sortedRows"
+          :key="idx"
+          class="rm-table__row"
+          :class="{
+            'rm-table__row--striped': striped && idx % 2 === 1,
+            'rm-table__row--hoverable': hoverable,
+          }"
+          @click="emit('rowClick', row, idx)"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="rm-table__td"
+            :class="col.align && `rm-table__td--${col.align}`"
+          >
+            <slot :name="col.key" :value="getCellValue(row, col.key)" :row="row" :index="idx">
+              {{ getCellValue(row, col.key) ?? '—' }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--r-color-gray-400);font-style:italic;padding:32px 16px;text-align:center}.rm-table__skeleton{animation:rm-table-shimmer 1.5s infinite;background:linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%);background-size:200% 100%;border-radius:4px;height:14px;width:80%}@keyframes rm-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
+</style>

package/dist/runtime/components/ToolStrip.vue

@@ -0,0 +1,73 @@
+<!--
+  RmToolStrip - le strip d'actions fixe a droite. C'est une barre a part
+  entiere, pas un panneau replie dans le contenu : tuiles verticales toujours
+  visibles, panneau qui se superpose au clic.
+
+  Markup et classes de `app-shell.html` (`.rsidebar`, `.rstrip-top`,
+  `.rstrip-collapsed`, `.strip-icon`, `.strip-label`, `.strip-badge`).
+  Le skill recommande de conserver les tuiles Sources et Acces par defaut.
+-->
+<script setup lang="ts">
+export interface RmStripTile {
+  key: string
+  label: string
+  /** Icone Phosphor, nom en kebab-case sans le prefixe `ph-`. */
+  icon: string
+  /** Compteur affiche en pastille. Un zero n'est pas affiche. */
+  badge?: number | string
+  /** Point d'attention, sans compteur. */
+  dot?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  tiles: RmStripTile[]
+  /** Tuile dont le panneau est ouvert. */
+  active?: string | null
+  open?: boolean
+}>(), { active: null, open: false })
+
+const emit = defineEmits<{
+  select: [key: string]
+  toggle: []
+}>()
+</script>
+
+<template>
+  <aside class="rsidebar">
+    <div class="rstrip-top">
+      <button
+        class="topbar-toggle"
+        type="button"
+        aria-label="Panneau d'actions"
+        :aria-expanded="open"
+        @click="emit('toggle')"
+      >
+        <i class="ph ph-sidebar-simple" />
+      </button>
+    </div>
+
+    <div class="rstrip-collapsed">
+      <button
+        v-for="tile in tiles"
+        :key="tile.key"
+        class="strip-icon"
+        :class="{ active: active === tile.key }"
+        type="button"
+        :data-open-section="tile.key"
+        :aria-pressed="active === tile.key"
+        @click="emit('select', tile.key)"
+      >
+        <i :class="`ph ph-${tile.icon}`" />
+        <span class="strip-label">{{ tile.label }}</span>
+        <span v-if="tile.badge" class="strip-badge">{{ tile.badge }}</span>
+        <span v-else-if="tile.dot" class="dot" />
+      </button>
+    </div>
+
+    <slot />
+  </aside>
+</template>
+
+<style scoped>
+.strip-icon,.topbar-toggle{font:inherit;text-align:center}
+</style>

package/dist/runtime/components/TopBar.vue

@@ -0,0 +1,46 @@
+<!--
+  RmTopBar - l'en-tete d'analyse : titre de page et onglets de sous-vues.
+
+  Classes de `app-shell.html` (`.topbar`, `.pane-title`, `.ptabs`, `.ptab`).
+  Regle du skill : la sidebar porte les grands chapitres, ces onglets portent
+  les sous-analyses du chapitre actif. Ne pas melanger les deux.
+-->
+<script setup lang="ts">
+export interface RmPaneTab {
+  key: string
+  label: string
+}
+
+withDefaults(defineProps<{
+  title: string
+  tabs?: RmPaneTab[]
+  active?: string | null
+}>(), { tabs: () => [], active: null })
+
+const emit = defineEmits<{ select: [key: string] }>()
+</script>
+
+<template>
+  <div class="topbar">
+    <h1 class="pane-title">{{ title }}</h1>
+    <div v-if="tabs.length" class="ptabs" role="tablist">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="ptab"
+        :class="{ active: active === tab.key }"
+        type="button"
+        role="tab"
+        :aria-selected="active === tab.key"
+        @click="emit('select', tab.key)"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ptab{font:inherit}
+</style>

package/dist/runtime/composables/useTheme.js

@@ -1,4 +1,5 @@
 import { onMounted, readonly, ref } from "vue";
+import { rmWithoutTransitions } from "../utils/transitionGuard.js";
 const CVD_CLASSES = {
   deutera: "cvd-deutera",
   protan: "cvd-protan",
@@ -16,15 +17,7 @@ export function useRomulusTheme() {
   const compact = ref(false);
   const cvd = ref("none");
   const textScale = ref("normal");
-  function apply(mutate) {
-    if (typeof document === "undefined") return;
-    const { body } = document;
-    body.classList.add("theme-switching");
-    mutate();
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => body.classList.remove("theme-switching"));
-    });
-  }
+  const apply = rmWithoutTransitions;
   const setNight = (value) => apply(() => {
     night.value = value;
     document.body.classList.toggle("night", value);

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

@@ -0,0 +1,24 @@
+/**
+ * Applique un changement d'etat sans transition.
+ *
+ * Chrome ne reevalue pas une propriete sous `transition` quand sa valeur vient
+ * d'un `var()` modifie par un changement de classe sur un ancetre. La
+ * propriete garde son ancienne valeur indefiniment, pas seulement le temps de
+ * l'animation. Deux cas verifies dans ce paquet :
+ *
+ * - `border-color: var(--border-default)` sur `.chart-card` : 2,5 s apres le
+ *   passage en mode nuit, la bordure affichait encore la couleur du jour ;
+ * - `width: var(--sidebar-w)` sur `.sidebar` : le token passait bien a 333px
+ *   et la largeur calculee restait a 220px. Replier la barre laterale ne
+ *   faisait donc rien du tout.
+ *
+ * On neutralise les transitions, on applique le changement, on force un
+ * recalcul de style synchrone, puis on les reactive. Tout est synchrone
+ * volontairement : une version a base de `requestAnimationFrame` ne fonctionne
+ * pas dans un onglet en arriere-plan, ou aucune frame n'est produite. Teste
+ * dans un panneau masque : la bascule n'avait alors aucun effet.
+ *
+ * Consequence assumee : la bascule est instantanee, sans animation. Une
+ * transition qui n'aboutit pas vaut moins qu'un etat correct.
+ */
+export declare function rmWithoutTransitions(mutate: () => void): void;

package/dist/runtime/utils/transitionGuard.js

@@ -0,0 +1,14 @@
+export function rmWithoutTransitions(mutate) {
+  if (typeof document === "undefined") {
+    mutate();
+    return;
+  }
+  const { body } = document;
+  body.classList.add("rm-switching");
+  try {
+    mutate();
+    void body.offsetWidth;
+  } finally {
+    body.classList.remove("rm-switching");
+  }
+}

package/package.json

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