@abreen/tada 1.13.2 → 1.13.7

package/build/bundle.ts

@@ -9,10 +9,20 @@ import {
   getDistDir,
   toPosix,
 } from './utils/paths';
-import { deriveTheme, deriveLinkHue } from './utils/derive-theme';
+import {
+  deriveTheme,
+  deriveLinkHue,
+  deriveTraceLineActiveHue,
+} from './utils/derive-theme';
 import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
+import pkg from '../package.json' with { type: 'json' };
+
+export function getBundleNaming(): string {
+  const version = pkg.version.replace(/[^a-zA-Z0-9.-]/g, '-');
+  return `[name].bundle.tada-${version}.[ext]`;
+}
 
 function formatCssNumber(value: number, precision = 4): string {
   if (Number.isInteger(value)) {
@@ -40,6 +50,9 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const linkColorHover = `hsl(${linkHue}deg 34% 60%)`;
   const linkColorDark = `hsl(${linkHue}deg 50% 72%)`;
   const linkColorHoverDark = `hsl(${linkHue}deg 40% 80%)`;
+  const traceLineActiveHue = formatCssNumber(deriveTraceLineActiveHue(tintHue));
+  const bgTraceLineActive = `hsl(${traceLineActiveHue}deg 100% 86%)`;
+  const bgTraceLineActiveDark = `hsl(${traceLineActiveHue}deg 90% 18%)`;
 
   const rendered = _.template(template)({
     ...theme,
@@ -54,6 +67,8 @@ function renderThemeScss(siteVariables: SiteVariables): string {
     linkColorHover,
     linkColorDark,
     linkColorHoverDark,
+    bgTraceLineActive,
+    bgTraceLineActiveDark,
   });
 
   const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tada-'));
@@ -109,7 +124,7 @@ export async function bundle(
   const result = await Bun.build({
     entrypoints,
     outdir: resolvedDistDir,
-    naming: '[name].bundle.[ext]',
+    naming: getBundleNaming(),
     minify: mode === 'production',
     sourcemap: isDev ? 'inline' : 'none',
     define: createDefine(siteVariables, isDev),

package/build/generate-content-assets.ts

@@ -35,6 +35,7 @@ export class ContentRenderer {
     string,
     {
       manifestUrl: string;
+      artifactId: string;
       highlightedSource: string;
       totalSteps: number;
       mtime: number;

package/build/types.d.ts

@@ -97,6 +97,7 @@ export interface RenderPlainTextOptions {
     string,
     {
       manifestUrl: string;
+      artifactId: string;
       highlightedSource: string;
       totalSteps: number;
       mtime: number;

package/build/utils/derive-theme.ts

@@ -16,6 +16,8 @@ const DARK_TEXT_L_MAX = 0.82;
 
 const LINK_ANCHOR_HUE = 212;
 const LINK_TINT_BLEND = 0.05;
+const TRACE_LINE_ACTIVE_ANCHOR_HUE = 52;
+const TRACE_LINE_ACTIVE_TINT_BLEND = 0.1;
 
 function clamp(v: number, min: number, max: number): number {
   return Math.min(Math.max(v, min), max);
@@ -83,6 +85,14 @@ export function deriveLinkHue(tintHue: number): number {
   return (LINK_ANCHOR_HUE + diff * LINK_TINT_BLEND + 360) % 360;
 }
 
+export function deriveTraceLineActiveHue(tintHue: number): number {
+  const diff = ((tintHue - TRACE_LINE_ACTIVE_ANCHOR_HUE + 540) % 360) - 180;
+  return (
+    (TRACE_LINE_ACTIVE_ANCHOR_HUE + diff * TRACE_LINE_ACTIVE_TINT_BLEND + 360) %
+    360
+  );
+}
+
 export function getTextOnColor(cssColor: string): '#fff' | '#000' {
   const parsed = parse(cssColor);
   if (!parsed) {

package/build/utils/render.ts

@@ -432,6 +432,7 @@ function renderPlainTextContent(
       string,
       {
         manifestUrl: string;
+        artifactId: string;
         highlightedSource: string;
         totalSteps: number;
         mtime: number;

package/build/utils/trace-core.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { createHash } from 'crypto';
 import { renderCodeSegment } from './code';
 import { splitLines } from './literate-java';
 import { normalizeOutputPath } from './paths';
@@ -14,18 +15,46 @@ export interface ChunkTraceOutputOptions {
   ignoreFields?: Record<string, string[]>;
 }
 
+export interface ChunkTraceOutputResult {
+  manifest: TraceManifest;
+  artifactId: string;
+  outputPaths: string[];
+}
+
+function hashTraceFiles(files: { name: string; content: string }[]): string {
+  const hasher = createHash('sha256');
+  for (const file of files) {
+    hasher.update(file.name, 'utf8');
+    hasher.update('\0', 'utf8');
+    hasher.update(file.content, 'utf8');
+    hasher.update('\0', 'utf8');
+  }
+  return `sha256-${hasher.digest('hex').slice(0, 16)}`;
+}
+
+function buildTraceOutputPath(
+  relDir: string,
+  traceName: string,
+  artifactId: string,
+  fileName: string,
+): string {
+  return [relDir, '_traces', traceName, artifactId, fileName]
+    .filter(Boolean)
+    .join('/');
+}
+
 export function chunkTraceOutput(
   output: string,
   traceOutputDir: string,
+  relDir: string,
+  traceName: string,
   sourceFile: string,
   source: string,
   options: ChunkTraceOutputOptions = {},
-): TraceManifest {
+): ChunkTraceOutputResult {
   const chunkSize = options.chunkSize ?? DEFAULT_CHUNK_SIZE;
   const ignoreFields = options.ignoreFields ?? {};
 
-  fs.mkdirSync(traceOutputDir, { recursive: true });
-
   const lines = output
     .trim()
     .split('\n')
@@ -46,26 +75,27 @@ export function chunkTraceOutput(
 
   let chunkEntries: TraceChunkEntry[] = [];
   let chunkIndex = 0;
+  const chunkFiles: { name: string; content: string }[] = [];
 
   for (const step of allSteps) {
     const svg = generateStepSvg(step, layout);
     chunkEntries.push({ line: step.line, stdout: step.stdout, svg });
 
     if (chunkEntries.length >= chunkSize) {
-      fs.writeFileSync(
-        path.join(traceOutputDir, `chunk-${chunkIndex}.json`),
-        JSON.stringify(chunkEntries),
-      );
+      chunkFiles.push({
+        name: `chunk-${chunkIndex}.json`,
+        content: JSON.stringify(chunkEntries),
+      });
       chunkEntries = [];
       chunkIndex++;
     }
   }
 
   if (chunkEntries.length > 0) {
-    fs.writeFileSync(
-      path.join(traceOutputDir, `chunk-${chunkIndex}.json`),
-      JSON.stringify(chunkEntries),
-    );
+    chunkFiles.push({
+      name: `chunk-${chunkIndex}.json`,
+      content: JSON.stringify(chunkEntries),
+    });
   }
 
   const manifest: TraceManifest = {
@@ -76,12 +106,26 @@ export function chunkTraceOutput(
     lineToSteps,
   };
 
-  fs.writeFileSync(
-    path.join(traceOutputDir, 'manifest.json'),
-    JSON.stringify(manifest),
-  );
+  const manifestFile = {
+    name: 'manifest.json',
+    content: JSON.stringify(manifest),
+  };
+  const files = [manifestFile, ...chunkFiles];
+  const artifactId = hashTraceFiles(files);
+  const artifactDir = path.join(traceOutputDir, artifactId);
 
-  return manifest;
+  fs.mkdirSync(artifactDir, { recursive: true });
+  for (const file of files) {
+    fs.writeFileSync(path.join(artifactDir, file.name), file.content);
+  }
+
+  return {
+    manifest,
+    artifactId,
+    outputPaths: files.map(file =>
+      buildTraceOutputPath(relDir, traceName, artifactId, file.name),
+    ),
+  };
 }
 
 export function highlightTraceSource(
@@ -96,16 +140,25 @@ export function highlightTraceSource(
 export function getTraceOutputPaths(
   relDir: string,
   traceName: string,
+  artifactId: string,
   totalSteps: number,
 ): string[] {
-  const baseDir = [relDir, '_traces', traceName].filter(Boolean).join('/');
-  const outputPaths = [`${baseDir}/manifest.json`];
+  const outputPaths = [
+    buildTraceOutputPath(relDir, traceName, artifactId, 'manifest.json'),
+  ];
   for (
     let chunkIndex = 0;
     chunkIndex * DEFAULT_CHUNK_SIZE < totalSteps;
     chunkIndex++
   ) {
-    outputPaths.push(`${baseDir}/chunk-${chunkIndex}.json`);
+    outputPaths.push(
+      buildTraceOutputPath(
+        relDir,
+        traceName,
+        artifactId,
+        `chunk-${chunkIndex}.json`,
+      ),
+    );
   }
   return outputPaths;
 }
@@ -148,18 +201,18 @@ export function materializeTraceOutputs({
 export function buildManifestUrl({
   relDir,
   traceName,
+  artifactId,
   applyBasePath,
 }: {
   relDir: string;
   traceName: string;
+  artifactId: string;
   applyBasePath: (subPath: string) => string;
 }): string {
   return applyBasePath(
     normalizeOutputPath(
       '/' +
-        [relDir, '_traces', traceName, 'manifest.json']
-          .filter(Boolean)
-          .join('/'),
+        buildTraceOutputPath(relDir, traceName, artifactId, 'manifest.json'),
     ),
   );
 }
@@ -187,17 +240,13 @@ export function renderTraceWidgetHtml({
     `<button class="trace-btn trace-first" disabled tabindex="-1" aria-label="First step" title="First step">${iconFirst}</button>` +
     `<button class="trace-btn trace-prev" disabled tabindex="-1" aria-label="Previous step" title="Previous step">${iconPrev}</button>` +
     `<span class="trace-step-counter"${counterStyle}>${counterContent}</span>` +
-    (disabled
-      ? `<button class="trace-btn trace-next" disabled tabindex="-1" aria-label="Next step" title="Next step">${iconNext}</button>`
-      : `<button class="trace-btn trace-next" aria-label="Next step" title="Next step">${iconNext}</button>`) +
-    (disabled
-      ? `<button class="trace-btn trace-last" disabled tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`
-      : `<button class="trace-btn trace-last" tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`);
+    `<button class="trace-btn trace-next" disabled tabindex="-1" aria-label="Next step" title="Next step">${iconNext}</button>` +
+    `<button class="trace-btn trace-last" disabled tabindex="-1" aria-label="Last step" title="Last step">${iconLast}</button>`;
   const wrapperAttrs = manifestUrl
     ? ` data-trace-manifest="${manifestUrl}"`
     : '';
   const wrapperClass = disabled
     ? 'trace-widget trace-disabled'
     : 'trace-widget';
-  return `<div class="${wrapperClass}"${wrapperAttrs}><noscript><p>This interactive trace requires JavaScript.</p></noscript><div class="trace-body"><div class="trace-toolbar"><div class="trace-controls" role="toolbar" aria-label="Trace navigation">${controls}</div></div><div class="trace-content"><div class="trace-diagram"></div><div class="trace-source-wrapper"><div class="trace-source">${highlightedSource}</div></div><pre class="trace-output"></pre></div></div></div>`;
+  return `<div class="${wrapperClass}"${wrapperAttrs}><noscript><p>This interactive trace requires JavaScript.</p></noscript><div class="trace-body"><div class="trace-toolbar"><div class="trace-controls" role="toolbar" aria-label="Trace navigation">${controls}</div></div><div class="trace-content"><div class="trace-diagram"></div><div class="trace-source-wrapper"><div class="trace-source">${highlightedSource}</div></div></div></div></div>`;
 }

package/build/utils/trace.ts

@@ -42,6 +42,7 @@ export interface TraceContext {
 
 export interface TraceResult {
   manifestUrl: string;
+  artifactId: string;
   highlightedSource: string;
   totalSteps: number;
   mtime: number;
@@ -141,6 +142,7 @@ export function createTraceHelpers(context: TraceContext): {
         const outputPaths = getTraceOutputPaths(
           relDir,
           traceName,
+          cached.artifactId,
           cached.totalSteps,
         );
         if (
@@ -155,7 +157,12 @@ export function createTraceHelpers(context: TraceContext): {
           }
           return {
             ...cached,
-            manifestUrl: buildManifestUrl({ relDir, traceName, applyBasePath }),
+            manifestUrl: buildManifestUrl({
+              relDir,
+              traceName,
+              artifactId: cached.artifactId,
+              applyBasePath,
+            }),
           };
         }
       }
@@ -176,32 +183,42 @@ export function createTraceHelpers(context: TraceContext): {
     );
     const traceOutputDir = path.join(distDir, relDir, '_traces', traceName);
 
-    const manifest = chunkTraceOutput(
+    const traceOutput = chunkTraceOutput(
       output,
       traceOutputDir,
+      relDir,
+      traceName,
       sourceFileNameForTrace(sourceFile),
       source,
       { chunkSize: DEFAULT_CHUNK_SIZE, ignoreFields },
     );
-    for (const outputPath of getTraceOutputPaths(
-      relDir,
-      traceName,
-      manifest.totalSteps,
-    )) {
+    for (const outputPath of traceOutput.outputPaths) {
       dependencyCollector?.generatedOutputPaths?.add(outputPath);
     }
 
-    const manifestUrl = buildManifestUrl({ relDir, traceName, applyBasePath });
+    const manifestUrl = buildManifestUrl({
+      relDir,
+      traceName,
+      artifactId: traceOutput.artifactId,
+      applyBasePath,
+    });
 
-    const totalSteps = manifest.totalSteps;
+    const totalSteps = traceOutput.manifest.totalSteps;
     const mtime = fs.statSync(sourceFilePath).mtimeMs;
     cache.set(sourceFilePath, {
       manifestUrl,
+      artifactId: traceOutput.artifactId,
       highlightedSource,
       totalSteps,
       mtime,
     });
-    return { manifestUrl, highlightedSource, totalSteps, mtime };
+    return {
+      manifestUrl,
+      artifactId: traceOutput.artifactId,
+      highlightedSource,
+      totalSteps,
+      mtime,
+    };
   }
 
   return {

package/build/watch/assets.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { bundle } from '../bundle';
+import { bundle, getBundleNaming } from '../bundle';
 import { copyFonts } from '../generate-fonts';
 import { copyKatexAssets } from '../generate-katex-assets';
 import { generateFavicons } from '../generate-favicon';
@@ -42,7 +42,7 @@ export async function bundleWatchAssets(
   const reloadAssets = await Bun.build({
     entrypoints: [RELOAD_CLIENT_PATH],
     outdir: outputDir,
-    naming: '[name].bundle.[ext]',
+    naming: getBundleNaming(),
     sourcemap: 'inline',
   });
   return [

package/build/watch/compiler-types.d.ts

@@ -6,6 +6,7 @@ import type {
 
 export interface TraceCacheEntry {
   manifestUrl: string;
+  artifactId: string;
   highlightedSource: string;
   totalSteps: number;
   mtime: number;

package/init/content/labs/02/selection_sort.py

@@ -18,6 +18,6 @@ def selection(nums):
         swap(nums, i, index_smallest(nums, i))
 
 
-input1 = [4, 9, 2, 10, 19, 5, 7]
+input1 = [25, 31, 12, 9]
 selection(input1)
 print(input1)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.13.2",
+  "version": "1.13.7",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/_base.scss

@@ -38,12 +38,13 @@ body {
    * Enable Inter's features:
    * liga - standard ligatures
    * calt - contextual alternates
-   * ss03 - round quotes & commas (legibility)
-   * cv01 - alternate 1 (style)
-   * cv05 - lower case L with tail (legibility)
-   * cv10 - capital G with spur (style)
+   * ss07 - square punctuation
+   * ss08 - square quotes
+   * cv01 - alternate 1
+   * cv08 - uppercase I with serif
+   * cv10 - capital G with spur
    */
-  font-feature-settings: 'liga', 'calt', 'ss03', 'cv01', 'cv05', 'cv10';
+  font-feature-settings: 'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
   line-height: var(--line-height);
   color: var(--fg-color);
   background-color: var(--bg-color);
@@ -180,6 +181,73 @@ input[type='search'] {
   }
 }
 
+label:has(> input[type='checkbox']) {
+  display: inline-flex;
+  gap: 0.45em;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 500;
+
+  @include user-select(none);
+}
+
+input[type='checkbox'] {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-content: center;
+  width: 1.5em;
+  height: 1.25em;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--fg-color);
+  appearance: none;
+  cursor: pointer;
+  background: var(--bg-color);
+  border: var(--control-border-width) solid var(--fg2-color);
+  border-radius: 0.25em;
+
+  &::after {
+    display: block;
+    width: 1.1em;
+    height: 1.1em;
+    content: '';
+    background-color: currentcolor;
+    opacity: 0;
+
+    @include contained-mask(var(--icon-check));
+  }
+
+  &:checked {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:active:not(:disabled) {
+    color: var(--bg-color) !important;
+    background: var(--link-active-color) !important;
+  }
+
+  &:focus {
+    outline: 2px solid var(--theme-color);
+    outline-offset: 1px;
+    background-color: var(--bg2-color);
+    border-color: var(--fg-color);
+  }
+}
+
+@media (hover: hover) {
+  input[type='checkbox']:hover:not(:disabled) {
+    background: var(--bg2-color);
+  }
+}
+
 figure {
   margin: 1rem 0;
 

package/src/anchor/README.md

@@ -4,3 +4,12 @@ Append a link to each heading having an `id` attribute.
 
 When the link is clicked, `window.location` is updated and the heading is
 highlighted using the same function as the `toc` component.
+
+The heading link includes a real inline SVG hash icon, revealed on heading
+hover or link focus.
+
+For slide title headings (`div.slide > h2:first-child`), append a
+`Present from this slide` icon button. Clicking the button dispatches a
+bubbling `tada:slides-present` custom event with the slide index so the slides
+component can open presentation mode from that slide using the current
+`Full screen` checkbox state.

package/src/anchor/index.ts

@@ -2,32 +2,131 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
   return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
 }
 
+function createIcon(window: Window, type: 'hash' | 'present'): SVGSVGElement {
+  const svg = window.document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg',
+  );
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '16');
+  svg.setAttribute('height', '16');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.5');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+
+  const paths =
+    type === 'hash'
+      ? ['M10 3 8 21', 'M16 3l-2 18', 'M4 9h17', 'M3 15h17']
+      : [
+          'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
+          'M9 20h6',
+        ];
+
+  for (const d of paths) {
+    const path = window.document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path',
+    );
+    path.setAttribute('d', d);
+    svg.appendChild(path);
+  }
+
+  return svg;
+}
+
+function getSlideIndex(slide: HTMLElement): number {
+  const rawIndex = slide.getAttribute('data-slide-index');
+  if (rawIndex != null) {
+    const parsed = Number.parseInt(rawIndex, 10);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+
+  const root = slide.closest('[data-slides-root]');
+  if (!root) {
+    return 0;
+  }
+
+  return Array.from(root.querySelectorAll('.slide')).indexOf(slide);
+}
+
+function isSlideTitleHeading(
+  heading: HTMLHeadingElement,
+): heading is HTMLHeadingElement & { parentElement: HTMLElement } {
+  const slide = heading.parentElement;
+  return (
+    heading.tagName === 'H2' &&
+    slide?.tagName === 'DIV' &&
+    slide.classList.contains('slide') &&
+    slide.firstElementChild === heading
+  );
+}
+
 export default (window: Window) => {
+  const view = window as Window & typeof globalThis;
   const elements = getElements(window.document.body);
-  if (elements == null) {
-    return;
-  }
+  const cleanups: (() => void)[] = [];
 
   elements.forEach(el => {
-    if (!el.id) {
+    if (el.id) {
+      const link = window.document.createElement('a');
+      link.className = 'heading-anchor';
+      link.href = `#${el.id}`;
+      link.title = 'Link to this heading';
+
+      // Move all existing child nodes into the link.
+      while (el.firstChild) {
+        link.appendChild(el.firstChild);
+      }
+      link.appendChild(createIcon(window, 'hash'));
+      el.appendChild(link);
+
+      const handleClick = () => {
+        el.focus();
+      };
+      link.addEventListener('click', handleClick);
+      cleanups.push(() => {
+        link.removeEventListener('click', handleClick);
+      });
+    }
+
+    if (!isSlideTitleHeading(el)) {
       return;
     }
 
-    const link = window.document.createElement('a');
-    link.className = 'heading-anchor';
-    link.href = `#${el.id}`;
-    link.title = 'Link to this heading';
+    const button = window.document.createElement('button');
+    button.type = 'button';
+    button.className = 'heading-present-button';
+    button.setAttribute('aria-label', 'Present from this slide');
+    button.title = 'Present from this slide';
+    button.appendChild(createIcon(window, 'present'));
+    el.appendChild(button);
 
-    // Move all existing child nodes into the link
-    while (el.firstChild) {
-      link.appendChild(el.firstChild);
-    }
-    el.appendChild(link);
+    const slide = el.parentElement;
+    const slideIndex = getSlideIndex(slide);
 
-    link.addEventListener('click', () => {
-      el.focus();
+    const handlePresentClick = () => {
+      button.dispatchEvent(
+        new view.CustomEvent('tada:slides-present', {
+          bubbles: true,
+          detail: { slideIndex },
+        }),
+      );
+    };
+    button.addEventListener('click', handlePresentClick);
+
+    cleanups.push(() => {
+      button.removeEventListener('click', handlePresentClick);
     });
   });
 
-  return () => {};
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
 };

package/src/anchor/style.scss

@@ -7,29 +7,89 @@ a.heading-anchor {
   @include subdued-link;
 }
 
-a.heading-anchor::after {
+.heading-anchor svg,
+.heading-present-button svg {
   display: inline-block;
   width: 1em;
   height: 1em;
+  vertical-align: middle;
+}
+
+.heading-anchor svg {
   margin-left: 4px;
   vertical-align: middle;
-  content: '';
   opacity: 0;
+}
 
-  @include contained-mask(var(--icon-anchor));
+.heading-present-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  margin-left: 4px;
+  font: inherit;
+  line-height: 1;
+  vertical-align: middle;
+  color: var(--fg-color);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  opacity: 0;
 }
 
-a.heading-anchor:focus-visible::after {
+a.heading-anchor:focus-visible svg,
+.heading-present-button:focus {
   opacity: 1;
 }
 
+.heading-present-button:focus {
+  outline-offset: 2px;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+button.heading-present-button:active:not(:disabled) {
+  color: var(--link-active-color) !important;
+  background: transparent !important;
+}
+
+body.is-presenting .heading-present-button {
+  display: none;
+}
+
 @media (hover: hover) {
-  h1:hover a.heading-anchor::after,
-  h2:hover a.heading-anchor::after,
-  h3:hover a.heading-anchor::after,
-  h4:hover a.heading-anchor::after,
-  h5:hover a.heading-anchor::after,
-  h6:hover a.heading-anchor::after {
+  button.heading-present-button:hover:not(:disabled) {
+    color: var(--fg2-color);
+    background: transparent;
+  }
+
+  h1:hover a.heading-anchor svg,
+  h2:hover a.heading-anchor svg,
+  h3:hover a.heading-anchor svg,
+  h4:hover a.heading-anchor svg,
+  h5:hover a.heading-anchor svg,
+  h6:hover a.heading-anchor svg,
+  h1:hover .heading-present-button,
+  h2:hover .heading-present-button,
+  h3:hover .heading-present-button,
+  h4:hover .heading-present-button,
+  h5:hover .heading-present-button,
+  h6:hover .heading-present-button {
     opacity: 1;
   }
 }
+
+@media (hover: none) {
+  .heading-present-button {
+    display: none;
+  }
+}
+
+@media print {
+  .heading-anchor svg,
+  .heading-present-button {
+    display: none;
+  }
+}

package/src/print/style.scss

@@ -82,10 +82,6 @@
     border: none;
   }
 
-  a.heading-anchor::after {
-    display: none;
-  }
-
   .external-link-tail::after,
   a.external:not(:has(.external-link-tail))::after {
     content: none;

package/src/slides/index.ts

@@ -5,6 +5,12 @@ interface TraceToolbarState {
 
 type PresentationMode = 'normal' | 'fullscreen';
 
+interface SlidesPresentDetail {
+  slideIndex?: number;
+}
+
+const FULLSCREEN_STORAGE_KEY = 'slidesFullscreen';
+
 function isInteractive(
   view: Window & typeof globalThis,
   target: EventTarget | null,
@@ -45,17 +51,17 @@ export default function mountSlides(window: Window): void | (() => void) {
   const presentButton = document.querySelector(
     '[data-slides-present]',
   ) as HTMLButtonElement | null;
-  const presentFullscreenButton = document.querySelector(
-    '[data-slides-present-fullscreen]',
-  ) as HTMLButtonElement | null;
-  const rootScopeButton = presentButton ?? presentFullscreenButton;
+  const fullscreenCheckbox = document.querySelector(
+    '[data-slides-fullscreen]',
+  ) as HTMLInputElement | null;
+  const rootScopeButton = presentButton ?? fullscreenCheckbox;
   const scopedRoot = rootScopeButton
     ?.closest('main')
     ?.querySelector('[data-slides-root]');
   const root = (scopedRoot ??
     document.querySelector('[data-slides-root]')) as HTMLElement | null;
 
-  if (!view || !root || (!presentButton && !presentFullscreenButton)) {
+  if (!view || !root) {
     return;
   }
 
@@ -78,8 +84,18 @@ export default function mountSlides(window: Window): void | (() => void) {
   if (presentButton) {
     presentButton.disabled = false;
   }
-  if (presentFullscreenButton) {
-    presentFullscreenButton.disabled = false;
+  if (fullscreenCheckbox) {
+    try {
+      const stored = window.localStorage.getItem(FULLSCREEN_STORAGE_KEY);
+      if (stored === 'false') {
+        fullscreenCheckbox.checked = false;
+      } else if (stored === 'true') {
+        fullscreenCheckbox.checked = true;
+      }
+    } catch {
+      // ignored
+    }
+    fullscreenCheckbox.disabled = false;
   }
 
   const overlay = document.createElement('div');
@@ -252,7 +268,7 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
-  function enterPresentation(mode: PresentationMode): void {
+  function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
     isPresenting = true;
     presentationMode = mode;
     hidePresentationControls();
@@ -260,8 +276,8 @@ export default function mountSlides(window: Window): void | (() => void) {
     document.body.classList.add('is-presenting');
     setTraceToolbarVisibility(true);
     resetReadyTraces();
-    setActiveSlide(0);
-    focusSlide(slides[0]);
+    setActiveSlide(slideIndex);
+    focusSlide(slides[activeIndex]);
   }
 
   function driveTrace(delta: 1 | -1): boolean {
@@ -329,12 +345,8 @@ export default function mountSlides(window: Window): void | (() => void) {
     focusSlide(slides[activeIndex]);
   }
 
-  function handlePresentClick(): void {
-    enterPresentation('normal');
-  }
-
-  async function handlePresentFullscreenClick(): Promise<void> {
-    enterPresentation('fullscreen');
+  async function handlePresentFullscreenClick(slideIndex = 0): Promise<void> {
+    enterPresentation('fullscreen', slideIndex);
 
     if (typeof fullscreenTarget.requestFullscreen !== 'function') {
       presentationMode = 'normal';
@@ -348,14 +360,37 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
-  function handlePresentFullscreenButtonClick(): void {
-    void handlePresentFullscreenClick();
+  function startPresentation(slideIndex = 0): void {
+    if (fullscreenCheckbox?.checked === true) {
+      void handlePresentFullscreenClick(slideIndex);
+      return;
+    }
+
+    enterPresentation('normal', slideIndex);
+  }
+
+  function handlePresentClick(): void {
+    startPresentation(0);
   }
 
   function handleCloseClick(): void {
     exitPresentation();
   }
 
+  function handleFullscreenPreferenceChange(): void {
+    if (!fullscreenCheckbox) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(
+        FULLSCREEN_STORAGE_KEY,
+        String(fullscreenCheckbox.checked),
+      );
+    } catch {
+      // Ignore storage errors so the checkbox remains usable.
+    }
+  }
+
   function handleFullscreenChange(): void {
     if (
       isPresenting &&
@@ -439,29 +474,42 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
+  function handleSlidesPresent(event: Event): void {
+    const detail = (event as CustomEvent<SlidesPresentDetail>).detail ?? {};
+    const slideIndex =
+      typeof detail.slideIndex === 'number' &&
+      Number.isFinite(detail.slideIndex)
+        ? detail.slideIndex
+        : 0;
+
+    startPresentation(slideIndex);
+  }
+
   presentButton?.addEventListener('click', handlePresentClick);
-  presentFullscreenButton?.addEventListener(
-    'click',
-    handlePresentFullscreenButtonClick,
+  fullscreenCheckbox?.addEventListener(
+    'change',
+    handleFullscreenPreferenceChange,
   );
   closeButton.addEventListener('click', handleCloseClick);
   document.addEventListener('fullscreenchange', handleFullscreenChange);
   window.addEventListener('keydown', handleKeydown);
   window.addEventListener('mousemove', handleMouseMove);
   slidesRoot.addEventListener('click', handleSlideClick);
+  slidesRoot.addEventListener('tada:slides-present', handleSlidesPresent);
 
   return () => {
     exitPresentation();
     presentButton?.removeEventListener('click', handlePresentClick);
-    presentFullscreenButton?.removeEventListener(
-      'click',
-      handlePresentFullscreenButtonClick,
+    fullscreenCheckbox?.removeEventListener(
+      'change',
+      handleFullscreenPreferenceChange,
     );
     closeButton.removeEventListener('click', handleCloseClick);
     document.removeEventListener('fullscreenchange', handleFullscreenChange);
     window.removeEventListener('keydown', handleKeydown);
     window.removeEventListener('mousemove', handleMouseMove);
     slidesRoot.removeEventListener('click', handleSlideClick);
+    slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
     overlay.remove();
   };
 }

package/src/style.scss

@@ -121,7 +121,7 @@ a.footnote-ref {
 
 a.footnote-ref,
 .footnote-marker {
-  font-feature-settings: 'ss06';
+  font-feature-settings: 'ss06'; // squared numbers
 }
 
 .footnote-item {

package/src/trace/index.ts

@@ -11,7 +11,7 @@ interface WidgetElements {
   root: HTMLElement;
   source: HTMLElement;
   controls: HTMLElement;
-  output: HTMLElement;
+  content: HTMLElement;
   diagram: HTMLElement;
 }
 
@@ -58,13 +58,20 @@ async function goToStep(
 }
 
 function updateSourceHighlight(panel: HTMLElement, currentLine: number): void {
-  panel.querySelectorAll('.line-number').forEach(ln => {
-    ln.classList.remove('trace-line-active');
-  });
-  const el = panel.querySelector(`.line-number[data-line="${currentLine}"]`);
-  if (el) {
-    el.classList.add('trace-line-active');
-    const elRect = el.getBoundingClientRect();
+  panel
+    .querySelectorAll(
+      '.code-row.trace-line-active, .line-number.trace-line-active',
+    )
+    .forEach(el => {
+      el.classList.remove('trace-line-active');
+    });
+  const lineNumber = panel.querySelector(
+    `.line-number[data-line="${currentLine}"]`,
+  );
+  const row = lineNumber?.closest('.code-row') as HTMLElement | null;
+  if (row) {
+    row.classList.add('trace-line-active');
+    const elRect = row.getBoundingClientRect();
     const panelRect = panel.getBoundingClientRect();
     panel.scrollTop += elRect.top - panelRect.top - panel.clientHeight / 2;
   }
@@ -193,6 +200,27 @@ function scaleDiagramSvg(diagram: HTMLElement, doc: Document): void {
   svg.setAttribute('height', String(baseHeight * scale));
 }
 
+function updateOutput(
+  content: HTMLElement,
+  output: string,
+  doc: Document,
+): void {
+  const existing = content.querySelector(
+    ':scope > .trace-output',
+  ) as HTMLPreElement | null;
+  if (!output) {
+    existing?.remove();
+    return;
+  }
+
+  const outputElement = existing ?? doc.createElement('pre');
+  if (!existing) {
+    outputElement.className = 'trace-output';
+    content.append(outputElement);
+  }
+  outputElement.textContent = output;
+}
+
 function renderWidgetState(
   state: WidgetState,
   elements: WidgetElements,
@@ -215,7 +243,7 @@ function renderWidgetState(
       output += s.stdout;
     }
   }
-  elements.output.textContent = output;
+  updateOutput(elements.content, output, doc);
 
   const prevHeight = elements.diagram.scrollHeight;
   elements.diagram.innerHTML = entry.svg;
@@ -249,12 +277,9 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   await loadChunk(state, manifestUrl, 0);
 
-  const entry = getStep(state);
-
   const source = root.querySelector('.trace-source') as HTMLElement;
+  const content = root.querySelector('.trace-content') as HTMLElement;
   const diagram = root.querySelector('.trace-diagram') as HTMLElement;
-  const output = root.querySelector('.trace-output') as HTMLPreElement;
-  output.textContent = entry.stdout || '';
 
   const controls = root.querySelector('.trace-controls') as HTMLElement;
   const firstBtn = controls.querySelector('.trace-first') as HTMLButtonElement;
@@ -296,7 +321,7 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
     next.focus();
   });
 
-  const elements: WidgetElements = { root, source, controls, output, diagram };
+  const elements: WidgetElements = { root, source, controls, content, diagram };
 
   renderWidgetState(state, elements, doc);
 }

package/src/trace/style.scss

@@ -112,16 +112,17 @@
     }
   }
 
-  .line-number.trace-line-active {
-    font-weight: bold;
-    color: var(--fg-color);
-
-    &::before {
-      position: absolute;
-      left: 0;
-      margin-right: 0.25em;
-      line-height: 1.3;
-      content: '\25B6';
+  .code-row.trace-line-active {
+    background: var(--bg-trace-line-active);
+
+    .line-number {
+      font-weight: bold;
+      color: var(--fg-color);
+      background: var(--bg-trace-line-active);
+    }
+
+    code {
+      background: none;
     }
   }
 }

package/templates/_theme.scss

@@ -32,6 +32,7 @@
   --bg2-color-translucent: hsl(
     var(--tint-hue) calc(12% * var(--tint-amount)) 92% / 66%
   );
+  --bg-trace-line-active: <%= bgTraceLineActive %>;
   --box-shadow: 0 2px 9px
     hsl(var(--tint-hue) calc(85% * var(--tint-amount)) 10% / 25%);
   --backdrop-filter: blur(10px);
@@ -58,6 +59,7 @@
   --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
+  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
@@ -86,6 +88,7 @@
     --bg2-color-translucent: hsl(
       var(--tint-hue) calc(12% * var(--tint-amount)) 12% / 66%
     );
+    --bg-trace-line-active: <%= bgTraceLineActiveDark %>;
     --box-shadow: 0 3px 8px
       hsl(var(--tint-hue) calc(33% * var(--tint-amount)) 8% / 70%);
     --link-active-color: #fff;

package/templates/default.html

@@ -6,9 +6,10 @@
     <% if (page.slides) { %>
     <div class="slides-header" data-pagefind-ignore>
       <button type="button" data-slides-present disabled>Present</button>
-      <button type="button" data-slides-present-fullscreen disabled>
-        Present (Full Screen)
-      </button>
+      <label>
+        <input id="slides-fullscreen" type="checkbox" data-slides-fullscreen checked disabled>
+        Full screen
+      </label>
     </div>
     <% } %>
     <%= content %>