@abreen/tada 1.15.0 → 1.15.2

package/init/content/labs/02/index.md

@@ -28,10 +28,8 @@ Selection sort's strength is its simplicity.
 - `index_smallest()` always scans from `start` to the end
 - It requires no additional memory (other than local variables)
 
-However
-
-- It has no `break` statements & can't return early
-- No difference between best, average and worst cases
+However, it has no `break` statements and therefore can't return early if
+the array is already sorted.
 
 ---
 
@@ -48,10 +46,10 @@ However
 The innermost statement compares `nums[i]` and `nums[curr]`.
 
 - when `i` is 0, the comparison is executed $n - 1$ times
-- when `i` is 1, the innermost statement is executed $n - 2$ times
+- when `i` is 1, the comparison is executed $n - 2$ times
 - $\dots$
-- when `i` is $n - 3$, the innermost statement is executed two times
-- when `i` is $n - 2$, the innermost statement is executed one time
+- when `i` is $n - 3$, the comparison is executed two times
+- when `i` is $n - 2$, the comparison is executed one time
 
 Therefore the total number of comparisons is
 
@@ -59,3 +57,20 @@ $$
 (n-1) + (n-2) + \dots + 1 = \sum_{i=1}^{n-1}i
 $$
 
+---
+
+## Review
+
+??? question The outer loop of selection sort runs
+- [ ] $n$ times
+- [x] $n - 1$ times
+- [ ] $n^2$ times
+- [ ] $n - 2$ times
+???
+
+??? question What is selection sort's best case?
+- [ ] An already sorted array
+- [ ] A reverse-sorted array
+- [ ] An array filled with the same element
+- [x] Its best, worst, and average cases are all the same
+???

package/package.json

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

package/src/question/style.scss

@@ -3,7 +3,7 @@
 .question {
   --question-label-width: 1.2em;
 
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 }
 
 .question-q,
@@ -115,7 +115,7 @@
 .js .question-a-body[data-revealed] {
   cursor: unset;
 
-  @include user-select(text);
+  @include user-select(unset);
 }
 
 .question-multiple-choice {
@@ -136,13 +136,13 @@
 .question-multiple-choice-options {
   display: flex;
   flex-direction: column;
-  gap: 0.75em;
+  gap: 0.5em;
   margin-left: calc(var(--question-label-width) + 0.5em);
 }
 
 .question-multiple-choice-option {
   position: relative;
-  padding: 0.5em calc(var(--question-result-icon-size) + 1em) 0.5em 0.5em;
+  padding: 0.25em calc(var(--question-result-icon-size) + 1em) 0.25em 0.5em;
   cursor: pointer;
   border: 0.125em solid var(--bg2-color);
   border-radius: var(--border-radius);
@@ -156,6 +156,14 @@
   }
 }
 
