@drawnagency/primitives 0.1.110 → 0.1.111

package/dist/lib/nav-progress.d.ts

@@ -0,0 +1,14 @@
+export interface NavProgressOptions {
+    showDelayMs?: number;
+    safetyMs?: number;
+}
+/**
+ * Wire the bar rendered by Layout.astro. No-ops when the element is absent,
+ * which is how /edit opts out — Astro hoists a layout's module script to the
+ * page bundle regardless of the branch it was rendered in, so the element, not
+ * the script tag, is the gate.
+ *
+ * Returns a teardown function (used by tests; production never unwires).
+ */
+export declare function initNavProgress(options?: NavProgressOptions): () => void;
+//# sourceMappingURL=nav-progress.d.ts.map

package/dist/lib/nav-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-progress.d.ts","sourceRoot":"","sources":["../../src/lib/nav-progress.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0BD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,MAAM,IAAI,CAoDxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.110",
+  "version": "0.1.111",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/lib/nav-progress.ts

@@ -0,0 +1,108 @@
+// Top progress bar for viewer page navigation. Viewer pages are per-request SSR
+// renders, so a click can sit for a beat with no feedback beyond the browser's
+// own tab spinner; this gives that wait an in-page affordance in the brand
+// color.
+//
+// There is no client router here — the browser performs a real navigation and
+// keeps painting the outgoing page until the new response commits, which is
+// exactly the window the bar fills. Nothing hides it: the incoming document
+// replaces it. The only teardown paths are a bfcache restore (pageshow) and the
+// safety timeout for a navigation that never lands.
+
+/** Delay before the bar appears, so a prefetched (near-instant) navigation
+ *  never flashes it. Mirrors EditorLoading's reasoning. */
+const SHOW_DELAY_MS = 200;
+/** Give up if the navigation never commits (blocked, aborted, offline) rather
+ *  than leaving a stuck bar across the top of a page the viewer is still on. */
+const SAFETY_MS = 15_000;
+
+export interface NavProgressOptions {
+  showDelayMs?: number;
+  safetyMs?: number;
+}
+
+function isModifiedClick(event: MouseEvent): boolean {
+  // Anything that doesn't navigate this tab: middle/right click, new tab, new
+  // window, download.
+  return event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
+}
+
+/** Would this click actually navigate the current tab to a different document? */
+function navigatesAway(link: HTMLAnchorElement): boolean {
+  if (link.hasAttribute("download") || link.dataset.navProgress === "false") return false;
+  if (link.target && link.target !== "_self") return false;
+  if (!link.getAttribute("href")) return false;
+
+  let url: URL;
+  try {
+    url = new URL(link.href, window.location.href);
+  } catch {
+    return false;
+  }
+  // mailto:/tel: land here too — their origin is never the page's.
+  if (url.origin !== window.location.origin) return false;
+  // Same-document hash links, including the nav's `#doc=` document launchers.
+  return url.pathname !== window.location.pathname || url.search !== window.location.search;
+}
+
+/**
+ * Wire the bar rendered by Layout.astro. No-ops when the element is absent,
+ * which is how /edit opts out — Astro hoists a layout's module script to the
+ * page bundle regardless of the branch it was rendered in, so the element, not
+ * the script tag, is the gate.
+ *
+ * Returns a teardown function (used by tests; production never unwires).
+ */
+export function initNavProgress(options?: NavProgressOptions): () => void {
+  const bar = document.querySelector<HTMLElement>("[data-nav-progress]");
+  if (!bar) return () => {};
+
+  const showDelayMs = options?.showDelayMs ?? SHOW_DELAY_MS;
+  const safetyMs = options?.safetyMs ?? SAFETY_MS;
+
+  let showTimer: ReturnType<typeof setTimeout> | null = null;
+  let safetyTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Arrow consts, not function declarations: hoisting would discard the
+  // null-narrowing `bar` just got from the guard above.
+  const reset = () => {
+    if (showTimer) clearTimeout(showTimer);
+    if (safetyTimer) clearTimeout(safetyTimer);
+    showTimer = null;
+    safetyTimer = null;
+    bar.classList.remove("is-active");
+  };
+
+  const start = () => {
+    reset();
+    showTimer = setTimeout(() => {
+      showTimer = null;
+      bar.classList.add("is-active");
+    }, showDelayMs);
+    safetyTimer = setTimeout(reset, safetyMs);
+  };
+
+  const onClick = (event: MouseEvent) => {
+    if (event.defaultPrevented || isModifiedClick(event)) return;
+    const target = event.target;
+    const link = target instanceof Element ? target.closest("a") : null;
+    if (!(link instanceof HTMLAnchorElement)) return;
+    if (!navigatesAway(link)) return;
+    start();
+  };
+
+  // A bfcache restore replays the outgoing page as it was — bar included, since
+  // it was mid-animation when the viewer left. Clear it.
+  const onPageShow = (event: PageTransitionEvent) => {
+    if (event.persisted) reset();
+  };
+
+  document.addEventListener("click", onClick);
+  window.addEventListener("pageshow", onPageShow);
+
+  return () => {
+    reset();
+    document.removeEventListener("click", onClick);
+    window.removeEventListener("pageshow", onPageShow);
+  };
+}