@half-built/astro 0.10.0 → 0.11.1

package/src/scripts/core/frame-loop.ts

@@ -1,10 +1,15 @@
-/* The rAF loop with dt clamp (step 10), one home for the pattern
-   henry-loose.ts and path-player.ts each carried. now is the rAF
+/* The rAF loop with dt clamp (step 10), one home for a pattern that
+   used to be scattered across the site's own scripts and path-player.ts.
+   now is the rAF
    timestamp: monotonic in a real browser, unlike Date.now(), which a
    wall-clock adjustment can move backward; the max(0, ...) floor is
    cheap belt-and-suspenders against that case feeding an integrator a
    negative dt. stop() resets the clock so a stop/start gap (a hidden
-   tab, a closed dialog) never arrives as one giant dt. */
+   tab, a closed dialog) never arrives as one giant dt. A stop, a
+   start, or both called reentrantly from inside cb keep exactly one
+   scheduled chain: each generation is stamped at schedule time, and a
+   tick from a stale generation is dropped instead of rescheduling
+   itself alongside the newer chain. */
 export interface FrameLoop {
   start(): void;
   stop(): void;
@@ -20,21 +25,25 @@ export function createFrameLoop(
   let handle = 0;
   let last = 0;
   let live = false;
+  let gen = 0;
 
-  function tick(now: number): void {
-    if (!live) return;
+  function tick(now: number, mine: number): void {
+    if (!live || mine !== gen) return;
 
     const elapsed = Math.max(0, (now - last) / 1000);
     const dt = last === 0 ? firstDt : Math.min(clamp, elapsed);
 
     last = now;
     cb(dt);
-    // cb may have called stop() reentrantly; a fresh function body reads live without stale narrowing.
-    scheduleNext();
-  }
 
-  function scheduleNext(): void {
-    if (live) handle = win.requestAnimationFrame(tick);
+    // cb may have called stop() and/or start() reentrantly; gen moves
+    // on either call, so mine still matching gen here already means
+    // this chain is still the live one.
+    if (mine === gen) {
+      handle = win.requestAnimationFrame((now2) => {
+        tick(now2, mine);
+      });
+    }
   }
 
   return {
@@ -42,11 +51,17 @@ export function createFrameLoop(
       if (live) return;
       live = true;
       last = 0;
-      handle = win.requestAnimationFrame(tick);
+      gen++;
+      const mine = gen;
+
+      handle = win.requestAnimationFrame((now) => {
+        tick(now, mine);
+      });
     },
     stop(): void {
       if (!live) return;
       live = false;
+      gen++;
       win.cancelAnimationFrame(handle);
       last = 0;
     },

package/src/scripts/core/icons.ts

@@ -1,7 +1,7 @@
 /* Inline icon markup, vendored from Lucide (https://lucide.dev, ISC
    license), replacing the Unicode glyphs whose rendering varied by
    platform font. Same line style as the site's existing inline SVGs
-   (the to-top chevron in Base.astro). Buttons carry their own
+   (the to-top chevron in the consumer's layout). Buttons carry their own
    aria-labels; the svg itself is decorative and aria-hidden.
    Home: the js package's core (owner decision 1, 2026-08-31); Lucide,
    ISC license, attribution retained. */
@@ -98,7 +98,6 @@ export function iconMarkup(
 
 export const ICON_X = iconMarkup("x");
 export const ICON_PLAY = iconMarkup("play");
-export const ICON_SPARKLES = iconMarkup("sparkles");
 export const ICON_PAUSE = iconMarkup("pause");
 export const ICON_ROTATE_CCW = iconMarkup("rotate-ccw");
 export const ICON_CHEVRON_LEFT = iconMarkup("chevron-left");

package/src/scripts/core/placement.ts

@@ -0,0 +1,67 @@
+/* Pure placement shared by the measured islands (link-tip, popout;
+   spec docs/superpowers/specs/2026-09-26-popout-design.md moved it
+   here from link-tip.ts). Measure then place, never predict. */
+
+const GAP = 1; /* px between anchor and tip; the old bottom: calc(100% + 1px) */
+const INSET = 2; /* px of horizontal lead-out past the anchor edge */
+
+export const EDGE = 12; /* px of breathing room against either viewport edge */
+
+export type TipPlace = "above" | "below";
+export type TipAlign = "start" | "end";
+export interface AnchorRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+export interface TipSize {
+  width: number;
+  height: number;
+}
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
+export interface TipPosition {
+  x: number;
+  y: number;
+  place: TipPlace;
+}
+
+/* Pure placement for the singleton tip: start/end alignment against
+   the anchor, horizontal clamp into [edge, vw - edge] with the left
+   edge winning when both bind, and a vertical flip when the preferred
+   side would leave the viewport. All measured values; no prediction. */
+export function placeTip(
+  anchor: AnchorRect,
+  tip: TipSize,
+  viewport: ViewportSize,
+  place: TipPlace = "above",
+  align: TipAlign = "start",
+  edge: number = EDGE,
+): TipPosition {
+  const startX = anchor.left - INSET;
+  const endX = anchor.right + INSET - tip.width;
+  let x = align === "start" ? startX : endX;
+
+  const overRight = x + tip.width - (viewport.width - edge);
+  if (overRight > 0) x -= overRight;
+  if (x < edge) x = edge;
+  let finalPlace = place;
+
+  if (place === "above" && anchor.top - GAP - tip.height < 0) {
+    finalPlace = "below";
+  }
+
+  if (place === "below" && anchor.bottom + GAP + tip.height > viewport.height) {
+    finalPlace = "above";
+  }
+
+  const y =
+    finalPlace === "above"
+      ? anchor.top - GAP - tip.height
+      : anchor.bottom + GAP;
+
+  return { x: Math.round(x), y: Math.round(y), place: finalPlace };
+}

package/src/scripts/core/storage.ts

@@ -1,5 +1,6 @@
 /* The localStorage read/validate/write codec (step 10), one home for
-   the pattern henry-loose.ts and stasis-state.ts each carried: parse is
+   a pattern that used to be scattered across the site's own scripts:
+   parse is
    the validator (junk parses to null and read() then removes the key),
    and every storage touch sits inside try/catch so private mode or
    disabled storage degrades to in-page-only state, never a thrown

package/src/scripts/ecosystem.ts

@@ -68,7 +68,12 @@ export function validateDocument(raw: unknown): EcosystemDocument | null {
 
 /** The self entry's family first, each group by ascending priority and
     then label, capped at limit. Null when selfKey is absent, which is
-    the refusal that keeps a site out of a list missing itself. */
+    the refusal that keeps a site out of a list missing itself.
+
+    The self entry always survives the cap: a footer that would render
+    the cap without the site's own entry is worse than one that swaps
+    out its lowest-priority stranger, so the self entry takes the last
+    slot when sorting alone would have dropped it past the limit. */
 export function sortEntries(
   entries: EcosystemDocEntry[],
   selfKey: string,
@@ -77,15 +82,18 @@ export function sortEntries(
   const self = entries.find((entry) => entry.key === selfKey);
   if (!self) return null;
   const own = self.family;
-  return [...entries]
-    .sort((a, b) => {
-      const aOwn = a.family === own ? 0 : 1;
-      const bOwn = b.family === own ? 0 : 1;
-      if (aOwn !== bOwn) return aOwn - bOwn;
-      if (a.priority !== b.priority) return a.priority - b.priority;
-      return a.label.localeCompare(b.label);
-    })
-    .slice(0, limit);
+
+  const sorted = [...entries].sort((a, b) => {
+    const aOwn = a.family === own ? 0 : 1;
+    const bOwn = b.family === own ? 0 : 1;
+    if (aOwn !== bOwn) return aOwn - bOwn;
+    if (a.priority !== b.priority) return a.priority - b.priority;
+    return a.label.localeCompare(b.label);
+  });
+
+  const capped = sorted.slice(0, limit);
+  if (limit > 0 && !capped.includes(self)) capped[capped.length - 1] = self;
+  return capped;
 }
 
 const CACHE_KEY = "half-built-ecosystem";

package/src/scripts/focus-mode.ts

@@ -15,11 +15,41 @@ export interface FocusModeOptions {
   target?: EventTarget;
 }
 
+/* Text entry is not navigation: a reader who clicked into a field and
+   types keeps the click highlight. Tab always means keyboard. */
+function isTextEntry(t: EventTarget | null): boolean {
+  if (!(t instanceof HTMLElement)) return false;
+
+  if (
+    t.isContentEditable ||
+    t instanceof HTMLTextAreaElement ||
+    t instanceof HTMLSelectElement
+  ) {
+    return true;
+  }
+
+  if (!(t instanceof HTMLInputElement)) return false;
+
+  return ![
+    "checkbox",
+    "radio",
+    "button",
+    "submit",
+    "reset",
+    "range",
+    "color",
+    "file",
+    "image",
+  ].includes(t.type);
+}
+
 export const mountFocusMode: Island<FocusModeOptions> = (
   root,
   options = {},
 ): IslandHandle => {
-  const el = root as HTMLElement;
+  const el =
+    root instanceof Document ? root.documentElement : (root as HTMLElement);
+
   const target = options.target ?? window;
 
   if (!claim(el, "focus-mode")) {
@@ -31,7 +61,9 @@ export const mountFocusMode: Island<FocusModeOptions> = (
     };
   }
 
-  const onKeydown = (): void => {
+  const onKeydown = (ev: Event): void => {
+    if (!(ev instanceof KeyboardEvent)) return;
+    if (ev.key !== "Tab" && isTextEntry(ev.target)) return;
     el.dataset.focus = "keyboard";
   };
 

package/src/scripts/lightbox.ts

@@ -1,8 +1,8 @@
-/* Image lightbox (spec docs/superpowers/specs/2026-07-30-image-lightbox-design.md).
-   Exported pure math plus mountLightbox, on the island contract (step 9):
-   mount(root, options?) returns a destroy handle; claim() makes a second
-   mount over an already-wired link a no-op. Called from Base.astro's
-   script block and testable under jsdom. */
+/* Image lightbox. Exported pure math plus mountLightbox, on the island
+   contract (step 9): mount(root, options?) returns a destroy handle;
+   claim() makes a second mount over an already-wired link a no-op.
+   Called from the consumer's layout script block and testable under
+   jsdom. */
 
 import { claim, release, type Island, type IslandHandle } from "./core/island";
 import { iconButton, docOf } from "./core/dom";
@@ -116,6 +116,26 @@ export function outOfWhack(
   return overlap < WHACK_FRACTION * Math.min(w * h, boxW * boxH);
 }
 
+/* One mouse notch (100px) is about the old fixed 1.2x step; a
+   trackpad's many small deltas add up to the same total instead of
+   stepping 1.2x each. deltaMode 1 is lines, 2 is pages. */
+const WHEEL_K = Math.log(1.2) / 100;
+const LINE_PX = 16;
+
+export function wheelZoomFactor(
+  deltaY: number,
+  deltaMode: number,
+  pageHeight: number,
+): number {
+  if (deltaY === 0) return 1;
+
+  let px = deltaY;
+  if (deltaMode === 1) px = deltaY * LINE_PX;
+  else if (deltaMode === 2) px = deltaY * pageHeight;
+
+  return Math.exp(-px * WHEEL_K);
+}
+
 export function readout(view: ZoomView, fit: number, prefix = "FIT"): string {
   const sign = (n: number): string => {
     const r = Math.round(n);
@@ -359,6 +379,10 @@ export const mountLightbox: Island<LightboxOptions> = (
   let view: ZoomView = { zoom: 1, x: 0, y: 0 };
   let boxW = FALLBACK_BOX.w;
   let boxH = FALLBACK_BOX.h;
+  /* Registered while the dialog is open, one at a time: refit on
+     resize, torn down on close so a reopen registers a fresh one
+     rather than piling up. */
+  let onResize: (() => void) | null = null;
 
   const applyView = (r: Refs): void => {
     const item = items[index];
@@ -369,6 +393,17 @@ export const mountLightbox: Island<LightboxOptions> = (
     r.homeBtn.hidden = !outOfWhack(view, item.w, item.h, boxW, boxH);
   };
 
+  /* fit and view must move together: readout's FIT/percent judgment is
+     view.zoom === fit, so any path that resets the view to fit (a new
+     item, HOME, 0, the double-click reset, or a resize) recomputes
+     both here rather than setting view alone and leaving fit stale. */
+  const resetToFit = (r: Refs): void => {
+    const item = items[index];
+    fit = fitZoom(item.w, item.h, boxW, boxH);
+    view = initialView(item.w, item.h, boxW, boxH);
+    applyView(r);
+  };
+
   const goTo = (r: Refs, i: number): void => {
     const n = items.length;
     show(r, ((i % n) + n) % n);
@@ -412,15 +447,13 @@ export const mountLightbox: Island<LightboxOptions> = (
   const show = (r: Refs, i: number): void => {
     index = i;
     const item = items[index];
-    fit = fitZoom(item.w, item.h, boxW, boxH);
-    view = initialView(item.w, item.h, boxW, boxH);
     r.caption.textContent = item.caption;
     r.img.alt = item.caption;
     r.dims.textContent = `${String(item.w)} × ${String(item.h)}`;
     r.counter.textContent = `${String(index + 1).padStart(2, "0")} / ${String(items.length).padStart(2, "0")}`;
     r.img.src = item.thumb;
     swapToFull(r.img, item.href, doc);
-    applyView(r);
+    resetToFit(r);
   };
 
   const ensureRefs = (): Refs => {
@@ -465,23 +498,21 @@ export const mountLightbox: Island<LightboxOptions> = (
       if (ev.key === "+" || ev.key === "=") rezoom(ZOOM_STEP, 0, 0);
       if (ev.key === "-") rezoom(1 / ZOOM_STEP, 0, 0);
 
-      if (ev.key === "0") {
-        view = initialView(item().w, item().h, boxW, boxH);
-        applyView(r);
-      }
+      if (ev.key === "0") resetToFit(r);
     });
 
     r.homeBtn.addEventListener("click", () => {
-      view = initialView(item().w, item().h, boxW, boxH);
-      applyView(r);
+      resetToFit(r);
     });
 
     r.viewbox.addEventListener(
       "wheel",
       (ev) => {
         ev.preventDefault();
+        const factor = wheelZoomFactor(ev.deltaY, ev.deltaMode, boxH);
+        if (factor === 1) return;
         const { cx, cy } = rel(ev);
-        rezoom(ev.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, cx, cy);
+        rezoom(factor, cx, cy);
       },
       { passive: false },
     );
@@ -502,8 +533,7 @@ export const mountLightbox: Island<LightboxOptions> = (
         const { cx, cy } = rel(ev);
         rezoom(1 / view.zoom, cx, cy);
       } else {
-        view = init;
-        applyView(r);
+        resetToFit(r);
       }
     });
 
@@ -569,6 +599,16 @@ export const mountLightbox: Island<LightboxOptions> = (
     r.viewbox.addEventListener("pointerup", lift);
     r.viewbox.addEventListener("pointercancel", lift);
 
+    /* Torn down here rather than in destroy(): every close (veil,
+       Escape, close box, or a consumer's own close()) fires this, so
+       the listener never outlives the open dialog. */
+    r.dialog.addEventListener("close", () => {
+      if (onResize) {
+        window.removeEventListener("resize", onResize);
+        onResize = null;
+      }
+    });
+
     refs = r;
     return r;
   };
@@ -588,6 +628,17 @@ export const mountLightbox: Island<LightboxOptions> = (
     boxW = rect.width || FALLBACK_BOX.w;
     boxH = rect.height || FALLBACK_BOX.h;
     goTo(r, Math.max(0, set.indexOf(link)));
+
+    if (!onResize) {
+      onResize = (): void => {
+        const rr = r.viewbox.getBoundingClientRect();
+        boxW = rr.width || FALLBACK_BOX.w;
+        boxH = rr.height || FALLBACK_BOX.h;
+        resetToFit(r);
+      };
+
+      window.addEventListener("resize", onResize);
+    }
   };
 
   const mounted: {
@@ -624,6 +675,7 @@ export const mountLightbox: Island<LightboxOptions> = (
       }
 
       if (refs) {
+        if (refs.dialog.open) refs.dialog.close();
         refs.dialog.remove();
         refs = null;
       }

package/src/scripts/link-tip.ts

@@ -1,68 +1,6 @@
 import { claim, release, type Island, type IslandHandle } from "./core/island";
 import { docOf } from "./core/dom";
-
-const GAP = 1; /* px between anchor and tip; the old bottom: calc(100% + 1px) */
-const INSET = 2; /* px of horizontal lead-out past the anchor edge */
-const EDGE = 12; /* px of breathing room against either viewport edge */
-
-export type TipPlace = "above" | "below";
-export type TipAlign = "start" | "end";
-export interface AnchorRect {
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-}
-export interface TipSize {
-  width: number;
-  height: number;
-}
-export interface ViewportSize {
-  width: number;
-  height: number;
-}
-export interface TipPosition {
-  x: number;
-  y: number;
-  place: TipPlace;
-}
-
-/* Pure placement for the singleton tip: start/end alignment against
-   the anchor, horizontal clamp into [edge, vw - edge] with the left
-   edge winning when both bind, and a vertical flip when the preferred
-   side would leave the viewport. All measured values; no prediction. */
-export function placeTip(
-  anchor: AnchorRect,
-  tip: TipSize,
-  viewport: ViewportSize,
-  place: TipPlace = "above",
-  align: TipAlign = "start",
-  edge: number = EDGE,
-): TipPosition {
-  const startX = anchor.left - INSET;
-  const endX = anchor.right + INSET - tip.width;
-  let x = align === "start" ? startX : endX;
-
-  const overRight = x + tip.width - (viewport.width - edge);
-  if (overRight > 0) x -= overRight;
-  if (x < edge) x = edge;
-  let finalPlace = place;
-
-  if (place === "above" && anchor.top - GAP - tip.height < 0) {
-    finalPlace = "below";
-  }
-
-  if (place === "below" && anchor.bottom + GAP + tip.height > viewport.height) {
-    finalPlace = "above";
-  }
-
-  const y =
-    finalPlace === "above"
-      ? anchor.top - GAP - tip.height
-      : anchor.bottom + GAP;
-
-  return { x: Math.round(x), y: Math.round(y), place: finalPlace };
-}
+import { placeTip, EDGE } from "./core/placement";
 
 export interface LinkTipOptions {
   selector?: string;
@@ -97,9 +35,10 @@ export const mountLinkTips: Island<LinkTipOptions> = (
   const win = doc.defaultView;
   /* Touch: claims (so double mounts stay no-ops) but attaches nothing;
      mobile browsers already show the URL themselves. jsdom has no
-     matchMedia at all (same widened-type guard as henry-loose.ts and
-     path-player.ts): the plain Window type always declares the method,
-     so an unwidened optional chain reads as always-true to the lint. */
+     matchMedia at all (same widened-type guard used elsewhere in the
+     package, path-player.ts included): the plain Window type always
+     declares the method, so an unwidened optional chain reads as
+     always-true to the lint. */
   const mmWin = win as { matchMedia?: typeof window.matchMedia } | null;
 
   if (mmWin?.matchMedia?.("(hover: none)").matches) {

package/src/scripts/path-player.ts

@@ -6,6 +6,7 @@
    2026-08-22); flip SCRUB to re-enable. */
 import { buildPlateModal } from "./plate-modal";
 import { createFrameLoop } from "./core/frame-loop";
+import { BP_PHONE_MAX } from "./core/breakpoints";
 import { ICON_PLAY, ICON_PAUSE, ICON_ROTATE_CCW } from "./core/icons";
 import { playheadX, formatReadout, columnIndex } from "./path-player-math";
 import {
@@ -21,8 +22,8 @@ import {
    which no-inferrable-types rejects on a literal) so flipping this to
    re-enable scrubbing is a one-line change: a literal type here would
    make the `if (SCRUB)` below statically always-false and trip the
-   no-unnecessary-condition lint rule. Same widening idea as
-   src/scripts/henry-loose.ts's matchMedia guard. */
+   no-unnecessary-condition lint rule. Same widening idea as this
+   file's own matchMedia guard below. */
 const SCRUB = false as boolean;
 const AXIS_H = 14;
 const TRACK_GAP = 5;
@@ -161,6 +162,8 @@ export function createPathPlayer<S>(
   restartBtn.className = "pp-restart icon-box press-box";
   restartBtn.setAttribute("aria-label", restart);
   restartBtn.innerHTML = ICON_ROTATE_CCW;
+  playBtn.innerHTML = ICON_PLAY;
+  playBtn.setAttribute("aria-pressed", "false");
 
   if (!stageReady) {
     playBtn.disabled = true;
@@ -192,10 +195,10 @@ export function createPathPlayer<S>(
   captionToggle.textContent = about;
   captionToggle.setAttribute("aria-controls", caption.id);
 
-  /* Same widening as henry-loose.ts: jsdom has no matchMedia, and a
-     bare typeof check reads as always-true to the lint. The query list
-     type is widened too so a test stub without addEventListener is
-     still valid. */
+  /* Same widening as the package's other matchMedia guards: jsdom has
+     no matchMedia, and a bare typeof check reads as always-true to the
+     lint. The query list type is widened too so a test stub without
+     addEventListener is still valid. */
   interface PhoneQuery {
     matches: boolean;
     addEventListener?: (
@@ -211,7 +214,7 @@ export function createPathPlayer<S>(
 
     if (!mediaQuery) return null;
 
-    return mediaQuery.call(globalThis, "(max-width: 768px)");
+    return mediaQuery.call(globalThis, `(max-width: ${BP_PHONE_MAX}px)`);
   };
 
   const phone = (): boolean => phoneQuery()?.matches ?? false;
@@ -305,6 +308,15 @@ export function createPathPlayer<S>(
     staticTracks = paintStatic(w, scale);
   }
 
+  /* The timeline canvas is CSS-width-driven, and its offscreen static
+     layer is baked at a fixed pixel width; a viewport resize while the
+     modal is open leaves it stale until the next close/open round trip
+     unless it re-lays here. */
+  const onResize = (): void => {
+    layoutTracks();
+    drawFrame();
+  };
+
   function drawFrame(): void {
     const ctx = tracksCanvas.getContext("2d");
     if (!ctx || !staticTracks) return;
@@ -404,6 +416,7 @@ export function createPathPlayer<S>(
     setPlaying(false);
     loop.stop();
     config.sink.pause?.();
+    win.removeEventListener("resize", onResize);
   });
 
   if (SCRUB) {
@@ -416,13 +429,14 @@ export function createPathPlayer<S>(
       pm.open(opener);
       setCaptionShown(!phone());
       layoutTracks();
+      win.addEventListener("resize", onResize);
       readout.textContent = formatReadout(state.t, config.duration);
       config.sink.resume?.();
 
       /* Reduced motion: open paused; the transport still plays on demand.
-         jsdom has no matchMedia, hence the widened type (same guard as
-         henry-loose.ts). Kept separate from the frame loop's `win`,
-         which is cast non-null: this one must stay optional so a
+         jsdom has no matchMedia, hence the widened type (same guard used
+         elsewhere in this file). Kept separate from the frame loop's
+         `win`, which is cast non-null: this one must stay optional so a
          matchMedia-less jsdom does not throw. */
       const mmWin = doc.defaultView as {
         matchMedia?: typeof window.matchMedia;

package/src/scripts/plate-modal.ts

@@ -1,8 +1,8 @@
-/* Shared plate-window chrome (spec
-   docs/superpowers/specs/2026-08-22-fluid-path-player-design.md):
-   dialog + veil, corner-stroked zone, ink plate, boxed labels, close.
-   Consumers: the image lightbox (legacyPrefix "lb" keeps its old class
-   names alive) and the path player. */
+/* Shared plate-window chrome, built for the fluid path player and
+   generalized for shared use: dialog + veil, corner-stroked zone, ink
+   plate, boxed labels, close. Consumers: the image lightbox
+   (legacyPrefix "lb" keeps its old class names alive) and the path
+   player. */
 
 import { ICON_X } from "./core/icons";
 
@@ -86,8 +86,19 @@ export function buildPlateModal(
      button's innerHTML detaches the click's target mid-bubble, and a
      detached node is contained by nothing, which read as a veil click
      and closed the dialog under the pause button (found 2026-08-23). */
+  /* A click targets the nearest common ancestor of press and release,
+     so a drag from inside the plate that ends on the veil arrives here
+     targeted at the dialog. Only a press that also began on the veil
+     closes. */
+  let pressOnVeil = false;
+
+  dialog.addEventListener("pointerdown", (ev) => {
+    pressOnVeil = ev.target === dialog;
+  });
+
   dialog.addEventListener("click", (ev) => {
-    if (ev.target === dialog) dialog.close();
+    if (ev.target === dialog && pressOnVeil) dialog.close();
+    pressOnVeil = false;
   });
 
   const addLabel = (