explico 0.12.0 → 0.13.1

package/src/compiler/render-diagnostics.ts

@@ -0,0 +1,111 @@
+/**
+ * Diagnostics only a rendered page can give, kept from one `astro build` for
+ * `content warnings`.
+ *
+ * Most checks read the content tree, so the manifest carries them and every
+ * `content` command recomputes them. A few need the page as Astro renders it:
+ * a diagram drawn by a wrapper component lays out to a width only its render
+ * knows (rule V8, `reference/diagram-fit.ts`). `compiler/astro.ts` reports
+ * those as the build finishes and writes them to
+ * `build/render-diagnostics.json`, replacing the previous build's; the
+ * `content` CLI lists them beside the manifest's under the `render:` source.
+ * They are as current as the last build: run `pnpm build` (or `astro build`)
+ * after changing a diagram to refresh them.
+ */
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+import type { DiagnosticSeverity } from '../reference/types';
+import {
+  diagramTooWideMessage,
+  oversizedDiagrams,
+} from '../reference/diagram-fit';
+import type { Manifest } from './manifest';
+
+export const RENDER_DIAGNOSTICS_PATH = join(
+  process.cwd(),
+  'build',
+  'render-diagnostics.json',
+);
+
+export interface RenderDiagnostic {
+  readonly code: string;
+  readonly severity: DiagnosticSeverity;
+  readonly message: string;
+  /** The lesson's source file, e.g. `content/docs/motion/range.mdx`; else the built page. */
+  readonly file: string;
+  readonly lessonId?: string;
+  /** The float the finding is about, e.g. a diagram's `id`. */
+  readonly key?: string;
+}
+
+/** A built page's path (`motion/range/index.html`) → the slug it serves. */
+function slugOfPage(page: string): string {
+  return page
+    .split(/[\\/]/u)
+    .join('/')
+    .replace(/(^|\/)index\.html$/u, '')
+    .replace(/\.html$/u, '');
+}
+
+/**
+ * The render diagnostics of one built page. A diagram that appears on more
+ * than one page (a lesson and its standalone export) is reported once per
+ * lesson by {@link writeRenderDiagnostics}.
+ */
+export function pageRenderDiagnostics(
+  manifest: Pick<Manifest, 'lessons'>,
+  page: string,
+  html: string,
+): RenderDiagnostic[] {
+  const oversized = oversizedDiagrams(html);
+  if (oversized.length === 0) return [];
+  const slug = slugOfPage(page);
+  const lesson = manifest.lessons.find((candidate) => candidate.slug === slug);
+  return oversized.map((diagram) => ({
+    code: diagram.code,
+    severity: 'warning',
+    message: diagramTooWideMessage(diagram.key, diagram.width, diagram.limit),
+    file: lesson?.file ?? page,
+    ...(lesson ? { lessonId: lesson.id } : {}),
+    key: diagram.key,
+  }));
+}
+
+/** Replace the last build's render diagnostics with these, deduplicated and sorted. */
+export function writeRenderDiagnostics(
+  diagnostics: readonly RenderDiagnostic[],
+  path: string = RENDER_DIAGNOSTICS_PATH,
+): readonly RenderDiagnostic[] {
+  const unique = new Map<string, RenderDiagnostic>();
+  for (const diagnostic of diagnostics) {
+    unique.set(`${diagnostic.file}\0${diagnostic.code}\0${diagnostic.key ?? diagnostic.message}`, diagnostic);
+  }
+  const sorted = [...unique.values()].sort(
+    (a, b) =>
+      a.file.localeCompare(b.file) ||
+      a.code.localeCompare(b.code) ||
+      (a.key ?? '').localeCompare(b.key ?? ''),
+  );
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, `${JSON.stringify({ diagnostics: sorted }, null, 2)}\n`);
+  return sorted;
+}
+
+/** What the last build reported; `[]` before the first build. */
+export function readRenderDiagnostics(
+  path: string = RENDER_DIAGNOSTICS_PATH,
+): readonly RenderDiagnostic[] {
+  if (!existsSync(path)) return [];
+  try {
+    const parsed = JSON.parse(readFileSync(path, 'utf8')) as {
+      readonly diagnostics?: unknown;
+    };
+    return Array.isArray(parsed.diagnostics)
+      ? (parsed.diagnostics as RenderDiagnostic[])
+      : [];
+  } catch {
+    return [];
+  }
+}

