@viglet/viglet-design-system 2026.3.13 → 2026.3.15

package/docs/BENTO-AUTHORING.md

@@ -42,10 +42,12 @@ and the palette is the mobile one, and a second eats the width the content needs
 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 corner and the dock's place are the shell's.** Pass the assistant as `dock`. With a
+rail it rests at the rail's foot and opens beside the rail; on a phone it sits at the
+header's trailing edge; with neither it takes the corner. `BentoBackToTop` keeps the
+corner. Nothing 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, and a corner that
+reserves no room is how it came to cover the column's last row actions.
 
 **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
@@ -83,12 +85,18 @@ receiving `{ staged, onStateChange }` and groups its fields in
 `BentoFormSection`s. Wire the query hooks in the page and put no shell mechanics
 there.
 
-**A list screen** is one `BentoListPage` call with a `renderTile`. Use
-`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,
+**A list screen** is one `BentoListPage` call, and by default it is a table. Ask
+first whether the reader arrives to **compare many** or to **pick one**. Comparing
+is rows: users, roles, tokens, webhooks, providers, anything a reader scans down a
+column. Pass `columns` (and `rowActions`, `onRowOpen`), and the page renders a
+`BentoDataTable` under its hero with the create action as the hero's one primary.
+An empty list is one inline card. Picking is tiles: media, blueprints, a hub, or a
+handful of things a reader tells apart by sight. Pass `renderTile` to ask for the
+mosaic, and use `BentoEntityTile` for the common tile shape. Hand-roll a tile only
+when the entity genuinely needs a different layout.
+
+A table with selection and bulk actions, or one inside a page that already has its
+own hero, is `BentoDataTable` on its own. 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`

package/docs/reference/README.md

@@ -18,12 +18,20 @@ prose. Where the two disagree, the contract is right and an artboard is stale.
 | The shapes | `list.dc.html`          | a list screen, and the discriminator between tiles and rows               |
 | The shapes | `detail.dc.html`        | a detail screen, and the save-bar morph at both ends of the scroll        |
 | The shapes | `form-hero.dc.html`     | a form with no entity behind it yet                                       |
-| The shapes | `panel.dc.html`         | the frosted box with no heading, and why it has none                      |
+| The shapes | `panel.dc.html`         | the plain card with no heading, and why it has none                       |
 | The shapes | `grounds.dc.html`       | the same components on both grounds, with the ratios                      |
 | The shapes | `split.dc.html`         | a two-pane screen: who scrolls, who owns the ratio, and phone width       |
 
 `canvas.json` places them and names the two pages.
 
+**The shapes are drawn one step ahead of the components.** They show the quieter surface
+that this package proposes, for review as a composition before any component changes. Panels
+are solid cards, not frosted glass. The gradient chip names a thing, so it stays in an
+entity hero and a hub's tiles and leaves rows, lists and form sections. Colour marks
+state (published, draft, scheduled, changed, archived) as a dot and a word, not an
+area. Until the components follow, a page built today still renders the glass and
+the chips; the rule above, that the contract wins, applies again once they do.
+
 ## Two rules about the content
 
 **No product data.** Subjects are role labels — "Entity name", "Eyebrow", "Meta". A

package/docs/reference/canvas.json

@@ -110,7 +110,7 @@
       "x": 0,
       "y": -190,
       "w": 700,
-      "text": "Almost every screen is one of four shapes plus data: a detail is BentoEntityShell wrapping a form, a list is one BentoListPage call with a renderTile, a form with no entity behind it yet is BentoFormHero as the first child of its form, and a form beside its preview is BentoSplitPage under one hero.\nThe panel is the fifth thing and not a shape: a frosted box with no heading, for whatever a hero already named.\nThe last artboard is the same components on both grounds, because one look means one look twice."
+      "text": "Almost every screen is one of four shapes plus data: a detail is BentoEntityShell wrapping a form, a list is one BentoListPage call with a renderTile, a form with no entity behind it yet is BentoFormHero as the first child of its form, and a form beside its preview is BentoSplitPage under one hero.\nThe panel is the fifth thing and not a shape: a plain card with no heading, for whatever a hero already named.\nThe last artboard is the same components on both grounds, because one look means one look twice."
     }
   ],
   "launch": { "view": "canvas", "page": "vds-shell" }

