vintage-frames 0.13.0 → 0.14.1

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

@@ -3,11 +3,15 @@
  * with no blur and no spread, System 7's only depth cue. The offset is
  * tokenized via `--vf-shadow-offset` and scales with `--vf-scale`.
  *
- * Compose it into any raised surface. Every raised surface in the kit does:
- * {@link vfPanel} (menus, popups) and {@link vfChromeFrame} (window and dialog
- * frames). One declaration, so the kit can't grow two shadows.
- *
- * Kept in its own module because it is the one recipe consumed on its own:
- * vf-swatch composes the shadow without either surface class.
+ * The shadow value, for a list: a stroked surface passes it to
+ * `vfStrokeDecls({ shadows: vfHardShadow })`, which paints it after the
+ * stroke. Every raised surface in the kit does — {@link vfPanel} (menus,
+ * popups) and {@link vfChromeFrame} (window frames). One value, so the kit
+ * can't grow two shadows.
+ */
+export declare const vfHardShadow: import("lit").CSSResult;
+/**
+ * {@link vfHardShadow} as the whole `box-shadow` declaration, for a box that
+ * casts the shadow and draws no stroke.
  */
 export declare const vfHardShadowDecls: import("lit").CSSResult;

package/dist/styles/recipes/shadow.js

@@ -1,5 +1,7 @@
 import { unsafeCSS as e } from "lit";
 //#region src/styles/recipes/shadow.ts
-var t = e("\n  box-shadow: calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px))\n    calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px)) 0 0\n    var(--vf-black, #000);\n");
+var t = e("calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px))\n    calc(var(--vf-scale, 1) * var(--vf-shadow-offset, 2px)) 0 0\n    var(--vf-black, #000)"), n = e(`
+  box-shadow: ${t};
+`);
 //#endregion
-export { t as vfHardShadowDecls };
+export { t as vfHardShadow, n as vfHardShadowDecls };

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

@@ -0,0 +1,85 @@
+import { type CSSResult } from 'lit';
+import type { RuleEdge } from './rule.js';
+/** One to four values in shorthand order, as top/right/bottom/left. */
+type Sides<T> = T | readonly T[];
+/** The padding under a stroked edge: the element's own plus the stroke's. */
+export declare function strokePadding(own: number | string, width: number): string;
+/** The border a stroked edge becomes under forced colors; 0 wide otherwise. */
+export declare function strokeBorder(width: number): string;
+/** The inset shadow that paints one edge's stroke. */
+export declare function strokeEdgeShadow(edge: RuleEdge, width: number): string;
+/** The forced-colors switch every stroked element carries. */
+export declare const STROKE_FORCED_COLORS = "@media (forced-colors: active) {\n    --_vf-stroke-pad: 0;\n  }";
+/**
+ * The inset shadow of a stroke `width` system px wide on all four edges — the
+ * value to restate when only the painted width changes, as vf-checkbox's
+ * press does. Reads the ink and forced-colors switch the element's
+ * {@link vfStrokeDecls} declares.
+ */
+export declare function vfStrokeShadow(width?: number): CSSResult;
+/** The options of {@link vfStrokeDecls}. */
+export interface VfStrokeOptions {
+    /** The stroked edges. Default all four. */
+    edges?: readonly RuleEdge[];
+    /**
+     * The stroke's width in whole system px, one to four values in shorthand
+     * order. Default 1.
+     */
+    width?: Sides<number>;
+    /**
+     * The element's own padding, in system px, one to four values in shorthand
+     * order; each stroked edge adds its stroke. A value is a number or a
+     * system-px CSS length (`'var(--vf-select-gutter, 16px)'`). Omitted, the
+     * declarations set padding on the stroked edges alone, to the stroke.
+     */
+    padding?: Sides<number | string>;
+    /**
+     * More shadows, painted with the stroke: the hard drop shadow
+     * ({@link vfHardShadow}), a white ring. The stroke comes first in the list.
+     */
+    shadows?: string | CSSResult;
+    /** The stroke's color. Default `var(--vf-black, #000)`. */
+    ink?: string;
+}
+/**
+ * A 1-bit stroke that isn't a line width. The declarations for a box whose
+ * edges carry a black line of whole system px — every frame, well, rule and
+ * box in the kit — for interpolating into the box's rule:
+ * `.card { ${vfStrokeDecls({ padding: [4, 8] })} }`.
+ *
+ * Safari rounds a border width to device px before it applies page zoom, so a
+ * `border` of `calc(var(--vf-scale, 1) * 1px)` draws thinner than the art
+ * around it at most zoom levels, and moves everything inside the box off the
+ * device grid. Padding and box-shadow lengths are not rounded that way. So the
+ * stroke's space is padding on each stroked edge, added to the element's own,
+ * and the black is an inset `box-shadow`, with `shadows` after it in the same
+ * list. Both land on whole device px at every zoom.
+ *
+ * What changes from a border:
+ * - The declarations own `padding` on the stroked edges (on all four, when
+ *   `padding` is passed) and `box-shadow`. Pass the element's own padding and
+ *   shadows here; a later `padding` or `box-shadow` on the element replaces
+ *   the stroke's.
+ * - A child placed against the box measures from its outer edge. Offset it by
+ *   the stroke with {@link vfStrokeInset}.
+ * - An `overflow: hidden` box clips at its outer edge, so its content can
+ *   paint over the stroke. Clip on an inner element instead.
+ * - Forced colors paints no `box-shadow`, so there each stroke is a border
+ *   again and the padding is the element's own: the same box a border draws.
+ *
+ * The color goes through a private property the declarations set, so pass a
+ * `var()` as `ink` to change it from a state rule without restating the
+ * shadow list.
+ */
+export declare function vfStrokeDecls(options?: VfStrokeOptions): CSSResult;
+/**
+ * A length `base` system px in from a stroke's inner edge, measured from the
+ * box's outer edge, on an edge carrying `stroke` system px of it (see
+ * {@link vfStrokeDecls}): the inset for a child placed against a stroked box
+ * (`right: ${vfStrokeInset(0)}` is flush inside a 1px frame), or a padding
+ * that restates the stroke's (`padding: ${vfStrokeInset(0)} ${vfStrokeInset(6)}`).
+ * `base` is a number or a system-px CSS length. Under forced colors, where
+ * the stroke is a border, it is `base`.
+ */
+export declare function vfStrokeInset(base: number | string, stroke?: number): CSSResult;
+export {};