package/src/components/HoverPanel.astro

@@ -11,8 +11,9 @@
  * Pin toggle and a × — a note line under it, and the layer's own fields in
  * the default slot. The card manager owns the buttons (`data-card-grip`,
  * `data-card-side`, `data-card-pin`, `data-card-close`), the note
- * (`data-card-note`), the mode (`data-card-mode`: hover, pinned, side or
- * moved), the flash (`is-card-flashing`) and where the card goes
+ * (`data-card-note`), the carrying mark before the buttons (`data-card-mark`,
+ * rule K8), the mode (`data-card-mode`: hover, pinned, side or moved), the
+ * flash (`is-card-flashing`) and where the card goes
  * (`./card-placement.ts`, `./card-side.ts`, `./card-drag.ts`).
  *
  * Extra attributes (`data-citation-panel`, `data-float-ref-panel`, …) go on
@@ -59,6 +60,33 @@ const { id, label, class: className, ...rest } = Astro.props;
       </button>
       <div class="hover-panel-heading"><slot name="heading" /></div>
       <div class="hover-panel-tools">
+        {/* K8: with carrying on, whether a kept card means the same on every
+            page (a globe) or only on its own (`card-manager.ts`). */}
+        <span class="hover-panel-mark" data-card-mark role="img" hidden>
+          <svg
+            class="hover-panel-mark-global"
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            aria-hidden="true"
+          >
+            <circle cx="8" cy="8" r="6.25"></circle>
+            <path
+              d="M1.75 8h12.5M8 1.75c1.8 1.9 2.7 4 2.7 6.25S9.8 12.35 8 14.25M8 1.75C6.2 3.65 5.3 5.75 5.3 8s.9 4.35 2.7 6.25"
+            ></path>
+          </svg>
+          <svg
+            class="hover-panel-mark-page"
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            aria-hidden="true"
+          >
+            <path d="M3.75 1.75h5.5l3 3v9.5h-8.5z"></path>
+            <path d="M9.25 1.75v3h3"></path>
+          </svg>
+          <span class="hover-panel-mark-page" aria-hidden="true">this page</span>
+        </span>
         <button
           class="hover-panel-side"
           type="button"
@@ -104,6 +132,16 @@ const { id, label, class: className, ...rest } = Astro.props;
     <div class="hover-panel-scroll">
       <slot />
     </div>
+    <div
+      class="hover-panel-resize"
+      data-card-resize
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Card width"
+      title="Drag to widen this card. Arrow keys change it; Home or a double click puts it back."
+      tabindex="0"
+    >
+    </div>
   </aside>
 </template>
 
@@ -129,7 +167,10 @@ const { id, label, class: className, ...rest } = Astro.props;
       color: var(--sl-color-text);
       background: var(--sl-color-bg);
       box-shadow: var(--sl-shadow-lg);