package/docs/reference/detail.dc.html

@@ -21,7 +21,15 @@
     .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
     .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
+    /* Frost is kept for the one surface content scrolls under: the save bar. */
     .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
+    /* VDS182 — a solid card, not frosted glass: --card on --border. */
+    .card { background: #ffffff; border: 1px solid #e5e5e5; }
+    /* State, not area: a dot and a word, the shape BentoStatusMarker draws. */
+    .state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #404040; }
+    .state i { width: 6px; height: 6px; border-radius: 999px; }
+    .s-published i { background: #00bc7d; } .s-draft i { background: #62748e; } .s-scheduled i { background: #8e51ff; }
+    .s-changed i { background: #fe9a00; } .s-archived i { background: #d4d4d4; } .s-archived { color: #737373; }
     .chip { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background-image: linear-gradient(to bottom right, #155dfc, #4f39f6); color: #ffffff; flex: 0 0 auto; }
     .field { height: 30px; border: 1px solid #e5e5e5; border-radius: 10px; background: #ffffff; }
     .flabel { font-size: 10px; color: #737373; margin-bottom: 4px; }
@@ -56,7 +64,7 @@
           <div style="display:flex;align-items:flex-start;gap:11px">
             <div class="chip" style="width:40px;height:40px;border-radius:13px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="8"></circle></svg></div>
             <div style="flex:1;min-width:0">
-              <div style="font-size:18px;font-weight:600;letter-spacing:-0.015em">Entity name</div>
+              <div style="display:flex;align-items:center;gap:9px"><div style="font-size:16px;font-weight:600;letter-spacing:-0.01em">Entity name</div><span class="state s-changed"><i></i>Changed</span></div>
               <div style="font-size:11.5px;color:#737373;margin-top:2px">Description. Icon, title, description and enabled state are all here.</div>
             </div>
             <div style="display:flex;align-items:center;gap:7px">
@@ -71,22 +79,16 @@
         </div>
 
         <!-- form sections -->
-        <div class="glass" style="border-radius:24px;padding:14px;margin-bottom:11px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px;margin-bottom:11px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div style="grid-column:span 2"><div class="flabel">Label</div><div class="field" style="height:52px"></div></div>
           </div>
         </div>
-        <div class="glass" style="border-radius:24px;padding:14px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field"></div></div>
@@ -94,7 +96,7 @@
         </div>
       </div>
 
-      <div style="font-size:11px;color:#404040;line-height:1.45">The form is a render prop taking <span class="mono" style="font-size:10.5px">{ staged, onStateChange }</span>. It groups fields and nothing else -- no shell mechanics, no identity field.</div>
+      <div style="font-size:11px;color:#404040;line-height:1.45">The form is a render prop taking <span class="mono" style="font-size:10.5px">{ staged, onStateChange }</span>. It groups fields and nothing else -- no shell mechanics, no identity field, and no chip: only the hero names the entity.</div>
     </div>
 
     <!-- scrolled -->
@@ -122,22 +124,16 @@
         </div>
         <div class="mono" style="position:absolute;right:20px;top:62px;z-index:5;font-size:9px;color:#1447e6">the same two controls, not a second pair</div>
 
-        <div class="glass" style="border-radius:24px;padding:14px;margin-top:34px;margin-bottom:11px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px;margin-top:34px;margin-bottom:11px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field" style="border-color:rgba(20,71,230,0.6)"></div></div>
             <div style="grid-column:span 2"><div class="flabel">Label</div><div class="field" style="height:52px"></div></div>
           </div>
         </div>
-        <div class="glass" style="border-radius:24px;padding:14px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field"></div></div>

package/docs/reference/form-hero.dc.html

@@ -21,8 +21,11 @@
     .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
     .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
-    .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
-    .chip { display: flex; align-items: center; justify-content: center; border-radius: 11px; background-image: linear-gradient(to bottom right, #155dfc, #4f39f6); color: #ffffff; flex: 0 0 auto; }
+    /* VDS182 — a solid card, not frosted glass: --card on --border. */
+    .card { background: #ffffff; border: 1px solid #e5e5e5; }
+    /* No entity exists yet, so there is no identity for the gradient chip to
+       carry: the form's own hero takes the neutral well. */
+    .well { display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #f5f5f5; border: 1px solid #ededed; color: #525252; flex: 0 0 auto; }
     .field { height: 30px; border: 1px solid #e5e5e5; border-radius: 10px; background: #ffffff; }
     .flabel { font-size: 10px; color: #737373; margin-bottom: 4px; }
     .btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 500; }
@@ -50,10 +53,10 @@
         <div style="border:1px dashed rgba(20,71,230,0.4);border-radius:14px;padding:12px;margin:14px 0;position:relative">
           <div class="mono" style="position:absolute;right:9px;top:-8px;background:#ffffff;padding:0 5px;font-size:9px;color:#1447e6">BentoFormHero -- first child</div>
           <div style="display:flex;align-items:flex-start;gap:11px">
-            <div class="chip" style="width:40px;height:40px;border-radius:13px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M5 12h14M12 5v14"></path></svg></div>
+            <div class="well" style="width:40px;height:40px;border-radius:13px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M5 12h14M12 5v14"></path></svg></div>
             <div style="flex:1;min-width:0">
               <div style="font-size:10px;color:#737373;letter-spacing:0.05em;font-weight:600">EYEBROW</div>
-              <div style="font-size:18px;font-weight:600;letter-spacing:-0.015em;margin-top:2px">New entity</div>
+              <div style="font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-top:2px">New entity</div>
               <div style="font-size:11.5px;color:#737373;margin-top:2px">A form with no entity behind it yet, so the hero is the form's.</div>
             </div>
             <div style="display:flex;align-items:center;gap:7px">
@@ -63,22 +66,16 @@
           </div>
         </div>
 
-        <div class="glass" style="border-radius:24px;padding:14px;margin-bottom:11px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px;margin-bottom:11px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div style="grid-column:span 2"><div class="flabel">Label</div><div class="field" style="height:48px"></div></div>
           </div>
         </div>
-        <div class="glass" style="border-radius:24px;padding:14px">
-          <div style="display:flex;align-items:center;gap:9px;margin-bottom:11px">
-            <div class="chip" style="width:26px;height:26px;border-radius:9px"></div>
-            <div style="font-size:13px;font-weight:600">Field group</div>
-          </div>
+        <div class="card" style="border-radius:24px;padding:14px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:11px">Field group</div>
           <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
             <div><div class="flabel">Label</div><div class="field"></div></div>
             <div><div class="flabel">Label</div><div class="field"></div></div>

package/docs/reference/list.dc.html

@@ -21,9 +21,16 @@
     .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
     .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
-    .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
-    .chip { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background-image: linear-gradient(to bottom right, #155dfc, #4f39f6); color: #ffffff; flex: 0 0 auto; }
-    .pill { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(0,188,125,0.4); background: rgba(0,188,125,0.1); color: #007a55; font-size: 10px; font-weight: 600; }
+    /* VDS182 — a solid card, not frosted glass: --card on --border. */
+    .card { background: #ffffff; border: 1px solid #e5e5e5; }
+    /* Where nothing single is named, the icon sits in a neutral well; the
+       gradient chip is kept for an entity hero and a hub's tiles. */
+    .well { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: #f5f5f5; border: 1px solid #ededed; color: #525252; flex: 0 0 auto; }
+    /* State, not area: a dot and a word, the shape BentoStatusMarker draws. */
+    .state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #404040; }
+    .state i { width: 6px; height: 6px; border-radius: 999px; }
+    .s-published i { background: #00bc7d; } .s-draft i { background: #62748e; } .s-scheduled i { background: #8e51ff; }
+    .s-changed i { background: #fe9a00; } .s-archived i { background: #d4d4d4; } .s-archived { color: #737373; }
     .row { display: grid; grid-template-columns: 1fr 92px 74px 60px; gap: 12px; align-items: center; padding: 7px 14px; border-bottom: 1px solid #f4f4f4; font-size: 11.5px; }
   </style>
 </helmet>
@@ -34,108 +41,119 @@
     <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">A list screen, and when it is not tiles</div>
-      <div style="font-size:12.5px;color:#737373">One <span class="mono" style="font-size:12px">BentoListPage</span> call with a <span class="mono" style="font-size:12px">renderTile</span>. The same entities, twice.</div>
+      <div style="font-size:12.5px;color:#737373">One <span class="mono" style="font-size:12px">BentoListPage</span> call: a table by default, tiles when the page passes <span class="mono" style="font-size:12px">renderTile</span>. The same entities, twice.</div>
     </div>
   </div>
 
   <div style="flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:14px 24px 0">
 
-    <!-- tiles -->
+    <!-- rows -->
     <div style="display:flex;flex-direction:column;gap:9px;min-height:0">
       <div style="display:flex;align-items:center;gap:9px">
-        <span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(20,71,230,0.4);background:rgba(20,71,230,0.08);color:#1447e6;font-size:11px;font-weight:600">arrive to pick one</span>
-        <span class="mono" style="font-size:10.5px;color:#737373">BentoEntityTile</span>
+        <span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(254,154,0,0.45);background:rgba(254,154,0,0.1);color:#973c00;font-size:11px;font-weight:600">the default: arrive to compare many</span>
+        <span class="mono" style="font-size:10.5px;color:#737373">BentoListPage with columns</span>
       </div>
 
       <div style="flex:1;min-height:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:16px;overflow:hidden">
-        <!-- hero -->
         <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:16px">
-          <div class="chip" style="width:42px;height:42px;border-radius:13px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="4" width="7" height="7" rx="2"></rect><rect x="13" y="4" width="7" height="7" rx="2"></rect><rect x="4" y="13" width="7" height="7" rx="2"></rect></svg></div>
+          <div class="well" style="width:42px;height:42px;border-radius:13px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M9 6h11M9 12h11M9 18h11"></path><path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01"></path></svg></div>
           <div style="flex:1;min-width:0">
             <div style="font-size:10px;color:#737373;letter-spacing:0.05em;font-weight:600">EYEBROW</div>
-            <div style="font-size:19px;font-weight:600;letter-spacing:-0.015em;margin-top:2px">Collection name</div>
+            <div style="font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-top:2px">Collection name</div>
             <div style="font-size:11.5px;color:#737373;margin-top:2px">One sentence of subtitle, which the shell does not own.</div>
           </div>
           <div style="display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:10px;background:#171717;color:#fafafa;font-size:12px;font-weight:500">New</div>
         </div>
 
-        <!-- mosaic: spans in multiples of two -->
-        <div style="display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:11px">
-          <div class="glass" style="grid-column:span 4;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:8px;height:118px">
-            <div class="chip"></div>
-            <div style="font-size:12.5px;font-weight:600">Entity name</div>
-            <div style="font-size:10.5px;color:#737373;line-height:1.35">Description, two lines at most, from the entity itself.</div>
-            <div style="flex:1"></div>
-            <div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>Status</span></div>
-          </div>
-          <div class="glass" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:118px">
-            <div class="chip"></div>
-            <div style="font-size:12.5px;font-weight:600">Entity name</div>
-            <div style="flex:1"></div>
-            <div style="font-size:10px;color:#737373">Meta</div>
-          </div>
-          <div class="glass" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:104px">
-            <div class="chip" style="width:28px;height:28px;border-radius:9px"></div>
-            <div style="font-size:12px;font-weight:600">Entity name</div>
-            <div style="flex:1"></div>
-            <div style="font-size:10px;color:#737373">Meta</div>
-          </div>
-          <div class="glass" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:104px">
-            <div class="chip" style="width:28px;height:28px;border-radius:9px"></div>
-            <div style="font-size:12px;font-weight:600">Entity name</div>
-            <div style="flex:1"></div>
-            <div style="font-size:10px;color:#737373">Meta</div>
+        <div class="card" style="border-radius:24px;overflow:hidden">
+          <div class="row" style="background:rgba(245,245,245,0.6);font-size:9.5px;font-weight:600;letter-spacing:0.06em;color:#737373;border-bottom:1px solid #ededed">
+            <div>ENTITY</div><div>META</div><div>STATE</div><div></div>
           </div>
-          <div style="grid-column:span 2;border-radius:24px;height:104px;border:1px dashed #d4d4d4;display:flex;align-items:center;justify-content:center;color:#a1a1a1;font-size:11.5px">New</div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-published"><i></i>Published</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-published"><i></i>Published</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-changed"><i></i>Changed</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-draft"><i></i>Draft</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-scheduled"><i></i>Scheduled</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-published"><i></i>Published</span></div><div style="color:#a1a1a1">…</div></div>
+          <div class="row" style="border-bottom:none"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="state s-archived"><i></i>Archived</span></div><div style="color:#a1a1a1">…</div></div>
         </div>
       </div>
 
-      <div style="font-size:11px;color:#404040;line-height:1.45">Spans in multiples of two, so the mosaic reflows without a gap at every breakpoint. The dashed tile is the one affordance the grid adds.</div>
+      <div style="font-size:11px;color:#404040;line-height:1.45">Still the layer: the same hero, the same panel. A row carries no chip and no tone of its own; colour appears only where it says something, as one of five states.</div>
     </div>
 
-    <!-- rows -->
+    <!-- tiles -->
     <div style="display:flex;flex-direction:column;gap:9px;min-height:0">
       <div style="display:flex;align-items:center;gap:9px">
-        <span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(254,154,0,0.45);background:rgba(254,154,0,0.1);color:#973c00;font-size:11px;font-weight:600">arrive to compare many</span>
-        <span class="mono" style="font-size:10.5px;color:#737373">a table inside BentoPanel, contentClassName p-0</span>
+        <span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(20,71,230,0.4);background:rgba(20,71,230,0.08);color:#1447e6;font-size:11px;font-weight:600">the variant: arrive to pick one</span>
+        <span class="mono" style="font-size:10.5px;color:#737373">BentoListPage with renderTile, BentoEntityTile</span>
       </div>
 
       <div style="flex:1;min-height:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:16px;overflow:hidden">
+        <!-- hero -->
         <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:16px">
-          <div class="chip" style="width:42px;height:42px;border-radius:13px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M9 6h11M9 12h11M9 18h11"></path><path d="M4.5 6h.01M4.5 12h.01M4.5 18h.01"></path></svg></div>
+          <div class="well" style="width:42px;height:42px;border-radius:13px"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="4" width="7" height="7" rx="2"></rect><rect x="13" y="4" width="7" height="7" rx="2"></rect><rect x="4" y="13" width="7" height="7" rx="2"></rect></svg></div>
           <div style="flex:1;min-width:0">
             <div style="font-size:10px;color:#737373;letter-spacing:0.05em;font-weight:600">EYEBROW</div>
-            <div style="font-size:19px;font-weight:600;letter-spacing:-0.015em;margin-top:2px">Collection name</div>
+            <div style="font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-top:2px">Collection name</div>
             <div style="font-size:11.5px;color:#737373;margin-top:2px">The same hero. Only what sits under it changed.</div>
           </div>
           <div style="display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:10px;background:#171717;color:#fafafa;font-size:12px;font-weight:500">New</div>
         </div>
 
-        <div class="glass" style="border-radius:24px;overflow:hidden">
-          <div class="row" style="background:rgba(245,245,245,0.6);font-size:9.5px;font-weight:600;letter-spacing:0.06em;color:#737373;border-bottom:1px solid #ededed">
-            <div>ENTITY</div><div>META</div><div>STATUS</div><div></div>
+        <!-- mosaic: spans in multiples of two -->
+        <div style="display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:11px">
+          <div class="card" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:118px">
+            <div style="font-size:12.5px;font-weight:600">Entity name</div>
+            <div style="font-size:10.5px;color:#737373;line-height:1.35">Description, two lines at most, from the entity itself.</div>
+            <div style="flex:1"></div>
+            <div><span class="state s-published"><i></i>Published</span></div>
+          </div>
+          <div class="card" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:118px">
+            <div style="font-size:12.5px;font-weight:600">Entity name</div>
+            <div style="font-size:10.5px;color:#737373;line-height:1.35">Description from the entity.</div>
+            <div style="flex:1"></div>
+            <div><span class="state s-changed"><i></i>Changed</span></div>
+          </div>
+          <div class="card" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:118px">
+            <div style="font-size:12.5px;font-weight:600">Entity name</div>
+            <div style="flex:1"></div>
+            <div><span class="state s-draft"><i></i>Draft</span></div>
+          </div>
+          <div class="card" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:104px">
+            <div style="font-size:12px;font-weight:600">Entity name</div>
+            <div style="flex:1"></div>
+            <div><span class="state s-scheduled"><i></i>Scheduled</span></div>
+          </div>
+          <div class="card" style="grid-column:span 2;border-radius:24px;padding:13px;display:flex;flex-direction:column;gap:7px;height:104px">
+            <div style="font-size:12px;font-weight:600">Entity name</div>
+            <div style="flex:1"></div>
+            <div style="font-size:10px;color:#737373">Meta</div>
           </div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill" style="border-color:rgba(254,154,0,0.4);background:rgba(254,154,0,0.1);color:#973c00"><span style="width:5px;height:5px;border-radius:999px;background:#fe9a00"></span>Warn</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
-          <div class="row" style="border-bottom:none"><div>Entity name</div><div style="color:#737373">Meta</div><div><span class="pill"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>On</span></div><div style="color:#a1a1a1">…</div></div>
+          <div style="grid-column:span 2;border-radius:24px;height:104px;border:1px dashed #d4d4d4;display:flex;align-items:center;justify-content:center;color:#a1a1a1;font-size:11.5px">New</div>
         </div>
       </div>
 
-      <div style="font-size:11px;color:#404040;line-height:1.45">Still the layer: the hero is the hero, the frosted surface is the panel, the pills are the same intents. Density did not mean leaving.</div>
+      <div style="font-size:11px;color:#404040;line-height:1.45">Spans in multiples of two, so the mosaic reflows without a gap at every breakpoint. No tile is emphasised by default and none repeats the chip: a list names many things, not one. The dashed tile is the one affordance the grid adds.</div>
     </div>
   </div>
 
   <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 DISCRIMINATOR</div>
-      <div style="font-size:12px;color:#404040;line-height:1.5">Does the reader arrive to <strong>pick one</strong>, or to <strong>compare many</strong>? Picking is tiles: the chip carries identity, the span carries weight, and eight of them fill a screen. Comparing is rows: the eye runs down a column, and a tile that has to be scanned against six others is a tile the reader is fighting.</div>
+      <div style="font-size:12px;color:#404040;line-height:1.5">Does the reader arrive to <strong>compare many</strong>, or to <strong>pick one</strong>? Comparing is rows, and rows are the default: the eye runs down a column, and a tile that has to be scanned against six others is a tile the reader is fighting. Picking is tiles, which a page asks for: media, blueprints, a hub, a handful told apart by sight.</div>
+    </div>
+    <div style="width:1px;align-self:stretch;background:#ededed"></div>
+    <div style="width:230px">
+      <div class="eyebrow" style="color:#737373;margin-bottom:6px">STATE, NOT AREA</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px 10px">
+        <span class="state s-published"><i></i>Published</span><span class="state s-draft"><i></i>Draft</span>
+        <span class="state s-scheduled"><i></i>Scheduled</span><span class="state s-changed"><i></i>Changed</span>
+        <span class="state s-archived"><i></i>Archived</span>
+      </div>
     </div>
     <div style="width:1px;align-self:stretch;background:#ededed"></div>
-    <div style="width:340px">
+    <div style="width:300px">
       <div class="eyebrow" style="color:#737373;margin-bottom:4px">WHY IT IS WORTH SAYING</div>
       <div style="font-size:12px;color:#404040;line-height:1.5">Without it, density reads as a reason to drop out of the layer and hand-roll a card and a table -- which is how one product ends up with two eras of chrome on one screen.</div>
     </div>

package/docs/reference/page-anatomy.dc.html

@@ -21,7 +21,8 @@
     .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
     .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
-    .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); }
+    /* VDS182 — a solid card on --card and --border, not frosted glass. */
+    .card { background: #ffffff; border: 1px solid #e5e5e5; }
     /* One label per row of the gutter, so no two can ever land on each other. */
     .lab { position: absolute; right: 0; display: flex; align-items: center; gap: 7px; justify-content: flex-end; width: 100%; }
     .lab b { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
@@ -48,7 +49,7 @@
     <!-- the gutter. one row per label. -->
     <div style="position:relative;width:168px;flex:0 0 auto">
       <div class="lab" style="top:26px"><b style="color:#1447e6">SHELL &middot; HEADER</b><i>80px</i><span class="lead" style="background:#1447e6"></span></div>
-      <div class="lab" style="top:132px"><b style="color:#1447e6">SHELL &middot; NAV</b><i>64px, fixed</i><span class="lead" style="background:#1447e6"></span></div>
+      <div class="lab" style="top:132px"><b style="color:#1447e6">SHELL &middot; NAV</b><i>80px, fixed</i><span class="lead" style="background:#1447e6"></span></div>
       <div class="lab" style="top:186px"><b style="color:#1447e6">SHELL &middot; COLUMN</b><i>set once</i><span class="lead" style="background:#1447e6"></span></div>
       <div class="lab" style="top:250px"><b style="color:#7f22fe">PAGE &middot; ASIDE</b><i>optional</i><span class="lead" style="background:#7f22fe"></span></div>
       <div class="lab" style="top:304px"><b style="color:#7f22fe">PAGE &middot; CONTENT</b><span class="lead" style="background:#7f22fe"></span></div>
@@ -77,15 +78,15 @@
         <div style="width:28px;height:28px;border-radius:999px;background-image:linear-gradient(to bottom right,#155dfc,#4f39f6)"></div>
       </div>
 
-      <!-- rail, 64px -->
-      <div style="position:absolute;left:0;top:80px;bottom:0;width:64px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0;background:rgba(20,71,230,0.05);border-right:1px solid rgba(229,229,229,0.7)">
+      <!-- rail, 80px -->
+      <div style="position:absolute;left:0;top:80px;bottom:0;width:80px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0;background:rgba(20,71,230,0.05);border-right:1px solid rgba(229,229,229,0.7)">
         <div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(23,23,23,0.4);background:rgba(23,23,23,0.09);color:#171717"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 11.5 12 5l8 6.5"></path><path d="M6 10.5V19h12v-8.5"></path></svg></div>
         <div style="width:38px;height:38px;border-radius:12px;background:#f0f0f0"></div>
         <div style="width:38px;height:38px;border-radius:12px;background:#f0f0f0"></div>
       </div>
 
       <!-- everything the shell hands to a page -->
-      <div style="position:absolute;left:64px;right:0;top:80px;bottom:0;display:flex;flex-direction:column">
+      <div style="position:absolute;left:80px;right:0;top:80px;bottom:0;display:flex;flex-direction:column">
         <div style="flex:1;min-height:0;display:flex;justify-content:center;padding:0 28px">
           <!-- the column: one max-width, one pair of gutters, set here -->
           <div style="width:100%;max-width:940px;border-left:1px dashed rgba(20,71,230,0.5);border-right:1px dashed rgba(20,71,230,0.5);padding:22px 22px 0;display:flex;gap:16px;min-height:0">
@@ -105,10 +106,10 @@
               <div style="height:11px;width:120px;border-radius:999px;background:#ededed;margin-bottom:9px"></div>
               <div style="height:22px;width:260px;border-radius:8px;background:#e6e6e6;margin-bottom:16px"></div>
               <div style="display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px">
-                <div class="glass" style="grid-column:span 2;border-radius:24px;height:104px"></div>
-                <div class="glass" style="grid-column:span 2;border-radius:24px;height:104px"></div>
-                <div class="glass" style="grid-column:span 2;border-radius:24px;height:88px"></div>
-                <div class="glass" style="grid-column:span 2;border-radius:24px;height:88px"></div>
+                <div class="card" style="grid-column:span 2;border-radius:24px;height:104px"></div>
+                <div class="card" style="grid-column:span 2;border-radius:24px;height:104px"></div>
+                <div class="card" style="grid-column:span 2;border-radius:24px;height:88px"></div>
+                <div class="card" style="grid-column:span 2;border-radius:24px;height:88px"></div>
               </div>
             </div>
           </div>

package/docs/reference/panel.dc.html

@@ -21,7 +21,9 @@
     .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
     .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
-    .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-radius: 24px; }
+    /* VDS182 — the panel is a solid card on --card and --border. Frost behind
+       every panel was ornament: nothing scrolls under a panel to be frosted. */
+    .card { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 24px; }
     .slot { position: absolute; font-size: 9px; padding: 0 5px; background: #ffffff; }
     .trow { display: grid; grid-template-columns: 1fr 90px 70px; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: 1px solid #f4f4f4; font-size: 11px; }
   </style>
@@ -33,7 +35,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">The panel, and why it has no heading</div>
-      <div style="font-size:12.5px;color:#737373">A frosted box with arbitrary content. Three of them, and the same component each time.</div>
+      <div style="font-size:12.5px;color:#737373">A plain card with arbitrary content. Three of them, and the same component each time.</div>
     </div>
   </div>
 
@@ -49,7 +51,7 @@
 
       <!-- a stats strip, py default -->
       <div style="position:relative">
-        <div class="glass" style="padding:14px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px">
+        <div class="card" style="padding:14px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px">
           <div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">128</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
           <div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">94</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
           <div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">6</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
@@ -60,7 +62,7 @@
 
       <!-- a toolbar, py-2 -->
       <div style="position:relative">
-        <div class="glass" style="padding:8px 12px;display:flex;align-items:center;gap:8px">
+        <div class="card" style="padding:8px 12px;display:flex;align-items:center;gap:8px">
           <div style="display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid #e5e5e5;border-radius:10px;background:#ffffff;flex:1;max-width:230px">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.4-4.4"></path></svg>
             <span style="font-size:11.5px;color:#737373">Filter</span>
@@ -75,7 +77,7 @@
 
       <!-- a table, p-0 -->
       <div style="position:relative;flex:1;min-height:0">
-        <div class="glass" style="overflow:hidden;height:100%">
+        <div class="card" style="overflow:hidden;height:100%">
           <div class="trow" style="background:rgba(245,245,245,0.6);font-size:9.5px;font-weight:600;letter-spacing:0.06em;color:#737373"><div>COLUMN</div><div>COLUMN</div><div>COLUMN</div></div>
           <div class="trow"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
           <div class="trow"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
@@ -95,7 +97,7 @@
 
       <div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
         <div class="eyebrow" style="color:#737373;margin-bottom:6px">TWO CLASS SLOTS, NO PADDING OF ITS OWN</div>
-        <div style="font-size:11.5px;color:#404040;line-height:1.5"><span class="mono" style="font-size:11px">className</span> on the frosted container and <span class="mono" style="font-size:11px">contentClassName</span> on the inner wrapper. A table wants <span class="mono" style="font-size:11px">p-0</span>; a toolbar wants <span class="mono" style="font-size:11px">py-2</span>. That is why the padding is yours.</div>
+        <div style="font-size:11.5px;color:#404040;line-height:1.5"><span class="mono" style="font-size:11px">className</span> on the card and <span class="mono" style="font-size:11px">contentClassName</span> on the inner wrapper. A table wants <span class="mono" style="font-size:11px">p-0</span>; a toolbar wants <span class="mono" style="font-size:11px">py-2</span>. That is why the padding is yours.</div>
       </div>
 
       <div style="border:1px solid rgba(251,44,54,0.3);background:rgba(251,44,54,0.05);border-radius:14px;padding:13px">