package/dist/styles/recipes/stroke.js

@@ -0,0 +1,53 @@
+import { unsafeCSS as e } from "lit";
+//#region src/styles/recipes/stroke.ts
+var t = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], n = "var(--_vf-stroke-pad, 1)", r = "var(--_vf-stroke-ink)";
+function i(e) {
+	let t = Array.isArray(e) ? e : [e], n = t[0], r = t[1] ?? n;
+	return [
+		n,
+		r,
+		t[2] ?? n,
+		t[3] ?? r
+	];
+}
+var a = (e) => typeof e == "number" ? `${e}px` : e, o = (e) => `calc(var(--vf-scale, 1) * ${e}px * ${n})`;
+function s(e, t) {
+	return e === 0 ? o(t) : `calc(var(--vf-scale, 1) * (${a(e)} + ${t}px * ${n}))`;
+}
+function c(e) {
+	return `calc(var(--vf-scale, 1) * ${e}px * (1 - ${n})) solid ${r}`;
+}
+function l(e, t) {
+	let i = (e) => `calc(var(--vf-scale, 1) * ${e * t}px * ${n})`;
+	switch (e) {
+		case "top": return `inset 0 ${i(1)} 0 0 ${r}`;
+		case "right": return `inset ${i(-1)} 0 0 0 ${r}`;
+		case "bottom": return `inset 0 ${i(-1)} 0 0 ${r}`;
+		case "left": return `inset ${i(1)} 0 0 0 ${r}`;
+	}
+}
+var u = "@media (forced-colors: active) {\n    --_vf-stroke-pad: 0;\n  }";
+function d(t = 1) {
+	return e(`inset 0 0 0 ${o(t)} ${r}`);
+}
+function f(n = {}) {
+	let r = new Set(n.edges ?? t), o = i(n.width ?? 1), f = i(n.padding ?? 0), p = t.map((e, t) => r.has(e) ? o[t] : 0), m = p.every((e) => e > 0 && e === p[0]), h = [`--_vf-stroke-ink: ${n.ink ?? "var(--vf-black, #000)"};`], g = [];
+	return t.forEach((e, t) => {
+		let r = p[t];
+		if (!r) {
+			n.padding !== void 0 && h.push(`padding-${e}: calc(var(--vf-scale, 1) * ${a(f[t])});`);
+			return;
+		}
+		h.push(`padding-${e}: ${s(f[t], r)};`), h.push(`border-${e}: ${c(r)};`), m || g.push(l(e, r));
+	}), m && g.push(String(d(p[0]))), n.shadows && g.push(String(n.shadows)), h.push(`box-shadow: ${g.length ? g.join(", ") : "none"};`), h.push(u), e(h.join("\n  "));
+}
+function p(t, n = 1) {
+	return e(s(t, n));
+}
+//#endregion
+export { u as STROKE_FORCED_COLORS, c as strokeBorder, l as strokeEdgeShadow, s as strokePadding, f as vfStrokeDecls, p as vfStrokeInset, d as vfStrokeShadow };

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

