vintage-frames 0.5.0 → 0.5.2

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": {
@@ -2200,7 +2237,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, one whole-surface raster at one image px per system px, 1-bit at\nevery density and zoom (src/pattern-fill.ts).\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\nA slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier\nabove both, so its dropped menus cover palettes and document windows\nalike; only the screen-corner mask is in front of it.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, one whole-surface raster at one image px per system px, 1-bit at\nevery density and zoom (src/pattern-fill.ts).\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
           "name": "VfDesktop",
           "cssProperties": [
             {
@@ -6906,7 +6943,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-menu>` — a pull-down menu: a bar label plus a dropped panel of\n`<vf-menu-item>` / `<vf-separator>` children.\n\nInside a `<vf-menu-bar>` the bar coordinates open state (only one menu open,\nhover-switching, outside-click/Escape dismissal) and owns the pointer\ngesture, which may travel between its menus. Used standalone, the menu\ntoggles itself on label click and manages its own dismissal, its own press\ngesture and item keyboard navigation (ArrowUp/ArrowDown, Home/End, and the\nshared first-letter type-ahead — src/type-ahead.ts) while open.\n\nPointer — the two styles `vf-select` supports, on the same terms (see\nsrc/menu-press.ts): the System 7 press-drag-release (press the title, slide\nonto a command, release over it) and a modern quick tap that leaves the menu\ndropped for a second click.\n\nTakes `top`/`left` like every other element (VfPositioned) — the\nnatural fit being a standalone menu, which is a free-standing menu button and\nplaces like any other control. The panel is anchored to the host's own box\n(`top: 100%`), so it follows a placed menu down without any further work.\nInside a `<vf-menu-bar>`, the bar lays its titles out in flow — placing one\nlifts it off the bar and the titles beside it close the gap.",
+          "description": "`<vf-menu>` — a pull-down menu: a bar label plus a dropped panel of\n`<vf-menu-item>` / `<vf-separator>` children.\n\nInside a `<vf-menu-bar>` the bar coordinates open state (only one menu open,\nhover-switching, outside-click/Escape dismissal) and owns the pointer\ngesture, which may travel between its menus. Used standalone, the menu\ntoggles itself on label click and manages its own dismissal, its own press\ngesture and item keyboard navigation (ArrowUp/ArrowDown, Home/End, and the\nshared first-letter type-ahead — src/type-ahead.ts) while open.\n\nPointer — the two styles `vf-select` supports, on the same terms (see\nsrc/menu-press.ts): the System 7 press-drag-release (press the title, slide\nonto a command, release over it) and a modern quick tap that leaves the menu\ndropped for a second click.\n\nTakes `top`/`left` like every other element (VfPositioned) — the\nnatural fit being a standalone menu, which is a free-standing menu button and\nplaces like any other control. The panel is anchored to the host's own box\n(`top: 100%`), so it follows a placed menu down without any further work.\nInside a `<vf-menu-bar>`, the bar lays its titles out in flow — placing one\nlifts it off the bar and the titles beside it close the gap. Slotted straight\ninto a `<vf-desktop>`, a free-standing menu sits on the desktop's menu tier\nabove every window, palettes included, as a bar does.",
           "name": "VfMenu",
           "cssProperties": [
             {

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-desktop.d.ts

@@ -18,6 +18,9 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * outside the single-active invariant entirely — clicking a palette neither
  * deactivates the active document window nor greys the palette, exactly as
  * System 7's floating windoids behaved while their application was frontmost.
+ * A slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier
+ * above both, so its dropped menus cover palettes and document windows
+ * alike; only the screen-corner mask is in front of it.
  *
  * **Deactivation.** On a real System 7 machine clicking the desktop clicked
  * the *Finder* — the frontmost application's windows lost their stripes.

package/dist/components/vf-desktop.js

@@ -14,14 +14,14 @@ import { SCREEN_CORNER as x, steppedCornerClip as S } from "../pixel-frame.js";
 import { LitElement as C, css as w, html as T, unsafeCSS as E } from "lit";
 import { property as D, query as O, queryAssignedElements as k } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"), F = c(P.width, P.height, l(P.rects)), I = u(P.width), L = class extends o(C) {
+var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000", "#ffffff"), I = c(F.width, F.height, l(F.rects)), L = u(F.width), R = class extends o(C) {
 	constructor(...e) {
-		super(...e), this.width = j, this.height = M, this.bezel = 0, this.pattern = N, this.scale = new n(this), this.gridSnap = new y(this), this._token = "", this._desktopPattern = d[N], this.#e = !1, this.patternFill = new _(this, {
+		super(...e), this.width = M, this.height = N, this.bezel = 0, this.pattern = P, this.scale = new n(this), this.gridSnap = new y(this), this._token = "", this._desktopPattern = d[P], this.#e = !1, this.patternFill = new _(this, {
 			getBox: () => this.screen,
 			getPattern: () => this._token ? null : this._desktopPattern,
 			getSize: () => ({
-				width: this.width ?? j,
-				height: this.height ?? M
+				width: this.width ?? M,
+				height: this.height ?? N
 			})
 		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new b(this, () => [[
 			document,
@@ -112,7 +112,7 @@ var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"),
         position: absolute;
         inset: 0;
         z-index: -1;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${E(F)});
+        --_vf-tile-image: var(--vf-desktop-pattern, ${E(I)});
         /* Forced colors: hidden with the pattern, same posture. */
         @media (forced-colors: active) {
           display: none;
@@ -133,6 +133,19 @@ var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"),
       ::slotted(vf-window) {
         position: relative;
       }
+      /* The menu tier: a slotted bar, or a free-standing menu placed on the
+         desktop, sits above both window tiers (MENU_BAR_Z), so a dropped
+         menu paints over a floating palette exactly as it does over a
+         document window. Stated here rather than left to the bar's own
+         :host z-index (1000, which the utility band outranks): an outer
+         tree's ::slotted declaration beats the inner tree's :host one, so the
+         desktop that hands out the window bands owns this band too. Under
+         the corner mask, like everything. */
+      ::slotted(vf-menu-bar),
+      ::slotted(vf-menu) {
+        position: relative;
+        z-index: ${j};
+      }
       /* With a bezel, the screen's top corners wear the SCREEN_CORNER mask,
          rounding into the surrounding black — the top pair only, because the
          classic framebuffer masked only those; the raster's bottom corners
@@ -252,21 +265,21 @@ var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"),
 	willUpdate(e) {
 		if (super.willUpdate(e), this._token = m(this, "--vf-desktop-pattern"), e.has("pattern")) {
 			let e = f(this.pattern);
-			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${N}.`)), this._desktopPattern = e ?? d[N];
+			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${P}.`)), this._desktopPattern = e ?? d[P];
 		}
 	}
 	updated(e) {
 		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", i(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? j, t = this.height ?? M;
+			let e = this.width ?? M, t = this.height ?? N;
 			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? j, t = this.height ?? M, n = this._token ? T`<div class="vf-tile-grid">
