@abreen/tada 1.17.1 → 1.18.1

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}

@@ -2,6 +2,11 @@ $shift: 8px;
 $duration: 150ms;
 $movement-easing: cubic-bezier(0.2, 0, 0, 1);
 
+:root {
+  --page-transition-duration: #{$duration};
+  --page-transition-movement-easing: #{$movement-easing};
+}
+
 @keyframes page-fade-out {
   to {
     opacity: 0;
@@ -45,12 +50,13 @@ $movement-easing: cubic-bezier(0.2, 0, 0, 1);
 ::view-transition-old(page-title),
 ::view-transition-new(page-title),
 ::view-transition-old(page-info),
-::view-transition-new(page-info),
-::view-transition-old(page-breadcrumb),
-::view-transition-new(page-breadcrumb) {
+::view-transition-new(page-info) {
   animation-duration: $duration;
 }
 
+// Breadcrumbs use per-item named rules installed by the navigator. Shared
+// items stay opaque and preserve their position; removed/added suffixes fade.
+
 // The site-wide banner does not change between pages. Keep it out of the root
 // slide and pin its named transition layer in place without a crossfade.
 .site-banner {
@@ -68,6 +74,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/breadcrumbs.ts

@@ -0,0 +1,129 @@
+interface BreadcrumbIdentity {
+  label: string;
+  url: string;
+}
+
+interface BreadcrumbItem extends BreadcrumbIdentity {
+  element: HTMLElement;
+}
+
+export function breadcrumbPageKey(href: string, pageUrl: string): string {
+  const url = new URL(href, pageUrl);
+  // Fragments identify positions on the same page; query strings can identify
+  // different content. URL serialization also resolves relative paths/spaces.
+  return url.origin + url.pathname + url.search;
+}
+
+export function sharedBreadcrumbCount(
+  oldItems: readonly BreadcrumbIdentity[],
+  newItems: readonly BreadcrumbIdentity[],
+): number {
+  let count = 0;
+  while (
+    count < Math.min(oldItems.length, newItems.length) &&
+    oldItems[count].url === newItems[count].url &&
+    oldItems[count].label === newItems[count].label
+  ) {
+    count++;
+  }
+  return count;
+}
+
+export function getBreadcrumbItems(
+  document: Document,
+  pageUrl: string,
+): BreadcrumbItem[] {
+  return Array.from(
+    document.querySelectorAll<HTMLElement>('nav.breadcrumbs ol > li'),
+  ).flatMap(element => {
+    const text = element.querySelector('a, [aria-current="page"]');
+    if (!text) {
+      return [];
+    }
+    const href = text.getAttribute('href') ?? pageUrl;
+    return [
+      {
+        element,
+        label: (text.textContent ?? '').trim().replace(/\s+/g, ' '),
+        url: breadcrumbPageKey(href, pageUrl),
+      },
+    ];
+  });
+}
+
+export function setBreadcrumbTransitionNames(
+  document: Document,
+  pageUrl: string,
+  sharedCount: number,
+  side: 'enter' | 'leave',
+): void {
+  const breadcrumb = document.querySelector<HTMLElement>('nav.breadcrumbs');
+  if (!breadcrumb) {
+    return;
+  }
+  getBreadcrumbItems(document, pageUrl).forEach((item, index) => {
+    const kind = index < sharedCount ? 'shared' : side;
+    item.element.style.viewTransitionName = `page-breadcrumb-${kind}-${index}`;
+  });
+}
+
+export function prepareBreadcrumbTransitionStyles(
+  document: Document,
+  oldCount: number,
+  newCount: number,
+  sharedCount: number,
+): void {
+  if (!oldCount && !newCount) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.setAttribute('data-breadcrumb-transition-styles', '');
+  const rules: string[] = [];
+  const duration = 'var(--page-transition-duration)';
+  for (let index = 0; index < sharedCount; index++) {
+    const name = `page-breadcrumb-shared-${index}`;
+    rules.push(`
+      ::view-transition-group(${name}) {
+        animation-duration: ${duration};
+        animation-timing-function: var(--page-transition-movement-easing);
+      }
+      ::view-transition-old(${name}), ::view-transition-new(${name}) {
+        mix-blend-mode: normal;
+        animation: none;
+      }
+      ::view-transition-old(${name}) { display: none; }
+      ::view-transition-old(${name}):only-child {
+        display: block;
+        animation: page-fade-out ${duration} ease-in both;
+      }
+      ::view-transition-new(${name}):only-child {
+        animation: page-fade-in ${duration} ease-out both;
+      }
+    `);
+  }
+  for (let index = sharedCount; index < oldCount; index++) {
+    rules.push(`::view-transition-old(page-breadcrumb-leave-${index}) {
+      mix-blend-mode: normal;
+      animation: page-fade-out ${duration} ease-in both;
+    }`);
+  }
+  for (let index = sharedCount; index < newCount; index++) {
+    rules.push(`::view-transition-new(page-breadcrumb-enter-${index}) {
+      mix-blend-mode: normal;
+      animation: page-fade-in ${duration} ease-out both;
+    }`);
+  }
+  // Exact names keep these rules compatible with the bundled CSS parser, which
+  // does not yet accept view-transition-class selectors. Names use indices only.
+  style.textContent = rules.join('\n');
+  document.head.appendChild(style);
+}
+
+export function cleanupBreadcrumbTransitionNames(document: Document): void {
+  for (const element of document.querySelectorAll<HTMLElement>(
+    'nav.breadcrumbs, nav.breadcrumbs li',
+  )) {
+    element.style.removeProperty('view-transition-name');
+  }
+  document.querySelector('[data-breadcrumb-transition-styles]')?.remove();
+}

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;
 }