vintage-frames 0.5.0 → 0.5.1

package/custom-elements.json

@@ -1974,7 +1974,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` says what to\npaint. No border, role, keyboard behavior or selection; what it holds\ndecides what it is.\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 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.",
           "name": "VfContainer",
           "slots": [
             {
@@ -2012,6 +2012,35 @@
               "default": "false",
               "description": "One warning per element for an unrecognized `pattern`, not per render."
             },
+            {
+              "kind": "field",
+              "name": "rule",
+              "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.",
+              "attribute": "rule"
+            },
+            {
+              "kind": "field",
+              "name": "_rule",
+              "type": {
+                "text": "RuleEdge[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "`rule`, resolved — the edges drawn; empty draws nothing."
+            },
+            {
+              "kind": "field",
+              "name": "#warnedRule",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "One warning per element for an unrecognized `rule`, not per render."
+            },
             {
               "kind": "field",
               "name": "box",
@@ -2108,6 +2137,14 @@
               "description": "A 1-bit fill for the box: a library pattern by name (`bricks`,\n`gray-50`, … — the 38 standard MacPaint patterns, docs/PATTERNS.md) or\nsixteen hex digits stating a custom 8×8 pattern row by row, bit 7 the\nleftmost pixel, 1 = ink (`\"DD 77 DD 77 DD 77 DD 77\"`). Painted in black\non a `--vf-white` ground under the content, anchored at the box's\ntop-left. Unset, the container paints nothing; an unrecognized value\npaints nothing and warns once.",
               "fieldName": "pattern"
             },
