vintage-frames 0.14.0 → 0.14.1

package/dist/index.js

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

package/dist/pattern-fill.d.ts

@@ -47,14 +47,17 @@ export declare class PatternFillController extends RepeatTileController {
  * a pattern is resolved (the component's template knows).
  *
  * Painting: the tile the controller wrote, repeated from the padding box's
- * corner at {@link vfRepeatTileSize}, nearest-neighbor. The paper and the
- * pixelation ride the `vf-patterned` state so an unpatterned box paints
- * exactly nothing and inherits nothing new. `image-rendering` inherits, so
- * the slot hands `auto` back to slotted content: a consumer's own `<img>`
- * renders as it would anywhere else, and a kit element that wants
- * nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page that set
- * `pixelated` on an ancestor gets `auto` inside a patterned box — its own
- * declaration on the child still wins, as everywhere.
+ * corner at {@link vfRepeatTileSize}, nearest-neighbor. All of it rides the
+ * `vf-patterned` state, the image included, so an unpatterned box paints
+ * exactly nothing. The tile's custom property inherits like any other: a
+ * box that read it unpatterned would paint the tile of the nearest
+ * patterned box around it — a desktop's dither inside a window.
+ * `image-rendering` inherits too, so the slot hands `auto` back to slotted
+ * content: a consumer's own `<img>` renders as it would anywhere else, and a
+ * kit element that wants nearest-neighbor (`vf-img`, a `vf-icon`) says so
+ * itself. A page that set `pixelated` on an ancestor gets `auto` inside a
+ * patterned box — its own declaration on the child still wins, as
+ * everywhere.
  *
  * Forced colors: the image goes, the paper is the remapped Canvas — the
  * desktop's posture, a backdrop being decoration.

package/dist/pattern-fill.js

@@ -17,12 +17,10 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
 		});
 	}
 }, s = r`
-  .vf-pattern-fill {
+  .vf-pattern-fill.vf-patterned {
     background-image: var(--_vf-pattern-image, none);
     ${t}
     background-repeat: repeat;
-  }
-  .vf-pattern-fill.vf-patterned {
     background-color: var(--vf-white, #fff);
     image-rendering: pixelated;
   }
@@ -30,7 +28,7 @@ var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
     image-rendering: auto;
   }
   @media (forced-colors: active) {
-    .vf-pattern-fill {
+    .vf-pattern-fill.vf-patterned {
       background-image: none;
     }
   }

package/dist/position.d.ts

@@ -97,14 +97,17 @@ type PositionedHost = HTMLElement & {
  * re-asserts a coordinate and costs nothing.
  *
  * **Every write it makes is announced** as `vf-placement-change` (bubbles,
- * `composed: false`, detail `{ left, top }` — nulls on a return to flow). It
- * is an internal coordination event on the terms of the menu handshakes:
- * parent and child share one light tree, and a kit protocol must not leak out
- * of a consumer's shadow boundary. `vf-scroll-area` listens for it and
+ * `composed: false`, detail `{ left, top }` — nulls on a return to flow), so
+ * a page hears every move the one way: a title-bar drag's steps and its
+ * release (an outline drag's single write), an arrow nudge, a drop, a walk's
+ * landing, an `origin` re-measure, and its own property writes. Non-composed,
+ * because parent and child share one light tree and the event has no reason
+ * to leave a consumer's shadow root. It is dispatched from the host's update,
+ * with the new pair already on its style: a handler that writes the pair
+ * again takes effect on the next update. `vf-scroll-area` listens for it and
  * re-measures, because a placed child moved through `top`/`left` changes the
  * scroll range with no box changing anywhere a ResizeObserver can see — the
- * plane's box is never grown by an absolutely positioned child. One funnel
- * covers a drop, an arrow nudge and a page's own `icon.left = …` alike.
+ * plane's box is never grown by an absolutely positioned child.
  *
  * **`origin`** names which point of the host's own box the pair places —
  * nine keywords, vertical then horizontal (`top center`, `bottom right`,
@@ -169,11 +172,26 @@ export declare function placementIn(anchor: Element, clientX: number, clientY: n
     left: number;
     top: number;
 };
-/** The box a gesture is clamped into, in system px — see {@link PlacementClamp}. */
+/**
+ * The box a gesture is clamped into, in system px — see {@link PlacementClamp}.
+ * `width` and `height` are the positioning parent's box; `top` is the least
+ * `top` a placement may take there: 0, or on a desktop's screen the bottom of
+ * its menu bar (`vf-desktop.workArea`).
+ */
 export type PlacementBounds = {
     width: number;
     height: number;
+    top: number;
 };
+/**
+ * The detail of `vf-placement-bounds-request`: the handshake a moved host
+ * makes when its gesture measures the box it is clamped into. A
+ * `vf-desktop` on its light-DOM path fills `bounds` for a host placed on its
+ * screen. Internal to the kit's placement.
+ */
+export interface PlacementBoundsRequest {
+    bounds: PlacementBounds | null;
+}
 /**
  * A moved host's own containment rule, in system px, against the box measured
  * once at the start of the gesture.

package/dist/position.js

@@ -193,10 +193,13 @@ var _ = class {
 		};
 	}
 	#i() {
-		let e = this.#e, t = e.offsetParent, n = t && t.clientWidth > 0 && t.clientHeight > 0 ? t : null;
+		let t = this.#e, n = { bounds: null };
+		if (e(t, "vf-placement-bounds-request", n, { composed: !1 }), n.bounds) return n.bounds;
+		let r = t.offsetParent, a = r && r.clientWidth > 0 && r.clientHeight > 0 ? r : null;
 		return {
-			width: i(n?.clientWidth ?? window.innerWidth, e),
-			height: i(n?.clientHeight ?? window.innerHeight, e)
+			width: i(a?.clientWidth ?? window.innerWidth, t),
+			height: i(a?.clientHeight ?? window.innerHeight, t),
+			top: 0
 		};
 	}
 }, v = /* @__PURE__ */ new Set([

package/dist/shell/alert.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The shell's alert: a plain-framed `vf-dialog` with the site's caution art,
+ * a message and a row of buttons, sized to the message — composed from kit
+ * elements, as every alert in the kit is.
+ *
+ * The layout follows the plain frame's body, its width and height less 10:
+ * the art and the message 16 in from the body's top-left, the buttons'
+ * bottom-right corner 16 in from the body's.
+ */
+/** One button of an alert. */
+export interface AlertButton {
+    label: string;
+    /** What the alert resolves to when it is pressed. */
+    value: string;
+    /** The default button, which Return presses. */
+    default?: boolean;
+}
+export interface AlertOptions {
+    /** Default: OK, the default button. */
+    buttons?: AlertButton[];
+    /** The dialog's width, system px. Default 400. */
+    width?: number;
+    /** The 32×32 art beside the message; default the shell's caution art. */
+    art?: string | null;
+    /** The dialog's accessible name. Default "Alert". */
+    label?: string;
+}
+/**
+ * Show an alert inside `host` (the desktop), and resolve the value of the
+ * button pressed — or null when it closed any other way, Escape say.
+ */
+export declare function showAlert(host: Element, message: string, options?: AlertOptions): Promise<string | null>;

package/dist/shell/alert.js

@@ -0,0 +1,44 @@
+import { effectiveScale as e } from "../scale.js";
+import "../index.js";
+//#region src/shell/alert.ts
+var t = 10, n = 16, r = 32, i = 28;
+async function a(a, o, s = {}) {
+	let { buttons: c = [{
+		label: "OK",
+		value: "ok",
+		default: !0
+	}], width: l = 400, art: u = null, label: d = "Alert" } = s, f = document.createElement("vf-dialog");
+	f.frame = "plain", f.label = d, f.width = l, f.height = 120;
+	let p = u ? 64 : n;
+	if (u) {
+		let e = document.createElement("vf-img");
+		e.width = r, e.height = r, e.left = n, e.top = n;
+		let t = document.createElement("img");
+		t.src = u, t.alt = "", e.append(t), f.append(e);
+	}
+	let m = document.createElement("vf-paragraph");
+	m.face = "display", m.width = l - t - p - n, m.left = p, m.top = n, m.textContent = o, f.append(m);
+	let h = document.createElement("vf-button-group");
+	h.origin = "bottom right";
+	let g = c.map((e) => {
+		let t = document.createElement("vf-button");
+		return t.textContent = e.label, t.dataset.value = e.value, e.default && (t.variant = "default"), t;
+	});
+	h.append(...g), f.append(h), a.append(f), await Promise.all([
+		f.updateComplete,
+		m.updateComplete,
+		h.updateComplete
+	]);
+	let _ = Math.ceil(m.getBoundingClientRect().height / e(m)), v = Math.max(u ? 48 : 0, n + _) + n + i + n;
+	return f.height = v + t, h.left = l - t - n, h.top = v - n, new Promise((e) => {
+		let t = null;
+		for (let e of g) e.addEventListener("click", () => {
+			t = e.dataset.value ?? null, f.close();
+		});
+		f.addEventListener("vf-close", () => {
+			f.remove(), e(t);
+		}, { once: !0 }), f.show();
+	});
+}
+//#endregion
+export { a as showAlert };

package/dist/shell/catalog.d.ts

@@ -0,0 +1,168 @@
+/**
+ * The catalog: what is where. Pure and DOM-free — it runs under Node — and
+ * the source of truth for what a folder holds; the Finder renders it.
+ *
+ * - An item is a small record: a name, a kind, the container it sits in
+ *   (`parent`, a folder's id, or null for the desktop) and, once placed, its
+ *   position there in whole system px. A kind keeps small data of its own in
+ *   `data`; a large payload stays in its application's own store, keyed by
+ *   the item's id, and the kind's `copy` and `onRemove` keep that store in
+ *   step.
+ * - Volumes are containers no one made: the Trash and a startup disk, each
+ *   if the page wants one. They lead the listing, keep their names, and are
+ *   never renamed, moved, copied or removed; nothing is made in the Trash.
+ *   Deleting is a move into the Trash, and only Empty Trash removes. A
+ *   volume's position is stored on a record of its own id.
+ * - A folder never goes into itself or a folder inside it. A parent with no
+ *   record reads as the desktop.
+ * - An item whose kind no application registers is left out of the listing
+ *   and kept in storage.
+ * - Storage is three calls over item records (list, put, remove). The
+ *   catalog holds every record in memory, writes through to storage, and
+ *   lists from memory; a position change writes after a short delay, since
+ *   the resize rule moves every desktop icon on each resize event.
+ * - A seed runs once per storage: a persistent one stores a marker record
+ *   (`#seeded`), so a site that starts in memory and switches its storage
+ *   seeds once there.
+ */
+import type { Point } from './geometry.js';
+/** The Trash's id. */
+export declare const TRASH = "trash";
+/** The startup disk's id. */
+export declare const DISK = "disk";
+/** A folder's kind. */
+export declare const FOLDER = "folder";
+/** The name a new folder takes, counted up where it is taken. */
+export declare const UNTITLED_FOLDER = "untitled folder";
+/** One item of the catalog. */
+export interface Item {
+    id: string;
+    name: string;
+    /** `folder`, a volume's (`trash`, `disk`), or a kind an application registers. */
+    kind: string;
+    /** A folder's id, a volume's, or null for the desktop. */
+    parent: string | null;
+    /** Its place in its container, whole system px; unset, the next free cell. */
+    left?: number;
+    top?: number;
+    createdAt: number;
+    modifiedAt: number;
+    /** The kind's own, small and serializable. */
+    data?: unknown;
+}
+/** The listing: volumes first, then every listed item by creation. */
+export interface CatalogState {
+    /** Whether storage answers. Without it the catalog lists the volumes alone. */
+    available: boolean;
+    items: readonly Item[];
+}
+/** Where item records live. Any object with these three calls will do. */
+export interface CatalogStorage {
+    list(): Promise<Item[]>;
+    put(item: Item): Promise<unknown>;
+    remove(id: string): Promise<unknown>;
+}
+/** What a kind tells the catalog about its items' payloads. */
+export interface KindHooks {
+    /** Bytes, for Empty Trash's alert. */
+    size?(item: Item): number;
+    /** Copy `from`'s payload to `to`, a fresh copy of it. */
+    copy?(from: Item, to: Item): void | Promise<void>;
+    /** Empty Trash removed the item: drop its payload. */
+    onRemove?(item: Item): void | Promise<void>;
+}
+/** The volumes a page wants, by name; `false` or unset is none (the Trash defaults on). */
+export interface Volumes {
+    trash?: string | false;
+    disk?: string | false;
+}
+export interface CatalogOptions {
+    storage: CatalogStorage | null;
+    volumes?: Volumes;
+    /** Whether an application registers `kind`. Folders are always listed. Default: every kind. */
+    listed?(kind: string): boolean;
+    /** A kind's payload hooks. */
+    hooks?(kind: string): KindHooks | undefined;
+    now?(): number;
+    newId?(): string;
+    /** How long a position change waits before it is written, ms. Default 400. */
+    placeDelay?: number;
+}
+/** What an operation makes: the new item, or null where it was refused. */
+export interface NewItem {
+    name?: string;
+    kind?: string;
+    parent?: string | null;
+    left?: number;
+    top?: number;
+    data?: unknown;
+    /** The creation time, for a batch made in order. Default now. */
+    at?: number;
+}
+/** A catalog dumped or restored: its item records. */
+export interface CatalogArchive {
+    items: Item[];
+}
+/** Whether `kind` holds other items: a folder or a volume. */
+export declare const isContainerKind: (kind: string) => boolean;
+/** Whether `id` names a volume. */
+export declare const isVolume: (id: string | null | undefined) => boolean;
+/** The item with `id`, or null. */
+export declare function itemOf(state: CatalogState, id: string | null | undefined): Item | null;
+/** The container `parent` resolves to: that container while it is listed, else the desktop (null). */
+export declare function containerOf(state: CatalogState, parent: string | null | undefined): string | null;
+/** The items directly in a container (null: the desktop), in listing order. */
+export declare function childrenOf(state: CatalogState, parent: string | null): Item[];
+/** How many items a container holds directly. */
+export declare function itemCount(state: CatalogState, parent: string | null): number;
+/**
+ * Whether `ancestor` is on `id`'s chain of containers. An item is not inside
+ * itself; a looping chain stops at its first repeat.
+ */
+export declare function isInside(state: CatalogState, id: string, ancestor: string): boolean;
+/**
+ * Container `id` and the containers around it, innermost first. The desktop
+ * ends the chain, and so does an id with no container; a loop stops at its
+ * first repeat.
+ */
+export declare function enclosingFolders(state: CatalogState, id: string | null | undefined): string[];
+/** Whether `id` is the Trash or anything inside it. */
+export declare function isTrashed(state: CatalogState, id: string | null | undefined): boolean;
+/** Everything under a container, each container before what it holds; a loop is walked once. */
+export declare function descendantsOf(state: CatalogState, parent: string | null): Item[];
+/** The first free folder name in a container: "untitled folder", "untitled folder 2", … */
+export declare function nextFolderName(state: CatalogState, parent: string | null): string;
+/**
+ * The name for a copy in a container: `name` itself while no item of its
+ * kind there has it, else its base (less " copy" and " copy N") plus " copy",
+ * then " copy 2", " copy 3", …
+ */
+export declare function copyName(state: CatalogState, parent: string | null, name: string, kind: string): string;
+/** The catalog's operations, over its listing. */
+export interface Catalog {
+    get(): CatalogState;
+    subscribe(fn: (state: CatalogState) => void): () => void;
+    item(id: string | null | undefined): Item | null;
+    refresh(): Promise<void>;
+    seed(fn: (catalog: Catalog) => void | Promise<void>): Promise<boolean>;
+    create(input?: NewItem): Promise<Item | null>;
+    rename(id: string, name: string): Promise<boolean>;
+    update(id: string, data: unknown): Promise<boolean>;
+    move(ids: readonly string[], parent: string | null, landings?: ReadonlyMap<string, Point | null>): Promise<string[]>;
+    place(positions: ReadonlyMap<string, Point>): void;
+    flush(): Promise<void>;
+    copy(ids: readonly string[], parent: string | null): Promise<Item[]>;
+    emptyTrash(): Promise<Item[]>;
+    trashSize(): number;
+    dump(): CatalogArchive;
+    clear(): Promise<void>;
+    import(archive: CatalogArchive, options?: {
+        mode?: 'merge' | 'replace';
+    }): Promise<number>;
+    dispose(): Promise<void>;
+}
+export declare function createCatalog(options: CatalogOptions): Catalog;
+/** Storage that forgets everything on a reload. Its map is exposed for tests. */
+export declare function memoryStorage(initial?: readonly Item[]): CatalogStorage & {
+    records: Map<string, Item>;
+};