+		let e = this.width ?? M, t = this.height ?? N, n = this._token ? T`<div class="vf-tile-grid">
           ${h({
-			cols: Math.ceil(e / I),
-			rows: Math.ceil(t / I),
-			tile: I
+			cols: Math.ceil(e / L),
+			rows: Math.ceil(t / L),
+			tile: L
 		})}
         </div>` : null;
 		return T`
@@ -284,6 +297,6 @@ var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"),
     `;
 	}
 };
-a([D({ type: Number })], L.prototype, "width", void 0), a([D({ type: Number })], L.prototype, "height", void 0), a([D({ type: Number })], L.prototype, "bezel", void 0), a([D()], L.prototype, "pattern", void 0), a([k({ selector: "vf-window" })], L.prototype, "_windows", void 0), a([O(".screen")], L.prototype, "screen", void 0), L = a([t("vf-desktop")], L);
+a([D({ type: Number })], R.prototype, "width", void 0), a([D({ type: Number })], R.prototype, "height", void 0), a([D({ type: Number })], R.prototype, "bezel", void 0), a([D()], R.prototype, "pattern", void 0), a([k({ selector: "vf-window" })], R.prototype, "_windows", void 0), a([O(".screen")], R.prototype, "screen", void 0), R = a([t("vf-desktop")], R);
 //#endregion
-export { L as VfDesktop };
+export { R as VfDesktop };

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,20 +102,28 @@ 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
            exactly (white rows y 69..87 of the sheet). */
         height: calc(var(--vf-scale, 1) * var(--vf-menubar-height, 20px));
         position: relative;
+        /* Above the page content a bar stands among: its dropped panels are
+           z-index 1000 inside this stacking context, so this is the level
+           they paint at. Inside a vf-desktop the desktop restates the level
+           through ::slotted(vf-menu-bar) — its utility-window band is
+           higher than this, and the desktop owns the tiers. */
         z-index: 1000;
       }
       .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 +155,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 +191,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 +235,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-menu.d.ts

@@ -22,7 +22,9 @@ declare const VfMenu_base: (new (...args: any[]) => import("../position.js").VfP
  * places like any other control. The panel is anchored to the host's own box
  * (`top: 100%`), so it follows a placed menu down without any further work.
  * Inside a `<vf-menu-bar>`, the bar lays its titles out in flow — placing one
- * lifts it off the bar and the titles beside it close the gap.
+ * lifts it off the bar and the titles beside it close the gap. Slotted straight
+ * into a `<vf-desktop>`, a free-standing menu sits on the desktop's menu tier
+ * above every window, palettes included, as a bar does.
  *
  * @slot - Menu contents: `vf-menu-item` and `vf-separator` elements.
  * @slot label - Replaces the `label` text in the bar — e.g. a `vf-img` apple