@abreen/tada 1.17.1 → 1.18.0

package/src/code/{style.scss → _index.scss}

@@ -1,3 +1,64 @@
+@use '../mixins' as *;
+
+body.code {
+  --code-gutter-width: 4rem;
+}
+
+.file-header,
+.slides-header {
+  display: flex;
+  gap: var(--gap);
+  align-items: center;
+  justify-content: center;
+  padding: var(--gap);
+  margin-bottom: var(--gap);
+  border: 1px solid var(--fg2-color);
+  border-radius: var(--border-radius);
+
+  tt,
+  code {
+    padding: 0;
+    background: none;
+  }
+}
+
+.code-row {
+  display: grid;
+  grid-template-columns: var(--code-gutter-width) 1fr;
+}
+
+.line-number {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  display: block;
+  padding: 0 0.75em;
+  margin-right: var(--gap);
+  font-family: var(--mono-font);
+  font-size-adjust: var(--mono-font-size-adjust);
+  font-feature-settings: var(--mono-font-feature-settings);
+  color: var(--fg2-color);
+  text-align: right;
+  text-decoration: none;
+  background: var(--bg2-color);
+  border-right: 1px solid var(--fg2-color);
+
+  @include user-select(none);
+}
+
+a.line-number {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--fg-color);
+  }
+
+  &:target {
+    color: var(--bg-color);
+    background: var(--fg2-color);
+  }
+}
+
 body.code .file-header {
   h1 {
     padding: 0;

package/src/header/{_base.scss → _index.scss}

@@ -191,6 +191,16 @@ header summary .logo {
   background: var(--theme-color);
 }
 
+header summary .logo-image {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 96px;
+  height: 24px;
+  margin: 0 8px 0 0;
+  pointer-events: none;
+  object-fit: contain;
+}
+
 header summary .site-title {
   flex: 1 1 0;
   min-width: 0;
@@ -230,12 +240,6 @@ header .to-top-container {
   }
 }
 
-// Hide until the full stylesheet loads (prevents FOUC where the container
-// is visible as a block element before it gets position: absolute)
-header .results-container {
-  display: none;
-}
-
 header .search-controls {
   position: relative;
   display: flex;
@@ -298,3 +302,91 @@ header.loading::after {
   background-size: 200% 100%;
   animation: shimmer 3s ease-in-out infinite;
 }
+
+header nav {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include user-select(none);
+
+  gap: var(--gap);
+  margin: var(--gap);
+}
+
+header nav div {
+  flex: 1 1 150px;
+}
+
+header nav ul {
+  padding: 0;
+  margin: 8px 0 0;
+  list-style-type: none;
+}
+
+header nav ul li {
+  margin: 0;
+}
+
+header nav a {
+  display: inline;
+  border: none;
+
+  @include subdued-link;
+}
+
+header nav a.external {
+  border: none;
+}
+
+@media only screen and (width >= 740px) {
+  header details nav {
+    min-height: 100px;
+  }
+}
+
+header nav div > p {
+  padding-bottom: 2px;
+  font-style: italic;
+  border-bottom: 1px solid var(--fg-color);
+
+  @include user-select(none);
+}
+
+:root[data-contrast-preference='high'] header:has(details[open]) {
+  background: var(--bg2-color);
+}
+
+@media (hover: hover) {
+  header:has(details[open]):hover {
+    background: var(--bg-color-translucent);
+  }
+
+  :root[data-contrast-preference='high'] header:hover {
+    background: var(--bg2-color);
+  }
+}
+
+header .results-container {
+  position: absolute;
+  top: var(--header-collapsed-height);
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+  max-width: 640px;
+  padding: var(--gap);
+  margin: 0 auto;
+  pointer-events: none;
+}
+
+header ol {
+  flex: 1;
+  min-height: 0;
+  padding: 0;
+  overflow-y: auto;
+
+  .excerpt {
+    height: 5ex;
+    line-height: 2.5ex;
+  }
+}

package/src/index.ts

@@ -1,22 +1,6 @@
+// The single Sass entry point; it loads every other stylesheet
 import './style.scss';
 
-import './material-symbols.scss';
-import './anchor/style.scss';
-import './code.scss';
-import './code/style.scss';
-import './literate.scss';
-import './header/style.scss';
-import './print/style.scss';
-import './question/style.scss';
-import './search/style.scss';
-import './slides/style.scss';
-import './timezone/style.scss';
-import './toc/style.scss';
-import './trace/style.scss';
-import './appearance-picker/style.scss';
-import './navigate/style.scss';
-import './page-update/style.scss';
-
 import mountSearch from './search';
 import mountHeader from './header';
 import mountTop from './top';

package/src/navigate/{style.scss → _index.scss}

@@ -68,6 +68,26 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
   mix-blend-mode: normal;
 }
 
+// The footer and appearance controls get their own stationary layer. Show only
+// the incoming snapshot so disabled defaults and stale hover states cannot blend.
+.page-bottom {
+  view-transition-name: page-bottom;
+}
+
+::view-transition-group(page-bottom),
+::view-transition-old(page-bottom),
+::view-transition-new(page-bottom) {
+  animation: none;
+}
+
+::view-transition-old(page-bottom) {
+  display: none;
+}
+
+::view-transition-new(page-bottom) {
+  mix-blend-mode: normal;
+}
+
 // Forward navigation: old content slides left, new content slides in from right
 .nav-forward::view-transition-old(root) {
   animation:

package/src/navigate/eligible.ts

@@ -1,34 +1,3 @@
-const NON_HTML_EXTENSIONS = new Set([
-  '.pdf',
-  '.java',
-  '.py',
-  '.png',
-  '.jpg',
-  '.jpeg',
-  '.gif',
-  '.svg',
-  '.zip',
-  '.tar',
-  '.gz',
-  '.json',
-  '.xml',
-  '.css',
-  '.js',
-  '.ts',
-  '.c',
-  '.h',
-  '.cpp',
-  '.rb',
-  '.go',
-  '.rs',
-  '.txt',
-  '.csv',
-  '.ico',
-  '.woff2',
-  '.mp4',
-  '.mp3',
-]);
-
 export function isEligibleLink(
   href: string,
   origin: string,
@@ -56,14 +25,5 @@ export function isEligibleLink(
     return false;
   }
 
-  const path = url.pathname;
-  const dotIndex = path.lastIndexOf('.');
-  if (dotIndex !== -1) {
-    const ext = path.slice(dotIndex).toLowerCase();
-    if (NON_HTML_EXTENSIONS.has(ext)) {
-      return false;
-    }
-  }
-
   return true;
 }

package/src/navigate/index.ts

@@ -24,11 +24,17 @@ function shouldIgnoreClick(
   event: MouseEvent,
   anchor: HTMLAnchorElement,
 ): boolean {
-  if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+  if (
+    event.button !== 0 ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
     return true;
   }
 
-  if (anchor.target || anchor.hasAttribute('download')) {
+  if (anchor.hasAttribute('target') || anchor.hasAttribute('download')) {
     return true;
   }
 
@@ -42,6 +48,7 @@ function shouldIgnoreClick(
 
 export default function mountNavigate(window: Window): () => void {
   initNavigation(window);
+  let clearingFragment = false;
 
   // Track scroll position on every scroll event. We keep the latest
   // scrollY per navIndex so that back/forward navigation can restore
@@ -88,6 +95,10 @@ export default function mountNavigate(window: Window): () => void {
         saveScrollPosition(window);
         if (window.location.hash) {
           const state = window.history.state;
+          // WebKit fires popstate synchronously while clearing the fragment.
+          // Ignore that internal navigation so it cannot restore the previous
+          // fragment-free entry's saved scroll position.
+          clearingFragment = true;
           globals.setLocationHash(window, '');
           // Native fragment clearing leaves a trailing #. Keep the authored
           // URL and the current SPA history state on the new entry.
@@ -99,6 +110,10 @@ export default function mountNavigate(window: Window): () => void {
       return;
     }
 
+    if (!anchor.hasAttribute('data-tada-page')) {
+      return;
+    }
+
     event.preventDefault();
 
     // Clear search and close header immediately, before the fetch
@@ -119,11 +134,30 @@ export default function mountNavigate(window: Window): () => void {
   }
 
   function handlePopState(event: PopStateEvent) {
+    if (clearingFragment) {
+      clearingFragment = false;
+      if (!window.location.hash) {
+        return;
+      }
+    }
+
     const newPath = window.location.pathname + window.location.search;
     if (newPath === getCurrentPath()) {
-      const savedY = getSavedLocationScroll(newPath + window.location.hash);
+      const locationKey = newPath + window.location.hash;
+      const savedY = getSavedLocationScroll(locationKey);
       if (typeof savedY === 'number') {
-        window.scrollTo({ top: savedY });
+        // Fragment traversal can apply its native target scroll after popstate.
+        // Restore in the next task so our saved position wins. Capture savedY
+        // now because the native scroll event can update the location map first.
+        window.setTimeout(() => {
+          const currentLocationKey =
+            window.location.pathname +
+            window.location.search +
+            window.location.hash;
+          if (currentLocationKey === locationKey) {
+            window.scrollTo({ top: savedY });
+          }
+        }, 0);
         return;
       }
 

package/src/navigate/lifecycle.ts

@@ -21,15 +21,31 @@ const PER_PAGE_COMPONENTS: Record<
   trace: mountTrace,
   slides: mountSlides,
   print: mountPrint,
-  appearancePicker: mountAppearancePicker,
 };
 
 let cleanups: (() => void)[] = [];
+let appearancePickerMounted = false;
+
+// Navigation calls this during the swap so the new transition snapshot shows
+// enabled switches with the visitor's preferences, rather than build defaults.
+export function mountAppearancePickerForPage(window: Window): void {
+  if (appearancePickerMounted) {
+    return;
+  }
+  appearancePickerMounted = true;
+  try {
+    cleanups.push(mountAppearancePicker(window));
+  } catch (err) {
+    if (__IS_DEV__) {
+      console.error('Failed to mount appearancePicker component:', String(err));
+    }
+  }
+}
 
 export async function mountPerPageComponents(
   window: Window,
 ): Promise<() => void> {
-  cleanups = [];
+  mountAppearancePickerForPage(window);
 
   const entries = Object.entries(PER_PAGE_COMPONENTS);
 
@@ -66,4 +82,5 @@ export function teardownPerPageComponents(): void {
     }
   }
   cleanups = [];
+  appearancePickerMounted = false;
 }

package/src/navigate/runtime.ts

@@ -1,4 +1,9 @@
-import { mountPerPageComponents, teardownPerPageComponents } from './lifecycle';
+import { getResponseValidators, type ResponseValidators } from '../validators';
+import {
+  mountAppearancePickerForPage,
+  mountPerPageComponents,
+  teardownPerPageComponents,
+} from './lifecycle';
 import { globals } from '../globals';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
@@ -93,12 +98,22 @@ export function closeHeaderDetails(document: Document): void {
   }
 }
 
-function dispatchNavigationEvent(window: Window): void {
+export interface NavigationEventDetail {
+  path: string;
+  validators: ResponseValidators;
+}
+
+function dispatchNavigationEvent(
+  window: Window,
+  validators: ResponseValidators,
+): void {
   const CustomEventCtor = (
     window as unknown as { CustomEvent: typeof CustomEvent }
   ).CustomEvent;
   window.dispatchEvent(
-    new CustomEventCtor(NAVIGATION_EVENT, { detail: { path: currentPath } }),
+    new CustomEventCtor(NAVIGATION_EVENT, {
+      detail: { path: currentPath, validators },
+    }),
   );
 }
 
@@ -288,6 +303,7 @@ export async function navigateToUrl(
     teardownPerPageComponents();
     swapContent(document, newDoc);
     updateHead(document, newDoc);
+    mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
 
     if (pushHistory) {
@@ -396,7 +412,7 @@ export async function navigateToUrl(
   }
 
   currentAbortController = null;
-  dispatchNavigationEvent(window);
+  dispatchNavigationEvent(window, getResponseValidators(response));
 }
 
 export async function refreshCurrentPage(window: Window): Promise<void> {

package/src/page-update/index.ts

@@ -72,7 +72,9 @@ export function mountPageUpdate(
   const { container, toast, reloadButton, dismissButton } =
     createToast(document);
 
-  let currentPath = window.location.pathname;
+  let currentPath = window.location.pathname + window.location.search;
+  let navigationGeneration = 0;
+  let disposed = false;
   let baseline = EMPTY_RESPONSE_VALIDATORS;
   let dismissedValidatorKey: string | null = null;
   let nextValidator: ResponseValidators | null = null;
@@ -98,7 +100,7 @@ export function mountPageUpdate(
 
   function scheduleNextCheck() {
     clearTimer();
-    if (globals.isDocumentHidden(document)) {
+    if (disposed || globals.isDocumentHidden(document)) {
       return;
     }
     timer = window.setTimeout(() => {
@@ -145,11 +147,16 @@ export function mountPageUpdate(
     }
 
     const requestedPath = currentPath;
-    let shouldRerun = false;
+    const requestedGeneration = navigationGeneration;
     checkInFlight = true;
     try {
       const validators = await fetchValidators(requestedPath);
-      if (!validators || requestedPath !== currentPath) {
+      if (
+        !validators ||
+        disposed ||
+        requestedGeneration !== navigationGeneration ||
+        requestedPath !== currentPath
+      ) {
         return;
       }
 
@@ -175,30 +182,32 @@ export function mountPageUpdate(
       // best-effort
     } finally {
       checkInFlight = false;
-      if (rerunAfterCurrentCheck && !globals.isDocumentHidden(document)) {
+      if (
+        rerunAfterCurrentCheck &&
+        !disposed &&
+        !globals.isDocumentHidden(document)
+      ) {
         rerunAfterCurrentCheck = false;
-        shouldRerun = true;
-      } else {
+        void checkForUpdate();
+      } else if (requestedGeneration === navigationGeneration) {
         scheduleNextCheck();
       }
     }
-
-    if (shouldRerun) {
-      void checkForUpdate();
-    }
   }
 
-  function resetState() {
-    currentPath = window.location.pathname;
-    baseline = EMPTY_RESPONSE_VALIDATORS;
+  function resetState(
+    validators: ResponseValidators = EMPTY_RESPONSE_VALIDATORS,
+  ) {
+    navigationGeneration++;
+    rerunAfterCurrentCheck = false;
+    currentPath = window.location.pathname + window.location.search;
+    baseline = validators;
     dismissedValidatorKey = null;
     nextValidator = null;
-    hasBaseline = false;
+    hasBaseline = hasUsableResponseValidators(validators);
     hideToast();
     clearTimer();
-    if (!globals.isDocumentHidden(document)) {
-      void checkForUpdate();
-    }
+    scheduleNextCheck();
   }
 
   function handleVisibilityChange() {
@@ -216,13 +225,16 @@ export function mountPageUpdate(
     void checkForUpdate();
   }
 
-  function handleNavigation() {
+  function handleNavigation(event: Event) {
     if (__IS_DEV__) {
       console.log(
         `[page-update] navigation path=${window.location.pathname} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
-    resetState();
+    resetState(
+      (event as CustomEvent<{ validators?: ResponseValidators }>).detail
+        ?.validators,
+    );
   }
 
   function handleDismiss() {
@@ -272,6 +284,7 @@ export function mountPageUpdate(
   }
 
   return () => {
+    disposed = true;
     clearTimer();
     document.removeEventListener('visibilitychange', handleVisibilityChange);
     window.removeEventListener('focus', handleWindowFocus);

package/src/print/{style.scss → _index.scss}

@@ -17,11 +17,13 @@
   }
 
   header,
-  footer {
+  footer,
+  .page-bottom {
     display: none !important;
   }
 
   body > .container {
+    min-height: 0;
     margin-top: 0;
   }
 

package/src/search/index.ts

@@ -141,6 +141,10 @@ function render(
     a.id = `result-${i}`;
     a.className = 'result';
     a.href = result.url;
+    const isGeneratedPage = Boolean(result.template);
+    if (isGeneratedPage) {
+      a.setAttribute('data-tada-page', '');
+    }
     a.tabIndex = 0;
 
     const titleEl = doc.createElement('div');
@@ -177,6 +181,9 @@ function render(
       for (const sub of subsToShow) {
         const subA = doc.createElement('a');
         subA.href = sub.url;
+        if (isGeneratedPage) {
+          subA.setAttribute('data-tada-page', '');
+        }
         subA.className = 'sub-result';
 
         const subTitle = doc.createElement('div');

package/src/slides/{style.scss → _index.scss}

@@ -93,6 +93,7 @@ body.is-presenting [data-slides-annotation-layer] {
 body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
+body.is-presenting .page-bottom,
 body.is-presenting footer,
 body.is-presenting .appearance-pickers,
 body.is-presenting .slides-header,
@@ -177,3 +178,7 @@ body.is-presenting .slide:has(> .trace-widget) > .trace-widget > .trace-body {
   height: 100%;
   min-height: 0;
 }
+
+body.is-presenting > .container {
+  min-height: 0;
+}