-      font-size: var(--sl-text-sm);
+      /* 14 px, the article's caption size; never under 12 px, which a
+         reader's smallest text size (70%, `TextSizeControl.astro`) would
+         otherwise take a card's text to. */
+      font-size: max(12px, var(--sl-text-sm));
     }
 
     /* `.hover-panel { display: flex }` above has the same specificity as the
@@ -360,11 +401,144 @@ const { id, label, class: className, ...rest } = Astro.props;
       outline-offset: 2px;
     }
 
+    /* A card's footer links ("Go to the full definition", "Go to the
+       reference list", …) are actions in a row of their own, not words in a
+       sentence: an outline button says "this goes somewhere" without the
+       underline, and its arrow says where. They stay links, so they open in a
+       new tab and announce as links. The card layer sits outside the
+       article, whose link colour never reached them, so they set the site's
+       accent here; a link inside a card's text keeps its underline. */
+    /* S11: a docked card's right edge widens it (`card-manager.ts`): a thin
+       grip along the edge, shown on hover and focus. Only a docked card has
+       it. */
+    .hover-panel-resize {
+      display: none;
+      position: absolute;
+      inset-block: 0.75rem;
+      inset-inline-end: 0;
+      width: 0.5rem;
+      cursor: col-resize;
+      touch-action: none;
+    }
+
+    .hover-panel[data-card-mode='side'] .hover-panel-resize {
+      display: block;
+    }
+
+    .hover-panel-resize::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0.15rem;
+      width: 2px;
+      border-radius: 1px;
+      background: var(--sl-color-accent);
+      opacity: 0;
+      transition: opacity 120ms ease-out;
+    }
+
+    .hover-panel-resize:hover::after,
+    .hover-panel-resize:focus-visible::after {
+      opacity: 1;
+    }
+
+    .hover-panel-resize:focus-visible {
+      outline: 2px solid var(--sl-color-accent);
+      outline-offset: -2px;
+    }
+
+    /* Slim: about as tall as the text line it replaced, so a card keeps its
+       height and lands where it did. */
+    .hover-panel :global(.hover-panel-action) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.3em;
+      margin-block: 0.0625rem;
+      margin-inline-end: 0.4rem;
+      padding: 0.1rem 0.5rem;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0.375rem;
+      color: var(--sl-color-text-accent);
+      font-size: var(--sl-text-xs);
+      line-height: 1.3;
+      text-decoration: none;
+      vertical-align: middle;
+    }
+
+    .hover-panel :global(.hover-panel-action:hover) {
+      border-color: var(--sl-color-accent);
+      background: var(--sl-color-accent-low);
+    }
+
+    .hover-panel :global(.hover-panel-action[hidden]) {
+      display: none;
+    }
+
+    /* ↗ is the one jump arrow with an emoji form, and a fallback font can
+       draw it as a coloured emoji box; ask for the text glyph, as ↑ ↓ → are
+       drawn (`card-jump.ts`). */
+    .hover-panel :global([data-jump-arrow]) {
+      font-variant-emoji: text;
+    }
+
     @media (forced-colors: active) {
       .hover-panel:is([data-card-mode='pinned'], [data-card-mode='side'], [data-card-mode='moved']) {
         border-color: Highlight;
       }
     }
+
+    /* K3: a card held at the window's edge in a stack too tall for it shows
+       its header row only; a click on it, or the keyboard's focus, opens it
+       again (`card-manager.ts`). */
+    .hover-panel[data-card-collapsed] > :not(.hover-panel-header) {
+      display: none;
+    }
+
+    .hover-panel[data-card-collapsed] .hover-panel-header {
+      padding-block-end: 0.5rem;
+      cursor: pointer;
+    }
+
+    /* K8: a globe, or a page and "this page", muted, before the buttons. */
+    .hover-panel-mark {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      margin-inline-end: 0.3rem;
+      font-size: var(--sl-text-xs);
+      line-height: 1;
+      white-space: nowrap;
+      color: var(--sl-color-gray-3);
+    }
+
+    .hover-panel-mark[hidden] {
+      display: none;
+    }
+
+    .hover-panel-mark svg {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.3;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .hover-panel-mark[data-card-mark='global'] .hover-panel-mark-page,
+    .hover-panel-mark[data-card-mark='page'] .hover-panel-mark-global {
+      display: none;
+    }
+
+    /* K5: a card carried in from another page has no trigger here to be
+       pinned next to; × ends its journey, Side still docks it. */
+    .hover-panel[data-card-away] .hover-panel-pin {
+      display: none;
+    }
+
+    /* P1: its trigger is folded away (`foldAway` in card-manager.ts); the card
+       keeps its size for when the trigger shows again. */
+    .hover-panel[data-card-folded] {
+      visibility: hidden;
+    }
   }
 
   /* D1: while a card is dragged, nothing on the page is selected and the
@@ -444,6 +618,12 @@ const { id, label, class: className, ...rest } = Astro.props;
     :global(.explico-card-dock) {
       display: none;
     }
+
+    /* K2: a held card is fixed to the window, which print repeats on every
+       sheet; it belongs to the screen it was held on. */
+    :global(.hover-panel[data-card-held]) {
+      display: none !important;
+    }
   }
 
   /* S5: the arrow from a kept card to an occurrence of its item
@@ -467,6 +647,16 @@ const { id, label, class: className, ...rest } = Astro.props;
     fill: var(--sl-color-accent);
   }
 
+  /* D4: to a symbol that only looks like the card's, defined elsewhere. */
+  :global(.explico-card-arrow.is-lookalike .explico-card-arrow-line) {
+    stroke: var(--sl-color-gray-3);
+    stroke-dasharray: 5 4;
+  }
+
+  :global(.explico-card-arrow.is-lookalike .explico-card-arrow-head) {
+    fill: var(--sl-color-gray-3);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :global(.explico-card-arrow) {
       transition: none;
@@ -481,6 +671,14 @@ const { id, label, class: className, ...rest } = Astro.props;
     :global(.explico-card-arrow-head) {
       fill: Highlight;
     }
+
+    :global(.explico-card-arrow.is-lookalike .explico-card-arrow-line) {
+      stroke: GrayText;
+    }
+
+    :global(.explico-card-arrow.is-lookalike .explico-card-arrow-head) {
+      fill: GrayText;
+    }
   }
 
   @media print {
@@ -489,9 +687,9 @@ const { id, label, class: className, ...rest } = Astro.props;
     }
   }
 
