vintage-frames 0.1.0

package/dist/_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+function e(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as default };

package/dist/chrome.d.ts

@@ -0,0 +1,73 @@
+import { type TemplateResult } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { DragController } from './drag.js';
+export declare const chromeTitleBar: (drag: DragController, content: unknown, textureClass?: "vf-stripes" | "vf-dots", texture?: unknown) => TemplateResult;
+/**
+ * Holds the flex-centered `.vf-title` patch on the placement lattice.
+ *
+ * The bar centers the patch as `(bar − patch) / 2`, and the patch's width
+ * follows the heading's text run — so whenever the two widths' parities
+ * differ the patch lands half a system px off the grid, which a 3:1 display
+ * renders as title ink one device px off (both the glyph rows against the
+ * close box's, and the patch edge cutting a stripe to a hairline). No static
+ * rule can fix a parity that depends on the string, so this controller
+ * measures the centered offset after each render and cancels the fraction
+ * with `--vf-title-dx` on the host, which the recipe applies as a relative
+ * `left` on the patch (through layout, not transform — a fractional
+ * transform leaves a composite-time fringe; see grid-snap.ts).
+ *
+ * The offset lands on the placement lattice ({@link systemPxQuantum} system
+ * px — whole CSS px at dpr 2, where engines re-quantize sub-CSS-px paint per
+ * box), the same lattice drags and dialog centering land on, so bar origin
+ * plus offset stays on it absolutely. The ideal position is derived in whole
+ * system px rather than snapped from the measured one: both widths are whole
+ * system px by construction (bitmap advances plus whole-px padding, in a
+ * whole-px bar), so rounding the measured widths recovers exact integers —
+ * the 1/64-CSS-px rect noise sits near an integer, never near a tie — and
+ * the centered lattice point follows by integer arithmetic, the exact-half
+ * parity case going left as QuickDraw's `div 2` did. A consumer-swapped
+ * vector face breaks the whole-px premise, but the rounded widths still put
+ * the patch on the lattice within half a step of true center, which is all
+ * ungridded ink needs.
+ *
+ * Re-measures after every host render (heading, size and scale changes all
+ * re-render) and on any resize of the bar or patch — which is also how a
+ * late-registering 'VF Display' lands: the swap re-measures the text run and
+ * resizes the patch. A missing or boxless patch (the plain dialog frame, the
+ * utility windoid's display:none title) resets the correction.
+ */
+export declare class TitleCenterController implements ReactiveController {
+    private readonly host;
+    /** Our current correction, in CSS px. */
+    private applied;
+    /** Exactly what we last wrote, to detect an externally rewritten style. */
+    private written;
+    private frame;
+    private resizes?;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /** Coalesce to one measurement per frame, after layout settles. */
+    private schedule;
+    private center;
+    /** Drop the correction: delete the variable and forget everything. */
+    private reset;
+}
+/**
+ * Widget label, qualified by the window/dialog title when there is one —
+ * several windows are open at once by design, so a bare "Close" repeated
+ * across the desktop leaves an AT user no way to tell which window a button
+ * belongs to.
+ */
+export declare const widgetLabel: (action: string, heading: string) => string;
+/**
+ * The close box (left of the bar) and zoom box (right of the bar), shared by
+ * `vf-window` and a `closable` `vf-dialog`. Byte-identical markup for the same
+ * reason as {@link chromeTitleBar}: the widgets must match by construction,
+ * not by copies staying in sync. Skinned by `vfWindowWidgets` (styles/base.ts);
+ * drag delegates must keep ignoring pointerdowns on `.box` so a press on a
+ * widget never starts a bar drag.
+ */
+export declare const closeBox: (label: string, onClick: () => void) => TemplateResult;
+export declare const zoomBox: (label: string, onClick: () => void) => TemplateResult;

package/dist/chrome.js

