@meddleware/ui 0.1.11 → 0.1.13

package/README.md

@@ -1,6 +1,6 @@
 # @meddleware/ui
 
-Shared Vue 3 component library for the `@meddleware` UIs. Delivers a layout shell (header, sidebar, footer), colour-mode control, and UI primitives — all styled with [`@meddleware/design-tokens`](https://www.npmjs.com/package/@meddleware/design-tokens) (Oxblood / Indigo palette).
+Shared Vue 3 component library for the `@meddleware` UIs. Delivers a layout shell (header, sidebar, footer), colour-mode control, and UI primitives — all styled with [`@meddleware/design-tokens`](https://www.npmjs.com/package/@meddleware/design-tokens): a warm-neutral canvas with functional primary/rainbow accents, sacred-geometry (φ/Fibonacci) type + spacing scales, and optional seasonal theming.
 
 ## Installation
 
@@ -14,18 +14,39 @@ yarn add @meddleware/ui @meddleware/design-tokens
 
 ## Setup
 
-Import both CSS files once at your application entry point:
+Import the CSS once at your application entry point:
 
 ```ts
 // src/main.ts (or equivalent)
-import '@meddleware/design-tokens/tokens.css' // required — registers CSS custom properties
-import '@meddleware/ui/base.css'              // optional — element-level defaults
+import '@meddleware/design-tokens/tokens.css'  // required — registers CSS custom properties
+import '@meddleware/design-tokens/seasons.css' // optional — enables data-season theming
+import '@meddleware/ui/base.css'               // optional — element defaults + scale + utilities
 import { createApp } from 'vue'
 import App from './App.vue'
 
 createApp(App).mount('#app')
 ```
 
+## Styling, scales & utilities
+
+Components consume the design-token **role** tokens (`--accent`, `--warning`, `--focus-ring`, …) and
+the **sacred-geometry scales** (`--space-*`, `--font-size-*`, `--leading-*`, `--tracking-*`) — never
+colour-named or magic-number values. Focus states use the dedicated `--focus-ring` (blue) so they are
+always visible and never read as an error. Component **props and accessibility are unchanged** by the
+theming system — only the styling tokens they resolve to.
+
+`base.css` also ships opt-in utilities (respecting `prefers-reduced-motion`):
+
+| Utility | Purpose |
+| --- | --- |
+| `.mw-noise` | Subtle CSS-native SVG-noise background layer (controlled imperfection over flat polish). |
+| `.mw-mono` | Monospace font (`--mw-font-mono`). |
+| `.mw-spinner` | Sigil-like ring loader that settles into a simple form. |
+| `.mw-hand-drawn` | Empty positioned **placeholder hook** for bespoke hand-drawn SVG/canvas added later — drop an `<svg>`/`<canvas>` inside, or target `.mw-hand-drawn > svg` from your app. |
+
+Seasonal theming is entirely in `@meddleware/design-tokens` (import `seasons.css` + set
+`data-season`); the components pick it up automatically through the role tokens.
+
 ## Exports
 
 ### Layout shell

package/dist/base.css

@@ -1,2 +1,2 @@
-*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--mw-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px;line-height:1.55}:where(ul,ol):where([role=list],[role=listitem]){margin:0;padding:0;list-style:none}:where(img,svg,video,canvas){max-width:100%;display:block}:where(fieldset){border:0;margin:0;padding:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:where(button,input,select,textarea){font-family:inherit}:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-mono{font-family:var(--mw-font-mono)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-23c3c7f3]{height:100%;width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-23c3c7f3]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-23c3c7f3]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__body[data-v-23c3c7f3]{flex-shrink:0}.mw-sidebar__foot[data-v-23c3c7f3]{border-top:1px solid var(--_border);color:var(--_muted);padding:.75rem 1rem;font-size:.85rem}.mw-footer[data-v-c646b8e1]{background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.mw-footer--transparent[data-v-c646b8e1]{border-top:1px solid var(--border)}.mw-footer__center[data-v-c646b8e1]{flex:auto;min-width:0}.mw-footer__end[data-v-c646b8e1]{margin-left:auto}.mw-mode[data-v-186f8312]{border:1px solid var(--_border,var(--border));border-radius:var(--mw-radius,10px);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-186f8312]{border-radius:calc(var(--mw-radius,10px) - 3px);color:var(--_text,var(--text));font:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.8rem;display:inline-flex}.mw-mode__btn[data-v-186f8312]:hover{opacity:1}.mw-mode__btn.is-active[data-v-186f8312]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-186f8312]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-186f8312]{display:none}}.mw-btn[data-v-299de2c3]{border-radius:var(--mw-radius,10px);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .9rem;font-weight:550;transition:filter .12s,background .12s;display:inline-flex}.mw-btn[data-v-299de2c3]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-299de2c3]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-btn--primary[data-v-299de2c3]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-299de2c3]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-299de2c3]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-299de2c3]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-299de2c3]{background:var(--danger);color:var(--mw-neutral-000)}.mw-btn--danger[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-fd2fd7ab]{background:var(--surface);border:1px solid var(--border);border-radius:var(--mw-radius,10px);color:var(--text);overflow:hidden}.mw-card__header[data-v-fd2fd7ab]{border-bottom:1px solid var(--border);padding:.85rem 1rem}.mw-card__title[data-v-fd2fd7ab]{margin:0;font-size:1rem;font-weight:600}.mw-card__body[data-v-fd2fd7ab]{padding:1rem}.mw-card__footer[data-v-fd2fd7ab]{border-top:1px solid var(--border);background:var(--lift);padding:.75rem 1rem}.mw-select[data-v-b9468387]{position:relative}.mw-select select[data-v-b9468387]{appearance:none;background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--mw-radius,10px);font:inherit;padding:.5rem 2.5rem .5rem .7rem}.mw-select select[data-v-b9468387]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mw-select__chevron[data-v-b9468387]{pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.mw-notice[data-v-6f53d0be]{border:1px solid var(--border);border-radius:var(--mw-radius,10px);background:var(--lift);color:var(--text);border-left-width:3px;margin:0;padding:.6rem .8rem;font-size:.9rem}.mw-notice--error[data-v-6f53d0be]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-6f53d0be]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}.sidebar-item[data-v-e15afdf7]{border-radius:var(--mw-radius,10px);width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.85;background:0 0;border:0;align-items:center;gap:.6rem;padding:.55rem .7rem;display:flex}.sidebar-item[data-v-e15afdf7]:hover:not(:disabled){background:color-mix(in srgb, currentColor 10%, transparent);opacity:1}.sidebar-item.is-active[data-v-e15afdf7]{background:color-mix(in srgb, var(--accent) 26%, transparent);opacity:1}.sidebar-item[data-v-e15afdf7]:disabled{cursor:default}.sidebar-item[data-v-e15afdf7]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sidebar-item__icon[data-v-e15afdf7]{text-align:center;width:1.1rem}.mw-tab-nav[data-v-88758ede]{border-bottom:2px solid var(--border);gap:.25rem;display:flex}.mw-tab-nav__tab[data-v-88758ede]{appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:.5rem 1rem;font-size:.95rem;transition:color .1s,border-color .1s}.mw-tab-nav__tab[data-v-88758ede]:hover{color:var(--text)}.mw-tab-nav__tab--active[data-v-88758ede]{border-bottom-color:var(--accent);color:var(--text);font-weight:600}.ca-root[data-v-08c3420b]{align-items:center;gap:.35em;display:inline-flex}.ca-value[data-v-08c3420b]{font-family:monospace;font-size:inherit}.ca-copy[data-v-08c3420b]{color:var(--muted,#888);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;transition:color .15s;display:inline-flex}.ca-copy[data-v-08c3420b]:hover{color:var(--text,#f0f0f0)}.ca-copy--copied[data-v-08c3420b]{color:var(--accent,#6366f1)}.ca-icon[data-v-08c3420b]{display:block}.el-root[data-v-7a44607e]{font-family:monospace;font-size:inherit;color:var(--accent,#6366f1);text-underline-offset:2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;transition:color .15s}.el-root[data-v-7a44607e]:hover{color:var(--text,#f0f0f0);text-decoration-style:solid}.status-widget[data-v-20197983]{color:inherit;opacity:.85;align-items:center;gap:.4rem;font-size:.8rem;text-decoration:none;display:inline-flex}.status-widget[data-v-20197983]:hover{opacity:1}.status-widget__dot[data-v-20197983]{border-radius:50%;flex-shrink:0;width:.55rem;height:.55rem}.status-widget--ok .status-widget__dot[data-v-20197983]{background:var(--mw-ok-500)}.status-widget--degraded .status-widget__dot[data-v-20197983]{background:var(--mw-gold-500)}.status-widget--error .status-widget__dot[data-v-20197983]{background:var(--mw-danger-500)}
+*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--mw-font-sans);font-size:var(--font-size-base);line-height:var(--leading-normal);letter-spacing:var(--tracking-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}:where(ul,ol):where([role=list],[role=listitem]){margin:0;padding:0;list-style:none}:where(img,svg,video,canvas){max-width:100%;display:block}:where(fieldset){border:0;margin:0;padding:0}a{color:var(--accent);transition:color var(--transition-base);text-decoration:none}a:hover{text-decoration:underline}:where(button,input,select,textarea){font-family:inherit}:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.mw-mono{font-family:var(--mw-font-mono)}.mw-noise{isolation:isolate;position:relative}.mw-noise:before{content:"";z-index:-1;background-image:var(--noise-overlay);opacity:var(--noise-opacity);pointer-events:none;background-repeat:repeat;position:absolute;inset:0}.mw-hand-drawn{display:inline-flex;position:relative}.mw-spinner{width:var(--space-sm);height:var(--space-sm);border:2px solid var(--border);border-top-color:var(--accent);animation:mw-spin var(--transition-slow) linear infinite;border-radius:50%;display:inline-block}@keyframes mw-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}.mw-spinner{border-top-color:var(--accent);animation:none}}.mw-header[data-v-9b9826d5]{align-items:center;gap:var(--space-sm);height:var(--mw-header-height,56px);padding:0 var(--space-sm);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);display:flex}.mw-header--sticky[data-v-9b9826d5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-9b9826d5]{align-items:center;gap:var(--space-2xs);letter-spacing:var(--tracking-wide);white-space:nowrap;font-weight:650;display:flex}.mw-header__center[data-v-9b9826d5]{flex:auto;min-width:0}.mw-header__actions[data-v-9b9826d5]{align-items:center;gap:var(--space-2xs);margin-left:auto;display:flex}.mw-sidebar[data-v-a2b8405c]{height:100%;width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-a2b8405c]{padding:var(--space-sm);border-bottom:1px solid var(--_border)}.mw-sidebar__nav[data-v-a2b8405c]{gap:var(--space-3xs);padding:var(--space-xs);flex-direction:column;flex:auto;display:flex;overflow-y:auto}.mw-sidebar__body[data-v-a2b8405c]{flex-shrink:0}.mw-sidebar__foot[data-v-a2b8405c]{padding:var(--space-xs) var(--space-sm);border-top:1px solid var(--_border);color:var(--_muted);font-size:var(--font-size-sm)}.mw-footer[data-v-979579a9]{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);font-size:var(--font-size-sm);flex-wrap:wrap;display:flex}.mw-footer--transparent[data-v-979579a9]{border-top:1px solid var(--border)}.mw-footer__center[data-v-979579a9]{flex:auto;min-width:0}.mw-footer__end[data-v-979579a9]{align-items:center;gap:var(--space-sm);margin-left:auto;display:flex}.mw-footer__docs-link[data-v-979579a9]{color:inherit;text-underline-offset:2px;opacity:.7;text-decoration:underline}.mw-footer__docs-link[data-v-979579a9]:hover{opacity:1}.mw-mode[data-v-e2ea0d79]{border:1px solid var(--_border,var(--border));border-radius:var(--radius);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-e2ea0d79]{align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-2xs);border-radius:calc(var(--radius) - 3px);color:var(--_text,var(--text));font:inherit;font-size:var(--font-size-sm);cursor:pointer;opacity:.7;transition:opacity var(--transition-base), background var(--transition-base);background:0 0;border:0;display:inline-flex}.mw-mode__btn[data-v-e2ea0d79]:hover{opacity:1}.mw-mode__btn.is-active[data-v-e2ea0d79]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-e2ea0d79]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-e2ea0d79]{display:none}}.mw-btn[data-v-bc33cc23]{justify-content:center;align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);font:inherit;cursor:pointer;transition:filter var(--transition-base), background var(--transition-base);border:1px solid #0000;font-weight:550;display:inline-flex}.mw-btn[data-v-bc33cc23]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-bc33cc23]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.mw-btn--primary[data-v-bc33cc23]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-bc33cc23]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-bc33cc23]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-bc33cc23]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-bc33cc23]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-bc33cc23]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-bc33cc23]{background:var(--danger);color:var(--accent-contrast)}.mw-btn--danger[data-v-bc33cc23]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-883f87f5]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);overflow:hidden}.mw-card__header[data-v-883f87f5]{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--border)}.mw-card__title[data-v-883f87f5]{font-size:var(--font-size-base);margin:0;font-weight:600}.mw-card__body[data-v-883f87f5]{padding:var(--space-sm)}.mw-card__footer[data-v-883f87f5]{padding:var(--space-xs) var(--space-sm);border-top:1px solid var(--border);background:var(--lift)}.mw-select[data-v-7e206184]{position:relative}.mw-select select[data-v-7e206184]{appearance:none;width:100%;padding:var(--space-2xs) calc(var(--space-md) + var(--space-2xs)) var(--space-2xs) var(--space-xs);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font:inherit}.mw-select select[data-v-7e206184]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.mw-select__chevron[data-v-7e206184]{right:var(--space-xs);pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;transform:translateY(-50%)}.mw-notice[data-v-ee7fffb1]{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--border);border-radius:var(--radius);background:var(--lift);color:var(--text);font-size:var(--font-size-sm);border-left-width:3px;margin:0}.mw-notice--error[data-v-ee7fffb1]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-ee7fffb1]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}.sidebar-item[data-v-8da2d583]{align-items:center;gap:var(--space-2xs);width:100%;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.85;transition:background var(--transition-base), opacity var(--transition-base);background:0 0;border:0;display:flex}.sidebar-item[data-v-8da2d583]:hover:not(:disabled){background:color-mix(in srgb, currentColor 10%, transparent);opacity:1}.sidebar-item.is-active[data-v-8da2d583]{background:color-mix(in srgb, var(--accent) 26%, transparent);opacity:1}.sidebar-item[data-v-8da2d583]:disabled{cursor:default}.sidebar-item[data-v-8da2d583]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.sidebar-item__icon[data-v-8da2d583]{text-align:center;width:1.1rem}.mw-tab-nav[data-v-97d31503]{gap:var(--space-3xs);border-bottom:2px solid var(--border);display:flex}.mw-tab-nav__tab[data-v-97d31503]{appearance:none;padding:var(--space-2xs) var(--space-sm);cursor:pointer;font-size:var(--font-size-base);color:var(--muted);transition:color var(--transition-base), border-color var(--transition-base);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px}.mw-tab-nav__tab[data-v-97d31503]:hover{color:var(--text)}.mw-tab-nav__tab--active[data-v-97d31503]{border-bottom-color:var(--accent);color:var(--text);font-weight:600}.ca-root[data-v-b43dabdd]{align-items:center;gap:.35em;display:inline-flex}.ca-value[data-v-b43dabdd]{font-family:var(--mw-font-mono,monospace);font-size:inherit}.ca-copy[data-v-b43dabdd]{color:var(--muted,#888);cursor:pointer;transition:color var(--transition-base);background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.ca-copy[data-v-b43dabdd]:hover{color:var(--text,#f0f0f0)}.ca-copy--copied[data-v-b43dabdd]{color:var(--accent,#6366f1)}.ca-icon[data-v-b43dabdd]{display:block}.el-root[data-v-073d1bbe]{font-family:monospace;font-size:inherit;color:var(--accent,#6366f1);text-underline-offset:2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;transition:color .15s}.el-root[data-v-073d1bbe]:hover{color:var(--text,#f0f0f0);text-decoration-style:solid}.status-widget[data-v-6436368e]{align-items:center;gap:var(--space-2xs);color:inherit;font-size:var(--font-size-sm);opacity:.85;transition:opacity var(--transition-base);text-decoration:none;display:inline-flex}.status-widget[data-v-6436368e]:hover{opacity:1}.status-widget__dot[data-v-6436368e]{width:var(--space-2xs);height:var(--space-2xs);border-radius:50%;flex-shrink:0}.status-widget--ok .status-widget__dot[data-v-6436368e]{background:var(--ok)}.status-widget--degraded .status-widget__dot[data-v-6436368e]{background:var(--warning)}.status-widget--error .status-widget__dot[data-v-6436368e]{background:var(--danger)}
 /*$vite$:1*/