-  /* The open mobile menu covers the page; the cards above it would float
-     over the menu. */
-  :global(body[data-mobile-menu-expanded] .explico-card-layer) {
+  /* The open mobile menu (Starlight's `#starlight__sidebar` popover) covers
+     the page; the cards would stay focusable behind it. */
+  :global(body:has(#starlight__sidebar:popover-open) .explico-card-layer) {
     display: none;
   }
 

package/src/components/PartOverview.astro

@@ -152,19 +152,21 @@ const hasRail =
 ---
 
 <div class="part-overview not-content" data-rail={hasRail ? '' : undefined}>
-  <p class="part-meta">
-    <span>Part {part.ordinal} of {manifest.parts.length}</span>
-    <span>{chapters.length} {chapters.length === 1 ? 'chapter' : 'chapters'}</span>
-    {part.studyMinutes && <span>{minutes(part.studyMinutes)}</span>}
-    {equationCount > 0 && <span>{equationCount} numbered equations</span>}
+  {/* A list, not spans in a row: search and a screen reader keep the items
+      apart ("Part 1 of 2", "3 chapters"), where spans ran into "23 chapters". */}
+  <ul class="part-meta" aria-label="This part at a glance">
+    <li>Part {part.ordinal} of {manifest.parts.length}</li>
+    <li>{chapters.length} {chapters.length === 1 ? 'chapter' : 'chapters'}</li>
+    {part.studyMinutes && <li>{minutes(part.studyMinutes)}</li>}
+    {equationCount > 0 && <li>{equationCount} numbered equations</li>}
     {
       checkCount > 0 && (
-        <span>
+        <li>
           {checkCount} knowledge {checkCount === 1 ? 'check' : 'checks'}
-        </span>
+        </li>
       )
     }
-  </p>
+  </ul>
 
   <div class="part-body">
     <ol class="part-chapters">
@@ -189,7 +191,6 @@ const hasRail =
                   {lesson.knowledgeChecks.length === 1 ? '' : 's'}
                 </span>
               )}
-              {lesson.status !== 'reviewed' && <span>{lesson.status}</span>}
             </p>
           </li>
         ))
@@ -273,6 +274,8 @@ const hasRail =
     flex-wrap: wrap;
     gap: 0.3rem 1rem;
     margin: 0 0 1.25rem;
+    padding: 0;
+    list-style: none;
     color: var(--sl-color-gray-3);
     font-size: var(--sl-text-xs);
     letter-spacing: 0.04em;

package/src/components/abbreviation/AbbreviationLayer.astro

@@ -24,7 +24,7 @@ const entries = await getCollection('abbreviations');
   <p class="abbreviation-panel-term" data-panel-term slot="heading"></p>
   <div class="abbreviation-panel-body">
     <p class="abbreviation-panel-expansion" data-panel-expansion></p>
-    <a class="abbreviation-panel-jump" data-panel-jump
+    <a class="abbreviation-panel-jump hover-panel-action" data-panel-jump
       >Go to the glossary<span aria-hidden="true" data-jump-arrow> →</span></a
     >
   </div>
@@ -40,6 +40,7 @@ const entries = await getCollection('abbreviations');
 
 <script>
   import { cloneCardShell, registerCardSource } from '../card-manager';