@@ -0,0 +1,94 @@
+import { truePixelRatio as e } from "./zoom.js";
+import { effectiveScale as t, sysLength as n, systemPxQuantum as r } from "./scale.js";
+import { html as i } from "lit";
+//#region src/chrome.ts
+var a = i`${[
+	0,
+	2,
+	4,
+	6,
+	8,
+	10
+].map((e) => i`<span style="top:${n(e)}"></span>`)}<svg
+    viewBox="0 0 2 12"
+    preserveAspectRatio="none"
+    shape-rendering="crispEdges"
+    aria-hidden="true"
+  >
+    <rect x="0" y="0" width="2" height="1"></rect>
+    <rect x="0" y="2" width="2" height="1"></rect>
+    <rect x="0" y="4" width="2" height="1"></rect>
+    <rect x="0" y="6" width="2" height="1"></rect>
+    <rect x="0" y="8" width="2" height="1"></rect>
+    <rect x="0" y="10" width="2" height="1"></rect>
+  </svg>`, o = (e, t, n = "vf-stripes", r) => i`
+  <div
+    class="vf-title-bar"
+    part="title-bar"
+    @pointerdown=${e.onPointerDown}
+    @pointermove=${e.onPointerMove}
+    @pointerup=${e.onPointerUp}
+    @pointercancel=${e.onPointerUp}
+  >
+    <div class=${r ? `${n} vf-tile-grid` : n}>
+      ${r ?? (n === "vf-stripes" ? a : null)}
+    </div>
+    ${t}
+  </div>
+`, s = .05, c = 1 / 64, l = class {
+	constructor(e) {
+		this.host = e, this.applied = 0, this.written = "", this.frame = 0, e.addController(this);
+	}
+	hostConnected() {
+		typeof ResizeObserver < "u" && (this.resizes ??= new ResizeObserver(() => this.schedule())), this.schedule();
+	}
+	hostDisconnected() {
+		this.resizes?.disconnect(), this.frame && cancelAnimationFrame(this.frame), this.frame = 0;
+	}
+	hostUpdated() {
+		this.schedule();
+	}
+	schedule() {
+		this.frame || typeof window > "u" || (this.frame = requestAnimationFrame(() => {
+			this.frame = 0, this.center();
+		}));
+	}
+	center() {
+		let n = this.host.shadowRoot, i = n?.querySelector(".vf-title-bar"), a = n?.querySelector(".vf-title");
+		if (!i || !a) {
+			this.reset();
+			return;
+		}
+		this.resizes?.observe(i), this.resizes?.observe(a);
+		let o = a.getBoundingClientRect();
+		if (!o.width) {
+			this.reset();
+			return;
+		}
+		let l = this.host.style;
+		l.getPropertyValue("--vf-title-dx") !== this.written && (this.applied = 0, this.written = "");
+		let u = i.getBoundingClientRect(), d = o.left - u.left - this.applied, f = t(this.host), p = Math.round(o.width / f), m = Math.round(u.width / f), h = r(this.host), g = Math.ceil((m - p - h) / (2 * h)) * h * f, _ = Math.round((g - d) / c) * c, v = e() || 1;
+		Math.abs(_ - this.applied) * v < s || (this.applied = _, this.written = `${_}px`, l.setProperty("--vf-title-dx", this.written));
+	}
+	reset() {
+		this.written &&= (this.host.style.removeProperty("--vf-title-dx"), this.applied = 0, "");
+	}
+}, u = (e, t) => t ? `${e} ${t}` : e, d = (e, t) => i`
+  <button
+    type="button"
+    class="box close vf-focus"
+    part="close-box"
+    aria-label=${e}
+    @click=${t}
+  ></button>
+`, f = (e, t) => i`
+  <button
+    type="button"
+    class="box zoom vf-focus"
+    part="zoom-box"
+    aria-label=${e}
+    @click=${t}
+  ></button>
+`;
+//#endregion
+export { l as TitleCenterController, o as chromeTitleBar, d as closeBox, u as widgetLabel, f as zoomBox };

