vintage-frames 0.12.8 → 0.14.0

package/custom-elements.json

@@ -1348,11 +1348,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.",
+          "description": "The classic System 7 checkbox: a 12×12 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite, filling the 10×10\ninterior. The border \"thickens\" while pressed, exactly like the original\ncontrol.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.",
           "name": "VfCheckbox",
           "cssParts": [
             {
-              "description": "The 13×13 checkbox square.",
+              "description": "The 12×12 checkbox square.",
               "name": "box"
             },
             {
@@ -1362,7 +1362,7 @@
           ],
           "slots": [
             {
-              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box.",
+              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 12×12 box.",
               "name": ""
             }
           ],
@@ -2246,7 +2246,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-container>` — a box that is nothing but its declared size.\n\nThe kit's positioned-placement story (src/position.ts) ends with one line of\nCSS it can't write for you: children placed with `top`/`left` need a\npositioned ancestor, and while every kit container is one — a window body, a\nstack, a fieldset — a region of *your own* needs `position: relative` in a\nstylesheet. This component is that region as an element: declare `width` and\n`height` in whole system px, slot anything into it, place children against\nits origin. A DITL's enclosing rectangle, with nothing drawn in it.\n\n```html\n<vf-container width=\"200\" height=\"120\">\n  <vf-icon label=\"System\" width=\"64\" top=\"8\" left=\"12\">…</vf-icon>\n  <vf-icon label=\"Finder\" width=\"64\" top=\"8\" left=\"104\">…</vf-icon>\n</vf-container>\n```\n\nThe rectangle is the whole API — `width`/`height` here, plus the `top`/`left`\npair nearly every component takes (VfPositioned), so a container is\nitself placeable: inside a window, a desktop, or another container, at whole\nsystem px that keep its box on the device-pixel grid by construction.\n\n**It is not a `vf-stack`.** The stack is a flexbox with opinions — it\ndistributes children along an axis, compiles `fill-width`/`fill-height` into\nflex, defaults a cross-axis alignment. This box has no layout opinion at\nall: in-flow children get normal flow, placed children get a coordinate\nsystem, and that is the whole API. Reach for it when the stack's opinions\nare the thing in the way — a field of placed icons, a fixed stage for\nabsolutely-positioned art, a consumer's own composition that brings its\nlayout with it.\n\n**The declared size is the layout.** `width`/`height` land on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)` (VfSized), so the box scales\nwith the display and sits on the device-pixel grid by construction. Content\nthat outgrows the box overflows it rather than growing it — the number is\nthe layout, and content that doesn't fit is a number to raise. Leave a\ndimension off and that axis shrink-wraps: `fit-content`, not the parent's\nwidth, because a layout box that silently claimed a size nobody declared\nwould be inventing one (the `vf-stack` rule, held here too).\n\n**It paints nothing and means nothing** — unless `pattern` or `rule` say\nwhat to paint. No role, keyboard behavior or selection; what it holds\ndecides what it is.\n\n**`rule` draws the 1px rule on the edges it names** — `rule=\"bottom\"` is\nthe menu bar's anatomy (the box's rows over one row of ink), `rule=\"top\"`\na status strip's, all four a framed box. The rule is the box's own border\n(vfRule), inside the declared size, so a 24px `rule=\"bottom\"`\nstrip is 23 rows of box over the line; content, `fill-width` children and\nplaced children begin inside it, as a rectangle's interior begins inside\nFrameRect's line.\n\n**`pattern` fills the box with a 1-bit pattern**: one of the 38 standard\nMacPaint patterns by name (`pattern=\"bricks\"`, `pattern=\"gray-50\"` —\ndocs/PATTERNS.md has the table), or sixteen hex digits stating a custom\n8×8 pattern row by row, the way a PAT resource did. It is painted as the\nbox's own background — black ink on a `--vf-white` ground, anchored at\nthe box's top-left corner, under the content — by the same whole-surface\nraster mechanism as the desktop dither, so it is 1-bit at every density\nand zoom (src/pattern-fill.ts). A declared `width`/`height` sizes the\nraster exactly; an undeclared axis (`fill-width`, a shrink-wrapped\nheight) is measured. Under forced colors the pattern goes flat Canvas.\n\n**It holds its box on the device-pixel grid** — with a `GridSnapController`.\nA container's box is itself the consumer's coordinate system, including for\nnon-`vf` content that cannot correct itself, so the box is the thing to\nhold on the grid. The shadow box below owns the `position: relative` anchor\nand the `vf-snap` class together, so the correction\nmoves the whole coordinate system — everything placed against it rides\nalong instead of being re-corrected child by child. (`vf-stack` shipped\nwithout a controller on the theory that slotted `vf-*` children correct\ntheir own origins; this component is where that theory's gap — consumer\ncontent — became visible, and the stack has since adopted the same\narrangement.)\n\nLike the stack it is **typographically transparent**: `vfBase`'s chrome\ndress is returned to `inherit` on the host, so wrapping content in a sized\nbox changes nothing about how that content reads.\n\n`fill-width` / `fill-height` work here the way they do everywhere: read\nabout the host (be as big as *its* parent allows), and compiled for slotted\nchildren — `width: 100%` in normal flow, so a child filling the cross of a\ndeclared box needs no stylesheet. A height fill needs a declared `height`\nto resolve against; with none it is inert, not an error.",
+          "description": "`<vf-container>` — a box that is nothing but its declared size.\n\nThe kit's positioned-placement story (src/position.ts) ends with one line of\nCSS it can't write for you: children placed with `top`/`left` need a\npositioned ancestor, and while every kit container is one — a window body, a\nstack, a fieldset — a region of *your own* needs `position: relative` in a\nstylesheet. This component is that region as an element: declare `width` and\n`height` in whole system px, slot anything into it, place children against\nits origin. A DITL's enclosing rectangle, with nothing drawn in it.\n\n```html\n<vf-container width=\"200\" height=\"120\">\n  <vf-icon label=\"System\" width=\"64\" top=\"8\" left=\"12\">…</vf-icon>\n  <vf-icon label=\"Finder\" width=\"64\" top=\"8\" left=\"104\">…</vf-icon>\n</vf-container>\n```\n\nThe rectangle is the whole API — `width`/`height` here, plus the `top`/`left`\npair nearly every component takes (VfPositioned), so a container is\nitself placeable: inside a window, a desktop, or another container, at whole\nsystem px that keep its box on the device-pixel grid by construction.\n\n**It is not a `vf-stack`.** The stack is a flexbox with opinions — it\ndistributes children along an axis, compiles `fill-width`/`fill-height` into\nflex, defaults a cross-axis alignment. This box has no layout opinion at\nall: in-flow children get normal flow, placed children get a coordinate\nsystem, and that is the whole API. Reach for it when the stack's opinions\nare the thing in the way — a field of placed icons, a fixed stage for\nabsolutely-positioned art, a consumer's own composition that brings its\nlayout with it.\n\n**The declared size is the layout.** `width`/`height` land on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)` (VfSized), so the box scales\nwith the display and sits on the device-pixel grid by construction. Content\nthat outgrows the box overflows it rather than growing it — the number is\nthe layout, and content that doesn't fit is a number to raise. Leave a\ndimension off and that axis shrink-wraps: `fit-content`, not the parent's\nwidth, because a layout box that silently claimed a size nobody declared\nwould be inventing one (the `vf-stack` rule, held here too).\n\n**It paints nothing and means nothing** — unless `pattern` or `rule` say\nwhat to paint. No role, keyboard behavior or selection; what it holds\ndecides what it is.\n\n**`rule` draws the 1px rule on the edges it names** — `rule=\"bottom\"` is\nthe menu bar's anatomy (the box's rows over one row of ink), `rule=\"top\"`\na status strip's, all four a framed box. The rule is drawn inside the\ndeclared size (vfRule), so a 24px `rule=\"bottom\"` strip is 23 rows\nof box over the line; content, `fill-width` children and placed children\nbegin inside it, as a rectangle's interior begins inside FrameRect's line.\n\n**`pattern` fills the box with a 1-bit pattern**: one of the 38 standard\nMacPaint patterns by name (`pattern=\"bricks\"`, `pattern=\"gray-50\"` —\ndocs/PATTERNS.md has the table), or sixteen hex digits stating a custom\n8×8 pattern row by row, the way a PAT resource did. It is painted as the\nbox's own background — black ink on a `--vf-white` ground, anchored at\nthe box's top-left corner, under the content — by the same repeating tile\nas the desktop dither, so it is 1-bit at every density and zoom and a box\nof any size, declared or not, costs nothing more (src/pattern-fill.ts).\nUnder forced colors the pattern goes flat Canvas.\n\n**It holds its box on the device-pixel grid** — with a `GridSnapController`.\nA container's box is itself the consumer's coordinate system, including for\nnon-`vf` content that cannot correct itself, so the box is the thing to\nhold on the grid. The correction lands on the shadow box below, and the\ncoordinate system sits inside it, so the correction moves the whole\ncoordinate system — everything placed against it rides along instead of\nbeing re-corrected child by child. (`vf-stack` shipped\nwithout a controller on the theory that slotted `vf-*` children correct\ntheir own origins; this component is where that theory's gap — consumer\ncontent — became visible, and the stack has since adopted the same\narrangement.)\n\nLike the stack it is **typographically transparent**: `vfBase`'s chrome\ndress is returned to `inherit` on the host, so wrapping content in a sized\nbox changes nothing about how that content reads.\n\n`fill-width` / `fill-height` work here the way they do everywhere: read\nabout the host (be as big as *its* parent allows), and compiled for slotted\nchildren — `width: 100%` in normal flow, so a child filling the cross of a\ndeclared box needs no stylesheet. A height fill needs a declared `height`\nto resolve against; with none it is inert, not an error.",
           "name": "VfContainer",
           "slots": [
             {
@@ -2290,7 +2290,7 @@
               "type": {
                 "text": "string | null | undefined"
               },
-              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn as the\nbox's own border inside the declared size, in `--vf-black`, scaled with\nthe display like every kit frame's border; content and placed children\nbegin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
+              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn inside\nthe declared size, in `--vf-black`, scaled with the display like every\nkit frame; content and placed children begin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
               "attribute": "rule"
             },
             {
@@ -2344,8 +2344,8 @@
               "name": "patternFill",
               "privacy": "private",
               "readonly": true,
-              "default": "new PatternFillController(this, { getBox: () => this.box, getPattern: () => this._pattern, getSize: () => ({ width: this.width, height: this.height }), })",
-              "description": "The pattern fill, painted on `.box` so it rides the snap correction with\nthe coordinate system. A declared axis sizes the raster exactly; an\nundeclared one is measured (src/pattern-fill.ts)."
+              "default": "new PatternFillController(this, { getBox: () => this.box, getPattern: () => this._pattern, })",
+              "description": "The pattern fill, painted on `.box` so it rides the snap correction with\nthe coordinate system (src/pattern-fill.ts)."
             },
             {
               "kind": "field",
@@ -2443,7 +2443,7 @@
               "type": {
                 "text": "string | null | undefined"
               },
-              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn as the\nbox's own border inside the declared size, in `--vf-black`, scaled with\nthe display like every kit frame's border; content and placed children\nbegin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
+              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn inside\nthe declared size, in `--vf-black`, scaled with the display like every\nkit frame; content and placed children begin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
               "fieldName": "rule"
             },
             {
@@ -2563,7 +2563,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, synced in a task once\nany pointer gesture has ended), so tabbing walks the stack the way the eye\ndoes and Shift+Tab is its exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\nA slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier\nabove both, so its dropped menus cover palettes and document windows\nalike; only the screen-corner mask is in front of it.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its four corners\nwith the classic corner mask.\n\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, one whole-surface raster at one image px per system px, 1-bit at\nevery density and zoom (src/pattern-fill.ts).\n\n**The drag surface.** The Finder dragged an icon as a dotted outline drawn\non the *screen*, clipped at its edge and phase-locked to its raster, so\nthe screen hosts the layer that outline draws on: a full-bleed child of\nthe screen, `pointer-events: none` (never a hit for the page's\n`elementsFromPoint`), whose children paint one tier above the menu bar\nand under the corner mask — the layer itself is deliberately no stacking\ncontext, since a blend inside one would composite against nothing. An\nicon reaches it without an import, the menu-handshake idiom: on a drag's\nfirst step it dispatches `vf-drag-surface-request` (bubbles, non-composed,\n`detail.surface` null), and the nearest desktop on its light-DOM path\nfills the detail with the layer. A window asks the same way and draws\nthere with the same pen: its zoom rects when it opens from a rect\n(`vf-window.show({ from })`), its outline under an `outline-drag`. Not the\ntop layer: stable Safari cannot\nblend an element there against the page (src/cursor.ts), and a second\nkit entry in the top layer would need a re-promotion handshake.\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, synced in a task once\nany pointer gesture has ended), so tabbing walks the stack the way the eye\ndoes and Shift+Tab is its exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\nA slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier\nabove both, so its dropped menus cover palettes and document windows\nalike; only the screen-corner mask is in front of it.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its four corners\nwith the classic corner mask.\n\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, a repeating tile drawn at the display's resolution, 1-bit at every\ndensity and zoom (src/pattern-fill.ts).\n\n**The drag surface.** The Finder dragged an icon as a dotted outline drawn\non the *screen*, clipped at its edge and phase-locked to its raster, so\nthe screen hosts the layer that outline draws on: a full-bleed child of\nthe screen, `pointer-events: none` (never a hit for the page's\n`elementsFromPoint`), whose children paint one tier above the menu bar\nand under the corner mask — the layer itself is deliberately no stacking\ncontext, since a blend inside one would composite against nothing. An\nicon reaches it without an import, the menu-handshake idiom: on a drag's\nfirst step it dispatches `vf-drag-surface-request` (bubbles, non-composed,\n`detail.surface` null), and the nearest desktop on its light-DOM path\nfills the detail with the layer. A window asks the same way and draws\nthere with the same pen: its zoom rects when it opens from a rect\n(`vf-window.show({ from })`), its outline under an `outline-drag`. Not the\ntop layer: stable Safari cannot\nblend an element there against the page (src/cursor.ts), and a second\nkit entry in the top layer would need a re-promotion handshake.\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
           "name": "VfDesktop",
           "cssProperties": [
             {
@@ -2764,8 +2764,8 @@
               "name": "patternFill",
               "privacy": "private",
               "readonly": true,
-              "default": "new PatternFillController(this, { getBox: () => this.screen, getPattern: () => (this._token ? null : this._desktopPattern), getSize: () => ({ width: this.width ?? DEFAULT_SCREEN_WIDTH, height: this.height ?? DEFAULT_SCREEN_HEIGHT, }), })",
-              "description": "The desktop pattern, painted as the screen's own background\n(src/pattern-fill.ts) from the declared raster — scale-independent, so\ndensity and zoom re-encode nothing — and silent while a consumer token\nowns the fill."
+              "default": "new PatternFillController(this, { getBox: () => this.screen, getPattern: () => (this._token ? null : this._desktopPattern), })",
+              "description": "The desktop pattern, painted as the screen's own background\n(src/pattern-fill.ts) — a repeating tile, so resizing the screen\nre-encodes nothing — and silent while a consumer token owns the fill."
             },
             {
               "kind": "field",
@@ -11689,15 +11689,15 @@
               },
               "privacy": "private",
               "default": "''",
-              "description": "The consumer's `--vf-progress-stripes` override, or `''` for the kit\nbarber — which exact-fill path the strip takes (src/tile-grid.ts).\nRe-read every update; a runtime token swap wants a `requestUpdate()`."
+              "description": "The consumer's `--vf-progress-stripes` override, or `''` for the kit\nbarber — which path the strip takes (src/tile-grid.ts). Re-read every\nupdate; a runtime token swap wants a `requestUpdate()`."
             },
             {
               "kind": "field",
-              "name": "#raster",
+              "name": "#barberTile",
               "privacy": "private",
               "readonly": true,
-              "default": "new TileRasterCache()",
-              "description": "The whole-strip barber raster, cached against its ceiled width."
+              "default": "new RepeatTileController(this, { getBox: () => this.renderRoot?.querySelector<HTMLElement>('.vf-tile-strip'), getArt: () => (this.indeterminate && !this._pattern ? BARBER : null), property: '--_vf-barber-tile', })",
+              "description": "The kit barber: the strip carries the repeating tile as\n`--_vf-barber-tile`."
             },
             {
               "kind": "field",
@@ -15308,7 +15308,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-separator>` — a 1px System 7 rule.\n\nHorizontal by default (1px tall, full width); set the `vertical` attribute\nfor a 1px-wide vertical rule (give it a height, or let a flex parent\nstretch it).\n\nContainers may restyle it via custom properties:\n- `--vf-separator-color` — line color (default `var(--vf-black, #000)`).\n- `--vf-separator-style` — line style, e.g. `dotted` (default `solid`).\n  `vf-menu` sets these so slotted separators render as the classic dimmed\n  dotted menu rule (see Menus.png).",
+          "description": "`<vf-separator>` — a 1px System 7 rule.\n\nHorizontal by default (1px tall, full width); set the `vertical` attribute\nfor a 1px-wide vertical rule (give it a height, or let a flex parent\nstretch it).\n\nContainers may restyle it via custom properties:\n- `--vf-separator-color` — line color (default `var(--vf-black, #000)`).\n- `--vf-separator-style` — `solid` (the default) or `dotted`, one system px\n  on and one off. `vf-menu` sets these so slotted separators render as the\n  classic dimmed dotted menu rule (see Menus.png).",
           "name": "VfSeparator",
           "cssProperties": [
             {
@@ -15316,7 +15316,7 @@
               "name": "--vf-separator-color"
             },
             {
-              "description": "`vf-separator` rule style — `vf-menu` sets `dotted` (see `Menus.png`)",
+              "description": "`vf-separator` rule style: `solid` or `dotted` — `vf-menu` sets `dotted` (see `Menus.png`)",
               "name": "--vf-separator-style",
               "default": "solid"
             }
@@ -16965,15 +16965,15 @@
               },
               "privacy": "private",
               "default": "''",
-              "description": "The consumer's `--vf-swatch-checker` override, or `''` for the kit\nchecker — which exact-fill path render() takes (src/tile-grid.ts).\nRe-read every update; a runtime token swap wants a `requestUpdate()`."
+              "description": "The consumer's `--vf-swatch-checker` override, or `''` for the kit\nchecker — which path render() takes (src/tile-grid.ts). Re-read every\nupdate; a runtime token swap wants a `requestUpdate()`."
             },
             {
               "kind": "field",
-              "name": "#raster",
+              "name": "#checkerTile",
               "privacy": "private",
               "readonly": true,
-              "default": "new TileRasterCache()",
-              "description": "The whole-surface checker raster, cached against the fill's size."
+              "default": "new RepeatTileController(this, { getBox: () => this.renderRoot?.querySelector<HTMLElement>('.fill'), getArt: () => (this._pattern ? null : CHECKER), property: '--_vf-checker-tile', })",
+              "description": "The kit checker: `.fill` carries the repeating tile as\n`--_vf-checker-tile`."
             },
             {
               "kind": "field",
@@ -20388,15 +20388,15 @@
               },
               "privacy": "private",
               "default": "''",
-              "description": "The consumer's `--vf-dots-pattern` override, or `''` for the kit dots —\nwhich exact-fill path the utility bar takes (src/tile-grid.ts). Re-read\nevery update; a runtime token swap wants a `requestUpdate()`."
+              "description": "The consumer's `--vf-dots-pattern` override, or `''` for the kit dots —\nwhich path the utility bar takes (src/tile-grid.ts). Re-read every\nupdate; a runtime token swap wants a `requestUpdate()`."
             },
             {
               "kind": "field",
-              "name": "#dotsRaster",
+              "name": "#dotsTile",
               "privacy": "private",
               "readonly": true,
-              "default": "new TileRasterCache()",
-              "description": "The whole-surface dots raster, cached against its ceiled size."
+              "default": "new RepeatTileController(this, { getBox: () => this.renderRoot?.querySelector<HTMLElement>('.vf-dots'), getArt: () => (this.variant === 'utility' && !this._dotsPattern ? DOTS : null), property: '--_vf-dots-tile', })",
+              "description": "The kit dots: the utility bar's `.vf-dots` layer carries the repeating\ntile as `--_vf-dots-tile` (`vfDots`), whatever the window's width."
             },
             {
               "kind": "method",
@@ -20407,7 +20407,7 @@
                   "text": "unknown"
                 }
               },