package/dist/components/AppFooter.vue.d.ts

@@ -4,6 +4,16 @@ type __VLS_Props = {
     variant?: PanelVariant;
     /** Per-instance colour overrides; token values are used by default. */
     colors?: PanelColors;
+    /**
+     * When set, renders a "Documentation" link pointing at this URL.
+     * Use `VITE_DOCS_URL` in the consuming app to make this configurable per deployment.
+     */
+    docsUrl?: string;
+    /**
+     * When set, renders a "Developer docs" link pointing at this URL.
+     * Use `VITE_DEV_URL` in the consuming app to make this configurable per deployment.
+     */
+    devUrl?: string;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {

package/dist/index.d.ts

@@ -19,4 +19,5 @@ export { useColorMode } from './composables/useColorMode.js';
 export type { ColorMode } from './composables/useColorMode.js';
 export type { PanelVariant, PanelColors } from './internal/panel.js';
 export { isStatusLevel, parseSnapshot } from './status.js';
+export { safeHref } from './safe-href.js';
 export type { StatusLevel, StatusComponent, StatusGroup, StatusSnapshot } from './status.js';

package/dist/safe-href.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Validate a consumer-supplied URL before binding it to an `href` attribute.
+ *
+ * Allows `https:` (all hosts) and `http:` on `localhost`/`127.0.0.1` (dev only).
+ * Returns `undefined` for `javascript:`, `data:`, or any other disallowed scheme so Vue
+ * renders no `href` attribute rather than a potentially-executable link.
+ */
+export declare function safeHref(url: string | undefined | null): string | undefined;

package/dist/status.d.ts

@@ -21,7 +21,9 @@ export interface StatusSnapshot {
 export declare function isStatusLevel(s: unknown): s is StatusLevel;
 /**
  * Parse and validate a raw API response as a `StatusSnapshot`.
- * Returns `null` if the required fields are absent or have unexpected types,
- * so callers can treat an invalid response the same as a network error.
+ * Returns `null` if the required top-level fields are absent or have unexpected types.
+ * Per-group and per-component fields are sanitized: unknown status values are coerced to
+ * `'unknown'`; name fields are stripped of HTML-sensitive characters. Groups or components
+ * with empty/missing names are dropped.
  */
 export declare function parseSnapshot(raw: unknown): StatusSnapshot | null;

package/dist/ui.js

@@ -1,6 +1,6 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, onMounted as ee, onUnmounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, useModel as te, vModelSelect as ne, watch as re, withDirectives as ie } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, onMounted as ee, onUnmounted as te, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, vModelSelect as ne, watch as re, withDirectives as ie } from "vue";
 //#region src/internal/panel.ts
-function g(e, t) {
+function _(e, t) {
 	let n;
 	return n = e === "transparent" ? {
 		"--_bg": "transparent",
@@ -35,33 +35,33 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 		}
 	},
 	setup(e) {
-		let n = e, a = t(() => g(n.variant, n.colors));
-		return (t, n) => (d(), r("header", {
+		let n = e, a = t(() => _(n.variant, n.colors));
+		return (t, n) => (u(), r("header", {
 			class: c(["mw-header", [`mw-header--${e.variant}`, { "mw-header--sticky": e.sticky }]]),
 			style: l(a.value)
 		}, [
-			i("div", ae, [m(t.$slots, "brand", {}, void 0, !0)]),
-			i("div", oe, [m(t.$slots, "default", {}, void 0, !0)]),
-			i("div", se, [m(t.$slots, "actions", {}, void 0, !0)])
+			i("div", ae, [p(t.$slots, "brand", {}, void 0, !0)]),
+			i("div", oe, [p(t.$slots, "default", {}, void 0, !0)]),
+			i("div", se, [p(t.$slots, "actions", {}, void 0, !0)])
 		], 6));
 	}
-}), _ = (e, t) => {
+}), v = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, v = /*#__PURE__*/ _(ce, [["__scopeId", "data-v-ad7cd1c5"]]), y = {
+}, le = /*#__PURE__*/ v(ce, [["__scopeId", "data-v-9b9826d5"]]), ue = {
 	key: 0,
 	class: "mw-sidebar__head"
-}, b = {
+}, de = {
 	class: "mw-sidebar__nav",
 	"aria-label": "Primary"
-}, x = {
+}, y = {
 	key: 1,
 	class: "mw-sidebar__body"
-}, S = {
+}, b = {
 	key: 2,
 	class: "mw-sidebar__foot"
-}, C = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}, x = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "AppSidebar",
 	props: {
 		variant: { default: "dark" },
@@ -70,45 +70,75 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 	},
 	setup(e) {
 		let a = e, o = t(() => {
-			let e = g(a.variant, a.colors);
+			let e = _(a.variant, a.colors);
 			return a.width && (e["--mw-sidebar-width"] = a.width), e;
 		});
-		return (t, a) => (d(), r("aside", {
+		return (t, a) => (u(), r("aside", {
 			class: c(["mw-sidebar", `mw-sidebar--${e.variant}`]),
 			style: l(o.value)
 		}, [
-			t.$slots.head ? (d(), r("div", y, [m(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
-			i("nav", b, [m(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.body ? (d(), r("div", x, [m(t.$slots, "body", {}, void 0, !0)])) : n("", !0),
-			t.$slots.foot ? (d(), r("div", S, [m(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
+			t.$slots.head ? (u(), r("div", ue, [p(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
+			i("nav", de, [p(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.body ? (u(), r("div", y, [p(t.$slots, "body", {}, void 0, !0)])) : n("", !0),
+			t.$slots.foot ? (u(), r("div", b, [p(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
 		], 6));
 	}
-}), [["__scopeId", "data-v-23c3c7f3"]]), w = { class: "mw-footer__start" }, T = { class: "mw-footer__center" }, E = { class: "mw-footer__end" }, D = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-a2b8405c"]]);
+//#endregion
+//#region src/safe-href.ts
+function S(e) {
+	if (e) try {
+		let t = new URL(e);
+		if (t.protocol === "https:" || t.protocol === "http:" && (t.hostname === "localhost" || t.hostname === "127.0.0.1")) return e;
+	} catch {}
+}
+//#endregion
+//#region src/components/AppFooter.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "mw-footer__start" }, w = { class: "mw-footer__center" }, T = { class: "mw-footer__end" }, E = ["href"], D = ["href"], O = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "AppFooter",
 	props: {
 		variant: { default: "transparent" },
-		colors: {}
+		colors: {},
+		docsUrl: {},
+		devUrl: {}
 	},
 	setup(e) {
-		let n = e, a = t(() => g(n.variant, n.colors));
-		return (t, n) => (d(), r("footer", {
+		let a = e, o = t(() => _(a.variant, a.colors));
+		return (t, a) => (u(), r("footer", {
 			class: c(["mw-footer", `mw-footer--${e.variant}`]),
-			style: l(a.value)
+			style: l(o.value)
 		}, [
-			i("div", w, [m(t.$slots, "start", {}, void 0, !0)]),
-			i("div", T, [m(t.$slots, "default", {}, void 0, !0)]),
-			i("div", E, [m(t.$slots, "end", {}, void 0, !0)])
+			i("div", C, [p(t.$slots, "start", {}, void 0, !0)]),
+			i("div", w, [p(t.$slots, "default", {}, void 0, !0)]),
+			i("div", T, [
+				p(t.$slots, "end", {}, void 0, !0),
+				e.docsUrl ? (u(), r("a", {
+					key: 0,
+					href: h(S)(e.docsUrl),
+					target: "_blank",
+					rel: "noopener noreferrer",
+					class: "mw-footer__docs-link"
+				}, "Documentation", 8, E)) : n("", !0),
+				e.devUrl ? (u(), r("a", {
+					key: 1,
+					href: h(S)(e.devUrl),
+					target: "_blank",
+					rel: "noopener noreferrer",
+					"aria-label": "Developer documentation",
+					class: "mw-footer__docs-link"
+				}, "Developer docs", 8, D)) : n("", !0)
+			])
 		], 6));
 	}
-}), [["__scopeId", "data-v-c646b8e1"]]), O = {
+}), [["__scopeId", "data-v-979579a9"]]), k = {
 	class: "mw-mode",
 	role: "group",
 	"aria-label": "Colour mode"
-}, k = [
+}, A = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], A = { "aria-hidden": "true" }, j = { class: "mw-mode__label" }, M = /*#__PURE__*/ _(/* @__PURE__ */ o({
+], j = { "aria-hidden": "true" }, M = { class: "mw-mode__label" }, N = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "ColorModeControl",
 	props: {
 		modelValue: {},
@@ -129,16 +159,16 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 			dark: "☾",
 			system: "🖵"
 		};
-		return (o, s) => (d(), r("div", O, [(d(!0), r(e, null, p(t.modes, (e) => (d(), r("button", {
+		return (o, s) => (u(), r("div", k, [(u(!0), r(e, null, f(t.modes, (e) => (u(), r("button", {
 			key: e,
 			type: "button",
 			class: c(["mw-mode__btn", { "is-active": t.modelValue === e }]),
 			"aria-pressed": t.modelValue === e,
 			title: n[e],
 			onClick: (t) => o.$emit("update:modelValue", e)
-		}, [i("span", A, h(a[e]), 1), i("span", j, h(n[e]), 1)], 10, k))), 128))]));
+		}, [i("span", j, m(a[e]), 1), i("span", M, m(n[e]), 1)], 10, A))), 128))]));
 	}
-}), [["__scopeId", "data-v-186f8312"]]), N = ["type", "disabled"], P = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-e2ea0d79"]]), P = ["type", "disabled"], F = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "UiButton",
 	props: {
 		variant: { default: "primary" },
@@ -149,29 +179,29 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 		}
 	},
 	setup(e) {
-		return (t, n) => (d(), r("button", {
+		return (t, n) => (u(), r("button", {
 			type: e.type,
 			disabled: e.disabled,
 			class: c(["mw-btn", `mw-btn--${e.variant}`])
-		}, [m(t.$slots, "default", {}, void 0, !0)], 10, N));
+		}, [p(t.$slots, "default", {}, void 0, !0)], 10, P));
 	}
-}), [["__scopeId", "data-v-299de2c3"]]), F = { class: "mw-card" }, I = {
+}), [["__scopeId", "data-v-bc33cc23"]]), I = { class: "mw-card" }, L = {
 	key: 0,
 	class: "mw-card__header"
-}, L = { class: "mw-card__title" }, R = { class: "mw-card__body" }, z = {
+}, R = { class: "mw-card__title" }, z = { class: "mw-card__body" }, B = {
 	key: 1,
 	class: "mw-card__footer"
-}, B = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}, V = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "UiCard",
 	props: { title: {} },
 	setup(e) {
-		return (t, a) => (d(), r("section", F, [
-			e.title || t.$slots.header ? (d(), r("header", I, [m(t.$slots, "header", {}, () => [i("h3", L, h(e.title), 1)], !0)])) : n("", !0),
-			i("div", R, [m(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.footer ? (d(), r("footer", z, [m(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
+		return (t, a) => (u(), r("section", I, [
+			e.title || t.$slots.header ? (u(), r("header", L, [p(t.$slots, "header", {}, () => [i("h3", R, m(e.title), 1)], !0)])) : n("", !0),
+			i("div", z, [p(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.footer ? (u(), r("footer", B, [p(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-fd2fd7ab"]]), V = { class: "mw-select" }, H = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-883f87f5"]]), H = { class: "mw-select" }, fe = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "UiSelect",
 	props: {
@@ -180,8 +210,8 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 	},
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = te(e, "modelValue");
-		return (e, n) => (d(), r("div", V, [ie(i("select", s(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [m(e.$slots, "default", {}, void 0, !0)], 16), [[ne, t.value]]), n[1] ||= i("svg", {
+		let t = g(e, "modelValue");
+		return (e, n) => (u(), r("div", H, [ie(i("select", s(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [p(e.$slots, "default", {}, void 0, !0)], 16), [[ne, t.value]]), n[1] ||= i("svg", {
 			class: "mw-select__chevron",
 			xmlns: "http://www.w3.org/2000/svg",
 			width: "12",
@@ -190,7 +220,7 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 			"aria-hidden": "true"
 		}, [i("path", { d: "M1 1l5 5 5-5" })], -1)]));
 	}
-}), [["__scopeId", "data-v-b9468387"]]), U = ["role"], W = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-7e206184"]]), pe = ["role"], me = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "UiNotice",
 	props: { type: {} },
 	setup(e) {
@@ -198,16 +228,16 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 			if (n.type === "error") return "alert";
 			if (n.type === "ok") return "status";
 		});
-		return (t, n) => (d(), r("p", {
+		return (t, n) => (u(), r("p", {
 			class: c(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
 			role: i.value
-		}, [m(t.$slots, "default", {}, void 0, !0)], 10, U));
+		}, [p(t.$slots, "default", {}, void 0, !0)], 10, pe));
 	}
-}), [["__scopeId", "data-v-6f53d0be"]]), le = ["disabled", "aria-current"], ue = {
+}), [["__scopeId", "data-v-ee7fffb1"]]), he = ["disabled", "aria-current"], ge = {
 	key: 0,
 	class: "sidebar-item__icon",
 	"aria-hidden": "true"
-}, G = { class: "sidebar-item__label" }, de = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}, _e = { class: "sidebar-item__label" }, ve = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "SidebarItem",
 	props: {
 		label: {},
@@ -222,14 +252,14 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 		}
 	},
 	setup(e) {
-		return (t, a) => (d(), r("button", {
+		return (t, a) => (u(), r("button", {
 			type: "button",
 			class: c(["sidebar-item", { "is-active": e.active }]),
 			disabled: e.disabled,
 			"aria-current": e.active ? "page" : void 0
-		}, [e.icon ? (d(), r("span", ue, h(e.icon), 1)) : n("", !0), i("span", G, h(e.label), 1)], 10, le));
+		}, [e.icon ? (u(), r("span", ge, m(e.icon), 1)) : n("", !0), i("span", _e, m(e.label), 1)], 10, he));
 	}
-}), [["__scopeId", "data-v-e15afdf7"]]), fe = ["aria-label"], pe = ["aria-current", "onClick"], me = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-8da2d583"]]), ye = ["aria-label"], be = ["aria-current", "onClick"], xe = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "AppTabNav",
 	props: {
 		tabs: {},
@@ -239,18 +269,18 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
 		let i = n;
-		return (n, a) => (d(), r("nav", {
+		return (n, a) => (u(), r("nav", {
 			class: "mw-tab-nav",
 			"aria-label": t.ariaLabel
-		}, [(d(!0), r(e, null, p(t.tabs, (e) => (d(), r("button", {
+		}, [(u(!0), r(e, null, f(t.tabs, (e) => (u(), r("button", {
 			key: e.id,
 			type: "button",
 			class: c(["mw-tab-nav__tab", { "mw-tab-nav__tab--active": t.modelValue === e.id }]),
 			"aria-current": t.modelValue === e.id ? "page" : void 0,
 			onClick: (t) => i("update:modelValue", e.id)
-		}, h(e.label), 11, pe))), 128))], 8, fe));
+		}, m(e.label), 11, be))), 128))], 8, ye));
 	}
-}), [["__scopeId", "data-v-88758ede"]]), he = { class: "ca-root" }, ge = ["title"], _e = ["title", "aria-label"], ve = {
+}), [["__scopeId", "data-v-97d31503"]]), Se = { class: "ca-root" }, Ce = ["title"], we = ["title", "aria-label"], Te = {
 	key: 0,
 	class: "ca-icon",
 	viewBox: "0 0 24 24",
@@ -262,7 +292,7 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
-}, ye = {
+}, Ee = {
 	key: 1,
 	class: "ca-icon",
 	viewBox: "0 0 24 24",
@@ -274,7 +304,7 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
-}, be = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}, De = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "CopyableAddress",
 	props: {
 		address: {},
@@ -286,7 +316,7 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 		label: { default: "Copy" }
 	},
 	setup(e) {
-		let n = e, o = f(!1), s = t(() => {
+		let n = e, o = d(!1), s = t(() => {
 			if (!n.truncate) return n.address;
 			let [e, t] = n.chars;
 			return `${n.address.slice(0, e)}…${n.address.slice(-t)}`;
@@ -296,25 +326,25 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 				o.value = !1;
 			}, 1500);
 		}
-		return (t, n) => (d(), r("span", he, [i("span", {
+		return (t, n) => (u(), r("span", Se, [i("span", {
 			class: "ca-value",
 			title: e.address
-		}, [m(t.$slots, "default", {}, () => [a(h(s.value), 1)], !0)], 8, ge), i("button", {
+		}, [p(t.$slots, "default", {}, () => [a(m(s.value), 1)], !0)], 8, Ce), i("button", {
 			type: "button",
 			class: c(["ca-copy", { "ca-copy--copied": o.value }]),
 			title: o.value ? "Copied!" : e.label,
 			"aria-label": o.value ? "Copied" : e.label,
 			onClick: l
-		}, [o.value ? (d(), r("svg", ve, [...n[0] ||= [i("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (d(), r("svg", ye, [...n[1] ||= [i("rect", {
+		}, [o.value ? (u(), r("svg", Te, [...n[0] ||= [i("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (u(), r("svg", Ee, [...n[1] ||= [i("rect", {
 			x: "9",
 			y: "9",
 			width: "13",
 			height: "13",
 			rx: "2",
 			ry: "2"
-		}, null, -1), i("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }, null, -1)]]))], 10, _e)]));
+		}, null, -1), i("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }, null, -1)]]))], 10, we)]));
 	}
-}), [["__scopeId", "data-v-08c3420b"]]), xe = ["href", "title"], Se = /*#__PURE__*/ _(/* @__PURE__ */ o({
+}), [["__scopeId", "data-v-b43dabdd"]]), Oe = ["href", "title"], ke = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "ExplorerLink",
 	props: {
 		href: {},
@@ -332,31 +362,62 @@ var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se
 			let [e, t] = n.chars;
 			return `${n.value.slice(0, e)}…${n.value.slice(-t)}`;
 		});
-		return (t, n) => (d(), r("a", {
+		return (t, n) => (u(), r("a", {
 			class: "el-root",
-			href: e.href,
+			href: h(S)(e.href),
 			target: "_blank",
 			rel: "noopener noreferrer",
 			title: e.value
-		}, [m(t.$slots, "default", {}, () => [a(h(i.value), 1)], !0)], 8, xe));
+		}, [p(t.$slots, "default", {}, () => [a(m(i.value), 1)], !0)], 8, Oe));
 	}
-}), [["__scopeId", "data-v-7a44607e"]]), Ce = /* @__PURE__ */ new Set([
+}), [["__scopeId", "data-v-073d1bbe"]]), Ae = /* @__PURE__ */ new Set([
 	"operational",
 	"degraded",
 	"down",
 	"unknown"
 ]);
-function K(e) {
-	return typeof e == "string" && Ce.has(e);
+function U(e) {
+	return typeof e == "string" && Ae.has(e);
+}
+function W(e) {
+	return U(e) ? e : "unknown";
+}
+function G(e) {
+	return typeof e != "string" || e.trim() === "" ? "" : e.replace(/[<>&"]/g, "");
 }
-function q(e) {
+function je(e) {
+	if (typeof e != "object" || !e) return null;
+	let t = e, n = G(t.name);
+	return n ? {
+		name: n,
+		status: W(t.status)
+	} : null;
+}
+function Me(e) {
+	if (typeof e != "object" || !e) return null;
+	let t = e, n = G(t.name);
+	if (!n) return null;
+	let r = Array.isArray(t.components) ? t.components.map(je).filter((e) => e !== null) : [];
+	return {
+		name: n,
+		status: W(t.status),
+		components: r
+	};
+}
+function K(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
-	return !K(t.overall) || typeof t.generated_at != "string" || !Array.isArray(t.groups) ? null : e;
+	if (!U(t.overall) || typeof t.generated_at != "string" || !Array.isArray(t.groups)) return null;
+	let n = t.groups.map(Me).filter((e) => e !== null);
+	return {
+		generated_at: t.generated_at,
+		overall: t.overall,
+		groups: n
+	};
 }
 //#endregion
 //#region src/components/StatusWidget.vue?vue&type=script&setup=true&lang.ts
-var we = ["href", "title"], Te = { class: "status-widget__label" }, Ee = /*#__PURE__*/ _(/* @__PURE__ */ o({
+var Ne = ["href", "title"], q = { class: "status-widget__label" }, Pe = /*#__PURE__*/ v(/* @__PURE__ */ o({
 	__name: "StatusWidget",
 	props: {
 		apiUrl: { default: "https://status.meddleware.co.uk/api/status" },
@@ -374,12 +435,12 @@ var we = ["href", "title"], Te = { class: "status-widget__label" }, Ee = /*#__PU
 			degraded: "Degraded",
 			down: "Major outage",
 			unknown: "Status unknown"
-		}, o = f("ok"), s = f("All systems operational"), l = null;
-		async function p() {
+		}, o = d("ok"), s = d("All systems operational"), l = null;
+		async function f() {
 			try {
 				let e = await fetch(t.apiUrl);
 				if (!e.ok) throw Error(`HTTP ${e.status}`);
-				let r = q(await e.json());
+				let r = K(await e.json());
 				if (!r) throw Error("unexpected response shape");
 				o.value = n[r.overall], s.value = a[r.overall];
 			} catch {
@@ -387,41 +448,41 @@ var we = ["href", "title"], Te = { class: "status-widget__label" }, Ee = /*#__PU
 			}
 		}
 		return ee(() => {
-			p(), l = setInterval(p, t.pollInterval);
-		}), u(() => {
+			f(), l = setInterval(f, t.pollInterval);
+		}), te(() => {
 			l !== null && clearInterval(l);
-		}), (t, n) => (d(), r("a", {
-			href: e.href,
+		}), (t, n) => (u(), r("a", {
+			href: h(S)(e.href),
 			target: "_blank",
-			rel: "noopener",
+			rel: "noopener noreferrer",
 			class: c(["status-widget", `status-widget--${o.value}`]),
 			title: `Platform status: ${s.value}`
 		}, [n[0] ||= i("span", {
 			class: "status-widget__dot",
 			"aria-hidden": "true"
-		}, null, -1), i("span", Te, h(s.value), 1)], 10, we));
+		}, null, -1), i("span", q, m(s.value), 1)], 10, Ne));
 	}
-}), [["__scopeId", "data-v-20197983"]]), J = {
+}), [["__scopeId", "data-v-6436368e"]]), J = {
 	mainnet: "https://suivision.xyz",
 	testnet: "https://testnet.suivision.xyz",
 	devnet: "https://devnet.suivision.xyz"
 };
-function De(e, t, n = "testnet") {
+function Fe(e, t, n = "testnet") {
 	return `${J[n] ?? J.testnet}/${e}/${t}`;
 }
 //#endregion
 //#region src/composables/useColorMode.ts
-var Y = "mw-color-mode", X = f("system"), Z = !1;
-function Oe() {
+var Y = "mw-color-mode", X = d("system"), Z = !1;
+function Ie() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 function Q(e) {
-	return e === "dark" || e === "system" && Oe();
+	return e === "dark" || e === "system" && Ie();
 }
 function $(e) {
 	typeof document > "u" || document.documentElement.setAttribute("data-theme", Q(e) ? "dark" : "light");
 }
-function ke(e = "system") {
+function Le(e = "system") {
 	if (!Z) {
 		Z = !0;
 		let t = null;
@@ -451,4 +512,4 @@ function ke(e = "system") {
 	};
 }
 //#endregion
-export { D as AppFooter, v as AppHeader, C as AppSidebar, me as AppTabNav, M as ColorModeControl, be as CopyableAddress, Se as ExplorerLink, de as SidebarItem, Ee as StatusWidget, P as UiButton, B as UiCard, W as UiNotice, H as UiSelect, K as isStatusLevel, q as parseSnapshot, De as suiExplorerUrl, ke as useColorMode };
+export { O as AppFooter, le as AppHeader, x as AppSidebar, xe as AppTabNav, N as ColorModeControl, De as CopyableAddress, ke as ExplorerLink, ve as SidebarItem, Pe as StatusWidget, F as UiButton, V as UiCard, me as UiNotice, fe as UiSelect, U as isStatusLevel, K as parseSnapshot, S as safeHref, Fe as suiExplorerUrl, Le as useColorMode };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@meddleware/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Shared Vue 3 component library for @meddleware UIs \u2014 layout shell (header/sidebar/footer), colour-mode control, and primitives. Built on @meddleware/design-tokens.",
+  "homepage": "https://docs.meddleware.co.uk/",
   "license": "0BSD",
   "type": "module",
   "sideEffects": [
@@ -30,13 +31,13 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.2"
+    "@meddleware/design-tokens": "^0.1.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.8",
     "typescript": "^6.0.0",
     "vite": "^8.2.2",
-    "vitest": "~4.1.11",
+    "vitest": "~5.0.1",
     "vue": "^3.5.42",
     "vue-tsc": "~3.3.11"
   },