vintage-frames 0.12.7 → 0.13.0

package/custom-elements.json

@@ -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 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 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 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.",
           "name": "VfContainer",
           "slots": [
             {
@@ -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",
@@ -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",
@@ -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-container.d.ts

@@ -58,11 +58,10 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  * 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
@@ -134,8 +133,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 {

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

package/dist/components/vf-progress-bar.d.ts

@@ -48,8 +48,8 @@ export declare class VfProgressBar extends VfProgressBar_base {
     private readonly trackSize;
     /**
      * The consumer's `--vf-progress-stripes` override, or `''` for the kit
-     * barber — which exact-fill path the strip takes (src/tile-grid.ts).
-     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     * barber — which path the strip takes (src/tile-grid.ts). Re-read every
+     * update; a runtime token swap wants a `requestUpdate()`.
      */
     private _pattern;
     constructor();

package/dist/components/vf-progress-bar.js

@@ -1,12 +1,12 @@
 import { vfElement as e } from "../define.js";
-import { ScaleController as t, sys as n, sysLength as r, toSys as i } from "../scale.js";
-import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as o } from "../position.js";
-import { vfBase as s } from "../styles/recipes/host.js";
-import { tileImage as c, tileRects as l, tileSpan as u, vfTileMaskSize as d } from "../styles/recipes/tile.js";
-import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
-import { TrackWidthController as g } from "../track-width.js";
-import { GridSnapController as _ } from "../grid-snap.js";
+import { ScaleController as t, sys as n, toSys as r } from "../scale.js";
+import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as a } from "../position.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { tileImage as s, tileRects as c, tileSpan as l, vfTileMaskSize as u } from "../styles/recipes/tile.js";
+import { RepeatTileController as d, patternOverride as f, tileGrid as p, vfRepeatTileSize as m, vfTileGrid as h } from "../tile-grid.js";
+import { GridSnapController as g } from "../grid-snap.js";
+import { TrackWidthController as _ } from "../track-width.js";
 import { LitElement as v, css as y, html as b, unsafeCSS as x } from "lit";
 import { property as S, query as C } from "lit/decorators.js";
 //#region src/components/vf-progress-bar.ts
@@ -113,10 +113,14 @@ var w = 12, T = [
 		1,
 		1
 	]
-], E = c(w, w, l(T)), D = u(w), O = class extends o(v) {
+], E = {
+	width: w,
+	height: w,
+	rects: T
+}, D = s(w, w, c(T)), O = l(w), k = class extends a(v) {
 	static {
 		this.styles = [
-			s,
+			o,
 			h,
 			y`
       :host {
@@ -147,25 +151,30 @@ var w = 12, T = [
            \ bands are a staircase of axis-aligned 1px rects (genuine pixel
            art — a *diagonal* edge would blur where these stay pixel-exact)
            over this themeable white ground. The art itself rides the
-           .vf-tile-strip child (src/tile-grid.ts): the kit's whole-surface
-           raster, or a consumer --vf-progress-stripes token's placed tile
-           grid at the token's documented 60-px tile geometry. This layer is
-           the strip's containing block and its clip. */
+           .vf-tile-strip child (src/tile-grid.ts): the kit's repeating
+           tile, or a consumer --vf-progress-stripes token's placed tile grid
+           at the token's documented 60-px tile geometry. This layer is the
+           strip's containing block and its clip. */
         position: relative;
         background-color: var(--vf-white, #fff);
-        --_vf-tile-image: var(--vf-progress-stripes, ${x(E)});
+        --_vf-tile-image: var(--vf-progress-stripes, ${x(D)});
       }
-      /* The animated strip: rests one 12px cell to the left (fully covering
-         the fill), and each cycle advances one whole cell in 4 chunky steps —
-         steppy, not smooth, wrapping with zero phase jump because the art's
-           period is the cell. The animated value is a layout property, so
-         every step is one quantized length paint-snapped like any placed
-         box — no CSS length ever accumulates a phase. */
+      /* The animated strip: the fill's width plus one 12px cell, resting
+         that cell to the left (fully covering the fill), and each cycle
+         advances one whole cell in 4 chunky steps — steppy, not smooth,
+         wrapping with zero phase jump because the art's period is the cell.
+         The animated value is a layout property, so every step is one
+         quantized length paint-snapped like any placed box — no CSS length
+         ever accumulates a phase. */
       .vf-tile-strip {
         position: absolute;
         top: 0;
         height: 100%;
+        width: calc(100% + var(--vf-scale, 1) * 12px);
         left: calc(var(--vf-scale, 1) * -12px);
+        background-image: var(--_vf-barber-tile, none);
+        ${m}
+        image-rendering: pixelated;
         animation: vf-barber 0.4s steps(4, end) infinite;
       }
       @keyframes vf-barber {
@@ -179,8 +188,8 @@ var w = 12, T = [
       /* Forced colors: the fill and track are the bar's whole reading, and
          both have their own tokens with literal fallbacks the override
          flattens to Canvas — remapped here like the palette tokens in vfBase.
-         The strip's raster art would keep its literal black ink (invisible on
-         a dark theme), so the strip hides and the layer repaints as a mask
+         The strip's tile would keep its literal black ink (invisible on a
+         dark theme), so the strip hides and the layer repaints as a mask
          over the ink token — same tile, same token a consumer overrides —
          with the animation on the mask's position. The span-tiled mask keeps
          the zoom caveat (no mask pipeline rasterizes exactly at a zoom-minted
@@ -192,8 +201,8 @@ var w = 12, T = [
         }
         .fill.stripes {
           background-color: var(--vf-progress-fill, CanvasText);
-          mask-image: var(--vf-progress-stripes, ${x(E)});
-          ${d(w)}
+          mask-image: var(--vf-progress-stripes, ${x(D)});
+          ${u(w)}
           animation: vf-barber-mask 0.4s steps(4, end) infinite;
         }
         .fill.stripes .vf-tile-strip {
@@ -220,7 +229,11 @@ var w = 12, T = [
 	#e;
 	#t;
 	constructor() {
-		super(), this.scale = new t(this), this.gridSnap = new _(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new g(this, () => this.track), this._pattern = "", this.#e = new f(), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
+		super(), this.scale = new t(this), this.gridSnap = new g(this), this.value = 0, this.max = 100, this.indeterminate = !1, this.label = "", this.trackSize = new _(this, () => this.track), this._pattern = "", this.#e = new d(this, {
+			getBox: () => this.renderRoot?.querySelector(".vf-tile-strip"),
+			getArt: () => this.indeterminate && !this._pattern ? E : null,
+			property: "--_vf-barber-tile"
+		}), this.#t = this.attachInternals(), this.#t.role = "progressbar", this.#t.ariaValueMin = "0";
 	}
 	get effectiveMax() {
 		return this.max > 0 ? this.max : 100;
@@ -229,44 +242,45 @@ var w = 12, T = [
 		return Math.min(Math.max(this.value, 0), this.effectiveMax);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.indeterminate && (this._pattern = p(this, "--vf-progress-stripes"));
+		super.willUpdate(e), this.indeterminate && (this._pattern = f(this, "--vf-progress-stripes"));
 	}
 	updated(e) {
 		e.has("label") && (this.#t.ariaLabel = this.label || null), e.has("max") && (this.#t.ariaValueMax = String(this.effectiveMax)), (e.has("value") || e.has("max") || e.has("indeterminate")) && (this.#t.ariaValueNow = this.indeterminate ? null : String(this.clampedValue));
 	}
 	render() {
 		if (this.indeterminate) {
-			let e = i(this.trackSize.width, this), t = Math.max(D, Math.ceil((e + w) / D) * D), n = this._pattern ? m({
-				cols: t / D,
-				rows: 1,
-				tile: D
-			}) : b`<div
-            class="vf-tile-raster"
-            style="width:${r(t)};height:${r(24)};background-image:${this.#e.for(w, w, T, t, 24)}"
-          ></div>`;
+			let e = null;
+			if (this._pattern) {
+				let t = r(this.trackSize.width, this), n = Math.max(1, Math.ceil((t + w) / O));
+				e = p({
+					cols: n,
+					rows: 1,
+					tile: O
+				});
+			}
 			return b`
         <div class="track vf-snap" part="track">
           <div class="fill stripes vf-tile-grid" part="fill">
-            <div class="vf-tile-strip">${n}</div>
+            <div class="vf-tile-strip">${e}</div>
           </div>
         </div>
       `;
 		}
-		let e = this.clampedValue / this.effectiveMax, t = i(this.trackSize.width, this), a = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
+		let e = this.clampedValue / this.effectiveMax, t = r(this.trackSize.width, this), i = t > 0 ? `${n(Math.round(e * t), this)}px` : `${e * 100}%`;
 		return b`
       <div class="track vf-snap" part="track">
         <div
           class="fill ${e <= 0 ? "empty" : ""}"
           part="fill"
-          style="width: ${a}"
+          style="width: ${i}"
         ></div>
       </div>
     `;
 	}
 };
-a([S({ type: Number })], O.prototype, "value", void 0), a([S({ type: Number })], O.prototype, "max", void 0), a([S({
+i([S({ type: Number })], k.prototype, "value", void 0), i([S({ type: Number })], k.prototype, "max", void 0), i([S({
 	type: Boolean,
 	reflect: !0
-})], O.prototype, "indeterminate", void 0), a([S()], O.prototype, "label", void 0), a([C(".track")], O.prototype, "track", void 0), O = a([e("vf-progress-bar")], O);
+})], k.prototype, "indeterminate", void 0), i([S()], k.prototype, "label", void 0), i([C(".track")], k.prototype, "track", void 0), k = i([e("vf-progress-bar")], k);
 //#endregion
-export { O as VfProgressBar };
+export { k as VfProgressBar };

package/dist/components/vf-slider.js

@@ -5,12 +5,12 @@ import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as s } from "../position.js";
 import { vfBase as c } from "../styles/recipes/host.js";
 import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
-import { TrackWidthController as u } from "../track-width.js";
-import { GridSnapController as d } from "../grid-snap.js";
-import { SLIDER_THUMB as f, SLIDER_THUMB_FACE as p } from "../glyphs.js";
-import { VfFormControl as m } from "../form-control.js";
-import { FocusRuleController as h } from "../focus-modality.js";
-import { decimalsOf as g } from "../number.js";
+import { GridSnapController as u } from "../grid-snap.js";
+import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
+import { VfFormControl as p } from "../form-control.js";
+import { FocusRuleController as m } from "../focus-modality.js";
+import { decimalsOf as h } from "../number.js";
+import { TrackWidthController as g } from "../track-width.js";
 import { css as _, html as v } from "lit";
 import { property as y, query as b } from "lit/decorators.js";
 //#region src/components/vf-slider.ts
@@ -21,7 +21,7 @@ function D(e, t) {
 	};
 	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
 }
-var O = class extends s(m) {
+var O = class extends s(p) {
 	static {
 		this.styles = [c, _`
       :host {
@@ -110,7 +110,7 @@ var O = class extends s(m) {
 	#t;
 	#n;
 	constructor() {
-		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new u(this, () => this.track), this.scale = new r(this), this.gridSnap = new d(this), this.selfManagedTabIndex = !1, this.#e = new h(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new r(this), this.gridSnap = new u(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
 			if (!(this.isDisabled || e.button !== 0)) {
 				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
 				try {
@@ -181,7 +181,7 @@ var O = class extends s(m) {
 	}
 	#o(e) {
 		let t = this.#i, n = Math.round((e - this.min) / t), r = this.#a(this.min + n * t);
-		return Number(r.toFixed(g(t)));
+		return Number(r.toFixed(h(t)));
 	}
 	get #s() {
 		let e = Number.isFinite(this.value) ? this.value : this.min;
@@ -242,8 +242,8 @@ var O = class extends s(m) {
             shape-rendering="crispEdges"
             aria-hidden="true"
           >
-            <path class="thumb-face" d=${p.d}></path>
-            <path class="thumb-outline" d=${f.d}></path>
+            <path class="thumb-face" d=${f.d}></path>
+            <path class="thumb-outline" d=${d.d}></path>
           </svg>
         </span>
       </div>

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

@@ -83,8 +83,8 @@ export declare class VfSwatch extends VfSwatch_base {
     private readonly gridSnap;
     /**
      * The consumer's `--vf-swatch-checker` override, or `''` for the kit
-     * checker — which exact-fill path render() takes (src/tile-grid.ts).
-     * Re-read every update; a runtime token swap wants a `requestUpdate()`.
+     * checker — which path render() takes (src/tile-grid.ts). Re-read every
+     * update; a runtime token swap wants a `requestUpdate()`.
      */
     private _pattern;
     protected willUpdate(changed: PropertyValues<this>): void;