package/dist/components/vf-button-group.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+declare const VfButtonGroup_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * Lays out a set of `vf-button`s the way a System 7 dialog does: a tidy row
+ * (or column) with a consistent gap, every button sharing the width of the
+ * widest, and all their *faces* on one line.
+ *
+ * Two wrinkles make an ad-hoc flex row get this subtly wrong, and the group
+ * fixes both:
+ *
+ * - **Face alignment.** A `variant="default"` button reserves room for its
+ *   ring with a {@link RING_INSET}px margin, so in a row aligned by any edge
+ *   its *face* drifts from its neighbors' — you line up the ring, not the
+ *   button. The group zeroes that margin (via the inherited
+ *   `--vf-button-ring-margin`) and reserves the ring space itself as padding,
+ *   then centers the cross axis, so the faces — not the margin boxes — align.
+ * - **Shared width.** Classic dialogs sized grouped buttons to the widest, even
+ *   when a label was short ("OK" as wide as "Cancel"). The group does this with
+ *   pure CSS — equal `1fr` grid columns resolve to the widest button's
+ *   intrinsic width under the shrink-wrapped `inline-grid` — and stretches each
+ *   button's face to fill (via the inherited `--vf-button-flex`). No measuring.
+ *   `natural` opts out, letting each button size to its own label.
+ *
+ * The group is layout-neutral: it shrink-wraps to its buttons, so position it
+ * with the parent (e.g. `justify-self: end` for a bottom-right action row).
+ *
+ * @slot - The `vf-button`s to arrange.
+ * @cssprop --vf-button-group-gap - Gap between buttons (default 12px).
+ */
+export declare class VfButtonGroup extends VfButtonGroup_base {
+    static styles: import("lit").CSSResult[];
+    /** Stack the buttons vertically instead of in a row. */
+    vertical: boolean;
+    /**
+     * Let each button size to its own label instead of every button sharing the
+     * widest button's width. Off by default: grouped buttons are uniform width,
+     * matching classic System 7 dialogs.
+     */
+    natural: boolean;
+    private readonly scale;
+    private readonly internals;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-button-group': VfButtonGroup;
+    }
+}
+export {};

package/dist/components/vf-button-group.js

