@eqtylab/docs 0.3.1 → 0.3.2

package/dist/runtime/lib/theme.ts

@@ -0,0 +1,84 @@
+import CONFIG from 'virtual:eqty-docs/config';
+
+/** These four are repeated in DocsShell.astro's inline script. Change both. */
+export const STORAGE_KEY = 'eqty-docs-theme';
+export const UPDATE_EVENT = 'eqty-docs-theme-change';
+/** Equality's palette keys on this. */
+export const THEME_ATTRIBUTE = 'data-equality-theme';
+/** ThemeToggle.module.css reads this, so the trigger is correct before React loads. */
+export const PREFERENCE_ATTRIBUTE = 'data-eq-theme-pref';
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export type ResolvedTheme = 'light' | 'dark';
+
+const PREFERENCES: readonly ThemePreference[] = ['dark', 'light', 'system'];
+
+function isPreference(value: unknown): value is ThemePreference {
+  return typeof value === 'string' && (PREFERENCES as readonly string[]).includes(value);
+}
+
+function readStored(): string | null {
+  if (!CONFIG.theme.persist) return window.__eqtyDocsTheme ?? null;
+  try {
+    return window.localStorage.getItem(STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function writeStored(preference: ThemePreference): void {
+  if (!CONFIG.theme.persist) {
+    window.__eqtyDocsTheme = preference;
+    return;
+  }
+  try {
+    window.localStorage.setItem(STORAGE_KEY, preference);
+  } catch {
+    // Ignore a storage failure; the theme still applies for this page.
+  }
+}
+
+export function getSystemTheme(): ResolvedTheme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function getThemePreference(): ThemePreference {
+  if (typeof window === 'undefined') return 'system';
+  const stored = readStored();
+  return isPreference(stored) ? stored : 'system';
+}
+
+export function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  return preference === 'system' ? getSystemTheme() : preference;
+}
+
+export function applyTheme(preference: ThemePreference): void {
+  const resolved = resolveTheme(preference);
+  const root = document.documentElement;
+  root.setAttribute(THEME_ATTRIBUTE, resolved);
+  root.setAttribute(PREFERENCE_ATTRIBUTE, preference);
+  // Without this, scrollbars and form controls stay light on a dark page.
+  root.style.colorScheme = resolved;
+}
+
+export function setThemePreference(preference: ThemePreference): void {
+  writeStored(preference);
+  applyTheme(preference);
+  window.dispatchEvent(new CustomEvent(UPDATE_EVENT, { detail: preference }));
+}
+
+export function subscribeToThemePreference(listener: () => void): () => void {
+  if (typeof window === 'undefined') return () => {};
+
+  const onStorage = (event: StorageEvent) => {
+    if (event.key === STORAGE_KEY) listener();
+  };
+
+  window.addEventListener(UPDATE_EVENT, listener);
+  window.addEventListener('storage', onStorage);
+  return () => {
+    window.removeEventListener(UPDATE_EVENT, listener);
+    window.removeEventListener('storage', onStorage);
+  };
+}

package/dist/runtime/routes/docs-md.ts

@@ -0,0 +1,33 @@
+/** Markdown twin of every page, for LLM and agent consumption. */
+import { idToPath } from '@eqtylab/docs/paths';
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import CONFIG from 'virtual:eqty-docs/config';
+
+export async function getStaticPaths() {
+  const entries = await getCollection(
+    'docs',
+    ({ data }: { data: { draft?: boolean; noIndex?: boolean } }) => !data.draft && !data.noIndex
+  );
+  return entries.map((entry) => ({
+    // An empty slug would emit a file literally called ".md".
+    params: { slug: idToPath(entry.id) || 'index' },
+    props: { entry },
+  }));
+}
+
+export const GET: APIRoute = ({ props }) => {
+  const { entry } = props as {
+    entry: { body?: string; data: { title: string; description?: string } };
+  };
+
+  const frontmatter = ['---', `title: ${JSON.stringify(entry.data.title)}`];
+  if (entry.data.description) {
+    frontmatter.push(`description: ${JSON.stringify(entry.data.description)}`);
+  }
+  frontmatter.push(`source: ${JSON.stringify(CONFIG.title)}`, '---', '');
+
+  return new Response(frontmatter.join('\n') + (entry.body ?? ''), {
+    headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
+  });
+};

package/dist/runtime/routes/docs.astro

@@ -0,0 +1,92 @@
+---
+import { getCollection, render } from 'astro:content';
+import CONFIG from 'virtual:eqty-docs/config';
+import { docsHref, idToPath, joinPath, normalizePath } from '@eqtylab/docs/paths';
+import DocsPage from '../layouts/DocsPage.astro';
+import { breadcrumbsFor, buildTocTree, docsNav, pathContext, prevNextFor } from '../lib/nav-data.ts';
+import { firstParagraph } from '../lib/summary.ts';
+import { mdxComponents } from '../lib/mdx-components.ts';
+import PageFooter from '../chrome/PageFooter.astro';
+import Prose from '../chrome/Prose.astro';
+
+export async function getStaticPaths() {
+  const entries = await getCollection('docs', ({ data }: { data: { draft?: boolean } }) =>
+    import.meta.env.DEV ? true : !data.draft
+  );
+
+  const owned = new Set((CONFIG.ownedByConsumer ?? []).map(normalizePath));
+
+  return entries
+    // Astro does not de-duplicate injected routes against consumer pages.
+    .filter((entry) => !owned.has(normalizePath(docsHref(entry.id, pathContext()))))
+    .map((entry) => ({
+      // `undefined` (not '') is how a rest param matches the empty path.
+      params: { slug: idToPath(entry.id) || undefined },
+      props: { entry },
+    }));
+}
+
+const { entry } = Astro.props;
+const { Content, headings } = await render(entry);
+
+const tocConfig = entry.data.tableOfContents ?? CONFIG.tableOfContents;
+const showToc = tocConfig !== false;
+const toc = showToc
+  ? buildTocTree(headings, {
+      minLevel: (tocConfig as { minLevel?: number })?.minLevel ?? 2,
+      maxLevel: (tocConfig as { maxLevel?: number })?.maxLevel ?? 3,
+    })
+  : [];
+
+const nav = await docsNav(Astro.url.pathname);
+const splash = entry.data.template === 'splash';
+
+// Trail is [group, ..., page]; a length of one means the page has no section above it.
+const trail = breadcrumbsFor(nav, Astro.url.pathname);
+const crumbs = trail.length > 1 ? trail.map((node) => node.label).join(' › ') : undefined;
+
+// Ancestors only. `crumbs` above keeps the page as well, because a search result row
+// needs the page name to identify itself. The two diverge on purpose.
+const renderedTrail = trail.slice(0, -1).map((node) => ({ label: node.label, href: node.href }));
+
+// Indexed only, never rendered: a page with no `description` still needs a result summary.
+const fallbackSummary = entry.data.description ? undefined : firstParagraph(entry.body);
+
+const { prev, next } = CONFIG.footer.showPrevNext ? prevNextFor(nav, Astro.url.pathname) : {};
+
+// `editUrl` is a base; the content path is appended. The slice is taken at the
+// consumer's own content directory, which is configurable.
+const contentPath = entry.filePath?.split(`${CONFIG.contentDir}/`).pop();
+const editHref =
+  CONFIG.footer.editUrl && contentPath
+    ? `${CONFIG.footer.editUrl.replace(/\/$/, '')}/${contentPath}`
+    : undefined;
+
+// File-shaped (/x/label.md) beside the directory-shaped page; 'index' must match docs-md.ts.
+const markdownHref = CONFIG.routing.markdownTwins
+  ? `${joinPath(import.meta.env.BASE_URL, CONFIG.pathPrefix, idToPath(entry.id) || 'index')}.md`
+  : undefined;
+---
+
+<DocsPage
+  title={entry.data.title}
+  description={entry.data.description}
+  nav={nav}
+  toc={toc}
+  showToc={showToc}
+  splash={splash}
+>
+  <Prose
+    title={entry.data.title}
+    description={entry.data.description}
+    deprecated={entry.data.deprecated}
+    markdownHref={markdownHref}
+    source={entry.body}
+    crumbs={crumbs}
+    trail={renderedTrail}
+    fallbackSummary={fallbackSummary}
+  >
+    <Content components={mdxComponents} />
+  </Prose>
+  {!splash && <PageFooter prev={prev} next={next} editHref={editHref} text={CONFIG.footer.text} />}
+</DocsPage>

package/dist/runtime/routes/llms-txt.ts

@@ -0,0 +1,38 @@
+/** An index of every page, in the llms.txt convention. */
+import { docsHref } from '@eqtylab/docs/paths';
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import CONFIG from 'virtual:eqty-docs/config';
+
+export const GET: APIRoute = async (ctx) => {
+  const entries = await getCollection(
+    'docs',
+    ({ data }: { data: { draft?: boolean; noIndex?: boolean } }) => !data.draft && !data.noIndex
+  );
+
+  const paths = {
+    base: import.meta.env.BASE_URL,
+    pathPrefix: CONFIG.pathPrefix,
+  };
+  const origin = (ctx.site ?? new URL(ctx.request.url)).origin;
+
+  const sorted = [...entries].sort((a, b) => a.data.title.localeCompare(b.data.title));
+
+  const lines = [
+    `# ${CONFIG.title}`,
+    '',
+    ...(CONFIG.description ? [`> ${CONFIG.description}`, ''] : []),
+    '## Pages',
+    '',
+    ...sorted.map((entry) => {
+      const href = docsHref(entry.id, paths).replace(/\/$/, '');
+      const suffix = entry.data.description ? `: ${entry.data.description}` : '';
+      return `- [${entry.data.title}](${origin}${href}.md)${suffix}`;
+    }),
+    '',
+  ];
+
+  return new Response(lines.join('\n'), {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+  });
+};

package/dist/runtime/routes/not-found.astro

@@ -0,0 +1,16 @@
+---
+import CONFIG from 'virtual:eqty-docs/config';
+import { withBase } from '@eqtylab/docs/paths';
+import DocsShell from '../layouts/DocsShell.astro';
+import Header from '../chrome/Header.astro';
+import NotFoundBody from '../chrome/NotFoundBody.tsx';
+
+const homeHref = withBase(CONFIG.pathPrefix ? `/${CONFIG.pathPrefix}/` : '/', {
+  base: import.meta.env.BASE_URL,
+});
+---
+
+<DocsShell title="Page not found" noIndex>
+  <Header />
+  <NotFoundBody homeHref={homeHref} client:load />
+</DocsShell>

package/dist/runtime/scripts/eq-copy.ts

@@ -0,0 +1,27 @@
+/** Copy-to-clipboard for static code fences. One delegated listener, so it survives view transitions. */
+const COPIED_MS = 1600;
+
+function findFence(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) return null;
+  return target.closest<HTMLElement>('[data-eq-copy]');
+}
+
+document.addEventListener('click', async (event) => {
+  const trigger = (event.target as Element | null)?.closest('button');
+  if (!trigger) return;
+
+  const fence = findFence(trigger);
+  if (!fence) return;
+
+  const code = fence.dataset.eqCopy;
+  if (!code) return;
+
+  event.preventDefault();
+  try {
+    await navigator.clipboard.writeText(code);
+    fence.setAttribute('data-copied', '');
+    window.setTimeout(() => fence.removeAttribute('data-copied'), COPIED_MS);
+  } catch {
+    // Clipboard denied; do not show a success state.
+  }
+});

package/dist/runtime/scripts/eq-highlight.ts

@@ -0,0 +1,24 @@
+/**
+ * Starts highlighting for server-rendered code blocks, whose `useEffect` never
+ * runs without hydration. A custom element so it survives view transitions.
+ */
+import { scheduleHighlight } from '@eqtylab/equality';
+
+class EqHighlight extends HTMLElement {
+  // Captured on connect: a detached element no longer knows its tree, and the rescan on removal drops stale ranges.
+  #root?: Node;
+
+  connectedCallback() {
+    this.#root = this.getRootNode();
+    void scheduleHighlight(this.#root);
+  }
+
+  disconnectedCallback() {
+    void scheduleHighlight(this.#root);
+    this.#root = undefined;
+  }
+}
+
+if (!customElements.get('eq-highlight')) {
+  customElements.define('eq-highlight', EqHighlight);
+}

package/dist/runtime/scripts/eq-nav-drawer.ts

@@ -0,0 +1,31 @@
+/**
+ * With no script the Popover API opens and closes the drawer, shuts it on Escape or a
+ * click outside, and paints it above everything else. Two things it does not give,
+ * both verified in the browser suite rather than assumed:
+ *
+ * 1. `aria-expanded` on the invoker. No engine adds it, so a screen reader hears a
+ *    button with no disclosure state.
+ * 2. Focus return on dismiss in WebKit. Chromium restores focus to the invoker;
+ *    desktop Safari, mobile Safari and iPad all leave it on `<body>`, which strands a
+ *    keyboard user exactly the way `DialogContainer` does. See equality-dialog-repair.
+ *
+ * Both are reflected off the `toggle` event so they track every dismissal path,
+ * rather than being set once and going stale.
+ */
+const drawer = document.getElementById('eq-nav-drawer');
+const trigger = document.querySelector<HTMLElement>('[popovertarget="eq-nav-drawer"]');
+
+if (drawer && trigger) {
+  trigger.setAttribute('aria-expanded', 'false');
+
+  drawer.addEventListener('toggle', (event) => {
+    const open = (event as ToggleEvent).newState === 'open';
+    trigger.setAttribute('aria-expanded', String(open));
+
+    // Only when the engine left focus nowhere. Clicking a link inside the drawer
+    // navigates away, and light-dismissing onto another control should keep it.
+    if (!open && document.activeElement === document.body) {
+      trigger.focus();
+    }
+  });
+}

package/dist/runtime/scripts/eq-nav-group.ts

@@ -0,0 +1,52 @@
+/**
+ * Animates a navigation group open and closed, on top of `<details>`.
+ *
+ * Do not swap this for Equality's `MotionCollapsibleContent`. It measures after mount
+ * and animates up from zero, so a group that starts open expands on every page load.
+ *
+ * Duration and easing are that component's, so the motion still matches.
+ */
+const DURATION = 300;
+const EASING = 'ease-in-out';
+
+function wire(group: HTMLDetailsElement) {
+  const summary = group.querySelector('summary');
+  const panel = summary?.nextElementSibling;
+  if (!summary || !(panel instanceof HTMLElement)) return;
+
+  let running: Animation | null = null;
+
+  summary.addEventListener('click', (event) => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    // The browser would toggle `open` immediately; the close has to outlive that.
+    event.preventDefault();
+    running?.cancel();
+
+    const opening = !group.open;
+    // Measured while open in both directions, so interrupting mid-animation does not
+    // snap to a stale height.
+    if (opening) group.open = true;
+    const height = panel.scrollHeight;
+    const from = opening ? 0 : panel.getBoundingClientRect().height;
+
+    panel.style.overflow = 'hidden';
+    running = panel.animate(
+      {
+        height: [`${from}px`, `${opening ? height : 0}px`],
+        opacity: [opening ? 0 : 1, opening ? 1 : 0],
+      },
+      { duration: DURATION, easing: EASING }
+    );
+
+    running.onfinish = () => {
+      running = null;
+      panel.style.removeProperty('overflow');
+      if (!opening) group.open = false;
+    };
+  });
+}
+
+for (const group of document.querySelectorAll<HTMLDetailsElement>('details[data-eq-nav-group]')) {
+  wire(group);
+}

package/dist/runtime/scripts/eq-tabs.ts

@@ -0,0 +1,114 @@
+/**
+ * Tab switching for server-rendered `<Tabs>`. Equality renders them with `staticRender`, so
+ * every panel is already in the DOM and selecting one is a `data-state` flip - there is no
+ * React on the page to do it. One delegated listener, so it survives view transitions.
+ */
+const STORAGE_PREFIX = 'eqty-docs-tabs:';
+
+function setOf(node: Element | null): HTMLElement | null {
+  return node?.closest<HTMLElement>('[data-eq-tabs]') ?? null;
+}
+
+function triggersIn(set: HTMLElement): HTMLElement[] {
+  return Array.from(set.querySelectorAll<HTMLElement>('[role="tab"]'));
+}
+
+function panelFor(trigger: HTMLElement): HTMLElement | null {
+  const id = trigger.getAttribute('aria-controls');
+  return id ? document.getElementById(id) : null;
+}
+
+function select(set: HTMLElement, chosen: HTMLElement, focus = false): void {
+  for (const trigger of triggersIn(set)) {
+    const active = trigger === chosen;
+    const state = active ? 'active' : 'inactive';
+    trigger.setAttribute('aria-selected', String(active));
+    trigger.setAttribute('data-state', state);
+    // Roving tabindex: the strip is one tab stop, arrows move within it.
+    trigger.tabIndex = active ? 0 : -1;
+    panelFor(trigger)?.setAttribute('data-state', state);
+  }
+  if (focus) chosen.focus();
+}
+
+function labelOf(trigger: HTMLElement): string {
+  return trigger.dataset.eqTabLabel ?? '';
+}
+
+function read(key: string): string | null {
+  try {
+    return window.localStorage.getItem(STORAGE_PREFIX + key);
+  } catch {
+    return null;
+  }
+}
+
+function write(key: string, label: string): void {
+  try {
+    window.localStorage.setItem(STORAGE_PREFIX + key, label);
+  } catch {
+    // Storage denied; syncing still works for this page view.
+  }
+}
+
+/** Every other set sharing the key follows. A set without that label is left alone. */
+function sync(key: string, label: string, origin: HTMLElement | null): void {
+  for (const set of document.querySelectorAll<HTMLElement>('[data-eq-tabs][data-sync-key]')) {
+    if (set === origin || set.dataset.syncKey !== key) continue;
+    const match = triggersIn(set).find((trigger) => labelOf(trigger) === label);
+    if (match) select(set, match);
+  }
+}
+
+function activate(set: HTMLElement, trigger: HTMLElement, focus = false): void {
+  select(set, trigger, focus);
+  const key = set.dataset.syncKey;
+  if (!key) return;
+  const label = labelOf(trigger);
+  write(key, label);
+  sync(key, label, set);
+}
+
+document.addEventListener('click', (event) => {
+  const trigger = (event.target as Element | null)?.closest<HTMLElement>('[role="tab"]');
+  const set = setOf(trigger ?? null);
+  if (!trigger || !set) return;
+  event.preventDefault();
+  activate(set, trigger);
+});
+
+const MOVES: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 };
+
+document.addEventListener('keydown', (event) => {
+  const trigger = (event.target as Element | null)?.closest<HTMLElement>('[role="tab"]');
+  const set = setOf(trigger ?? null);
+  if (!trigger || !set) return;
+
+  const triggers = triggersIn(set);
+  const from = triggers.indexOf(trigger);
+  if (from < 0) return;
+
+  let to: number;
+  if (event.key in MOVES) {
+    to = (from + (MOVES[event.key] as number) + triggers.length) % triggers.length;
+  } else if (event.key === 'Home') {
+    to = 0;
+  } else if (event.key === 'End') {
+    to = triggers.length - 1;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+  activate(set, triggers[to] as HTMLElement, true);
+});
+
+// Restore remembered choices. Runs after first paint, so a non-default choice visibly settles.
+for (const set of document.querySelectorAll<HTMLElement>('[data-eq-tabs][data-sync-key]')) {
+  const key = set.dataset.syncKey;
+  if (!key) continue;
+  const stored = read(key);
+  if (!stored) continue;
+  const match = triggersIn(set).find((trigger) => labelOf(trigger) === stored);
+  if (match) select(set, match);
+}

package/dist/runtime/scripts/eq-toc.ts

@@ -0,0 +1,166 @@
+/**
+ * Scroll-spy for the table of contents, and the lit segment of its rail.
+ *
+ * Do not swap this for an IntersectionObserver band. A band leaves nothing active at
+ * load, and nothing between two headings.
+ *
+ * The segment is a dash on a path tracing the whole rail, elbows included, so it
+ * travels through corners. Its numbers are path length, not pixels.
+ */
+
+/** Scaling by distance is what makes a corner take visible time. */
+const MS_PER_PX = 8;
+const MIN_MS = 220;
+const MAX_MS = 520;
+const EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
+
+interface Span {
+  start: number;
+  length: number;
+}
+
+function measureRail(root: HTMLElement, path: SVGPathElement) {
+  const origin = root.getBoundingClientRect();
+  const spans = new Map<string, Span>();
+  const parts: string[] = [];
+  let cursor = 0;
+
+  const rows = root.querySelectorAll<HTMLElement>('a[data-slug], [data-eq-elbow]');
+  for (const row of rows) {
+    const box = row.getBoundingClientRect();
+    const top = box.top - origin.top;
+    const bottom = box.bottom - origin.top;
+    const direction = row.getAttribute('data-eq-elbow');
+
+    if (direction) {
+      const left = box.left - origin.left;
+      const right = box.right - origin.left;
+      const [from, to] = direction === 'in' ? [left, right] : [right, left];
+      const mid = (top + bottom) / 2;
+      if (parts.length === 0) parts.push(`M ${from} ${top}`);
+      parts.push(`C ${from} ${mid}, ${to} ${mid}, ${to} ${bottom}`);
+    } else {
+      // The border's centre line, so the lit segment covers the grey one exactly.
+      const x = box.left - origin.left + parseFloat(getComputedStyle(row).borderLeftWidth) / 2;
+      if (parts.length === 0) parts.push(`M ${x} ${top}`);
+      parts.push(`L ${x} ${bottom}`);
+    }
+
+    path.setAttribute('d', parts.join(' '));
+    const end = path.getTotalLength();
+    const slug = row.dataset.slug;
+    if (!direction && slug) spans.set(slug, { start: cursor, length: end - cursor });
+    cursor = end;
+  }
+
+  return { spans, total: cursor };
+}
+
+class EqToc extends HTMLElement {
+  #teardown?: () => void;
+
+  connectedCallback() {
+    const slugs = (this.dataset.slugs ?? '').split(',').filter(Boolean);
+
+    const links = new Map<string, HTMLAnchorElement>();
+    for (const link of this.querySelectorAll<HTMLAnchorElement>('a[data-slug]')) {
+      if (link.dataset.slug) links.set(link.dataset.slug, link);
+    }
+
+    const targets = slugs
+      .map((slug) => document.getElementById(slug))
+      .filter((el): el is HTMLElement => el !== null);
+    if (targets.length === 0) return;
+
+    const path = this.querySelector<SVGPathElement>('[data-eq-toc-rail]');
+    const rails = this.querySelector<HTMLElement>('[data-eq-toc-rails]');
+    const still = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    let spans = new Map<string, Span>();
+    let total = 0;
+    let previous: number | null = null;
+
+    const remeasure = () => {
+      if (!path || !rails) return;
+      previous = null;
+      ({ spans, total } = measureRail(rails, path));
+    };
+
+    const light = (slug: string) => {
+      if (!path) return;
+      const span = spans.get(slug);
+      if (!span) return;
+
+      if (previous === null || still.matches) {
+        // No slide into the first position, and none under reduced motion.
+        path.style.transition = 'none';
+      } else {
+        const ms = Math.min(
+          MAX_MS,
+          Math.max(MIN_MS, Math.round(Math.abs(span.start - previous) * MS_PER_PX))
+        );
+        path.style.transition = `stroke-dasharray ${ms}ms ${EASE}, stroke-dashoffset ${ms}ms ${EASE}`;
+      }
+
+      path.style.strokeDasharray = `${span.length} ${total}`;
+      path.style.strokeDashoffset = `${-span.start}`;
+      if (previous === null) {
+        // Commit the jump before the fade, so the segment appears in place.
+        void path.getBoundingClientRect();
+        path.style.opacity = '1';
+      }
+      previous = span.start;
+    };
+
+    let frame = 0;
+    const paint = () => {
+      frame = 0;
+      // Clicking a heading lands it 96px down (scroll-mt-24), so the line sits below.
+      const line = window.innerHeight * 0.2;
+      let active = targets[0];
+      for (const target of targets) {
+        if (target.getBoundingClientRect().top <= line) active = target;
+        else break;
+      }
+      for (const [slug, link] of links) {
+        if (slug === active.id) {
+          link.setAttribute('data-active', '');
+          // `location` is the ARIA value for the current place within a set.
+          link.setAttribute('aria-current', 'location');
+        } else {
+          link.removeAttribute('data-active');
+          link.removeAttribute('aria-current');
+        }
+      }
+      light(active.id);
+    };
+    const schedule = () => {
+      if (frame === 0) frame = requestAnimationFrame(paint);
+    };
+
+    const onResize = () => {
+      remeasure();
+      schedule();
+    };
+
+    window.addEventListener('scroll', schedule, { passive: true });
+    window.addEventListener('resize', onResize, { passive: true });
+    remeasure();
+    paint();
+
+    this.#teardown = () => {
+      window.removeEventListener('scroll', schedule);
+      window.removeEventListener('resize', onResize);
+      if (frame !== 0) cancelAnimationFrame(frame);
+    };
+  }
+
+  disconnectedCallback() {
+    this.#teardown?.();
+    this.#teardown = undefined;
+  }
+}
+
+if (!customElements.get('eq-toc')) {
+  customElements.define('eq-toc', EqToc);
+}