+            {
+              "name": "rule",
+              "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.",
+              "fieldName": "rule"
+            },
             {
               "name": "width",
               "type": {

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

@@ -41,10 +41,18 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  * width, because a layout box that silently claimed a size nobody declared
  * would be inventing one (the `vf-stack` rule, held here too).
  *
- * **It paints nothing and means nothing** — unless `pattern` says what to
- * paint. No border, role, keyboard behavior or selection; what it holds
+ * **It paints nothing and means nothing** — unless `pattern` or `rule` say
+ * what to paint. No role, keyboard behavior or selection; what it holds
  * decides what it is.
  *
+ * **`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.
+ *
  * **`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
@@ -97,6 +105,18 @@ export declare class VfContainer extends VfContainer_base {
     pattern?: string | null;
     /** `pattern`, resolved — what the fill paints; null paints nothing. */
     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.
+     * Unset, no rule; a value naming anything but an edge draws none and
+     * warns once.
+     */
+    rule?: string | null;
+    /** `rule`, resolved — the edges drawn; empty draws nothing. */
+    private _rule;
     /** The shadow box the fill paints on; exists from the first render. */
     private readonly box;
     /**

package/dist/components/vf-container.js

@@ -4,15 +4,16 @@ import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as r } from "../position.js";
 import { vfBase as i } from "../styles/recipes/host.js";
 import { parsePattern as a } from "../patterns.js";
-import { PatternFillController as o, vfPatternFill as s } from "../pattern-fill.js";
-import { GridSnapController as c } from "../grid-snap.js";
-import { VfSized as l } from "../size.js";
-import { LitElement as u, css as d, html as f } from "lit";
-import { property as p, query as m } from "lit/decorators.js";
+import { parseRule as o, ruleClasses as s, vfRule as c } from "../styles/recipes/rule.js";
+import { PatternFillController as l, vfPatternFill as u } from "../pattern-fill.js";
+import { GridSnapController as d } from "../grid-snap.js";
+import { VfSized as f } from "../size.js";
+import { LitElement as p, css as m, html as h } from "lit";
+import { property as g, query as _ } from "lit/decorators.js";
 //#region src/components/vf-container.ts
-var h = class extends l(r(u)) {
+var v = class extends f(r(p)) {
 	constructor(...e) {
-		super(...e), this._pattern = null, this.#e = !1, this.scale = new t(this), this.gridSnap = new c(this), this.patternFill = new o(this, {
+		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: () => ({
@@ -24,8 +25,9 @@ var h = class extends l(r(u)) {
 	static {
 		this.styles = [
 			i,
-			s,
-			d`
+			u,
+			c,
+			m`
       :host {
         display: block;
         /* Shrink-wrap an undeclared axis rather than claim the parent's
@@ -92,17 +94,22 @@ var h = class extends l(r(u)) {
 		];
 	}
 	#e;
+	#t;
 	willUpdate(e) {
-		super.willUpdate(e), e.has("pattern") && (this._pattern = a(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-container: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`)));
+		if (super.willUpdate(e), e.has("pattern") && (this._pattern = a(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-container: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`))), e.has("rule")) {
+			let e = o(this.rule);
+			this._rule = e ?? [], e === null && !this.#t && (this.#t = !0, console.warn(`vf-container: unknown rule "${this.rule}" — edge names (top, right, bottom, left) separated by spaces. Drawing none.`));
+		}
 	}
 	render() {
-		return f`<div
-      class="vf-snap box vf-pattern-fill${this._pattern ? " vf-patterned" : ""}"
+		let e = s(this._rule);
+		return h`<div
+      class="vf-snap box vf-pattern-fill${this._pattern ? " vf-patterned" : ""}${e ? ` ${e}` : ""}"
     >
       <slot></slot>
     </div>`;
 	}
 };
-n([p()], h.prototype, "pattern", void 0), n([m(".box")], h.prototype, "box", void 0), h = n([e("vf-container")], h);
+n([g()], v.prototype, "pattern", void 0), n([g()], v.prototype, "rule", void 0), n([_(".box")], v.prototype, "box", void 0), v = n([e("vf-container")], v);
 //#endregion
-export { h as VfContainer };
+export { v as VfContainer };

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

@@ -3,17 +3,18 @@ import { ScaleController as t } from "../scale.js";
 import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as r } from "../position.js";
 import { vfBase as i } from "../styles/recipes/host.js";
-import { GridSnapController as a } from "../grid-snap.js";
-import { DocumentListenersController as o } from "../document-listeners.js";
-import { SCREEN_CORNER as s, steppedCornerClip as c } from "../pixel-frame.js";
-import { TypeAheadBuffer as l } from "../type-ahead.js";
-import { MenuPressController as u } from "../menu-press.js";
-import { LitElement as d, css as f, html as p, unsafeCSS as m } from "lit";
-import { property as h, queryAssignedElements as g } from "lit/decorators.js";
+import { vfRule as a } from "../styles/recipes/rule.js";
+import { GridSnapController as o } from "../grid-snap.js";
+import { DocumentListenersController as s } from "../document-listeners.js";
+import { SCREEN_CORNER as c, steppedCornerClip as l } from "../pixel-frame.js";
+import { TypeAheadBuffer as u } from "../type-ahead.js";
+import { MenuPressController as d } from "../menu-press.js";
+import { LitElement as f, css as p, html as m, unsafeCSS as h } from "lit";
+import { property as g, queryAssignedElements as _ } from "lit/decorators.js";
 //#region src/components/vf-menu-bar.ts
-var _ = class extends r(d) {
+var v = class extends r(f) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new a(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new l(), this.#r = null, this.#i = new o(this, () => [[
+		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.label = "", this.rounded = !1, this.shortcuts = !1, this.#e = null, this.#t = this.attachInternals(), this.#n = new u(), this.#r = null, this.#i = new s(this, () => [[
 			document,
 			"pointerdown",
 			this.#h,
@@ -23,7 +24,7 @@ var _ = class extends r(d) {
 			"keydown",
 			this.#g,
 			!0
-		]]), this.#a = new u(this, {
+		]]), this.#a = new d(this, {
 			menus: () => this._menus,
 			open: (e) => this.#p(e),
 			close: () => this.#m()
@@ -101,7 +102,10 @@ var _ = class extends r(d) {
 		};
 	}
 	static {
-		this.styles = [i, f`
+		this.styles = [
+			i,
+			a,
+			p`
       :host {
         display: block;
         /* 19 white system px over the 1px black rule — Menus.png's bar strip
@@ -112,9 +116,9 @@ var _ = class extends r(d) {
       }
       .bar {
         /* Paint lives here rather than on the host so it rides the snap offset
-           (see .vf-snap in base.ts); border-box sizing keeps the geometry. */
+           (see .vf-snap in base.ts); border-box sizing keeps the geometry. The
+           rule is vfRule's vf-rule-bottom on the element. */
         background: var(--vf-white, #fff);
-        border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         display: flex;
         align-items: stretch;
         height: 100%;
@@ -146,20 +150,21 @@ var _ = class extends r(d) {
         content: '';
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${s[0]}px);
-        height: calc(var(--vf-scale, 1) * ${s.length}px);
+        width: calc(var(--vf-scale, 1) * ${c[0]}px);
+        height: calc(var(--vf-scale, 1) * ${c.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
       }
       :host([rounded]) .bar::before {
         left: 0;
-        clip-path: ${m(c(s, "left"))};
+        clip-path: ${h(l(c, "left"))};
       }
       :host([rounded]) .bar::after {
         right: 0;
-        clip-path: ${m(c(s, "right"))};
+        clip-path: ${h(l(c, "right"))};
       }
-    `];
+    `
+		];
 	}
 	#e;
 	#t;
@@ -181,8 +186,8 @@ var _ = class extends r(d) {
 		e.has("label") && (this.#t.ariaLabel = this.label || null);
 	}
 	render() {
-		return p`
-      <div class="bar vf-snap" part="bar" role="presentation">
+		return m`
+      <div class="bar vf-snap vf-rule-bottom" part="bar" role="presentation">
         <slot @slotchange=${this.#s}></slot>
       </div>
     `;
@@ -225,15 +230,15 @@ var _ = class extends r(d) {
 		r = n < 0 ? e === 1 ? 0 : t.length - 1 : (n + e + t.length) % t.length, t[r]?.focus();
 	}
 };
-n([h()], _.prototype, "label", void 0), n([h({
+n([g()], v.prototype, "label", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "rounded", void 0), n([h({
+})], v.prototype, "rounded", void 0), n([g({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "shortcuts", void 0), n([g({
+})], v.prototype, "shortcuts", void 0), n([_({
 	selector: "vf-menu",
 	flatten: !0
-})], _.prototype, "_menus", void 0), _ = n([e("vf-menu-bar")], _);
+})], v.prototype, "_menus", void 0), v = n([e("vf-menu-bar")], v);
 //#endregion
-export { _ as VfMenuBar };
+export { v as VfMenuBar };

package/dist/components/vf-window.js

@@ -6,26 +6,27 @@ import { PlacementController as s, VfPositioned as c, warnMovableContract as l }
 import { vfBase as u } from "../styles/recipes/host.js";
 import { DOT_MOTIF as d, DOT_RECTS as f, DOT_SPAN as p, vfDots as m, vfStripes as h } from "../styles/recipes/pattern.js";
 import { vfChromeFrame as g } from "../styles/recipes/surface.js";
-import { vfTitleBar as _, vfWindowWidgets as v } from "../styles/recipes/title-bar.js";
-import { vfFocus as y } from "../styles/recipes/focus.js";
-import { TileRasterCache as b, patternOverride as x, tileGrid as S, vfTileGrid as C } from "../tile-grid.js";
-import { GridSnapController as w } from "../grid-snap.js";
-import { VfSized as T } from "../size.js";
-import { DragController as E } from "../drag.js";
-import { TitleCenterController as D, chromeTitleBar as O, closeBox as k, widgetLabel as A, zoomBox as j } from "../chrome.js";
+import { vfRule as _ } from "../styles/recipes/rule.js";
+import { vfTitleBar as v, vfWindowWidgets as y } from "../styles/recipes/title-bar.js";
+import { vfFocus as b } from "../styles/recipes/focus.js";
+import { TileRasterCache as x, patternOverride as S, tileGrid as C, vfTileGrid as w } from "../tile-grid.js";
+import { GridSnapController as T } from "../grid-snap.js";
+import { VfSized as E } from "../size.js";
+import { DragController as D } from "../drag.js";
+import { TitleCenterController as O, chromeTitleBar as k, closeBox as A, widgetLabel as j, zoomBox as M } from "../chrome.js";
 import "./vf-scroll-area.js";
-import { LitElement as M, css as N, html as P, nothing as F } from "lit";
-import { property as I, state as L } from "lit/decorators.js";
+import { LitElement as N, css as P, html as F, nothing as I } from "lit";
+import { property as L, state as R } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
+var z = 80, B = 54, V = 24, H = 8, U = class extends E(c(N)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new w(this), this.titleCenter = new D(this), this._dotsPattern = "", this.#e = new b(), this.#t = (e, t, n) => {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new T(this), this.titleCenter = new O(this), this._dotsPattern = "", this.#e = new x(), this.#t = (e, t, n) => {
 			let r = a(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, B - r), n.width - B),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - B))
+				x: Math.min(Math.max(e, V - r), n.width - V),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - V))
 			};
-		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new E(this, {
+		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new D(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
 			onDrag: (e, t) => this._placement.moveTo(e, t)
 		}), this._resizeState = null, this.#n = !1, this.#r = !1;
@@ -35,12 +36,13 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
 			u,
 			h,
 			m,
-			C,
-			y,
+			w,
+			b,
 			g,
 			_,
 			v,
-			N`
+			y,
+			P`
       :host {
         display: block;
         position: relative;
@@ -221,7 +223,7 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
         display: flex;
         align-items: center;
         height: calc(var(--vf-scale, 1) * var(--vf-status-bar-height, 15px));
-        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        /* The rule is vfRule's vf-rule-top on the element. */
         background: var(--vf-white, #ffffff);
         padding-inline: calc(var(--vf-scale, 1) * 6px);
         line-height: calc(var(--vf-scale, 1) * var(--vf-line-height, 12px));
@@ -281,18 +283,18 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = x(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = S(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return S({
+		if (this._dotsPattern) return C({
 			cols: Math.ceil(e / p),
 			rows: 1,
 			tile: p
 		});
-		let t = Math.ceil((e + d) / p) * p, n = V + d;
-		return P`<div
+		let t = Math.ceil((e + d) / p) * p, n = H + d;
+		return F`<div
       class="vf-tile-raster"
       style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(d, d, f, t, n)}"
     ></div>`;
@@ -346,7 +348,7 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = r(Math.max(R, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(z, t.baseHeight + a(e.clientY - t.startY, this)), this);
+		let n = r(Math.max(z, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(B, t.baseHeight + a(e.clientY - t.startY, this)), this);
 		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
 	}
 	_onGrowPointerEnd(t) {
@@ -361,34 +363,34 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
 		});
 	}
 	render() {
-		return P`
+		return F`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : F}
+        aria-labelledby=${this.heading ? "title" : I}
       >
-        ${O(this._drag, P`
-            ${this.closable ? k(A("Close", this.heading), this._onCloseClick) : F}
+        ${k(this._drag, F`
+            ${this.closable ? A(j("Close", this.heading), this._onCloseClick) : I}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? j(A("Zoom", this.heading), this._onZoomClick) : F}
+            ${this.zoomable ? M(j("Zoom", this.heading), this._onZoomClick) : I}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div class="body" part="body">
-          ${this.scrollbars ? P`
+          ${this.scrollbars ? F`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
-                  label=${this.heading || F}
+                  label=${this.heading || I}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : P`<slot></slot>`}
+              ` : F`<slot></slot>`}
         </div>
-        <div class="status ${this._hasStatus ? "" : "empty"}" part="status-bar">
+        <div class="status vf-rule-top ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? P`
+        ${this.resizable ? F`
               <div
                 class="grow"
                 part="grow-box"
@@ -398,29 +400,29 @@ var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : F}
+            ` : I}
       </div>
     `;
 	}
 };
-o([I({ reflect: !0 })], H.prototype, "variant", void 0), o([I()], H.prototype, "heading", void 0), o([I({
+o([L({ reflect: !0 })], U.prototype, "variant", void 0), o([L()], U.prototype, "heading", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "active", void 0), o([I({
+})], U.prototype, "active", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "closable", void 0), o([I({
+})], U.prototype, "closable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "zoomable", void 0), o([I({
+})], U.prototype, "zoomable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "movable", void 0), o([I({
+})], U.prototype, "movable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "resizable", void 0), o([I({
+})], U.prototype, "resizable", void 0), o([L({
 	type: Boolean,
 	reflect: !0
-})], H.prototype, "flush", void 0), o([I({ reflect: !0 })], H.prototype, "scrollbars", void 0), o([L()], H.prototype, "_hasStatus", void 0), H = o([t("vf-window")], H);
+})], U.prototype, "flush", void 0), o([L({ reflect: !0 })], U.prototype, "scrollbars", void 0), o([R()], U.prototype, "_hasStatus", void 0), U = o([t("vf-window")], U);
 //#endregion
-export { H as VfWindow };
+export { U as VfWindow };

package/dist/index.d.ts

@@ -88,8 +88,15 @@ export { CURSOR_ARROW, CURSOR_I_BEAM, CURSOR_CROSSHAIR, CURSOR_WAIT, } from './c
  * `static styles` to inherit the kit's type, panel frame, window chrome, focus
  * ring, field well and System 7 scroll-rail skin.
  */
-export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
+export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
 export type { TileRect } from './styles/base.js';
+/**
+ * The 1px rule's attribute grammar (`vf-container rule="top bottom"`): the
+ * edge names, the parser, and the class list a resolved rule puts on a box
+ * styled by `vfRule`.
+ */
+export { RULE_EDGES, parseRule, ruleClasses } from './styles/base.js';
+export type { RuleEdge } from './styles/base.js';
 /**
  * The exact tiled fill (TILE-GRID-PLAN.md): a surface's own art as one
  * whole-surface raster (`tileRaster` + the `vf-tile-raster` rules), and a

package/dist/index.js

@@ -15,59 +15,60 @@ import { PATTERNS as G, PATTERN_NAMES as K, PATTERN_SIZE as q, parsePattern as J
 import { vfDots as Q, vfStripes as $ } from "./styles/recipes/pattern.js";
 import { vfHardShadowDecls as ee } from "./styles/recipes/shadow.js";
 import { vfChromeFrame as te, vfModalFrame as ne, vfPanel as re } from "./styles/recipes/surface.js";
-import { vfTitleBar as ie, vfWindowWidgets as ae } from "./styles/recipes/title-bar.js";
-import { vfFocus as oe, vfFocusRing as se, vfFocusUnderline as ce } from "./styles/recipes/focus.js";
-import { vfToggle as le } from "./styles/recipes/toggle.js";
-import { vfField as ue } from "./styles/recipes/field.js";
-import { vfScrollRail as de } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as fe, patternOverride as pe, tileGrid as me, vfTileGrid as he } from "./tile-grid.js";
-import { TrackWidthController as ge } from "./track-width.js";
-import { PatternFillController as _e, vfPatternFill as ve } from "./pattern-fill.js";
-import { GridSnapController as ye, requestGridSnap as be } from "./grid-snap.js";
-import { DocumentListenersController as xe } from "./document-listeners.js";
-import { BUTTON_FACE as Se, BUTTON_FRAME as Ce, RING_FRAME as we, RING_HOLE as Te, RING_INSET as Ee, SCREEN_CORNER as De, steppedCornerClip as Oe, steppedRectClip as ke, steppedRingClip as Ae } from "./pixel-frame.js";
-import { VfDesktop as je } from "./components/vf-desktop.js";
-import { VfSized as Me } from "./size.js";
-import { DragController as Ne } from "./drag.js";
-import { ScrollStateController as Pe } from "./scroll-state.js";
-import { BLINK_FLIPS as Fe, BLINK_INTERVAL_MS as Ie, PRESS_HOLD_MS as Le, RENAME_DELAY_MS as Re, prefersReducedMotion as ze, runSelectionBlink as Be } from "./motion.js";
-import { CARET_DOWN as Ve, CHECKBOX_X as He, CHECKMARK as Ue, RADIO_DOT as We, RADIO_FACE as Ge, RADIO_RING as Ke, RADIO_RING_PRESSED as qe, SLIDER_THUMB as Je, SLIDER_THUMB_FACE as Ye, STEPPER as Xe, STEPPER_DOWN_FILL as Ze, STEPPER_UP_FILL as Qe, glyphSvg as $e } from "./glyphs.js";
-import { ScrollRailController as et, renderScrollRail as tt } from "./scroll-rail.js";
-import { VfScrollArea as nt } from "./components/vf-scroll-area.js";
-import { VfWindow as rt } from "./components/vf-window.js";
-import { VfModalDialog as it, modalDialogStyles as at } from "./modal-dialog.js";
-import { VfButtonGroup as ot } from "./components/vf-button-group.js";
-import { VfDialog as st } from "./components/vf-dialog.js";
-import { VfSeparator as ct } from "./components/vf-separator.js";
-import { VfFormControl as lt } from "./form-control.js";
-import { VfButton as ut } from "./components/vf-button.js";
-import { VfSwatch as dt } from "./components/vf-swatch.js";
-import { VfToggleControl as ft } from "./toggle-control.js";
-import { VfCheckbox as pt } from "./components/vf-checkbox.js";
-import { VfRadio as mt } from "./components/vf-radio.js";
-import { VfRadioGroup as ht } from "./components/vf-radio-group.js";
-import { FocusRuleController as gt, focusModality as _t, trackFocusModality as vt } from "./focus-modality.js";
-import { VfTextControlBase as yt } from "./text-control.js";
-import { VfTextField as bt } from "./components/vf-text-field.js";
-import { VfTextArea as xt } from "./components/vf-text-area.js";
-import { VfNumberField as St } from "./components/vf-number-field.js";
-import { VfOption as Ct } from "./components/vf-option.js";
-import { VfSelect as wt } from "./components/vf-select.js";
-import { VfProgressBar as Tt } from "./components/vf-progress-bar.js";
-import { VfSlider as Et } from "./components/vf-slider.js";
-import { VfLabel as Dt } from "./components/vf-label.js";
-import { VfParagraph as Ot } from "./components/vf-paragraph.js";
-import { VfImg as kt } from "./components/vf-img.js";
-import { VfIcon as At } from "./components/vf-icon.js";
-import { VfMenuBar as jt } from "./components/vf-menu-bar.js";
-import { VfMenu as Mt } from "./components/vf-menu.js";
-import { VfMenuItem as Nt } from "./components/vf-menu-item.js";
-import { VfList as Pt } from "./components/vf-list.js";
-import { VfListItem as Ft } from "./components/vf-list-item.js";
-import { VfFieldset as It } from "./components/vf-fieldset.js";
-import { VfGrid as Lt } from "./components/vf-grid.js";
-import { VfStack as Rt } from "./components/vf-stack.js";
-import { VfContainer as zt } from "./components/vf-container.js";
-import { CURSOR_ARROW as Bt, CURSOR_CROSSHAIR as Vt, CURSOR_I_BEAM as Ht, CURSOR_WAIT as Ut } from "./cursor-art.js";
-import { applyCursor as Wt } from "./cursor.js";
-export { Fe as BLINK_FLIPS, Ie as BLINK_INTERVAL_MS, Se as BUTTON_FACE, Ce as BUTTON_FRAME, Ve as CARET_DOWN, He as CHECKBOX_X, Ue as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Bt as CURSOR_ARROW, Vt as CURSOR_CROSSHAIR, Ht as CURSOR_I_BEAM, Ut as CURSOR_WAIT, xe as DocumentListenersController, Ne as DragController, gt as FocusRuleController, ye as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Le as PRESS_HOLD_MS, _e as PatternFillController, T as PlacementController, We as RADIO_DOT, Ge as RADIO_FACE, Ke as RADIO_RING, qe as RADIO_RING_PRESSED, Re as RENAME_DELAY_MS, we as RING_FRAME, Te as RING_HOLE, Ee as RING_INSET, De as SCREEN_CORNER, Je as SLIDER_THUMB, Ye as SLIDER_THUMB_FACE, Xe as STEPPER, Ze as STEPPER_DOWN_FILL, Qe as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, et as ScrollRailController, Pe as ScrollStateController, R as TILE_LATTICE, fe as TileRasterCache, ge as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, ut as VfButton, ot as VfButtonGroup, pt as VfCheckbox, zt as VfContainer, je as VfDesktop, st as VfDialog, It as VfFieldset, lt as VfFormControl, Lt as VfGrid, At as VfIcon, kt as VfImg, Dt as VfLabel, Pt as VfList, Ft as VfListItem, Mt as VfMenu, jt as VfMenuBar, Nt as VfMenuItem, it as VfModalDialog, St as VfNumberField, Ct as VfOption, Ot as VfParagraph, E as VfPositioned, Tt as VfProgressBar, mt as VfRadio, ht as VfRadioGroup, nt as VfScrollArea, wt as VfSelect, ct as VfSeparator, Me as VfSized, Et as VfSlider, Rt as VfStack, dt as VfSwatch, xt as VfTextArea, yt as VfTextControlBase, bt as VfTextField, ft as VfToggleControl, rt as VfWindow, Wt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, _t as focusModality, m as getScale, s as getZoom, $e as glyphSvg, at as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, Y as patternHex, X as patternMotif, pe as patternOverride, Z as patternRects, ze as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, tt as renderScrollRail, be as requestGridSnap, l as resetZoomBaseline, Be as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Oe as steppedCornerClip, ke as steppedRectClip, Ae as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, me as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, vt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, ue as vfField, oe as vfFocus, se as vfFocusRing, ce as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, ve as vfPatternFill, de as vfScrollRail, L as vfStaticText, $ as vfStripes, he as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ie as vfTitleBar, le as vfToggle, ae as vfWindowWidgets };
+import { RULE_EDGES as ie, parseRule as ae, ruleClasses as oe, vfRule as se } from "./styles/recipes/rule.js";
+import { vfTitleBar as ce, vfWindowWidgets as le } from "./styles/recipes/title-bar.js";
+import { vfFocus as ue, vfFocusRing as de, vfFocusUnderline as fe } from "./styles/recipes/focus.js";
+import { vfToggle as pe } from "./styles/recipes/toggle.js";
+import { vfField as me } from "./styles/recipes/field.js";
+import { vfScrollRail as he } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as ge, patternOverride as _e, tileGrid as ve, vfTileGrid as ye } from "./tile-grid.js";
+import { TrackWidthController as be } from "./track-width.js";
+import { PatternFillController as xe, vfPatternFill as Se } from "./pattern-fill.js";
+import { GridSnapController as Ce, requestGridSnap as we } from "./grid-snap.js";
+import { DocumentListenersController as Te } from "./document-listeners.js";
+import { BUTTON_FACE as Ee, BUTTON_FRAME as De, RING_FRAME as Oe, RING_HOLE as ke, RING_INSET as Ae, SCREEN_CORNER as je, steppedCornerClip as Me, steppedRectClip as Ne, steppedRingClip as Pe } from "./pixel-frame.js";
+import { VfDesktop as Fe } from "./components/vf-desktop.js";
+import { VfSized as Ie } from "./size.js";
+import { DragController as Le } from "./drag.js";
+import { ScrollStateController as Re } from "./scroll-state.js";
+import { BLINK_FLIPS as ze, BLINK_INTERVAL_MS as Be, PRESS_HOLD_MS as Ve, RENAME_DELAY_MS as He, prefersReducedMotion as Ue, runSelectionBlink as We } from "./motion.js";
+import { CARET_DOWN as Ge, CHECKBOX_X as Ke, CHECKMARK as qe, RADIO_DOT as Je, RADIO_FACE as Ye, RADIO_RING as Xe, RADIO_RING_PRESSED as Ze, SLIDER_THUMB as Qe, SLIDER_THUMB_FACE as $e, STEPPER as et, STEPPER_DOWN_FILL as tt, STEPPER_UP_FILL as nt, glyphSvg as rt } from "./glyphs.js";
+import { ScrollRailController as it, renderScrollRail as at } from "./scroll-rail.js";
+import { VfScrollArea as ot } from "./components/vf-scroll-area.js";
+import { VfWindow as st } from "./components/vf-window.js";
+import { VfModalDialog as ct, modalDialogStyles as lt } from "./modal-dialog.js";
+import { VfButtonGroup as ut } from "./components/vf-button-group.js";
+import { VfDialog as dt } from "./components/vf-dialog.js";
+import { VfSeparator as ft } from "./components/vf-separator.js";
+import { VfFormControl as pt } from "./form-control.js";
+import { VfButton as mt } from "./components/vf-button.js";
+import { VfSwatch as ht } from "./components/vf-swatch.js";
+import { VfToggleControl as gt } from "./toggle-control.js";
+import { VfCheckbox as _t } from "./components/vf-checkbox.js";
+import { VfRadio as vt } from "./components/vf-radio.js";
+import { VfRadioGroup as yt } from "./components/vf-radio-group.js";
+import { FocusRuleController as bt, focusModality as xt, trackFocusModality as St } from "./focus-modality.js";
+import { VfTextControlBase as Ct } from "./text-control.js";
+import { VfTextField as wt } from "./components/vf-text-field.js";
+import { VfTextArea as Tt } from "./components/vf-text-area.js";
+import { VfNumberField as Et } from "./components/vf-number-field.js";
+import { VfOption as Dt } from "./components/vf-option.js";
+import { VfSelect as Ot } from "./components/vf-select.js";
+import { VfProgressBar as kt } from "./components/vf-progress-bar.js";
+import { VfSlider as At } from "./components/vf-slider.js";
+import { VfLabel as jt } from "./components/vf-label.js";
+import { VfParagraph as Mt } from "./components/vf-paragraph.js";
+import { VfImg as Nt } from "./components/vf-img.js";
+import { VfIcon as Pt } from "./components/vf-icon.js";
+import { VfMenuBar as Ft } from "./components/vf-menu-bar.js";
+import { VfMenu as It } from "./components/vf-menu.js";
+import { VfMenuItem as Lt } from "./components/vf-menu-item.js";
+import { VfList as Rt } from "./components/vf-list.js";
+import { VfListItem as zt } from "./components/vf-list-item.js";
+import { VfFieldset as Bt } from "./components/vf-fieldset.js";
+import { VfGrid as Vt } from "./components/vf-grid.js";
+import { VfStack as Ht } from "./components/vf-stack.js";
+import { VfContainer as Ut } from "./components/vf-container.js";
+import { CURSOR_ARROW as Wt, CURSOR_CROSSHAIR as Gt, CURSOR_I_BEAM as Kt, CURSOR_WAIT as qt } from "./cursor-art.js";
+import { applyCursor as Jt } from "./cursor.js";
+export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, Ge as CARET_DOWN, Ke as CHECKBOX_X, qe as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, Wt as CURSOR_ARROW, Gt as CURSOR_CROSSHAIR, Kt as CURSOR_I_BEAM, qt as CURSOR_WAIT, Te as DocumentListenersController, Le as DragController, bt as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ve as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, Je as RADIO_DOT, Ye as RADIO_FACE, Xe as RADIO_RING, Ze as RADIO_RING_PRESSED, He as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, Qe as SLIDER_THUMB, $e as SLIDER_THUMB_FACE, et as STEPPER, tt as STEPPER_DOWN_FILL, nt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, it as ScrollRailController, Re as ScrollStateController, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, mt as VfButton, ut as VfButtonGroup, _t as VfCheckbox, Ut as VfContainer, Fe as VfDesktop, dt as VfDialog, Bt as VfFieldset, pt as VfFormControl, Vt as VfGrid, Pt as VfIcon, Nt as VfImg, jt as VfLabel, Rt as VfList, zt as VfListItem, It as VfMenu, Ft as VfMenuBar, Lt as VfMenuItem, ct as VfModalDialog, Et as VfNumberField, Dt as VfOption, Mt as VfParagraph, E as VfPositioned, kt as VfProgressBar, vt as VfRadio, yt as VfRadioGroup, ot as VfScrollArea, Ot as VfSelect, ft as VfSeparator, Ie as VfSized, At as VfSlider, Ht as VfStack, ht as VfSwatch, Tt as VfTextArea, Ct as VfTextControlBase, wt as VfTextField, gt as VfToggleControl, st as VfWindow, Jt as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, xt as focusModality, m as getScale, s as getZoom, rt as glyphSvg, lt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, Ue as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, at as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, We as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, St as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets };

package/dist/styles/base.d.ts

@@ -29,6 +29,8 @@ export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
 export { vfHardShadowDecls } from './recipes/shadow.js';
 export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
+export { RULE_EDGES, parseRule, ruleClasses, vfRule } from './recipes/rule.js';
+export type { RuleEdge } from './recipes/rule.js';
 export { vfTitleBar, vfWindowWidgets } from './recipes/title-bar.js';
 export { vfFocus, vfFocusRing, vfFocusUnderline } from './recipes/focus.js';
 export { vfToggle } from './recipes/toggle.js';

package/dist/styles/recipes/rule.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The four edges a rule can sit on, in CSS shorthand order.
+ */
+export declare const RULE_EDGES: readonly ["top", "right", "bottom", "left"];
+export type RuleEdge = (typeof RULE_EDGES)[number];
+/**
+ * The 1px rule — the single black line that is the 1-bit art's only edge —
+ * drawn on one side of a box. One class per edge, composable: the menu bar's
+ * floor is `.vf-rule-bottom`, a window's status strip's ceiling is
+ * `.vf-rule-top`, and `vf-container rule="…"` takes the edges by name.
+ *
+ * A border, not a pseudo-element or a painted line, so it lives inside the
+ * box's own `border-box` size (vfBase) and insets the padding box the way
+ * FrameRect insets a rectangle's interior: content, percentage fills and
+ * children placed against the box all begin inside the rule. Scales with
+ * `--vf-scale`, so it is one system px at every density, and paints in
+ * `--vf-black`, so it remaps under forced colors with the rest of the ink.
+ *
+ * One declaration per edge, so the kit cannot grow two rules — the
+ * {@link vfHardShadowDecls} principle, applied to the line.
+ *
+ * Being a border, it shares the kit's border-floor residual
+ * (docs/THREE-X-DISPLAYS.md): Chromium floors a fractional border-width to
+ * whole CSS px, so above 1× the line paints thinner than a system px (2
+ * device px of 3 at 2×) and the padding box begins that much inside — the
+ * same as every kit frame, and the same line the menu bar always drew.
+ * `npm run verify:rule` asserts a container's rule against the menu bar's.
+ */
+export declare const vfRule: import("lit").CSSResult;
+/**
+ * The `rule` attribute grammar: edge names separated by whitespace, in any
+ * order (`"bottom"`, `"top bottom"`, all four for a framed box). Returns the
+ * edges in top/right/bottom/left order with repeats dropped; an empty array
+ * for an unset or blank value; and `null` for a value carrying any token that
+ * is not an edge name — the whole value is refused, not the one token, as
+ * `parsePattern` refuses an unrecognized pattern. Case-sensitive, like the
+ * pattern names.
+ */
+export declare function parseRule(value: string | null | undefined): RuleEdge[] | null;
+/** The classes a resolved rule puts on its box: `vf-rule-top vf-rule-bottom`. */
+export declare function ruleClasses(edges: readonly RuleEdge[]): string;

package/dist/styles/recipes/rule.js

@@ -0,0 +1,32 @@
+import { css as e, unsafeCSS as t } from "lit";
+//#region src/styles/recipes/rule.ts
+var n = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], r = t("calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000)"), i = e`
+  .vf-rule-top {
+    border-top: ${r};
+  }
+  .vf-rule-right {
+    border-right: ${r};
+  }
+  .vf-rule-bottom {
+    border-bottom: ${r};
+  }
+  .vf-rule-left {
+    border-left: ${r};
+  }
+`;
+function a(e) {
+	if (e == null) return [];
+	let t = e.trim().split(/\s+/).filter(Boolean), r = new Set(t);
+	for (let e of r) if (!n.includes(e)) return null;
+	return n.filter((e) => r.has(e));
+}
+function o(e) {
+	return e.map((e) => `vf-rule-${e}`).join(" ");
+}
+//#endregion
+export { n as RULE_EDGES, a as parseRule, o as ruleClasses, i as vfRule };

package/docs/SPEC.md

@@ -148,6 +148,7 @@ The span construction stays load-bearing for the CSS-repeated underlays beneath
 - `vfHardShadowDecls` — the hard 1-bit drop shadow on its own, for composing into a surface that supplies its own border: `box-shadow: var(--vf-shadow-offset, 2px) var(--vf-shadow-offset, 2px) 0 0 var(--vf-black, #000)`. No blur, no spread — System 7's only depth cue. Every raised surface in the kit composes this one declaration (`vfPanel`, `vfChromeFrame`; `vf-swatch` composes it without either surface class).
 - `vfPanel` — a `.vf-panel` class for menus/popups: white bg, `border: 1px solid var(--vf-black, #000)`, `vfHardShadowDecls`.
 - `vfChromeFrame` — a `.vf-frame` class for the desktop window (`vf-window`): the same white face, 1px black border and hard offset shadow as `vfPanel`, no bevels. Skin only — the component supplies its own layout (a full-size flex column). `vf-dialog` does not use it: both of its chromes are `vfModalFrame`.
+- `vfRule` — the 1px rule on one edge of a box, one class per edge: `.vf-rule-top`, `.vf-rule-right`, `.vf-rule-bottom`, `.vf-rule-left`, each `border-<edge>: 1px solid var(--vf-black, #000)` scaled by `--vf-scale`. A border, so it sits inside the box's `border-box` size and insets the padding box — content, percentage fills and children placed against the box begin inside the rule, as a rectangle's interior begins inside FrameRect's line. One declaration per edge, the `vfHardShadowDecls` principle applied to the line: `vf-menu-bar`'s floor and `vf-window`'s status-strip ceiling are these classes, and `vf-container rule="…"` takes the edges by name. The attribute grammar ships beside it (`RULE_EDGES`, `parseRule`, `ruleClasses`): edge names separated by whitespace in any order, repeats dropped, returned in shorthand order; a blank or unset value is no edges; any other token refuses the whole value, as `parsePattern` refuses an unrecognized pattern. Being a border it shares the kit's border-floor residual (docs/THREE-X-DISPLAYS.md — thin above 1× in Chromium, the padding box that much inside), exactly as every kit frame does. `npm run verify:rule` asserts a container's rule against the menu bar's own at four densities.
 - `vfModalFrame` — the dBoxProc modal-dialog frame, both `vf-dialog` chromes: `.vf-modal-frame` (white face, 1px black border, **no shadow**) around `.vf-modal-frame-inner` (`margin: 2px; border: 2px solid`). **The movable modal is this frame with the striped bar set into it** (traced from a 2× System 7 capture): a `.vf-title-bar` as the frame's first child sits directly under the outer rule, `margin: 0 2px` so its stripes — flush to the bar's own edge here, `inset: 3px 0` — keep the same 2px of white from the outer rule the band keeps; the inner box that follows it drops its top margin and thins its top border to 1px, so the bar's own 1px rule plus that border make the 2px band the bar's floor, continuing down the sides and along the bottom. System 7's alert box drew the mirror trace — 2px outer, 2px gap, 1px inner rule, *with* the hard shadow (`Windows/modal dialog.png` vs the alert reference) — a different chrome the kit does not ship: an alert box is a consumer composition over this frame, not a component.
 - `vfWindowWidgets` — the title-bar window widgets (`.box` base, `.close` left / `.zoom` right at 11×11 with the 1px white patch ring, the pressed go-away sunburst, the nested zoom square), shared by `vf-window` and a `closable` `vf-dialog` so the two components' widgets match by construction. The templates that pair with it (`closeBox`/`zoomBox`/`widgetLabel`) live in `src/chrome.ts` with `chromeTitleBar`. Geometry is the standard bar's; `vf-window`'s utility variant overrides sizes under its own selector.
 - `vfTitleBar` — the striped title bar shared by `vf-window` and `vf-dialog`: a `.vf-title-bar` row (`height: var(--vf-titlebar-height, 18px)`, 1px bottom rule, `overflow: hidden`) and the `.vf-title` patch inside it (display face, white bg, `padding: 0 6px`, `z-index: 1` over the stripes, `nowrap` + ellipsis). Put a `.vf-stripes` layer in as the bar's first child.
@@ -214,7 +215,7 @@ The desktop-window shell: the classic document window (see DragThing screenshot)
   - Zoom box: RIGHT side, same box, plus a small box nested in its top-left corner (sharing the widget's own top/left border; only the right and bottom edges are drawn). `:active` (pressed) → shows the identical sunburst as the close box; the nested box gives way to it.
   - Body: `padding: 12px` (0 if `flush` or `scrollbars`), and `overflow: hidden` — the window being a fixed box, content taller than it is clipped at the frame the way the classic content region was, rather than painting out over the desktop; `scrollbars` is how the user reaches the rest. Two deliberate exemptions: `[scrollbars]` restores `overflow: visible`, because the edge-rail composition below pulls the scroll area one system px *outside* the body on every side and clipping would shave exactly that overhang off (the scroll area does its own clipping); and a control's drop-open panel is not clipped — `vf-select`'s list is `position: fixed` off the control's rect precisely to escape clipping ancestors (§5 vf-select), and it still escapes, because nothing between it and the viewport establishes a containing block for fixed descendants (the grid-snap correction is a `position: relative` left/top offset, never a transform — see §7). A `vf-menu` panel is anchored `position: absolute` and *would* clip, but a menu bar belongs to the desktop, not inside a window body.
   - Grow box (if `resizable`): 15×15 at bottom-right corner, white bg, 1px black top/left borders, containing two overlapping small square outlines. Inactive: the cell and its borders stay, the nested squares go — System 7 drew a deactivated window's size box hollow, with its blanked scroll rails.
-  - Status bar (`status` slot): the classic bottom readout strip ("40px x 40px") — a 1px black rule over a white interior, `--vf-status-bar-height` (15px) in all, the grow box's own height, so a `resizable` window's grow box sits flush in the strip's right end (its top/left borders take over the rule there; the strip reserves 21px of right padding under `resizable` so text clears the cell). Slotted content rides the body face's native 12px line (`--vf-line-height`), whole-pixel centered in the 14px interior, `padding-inline: 6px`, nowrap + clipped. Takes **no space** until the slot is populated (the dialog-footer pattern), and collapses again when it empties. Composes with `scrollbars`: the edge rails' bottom overhang lands its frame line exactly on the strip's rule, so the two never double up — though the grow box then sits in the strip rather than the rail corner cell.
+  - Status bar (`status` slot): the classic bottom readout strip ("40px x 40px") — a 1px black rule (`vfRule`'s `.vf-rule-top`) over a white interior, `--vf-status-bar-height` (15px) in all, the grow box's own height, so a `resizable` window's grow box sits flush in the strip's right end (its top/left borders take over the rule there; the strip reserves 21px of right padding under `resizable` so text clears the cell). Slotted content rides the body face's native 12px line (`--vf-line-height`), whole-pixel centered in the 14px interior, `padding-inline: 6px`, nowrap + clipped. Takes **no space** until the slot is populated (the dialog-footer pattern), and collapses again when it empties. Composes with `scrollbars`: the edge rails' bottom overhang lands its frame line exactly on the strip's rule, so the two never double up — though the grow box then sits in the strip rather than the rail corner cell.
   - Edge scroll rails (if `scrollbars`): the body slot renders inside a shadow `vf-scroll-area` (its `axis` = the attribute's value, `label` = the heading, `viewport` part re-exported) carrying the TeachText composition internally — `calc(100% + 2px·scale)` with `margin: -1px·scale`, one system px under the frame on every side, so the area's own frame border repaints the window's border lines and a `resizable` window's grow box (z-index 1) lands exactly over the rail-corner cell. Same caveats as the slotted composition (see vf-scroll-area §5), which remains supported for inset wells.
   - Utility variant (`variant="utility"`): the slim windoid bar traced from `Windows/utility-window.png` — `--vf-titlebar-height-utility` (12px = 11px interior + 1px rule), the `vfDots` dither instead of stripes (flush to the side borders — see §4 vfDots), 7×7 widgets (`top: 2px`; close `left: 7px`, zoom `right: 8px` — the art is asymmetric by that pixel) with a 2px patch ring where the striped bar's is 1px (`--vf-widget-ring`, internal geometry: the windoid sheet clears two px of dither beside its widgets), and the nested zoom square shrunk so its edges land at sprite col/row 3. No title patch: the display face's 16px line box can't sit in an 11px interior, so `.vf-title` is `display: none` under the variant (a retheming consumer can re-show it via `::part(title)`) and the heading names the widgets. A pressed windoid widget inverts whole — black interior under a white (invisible) borderline — rather than flashing the big bar's 9×9 sunburst, which can't land on a 5×5 interior.
 - **A11y:** the close/zoom `aria-label`s are qualified by the title when there is one (`Close ${heading}` / `Zoom ${heading}`, falling back to bare `Close` / `Zoom`) — several windows are open at once by design, so a bare repeated "Close" gives an AT user no way to tell which window a widget belongs to. The frame is `role="group"`, named by the title patch via `aria-labelledby` when there is a heading (the utility variant's hidden patch still names it — AccName resolves hidden labelledby targets) — `group` rather than `region` deliberately, so a desktop of windows doesn't pollute landmark navigation; the title bar is a `<div>`, never a `<header>`, which would map to an unnamed `banner` landmark even inside the shadow root. An inactive window's widgets stay in the tree and the tab order but paint no ink (transparent border/background/patch ring — the bare System 7 bar): a background window whose body holds nothing focusable is still reachable, activated by `vf-desktop`'s `focusin` raise the moment Tab lands on a widget, and never drops focus to `<body>` when it deactivates. `npm run verify:window-a11y`.
@@ -354,7 +355,7 @@ The classic popup menu control ("Macintosh HD ▼").
 
 #### `vf-menu-bar` (`VfMenuBar`, vf-menu-bar.ts)
 - **Attributes/props:** `label: string` — accessible name for the menubar, mirrored as host `aria-label` (guarded: a consumer's own `aria-label`/`aria-labelledby` is left alone). `rounded: boolean` (reflected) — draws the System 7 screen-corner mask over the bar's top-left/top-right corners. `shortcuts: boolean` (reflected) — makes every slotted menu's item `shortcut`s live key equivalents, one declaration for the whole bar the way MenuKey() answered for every menu at once (see vf-menu-item for the claim contract). Off by default: key equivalents are page-global, and only *the* menu bar should own them.
-- **Visual:** `display: block/flex`, height `var(--vf-menubar-height, 20px)` — 19 white system px over the 1px black rule, the Menus.png bar strip exactly — white bg, `border-bottom: 1px solid var(--vf-black, #000)`, children laid out horizontally from left. Adjacent titles are pulled 5px into each other (`margin-inline-start: -5px` on every slotted menu, absorbed by 14px of bar start padding — 9px of bar before the first plate, as System 7 placed the Apple title, plus the first title's 5px share): Menus.png spaces title ink 14px apart while each title's plate runs 10px left / 9px right of its own ink, so neighboring plates *overlap* by 5px, as the originals did. With `rounded`, two 5×5 system-px corner overlays paint the traced stair-step mask (per-row runs 5/3/2/1/1 — `SCREEN_CORNER` + `steppedCornerClip` in `pixel-frame.ts`) in `--vf-black` *over* the bar: on the classic screen the rounding was the ROM's black corner mask sitting on top of the menu bar, not a shape of the bar's own, so it is ink over any backdrop rather than a cutout.
+- **Visual:** `display: block/flex`, height `var(--vf-menubar-height, 20px)` — 19 white system px over the 1px black rule, the Menus.png bar strip exactly — white bg, the rule `vfRule`'s `.vf-rule-bottom` on the bar (§4), children laid out horizontally from left. Adjacent titles are pulled 5px into each other (`margin-inline-start: -5px` on every slotted menu, absorbed by 14px of bar start padding — 9px of bar before the first plate, as System 7 placed the Apple title, plus the first title's 5px share): Menus.png spaces title ink 14px apart while each title's plate runs 10px left / 9px right of its own ink, so neighboring plates *overlap* by 5px, as the originals did. With `rounded`, two 5×5 system-px corner overlays paint the traced stair-step mask (per-row runs 5/3/2/1/1 — `SCREEN_CORNER` + `steppedCornerClip` in `pixel-frame.ts`) in `--vf-black` *over* the bar: on the classic screen the rounding was the ROM's black corner mask sitting on top of the menu bar, not a shape of the bar's own, so it is ink over any backdrop rather than a cutout.
 - **Behavior:** container/controller for slotted `vf-menu` children. Pressing a menu label → opens it (label inverts while open). While any menu is open, hovering another label switches to it (classic behavior). Escape / outside click / item selection closes. `role="menubar"`, behind a first-connect ownership latch so a consumer's own role survives upgrade; the shadow `.bar` is `role="presentation"` and each slotted `vf-menu` host `role="none"`, so the `menubar → menuitem` ownership chain has no generics in it. While a menu is open: ArrowLeft/Right move between menus, ArrowDown/Up walk the open menu's items, Home/End jump to its first/last enabled item, and printable keys run the shared Finder first-letter type-ahead over the items (`src/type-ahead.ts`; Space stays the focused item's activation key, and the prefix resets on menu switch or close). The bar also **owns the press-drag-release gesture** across its menus (`MenuPressController`, `src/menu-press.ts` — see `vf-menu`), since one press may travel over several of them: it binds the opening `pointerdown` and hands the controller its own open/close rules, so the gesture changes *when* a menu opens, never *how*.
 - **Slots:** default (vf-menu elements). **Parts:** `bar`.
 
@@ -428,10 +429,10 @@ The kit's layout primitive: a flexbox whose `gap`, `pad`, `width` and `height` a
 - **Slots:** default (the children; `fill-width` / `fill-height` on any of them). **Parts:** none. **Events:** none.
 
 #### `vf-container` (`VfContainer`, vf-container.ts)
-A plain sized box: `width`/`height` in whole system px around a bare slot — no paint, no layout opinion. Explicit placement (src/position.ts) leaves one line of CSS the kit can't write for a consumer: children placed with `top`/`left` need a positioned ancestor, so a region of the consumer's *own* needs `position: relative` in a stylesheet. This component is that region as an element — a DITL's enclosing rectangle with nothing drawn in it.
-- **Attributes/props:** `width` / `height`: number (whole system px, via `VfSized`); the `top` / `left` pair via `VfPositioned` like nearly every component; `pattern?: string` — a library pattern by name or sixteen hex digits (docs/PATTERNS.md), painted as the box's background: unset paints nothing, an unrecognized value paints nothing and warns once. On a **child**: `fill-width` and `fill-height`, bare attributes as in `vf-stack`. That is the whole API.
+A plain sized box: `width`/`height` in whole system px around a bare slot — nothing drawn but what `pattern` and `rule` name, no layout opinion. Explicit placement (src/position.ts) leaves one line of CSS the kit can't write for a consumer: children placed with `top`/`left` need a positioned ancestor, so a region of the consumer's *own* needs `position: relative` in a stylesheet. This component is that region as an element — a DITL's enclosing rectangle with nothing drawn in it.
+- **Attributes/props:** `width` / `height`: number (whole system px, via `VfSized`); the `top` / `left` pair via `VfPositioned` like nearly every component; `pattern?: string` — a library pattern by name or sixteen hex digits (docs/PATTERNS.md), painted as the box's background: unset paints nothing, an unrecognized value paints nothing and warns once; `rule?: string` — edge names separated by spaces (`"bottom"`, `"top bottom"`, up to all four in any order), the 1px rule drawn on those edges as the box's own border inside the declared size: unset draws none, a value naming anything but an edge draws none and warns once. On a **child**: `fill-width` and `fill-height`, bare attributes as in `vf-stack`. That is the whole API.
 - **Not a `vf-stack`.** The stack is a flexbox with opinions — an axis, a cross-axis default, fills compiled into flex. The container has none: in-flow children get normal flow, placed children get a coordinate system. Reach for it when the stack's opinions are the thing in the way — a field of placed icons, a fixed stage for placed art, a composition that brings its own layout with it.
-- **Visual:** none unless `pattern` is set — no border, role, keyboard behavior or selection; what it holds decides what it is. With `pattern`, the shadow box carries the fill as its own background (`vfPatternFill`: the `vf-pattern-fill` class always, `vf-patterned` while a pattern is resolved — *Patterns* under *Tiled fills*), riding the snap correction with the coordinate system; the raster is sized from the declared axes and measured on an undeclared one. `:host` is a block with `width: fit-content`, so an undeclared axis shrink-wraps rather than claiming the parent's width (the stack's rule — a layout box must not hand out a size nobody declared; a declared dimension lands on the host's inline style and beats it). The slot sits in one shadow box coinciding with the host box (`.vf-snap`, `display: flow-root`, `height: 100%`): flow-root so a slotted margin cannot collapse through the top edge and push the coordinate origin off the host's corner, 100% so percentage fills resolve against a declared height. That box owns `position: relative` — the anchor for `top`/`left` children — the component's purpose. Content that outgrows the declared box overflows it rather than growing it.
+- **Visual:** none unless `pattern` or `rule` is set — no role, keyboard behavior or selection; what it holds decides what it is. With `pattern`, the shadow box carries the fill as its own background (`vfPatternFill`: the `vf-pattern-fill` class always, `vf-patterned` while a pattern is resolved — *Patterns* under *Tiled fills*), riding the snap correction with the coordinate system; the raster is sized from the declared axes and measured on an undeclared one. With `rule`, the same box wears `vfRule`'s per-edge classes (§4): the rule is its border, inside the declared size (`box-sizing: border-box`), so a 24px `rule="bottom"` strip is 23 rows of box over one of ink — the menu bar's anatomy — and the padding box, which placed children anchor to and percentage fills resolve against, begins inside the rule. A pattern's paper reaches the rule and its phase anchors at the padding box, so it begins directly inside a top or left rule. `npm run verify:rule`. `:host` is a block with `width: fit-content`, so an undeclared axis shrink-wraps rather than claiming the parent's width (the stack's rule — a layout box must not hand out a size nobody declared; a declared dimension lands on the host's inline style and beats it). The slot sits in one shadow box coinciding with the host box (`.vf-snap`, `display: flow-root`, `height: 100%`): flow-root so a slotted margin cannot collapse through the top edge and push the coordinate origin off the host's corner, 100% so percentage fills resolve against a declared height. That box owns `position: relative` — the anchor for `top`/`left` children — the component's purpose. Content that outgrows the declared box overflows it rather than growing it.
 - **Carries a `GridSnapController`.** A container's box is itself the consumer's coordinate system, including for non-`vf` content that cannot correct itself. The shadow box owns the positioning anchor and the `vf-snap` class *together*, so the correction moves the whole coordinate system and everything placed against it rides along, kit or not. A declared size and whole-px `top`/`left` are on the grid by construction; the controller covers the origin the page contributes. (This is the arrangement `vf-stack` has since adopted too — one shadow box owning anchor and correction together.)
 - **Typographically transparent**, exactly as `vf-stack` and for the same reason: `font`, `-webkit-font-smoothing`, `color`, `user-select` and `text-align` return to `inherit`, so wrapping content in a sized box changes nothing about how that content reads.
 - **`fill-width` / `fill-height`** are read about the host (`width`/`height: 100%`, for a parent that can give the box a size) and compiled for slotted children as the percentage form — normal flow has no flex axes to translate onto. `width: 100%` always binds against the box; `height: 100%` binds only against a declared `height` (percentage-against-auto computes to auto), so a fill with nothing to take is inert, not an error. A light-DOM declaration beats the `::slotted` rule, as everywhere.

package/editor/vscode.html-custom-data.json

@@ -154,13 +154,18 @@
     },
     {
       "name": "vf-container",
-      "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` says what to\npaint. No border, role, keyboard behavior or selection; what it holds\ndecides what it is.\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.\n---\n\n\n### **Slots:**\n - _default_ - The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box.",
+      "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.\n---\n\n\n### **Slots:**\n - _default_ - The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box.",
       "attributes": [
         {
           "name": "pattern",
           "description": "A 1-bit fill for the box: a library pattern by name (`bricks`,\n`gray-50`, … — the 38 standard MacPaint patterns, docs/PATTERNS.md) or\nsixteen hex digits stating a custom 8×8 pattern row by row, bit 7 the\nleftmost pixel, 1 = ink (`\"DD 77 DD 77 DD 77 DD 77\"`). Painted in black\non a `--vf-white` ground under the content, anchored at the box's\ntop-left. Unset, the container paints nothing; an unrecognized value\npaints nothing and warns once.",
           "values": []
         },
+        {
+          "name": "rule",
+          "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.",
+          "values": []
+        },
         {
           "name": "width",
           "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",

package/editor/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "vintage-frames",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -378,7 +378,7 @@
         },
         {
           "name": "vf-container",
-          "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` says what to\npaint. No border, role, keyboard behavior or selection; what it holds\ndecides what it is.\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.\n---\n\n\n### **Slots:**\n - _default_ - The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box.",
+          "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.\n---\n\n\n### **Slots:**\n - _default_ - The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box.",
           "doc-url": "",
           "attributes": [
             {
@@ -386,6 +386,11 @@
               "description": "A 1-bit fill for the box: a library pattern by name (`bricks`,\n`gray-50`, … — the 38 standard MacPaint patterns, docs/PATTERNS.md) or\nsixteen hex digits stating a custom 8×8 pattern row by row, bit 7 the\nleftmost pixel, 1 = ink (`\"DD 77 DD 77 DD 77 DD 77\"`). Painted in black\non a `--vf-white` ground under the content, anchored at the box's\ntop-left. Unset, the container paints nothing; an unrecognized value\npaints nothing and warns once.",
               "value": { "type": "string | null | undefined" }
             },
+            {
+              "name": "rule",
+              "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.",
+              "value": { "type": "string | null | undefined" }
+            },
             {
               "name": "width",
               "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
@@ -421,6 +426,11 @@
                 "description": "A 1-bit fill for the box: a library pattern by name (`bricks`,\n`gray-50`, … — the 38 standard MacPaint patterns, docs/PATTERNS.md) or\nsixteen hex digits stating a custom 8×8 pattern row by row, bit 7 the\nleftmost pixel, 1 = ink (`\"DD 77 DD 77 DD 77 DD 77\"`). Painted in black\non a `--vf-white` ground under the content, anchored at the box's\ntop-left. Unset, the container paints nothing; an unrecognized value\npaints nothing and warns once.",
                 "type": "string | null | undefined"
               },
+              {
+                "name": "rule",
+                "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.",
+                "type": "string | null | undefined"
+              },
               {
                 "name": "width",
                 "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vintage-frames",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Lit web components that emulate the look and feel of classic Mac OS System 7",
   "type": "module",
   "license": "MIT",
@@ -59,6 +59,7 @@
     "build:pages": "vite build --config vite.pages.config.ts",
     "preview:pages": "vite preview --config vite.pages.config.ts",
     "prepack": "npm run build && npm run verify:manifest",
+    "version": "npm run analyze && git add custom-elements.json editor",
     "analyze": "cem analyze",
     "verify:manifest": "node scripts/verify-manifest.mjs",
     "typecheck": "tsc --noEmit",
@@ -85,6 +86,7 @@
     "verify:scale": "node scripts/verify-scale.mjs",
     "verify:tile": "node scripts/verify-tile.mjs",
     "verify:pattern": "node scripts/verify-pattern.mjs",
+    "verify:rule": "node scripts/verify-rule.mjs",
     "verify:zoom": "tsc src/zoom.ts --outDir scripts/.tmp --target es2022 --module esnext --moduleResolution bundler --skipLibCheck && node scripts/verify-zoom.mjs",
     "verify:chrome": "node scripts/verify-chrome.mjs",
     "verify:window": "node scripts/verify-window.mjs",