@@ -1,11 +1,11 @@
 /**
- * Panel recipe for menus and popups: white face, 1px black border, hard
+ * Panel recipe for menus and popups: white face, 1px black frame, hard
  * offset shadow.
  */
 export declare const vfPanel: import("lit").CSSResult;
 /**
  * Chrome-frame recipe for the desktop window (vf-window): the same white
- * face, 1px black border and hard offset shadow as {@link vfPanel}. Apply
+ * face, 1px black frame and hard offset shadow as {@link vfPanel}. Apply
  * `.vf-frame` to the outer frame element.
  *
  * Skin only — the component adds its own layout (a full-size flex column: the
@@ -14,7 +14,7 @@ export declare const vfPanel: import("lit").CSSResult;
  */
 export declare const vfChromeFrame: import("lit").CSSResult;
 /**
- * The classic modal-dialog (dBoxProc) frame: 1px outer border, 2px white gap,
+ * The classic modal-dialog (dBoxProc) frame: 1px outer rule, 2px white gap,
  * 2px inner band — and NO drop shadow, per the `Windows/modal dialog.png`
  * reference. System 7's alert box drew the
  * *mirror* trace (2px outer, 2px gap, 1px inner rule, with the hard shadow) —
@@ -30,10 +30,14 @@ export declare const vfChromeFrame: import("lit").CSSResult;
  * six stripes / 3 white rows, the title patch's 7px margins) sits directly
  * under the outer rule, inset 2px at either end so its stripes keep the same
  * 2px of white from the outer rule that the inner band keeps; the bar's own
- * 1px rule plus the inner box's 1px top border make the 2px band its floor,
+ * 1px rule plus the inner box's 1px top stroke make the 2px band its floor,
  * which then continues down both sides and along the bottom as the band
  * around the body. No shadow anywhere. Put the `.vf-title-bar` between the
  * two elements, as the first child of `.vf-modal-frame`, and the three rules
  * below do the rest.
+ *
+ * Both lines are strokes ({@link vfStrokeDecls}): padding holds their space
+ * and an inset shadow paints them, so the recipe owns both elements' padding
+ * and box-shadow.
  */
 export declare const vfModalFrame: import("lit").CSSResult;

package/dist/styles/recipes/surface.js

@@ -1,42 +1,48 @@
-import { vfHardShadowDecls as e } from "./shadow.js";
-import { css as t, unsafeCSS as n } from "lit";
+import { vfHardShadow as e } from "./shadow.js";
+import { vfStrokeDecls as t, vfStrokeInset as n } from "./stroke.js";
+import { css as r, unsafeCSS as i } from "lit";
 //#region src/styles/recipes/surface.ts
