explico 0.4.0 → 0.5.0

package/src/compiler/manifest.ts

@@ -64,10 +64,34 @@ import {
   type FigureDiagnostic,
   type FigureLabelRecord,
 } from '../reference/figures-validate';
+import {
+  validateDiagrams,
+  type DiagramDiagnostic,
+  type DiagramLabelRecord,
+} from '../reference/diagrams-validate';
+import {
+  validateKnowledgeChecks,
+  type KnowledgeCheckDiagnostic,
+  type KnowledgeCheckLabelRecord,
+} from '../reference/knowledge-checks-validate';
+import {
+  validateRawFloats,
+  type RawFloatDiagnostic,
+} from '../reference/raw-floats-validate';
 import {
   gateContentMath,
+  pageScope,
   type MathGateDiagnostic,
 } from '../reference/gate-math';
+import {
+  gateProseNotation,
+  gateProseNotationInAssessments,
+} from '../reference/gate-prose-notation';
+import { gateAbbreviations } from '../reference/gate-abbreviations';
+import {
+  splitMixedContent,
+  type ContentSegment,
+} from '../reference/mixed-content';
 import { loadLintIgnore } from '../reference/lint-ignore';
 import { buildNotationRegistry } from '../reference/registry';
 import { formulaGlyphScope } from '../reference/gloss';
@@ -82,12 +106,18 @@ import type {
   NotationLessonInput,
   NotationPageBundle,
 } from '../reference/types';