+  import { fetchDoc, hrefFrom } from '../card-fetch';
   import { wireJumpArrow } from '../card-jump';
 
   function closestElement(node: EventTarget | null, selector: string) {
@@ -51,18 +52,21 @@ const entries = await getCollection('abbreviations');
 
   function setup() {
     const template = document.getElementById('abbreviation-panel');
+    // Every page registers, with abbreviations or none: a card carried in
+    // from another page is built here (rule K5).
     if (
       !(template instanceof HTMLTemplateElement) ||
-      template.dataset.cardSourceReady === 'true' ||
-      !document.querySelector('a.abbreviation-term[data-abbr-key]')
+      template.dataset.cardSourceReady === 'true'
     ) {
       return;
     }
     template.dataset.cardSourceReady = 'true';
 
     // Fill a card from the matching hidden `[data-abbr-entry]` block — never
-    // from a second serialized copy of the table.
-    const render = (key: string, marker: HTMLElement) => {
+    // from a second serialized copy of the table. Every page has every
+    // entry; a card carried in from another page (K5) takes its term, as the
+    // text wrote it, from the marker there, and its link goes from there.
+    const render = (key: string, marker: HTMLElement, page?: string) => {
       const entry = entryFor(key);
       const el = cloneCardShell(template);
       const term = el?.querySelector<HTMLElement>('[data-panel-term]');
@@ -72,7 +76,8 @@ const entries = await getCollection('abbreviations');
 
       term.textContent = marker.textContent ?? '';
       expansion.textContent = entry.textContent ?? '';
-      jump.href = marker.getAttribute('href') ?? '#abbreviations';
+      const jumpTo = marker.getAttribute('href') ?? '#abbreviations';
+      jump.href = page ? hrefFrom(jumpTo, page) : jumpTo;
       wireJumpArrow(jump);
       el.setAttribute('aria-label', `Abbreviation: ${term.textContent}`);
       return el;
@@ -85,7 +90,16 @@ const entries = await getCollection('abbreviations');
         const key = marker.dataset.abbrKey;
         return key && entryFor(key) ? key : null;
       },
-      render,
+      render: (key, marker) => render(key, marker),
+      build: (key, page) =>
+        fetchDoc(page).then((doc) => {
+          const marker = doc.querySelector<HTMLElement>(
+            `a.abbreviation-term[data-abbr-key="${CSS.escape(key)}"]`,
+          );
+          const el = marker ? render(key, marker, page) : null;
+          el?.setAttribute('data-card-foreign', '');
+          return el;
+        }),
     });
   }
 
@@ -116,10 +130,5 @@ const entries = await getCollection('abbreviations');
       margin: 0;
       font-weight: 600;
     }
-
-    .abbreviation-panel-jump {
-      display: inline-block;
-      font-size: var(--sl-text-xs);
-    }
   }
 </style>

package/src/components/assessments/AssessmentRunner.tsx

@@ -17,6 +17,8 @@ import { shuffled } from './assessment-randomization';
 interface ChoiceOption {
   id: string;
   label: string;
+  /** The label split into text and rendered math (`AssessmentSet.astro`). */
+  labelContent?: MixedContentNode[];
 }
 
 interface AssessmentItemBase {
@@ -194,7 +196,11 @@ function Question({
                   disabled={checked}
                   onChange={() => setChoice(option.id)}
                 />
-                {option.label}
+                {option.labelContent ? (
+                  <RenderedContent content={option.labelContent} />
+                ) : (
+                  option.label
+                )}
               </label>
             ))}
           </fieldset>

package/src/components/assessments/AssessmentSet.astro

@@ -67,7 +67,8 @@ const entries = ids.map((id, index) => {
 });
 
 // `manifest.assessmentContent` (schema v8) already resolved every glyph in
-// every item's `prompt` / `explanation` against this page's lesson scope —
+// every item's `prompt` / `explanation` (and, v30, a choice's label) against
+// this page's lesson scope —
 // same `pageScope`, same relationship, as `gate-math.ts`'s assessment check.
 // Rendering the resolved LaTeX to a `SafeMathNode` tree happens here, in an
 // Astro component, not in `manifest.ts`: the compiler layer stays
@@ -127,6 +128,18 @@ function renderedContent(
               item.explanation,
               content?.explanationSegments,
             ),
+            // A choice's label renders its math like the prompt (schema v30).
+            ...(item.type === 'single-choice'
+              ? {
+                  options: item.options.map((option: { id: string; label: string }) => ({
+                    ...option,
+                    labelContent: renderedContent(
+                      option.label,
+                      content?.options?.find((entry) => entry.id === option.id)?.labelSegments,
+                    ),
+                  })),
+                }
+              : {}),
           };
         })}
       />

package/src/components/block-heading.ts

@@ -59,6 +59,44 @@ export async function titledBlocksOf(
   return lesson?.titledBlocks ?? [];
 }
 
