explico 0.1.0

package/src/components/notation/NotationGlossary.astro

@@ -0,0 +1,412 @@
+---
+import { getCollection, render } from 'astro:content';
+import NotationMath from './NotationMath.astro';
+import NotationLayer, {
+  type NotationLayerDefinition,
+} from './NotationLayer.astro';
+import { resolveLabel } from '../../reference/label';
+import {
+  isLessonSlug,
+  lessonIdFromSlug,
+} from '../../compiler/lesson-derivation';
+import { loadManifest } from '../../compiler/manifest';
+
+const [notationEntries, lessonEntries, manifest] = await Promise.all([
+  getCollection('notation'),
+  getCollection('docs', ({ id }) => isLessonSlug(id)),
+  loadManifest(),
+]);
+const labelOf = (data: { key: string; label?: string }) =>
+  resolveLabel(data.key, data.label);
+const notationLabelByKey = new Map(
+  notationEntries.map((entry) => [entry.data.key, labelOf(entry.data)]),
+);
+
+// "Used directly in" comes from the manifest's resolved backlinks — each
+// lesson's direct `[[key]]` / `\explain` references — not an authored import
+// list (`notation.uses` is retired) and not a page-time registry rebuild.
+const lessonById = new Map(
+  lessonEntries.map((lesson) => [lessonIdFromSlug(lesson.id), lesson]),
+);
+const lessonsByNotationKey = new Map<string, typeof lessonEntries>();
+for (const backlink of manifest.notation.backlinks) {
+  if (!backlink.direct) continue;
+  const lesson = lessonById.get(backlink.lessonId);
+  if (!lesson) continue;
+  const current = lessonsByNotationKey.get(backlink.key) ?? [];
+  if (!current.includes(lesson)) current.push(lesson);
+  lessonsByNotationKey.set(backlink.key, current);
+}
+
+const renderedEntries = await Promise.all(
+  notationEntries
+    .sort(
+      (left, right) =>
+        left.data.domain.localeCompare(right.data.domain) ||
+        labelOf(left.data).localeCompare(labelOf(right.data)),
+    )
+    .map(async (entry) => ({
+      entry,
+      Content: (await render(entry)).Content,
+    })),
+);
+
+// Drives the hover explanation for `[[key]]` links inside the definition
+// bodies. Every entry is already shown in full on this page, so the layer
+// renders in panel-only mode: no visible list, just the shared panel.
+const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
+  (entry) => ({
+    key: entry.data.key,
+    notation: entry.data.latex,
+    label: labelOf(entry.data),
+    summary: entry.data.meaning,
+    units: entry.data.units,
+    seeAlso: entry.data.seeAlso,
+    editorialStatus: entry.data.editorialStatus,
+    scope: 'shared',
+    href: `#notation-${entry.data.key}`,
+  }),
+);
+---
+
+<p class="glossary-intro">
+  These definitions are generated from the shared notation collection. Every
+  entry is still <strong>draft</strong> until its wording, convention, source locator,
+  and curriculum owner receive human review.
+</p>
+
+<nav class="glossary-index" aria-label="Notation glossary index">
+  <ul>
+    {
+      renderedEntries.map(({ entry }) => (
+        <li>
+          <a href={`#notation-${entry.data.key}`}>{labelOf(entry.data)}</a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<div class="notation-glossary">
+  {
+    renderedEntries.map(({ entry, Content }) => {
+      const backlinks = (lessonsByNotationKey.get(entry.data.key) ?? []).sort(
+        (left, right) => left.data.title.localeCompare(right.data.title),
+      );
+      return (
+        <article id={`notation-${entry.data.key}`}>
+          <header>
+            <span
+              class="glossary-symbol-trigger"
+              data-notation-key={entry.data.key}
+            >
+              <NotationMath class="glossary-symbol" latex={entry.data.latex} />
+            </span>
+            <div>
+              <h2>{labelOf(entry.data)}</h2>
+              <code>{entry.data.key}</code>
+              <a
+                class="glossary-anchor"
+                href={`#notation-${entry.data.key}`}
+                data-glossary-anchor
+                aria-label={`Copy link to “${labelOf(entry.data)}”`}
+                title="Copy link to this entry"
+              >
+                <span aria-hidden="true">#</span>
+              </a>
+            </div>
+            <span class="glossary-status">{entry.data.editorialStatus}</span>
+          </header>
+
+          <dl class="glossary-metadata">
+            <div>
+              <dt>Domain</dt>
+              <dd>{entry.data.domain}</dd>
+            </div>
+            {entry.data.units && (
+              <div>
+                <dt>Units</dt>
+                <dd>{entry.data.units}</dd>
+              </div>
+            )}
+            {entry.data.aliases.length > 0 && (
+              <div>
+                <dt>Aliases</dt>
+                <dd>{entry.data.aliases.join(', ')}</dd>
+              </div>
+            )}
+            {entry.data.seeAlso.length > 0 && (
+              <div>
+                <dt>See also</dt>
+                <dd class="see-also">
+                  {entry.data.seeAlso.map((key) => (
+                    <a href={`#notation-${key}`}>
+                      {notationLabelByKey.get(key) ?? key}
+                    </a>
+                  ))}
+                </dd>
+              </div>
+            )}
+          </dl>
+
+          <div class="glossary-definition">
+            <Content />
+          </div>
+
+          <footer>
+            <p>
+              <strong>Introduced by:</strong>{' '}
+              {entry.data.alignment.kind === 'competency' ? (
+                <>
+                  <code>{entry.data.alignment.introducedByCompetency}</code> in{' '}
+                  <code>{entry.data.alignment.introducedInLesson}</code>
+                </>
+              ) : (
+                entry.data.alignment.rationale
+              )}
+            </p>
+            {backlinks.length > 0 && (
+              <p>
+                <strong>Used directly in:</strong>{' '}
+                {backlinks.map((lesson, index) => (
+                  <>
+                    {index > 0 && ', '}
+                    <a
+                      href={`${import.meta.env.BASE_URL.replace(/\/$/, '')}/${lesson.id}/`}
+                    >
+                      {lesson.data.title}
+                    </a>
+                  </>
+                ))}
+              </p>
+            )}
+            {entry.data.sources.length > 0 ? (
+              <div class="source-records">
+                <strong>Source records:</strong>
+                <ul>
+                  {entry.data.sources.map((source) => {
+                    const { id, locator } =
+                      typeof source === 'string'
+                        ? { id: source, locator: null }
+                        : source;
+                    return (
+                      <li>
+                        <code>{id}</code>
+                        {locator && <span> — {locator}</span>}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ) : (
+              <p>
+                <strong>Source records:</strong> None declared.
+              </p>
+            )}
+          </footer>
+        </article>
+      );
+    })
+  }
+</div>
+
+<NotationLayer
+  presentation="panel"
+  id="glossary-notation"
+  definitions={panelDefinitions}
+/>
+
+<script>
+  const RESET_MS = 1200;
+
+  for (const anchor of document.querySelectorAll<HTMLAnchorElement>(
+    '[data-glossary-anchor]',
+  )) {
+    anchor.addEventListener('click', () => {
+      const href = anchor.getAttribute('href');
+      if (!href || !navigator.clipboard) return;
+
+      // Keep the native hash navigation (scroll + history) and copy the
+      // absolute URL alongside it.
+      const url = new URL(href, window.location.href).href;
+      navigator.clipboard.writeText(url).then(
+        () => {
+          anchor.dataset.copied = 'true';
+          window.setTimeout(() => {
+            delete anchor.dataset.copied;
+          }, RESET_MS);
+        },
+        () => {
+          /* Clipboard blocked: the plain anchor link still works. */
+        },
+      );
+    });
+  }
+</script>
+
+<style>
+  .glossary-index ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+    gap: 0.35rem 1rem;
+    padding-inline-start: 1.25rem;
+  }
+
+  .notation-glossary {
+    display: grid;
+    gap: 1.5rem;
+    margin-block-start: 2rem;
+  }
+
+  article {
+    scroll-margin-block-start: 5rem;
+    padding: 1.25rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.7rem;
+    background: var(--sl-color-gray-7);
+  }
+
+  article > header {
+    display: grid;
+    grid-template-columns: minmax(4rem, auto) 1fr auto;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  article h2 {
+    margin: 0;
+    font-size: var(--sl-text-xl);
+  }
+
+  .glossary-symbol {
+    color: var(--sl-color-accent-high);
+    font-size: 1.2rem;
+  }
+
+  .glossary-symbol-trigger {
+    justify-self: start;
+    border-radius: 0.16em;
+    cursor: help;
+  }
+
+  .glossary-symbol-trigger:hover,
+  .glossary-symbol-trigger:global(.is-notation-active) {
+    background: var(--sl-color-accent-low);
+    box-shadow: 0 0 0 0.12em var(--sl-color-accent-low);
+  }
+
+  @media (forced-colors: active) {
+    .glossary-symbol-trigger:hover,
+    .glossary-symbol-trigger:global(.is-notation-active) {
+      outline: 2px solid Highlight;
+      color: HighlightText;
+      background: Highlight;
+      box-shadow: none;
+    }
+  }
+
+  .glossary-anchor {
+    position: relative;
+    margin-inline-start: 0.5rem;
+    padding-inline: 0.2rem;
+    color: var(--sl-color-gray-3);
+    font-family: monospace;
+    text-decoration: none;
+    vertical-align: baseline;
+  }
+
+  .glossary-anchor:hover,
+  .glossary-anchor:focus-visible {
+    color: var(--sl-color-text-accent);
+  }
+
+  .glossary-anchor[data-copied]::after {
+    content: 'Link copied';
+    position: absolute;
+    inset-block-end: calc(100% + 0.35rem);
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    padding: 0.15rem 0.45rem;
+    border-radius: 0.35rem;
+    background: var(--sl-color-accent-low);
+    color: var(--sl-color-text-accent);
+    font-family: var(--sl-font, sans-serif);
+    font-size: var(--sl-text-xs);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .glossary-status {
+    padding: 0.15rem 0.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    color: var(--sl-color-gray-3);
+    font-size: var(--sl-text-xs);
+  }
+
+  .glossary-metadata {
+    display: grid;
+    gap: 0.45rem;
+    margin-block: 1rem;
+  }
+
+  .glossary-metadata div {
+    display: grid;
+    grid-template-columns: minmax(6rem, 0.3fr) 1fr;
+    gap: 0.75rem;
+  }
+
+  .glossary-metadata dt {
+    font-weight: 600;
+  }
+
+  .glossary-metadata dd {
+    margin: 0;
+  }
+
+  .see-also {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem 0.8rem;
+  }
+
+  article > footer {
+    margin-block-start: 1rem;
+    padding-block-start: 0.75rem;
+    border-top: 1px solid var(--sl-color-gray-5);
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+  }
+
+  article > footer p {
+    margin-block: 0.4rem;
+  }
+
+  article > footer code + code {
+    margin-inline-start: 0.35rem;
+  }
+
+  .source-records {
+    margin-block: 0.4rem;
+  }
+
+  .source-records ul {
+    margin-block: 0.2rem 0;
+    padding-inline-start: 1.2rem;
+  }
+
+  .source-records li {
+    margin-block: 0.15rem;
+  }
+
+  @media (max-width: 36rem) {
+    article > header {
+      grid-template-columns: 1fr;
+    }
+
+    .glossary-metadata div {
+      grid-template-columns: 1fr;
+      gap: 0.1rem;
+    }
+  }
+</style>