@@ -0,0 +1,68 @@
+import { vfElement as e } from "../define.js";
+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 "../pixel-frame.js";
+import { LitElement as a, css as o, html as s } from "lit";
+import { property as c } from "lit/decorators.js";
+//#region src/components/vf-button-group.ts
+var l = class extends r(a) {
+	static {
+		this.styles = [i, o`
+      /* Uniform row (the default): each button lands in its own auto column,
+         all sized 1fr so they equalize to the widest button's intrinsic width
+         under the shrink-wrapped inline-grid; the host of each stretches to
+         that column (default justify-items) and its face fills via
+         --vf-button-flex. align-items centers the cross axis so a shorter
+         child shares the row's baseline. */
+      :host {
+        /* Neutralize each default button's ring-reservation margin and reserve
+           the ring space here instead, so faces — not margin boxes — align and
+           equalize. The default gap (12px) clears the ring's ${4}px
+           reach on both sides, so rings never collide; a rethemed gap under
+           2 × ${4}px is the one value that puts two adjacent default
+           rings into each other, and is left to the consumer rather than
+           clamped, since it only arises for two defaults in one row. */
+        --vf-button-ring-margin: 0px;
+        --vf-button-flex: 1 1 auto;
+        display: inline-grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+        align-items: center;
+        gap: calc(var(--vf-scale, 1) * var(--vf-button-group-gap, 12px));
+        padding: calc(var(--vf-scale, 1) * ${4}px);
+      }
+      /* Vertical: stack in a single column sized to the widest button; each
+         button stretches to that width (justify-items defaults to stretch). */
+      :host([vertical]) {
+        grid-auto-flow: row;
+      }
+      /* Natural width: fall back to flex so columns don't equalize — each
+         button keeps its own content width. */
+      :host([natural]) {
+        display: inline-flex;
+        --vf-button-flex: 0 1 auto;
+      }
+      :host([natural][vertical]) {
+        flex-direction: column;
+        align-items: center;
+      }
+    `];
+	}
+	constructor() {
+		super(), this.vertical = !1, this.natural = !1, this.scale = new t(this), this.internals = this.attachInternals(), this.internals.role = "group";
+	}
+	render() {
+		return s`<slot></slot>`;
+	}
+};
+n([c({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "vertical", void 0), n([c({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "natural", void 0), l = n([e("vf-button-group")], l);
+//#endregion
+export { l as VfButtonGroup };

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

@@ -0,0 +1,169 @@
+import { VfShadowRoleControl } from '../form-control.js';
+declare const VfButton_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfShadowRoleControl;
+/**
+ * The classic System 7 push button ("OK", "Cancel", "Install", …).
+ *
+ * A rounded-rectangle control with a 1px black border and white face that
+ * inverts to white-on-black while pressed. `variant="default"` draws the
+ * classic bold double ring around the button, marking it as the default
+ * action of a dialog.
+ *
+ * The rounded corners are not `border-radius` arcs: frame, face, and ring are
+ * stepped `clip-path` silhouettes traced pixel-for-pixel from the kit's button
+ * reference sheet (see `src/pixel-frame.ts`), so every corner renders as the
+ * exact 1-bit staircase with no antialiasing.
+ *
+ * Keyboard focus — an affordance System 7 didn't have, drawn in its idiom
+ * anyway — is a 1px dashed rule under the label text (`vfFocusUnderline`)
+ * rather than a ring around the control.
+ *
+ * Form-associated: place it inside a `<form>` and `type="submit"` submits the
+ * form (contributing its `name`/`value` and any `form*` override to the
+ * submission), `type="reset"` resets it. Enter and Space activate it via the
+ * inner native button, and the submission runs at the end of the click's
+ * propagation, so `preventDefault()` on the button cancels it the way it
+ * cancels a native one.
+ *
+ * One thing the platform will not allow: `event.submitter` cannot BE a
+ * form-associated custom element. It is the transient native proxy this
+ * button submits through — so read the submitting button as
+ * `event.submitter.closest('vf-button')`, and its identity from
+ * `submitter.name`/`.value` rather than by comparing element references.
+ *
+ * A host-level `aria-label` / `aria-labelledby` names the inner button, and
+ * `description` (or a host-level `aria-describedby`) describes it — the same
+ * bridge the fields use, since the role lives on a shadow-internal node the
+ * platform can't deliver those to. A `<label for>` deliberately does not
+ * name it: a `<button>` is not a labelable element.
+ *
+ * @slot - The button label.
+ * @csspart button - The inner native `<button>` element.
+ * @cssprop [--vf-button-height=20px] - `vf-button` face (the default ring's
+ *   inner box is 80×20)
+ */
+export declare class VfButton extends VfButton_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * When set to `'default'`, draws the classic double ring that marks the
+     * default button (activated by Return in real System 7 dialogs).
+     */
+    variant?: 'default';
+    /**
+     * Activation behavior, mirroring native `<button type>`:
+     * `'submit'` submits the associated form, `'reset'` resets it and
+     * `'button'` (the default) does nothing beyond the `click` event.
+     *
+     * Two deliberate departures from `<button>`, both pointing the same way — a
+     * `vf-button` never submits unless it was asked to. HTML's *missing*-value
+     * default is `submit`; here it is `button`, because a custom element that
+     * silently submitted the form it happens to sit in is the wrong surprise.
+     * The *invalid*-value default follows the missing one rather than HTML's
+     * (which is also `submit`), so a misspelling does nothing instead of
+     * submitting.
+     */
+    type: 'button' | 'submit' | 'reset';
+    /** Form field name; submitted as `name=value` when `type="submit"`. */
+    name: string;
+    /** Value submitted under `name` when `type="submit"`. */
+    value: string;
+    /**
+     * The submission overrides native `<button>` carries, honored on
+     * `type="submit"` only, exactly as HTML honors them: each is handed to the
+     * native proxy {@link activate} submits through, so the *behavior* is the
+     * platform's rather than an emulation of it.
+     *
+     * One difference from the native IDL, in the getters only: `formAction`
+     * returns the string you set, where `HTMLButtonElement.formAction` returns
+     * it resolved against the document's base URL. The submission itself
+     * resolves normally — it is the proxy's `formaction` doing the work.
+     */
+    formAction: string;
+    /** See {@link formAction}. Overrides the form's `enctype`. */
+    formEnctype: string;
+    /** See {@link formAction}. Overrides the form's `method`. */
+    formMethod: string;
+    /**
+     * See {@link formAction}. Skips the form's constraint validation, so a
+     * "Save Draft" button submits past a failing `required`.
+     */
+    formNoValidate: boolean;
+    /** See {@link formAction}. Overrides the form's `target`. */
+    formTarget: string;
+    /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    private readonly gridSnap;
+    private buttonEl;
+    /**
+     * {@link type}, resolved the way HTML resolves an enumerated attribute:
+     * ASCII case-insensitively, with anything unrecognized falling to the
+     * default.
+     *
+     * Comparing the raw property is the bug this replaces. `type="SUBMIT"` — a
+     * perfectly valid spelling on a native button — passed the `!== 'button'`
+     * guard and then failed the `=== 'submit'` one, so it submitted the form
+     * with its `name`/`value` silently dropped: the action taken, the payload
+     * lost, and in that order.
+     */
+    private get resolvedType();
+    /**
+     * Forwards a synthetic activation to the real `<button>` in the shadow
+     * root. A `click()` on the host dispatches at the host and propagates *up*,
+     * never down to the inner button's listener — so the native control, the
+     * actual activation surface, is handed the call instead. Its click then
+     * bubbles back out composed, exactly as a pointer's does. This is what the
+     * fields' implicit submission (Enter) activates as the form's default
+     * button; a disabled button swallows it natively, as it should.
+     *
+     * Before the first render there is no inner button to forward to. A native
+     * `click()` always fires, so rather than doing nothing this falls back to
+     * dispatching at the host — no activation behavior to run yet, but the
+     * event a caller asked for.
+     */
+    click(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The click that may become a submission or a reset.
+     *
+     * This listener sits on the inner `<button>` — the *first* stop on the
+     * click's path, not the last — so acting here would beat every listener a
+     * consumer can write. {@link deferActivation} moves the action to the end of
+     * the path instead, which is where HTML runs a native button's activation
+     * behavior and why `preventDefault()` on the button, or anywhere above it,
+     * cancels the submission. Same helper the toggles and the menus use.
+     *
+     * The two guards are this component's own: `#activating` keeps the submit
+     * proxy's own synthesised click from re-entering, and a `type="button"`
+     * button has no activation behavior to defer in the first place.
+     */
+    private handleClick;
+    /**
+     * The activation behavior HTML gives a `<button type="submit"|"reset">`,
+     * performed through a transient native proxy.
+     *
+     * A form-associated custom element cannot be a form's submitter: the
+     * platform rejects one outright (`requestSubmit(vfButton)` throws a
+     * TypeError, "not a submit button"), and a bare `requestSubmit()` submits
+     * with `event.submitter === null` and none of this button's name/value.
+     *
+     * The proxy is a child of THIS element carrying a `slot` no shadow root
+     * offers, which is three things at once. It is a light-DOM descendant of
+     * the host, so `event.submitter.closest('vf-button')` finds the button that
+     * submitted — as close to submitter identity as the platform permits, and
+     * the reason it lives here rather than at the end of the form. Being
+     * unslotted it is never rendered, never measured and never in the
+     * accessibility tree, so it needs no clipping to hide. And being off the
+     * flattened tree, its own click cannot travel back up through the shadow
+     * `<button>` this component's own handler is bound to — which, slotted,
+     * would have been an infinite recursion rather than a stray event.
+     */
+    private activate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-button': VfButton;
+    }
+}
+export {};