-import { coursePartsOf, type CourseConfig } from './course-config';
+import {
+  coursePartsOf,
+  normalizeLessonExports,
+  type CourseConfig,
+  type NormalizedLessonExports,
+} from './course-config';
 import {
   resolveKnowledgeVersion,
   type KnowledgeVersionDiagnostic,
 } from './knowledge-version';
 import {
+  loadAbbreviationRegistryInput,
   loadCurriculumCatalog,
   loadNotationDefinitions,
   loadNotationRegistryInput,
@@ -112,7 +142,7 @@ import {
  * `lessons[].equations`, and `diagnostics.equations`.
  * v4 (F-tables-figures): `tables`/`figures` (same shape as `equations`, for
  * `<Table>`/`<Figure>`), `lessons[].tables`/`lessons[].figures`, and
- * `diagnostics.tables`/`diagnostics.figures`.
+ * `diagnostics.tables`/`diagnostics.figures`/`diagnostics.diagrams`.
  * v5 (about): `about` (engine identity from `explico`'s `package.json`, the
  * course's reader-facing `about` block, and the knowledge version resolved
  * against `content/CHANGELOG.md`) and `diagnostics.knowledge`.
@@ -122,8 +152,33 @@ import {
  * now the number before the dot), `lessons[].chapter` redefined as the
  * lesson's ordinal *within its part*, and `lessons[].numbering` — the
  * per-kind offsets that make `n` run continuously across a part.
+ * v8 (assessment math): `assessmentContent` — every assessment item's
+ * `prompt` / `explanation`, pre-split into text/math segments and resolved
+ * against the scope of the lesson that embeds it, so `AssessmentSet.astro`
+ * can render them through the same KaTeX pipeline as lesson body math instead
+ * of showing raw text.
+ * v9 (diagram identity): `diagrams` (the independent `<Diagram>` number and
+ * cross-page lookup), `lessons[].diagrams`, `lessons[].numbering.diagrams`,
+ * and `diagnostics.diagrams`.
+ * v10 (knowledge-check identity): `checks` (part-wide numbering and cross-page
+ * lookup), `lessons[].knowledgeChecks`, `lessons[].numbering.checks`, and
+ * `diagnostics.checks`.
+ * v11 (lesson exports): normalized standalone HTML and print build/UI settings.
+ * v12 (abbreviation hover cards): `manifest.abbreviations` — the
+ * `abbreviations` content collection (N14), flattened to plain
+ * `{key, abbr, expansion, aliases, domain?}` records sorted by key, the way
+ * `manifest.notation.raw` already carries notation frontmatter for
+ * `remarkNotation`. `remarkAbbreviations` reads it to wrap the first
+ * occurrence of a known abbreviation in a lesson's prose with a hover/click
+ * card.
+ * v13 (raw-float diagnostics, additive): `diagnostics.rawFloats` — a raw
+ * Markdown table, a raw HTML `<table>`, or an Explico `<Diagram>` that is
+ * unkeyed or nested outside `<Table>`/`<Figure>` never reaches keyed-float
+ * validation and can never get a stable number or `[[…]]` reference; this
+ * flags it (warning-only — the manifest shape a client already reads is
+ * unchanged).
  */
-export const MANIFEST_SCHEMA_VERSION = 7;
+export const MANIFEST_SCHEMA_VERSION = 13;
 
 const REPOSITORY_ROOT = process.cwd();
 // Content is the top-level `content/` folder; the build output is `build/`
@@ -214,8 +269,9 @@ export interface ManifestLesson {
   /**
    * The 1-based ordinal of the **part** this lesson sits in — its sidebar
    * group's position in `courseConfig.parts`. It is the number before the dot
-   * in every equation, table, and figure number on the page: `(2.1)` is the
-   * first equation of part 2. See `docs/authoring/structure.md`.
+   * in every equation, table, figure, diagram, and knowledge-check number on
+   * the page: `(2.1)` is the first equation of part 2. See
+   * `docs/authoring/structure.md`.
    */
   readonly part: number;
   /**
@@ -233,6 +289,8 @@ export interface ManifestLesson {
     readonly equations: number;
     readonly tables: number;
     readonly figures: number;
+    readonly diagrams: number;
+    readonly checks: number;
   };
   readonly file: string;
   readonly title: string;
@@ -243,6 +301,11 @@ export interface ManifestLesson {
   readonly requires: readonly string[];
   readonly assumptions: readonly string[];
   readonly assessments: readonly string[];
+  /** Numbered knowledge checks from `assessments`, in `.checks.yml` order. */
+  readonly knowledgeChecks: readonly {
+    readonly key: string;
+    readonly number: string;
+  }[];
   readonly sources: readonly string[];
   readonly citations: readonly ManifestCitation[];
   /** Competency prerequisite edges this lesson introduces. */
@@ -262,6 +325,11 @@ export interface ManifestLesson {
     readonly key: string;
     readonly number: string;
   }[];
+  /** Keyed `<Diagram>` elements in appearance order. */
+  readonly diagrams: readonly {
+    readonly key: string;
+    readonly number: string;
+  }[];
   readonly notation: {
     readonly bindings: readonly {
       readonly key: string;
@@ -301,8 +369,19 @@ export interface ManifestAbout {
   readonly changelogHref?: string;
 }
 
+/** One assessment item's pre-rendered `prompt` / `explanation` (v8). */
+export interface ManifestAssessmentItemContent {
+  readonly lessonId: string;
+  readonly assessmentId: string;
+  readonly itemId: string;
+  readonly promptSegments: readonly ContentSegment[];
+  readonly explanationSegments: readonly ContentSegment[];
+}
+
 export interface Manifest {
   readonly schemaVersion: number;
+  /** Normalized build/UI settings for opt-in per-lesson exports. */
+  readonly lessonExports: NormalizedLessonExports;
   /** Reader-facing identity + versions (the `[?]` About panel). */
   readonly about: ManifestAbout;
   readonly notation: {
@@ -316,6 +395,8 @@ export interface Manifest {
   readonly competencies: readonly Record<string, unknown>[];
   readonly sources: readonly Record<string, unknown>[];
   readonly tracks: readonly Record<string, unknown>[];
+  /** Abbreviations table (N14), for `remarkAbbreviations`. Ordered by key. */
+  readonly abbreviations: readonly Record<string, unknown>[];
   readonly sidebar: readonly SidebarGroup[];
   readonly lessons: readonly ManifestLesson[];
   /** Full competency prerequisite graph. */
@@ -336,6 +417,26 @@ export interface Manifest {
     readonly labels: readonly FigureLabelRecord[];
     readonly numbersBySlug: Record<string, Record<string, string>>;
   };
+  /** Keyed-float identity for `<Diagram>` — independent of figure numbering. */
+  readonly diagrams: {
+    readonly labels: readonly DiagramLabelRecord[];
+    readonly numbersBySlug: Record<string, Record<string, string>>;
+  };
+  /** Knowledge-check identity, derived from each lesson's `.checks.yml`. */
+  readonly checks: {
+    readonly labels: readonly KnowledgeCheckLabelRecord[];
+    readonly numbersBySlug: Record<string, Record<string, string>>;
+  };
+  /**
+   * Every assessment item's `prompt` / `explanation`, pre-split into
+   * text/math segments (v8). `AssessmentSet.astro` filters this by
+   * `lessonId` + `assessmentId` and renders each `math` segment's `latex`
+   * through `renderNotationMath` before handing the result to
+   * `AssessmentRunner`. An assessment embedded in more than one lesson (via
+   * more than one `checks.yml`) appears once per lesson here, since each
+   * lesson's scope can resolve its glyphs differently.
+   */
+  readonly assessmentContent: readonly ManifestAssessmentItemContent[];
   readonly diagnostics: {
     readonly curriculum: readonly CurriculumIssue[];
     readonly notation: readonly NotationDiagnostic[];
@@ -351,6 +452,16 @@ export interface Manifest {
     readonly tables: readonly TableDiagnostic[];
     /** `<Figure>` identity checks (F-tables-figures) — same codes, `fig-` prefixed. */
     readonly figures: readonly FigureDiagnostic[];
+    /** `<Diagram>` identity checks — same codes, `dia-` prefixed. */
+    readonly diagrams: readonly DiagramDiagnostic[];
+    /** Knowledge-check identity and `[[check-…]]` reference checks. */
+    readonly checks: readonly KnowledgeCheckDiagnostic[];
+    /**
+     * A raw Markdown table, a raw HTML `<table>`, or an Explico `<Diagram>`
+     * that is unkeyed or nested outside `<Table>`/`<Figure>` — invisible to
+     * keyed-float validation above. Warnings only.
+     */
+    readonly rawFloats: readonly RawFloatDiagnostic[];
   };
   readonly hashes: {
     /** `sha256` of every content source file, keyed by repo-relative path. */
@@ -546,9 +657,10 @@ export async function compileManifest(
     );
   }
 
-  const [catalog, notationInput] = await Promise.all([
+  const [catalog, notationInput, abbreviationsInput] = await Promise.all([
     loadCurriculumCatalog(),
     loadNotationRegistryInput(),
+    loadAbbreviationRegistryInput(),
   ]);
 
   const registry = buildNotationRegistry(notationInput);
@@ -568,19 +680,65 @@ export async function compileManifest(
     registry.bundles.map((bundle) => [bundle.lessonId, bundle]),
   );
 
+  const assessmentsInput = catalog.assessments as unknown as {
+    id: string;
+    items?: { id?: string; prompt?: string; explanation?: string }[];
+  }[];
+
   const curriculumIssues = validateCurriculum(catalog);
   const alignmentIssues = validateNotationAlignment(registry, catalog);
-  const mathIssues = gateContentMath({
-    notationInput,
-    assessments: catalog.assessments as unknown as {
-      id: string;
-      items?: { id?: string; prompt?: string; explanation?: string }[];
-    }[],
-    lessonAssessments: catalog.lessons.map((lesson) => ({
-      lessonId: lesson.id,
-      assessmentIds: lesson.assessments,
-    })),
-  });
+  const mathIssues = [
+    ...gateContentMath({
+      notationInput,
+      assessments: assessmentsInput,
+      lessonAssessments: catalog.lessons.map((lesson) => ({
+        lessonId: lesson.id,
+        assessmentIds: lesson.assessments,
+      })),
+    }),
+    ...gateProseNotation(notationInput.lessons),
+    ...gateProseNotationInAssessments(assessmentsInput),
+    ...gateAbbreviations({
+      notationInput,
+      abbreviations: abbreviationsInput,
+      courseAbbreviations: courseConfig.abbreviations,
+    }),
+  ];
+
+  // Pre-render every assessment `prompt` / `explanation` into text/math
+  // segments, resolved against the scope of whichever lesson embeds it —
+  // same relationship, same `pageScope`, as the `gateContentMath` assessment
+  // check above, so a symbol that passes the gate is exactly the symbol
+  // `AssessmentSet.astro` renders. An assessment shared by two lessons is
+  // rendered once per (lesson, assessment) pair, since the two lessons can
+  // have different scopes and therefore different resolved LaTeX.
+  const notationLessonById = new Map(
+    notationInput.lessons.map((lesson) => [lesson.lessonId, lesson]),
+  );
+  const assessmentInputById = new Map(
+    assessmentsInput.map((assessment) => [assessment.id, assessment]),
+  );
+  const assessmentContent: ManifestAssessmentItemContent[] = [];
+  for (const lesson of catalog.lessons) {
+    if (lesson.assessments.length === 0) continue;
+    const lessonInput = notationLessonById.get(lesson.id);
+    if (!lessonInput) continue;
+    const scope = pageScope(lessonInput, cardsByKey);
+    for (const assessmentId of lesson.assessments) {
+      const assessment = assessmentInputById.get(assessmentId);
+      if (!assessment?.items) continue;
+      for (const item of assessment.items) {
+        if (!item.id) continue;
+        assessmentContent.push({
+          lessonId: lesson.id,
+          assessmentId,
+          itemId: item.id,
+          promptSegments: splitMixedContent(item.prompt ?? '', scope),
+          explanationSegments: splitMixedContent(item.explanation ?? '', scope),
+        });
+      }
+    }
+  }
 
   const prerequisitesById = new Map(
     catalog.competencies.map((competency) => [
@@ -615,8 +773,8 @@ export async function compileManifest(
   // Part and chapter, read straight off the sidebar so there is one
   // lesson-ordering source and not two: a part is a sidebar group (parts in
   // config order), a chapter is a lesson's position inside its part (merged
-  // track order, then slug). The part is what prefixes every equation / table
-  // / figure number — `(2.1)` is the first equation of part 2 — while `n`
+  // track order, then slug). The part is what prefixes every numbered item —
+  // `(2.1)` is the first item of one independent kind in part 2 — while `n`
   // continues across the part's chapters rather than restarting on each page,
   // so every lesson also needs the running count that precedes it.
   // See `docs/authoring/structure.md`.
@@ -628,7 +786,13 @@ export async function compileManifest(
     {
       part: number;
       chapter: number;
-      numbering: { equations: number; tables: number; figures: number };
+      numbering: {
+        equations: number;
+        tables: number;
+        figures: number;
+        diagrams: number;
+        checks: number;
+      };
     }
   >();
   let partCursor = 0;
@@ -639,7 +803,13 @@ export async function compileManifest(
     if (lessonIds.length === 0) continue; // the static Reference group
     partCursor += 1;
     // Running totals for this part, advanced one chapter at a time.
-    const used = { equations: 0, tables: 0, figures: 0 };
+    const used = {
+      equations: 0,
+      tables: 0,
+      figures: 0,
+      diagrams: 0,
+      checks: 0,
+    };
     let chapterCursor = 0;
     for (const lessonId of lessonIds) {
       const body = bodyByLessonId.get(lessonId) ?? '';
@@ -651,10 +821,14 @@ export async function compileManifest(
       used.equations += countDisplayEquations(body);
       used.tables += countKeyedJsxFloats(body, { tagName: 'Table' });
       used.figures += countKeyedJsxFloats(body, { tagName: 'Figure' });
+      used.diagrams += countKeyedJsxFloats(body, { tagName: 'Diagram' });
+      used.checks += lessonMetaById.get(lessonId)?.assessments.length ?? 0;
     }
   }
 
-  const floatInputs = (kind: 'equations' | 'tables' | 'figures') =>
+  const floatInputs = (
+    kind: 'equations' | 'tables' | 'figures' | 'diagrams',
+  ) =>
     notationInput.lessons.map((lesson) => {
       const placement = placementByLessonId.get(lesson.lessonId);
       return {
@@ -693,6 +867,48 @@ export async function compileManifest(
       Object.entries(table).map(([key, number]) => ({ key, number })),
     ]),
   );
+  const diagramValidation = validateDiagrams(floatInputs('diagrams'));
+  const diagramsBySlug = new Map(
+    Object.entries(diagramValidation.numbersBySlug).map(([slug, table]) => [
+      slug,
+      Object.entries(table).map(([key, number]) => ({ key, number })),
+    ]),
+  );
+  const checkValidation = validateKnowledgeChecks(
+    notationInput.lessons.map((lesson) => {
+      const placement = placementByLessonId.get(lesson.lessonId);
+      return {
+        lessonId: lesson.lessonId,
+        slug: lesson.lessonId.replace(/\./g, '/'),
+        file: lesson.source.file,
+        body: lesson.body,
+        assessmentIds:
+          lessonMetaById.get(lesson.lessonId)?.assessments ?? [],
+        ...(placement
+          ? {
+              numbering: {
+                prefix: placement.part,
+                offset: placement.numbering.checks,
+              },
+            }
+          : {}),
+      };
+    }),
+  );
+  const checksBySlug = new Map(
+    Object.entries(checkValidation.numbersBySlug).map(([slug, table]) => [
+      slug,
+      Object.entries(table).map(([key, number]) => ({ key, number })),
+    ]),
+  );
+  const rawFloatDiagnostics = validateRawFloats(
+    notationInput.lessons.map((lesson) => ({
+      lessonId: lesson.lessonId,
+      slug: lesson.lessonId.replace(/\./g, '/'),
+      file: lesson.source.file,
+      body: lesson.body,
+    })),
+  );
 
   const lessons: ManifestLesson[] = [];
   for (const notationLesson of notationInput.lessons) {
@@ -716,6 +932,8 @@ export async function compileManifest(
         equations: 0,
         tables: 0,
         figures: 0,
+        diagrams: 0,
+        checks: 0,
       },
       file: notationLesson.source.file,
       title: frontmatter.title,
@@ -725,11 +943,13 @@ export async function compileManifest(
       requires: [...meta.requires],
       assumptions: [...meta.assumptions],
       assessments: [...meta.assessments],
+      knowledgeChecks: checksBySlug.get(id.replace(/\./g, '/')) ?? [],
       sources: deriveSources(notationLesson.body),
       citations: lessonCitations(notationLesson.body),
       equations: equationsBySlug.get(id.replace(/\./g, '/')) ?? [],
       tables: tablesBySlug.get(id.replace(/\./g, '/')) ?? [],
       figures: figuresBySlug.get(id.replace(/\./g, '/')) ?? [],
+      diagrams: diagramsBySlug.get(id.replace(/\./g, '/')) ?? [],
       prereqEdges: sortEdges(
         teaches.flatMap((to) =>
           (prerequisitesById.get(to) ?? [])
@@ -761,6 +981,9 @@ export async function compileManifest(
     ...(courseConfig.operators === undefined
       ? {}
       : { operators: courseConfig.operators }),
+    ...(courseConfig.romanLabels === undefined
+      ? {}
+      : { romanLabels: courseConfig.romanLabels }),
   });
 
   const rawNotation = [...loadNotationDefinitions()].sort((a, b) =>
@@ -771,6 +994,15 @@ export async function compileManifest(
     .sort(byId);
   const sources = [...loadSourceRecords()].sort(byId);
   const tracks = catalog.tracks.map((entry) => ({ ...entry })).sort(byId);
+  const abbreviations = abbreviationsInput
+    .map((entry) => ({
+      key: entry.key,
+      abbr: entry.abbr,
+      expansion: entry.expansion,
+      aliases: entry.aliases,
+      ...(entry.domain === undefined ? {} : { domain: entry.domain }),
+    }))
+    .sort((a, b) => a.key.localeCompare(b.key));
 
   const hashes = contentHashes();
 
@@ -819,6 +1051,7 @@ export async function compileManifest(
 
   return {
     schemaVersion: MANIFEST_SCHEMA_VERSION,
+    lessonExports: normalizeLessonExports(courseConfig),
     about,
     notation: {
       definitions: registry.definitions,
@@ -830,6 +1063,7 @@ export async function compileManifest(
     competencies,
     sources,
     tracks,
+    abbreviations,
     sidebar,
     lessons,
     prereqEdges,
@@ -845,6 +1079,15 @@ export async function compileManifest(
       labels: figureValidation.labels,
       numbersBySlug: figureValidation.numbersBySlug,
     },
+    diagrams: {
+      labels: diagramValidation.labels,
+      numbersBySlug: diagramValidation.numbersBySlug,
+    },
+    checks: {
+      labels: checkValidation.labels,
+      numbersBySlug: checkValidation.numbersBySlug,
+    },
+    assessmentContent,
     diagnostics: {
       curriculum: curriculumIssues,
       notation: registry.diagnostics,
@@ -854,7 +1097,10 @@ export async function compileManifest(
       equations: equationValidation.diagnostics,
       tables: tableValidation.diagnostics,
       figures: figureValidation.diagnostics,
+      diagrams: diagramValidation.diagnostics,
+      checks: checkValidation.diagnostics,
       knowledge: knowledge.diagnostics,
+      rawFloats: rawFloatDiagnostics,
     },
     hashes,
   };

package/src/components/HoverPanel.astro

@@ -50,7 +50,9 @@ const { id, label, class: className, ...rest } = Astro.props;
   >
     <span aria-hidden="true">&times;</span>
   </button>
-  <slot />
+  <div class="hover-panel-scroll">
+    <slot />
+  </div>
 </aside>
 
 <style>
@@ -63,9 +65,15 @@ const { id, label, class: className, ...rest } = Astro.props;
          JS placement (which clears display equations) must start from zero. */
       margin: 0;
       width: min(23rem, calc(100vw - 1.5rem));
-      overflow: auto;
-      padding: 1rem;
-      padding-inline-end: 2.4rem;
+      display: flex;
+      flex-direction: column;
+      /* The scrolling lives on `.hover-panel-scroll` below, not here — the
+         close button is an absolutely-positioned sibling of that scroller,
+         so it stays put when the content scrolls instead of scrolling away
+         with it (which is what happens to an absolutely-positioned child of
+         the scroll container itself). `hidden` also keeps the rounded
+         corners clean around the inner scroller. */
+      overflow: hidden;
       border: 1px solid var(--sl-color-gray-5);
       border-top: 0.25rem solid var(--sl-color-accent);
       border-radius: 0.65rem;
@@ -75,6 +83,39 @@ const { id, label, class: className, ...rest } = Astro.props;
       font-size: var(--sl-text-sm);
     }
 
+    /* `.hover-panel { display: flex }` above has the same specificity as the
+       UA stylesheet's `[hidden] { display: none }` and comes later in the
+       cascade, so it would otherwise win and defeat the `hidden` attribute
+       that every layer's JS relies on to actually hide the panel. */
+    .hover-panel[hidden] {
+      display: none;
+    }
+
+    /* The equation/table/figure preview card (`FloatRefLayer.astro`) is the
+       one panel whose content size varies wildly — a short reference vs. a
+       wide equation — so it grows to fit instead of staying pinned at the
+       default width. `--float-ref-max-width` is computed in JS from the live
+       layout (the room between the left sidebar and the viewport edge); the
+       notation and citation panels never set it and keep the fixed default. */
+    .hover-panel[data-float-ref-panel] {
+      width: fit-content;
+      min-width: min(23rem, var(--float-ref-max-width, 100vw));
+      max-width: var(--float-ref-max-width, min(23rem, calc(100vw - 1.5rem)));
+    }
+
+    .hover-panel-scroll {
+      overflow: auto;
+      /* Without these, this flex item's default `auto` minimum size is its
+         *content's* size, not the panel's — content wider or taller than the
+         panel would inflate the panel itself outward instead of scrolling
+         inside it (the same flexbox trap `.float-ref-panel-content` guards
+         against with its own `min-width: 0`). */
+      min-width: 0;
+      min-height: 0;
+      padding: 1rem;
+      padding-inline-end: 2.4rem;
+    }
+
     .hover-panel-close {
       position: absolute;
       top: 0.5rem;

package/src/components/abbreviation/AbbreviationGlossary.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * A plain, alphabetical listing of the `abbreviations` collection (rule N14)
+ * — deliberately the simplest possible reader-facing view of this content.
+ * Unlike `NotationGlossary.astro`, there is no hover popup, no formula
+ * rendering, and no `NotationLayer`: an abbreviation card is a name
+ * resolution only, so a definition list is the whole job.
+ */
+import { getCollection } from 'astro:content';
+
+const entries = (await getCollection('abbreviations')).sort((left, right) =>
+  left.data.abbr.localeCompare(right.data.abbr),
+);
+---
+
+{
+  entries.length === 0 ? (
+    <p class="abbreviation-glossary-empty">
+      No abbreviations are catalogued yet.
+    </p>
+  ) : (
+    <dl class="abbreviation-glossary">
+      {entries.map((entry) => (
+        <div class="abbreviation-entry" id={`abbr-${entry.data.key}`}>
+          <dt>
+            {entry.data.abbr}
+            {entry.data.aliases.length > 0 && (
+              <span class="abbreviation-aliases">
+                {' '}
+                (also {entry.data.aliases.join(', ')})
+              </span>
+            )}
+          </dt>
+          <dd>{entry.data.expansion}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+<style>
+  .abbreviation-glossary {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: 1rem;
+    row-gap: 0.75rem;
+  }
+
+  .abbreviation-entry {
+    display: contents;
+  }
+
+  .abbreviation-entry dt {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .abbreviation-entry dd {
+    margin: 0;
+  }
+
+  .abbreviation-aliases {
+    font-weight: 400;
+    color: var(--sl-color-gray-3);
+  }
+
+  .abbreviation-glossary-empty {
+    color: var(--sl-color-gray-3);
+  }
+</style>