+/**
+ * The text a reader sees for each outline heading with inline math, by its
+ * anchor (`manifest.lessons[].headings`, v30). Astro lists a heading by all
+ * the text in it, and KaTeX writes a formula three ways — MathML, its LaTeX
+ * annotation and its glyphs — so its own list reads `R\explain{k}{R}R`.
+ */
+export async function mathHeadingTextsOf(lessonId: string): Promise<ReadonlyMap<string, string>> {
+  const lesson = (await manifestOnce()).lessons.find((entry) => entry.id === lessonId);
+  return new Map(
+    (lesson?.headings ?? [])
+      .filter((heading) => heading.math)
+      .map((heading) => [heading.slug, heading.text]),
+  );
+}
+
+/** `headings` with the manifest's text for each one in `texts`. */
+export function withHeadingTexts<T extends OutlineHeading>(
+  headings: readonly T[],
+  texts: ReadonlyMap<string, string>,
+): T[] {
+  return headings.map((heading) => {
+    const text = texts.get(heading.slug);
+    return text === undefined ? heading : { ...heading, text };
+  });
+}
+
+/** An "On this page" tree with the manifest's text for each entry in `texts`. */
+export function tocWithHeadingTexts(
+  items: readonly TocItem[],
+  texts: ReadonlyMap<string, string>,
+): TocItem[] {
+  return items.map((item) => ({
+    ...item,
+    text: texts.get(item.slug) ?? item.text,
+    children: tocWithHeadingTexts(item.children, texts),
+  }));
+}
+
 /** A heading as Astro and Starlight list it (`MarkdownHeading`). */
 export interface OutlineHeading {
   readonly depth: number;

package/src/components/card-arrow.ts

@@ -9,6 +9,10 @@
  * arrowhead. It stays while the occurrence or the card is hovered or focused,
  * and fades a while after both are left.
  *
+ * D4, K6: from a card carried in from another page for one of that page's
+ * own symbols, the arrow to a symbol here that looks the same is dashed and
+ * grey: the same letters, defined elsewhere.
+ *
  * `arrowShape` is the geometry, pure, over plain boxes, so
  * `tests/unit/card-arrow.test.ts` can check it in Node. The overlay is one
  * SVG at the bottom of the card layer (`./card-placement.ts`): above the
@@ -94,9 +98,14 @@ export function arrowShape(card: Box, target: Box): ArrowShape {
 // The overlay.
 // ---------------------------------------------------------------------------
 
+export interface ArrowOptions {
+  /** D4: `target` only looks like the card's symbol: the arrow is dashed and grey. */
+  readonly lookalike?: boolean;
+}
+
 export interface ArrowOverlay {
   /** Draw the arrow from `card` to `target`, replacing any other. */
-  show(card: HTMLElement, target: HTMLElement): void;
+  show(card: HTMLElement, target: HTMLElement, options?: ArrowOptions): void;
   /** Draw it again after the card or the occurrence moved. */
   redraw(): void;
   /**
@@ -136,6 +145,7 @@ export function createArrowOverlay(options: ArrowOverlayOptions): ArrowOverlay {
   let head: SVGPolygonElement | null = null;
   let from: HTMLElement | null = null;
   let to: HTMLElement | null = null;
+  let lookalike = false;
   let holdTimer: ReturnType<typeof setTimeout> | null = null;
   let fadeTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -171,7 +181,7 @@ export function createArrowOverlay(options: ArrowOverlayOptions): ArrowOverlay {
     from = null;
     to = null;
     svg?.remove();
-    svg?.classList.remove('is-fading');
+    svg?.classList.remove('is-fading', 'is-lookalike');
   };
 
   const draw = () => {
@@ -193,7 +203,10 @@ export function createArrowOverlay(options: ArrowOverlayOptions): ArrowOverlay {
     mount();
     line?.setAttribute('d', shape.path);
     head?.setAttribute('points', shape.head);
-    if (svg) svg.dataset.cardArrow = from.dataset.cardKey ?? '';
+    if (svg) {
+      svg.dataset.cardArrow = from.dataset.cardKey ?? '';
+      svg.classList.toggle('is-lookalike', lookalike);
+    }
   };
 
   const fade = () => {
@@ -221,10 +234,11 @@ export function createArrowOverlay(options: ArrowOverlayOptions): ArrowOverlay {
   };
 
   return {
-    show(card, target) {
+    show(card, target, options = {}) {
       hold();
       from = card;
       to = target;
+      lookalike = options.lookalike === true;
       draw();
     },
     redraw: draw,