@half-built/astro 0.9.0 → 0.11.0

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 = (