wiki-formant 0.64.0 → 0.65.0

package/README.md

@@ -1028,7 +1028,7 @@ the site's stylesheet gives them and the box a look.
 
 ## Base stylesheet
 
-`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, a table's scroll box, the stats block's grid, the code-tab strip, the banner's row and the infobox's wrapping, the breadcrumb row, the `aria-sort` arrow as a mask over `currentColor`, the stats page's grid and bars, and the chart's height and pinned buttons. It also carries the shape and motion of the primitives every site re-implemented and forked — `.spinner` (a `currentColor` ring sized by `--spinner-size`), `.skeleton`'s pulse, `.empty-state`, the wrap rule for long tokens in inline `code` — and the reduced-motion guard none of them had. No colour and no scale, so a design system's own rules override it at equal specificity.
+`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, a table's scroll box, the stats block's grid, the code-tab strip, the banner's row and the infobox's wrapping, the breadcrumb row, the `aria-sort` arrow as a mask over `currentColor`, the stats page's grid and bars, and the chart's height and pinned buttons. It also carries the shape and motion of the primitives every site re-implemented and forked — `.spinner` (a `currentColor` ring sized by `--spinner-size`), `.skeleton`'s pulse, `.empty-state`, the wrap rule for long tokens in inline `code` — and the reduced-motion guard none of them had. No colour and no scale, so a design system's own rules override it at equal specificity. The one set of tokens it declares is the page frame every site lays out by: `--content-width` (72rem, gutters inside), `--sidebar-width` (18rem) and `--page-pad` (16 / 24 / 32px at base / 640 / 1024). They sit in the components layer, so a site never restates them in `@theme`, which would lose; an element that must differ sets its own.
 
 ```css
 @import "wiki-formant/base.css" layer(components);

package/dist/base.css

@@ -11,6 +11,25 @@
    panel showed at once; one never received the utility classes ColumnsView
    used to emit, so two of its four alignments did nothing. */
 
+/* ---- the page frame ---------------------------------------------------------
+   The three numbers every site's page is laid out by, and the one exception to
+   "no design token": they are the frame, not a look, and four sites restating
+   them is how one of them came to draw an 80rem page while the rest drew 72.
+   The column is 72rem with its gutters inside it, the rail 18rem, and the
+   gutter 16 / 24 / 32px at base / 640 / 1024, the header, column and footer
+   reading the same one so they line up. STRUCTURE.md D8 is the spec.
+
+   This file loads into the components layer, which outranks Tailwind's theme
+   layer: a site does not restate these in `@theme`, and one that must differ
+   sets the property on the element that differs. */
+:root {
+  --content-width: 72rem;
+  --sidebar-width: 18rem;
+  --page-pad: 1rem;
+}
+@media (min-width: 40rem) { :root { --page-pad: 1.5rem; } }
+@media (min-width: 64rem) { :root { --page-pad: 2rem; } }
+
 /* ---- ColumnsView ----------------------------------------------------------
    Stacked until there is room for a row. `data-gap` and `data-align` replace
    the Tailwind utilities the view used to emit, which only reached a site whose
@@ -93,7 +112,7 @@
   position: sticky;
   top: var(--rail-top, 0px);
   flex-shrink: 0;
-  width: var(--sidebar-width, 18rem);
+  width: var(--sidebar-width);
   height: calc(100dvh - var(--rail-top, 0px));
   overflow: hidden;
   border-inline-end: var(--rail-border, none);
@@ -109,7 +128,7 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 .wiki-sidebar__scroll {
   display: flex;
   flex-direction: column;
-  width: var(--sidebar-width, 18rem);
+  width: var(--sidebar-width);
   height: 100%;
   overflow-y: auto;
 }
@@ -148,6 +167,9 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 .code-tabs-btn { cursor: pointer; }
 .editorial-banner { display: flex; }
 .infobox { overflow-wrap: anywhere; }
+/* A link grid's description is prose, so it stops at the site's measure: it
+   sits outside the article's prose box, and on radix.wiki ran 709px. */
+.link-grid-group-description { max-width: var(--measure); }
 .infobox-series { display: flex; flex-direction: column; }
 .heading-anchor,
 .ref-backlink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",