+.question-multiple-choice-option:has(> code):not(
+    :has(> :not(code, .question-multiple-choice-result))
+  )
+  > code {
+  padding: 0;
+  background: none;
+}
+
 .question-multiple-choice-option::after {
   position: absolute;
   top: 50%;
@@ -177,7 +185,7 @@
   .question-multiple-choice-option {
     cursor: unset;
 
-    @include user-select(text);
+    @include user-select(unset);
 
     &:focus,
     &:focus-visible {

package/src/slides/index.ts

@@ -9,7 +9,37 @@ interface SlidesPresentDetail {
   slideIndex?: number;
 }
 
+interface AnnotationPoint {
+  x: number;
+  y: number;
+}
+
+interface AnnotationStroke {
+  type: 'stroke';
+  points: AnnotationPoint[];
+}
+
+interface AnnotationErase {
+  type: 'erase';
+  points: AnnotationPoint[];
+  radius: number;
+}
+
+type AnnotationOperation = AnnotationStroke | AnnotationErase;
+
+interface SlideAnnotationState {
+  canvas: HTMLCanvasElement;
+  operations: AnnotationOperation[];
+  width: number;
+  height: number;
+  dpr: number;
+}
+
 const FULLSCREEN_STORAGE_KEY = 'slidesFullscreen';
+const ANNOTATION_CANVAS_SELECTOR = '[data-slides-annotations]';
+const ANNOTATION_COLOR = 'blueviolet';
+const ANNOTATION_ERASER_RADIUS = 18;
+const ANNOTATION_ERASER_DIAMETER = ANNOTATION_ERASER_RADIUS * 2;
 
 function isInteractive(
   view: Window & typeof globalThis,
@@ -111,15 +141,39 @@ export default function mountSlides(window: Window): void | (() => void) {
   overlay.append(closeButton);
   document.body.appendChild(overlay);
 
+  const eraserPreview = document.createElement('div');
+  eraserPreview.hidden = true;
+  eraserPreview.dataset.slidesEraserPreview = '';
+  eraserPreview.setAttribute('aria-hidden', 'true');
+  eraserPreview.style.setProperty(
+    '--slides-eraser-preview-size',
+    `${ANNOTATION_ERASER_DIAMETER}px`,
+  );
+  document.body.appendChild(eraserPreview);
+
   let isPresenting = false;
   let activeIndex = -1;
   let presentationMode: PresentationMode | null = null;
   let isToolbarPinnedVisible = false;
+  let isAnnotating = false;
+  let isShiftPressed = false;
+  let isErasing = false;
+  let activeAnnotation: {
+    slide: HTMLElement;
+    stroke: AnnotationStroke;
+  } | null = null;
+  let activeEraser: { slide: HTMLElement; erase: AnnotationErase } | null =
+    null;
 
   const toolbarStates = new WeakMap<HTMLElement, TraceToolbarState>();
   const slideTabIndexes = new WeakMap<HTMLElement, string | null>();
+  const annotationStates = new WeakMap<HTMLElement, SlideAnnotationState>();
 
   function hidePresentationCursor(): void {
+    if (isAnnotating) {
+      return;
+    }
+
     document.body.classList.add('is-presentation-cursor-hidden');
   }
 
@@ -194,8 +248,12 @@ export default function mountSlides(window: Window): void | (() => void) {
   }
 
   function setActiveSlide(index: number): void {
+    activeAnnotation = null;
+    activeEraser = null;
+    hideEraserPreview();
     activeIndex = Math.max(0, Math.min(index, slides.length - 1));
     updateActiveSlide(slides, activeIndex, isPresenting);
+    resizeActiveAnnotationCanvas();
   }
 
   function focusSlide(slide: HTMLElement | undefined): void {
@@ -224,11 +282,21 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
   }
 
+  function scrollToSlide(index: number): void {
+    const slide = slides[index];
+    if (!slide || typeof slide.scrollIntoView !== 'function') {
+      return;
+    }
+
+    slide.scrollIntoView({ block: 'start', inline: 'nearest' });
+  }
+
   function exitPresentation(): void {
     if (!isPresenting) {
       return;
     }
 
+    const exitingActiveIndex = activeIndex;
     const shouldExitFullscreen =
       presentationMode === 'fullscreen' &&
       domDocument.fullscreenElement != null &&
@@ -237,6 +305,9 @@ export default function mountSlides(window: Window): void | (() => void) {
     isPresenting = false;
     activeIndex = -1;
     presentationMode = null;
+    isShiftPressed = false;
+    setAnnotationMode(false);
+    clearAnnotationCanvases();
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.remove('is-presenting');
@@ -245,8 +316,16 @@ export default function mountSlides(window: Window): void | (() => void) {
     setTraceToolbarVisibility(false);
 
     if (shouldExitFullscreen) {
-      void domDocument.exitFullscreen?.();
+      void domDocument
+        .exitFullscreen()
+        .finally(() => scrollToSlide(exitingActiveIndex))
+        .catch(() => {
+          // ignored
+        });
+      return;
     }
+
+    scrollToSlide(exitingActiveIndex);
   }
 
   function resetReadyTraces(scope: HTMLElement = slidesRoot): void {
@@ -271,6 +350,7 @@ export default function mountSlides(window: Window): void | (() => void) {
   function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
     isPresenting = true;
     presentationMode = mode;
+    setAnnotationMode(false);
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.add('is-presenting');
@@ -410,6 +490,12 @@ export default function mountSlides(window: Window): void | (() => void) {
       return;
     }
 
+    if (event.key === 'Shift') {
+      isShiftPressed = true;
+      setEraserMode(isAnnotating);
+      return;
+    }
+
     if (
       (event.key === 'ArrowRight' ||
         event.key === 'ArrowLeft' ||
@@ -440,19 +526,410 @@ export default function mountSlides(window: Window): void | (() => void) {
       return;
     }
 
-    const activeSlide = slides[activeIndex];
-    if (!activeSlide) {
+    if (!(event.target instanceof domView.Node)) {
       return;
     }
 
-    if (
-      !(event.target instanceof domView.Node) ||
-      !activeSlide.contains(event.target)
-    ) {
+    move(1);
+  }
+
+  function getActiveSlide(): HTMLElement | null {
+    return activeIndex >= 0 ? (slides[activeIndex] ?? null) : null;
+  }
+
+  function setAnnotationMode(enabled: boolean): void {
+    isAnnotating = enabled;
+    activeAnnotation = null;
+    activeEraser = null;
+    hideEraserPreview();
+    document.body.classList.toggle('is-slides-annotating', enabled);
+    setEraserMode(enabled && isShiftPressed);
+
+    if (enabled) {
+      showPresentationCursor();
+    }
+  }
+
+  function setEraserMode(enabled: boolean): void {
+    isErasing = enabled && isPresenting && isAnnotating;
+    activeEraser = null;
+
+    if (isErasing) {
+      activeAnnotation = null;
+    } else {
+      hideEraserPreview();
+    }
+
+    document.body.classList.toggle('is-slides-erasing', isErasing);
+  }
+
+  function hideEraserPreview(): void {
+    eraserPreview.hidden = true;
+  }
+
+  function showEraserPreview(event: PointerEvent): void {
+    eraserPreview.hidden = false;
+    eraserPreview.style.left = `${event.clientX}px`;
+    eraserPreview.style.top = `${event.clientY}px`;
+  }
+
+  function toggleAnnotationMode(): void {
+    setAnnotationMode(!isAnnotating);
+  }
+
+  function getSlidePoint(
+    slide: HTMLElement,
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>,
+  ): AnnotationPoint | null {
+    const rect = slide.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      return null;
+    }
+
+    const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+    const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
+
+    return { x: x / rect.width, y: y / rect.height };
+  }
+
+  function eventIsInsideSlide(
+    slide: HTMLElement,
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>,
+  ): boolean {
+    const rect = slide.getBoundingClientRect();
+
+    return (
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom
+    );
+  }
+
+  function getCanvasContext(
+    canvas: HTMLCanvasElement,
+  ): CanvasRenderingContext2D | null {
+    try {
+      return canvas.getContext('2d');
+    } catch {
+      return null;
+    }
+  }
+
+  function getAnnotationState(slide: HTMLElement): SlideAnnotationState {
+    const existing = annotationStates.get(slide);
+    if (existing) {
+      return existing;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.dataset.slidesAnnotations = '';
+    canvas.setAttribute('aria-hidden', 'true');
+    slide.append(canvas);
+
+    const state: SlideAnnotationState = {
+      canvas,
+      operations: [],
+      width: 0,
+      height: 0,
+      dpr: 1,
+    };
+    annotationStates.set(slide, state);
+    resizeAnnotationCanvas(slide, state);
+
+    return state;
+  }
+
+  function resizeAnnotationCanvas(
+    slide: HTMLElement,
+    state: SlideAnnotationState,
+  ): void {
+    const rect = slide.getBoundingClientRect();
+    const width = Math.max(1, rect.width);
+    const height = Math.max(1, rect.height);
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+
+    if (state.width === width && state.height === height && state.dpr === dpr) {
       return;
     }
 
-    move(1);
+    state.width = width;
+    state.height = height;
+    state.dpr = dpr;
+    state.canvas.width = Math.round(width * dpr);
+    state.canvas.height = Math.round(height * dpr);
+    redrawAnnotationCanvas(state);
+  }
+
+  function resizeActiveAnnotationCanvas(): void {
+    const slide = getActiveSlide();
+    if (!slide) {
+      return;
+    }
+
+    const state = annotationStates.get(slide);
+    if (state) {
+      resizeAnnotationCanvas(slide, state);
+    }
+  }
+
+  function redrawAnnotationCanvas(state: SlideAnnotationState): void {
+    const ctx = getCanvasContext(state.canvas);
+    if (!ctx) {
+      return;
+    }
+
+    ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
+
+    for (const operation of state.operations) {
+      if (operation.type === 'stroke') {
+        drawAnnotationStroke(ctx, operation, state);
+      } else {
+        drawAnnotationErase(ctx, operation, state);
+      }
+    }
+  }
+
+  function drawAnnotationStroke(
+    ctx: CanvasRenderingContext2D,
+    stroke: AnnotationStroke,
+    state: SlideAnnotationState,
+  ): void {
+    if (stroke.points.length === 0) {
+      return;
+    }
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.strokeStyle = ANNOTATION_COLOR;
+    ctx.lineWidth = 3 * state.dpr;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    const [first] = stroke.points;
+    ctx.moveTo(first.x * state.canvas.width, first.y * state.canvas.height);
+
+    for (const point of stroke.points.slice(1)) {
+      ctx.lineTo(point.x * state.canvas.width, point.y * state.canvas.height);
+    }
+
+    ctx.stroke();
+  }
+
+  function drawAnnotationErase(
+    ctx: CanvasRenderingContext2D,
+    erase: AnnotationErase,
+    state: SlideAnnotationState,
+  ): void {
+    if (erase.points.length === 0) {
+      return;
+    }
+
+    const radius = erase.radius * state.dpr;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.lineWidth = radius * 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    const [first] = erase.points;
+    if (erase.points.length === 1) {
+      ctx.beginPath();
+      ctx.arc(
+        first.x * state.canvas.width,
+        first.y * state.canvas.height,
+        radius,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
+      ctx.globalCompositeOperation = 'source-over';
+      return;
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(first.x * state.canvas.width, first.y * state.canvas.height);
+
+    for (const point of erase.points.slice(1)) {
+      ctx.lineTo(point.x * state.canvas.width, point.y * state.canvas.height);
+    }
+
+    ctx.stroke();
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  function drawCurrentAnnotation(): void {
+    if (!activeAnnotation) {
+      return;
+    }
+
+    const state = getAnnotationState(activeAnnotation.slide);
+    resizeAnnotationCanvas(activeAnnotation.slide, state);
+    redrawAnnotationCanvas(state);
+  }
+
+  function drawCurrentEraser(): void {
+    if (!activeEraser) {
+      return;
+    }
+
+    const state = annotationStates.get(activeEraser.slide);
+    if (!state) {
+      return;
+    }
+
+    resizeAnnotationCanvas(activeEraser.slide, state);
+    redrawAnnotationCanvas(state);
+  }
+
+  function clearAnnotationCanvases(): void {
+    for (const slide of slides) {
+      slide.querySelector(ANNOTATION_CANVAS_SELECTOR)?.remove();
+      annotationStates.delete(slide);
+    }
+    activeAnnotation = null;
+    activeEraser = null;
+  }
+
+  function handleAnnotationContextMenu(event: MouseEvent): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    toggleAnnotationMode();
+  }
+
+  function handleAnnotationPointerDown(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating || event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (isErasing) {
+      return;
+    }
+
+    const slide = getActiveSlide();
+    if (!slide || !eventIsInsideSlide(slide, event)) {
+      activeAnnotation = null;
+      return;
+    }
+
+    const point = getSlidePoint(slide, event);
+    if (!point) {
+      return;
+    }
+
+    const state = getAnnotationState(slide);
+    const stroke: AnnotationStroke = { type: 'stroke', points: [point] };
+    state.operations.push(stroke);
+    activeAnnotation = { slide, stroke };
+    drawCurrentAnnotation();
+
+    const target =
+      event.target instanceof domView.Element ? event.target : slide;
+    target.setPointerCapture?.(event.pointerId);
+  }
+
+  function handleAnnotationPointerMove(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating) {
+      return;
+    }
+
+    if (isErasing) {
+      handleAnnotationEraseMove(event);
+      return;
+    }
+
+    if (!activeAnnotation) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const point = getSlidePoint(activeAnnotation.slide, event);
+    if (!point) {
+      return;
+    }
+
+    activeAnnotation.stroke.points.push(point);
+    drawCurrentAnnotation();
+  }
+
+  function handleAnnotationEraseMove(event: PointerEvent): void {
+    const slide = getActiveSlide();
+    if (!slide || !eventIsInsideSlide(slide, event)) {
+      activeEraser = null;
+      hideEraserPreview();
+      return;
+    }
+
+    const state = annotationStates.get(slide);
+    if (!state) {
+      activeEraser = null;
+      hideEraserPreview();
+      return;
+    }
+
+    const point = getSlidePoint(slide, event);
+    if (!point) {
+      activeEraser = null;
+      hideEraserPreview();
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    showEraserPreview(event);
+
+    if (!activeEraser || activeEraser.slide !== slide) {
+      const erase: AnnotationErase = {
+        type: 'erase',
+        points: [],
+        radius: ANNOTATION_ERASER_RADIUS,
+      };
+      state.operations.push(erase);
+      activeEraser = { slide, erase };
+    }
+
+    activeEraser.erase.points.push(point);
+    drawCurrentEraser();
+  }
+
+  function handleAnnotationPointerUp(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating || !activeAnnotation) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    activeAnnotation = null;
+  }
+
+  function handleKeyup(event: KeyboardEvent): void {
+    if (event.key !== 'Shift') {
+      return;
+    }
+
+    isShiftPressed = false;
+    setEraserMode(false);
+  }
+
+  function handleWindowBlur(): void {
+    isShiftPressed = false;
+    setEraserMode(false);
+  }
+
+  function handleAnnotationClick(event: MouseEvent): void {
+    if (!isPresenting || !isAnnotating) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
   }
 
   function handleMouseMove(event: MouseEvent): void {
@@ -497,8 +974,17 @@ export default function mountSlides(window: Window): void | (() => void) {
   closeButton.addEventListener('click', handleCloseClick);
   document.addEventListener('fullscreenchange', handleFullscreenChange);
   window.addEventListener('keydown', handleKeydown);
+  window.addEventListener('keyup', handleKeyup);
+  window.addEventListener('blur', handleWindowBlur);
   window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('resize', resizeActiveAnnotationCanvas);
+  window.addEventListener('pointermove', handleAnnotationPointerMove);
+  window.addEventListener('pointerup', handleAnnotationPointerUp);
+  window.addEventListener('pointercancel', handleAnnotationPointerUp);
+  slidesRoot.addEventListener('click', handleAnnotationClick, true);
   slidesRoot.addEventListener('click', handleSlideClick);
+  slidesRoot.addEventListener('contextmenu', handleAnnotationContextMenu);
+  slidesRoot.addEventListener('pointerdown', handleAnnotationPointerDown);
   slidesRoot.addEventListener('tada:slides-present', handleSlidesPresent);
 
   return () => {
@@ -511,9 +997,19 @@ export default function mountSlides(window: Window): void | (() => void) {
     closeButton.removeEventListener('click', handleCloseClick);
     document.removeEventListener('fullscreenchange', handleFullscreenChange);
     window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('keyup', handleKeyup);
+    window.removeEventListener('blur', handleWindowBlur);
     window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('resize', resizeActiveAnnotationCanvas);
+    window.removeEventListener('pointermove', handleAnnotationPointerMove);
+    window.removeEventListener('pointerup', handleAnnotationPointerUp);
+    window.removeEventListener('pointercancel', handleAnnotationPointerUp);
+    slidesRoot.removeEventListener('click', handleAnnotationClick, true);
     slidesRoot.removeEventListener('click', handleSlideClick);
+    slidesRoot.removeEventListener('contextmenu', handleAnnotationContextMenu);
+    slidesRoot.removeEventListener('pointerdown', handleAnnotationPointerDown);
     slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
     overlay.remove();
+    eraserPreview.remove();
   };
 }

package/src/slides/style.scss

@@ -6,16 +6,54 @@
 }
 
 body.is-presenting {
-  --slides-scale: clamp(150%, 3.6vmin, 250%);
+  --slides-annotation-cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      6 18,
+    crosshair;
+  --slides-eraser-cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      12 12,
+    cell;
+  --slides-scale: max(
+    100%,
+    min(
+      clamp(150%, 2.8vmin, 200%),
+      calc((100vw - var(--gap) - var(--gap)) / 35),
+      calc(100vh / 26.25)
+    )
+  );
 
   overflow: hidden;
 }
 
-body.is-presenting.is-presentation-cursor-hidden,
-body.is-presenting.is-presentation-cursor-hidden * {
+body.is-presenting.is-presentation-cursor-hidden:not(.is-slides-annotating),
+body.is-presenting.is-presentation-cursor-hidden:not(.is-slides-annotating) * {
   cursor: none !important;
 }
 
+body.is-presenting.is-slides-annotating .slide-deck,
+body.is-presenting.is-slides-annotating .slide-deck * {
+  cursor: var(--slides-annotation-cursor) !important;
+}
+
+body.is-presenting.is-slides-annotating.is-slides-erasing .slide-deck,
+body.is-presenting.is-slides-annotating.is-slides-erasing .slide-deck * {
+  cursor: var(--slides-eraser-cursor) !important;
+}
+
+body.is-presenting [data-slides-eraser-preview] {
+  position: fixed;
+  z-index: 1002;
+  box-sizing: border-box;
+  width: var(--slides-eraser-preview-size, 36px);
+  height: var(--slides-eraser-preview-size, 36px);
+  pointer-events: none;
+  background: transparent;
+  border: 2px solid var(--bg2-color);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
 body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
@@ -55,20 +93,30 @@ body.is-presenting .slide {
   @include user-select(none);
 
   position: fixed;
-  top: 50%;
+  top: 0;
   left: 50%;
   z-index: 1000;
   box-sizing: border-box;
   display: none;
-  width: min(100vw, calc(100vh * 4 / 3));
-  height: min(100vh, calc(100vw * 3 / 4));
+  width: min(calc(100vw - var(--gap) - var(--gap)), 70rem);
+  height: 100vh;
   padding: calc(3 * var(--gap));
   overflow: auto;
   font-size: var(--slides-scale);
   letter-spacing: 0.2px;
   outline: none;
   background: var(--bg-color);
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
+
+  > [data-slides-annotations] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
 
   > :first-child {
     margin-top: 0;

package/templates/_theme.scss

@@ -57,8 +57,8 @@
   // Mask icons (color-agnostic, painted via background-color: currentColor)
   --icon-external-link: 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='M6 18 L20 4 M10 4 H20 V14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --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-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.8 4.2 Q12 2 13.2 4.2 L20.8 17.9 Q22 20 19.6 20 H4.4 Q2 20 3.2 17.9 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/></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='9.5' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='square'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='square'/></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>");