@viglet/viglet-design-system 2026.3.9 → 2026.3.11

package/dist/vite/boot-loader.d.ts

@@ -50,6 +50,35 @@ export interface VigletBootLoaderOptions {
      * Default: `"__VIGLET_LOADING_TEST__"`.
      */
     testFlag?: string;
+    /**
+     * Accessible name for the loader's status region — the whole phrase, not a
+     * word slotted into one. Default: `"Loading <title>"`.
+     *
+     * The loader is HTML written at build time and runs before any bundle, so it
+     * cannot ask i18next for anything; without this the first thing a screen
+     * reader hears in a Portuguese product is English. It is the complete label
+     * rather than a `loading` word plus the title, because where the product's
+     * name falls in the sentence is not the same in every language.
+     *
+     * ```ts
+     * vigletBootLoader({ …, loadingLabel: "Carregando o Viglet Turing ES" });
+     * ```
+     */
+    loadingLabel?: string;
+    /**
+     * Accessible names per language, for a product that ships more than one.
+     *
+     * The inline script already runs before paint, so it can read
+     * `navigator.language` and set the label from this map. Keys are language
+     * tags: an exact match wins (`"pt-BR"`), then the primary subtag (`"pt"`).
+     * Nothing matching leaves {@link loadingLabel} — or the English default —
+     * standing, which is also what a reader gets with scripting off.
+     *
+     * ```ts
+     * vigletBootLoader({ …, loadingLabels: { en: "Loading Turing", pt: "Carregando o Turing" } });
+     * ```
+     */
+    loadingLabels?: Record<string, string>;
     /**
      * HTML comment that the plugin replaces with the boot-loader markup. Put
      * it inside `<div id="root">` in your `index.html` (or `marketing.html`).
@@ -65,12 +94,14 @@ export interface VigletBootLoaderOptions {
  * build/dev time, so the loader visuals stay identical across the ecosystem and
  * there is a single place to evolve the design.
  *
- * Four of the seven consumers take it: Turing, Shio, Dumont and the Cloud Home.
+ * Four of the nine consumers take it: Turing, Shio, Dumont and the Cloud Home.
  * The Cloud Console and Schools are Next applications and have no Vite build to
  * plug into — they render their own first paint, which is what a server-rendered
  * page does instead of a boot loader. The Roadkeep GUI has a Vite build and
  * still does not take it: it ships as a desktop application, so its bundle is on
- * disk and nothing is waiting on a fetch to paint.
+ * disk and nothing is waiting on a fetch to paint. The Openviglet Website has
+ * one too and is a marketing site, where a boot loader is a spinner in front of
+ * copy; Viglet Docs is Docusaurus and has no Vite build at all.
  *
  * What the plugin injects:
  *

package/dist/vite/boot-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boot-loader.d.ts","sourceRoot":"","sources":["../../src/vite/boot-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4B,MAAM,EAAE,MAAM,MAAM,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,MAAM,CAsEzE"}
+{"version":3,"file":"boot-loader.d.ts","sourceRoot":"","sources":["../../src/vite/boot-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4B,MAAM,EAAE,MAAM,MAAM,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,MAAM,CAuFzE"}

package/dist/vite.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){let{title:n,subtitle:o,color:s,colorDark:c=s,prefix:l=`viglet`,storageKey:u=`vite-ui-theme`,testFlag:d=`__VIGLET_LOADING_TEST__`,placeholder:f=`<!--viglet-boot-loader-->`}=e,p=t(s,`color`),m=t(c,`colorDark`);if(!/^[a-zA-Z][\w-]*$/.test(l))throw Error(`vigletBootLoader: prefix must start with a letter and hold only letters, digits, "-" or "_" — received ${JSON.stringify(l)}.`);let h={pfx:l,title:n,subtitle:o,color:s,colorDark:c,rgb:p,rgbDark:m,storageKey:u,testFlag:d},g=r(h),_=i(h),v=a(h);return{name:`viglet-boot-loader`,transformIndexHtml(e){let t;if(e.includes(f))t=e.replace(f,()=>v);else{let n=/(<div\b[^>]*\bid=["']root["'][^>]*>)/;n.test(e)?t=e.replace(n,e=>`${e}\n${v}\n`):(console.warn(`[viglet-boot-loader] no injection point found: the HTML holds neither the ${f} placeholder nor a <div id="root">, so no boot loader was injected.`),t=e)}return{html:t,tags:[{tag:`style`,attrs:{"data-viglet-boot-loader":``},children:g,injectTo:`head`},{tag:`script`,children:_,injectTo:`head`}]}}}}function t(e,t){let r=n(e);if(r)return r;throw Error(`vigletBootLoader: ${t} must be a hex colour like "#4169E1" or "#41E" — received ${JSON.stringify(e)}. Named CSS colours and rgb()/hsl() cannot be read for the loader's rgba tints.`)}function n(e){if(!e)return null;let t=/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());if(t){let[,e,n,r]=t;return`${Number.parseInt(e+e,16)}, ${Number.parseInt(n+n,16)}, ${Number.parseInt(r+r,16)}`}let n=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e.trim());if(n){let[,e,t,r]=n;return`${Number.parseInt(e,16)}, ${Number.parseInt(t,16)}, ${Number.parseInt(r,16)}`}return null}function r({pfx:e,color:t,colorDark:n,rgb:r}){return`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){let{title:n,subtitle:o,color:s,colorDark:c=s,prefix:l=`viglet`,storageKey:u=`vite-ui-theme`,testFlag:d=`__VIGLET_LOADING_TEST__`,placeholder:f=`<!--viglet-boot-loader-->`,loadingLabel:p,loadingLabels:m}=e,h=t(s,`color`),g=t(c,`colorDark`);if(!/^[a-zA-Z][\w-]*$/.test(l))throw Error(`vigletBootLoader: prefix must start with a letter and hold only letters, digits, "-" or "_" — received ${JSON.stringify(l)}.`);let _={pfx:l,title:n,subtitle:o,color:s,colorDark:c,rgb:h,rgbDark:g,storageKey:u,testFlag:d,loadingLabel:p??`Loading ${n}`,loadingLabels:m},v=r(_),y=i(_),b=a(_);return{name:`viglet-boot-loader`,transformIndexHtml(e){let t;if(e.includes(f))t=e.replace(f,()=>b);else{let n=/(<div\b[^>]*\bid=["']root["'][^>]*>)/;n.test(e)?t=e.replace(n,e=>`${e}\n${b}\n`):(console.warn(`[viglet-boot-loader] no injection point found: the HTML holds neither the ${f} placeholder nor a <div id="root">, so no boot loader was injected.`),t=e)}return{html:t,tags:[{tag:`style`,attrs:{"data-viglet-boot-loader":``},children:v,injectTo:`head`},{tag:`script`,children:y,injectTo:`head`}]}}}}function t(e,t){let r=n(e);if(r)return r;throw Error(`vigletBootLoader: ${t} must be a hex colour like "#4169E1" or "#41E" — received ${JSON.stringify(e)}. Named CSS colours and rgb()/hsl() cannot be read for the loader's rgba tints.`)}function n(e){if(!e)return null;let t=/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());if(t){let[,e,n,r]=t;return`${Number.parseInt(e+e,16)}, ${Number.parseInt(n+n,16)}, ${Number.parseInt(r+r,16)}`}let n=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e.trim());if(n){let[,e,t,r]=n;return`${Number.parseInt(e,16)}, ${Number.parseInt(t,16)}, ${Number.parseInt(r,16)}`}return null}function r({pfx:e,color:t,colorDark:n,rgb:r}){return`
     html, body { margin: 0; padding: 0; height: 100%; }
     /* Boot-loader paints body only for the pre-React loading screen. It must
        NOT own "body { color }": that rule is unlayered, so it beats the app's
@@ -140,8 +140,19 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e)
       border-radius: 999px; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
       z-index: 10000;
     }
-  `.trim()}function i({pfx:e,storageKey:t,testFlag:n}){return`
-    (function () {
+  `.trim()}function i({pfx:e,storageKey:t,testFlag:n,loadingLabels:r}){return`
+    (function () {${r?`
+      try {
+        var labels = ${JSON.stringify(r)};
+        var tag = String(navigator.language || "");
+        var label = labels[tag] || labels[tag.split("-")[0]];
+        if (label) {
+          document.addEventListener("DOMContentLoaded", function () {
+            var region = document.getElementById(${JSON.stringify(e+`-boot-loader`)});
+            if (region) region.setAttribute("aria-label", label);
+          });
+        }
+      } catch (e) { /* ignore */ }`:``}
       try {
         var stored = localStorage.getItem(${JSON.stringify(t)});
         var prefersLight = stored === "light"
@@ -166,8 +177,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e)
         }
       } catch (e) { /* ignore */ }
     })();
-  `.trim()}function a({pfx:e,title:t,subtitle:n}){return`
-<div id="${e}-boot-loader" role="status" aria-live="polite" aria-label="Loading ${o(t)}">
+  `.trim()}function a({pfx:e,title:t,subtitle:n,loadingLabel:r}){return`
+<div id="${e}-boot-loader" role="status" aria-live="polite" aria-label="${o(r)}">
   <div class="${e}-boot-stage">
     <div class="${e}-boot-ring"></div>
     <div class="${e}-boot-ring delay-1"></div>

package/dist/vite.es.js

@@ -1,37 +1,39 @@
 //#region src/vite/boot-loader.ts
 function e(e) {
-	let { title: n, subtitle: o, color: s, colorDark: c = s, prefix: l = "viglet", storageKey: u = "vite-ui-theme", testFlag: d = "__VIGLET_LOADING_TEST__", placeholder: f = "<!--viglet-boot-loader-->" } = e, p = t(s, "color"), m = t(c, "colorDark");
+	let { title: n, subtitle: o, color: s, colorDark: c = s, prefix: l = "viglet", storageKey: u = "vite-ui-theme", testFlag: d = "__VIGLET_LOADING_TEST__", placeholder: f = "<!--viglet-boot-loader-->", loadingLabel: p, loadingLabels: m } = e, h = t(s, "color"), g = t(c, "colorDark");
 	if (!/^[a-zA-Z][\w-]*$/.test(l)) throw Error(`vigletBootLoader: prefix must start with a letter and hold only letters, digits, "-" or "_" — received ${JSON.stringify(l)}.`);
-	let h = {
+	let _ = {
 		pfx: l,
 		title: n,
 		subtitle: o,
 		color: s,
 		colorDark: c,
-		rgb: p,
-		rgbDark: m,
+		rgb: h,
+		rgbDark: g,
 		storageKey: u,
-		testFlag: d
-	}, g = r(h), _ = i(h), v = a(h);
+		testFlag: d,
+		loadingLabel: p ?? `Loading ${n}`,
+		loadingLabels: m
+	}, v = r(_), y = i(_), b = a(_);
 	return {
 		name: "viglet-boot-loader",
 		transformIndexHtml(e) {
 			let t;
-			if (e.includes(f)) t = e.replace(f, () => v);
+			if (e.includes(f)) t = e.replace(f, () => b);
 			else {
 				let n = /(<div\b[^>]*\bid=["']root["'][^>]*>)/;
-				n.test(e) ? t = e.replace(n, (e) => `${e}\n${v}\n`) : (console.warn(`[viglet-boot-loader] no injection point found: the HTML holds neither the ${f} placeholder nor a <div id="root">, so no boot loader was injected.`), t = e);
+				n.test(e) ? t = e.replace(n, (e) => `${e}\n${b}\n`) : (console.warn(`[viglet-boot-loader] no injection point found: the HTML holds neither the ${f} placeholder nor a <div id="root">, so no boot loader was injected.`), t = e);
 			}
 			return {
 				html: t,
 				tags: [{
 					tag: "style",
 					attrs: { "data-viglet-boot-loader": "" },
-					children: g,
+					children: v,
 					injectTo: "head"
 				}, {
 					tag: "script",
-					children: _,
+					children: y,
 					injectTo: "head"
 				}]
 			};
@@ -202,9 +204,20 @@ function r({ pfx: e, color: t, colorDark: n, rgb: r }) {
     }
   `.trim();
 }