-var r = n(`
+var a = i(`
   background: var(--vf-white, #fff);
-  border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
-  ${e}
-`), i = t`
+  ${t({ shadows: e })}
+`), o = r`
   .vf-panel {
-    ${r}
+    ${a}
   }
-`, a = t`
+`, s = r`
   .vf-frame {
-    ${r}
+    ${a}
   }
-`, o = t`
+`, c = r`
   .vf-modal-frame {
     background: var(--vf-white, #fff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${t()}
   }
   .vf-modal-frame-inner {
     margin: calc(var(--vf-scale, 1) * 2px);
-    border: calc(var(--vf-scale, 1) * 2px) solid var(--vf-black, #000);
+    ${t({ width: 2 })}
   }
   /* The bar set into the frame: 2px in from the outer rule at either end, its
      stripes flush to the bar's own edge (vfStripes' 1px side inset is the
-     window frame's buffer — here the frame's gap is that buffer). */
+     window frame's buffer — here the frame's gap is that buffer). The bottom
+     inset counts the bar's rule, which is padding (vfTitleBar). */
   .vf-modal-frame > .vf-title-bar {
     margin: 0 calc(var(--vf-scale, 1) * 2px);
   }
   .vf-modal-frame > .vf-title-bar .vf-stripes {
-    inset: calc(var(--vf-scale, 1) * 3px) 0;
+    inset: calc(var(--vf-scale, 1) * 3px) 0 ${n(3)};
   }
-  /* Under a bar, the inner box's top border is the second row of the band —
+  /* Under a bar, the inner box's top stroke is the second row of the band —
      the bar's 1px rule is the first — and there is no gap row between. */
   .vf-modal-frame > .vf-title-bar + .vf-modal-frame-inner {
     margin-top: 0;
-    border-top-width: calc(var(--vf-scale, 1) * 1px);
+    ${t({ width: [
+	1,
+	2,
+	2,
+	2
+] })}
   }
 `;
 //#endregion
-export { a as vfChromeFrame, o as vfModalFrame, i as vfPanel };
+export { s as vfChromeFrame, c as vfModalFrame, o as vfPanel };

package/dist/styles/recipes/title-bar.d.ts

@@ -32,6 +32,9 @@
  * drag handle, vf-window's only when `[movable]` — suppressing touch scrolling
  * on a bar that can't be dragged would be a real behavior change, so each
  * component keeps that one declaration under its own selector.
+ *
+ * The rule is a stroke ({@link vfStrokeDecls}): the bottom row is padding, so
+ * the texture layers placed inside the bar count it in their bottom insets.
  */
 export declare const vfTitleBar: import("lit").CSSResult;
 /**
@@ -45,5 +48,9 @@ export declare const vfTitleBar: import("lit").CSSResult;
  * Geometry is the standard 18px bar's; vf-window's utility variant overrides
  * the sizes under its own selector. Host-state rules (hiding widgets on an
  * inactive window) stay with the component — a dialog has no inactive state.
+ *
+ * Each box's line is a stroke ({@link vfStrokeDecls}), its white patch ring
+ * the next shadow in the same list. State rules recolor the line through
+ * `--_vf-stroke-ink`.
  */
 export declare const vfWindowWidgets: import("lit").CSSResult;

package/dist/styles/recipes/title-bar.js

@@ -1,20 +1,27 @@
 import { vfDisplayDecls as e } from "./display-face.js";
-import { css as t } from "lit";
+import { vfStrokeDecls as t, vfStrokeInset as n } from "./stroke.js";
+import { css as r } from "lit";
 //#region src/styles/recipes/title-bar.ts
-var n = t`
+var i = r`
   .vf-title-bar {
     position: relative;
     /* Inert unless the frame is a flex column (vf-window); on vf-dialog's plain
        block frame the shorthand simply doesn't apply. */
     flex: none;
     height: calc(var(--vf-scale, 1) * var(--vf-titlebar-height, 18px));
-    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
     display: flex;
     /* flex-start, not center: the title states its own whole-pixel row (see
        the margin below); centering 16 into 17 would land it on a half. */
     align-items: flex-start;
     justify-content: center;
     overflow: hidden;
+    ${t({ edges: ["bottom"] })}
+  }
+  .vf-title-bar > .vf-stripes {
+    bottom: ${n(3)};
+  }
+  .vf-title-bar > .vf-dots {
+    bottom: ${n(2)};
   }
   .vf-title {
     /* Chicago-style title (chrome); slotted body copy keeps the body face. */
@@ -36,7 +43,7 @@ var n = t`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-`, r = t`
+`, a = r`
   .box {
     position: absolute;
     /* 11×11 box with 3px of clear white above and below it (title-bar
@@ -45,21 +52,18 @@ var n = t`
     z-index: 1;
     width: calc(var(--vf-scale, 1) * 11px);
     height: calc(var(--vf-scale, 1) * 11px);
-    padding: 0;
     margin: 0;
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
     background: var(--vf-white, #ffffff);
-    /* A 1px white patch ring that interrupts the stripes around the
-       box (no bevel — flat 1-bit), same buffer the stripes keep from the
-       frame edges. --vf-widget-ring is internal geometry, not a theming
-       knob: vf-window's utility variant widens it to 2px, the clearance
-       the windoid sheet cuts into its dither. */
-    box-shadow: 0 0 0 calc(var(--vf-scale, 1) * var(--vf-widget-ring, 1px))
-      var(--vf-white, #ffffff);
     font: inherit;
     cursor: var(--vf-cursor, default);
     -webkit-appearance: none;
     appearance: none;
+    /* After the stroke, a 1px white patch ring that interrupts the stripes
+       around the box (no bevel — flat 1-bit), same buffer the stripes keep
+       from the frame edges. --vf-widget-ring is internal geometry, not a
+       theming knob: vf-window's utility variant widens it to 2px, the
+       clearance the windoid sheet cuts into its dither. */
+    ${t({ shadows: "0 0 0 calc(var(--vf-scale, 1) * var(--vf-widget-ring, 1px)) var(--vf-white, #ffffff)" })}
   }
   .close {
     left: calc(var(--vf-scale, 1) * 8px);
@@ -73,7 +77,7 @@ var n = t`
      traced pixel-for-pixel from the UI kit's close-button-active-state
      sprite. Both widgets flash the identical graphic while pressed. That
      sprite is the whole 11×11 box; its outer ring is this element's own 1px
-     border, so the SVG draws just the 9×9 interior into the padding box. */
+     stroke, so the SVG draws just the 9×9 interior, centered in the box. */
   .box:active {
     background-color: var(--vf-white, #ffffff);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM0 4h3v1h-3zM6 4h3v1h-3zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM7 7h1v1h-1zM4 8h1v1h-1z'/%3E%3C/svg%3E");
@@ -85,17 +89,16 @@ var n = t`
     content: '';
     position: absolute;
     /* A small box nested in the TOP-LEFT corner of the widget (classic
-       System 7 zoom box). It shares the widget's own top and left border, so
-       only its right and bottom edges are drawn: a 6×6 box anchored at the
-       padding-box origin whose 1px right/bottom borders land the vertical at
+       System 7 zoom box). It shares the widget's own top and left line, so
+       only its right and bottom edges are drawn: a 6×6 box anchored inside
+       the widget's stroke whose 1px right/bottom strokes land the vertical at
        sprite col 6 and the horizontal at row 6. Traced from the UI kit
        zoom-button rest sprite. */
-    top: 0;
-    left: 0;
+    top: ${n(0)};
+    left: ${n(0)};
     width: calc(var(--vf-scale, 1) * 6px);
     height: calc(var(--vf-scale, 1) * 6px);
-    border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
-    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+    ${t({ edges: ["right", "bottom"] })}
   }
   /* While pressed the zoom box shows the same sunburst as the close box, so
      its inner detail square gives way to it. */
@@ -131,4 +134,4 @@ var n = t`
   }
 `;
 //#endregion
-export { n as vfTitleBar, r as vfWindowWidgets };
+export { i as vfTitleBar, a as vfWindowWidgets };

package/dist/styles/recipes/toggle.js

@@ -7,7 +7,7 @@ var t = e`
     gap: calc(var(--vf-scale, 1) * 6px);
     cursor: var(--vf-cursor, default);
   }
-  /* The well PAINTS 3 system px below the row top. Centering the 13px well
+  /* The radio's 13px well PAINTS 3 system px below the row top. Centering it
      in the 20px row is the layout — kept, because the host's height and its
      exported baseline are consumer-visible (moving them off the well's
      centered bottom reflowed every line holding a toggle) — but centering
@@ -18,8 +18,8 @@ var t = e`
      compose the variable), landing the ink on row 3: ties resolve toward the
      start, as QuickDraw's "div 2" did — the title-bar and vf-stack
      convention. The half-pixel gap between layout box and painted box is the
-     documented snap idiom, not a fault. */
-  .box,
+     documented snap idiom, not a fault. The checkbox's 12px box centers on
+     row 4 exactly and needs no step; both wells end on row 15. */
   .circle {
     top: calc(var(--vf-snap-dy, 0px) - var(--vf-scale, 1) * 0.5px);
   }

package/dist/window-chrome.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A window's chrome as numbers: the insets between its outer box and the
+ * region its content lays out in, and the floor its grow box stops at.
+ *
+ * A page sizing a window to its content, or content to its window, needs the
+ * chrome between the two — a folder window's field sized to the scrolled
+ * plane, a palette sized to hold its cells exactly. Restating `1 + 18 + 20 +
+ * 15 + 1` in the page was the alternative, with a note to re-derive it if
+ * the kit's chrome ever changed.
+ */
+/** The grow box's default floors, in system px: a window smaller than this can't be worked. */
+export declare const WINDOW_MIN_WIDTH = 80;
+export declare const WINDOW_MIN_HEIGHT = 54;
+/** The declared options that decide a window's chrome — `vf-window`'s own. */
+export interface VfWindowChromeOptions {
+    /** `'utility'` for the windoid's 12px bar; anything else is the 18px one. */
+    variant?: 'utility' | null;
+    /** The edge scroll rails, as on `vf-window`. */
+    scrollbars?: 'vertical' | 'horizontal' | 'both' | null;
+    /** The header's height, rule included, while the `header` slot is populated. */
+    headerHeight?: number | null;
+    /** Whether the `status` slot is populated. */
+    status?: boolean;
+}
+/** Four insets in system px. */
+export interface VfInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * The insets, in system px, between a window's outer box (its `width` and
+ * `height`) and the region its content lays out in: the body, or under
+ * `scrollbars` the scrolled plane's viewport. They go both ways — the content
+ * of a window `W` wide is `W − left − right`, and a window that holds content
+ * `w` wide is `w + left + right`. The frame's 1px stroke on every side, the
+ * title bar (18, or 12 for a utility window) and the header above, the status
+ * strip (15) and a horizontal rail (15) below, a vertical rail (15) on the
+ * right. The numbers are the default tokens': a page that restyles
+ * `--vf-titlebar-height` or `--vf-status-bar-height` restates them.
+ */
+export declare function windowChrome({ variant, scrollbars, headerHeight, status, }?: VfWindowChromeOptions): VfInsets;

package/dist/window-chrome.js

@@ -0,0 +1,13 @@
+//#region src/window-chrome.ts
+var e = 80, t = 54;
+function n({ variant: e, scrollbars: t, headerHeight: n, status: r = !1 } = {}) {
+	let i = t === "vertical" || t === "both", a = t === "horizontal" || t === "both";
+	return {
+		top: 1 + (e === "utility" ? 12 : 18) + Math.max(0, n ?? 0),
+		right: 1 + (i ? 15 : 0),
+		bottom: 1 + (r ? 15 : 0) + (a ? 15 : 0),
+		left: 1
+	};
+}
+//#endregion
+export { t as WINDOW_MIN_HEIGHT, e as WINDOW_MIN_WIDTH, n as windowChrome };

package/dist/zoom.d.ts

@@ -17,9 +17,9 @@
  *
  * The work is knowing the zoom at all. Zoom multiplies device-px-per-CSS-px in
  * every engine — that is what zoom is — but the engines differ in whether they
- * report it: Chrome and Firefox fold it into `devicePixelRatio`, Safari pins
- * `devicePixelRatio` to the hardware and moves `innerWidth` instead. So the
- * tracker watches two signals:
+ * report it: Chrome, Firefox and Safari 27 fold it into `devicePixelRatio`;
+ * older Safari pins `devicePixelRatio` to the hardware and moves `innerWidth`
+ * instead. So the tracker watches two signals:
  *
  *   1. `devicePixelRatio`, via a resolution media query re-armed at each new
  *      value. A dpr change is *either* zoom or the window moving to a
@@ -31,7 +31,7 @@
  *      report those members in zoom-affected CSS px) means zoom; anything else
  *      means a display change, which rebases the baseline and reports nothing.
  *   2. `innerWidth`/`innerHeight` against `outerWidth`/`outerHeight`, for
- *      Safari: zoom rescales the inner (CSS-px) viewport on both axes by the
+ *      older Safari: zoom rescales the inner (CSS-px) viewport on both axes by the
  *      same factor while the outer (screen-px) window holds still. A change in
  *      the outer size is a real window resize and rebases; a one-axis inner
  *      change (an edge drag, devtools docking, a sidebar) is never zoom and
@@ -170,12 +170,12 @@ export declare function getZoom(): number;
 /**
  * Device px per CSS px *right now* — the number every "snap to the device
  * grid" computation must divide by. `window.devicePixelRatio` is that number
- * only in engines that fold zoom into it; Safari's is simply wrong about the
- * current rasterization density at any non-100% zoom. Reading the live dpr and
- * folding the tracked zoom back in is correct in both:
+ * only in engines that fold zoom into it; older Safari's is simply wrong about
+ * the current rasterization density at any non-100% zoom. Reading the live dpr
+ * and folding the tracked zoom back in is correct in both:
  *
- *   Chrome/Firefox (latched)   dpr already includes zoom  →  dpr
- *   Safari (never latches)     dpr is the hardware        →  dpr × zoom
+ *   Chrome/Firefox/Safari 27 (latched)   dpr already includes zoom  →  dpr
+ *   older Safari (never latches)         dpr is the hardware        →  dpr × zoom
  *
  * The live read matters: a monitor move changes the true density whether or
  * not the tracker is running, and this stays exactly as correct as the old