A host filling its column to the pixel narrows with it; stories hold on Linux

- The width spacer is a grid track, minmax(columns − 1/32px, columns):
  the columns stay a shrink-to-fit host's width, and a flex-1 column the
  host fills exactly still shrinks when a sibling grows, its resize
  laying the host out (the min-width spacer held it at the host's
  width).
- Own Width fills its column to the pixel on every platform.
- Glyph Properties checks font smoothing where the browser has it
  (Firefox on macOS only); Line Breaks spaces each CJK character from
  its own advance.
- pnpm 12.8.1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: benface

.agents/specs/cell-model.md

@@ -217,9 +217,16 @@ is caught by observing the host's parent (a growing container), its
 siblings (a flex or grid slot that grows because a sibling shrank), and
 the window. A host whose width is its content's (`w-fit`,
 `inline-block`, a float, an absolute box, a flex row's item) takes it
-from a spacer, as its height does: the shadow viewport's `min-width`,
-the columns laid out, lifted while the engine reads so the content
-measures anew.
+from a spacer, as its height does: a shadow grid track,
+`minmax(<columns> − 1/32px, <columns>)`, lifted while the engine reads
+so the content measures anew. The columns laid out are its max-content
+width, the host's width where it has none of its own; its min-content
+width yields a thirty-second of a pixel, so a container sized off the
+host (a `flex-1` column the host fills to the pixel, which an aside
+beside it squeezes) still shrinks natively, and its resize lays the
+host out. A thirty-second is past a layout unit in every engine and
+within the resize tolerance, so a flex item held at that floor is laid
+out once.
 
 The height is CSS's too. The host keeps `height: auto`; its content
 lies out of its flow (the shadow's slot is positioned, outside the
@@ -1643,13 +1650,13 @@ For "Aspect ratio":
 For "Host sizing":
 
 - shadow.css: the slot out of the host's flow but under
-  `:host([measuring])`, and the viewport, whose `min-height` and
-  `min-width` are the spacer, the width lifted under
+  `:host([measuring])`, the viewport, whose `min-height` is the
+  spacer's height, and `#spacer`, its width's grid track, lifted under
   `:host([measuring])`.
 - element.ts: the height read before `measuring` (`sizedHeight`), the
   rows it gives the root where it is not the spacer's (`sizedRows`),
   the spacer written from the root's natural content rows
-  (`#spacerHeight`) and the columns laid out (the viewport's
-  `min-width`), and `#laidOutSize`, the height the resize
+  (`#spacerHeight`) and the columns laid out (`#spacerWidth`,
+  `SPACER_YIELD` under them), and `#laidOutSize`, the size the resize
   observer compares.
 - layout.ts: `layoutRoot`'s `rows`, the root's forced height.

apps/storybook/stories/host.stories.ts

@@ -591,8 +591,8 @@ export const OwnHeight: StoryObj = {
  * its chrome (specs/cell-model.md "Host sizing"): `w-fit`,
  * `inline-block`, `float-left`, and a flex row's item, whose sibling
  * starts past its right edge, the row narrowed laying it out narrower;
- * and a host in a `flex-1` column narrows as the aside beside it
- * grows. */
+ * and a host filling its `flex-1` column to the pixel narrows as the
+ * aside beside it grows. */
 export const OwnWidth: StoryObj = {
   render: () => html`
     <div class="flex flex-col gap-4">
@@ -636,8 +636,15 @@ export const OwnWidth: StoryObj = {
       expect(box("sibling").right).toBeLessThanOrEqual(box("row").right + 0.5);
     });
     layouts.stop();
+    // Room for forty whole columns, which the host fills to the pixel,
+    // its layout settled before the aside grows.
+    const cell = cellSize(hooks("column")).width;
+    hooks("shell").style.width = `${60 * cell}px`;
+    hooks("aside").style.width = `${20 * cell}px`;
+    await waitFor(() => expect(box("column").width).toBeCloseTo(40 * cell, 1));
+    await frames(2);
     // An inline width: a new utility's stylesheet would lay every host out.
-    hooks("aside").style.width = "30rem";
+    hooks("aside").style.width = `${50 * cell}px`;
     await waitFor(() => {
       expect(box("column").right).toBeLessThanOrEqual(box("shell").right + 0.5);
       expect(rowsOf(hooks("column")).filter((row) => row.trim()).length).toBeGreaterThan(1);

apps/storybook/stories/typography.stories.ts

@@ -255,12 +255,15 @@ export const GlyphProperties: StoryObj = {
       const style = getComputedStyle(paintedSpan(host, text)!);
       const smoothing = style.getPropertyValue("-webkit-font-smoothing");
       // Firefox's alias reads its own `grayscale`.
-      return `${style.fontWeight} ${style.fontStyle} ${smoothing === "grayscale" ? "antialiased" : smoothing}`;
+      return `${style.fontWeight} ${style.fontStyle} ${smoothing === "grayscale" ? "antialiased" : smoothing}`.trimEnd();
     };
-    expect(font(styledHost!, "host")).toBe("700 italic antialiased");
-    expect(font(styledHost!, "upright")).toBe("400 normal auto");
-    expect(font(plainHost!, "plain")).toBe("400 normal auto");
-    expect(font(plainHost!, "styled")).toBe("700 italic antialiased");
+    // Firefox smooths fonts on macOS only.
+    const smoothed = (face: string, smoothing: string) =>
+      CSS.supports("-webkit-font-smoothing", smoothing) ? `${face} ${smoothing}` : face;
+    expect(font(styledHost!, "host")).toBe(smoothed("700 italic", "antialiased"));
+    expect(font(styledHost!, "upright")).toBe(smoothed("400 normal", "auto"));
+    expect(font(plainHost!, "plain")).toBe(smoothed("400 normal", "auto"));
+    expect(font(plainHost!, "styled")).toBe(smoothed("700 italic", "antialiased"));
     const zero = getComputedStyle(paintedSpan(plainHost!, "zero")!);
     expect(zero.fontVariantNumeric).toBe("slashed-zero");
     expect(zero.textShadow).not.toBe("none");
@@ -602,19 +605,30 @@ const lineBreakCases = (u: Unit): NativeCase[] =>
     departs,
   }));
 
-/** Each case's rows as the browser breaks them, a CJK copy spaced to
- * the grid's two cells a character by its first (its fallback font
- * draws them narrower), its spaces kept a cell. */
+/** Each case's rows as the browser breaks them, each character of a
+ * CJK copy spaced to its cells on the grid, two a character and one a
+ * space, from its own advance (fallback fonts draw them narrower, and
+ * not all alike). */
 export const LineBreaks: StoryObj = {
   tags: ["!dev", "!golden"],
   ...besideNative(lineBreakCases, async (host, native, i) => {
     if (lineBreaks[i]!.cjk) {
-      const probe = native.appendChild(document.createElement("span"));
-      probe.textContent = native.textContent!.charAt(0);
-      const advance = probe.getBoundingClientRect().width;
-      probe.remove();
-      const spacing = 2 * cellSize(host).width - advance;
-      Object.assign(native.style, { letterSpacing: `${spacing}px`, wordSpacing: `${-spacing}px` });
+      const cell = cellSize(host).width;
+      const paragraph = native.firstElementChild as HTMLElement;
+      const chars = [...paragraph.textContent!].map((char) => {
+        const span = document.createElement("span");
+        span.textContent = char;
+        return span;
+      });
+      paragraph.replaceChildren(...chars);
+      paragraph.style.letterSpacing = "0px";
+      const advances = chars.map((span) => span.getBoundingClientRect().width);
+      // A hair under its cells, so a full line fits however the engine
+      // rounds the spacing.
+      chars.forEach((span, j) => {
+        const cells = span.textContent === " " ? 1 : 2;
+        span.style.letterSpacing = `${cells * cell - advances[j]! - 1 / 32}px`;
+      });
       await frames(1);
     }
     expectLinesAsNative(host, native);

package.json

@@ -35,5 +35,5 @@
       "oxfmt"
     ]
   },
-  "packageManager": "pnpm@12.6.0+sha512.3ef68f951cb111ac204b4a5a16f0b2ddf0da56a96e0413e81d855d9f0b55ef926714709028e1cd00c405c2c5fb7b9e8ec4dc46777c805d0373c2f2ff00fd20ec"
+  "packageManager": "pnpm@12.8.1+sha512.f64ba907507f5ceafe06c8d38e6052d0179444580ec1279ddd5bfc11cb48aa8a2644b66598e07e761da84872a9fc57d5f902b87fa49d024198d558612aabbe45"
 }

packages/core/src/element.ts

@@ -88,6 +88,7 @@ const SHADE_RULES = [...SHADES]
 const SHADOW_TEMPLATE = `
 <style>${shadowCss}${SHADE_RULES}</style>
 <div id="viewport">
+  <div id="spacer"></div>
   <pre id="grid" class="grid" aria-hidden="true"></pre>
   <div id="layers"></div>
   <slot></slot>
@@ -263,6 +264,11 @@ const DYNAMIC_RELAYOUT_EVENTS = [
  * 1/60 in Firefox). */
 const SIZE_TOLERANCE = 0.05;
 
+/** How far the width spacer yields under the columns laid out
+ * (specs/cell-model.md "Host sizing"), in px: past a layout unit in
+ * every engine, within SIZE_TOLERANCE. */
+const SPACER_YIELD = 1 / 32;
+
 /** Whether a lock's snap back could start a transition on an element:
  * a non-zero duration or delay in any entry of its lists. */
 const mayTransition = (style: CSSStyleDeclaration): boolean =>
@@ -448,9 +454,11 @@ export class MonoWindElement extends HTMLElementBase {
   #grid: HTMLElement;
   #layers: HTMLElement;
   #viewport: HTMLElement;
-  /** The spacer's height in px, the content's rows at the last layout
-   * (specs/cell-model.md "Host sizing"). */
+  #spacer: HTMLElement;
+  /** The spacer's size in px, the content's rows and the columns at the
+   * last layout (specs/cell-model.md "Host sizing"). */
   #spacerHeight = 0;
+  #spacerWidth = 0;
   #probe: HTMLElement;
   /** Resolves colors where the grid's spans inherit them
    * (specs/cell-model.md "Opacity and translucency"): the ink, the
@@ -605,6 +613,7 @@ export class MonoWindElement extends HTMLElementBase {
     this.#grid = shadow.querySelector<HTMLElement>("#grid")!;
     this.#layers = shadow.querySelector<HTMLElement>("#layers")!;
     this.#viewport = shadow.querySelector<HTMLElement>("#viewport")!;
+    this.#spacer = shadow.querySelector<HTMLElement>("#spacer")!;
     this.#colorProbe = shadow.querySelector<HTMLElement>("#color-probe")!;
     this.#colorProbeStyle = getComputedStyle(this.#colorProbe);
     // The cell-metrics probe (measureCellMetrics), in the LIGHT DOM so it
@@ -2995,9 +3004,11 @@ export class MonoWindElement extends HTMLElementBase {
         this.#viewport.style.minHeight = `${spacerHeight}px`;
         this.#spacerHeight = spacerHeight;
       }
-      const spacerWidth = `${availableCols * metrics.width}px`;
-      if (this.#viewport.style.minWidth !== spacerWidth)
-        this.#viewport.style.minWidth = spacerWidth;
+      const spacerWidth = availableCols * metrics.width;
+      if (spacerWidth !== this.#spacerWidth) {
+        this.#spacer.style.gridTemplateColumns = `minmax(${spacerWidth - SPACER_YIELD}px, ${spacerWidth}px)`;
+        this.#spacerWidth = spacerWidth;
+      }
       // Cap the width to the columns laid out (specs/cell-model.md "Host
       // sizing"); the companion applies it outside measuring.
       setVar(this, "--mw-host-w", `${availableCols * metrics.width + chromeX}px`);

packages/core/src/shadow.css

@@ -15,7 +15,7 @@
 /* Positioned, so the light DOM paints over the grid from its origin; a
  * block formatting context, so a flow child's top margin stays where
  * the engine put it (specs/cell-model.md "Inline content"). Out of the
- * host's flow, so the viewport's `min-height` and `min-width` alone give
+ * host's flow, so the viewport's `min-height` and the spacer alone give
  * it its size ("Host sizing"), except while the engine reads a
  * shrink-to-fit host's width off its content. */
 slot {
@@ -28,8 +28,14 @@ slot {
 :host([measuring]) slot {
   position: relative;
 }
-:host([measuring]) #viewport {
-  min-width: 0 !important;
+/* A track preferring the columns laid out and yielding a hair under
+ * them, so a container sized off the host still shrinks natively
+ * (specs/cell-model.md "Host sizing"). */
+#spacer {
+  display: grid;
+}
+:host([measuring]) #spacer {
+  display: none;
 }
 /* Sized to the ink extent, the host's background carried past the host
  * (specs/cell-model.md "Overflow"); the text fill undoes the host's