-function i({ pfx: e, storageKey: t, testFlag: n }) {
+function i({ pfx: e, storageKey: t, testFlag: n, loadingLabels: r }) {
 	return `
-    (function () {
+    (function () {${r ? `
+      try {
+        var labels = ${JSON.stringify(r)};
+        var tag = String(navigator.language || "");
+        var label = labels[tag] || labels[tag.split("-")[0]];
+        if (label) {
+          document.addEventListener("DOMContentLoaded", function () {
+            var region = document.getElementById(${JSON.stringify(e + "-boot-loader")});
+            if (region) region.setAttribute("aria-label", label);
+          });
+        }
+      } catch (e) { /* ignore */ }` : ""}
       try {
         var stored = localStorage.getItem(${JSON.stringify(t)});
         var prefersLight = stored === "light"
@@ -231,9 +244,9 @@ function i({ pfx: e, storageKey: t, testFlag: n }) {
     })();
   `.trim();
 }
-function a({ pfx: e, title: t, subtitle: n }) {
+function a({ pfx: e, title: t, subtitle: n, loadingLabel: r }) {
 	return `
-<div id="${e}-boot-loader" role="status" aria-live="polite" aria-label="Loading ${o(t)}">
+<div id="${e}-boot-loader" role="status" aria-live="polite" aria-label="${o(r)}">
   <div class="${e}-boot-stage">
     <div class="${e}-boot-ring"></div>
     <div class="${e}-boot-ring delay-1"></div>

package/docs/BENTO-AUTHORING.md

@@ -15,25 +15,51 @@ or by the product passing a prop. Almost all of the divergence between two produ
 from this layer is an argument about that ownership rather than about a component.
 [docs/reference/page-anatomy.dc.html](reference/page-anatomy.dc.html) draws it.
 
-**The nav is the rail** — fixed, one width, desktop only, with its gutter reserved by
-`bento-rail-gutter` on whatever wraps the routed page (§7).
+**`BentoShell` is the shell.** Pass it the rail, the header's two edges and the routed
+page; it owns the rest of this section.
+
+```tsx
+<BentoShell
+  rail={<BentoNavRail groups={groups} homeRoute={ROUTES.HOME} />}
+  headerStart={<ProductMark />}
+  headerEnd={<BentoUserMenu accountRoute={ROUTES.ACCOUNT} logoutUrl={ROUTES.LOGOUT} />}
+>
+  <Outlet />
+</BentoShell>
+```
+
+**The nav is the rail** — fixed, one width, desktop only. The shell reserves its gutter
+when it is given one (§7).
 
 **The header carries a set, in this order:** the mark and wordmark; a back control where
 the route has a parent; the palette trigger, with the platform's own keyboard hint. On the
 trailing edge: the locale where a second one ships, the ground, and the signed-in user.
-`BentoBackToTop` sits at the corner.
+The trigger is `BentoPaletteTrigger`, and `useBentoShellShortcuts` binds the keys it and
+`BentoShortcutsDialog` show, so no product writes a keydown listener for them.
 
 Two things the header is not. It is not a second always-visible nav — the rail is the nav
 and the palette is the mobile one, and a second eats the width the content needs. And it is
 not a home for one surface's controls: a switcher or a pending count belongs to the surface
 that owns it, not to every page that renders beneath it.
 
+**The corner is the shell's.** The assistant dock, passed as `dock`, takes it, and
+`BentoBackToTop` stacks above the dock. Neither is fixed to the viewport inside the shell:
+two components each pinning themselves to one corner is how the dock came to cover the
+button.
+
 **The shell owns the reading column.** `main` sets the max width, the gutters and the
 vertical rhythm once, so every page begins and ends on the same line; a page sets none of
 the three. A narrower column for a single-question form is a variant the shell offers by
 name, not a class each page repeats. The moment pages set their own they disagree, and the
 defect exists only *between* screens — which is why nobody reviewing one of them sees it.
 
+`column` names the variant: `default` for every page, `narrow` for a single-question
+form, `wide` for a table or a board, and `full` for a tool that owns the viewport, such as
+a chat, which fills the width and height and scrolls inside itself. The route decides the
+variant and passes it to the shell; the page never does. Each width is a custom property
+(`--bento-column-default`, `-narrow`, `-wide`), so a product re-keys one once.
+`viglet-ds-page-lint` reports a page whose outermost element sets any of the three.
+
 **A page may own an aside**, inside that column and scrolling with it: filters, a contents
 list, a conversation. That is not the console era's sidebar, which collapses, remembers its
 width and pushes content — the reason that era needs a provider and this one does not.
@@ -61,6 +87,18 @@ there.
 `BentoEntityTile` for the common icon-chip + status-pill + title + meta shape;
 hand-roll a tile only when the entity genuinely needs a different layout.
 
+A list a reader sorts, selects a range of and acts on in bulk, or one that runs
+to thousands of rows, is `BentoDataTable` instead. It mounts only the visible rows,
+its headers sort and say how, a row is reachable and selectable from the keyboard,
+and row actions are a menu of named items. Pass the rows, the columns and the
+actions, and store the column layout it reports. Never build a table from `Table`
+and a scroll container: that is the list every console rebuilt before this one.
+
+Filters over a list are `BentoFilterBar`: a search field, the facets you declare,
+and the active filters as removable chips. It holds no state. Keep its value where
+the URL can hold it, filter your rows with it, and pass the same value to the
+table as `selectionScope`, so a selection never outlives the rows it was made on.
+
 **A form screen with its own hero** is `BentoFormHero` as the first child inside
 the `<form>` it submits. It renders both halves of the morph itself.
 
@@ -74,8 +112,26 @@ and no padding of its own — a table wants `p-0` and a toolbar wants `py-2`.
 Never hand-roll `bento-glass rounded-2xl border`: the moment two call sites pick
 different radii the product is inconsistent for a reason no diff shows.
 
-Two rules that outrank convenience:
-
+Three rules that outrank convenience:
+
+- **A back-link eyebrow leads with the arrow, and only a back-link does.** The
+  eyebrow above a hero's title is small, upper-case and set in muted text, which
+  is the same treatment whether it names the parent list or merely says what kind
+  of thing this is. The arrow is what separates them: with it the line reads as
+  the way back, without it as a label. So it is not decoration, and it is not
+  optional on one page because the layout looked tidier — it is the only
+  difference a reader has.
+  - `BentoEntityShell` gives you this for free: it links the eyebrow to
+    `listRoute` and puts the arrow in, so you pass the label alone.
+  - Every other hero takes `backTo` + `backLabel`. `BentoHero` and
+    `BentoFormHero` both render `BentoBackLink` from them.
+  - An eyebrow that needs something after the link — a status marker, a count —
+    is the one case for passing `eyebrow` yourself, and it composes
+    `BentoBackLink` rather than re-typing an arrow. `eyebrow` wins over `backTo`,
+    so a page that sets both silently loses the arrow.
+  - **Never put one on an eyebrow that navigates nowhere.** An arrow promises a
+    destination, and a promise the click does not keep is worse than the plain
+    label would have been.
 - **Identity lives in the hero, never in the form.** Title, description, icon
   and enabled state are the shell's; a form field for any of them is a second
   place to edit the same thing.
@@ -147,10 +203,13 @@ stylesheet imports this package and then declares its own `:root`, so it lands
 after the preset's dark block at the same specificity and in no layer. One value
 set there wins on *both* grounds, and the dark ground silently gets the light
 value. The inputs are read per ground, so you never write a dark block.
+`viglet-ds-page-lint` reports a stylesheet or a style object that sets it.
 
 The solid fill carries text, so that pair holds 4.5:1 on both grounds (§6). An
 accent stop at full chroma usually does not, so this value is often a deeper step
-than the one the chip is drawn with.
+than the one the chip is drawn with. `viglet-ds-page-lint --contrast <your
+stylesheet>` measures every pair your re-key touches, on both grounds, before a
+screenshot does.
 
 If you need a one-off tint, set `--bento-tone-from` / `--bento-tone-to` on a
 subtree instead of touching the tokens.
@@ -181,7 +240,18 @@ push, and a violation fails the build.
   `{boolean}` expression is a lint failure.
 - **Headings increase by one.** The hero is `h1`, so a section under it is `h2`
   — which is what `BentoFormSection` renders by default. A repeated label, like
-  the sticky bar's title, is not a heading at all.
+  the sticky bar's title, is not a heading at all. `BentoEmptyState`'s title is an
+  `h2` too; pass `titleLevel={3}` when it sits inside a section.
+- **Busy is not disabled.** A control whose action is running takes `loading`:
+  it says so with `aria-busy`, ignores a second press and keeps focus, where
+  `disabled` would drop the focus of the button just pressed as the result is
+  announced. A Save with nothing to save is `aria-disabled`, focusable and inert,
+  for the same reason. `disabled` is for a control that is genuinely unavailable.
+- **Landmarks and focus are the shell's.** `BentoShell` renders the one `main`,
+  labelled, and a skip link as the first thing a keyboard reaches. On a route
+  change it moves focus to the new page's `h1` and announces it, so give every
+  page exactly one `h1` (the hero is one) and never manage focus on navigation
+  yourself.
 - **Contrast holds at 4.5:1**, including text on a tinted surface. Tinted pills
   need the darker text token in light mode.
 - **Reduced motion**: every animation in `bento.css` is turned off under
@@ -195,10 +265,10 @@ push, and a violation fails the build.
   tiles and `row-span-2` for a featured one. **Keep spans in multiples of two**
   so tiles reflow cleanly at every breakpoint — this is what keeps two consoles'
   grids aligned.
-- The nav rail is desktop-only. Reserve its gutter with `bento-rail-gutter` on
-  whatever wraps the routed page. On mobile, navigation is the header's command
-  trigger and the global shortcut; do not add a second always-visible nav that
-  eats mobile width.
+- The nav rail is desktop-only. `BentoShell` reserves its gutter; a shell that is
+  still a product's own puts `bento-rail-gutter` on whatever wraps the routed page.
+  On mobile, navigation is the header's command trigger and the global shortcut;
+  do not add a second always-visible nav that eats mobile width.
 - There is **no sidebar provider**, and no context between the shell's pieces.
   The console era needs one because its sidebar collapses, remembers and pushes
   content; the rail is fixed, one width, and hidden below `md`. That is about the

package/docs/reference/grounds.dc.html

@@ -33,7 +33,7 @@
     <div class="eyebrow" style="color:#1447e6">REFERENCE</div>
     <div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
       <div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">Both grounds, and nothing told by colour alone</div>
-      <div style="font-size:12.5px;color:#737373">The same components twice. Every state carries a dot or a word as well as a hue.</div>
+      <div style="font-size:12.5px;color:#696969">The same components twice. Every state carries a dot or a word as well as a hue.</div>
     </div>
   </div>
 
@@ -42,7 +42,7 @@
     <!-- LIGHT -->
     <div style="border:1px solid #e5e5e5;border-radius:14px;background:#ffffff;padding:15px;display:flex;flex-direction:column;gap:12px;overflow:hidden">
       <div style="display:flex;align-items:center;gap:9px">
-        <span class="eyebrow" style="color:#737373">LIGHT</span>
+        <span class="eyebrow" style="color:#696969">LIGHT</span>
         <span class="mono" style="font-size:10px;color:#a1a1a1">--vg-background oklch(1 0 0)</span>
       </div>
 
@@ -53,22 +53,22 @@
           <div style="flex:1"></div>
           <span class="ratio pass">19.8:1</span>
         </div>
-        <div style="font-size:11.5px;color:#737373;line-height:1.45">A line of muted description, which is the pair a panel is most likely to reach for.</div>
-        <div style="display:flex;align-items:center;gap:7px;margin-top:7px"><span class="ratio pass">4.73:1</span><span style="font-size:10px;color:#737373">muted on the ground</span></div>
+        <div style="font-size:11.5px;color:#696969;line-height:1.45">A line of muted description, which is the pair a panel is most likely to reach for.</div>
+        <div style="display:flex;align-items:center;gap:7px;margin-top:7px"><span class="ratio pass">5.51:1</span><span style="font-size:10px;color:#696969">muted on the ground</span></div>
       </div>
 
       <div>
-        <div class="eyebrow" style="color:#737373;margin-bottom:7px">STATUS -- A DOT AND A WORD</div>
+        <div class="eyebrow" style="color:#696969;margin-bottom:7px">STATUS -- A DOT AND A WORD</div>
         <div style="display:flex;flex-wrap:wrap;gap:6px">
           <span style="display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(0,188,125,0.4);background:rgba(0,188,125,0.1);color:#007a55;font-size:11px;font-weight:600"><span style="width:6px;height:6px;border-radius:999px;background:#00bc7d"></span>On</span>
           <span style="display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(254,154,0,0.4);background:rgba(254,154,0,0.1);color:#973c00;font-size:11px;font-weight:600"><span style="width:6px;height:6px;border-radius:999px;background:#fe9a00"></span>Warn</span>
           <span style="display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(251,44,54,0.4);background:rgba(251,44,54,0.1);color:#c10007;font-size:11px;font-weight:600"><span style="width:6px;height:6px;border-radius:999px;background:#fb2c36"></span>Error</span>
         </div>
-        <div style="font-size:10px;color:#737373;margin-top:6px">Tinted surfaces take the darker text token here, which is the whole reason there are two.</div>
+        <div style="font-size:10px;color:#696969;margin-top:6px">Tinted surfaces take the darker text token here, which is the whole reason there are two.</div>
       </div>
 
       <div>
-        <div class="eyebrow" style="color:#737373;margin-bottom:7px">THE ACCENT, AND THE FOCUS RING</div>
+        <div class="eyebrow" style="color:#696969;margin-bottom:7px">THE ACCENT, AND THE FOCUS RING</div>
         <div style="display:flex;align-items:center;gap:9px">
           <div style="display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:10px;background:#1447e6;color:#ffffff;font-size:12.5px;font-weight:500">Primary</div>
           <div style="display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:10px;border:1px solid #e5e5e5;color:#0a0a0a;font-size:12.5px;font-weight:500;box-shadow:0 0 0 3px rgba(20,71,230,0.35)">Focused</div>
@@ -124,12 +124,12 @@
 
   <div style="margin:14px 24px 18px;border:1px solid #e5e5e5;background:#ffffff;border-radius:12px;padding:11px 14px;display:flex;gap:18px;align-items:flex-start">
     <div style="flex:1">
-      <div class="eyebrow" style="color:#737373;margin-bottom:4px">THE ACCENT IS THE SAME RATIO ON BOTH GROUNDS</div>
+      <div class="eyebrow" style="color:#696969;margin-bottom:4px">THE ACCENT IS THE SAME RATIO ON BOTH GROUNDS</div>
       <div style="font-size:12px;color:#404040;line-height:1.5">6.83 and 6.79. That is not luck -- it is what the two readable inputs are for. A product that states one accent value and lets the other ground inherit gets one of these numbers and not the other.</div>
     </div>
     <div style="width:1px;align-self:stretch;background:#ededed"></div>
     <div style="width:340px">
-      <div class="eyebrow" style="color:#737373;margin-bottom:4px">A STATE IS NEVER ONLY A HUE</div>
+      <div class="eyebrow" style="color:#696969;margin-bottom:4px">A STATE IS NEVER ONLY A HUE</div>
       <div style="font-size:12px;color:#404040;line-height:1.5">Every pill above carries a dot and a word. A reader who cannot separate the three hues still reads three states.</div>
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viglet/viglet-design-system",
-  "version": "2026.3.9",
+  "version": "2026.3.11",
   "type": "module",
   "description": "Viglet Design System - Shared components, hooks, utilities and design tokens for Viglet products",
   "license": "Apache-2.0",
@@ -33,6 +33,8 @@
       "require": "./dist/assets.cjs"
     },
     "./exports.json": "./dist/exports.json",
+    "./catalogue.json": "./dist/catalogue.json",
+    "./consumers.json": "./consumers.json",
     "./styles": "./dist/viglet-design-system.css",
     "./fonts": "./dist/fonts.css",
     "./fonts.css": "./dist/fonts.css",
@@ -62,11 +64,19 @@
   },
   "bin": {
     "viglet-ds-check-duplicates": "./scripts/check-duplicates.mjs",
+    "viglet-ds-consumer-entries": "./scripts/consumer-entries.mjs",
+    "viglet-ds-mcp": "./scripts/mcp.mjs",
+    "viglet-ds-page-lint": "./scripts/page-lint.mjs",
     "viglet-ds-page-reference": "./scripts/page-reference.mjs"
   },
   "files": [
     "dist",
+    "consumers.json",
     "scripts/check-duplicates.mjs",
+    "scripts/consumer-entries.mjs",
+    "scripts/mcp.mjs",
+    "scripts/page-lint.mjs",
+    "scripts/lib/contrast.mjs",
     "scripts/page-reference.mjs",
     "docs/BENTO-AUTHORING.md",
     "docs/BENTO-BOUNDARY.md",
@@ -81,6 +91,7 @@
     "next-themes": ">=0.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.71.2",
     "react-i18next": ">=15.0.0",
     "react-router-dom": "^7.0.0",
     "sonner": ">=2.0.0"
@@ -123,7 +134,6 @@
     "date-fns": "^4.1.0",
     "lucide-react": "^1.0.1",
     "radix-ui": "^1.4.3",
-    "react-hook-form": "^7.71.2",
     "react-resizable-panels": "^4.7.3",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
@@ -157,6 +167,7 @@
     "jsdom": "^30.0.1",
     "next-themes": "^0.4.6",
     "playwright": "^1.62.1",
+    "react-hook-form": "^7.71.2",
     "react-i18next": "^17.0.12",
     "react-router-dom": "^7.0.0",
     "semver": "^7.8.5",
@@ -176,14 +187,15 @@
   },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "tsc -b && node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && vite build && node -e \"require('fs').cpSync('src/styles/preset.css','dist/preset.css')\" && node scripts/build-fonts.mjs && node scripts/emit-exports.mjs && node scripts/check-dist.mjs && node scripts/check-exports.mjs && node scripts/check-size.mjs",
+    "build": "tsc -b && node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && vite build && node -e \"require('fs').cpSync('src/styles/preset.css','dist/preset.css')\" && node scripts/build-fonts.mjs && node scripts/emit-exports.mjs && node scripts/emit-catalogue.mjs && node scripts/check-dist.mjs && node scripts/check-exports.mjs && node scripts/check-catalogue.mjs && node scripts/check-readme.mjs && node scripts/check-size.mjs",
     "check:dist": "node scripts/check-dist.mjs",
     "check:size": "node scripts/check-size.mjs",
-    "typecheck": "tsc -b --force",
+    "typecheck": "tsc -b --force && tsc -p .storybook/tsconfig.json --noEmit",
     "lint": "eslint . --max-warnings 0",
     "test": "vitest run",
     "test:watch": "vitest",
     "use:local": "node scripts/use-local.mjs",
+    "chrome:census": "node scripts/chrome-census.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build:fonts": "node scripts/build-fonts.mjs",