-              "description": "The exact dots fill rendered into the utility bar's `.vf-dots` layer\n(src/tile-grid.ts): the bar interior is the declared width minus the\nframe borders. The kit raster is ceiled to whole 30-px tiles so a\ngrow-box resize only re-encodes the image when it crosses a tile\nboundary — the layer's clip crops the overdraw; a consumer\n`--vf-dots-pattern` renders the placed tile grid at the token's\ndocumented 30-px geometry instead. A window with no declared width\nrenders neither and the layer keeps its CSS-repeated tile."
+              "description": "A consumer `--vf-dots-pattern`'s placed tile grid, rendered into the\nutility bar's `.vf-dots` layer at the token's documented 30-px geometry\n(src/tile-grid.ts): the bar interior is the declared width minus the\nframe borders. A window with no declared width renders none, and the\nlayer repeats the token in CSS instead (`vf-dots-token`)."
             },
             {
               "kind": "field",

package/dist/chrome.d.ts

@@ -1,7 +1,7 @@
 import { type TemplateResult } from 'lit';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { DragController } from './drag.js';
-export declare const chromeTitleBar: (drag: DragController, content: unknown, textureClass?: "vf-stripes" | "vf-dots", texture?: unknown) => TemplateResult;
+export declare const chromeTitleBar: (drag: DragController, content: unknown, textureClass?: string, texture?: unknown) => TemplateResult;
 /**
  * Holds the flex-centered `.vf-title` patch on the placement lattice.
  *

package/dist/components/vf-checkbox.d.ts

@@ -2,10 +2,11 @@ import { type PropertyValues } from 'lit';
 import { VfFormControl } from '../form-control.js';
 declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & (abstract new (...args: any[]) => import("../toggle-control.js").VfToggleControlInterface) & typeof VfFormControl;
 /**
- * The classic System 7 checkbox: a 13×13 white square with a 1px black
+ * The classic System 7 checkbox: a 12×12 white square with a 1px black
  * border whose checked state is the corner-to-corner ✕ glyph — the pixel-exact
- * cross traced from the Classic Macintosh UI Kit sprite. The border "thickens"
- * while pressed, exactly like the original control.
+ * cross traced from the Classic Macintosh UI Kit sprite, filling the 10×10
+ * interior. The border "thickens" while pressed, exactly like the original
+ * control.
  *
  * Form-associated: submits `value` under `name` when checked (like a native
  * checkbox) and restores its initial checked state on form reset. Toggles on
@@ -13,8 +14,8 @@ declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js")
  *
  * @slot - The label, rendered to the right of the box with a 6px gap.
  *   Left empty, the label and its gap collapse: the control is the bare
- *   13×13 box.
- * @csspart box - The 13×13 checkbox square.
+ *   12×12 box.
+ * @csspart box - The 12×12 checkbox square.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When toggled by user interaction. `detail: { checked: boolean }`.
  * @fires input - Native event, dispatched from the host per user toggle (with

package/dist/components/vf-checkbox.js

@@ -4,33 +4,34 @@ import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as i } from "../position.js";
 import { vfDisplay as a } from "../styles/recipes/display-face.js";
 import { vfBase as o } from "../styles/recipes/host.js";
-import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
-import { vfToggle as c } from "../styles/recipes/toggle.js";
-import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
-import { VfFormControl as d } from "../form-control.js";
-import { VfToggleControl as f } from "../toggle-control.js";
-import { css as p, html as m } from "lit";
-import { property as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { vfStrokeDecls as s, vfStrokeInset as c, vfStrokeShadow as l } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { vfToggle as d } from "../styles/recipes/toggle.js";
+import { CHECKBOX_X as f, glyphSvg as p } from "../glyphs.js";
+import { VfFormControl as m } from "../form-control.js";
+import { VfToggleControl as h } from "../toggle-control.js";
+import { css as g, html as _ } from "lit";
+import { property as v, state as y } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
 //#region src/components/vf-checkbox.ts
-var v = class extends i(f(d)) {
+var x = class extends i(h(m)) {
 	static {
 		this.styles = [
 			o,
 			a,
-			c,
-			p`
+			d,
+			g`
       /* Keyboard focus underlines the box itself — not the label, and not a
-         ring around either (see vfFocusUnderline). Both adjustments below are
-         the 1px border: an absolutely positioned pseudo sizes to the PADDING
-         box, which the border sits outside of. So the rule grows 1px each side
-         to span the whole well, and its offset counts the border before the
-         blank row and the rule itself: −(1 + 1 + 1). */
+         ring around either (see vfFocusUnderline). An absolutely positioned
+         pseudo sizes to the padding box, which runs under the box's stroke,
+         so the rule spans the whole well and −2 puts it one blank row under
+         it. Under forced colors the stroke is a border and the padding box
+         sits inside it, so the insets grow by it there. */
       :host(:focus-visible) .box::after {
-        --vf-focus-underline-offset: -3px;
-        ${s}
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        ${u}
+        bottom: ${c(-3)};
+        left: ${c(-1)};
+        right: ${c(-1)};
       }
       .box {
         position: relative;
@@ -38,28 +39,31 @@ var v = class extends i(f(d)) {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: calc(var(--vf-scale, 1) * 13px);
-        height: calc(var(--vf-scale, 1) * 13px);
+        width: calc(var(--vf-scale, 1) * 12px);
+        height: calc(var(--vf-scale, 1) * 12px);
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         color: var(--vf-black, #000);
+        ${s()}
       }
-      /* Pressed: border thickens to 2px (classic press feedback). */
+      /* Pressed: the line thickens to 2px (classic press feedback), inward,
+         over the padding the 1px stroke leaves the glyph. */
       :host(:active) .box:not(.dim) {
-        box-shadow: inset 0 0 0 calc(var(--vf-scale, 1) * 1px) var(--vf-black, #000);
+        box-shadow: ${l(2)};
       }
       /* Forced colors never paints box-shadow, so the press feedback above
          goes silent. The same thickening as a real border-width change: with
-         box-sizing: border-box the 13×13 box holds and the extra pixel grows
-         inward, exactly where the inset shadow painted. */
+         box-sizing: border-box the 12×12 box holds and the extra pixel grows
+         inward, exactly where the inset shadow paints. */
       @media (forced-colors: active) {
         :host(:active) .box:not(.dim) {
           border-width: calc(var(--vf-scale, 1) * 2px);
         }
       }
-      /* Native 12×12 sprite — centered in the 13×13 box; the glyph's own 1px
-         transparent margin lets it overhang onto the border harmlessly. Scales
-         with the box; crispEdges keeps it whole-device-pixel at any dpr. */
+      /* Native 12×12 sprite, the box's own size: centered on the 10×10
+         interior it covers the box exactly, its 1px transparent margin over
+         the frame, so the ✕ fills the interior corner to corner on whole
+         system px — the sprite's own registration. Scales with the box;
+         crispEdges keeps it whole-device-pixel at any dpr. */
       .check {
         flex: none;
         width: calc(var(--vf-scale, 1) * 12px);
@@ -93,9 +97,9 @@ var v = class extends i(f(d)) {
 	}
 	render() {
 		let e = this.isDisabled;
-		return m`
+		return _`
       <span
-        class=${_({
+        class=${b({
 			box: !0,
 			dim: e,
 			"vf-snap": !0
@@ -103,10 +107,10 @@ var v = class extends i(f(d)) {
         part="box"
         aria-hidden="true"
       >
-        ${u(l, "check")}
+        ${p(f, "check")}
       </span>
       <span
-        class=${_({
+        class=${b({
 			label: !0,
 			dim: e,
 			empty: !this._hasLabel,
@@ -135,9 +139,9 @@ var v = class extends i(f(d)) {
 		this.checked = !this.checked, this.focus(), e(this, "vf-change", { checked: this.checked }), t(this, "input"), t(this, "change");
 	}
 };
-r([h({
+r([v({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), r([h({ reflect: !0 })], v.prototype, "name", void 0), r([h()], v.prototype, "value", void 0), r([g()], v.prototype, "_hasLabel", void 0), v = r([n("vf-checkbox")], v);
+})], x.prototype, "checked", void 0), r([v({ reflect: !0 })], x.prototype, "name", void 0), r([v()], x.prototype, "value", void 0), r([y()], x.prototype, "_hasLabel", void 0), x = r([n("vf-checkbox")], x);
 //#endregion
-export { v as VfCheckbox };
+export { x as VfCheckbox };

package/dist/components/vf-container.d.ts

@@ -47,30 +47,28 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  *
  * **`rule` draws the 1px rule on the edges it names** — `rule="bottom"` is
  * the menu bar's anatomy (the box's rows over one row of ink), `rule="top"`
- * a status strip's, all four a framed box. The rule is the box's own border
- * ({@link vfRule}), inside the declared size, so a 24px `rule="bottom"`
- * strip is 23 rows of box over the line; content, `fill-width` children and
- * placed children begin inside it, as a rectangle's interior begins inside
- * FrameRect's line.
+ * a status strip's, all four a framed box. The rule is drawn inside the
+ * declared size ({@link vfRule}), so a 24px `rule="bottom"` strip is 23 rows
+ * of box over the line; content, `fill-width` children and placed children
+ * begin inside it, as a rectangle's interior begins inside FrameRect's line.
  *
  * **`pattern` fills the box with a 1-bit pattern**: one of the 38 standard
  * MacPaint patterns by name (`pattern="bricks"`, `pattern="gray-50"` —
  * docs/PATTERNS.md has the table), or sixteen hex digits stating a custom
  * 8×8 pattern row by row, the way a PAT resource did. It is painted as the
  * box's own background — black ink on a `--vf-white` ground, anchored at
- * the box's top-left corner, under the content — by the same whole-surface
- * raster mechanism as the desktop dither, so it is 1-bit at every density
- * and zoom (src/pattern-fill.ts). A declared `width`/`height` sizes the
- * raster exactly; an undeclared axis (`fill-width`, a shrink-wrapped
- * height) is measured. Under forced colors the pattern goes flat Canvas.
+ * the box's top-left corner, under the content — by the same repeating tile
+ * as the desktop dither, so it is 1-bit at every density and zoom and a box
+ * of any size, declared or not, costs nothing more (src/pattern-fill.ts).
+ * Under forced colors the pattern goes flat Canvas.
  *
  * **It holds its box on the device-pixel grid** — with a `GridSnapController`.
  * A container's box is itself the consumer's coordinate system, including for
  * non-`vf` content that cannot correct itself, so the box is the thing to
- * hold on the grid. The shadow box below owns the `position: relative` anchor
- * and the `vf-snap` class together, so the correction
- * moves the whole coordinate system — everything placed against it rides
- * along instead of being re-corrected child by child. (`vf-stack` shipped
+ * hold on the grid. The correction lands on the shadow box below, and the
+ * coordinate system sits inside it, so the correction moves the whole
+ * coordinate system — everything placed against it rides along instead of
+ * being re-corrected child by child. (`vf-stack` shipped
  * without a controller on the theory that slotted `vf-*` children correct
  * their own origins; this component is where that theory's gap — consumer
  * content — became visible, and the stack has since adopted the same
@@ -107,10 +105,9 @@ export declare class VfContainer extends VfContainer_base {
     private _pattern;
     /**
      * The 1px rule on the box's edges: edge names separated by spaces —
-     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn as the
-     * box's own border inside the declared size, in `--vf-black`, scaled with
-     * the display like every kit frame's border; content and placed children
-     * begin inside it.
+     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn inside
+     * the declared size, in `--vf-black`, scaled with the display like every
+     * kit frame; content and placed children begin inside it.
      * Unset, no rule; a value naming anything but an edge draws none and
      * warns once.
      */
@@ -134,8 +131,7 @@ export declare class VfContainer extends VfContainer_base {
     private readonly gridSnap;
     /**
      * The pattern fill, painted on `.box` so it rides the snap correction with
-     * the coordinate system. A declared axis sizes the raster exactly; an
-     * undeclared one is measured (src/pattern-fill.ts).
+     * the coordinate system (src/pattern-fill.ts).
      */
     private readonly patternFill;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist/components/vf-container.js

@@ -15,11 +15,7 @@ var v = class extends f(r(p)) {
 	constructor(...e) {
 		super(...e), this._pattern = null, this.#e = !1, this._rule = [], this.#t = !1, this.scale = new t(this), this.gridSnap = new d(this), this.patternFill = new l(this, {
 			getBox: () => this.box,
-			getPattern: () => this._pattern,
-			getSize: () => ({
-				width: this.width,
-				height: this.height
-			})
+			getPattern: () => this._pattern
 		});
 	}
 	static {
@@ -48,21 +44,33 @@ var v = class extends f(r(p)) {
         text-align: inherit;
       }
 
-      /* The coordinate system, as one shadow box coinciding with the host box.
-         vf-snap (vfBase) gives it position: relative plus the controller's
-         --vf-snap-dx/-dy offset — so it is BOTH the positioning anchor for
-         children placed with top/left (src/position.ts) AND the element the
-         grid-snap correction lands on. One element owning both is the point:
-         corrected, it takes every placed child with it, kit or not. */
+      /* The painted box, coinciding with the host box: the pattern, the rule
+         and the grid-snap correction (vf-snap, vfBase — position: relative
+         plus the controller's --vf-snap-dx/-dy offset). The coordinate system
+         rides inside it (the slot, below), so the correction takes every
+         placed child with it, kit or not. */
       .box {
-        /* flow-root: contain slotted margins, so the box's top edge — the
-           origin placed children measure from — stays glued to the host's
-           corner instead of being pushed down by a first child's margin
-           collapsing through. */
-        display: flow-root;
         /* Coincide with a declared height (100% of a definite host height;
            against an undeclared one it computes to auto and wraps content),
-           so slotted percentage fills resolve against the stated box. */
+           so the slot inside can take the stated box. */
+        height: 100%;
+        /* The pattern starts inside the rule, as it did when the rule was a
+           border. */
+        background-origin: content-box;
+      }
+      /* The coordinate system: the slot, as a box inside the rule — the
+         rule's row is the painted box's padding (vfRule) — so content,
+         percentage fills and children placed with top/left (src/position.ts)
+         all begin inside it. */
+      .box > slot {
+        position: relative;
+        /* flow-root: contain slotted margins, so the top edge — the origin
+           placed children measure from — stays glued to the box's corner
+           instead of being pushed down by a first child's margin collapsing
+           through. */
+        display: flow-root;
+        /* The stated box less its rules, so slotted percentage fills resolve
+           against it; auto against an undeclared height. */
         height: 100%;
       }
 

package/dist/components/vf-desktop.d.ts

@@ -52,8 +52,8 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * default, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen
  * hex digits stating a custom 8×8 pattern, as on `vf-container`. It is
  * painted as the screen's own background: black ink on an opaque white
- * paper, one whole-surface raster at one image px per system px, 1-bit at
- * every density and zoom (src/pattern-fill.ts).
+ * paper, a repeating tile drawn at the display's resolution, 1-bit at every
+ * density and zoom (src/pattern-fill.ts).
  *
  * **The drag surface.** The Finder dragged an icon as a dotted outline drawn
  * on the *screen*, clipped at its edge and phase-locked to its raster, so
@@ -187,9 +187,8 @@ export declare class VfDesktop extends VfDesktop_base {
     private readonly dragSurface;
     /**
      * The desktop pattern, painted as the screen's own background
-     * (src/pattern-fill.ts) from the declared raster — scale-independent, so
-     * density and zoom re-encode nothing — and silent while a consumer token
-     * owns the fill.
+     * (src/pattern-fill.ts) — a repeating tile, so resizing the screen
+     * re-encodes nothing — and silent while a consumer token owns the fill.
      */
     private readonly patternFill;
     /** Monotonic z-index counter for window stacking. */

package/dist/components/vf-desktop.js

@@ -5,8 +5,8 @@ import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as o, placementIn as s } from "../position.js";
 import { vfBase as c } from "../styles/recipes/host.js";
 import { tileImage as l, tileRects as u, tileSpan as d } from "../styles/recipes/tile.js";
-import { PATTERNS as f, parsePattern as p, patternMotif as m } from "../patterns.js";
-import { patternOverride as h, tileGrid as g, vfTileGrid as _ } from "../tile-grid.js";
+import { patternOverride as f, tileGrid as p, vfTileGrid as m } from "../tile-grid.js";
+import { PATTERNS as h, parsePattern as g, patternMotif as _ } from "../patterns.js";
 import { PatternFillController as v, vfPatternFill as y } from "../pattern-fill.js";
 import { GridSnapController as b } from "../grid-snap.js";
 import { DocumentListenersController as x } from "../document-listeners.js";
@@ -14,15 +14,11 @@ import { SCREEN_CORNER as S, steppedCornerClip as C } from "../pixel-frame.js";
 import { LitElement as w, css as T, html as E, unsafeCSS as D } from "lit";
 import { property as O, query as k, queryAssignedElements as A } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I], "#000000", "#ffffff"), R = l(L.width, L.height, u(L.rects)), z = d(L.width), B = class extends o(w) {
+var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I], "#000000", "#ffffff"), R = l(L.width, L.height, u(L.rects)), z = d(L.width), B = class extends o(w) {
 	constructor(...e) {
-		super(...e), this.width = P, this.height = F, this.bezel = 0, this.pattern = I, this.scale = new n(this), this.gridSnap = new b(this), this._token = "", this._desktopPattern = f[I], this.#e = !1, this.patternFill = new v(this, {
+		super(...e), this.width = P, this.height = F, this.bezel = 0, this.pattern = I, this.scale = new n(this), this.gridSnap = new b(this), this._token = "", this._desktopPattern = h[I], this.#e = !1, this.patternFill = new v(this, {
 			getBox: () => this.screen,
-			getPattern: () => this._token ? null : this._desktopPattern,
-			getSize: () => ({
-				width: this.width ?? P,
-				height: this.height ?? F
-			})
+			getPattern: () => this._token ? null : this._desktopPattern
 		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._domSyncTimer = 0, this._gestureEnd = new x(this, () => [[
 			document,
 			"pointerup",
@@ -51,7 +47,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
 	static {
 		this.styles = [
 			c,
-			_,
+			m,
 			y,
 			T`
       :host {
@@ -89,10 +85,9 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
            dither — and shows only through a consumer token's translucent
            tile (see the --vf-desktop note in the class doc). The pattern
            itself is this element's own background, written by the
-           PatternFillController: one whole-surface raster at one image px
-           per system px, magnified nearest-neighbor, which is what keeps it
-           1-bit at the zoom-minted scales a repeating fill cannot hold
-           (src/tile-grid.ts, src/pattern-fill.ts). */
+           PatternFillController: a 120-system-px tile drawn at the device
+           resolution it is shown at and repeated, so every engine copies it
+           1:1 (src/pattern-fill.ts). */
         background-color: var(--vf-desktop, #808080);
         /* Forced colors: the pattern is literal black ink on white, which
            ignores a dark theme entirely. A backdrop is decoration, and
@@ -298,9 +293,9 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
 	willUpdate(e) {
-		if (super.willUpdate(e), this._token = h(this, "--vf-desktop-pattern"), e.has("pattern")) {
-			let e = p(this.pattern);
-			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${I}.`)), this._desktopPattern = e ?? f[I];
+		if (super.willUpdate(e), this._token = f(this, "--vf-desktop-pattern"), e.has("pattern")) {
+			let e = g(this.pattern);
+			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${I}.`)), this._desktopPattern = e ?? h[I];
 		}
 	}
 	updated(e) {
@@ -311,7 +306,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
 	}
 	render() {
 		let e = this.width ?? P, t = this.height ?? F, n = this._token ? E`<div class="vf-tile-grid">
-          ${g({
+          ${p({
 			cols: Math.ceil(e / z),
 			rows: Math.ceil(t / z),
 			tile: z