explico 0.11.1 → 0.13.0

package/src/components/notation/NotationLayer.astro

@@ -22,10 +22,17 @@ export interface NotationLayerDefinition {
   /** Symbols the formula names that have no card of their own. */
   glosses?: readonly ResolvedGloss[];
   units?: string;
+  /** Rule N23: the set a running index letter runs over, shown on its card. */
+  range?: string;
   seeAlso?: readonly string[];
   alignment?: NotationAlignment;
-  editorialStatus?: 'draft' | 'in-review' | 'reviewed';
-  scope?: 'local' | 'shared';
+  /**
+   * `derived`: a derived card (rule N23) — the card of an indexed symbol
+   * (`\mathbf{v}_0`) composed from its base and an index entry. It is a
+   * hidden source, never a row of the list: the list names the base and the
+   * index entry already.
+   */
+  scope?: 'local' | 'shared' | 'derived';
   href?: string;
 }
 
@@ -52,6 +59,13 @@ export interface Props {
    * derivative is told it means something else here.
    */
   suspended?: readonly NotationSuspension[];
+  /**
+   * The page's route slug (`projectiles/optimal-launch-angle`). A symbol of
+   * the page's own (`scope: 'local'`) is carried under a key scoped to it,
+   * `theta-star@projectiles/optimal-launch-angle` (rule K6, `card-carry.ts`),
+   * so it never stands for another page's symbol of the same name.
+   */
+  page?: string;
 }
 
 import HoverPanel from '../HoverPanel.astro';
@@ -71,6 +85,7 @@ const {
   defaultOpen = false,
   rememberState = true,
   suspended = [],
+  page,
 } = Astro.props;
 
 const panelOnly = presentation === 'panel';
@@ -104,11 +119,16 @@ const items = definitions.map((definition) => {
   return { ...definition, scope, href };
 });
 
+// Listed entries, and the derived cards (rule N23) that are only sources.
+const listed = items.filter((definition) => definition.scope !== 'derived');
+const derivedItems = items.filter((definition) => definition.scope === 'derived');
+
 // Glosses (D15) have no card and no anchor, so they need a data source for the
 // panel. Their names are already visible under the formula they belong to
 // (`NotationFormula` renders that list, and it is the no-JS baseline), so these
-// blocks are hidden and exist only for the enhancement to read.
-const glossItems = items.flatMap((definition) => definition.glosses ?? []);
+// blocks are hidden and exist only for the enhancement to read. A derived
+// card's glosses are its index entry's, which that entry emits already.
+const glossItems = listed.flatMap((definition) => definition.glosses ?? []);
 
 for (const gloss of glossItems) {
   if (!keyPattern.test(gloss.key)) {
@@ -121,14 +141,17 @@ for (const gloss of glossItems) {
 }
 ---
 
-{
-  items.length > 0 && (
-    <section
-      class:list={['notation-layer', panelOnly && 'notation-layer--panel-only']}
-      data-notation-layer
-      data-notation-layer-id={id}
-      aria-label={panelOnly ? 'Notation explanations' : label}
-    >
+{/* A page with no notation still renders the card's template, hidden: a
+    card carried here from another page is built from it (rule K5). */}
+<section
+  class:list={['notation-layer', panelOnly && 'notation-layer--panel-only']}
+  data-notation-layer
+  data-notation-layer-id={id}
+  data-notation-page={page}
+  aria-label={panelOnly ? 'Notation explanations' : label}
+  hidden={items.length === 0}
+>
+  {items.length > 0 && (
       <div class="notation-list-titlebar">
       <details
         class="notation-list ex-tier-meta"
@@ -138,7 +161,7 @@ for (const gloss of glossItems) {
         open={defaultOpen}
       >
         <summary>
-          {label} <span class="notation-count">({items.length})</span>
+          {label} <span class="notation-count">({listed.length})</span>
         </summary>
         {/* How the cards work, inside the panel: shown once the panel is
             opened, not as three lines under every closed one. */}
@@ -163,12 +186,14 @@ for (const gloss of glossItems) {
           </ul>
         )}
         <dl>
-          {items.map((definition) => (
+          {listed.map((definition) => (
             <div
               class="notation-entry"
               id={panelOnly ? undefined : `notation-${definition.key}`}
               data-notation-entry={definition.key}
               data-notation-href={definition.href}
+              data-notation-scope={definition.scope}
+              data-notation-latex={definition.notation}
             >
               <dt>
                 <span
@@ -188,12 +213,6 @@ for (const gloss of glossItems) {
                 >
                   {definition.label}
                 </a>
-                {definition.editorialStatus &&
-                  definition.editorialStatus !== 'reviewed' && (
-                    <span class="notation-status">
-                      {definition.editorialStatus}
-                    </span>
-                  )}
               </dt>
               <dd>
                 {definition.summary && (
@@ -216,6 +235,11 @@ for (const gloss of glossItems) {
                       <NotationMath latex={definition.formula} />
                     </span>
                   ))}
+                {definition.range && (
+                  <p class="notation-range" data-notation-range>
+                    Runs over <NotationMath latex={definition.range} />
+                  </p>
+                )}
                 {definition.units && (
                   <p class="notation-units" data-notation-units>
                     <strong>Units:</strong> {definition.units}
@@ -226,6 +250,36 @@ for (const gloss of glossItems) {
           ))}
         </dl>
 
+        {derivedItems.map((definition) => (
+          <div
+            class="notation-derived-source"
+            data-notation-entry={definition.key}
+            data-notation-href={definition.href}
+            data-notation-scope="derived"
+            data-notation-latex={definition.notation}
+            hidden
+          >
+            <span class="notation-symbol-trigger" data-notation-key={definition.key}>
+              <NotationMath class="notation-symbol" latex={definition.notation} />
+            </span>
+            <span data-notation-link={definition.key}>{definition.label}</span>
+            {definition.summary && <p data-notation-summary>{definition.summary}</p>}
+            {definition.formula && definition.formulaScope && (
+              <NotationFormula
+                formula={definition.formula}
+                scope={definition.formulaScope}
+                glosses={definition.glosses}
+                entryLabel={definition.label}
+              />
+            )}
+            {definition.units && (
+              <span data-notation-units>
+                <strong>Units:</strong> {definition.units}
+              </span>
+            )}
+          </div>
+        ))}
+
         {glossItems.map((gloss) => (
           <div
             class="notation-gloss-source"
@@ -263,6 +317,7 @@ for (const gloss of glossItems) {
         </a>
       )}
       </div>
+  )}
 
       <HoverPanel
         id={`${id}-card`}
@@ -275,17 +330,17 @@ for (const gloss of glossItems) {
           <h3 data-slot-title></h3>
         </div>
         <div class="notation-panel-body">
+          <p class="notation-panel-origin" data-slot-origin hidden></p>
           <p data-slot-summary hidden></p>
           <div data-slot-formula hidden></div>
+          <p class="notation-range" data-slot-range hidden></p>
           <p class="notation-units" data-slot-units hidden></p>
-          <a data-slot-link hidden
+          <a class="hover-panel-action" data-slot-link hidden
             >Go to the full definition<span aria-hidden="true" data-jump-arrow> →</span></a
           >
         </div>
       </HoverPanel>
-    </section>
-  )
-}
+</section>
 
 <script>
   import {
@@ -293,6 +348,15 @@ for (const gloss of glossItems) {
     isKept,
     registerCardSource,
   } from '../card-manager';
+  import { readCardConfig } from '../card-carry';
+  import {
+    ensureKatexStylesheet,
+    fetchDoc,
+    hrefFrom,
+    markForeign,
+    notationPageOf,
+    pageTitleOf,
+  } from '../card-fetch';
   import { wireJumpArrow } from '../card-jump';
   import { wirePersistedDetails } from '../disclosure/persisted-disclosure';
 
@@ -307,23 +371,78 @@ for (const gloss of glossItems) {
     element.hidden = value.length === 0;
   }
 
-  function setupNotationLayer(root: HTMLElement) {
-    if (root.dataset.notationEnhanced === 'true') return;
-    root.dataset.notationEnhanced = 'true';
+  /**
+   * One card source for every notation layer on the page — the page's own,
+   * and the glossary's panel — so the page has one `notation` source to
+   * register, even with no notation at all: a card carried here from another
+   * page is built from the template (rule K5).
+   */
+  function setupNotationLayers(roots: readonly HTMLElement[]) {
+    if (roots.length === 0 || roots.every((root) => root.dataset.notationEnhanced === 'true')) {
+      return;
+    }
+    for (const root of roots) root.dataset.notationEnhanced = 'true';
 
-    const entryElements = Array.from(
-      root.querySelectorAll<HTMLElement>('[data-notation-entry]'),
-    );
-    const entries = new Map(
-      entryElements.map((entry) => [entry.dataset.notationEntry ?? '', entry]),
-    );
-    entries.delete('');
-    if (entries.size === 0) return;
+    const entries = new Map<string, HTMLElement>();
+    for (const root of roots) {
+      for (const entry of root.querySelectorAll<HTMLElement>('[data-notation-entry]')) {
+        const key = entry.dataset.notationEntry ?? '';
+        if (key && !entries.has(key)) entries.set(key, entry);
+      }
+    }
 
-    const template = root.querySelector<HTMLTemplateElement>(
-      'template[data-card-template]',
-    );
+    const template = roots
+      .map((root) => root.querySelector<HTMLTemplateElement>('template[data-card-template]'))
+      .find((found): found is HTMLTemplateElement => found !== null);
     if (!template) return;
+    const inLayer = (element: Element) => roots.some((root) => root.contains(element));
+
+    // K6: the page a symbol of its own belongs to, which scopes its key. An
+    // item names a symbol's meaning: `key`, the course's shared one;
+    // `key@slug`, page `slug`'s own; `key<slug`, a shared one this page does
+    // not explain, read off page `slug`, which says where its card is found.
+    const page = roots.map((root) => root.dataset.notationPage).find(Boolean) ?? '';
+    const scopeOf = (key: string) => entries.get(key)?.dataset.notationScope;
+    const itemOf = (key: string) => (page && scopeOf(key) === 'local' ? `${key}@${page}` : key);
+    const keyOf = (item: string) => item.split(/[@<]/)[0] ?? item;
+    const slugOf = (item: string) => item.split(/[@<]/)[1] ?? '';
+
+    /** A notation slug's page: a route slug under the course's base, as Starlight serves it. */
+    const pageOfSlug = (slug: string) => {
+      const route = slug.replace(/(^|\/)index$/, '');
+      return `${readCardConfig().base.replace(/\/+$/, '')}/${route ? `${route}/` : ''}`;
+    };
+
+    /**
+     * The page a card cloned from another page (`data-card-foreign`) came
+     * from, for a symbol in it (`markForeign`); `null` outside such a card.
+     */
+    const foreignOf = (symbol: HTMLElement) => {
+      const card = symbol.closest<HTMLElement>('[data-card-foreign]');
+      return card
+        ? { page: card.dataset.cardFrom ?? '', slug: card.dataset.cardFromSlug ?? '' }
+        : null;
+    };
+
+    /**
+     * K6: whether a symbol means what this page's entry for it says. In a
+     * card from another page, only when both pages share the meaning;
+     * otherwise its card is that page's (`foreignItem`).
+     */
+    const meansHere = (symbol: HTMLElement, key: string) =>
+      entries.has(key) &&
+      (!foreignOf(symbol) ||
+        (scopeOf(key) !== 'local' && symbol.dataset.notationScope !== 'local'));
+
+    /** K6: the item a symbol in a card from another page names there; `null` if unknown. */
+    const foreignItem = (symbol: HTMLElement, key: string) => {
+      const from = foreignOf(symbol);
+      if (!from?.page || !from.slug) return null;
+      return symbol.dataset.notationScope === 'local' ? `${key}@${from.slug}` : `${key}<${from.slug}`;
+    };
+    /** D4: a symbol's glyph, its entry's LaTeX, compared without its spacing. */
+    const glyphOf = (entry: HTMLElement | undefined) =>
+      entry?.dataset.notationLatex?.replace(/\s+/g, '') || null;
 
     // Static triggers, computed once: markers embedded in prose or an
     // equation, and the symbol glyphs in the "Notation used on this page"
@@ -338,13 +457,15 @@ for (const gloss of glossItems) {
       document.querySelectorAll<HTMLElement>(triggerSelector),
     ).filter(
       (element) =>
-        !root.contains(element) &&
+        !inLayer(element) &&
         !element.closest('.katex-mathml') &&
         entries.has(element.dataset.notationKey ?? ''),
     );
-    const symbolTriggers = Array.from(
-      root.querySelectorAll<HTMLElement>('[data-notation-symbol-trigger]'),
-    ).filter((element) => entries.has(element.dataset.notationKey ?? ''));
+    const symbolTriggers = roots
+      .flatMap((root) =>
+        Array.from(root.querySelectorAll<HTMLElement>('[data-notation-symbol-trigger]')),
+      )
+      .filter((element) => entries.has(element.dataset.notationKey ?? ''));
     const highlightTargets = [...externalTriggers, ...symbolTriggers];
 
     for (const trigger of highlightTargets) {
@@ -355,8 +476,10 @@ for (const gloss of glossItems) {
     for (const term of externalTriggers) {
       if (term.matches('a.notation-term')) term.removeAttribute('title');
     }
-    const help = root.querySelector<HTMLElement>('[data-notation-help]');
-    if (help) help.hidden = false;
+    for (const root of roots) {
+      const help = root.querySelector<HTMLElement>('[data-notation-help]');
+      if (help) help.hidden = false;
+    }
 
     // The visible list's own symbol glyphs are the only keyboard path to
     // pinning a card from this list — make them a real, labelled,
@@ -381,13 +504,17 @@ for (const gloss of glossItems) {
 
     // A symbol trigger, wherever it lives: prose, the equation, the visible
     // list, or — the D15 case — inside an open card. This has to be live: a
-    // card's content doesn't exist until the reader opens it.
+    // card's content doesn't exist until the reader opens it. In a card
+    // cloned from another page (`data-card-foreign`) a symbol means what it
+    // means there: it opens this page's card only when this page shares that
+    // meaning (K6), and otherwise that page's, fetched — the equation a
+    // reference card brings from another lesson explains its own symbols,
+    // even those this page never uses.
     const symbolFrom = (node: EventTarget | null) => {
       const candidate = closestElement(node, triggerSelector);
       if (!candidate || candidate.closest('.katex-mathml')) return null;
-      return entries.has(candidate.dataset.notationKey ?? '')
-        ? candidate
-        : null;
+      const key = candidate.dataset.notationKey ?? '';
+      return meansHere(candidate, key) || foreignItem(candidate, key) ? candidate : null;
     };
 
     const labelOf = (entry: HTMLElement, key: string) =>
@@ -395,10 +522,11 @@ for (const gloss of glossItems) {
         .querySelector<HTMLElement>('[data-notation-link]')
         ?.textContent?.trim() ?? key;
 
-    const buildCard = (key: string) => {
-      const entry = entries.get(key);
-      if (!entry) return null;
-
+    /**
+     * A card for `key` from its entry: on this page, or on the page `from`
+     * (K5), whose links it then makes reachable from here.
+     */
+    const buildCard = (key: string, entry: HTMLElement, from?: string) => {
       const el = cloneCardShell(template);
       const symbolHost = el?.querySelector<HTMLElement>('[data-slot-symbol]');
       const title = el?.querySelector<HTMLElement>('[data-slot-title]');
@@ -411,12 +539,16 @@ for (const gloss of glossItems) {
       }
 
       el.dataset.popupKey = key;
+      el.dataset.cardScope = entry.dataset.notationScope ?? 'shared';
+      const glyph = glyphOf(entry);
+      if (glyph) el.dataset.cardGlyph = glyph;
       el.setAttribute('aria-label', `Notation: ${labelOf(entry, key)}`);
 
+      // `importNode`: the entry may come from a fetched page.
       const sourceSymbol = entry.querySelector<HTMLElement>('.notation-symbol');
       symbolHost.replaceChildren(
         ...(sourceSymbol
-          ? [sourceSymbol.cloneNode(true)]
+          ? [document.importNode(sourceSymbol, true)]
           : [document.createTextNode(entry.dataset.notationEntry ?? key)]),
       );
       title.textContent = labelOf(entry, key);
@@ -430,10 +562,22 @@ for (const gloss of glossItems) {
         '[data-notation-formula]',
       );
       formulaHost.replaceChildren(
-        ...(sourceFormula ? [sourceFormula.cloneNode(true)] : []),
+        ...(sourceFormula ? [document.importNode(sourceFormula, true)] : []),
       );
       formulaHost.hidden = sourceFormula === null;
 
+      // Rule N23: the set a running index runs over.
+      const range = el?.querySelector<HTMLElement>('[data-slot-range]');
+      const sourceRange = entry.querySelector<HTMLElement>('[data-notation-range]');
+      if (range) {
+        range.replaceChildren(
+          ...(sourceRange
+            ? [...sourceRange.childNodes].map((node) => document.importNode(node, true))
+            : []),
+        );
+        range.hidden = sourceRange === null;
+      }
+
       setOptionalText(
         units,
         entry
@@ -446,7 +590,7 @@ for (const gloss of glossItems) {
       if (link) {
         link.hidden = href === undefined;
         if (href !== undefined) {
-          link.href = href;
+          link.href = from ? hrefFrom(href, from) : href;
           wireJumpArrow(link);
         }
       }
@@ -454,23 +598,91 @@ for (const gloss of glossItems) {
       return el;
     };
 
+    /**
+     * The page `item`'s entry is read off: `from`, unless the item names
+     * another page's meaning (`key@slug`, `key<slug`) — a symbol of a card
+     * from that page, which travels with the page it was opened on (K5).
+     */
+    const entryPage = async (item: string, from: string) => {
+      const slug = slugOf(item);
+      const doc = await fetchDoc(from);
+      if (!slug || notationPageOf(doc) === slug) return { doc, page: from };
+      const page = pageOfSlug(slug);
+      return { doc: await fetchDoc(page), page };
+    };
+
+    /** K5, K6: the card for `item` from its entry on the page `from`, or the page it names. */
+    const buildFrom = (item: string, from: string) =>
+      entryPage(item, from).then(({ doc, page }) => {
+        const key = keyOf(item);
+        const entry = doc.querySelector<HTMLElement>(
+          `[data-notation-entry="${CSS.escape(key)}"]`,
+        );
+        if (!entry) return null;
+        if (doc === document) return buildCard(key, entry);
+        ensureKatexStylesheet(doc);
+        const el = buildCard(key, entry, page);
+        if (!el) return null;
+        // K6: each symbol in it, marked with what it means there.
+        markForeign(el, doc, page);
+        // K6: away from its page, a symbol of that page's own says so first,
+        // and its carrying mark names the page (K8).
+        const definedIn = pageTitleOf(doc) ?? page;
+        el.dataset.cardDefinedIn = definedIn;
+        const origin = el.querySelector<HTMLElement>('[data-slot-origin]');
+        if (origin && entry.dataset.notationScope === 'local') {
+          const title = document.createElement('em');
+          title.textContent = definedIn;
+          origin.replaceChildren('Defined in ', title, ' · means this only there');
+          origin.hidden = false;
+        }
+        return el;
+      });
+
     // The card manager mounts every card in one layer on `<body>`, never in
     // the article: an ancestor's stacking context once let the Starlight
     // right sidebar eat a card's clicks.
     registerCardSource({
       layer: 'notation',
       triggerFrom: symbolFrom,
-      itemFor: (trigger) => trigger.dataset.notationKey ?? null,
-      render: (key) => buildCard(key),
+      itemFor: (trigger) => {
+        const key = trigger.dataset.notationKey;
+        if (!key) return null;
+        return meansHere(trigger, key) ? itemOf(key) : foreignItem(trigger, key);
+      },
+      render: (item, trigger) => {
+        const key = keyOf(item);
+        const entry = entries.get(key);
+        if (meansHere(trigger, key) && entry) return buildCard(key, entry);
+        // K6: a symbol of a card from another page, as that page explains it.
+        const from = foreignOf(trigger)?.page;
+        return from ? buildFrom(item, from) : null;
+      },
+      // K5: the entry on the page the card was opened on.
+      build: buildFrom,
+      // K5: a shared symbol read off another page is this page's when it explains it.
+      awayItem: (item) => {
+        const key = keyOf(item);
+        return item.includes('<') && entries.has(key) && scopeOf(key) !== 'local' ? key : item;
+      },
+      // D4: the symbols here that look like a card's symbol from another page.
+      glyphOf: (trigger) => {
+        const key = trigger.dataset.notationKey ?? '';
+        return meansHere(trigger, key) ? glyphOf(entries.get(key)) : null;
+      },
+      lookalikes: (glyph) =>
+        externalTriggers.filter(
+          (trigger) => glyphOf(entries.get(trigger.dataset.notationKey ?? '')) === glyph,
+        ),
       onChange: (open) => {
         for (const trigger of highlightTargets) {
           trigger.classList.toggle(
             'is-notation-active',
-            open.has(trigger.dataset.notationKey ?? ''),
+            open.has(itemOf(trigger.dataset.notationKey ?? '')),
           );
         }
         for (const trigger of symbolTriggers) {
-          const mode = open.get(trigger.dataset.notationKey ?? '');
+          const mode = open.get(itemOf(trigger.dataset.notationKey ?? ''));
           trigger.setAttribute('aria-pressed', String(!!mode && isKept(mode)));
         }
       },
@@ -497,10 +709,11 @@ for (const gloss of glossItems) {
     window.addEventListener('hashchange', openIfTargeted);
   }
 
-  for (const root of document.querySelectorAll<HTMLElement>(
-    '[data-notation-layer]',
-  )) {
-    setupNotationLayer(root);
+  const roots = Array.from(
+    document.querySelectorAll<HTMLElement>('[data-notation-layer]'),
+  );
+  setupNotationLayers(roots);
+  for (const root of roots) {
     const details = root.querySelector<HTMLDetailsElement>(
       ':scope > .notation-list-titlebar > .notation-list[id]',
     );
@@ -759,18 +972,29 @@ for (const gloss of glossItems) {
       }
     }
 
-    .notation-status {
-      padding: 0.08rem 0.35rem;
-      border: 1px solid var(--sl-color-gray-5);
-      border-radius: 999px;
-      color: var(--sl-color-gray-3);
+    .notation-formula {
+      font-size: var(--sl-text-sm);
+    }
+
+    /* A secondary line, a step below the card's text: the units, and the
+       set a running index runs over (rule N23). */
+    .notation-units,
+    .notation-range {
       font-size: var(--sl-text-xs);
-      font-weight: 500;
     }
 
-    .notation-formula,
-    .notation-units {
-      font-size: var(--sl-text-sm);
+    .notation-range[hidden] {
+      display: none;
+    }
+
+    /* K6: away from its page, a symbol of that page's own opens with where
+       it is defined, and that it means this only there. */
+    .notation-panel-origin {
+      font-size: var(--sl-text-xs);
+    }
+
+    .notation-panel-origin[hidden] {
+      display: none;
     }
 
     /* Cursor, hover highlight, and "Copied!" flash for this plain-span
@@ -795,13 +1019,10 @@ for (const gloss of glossItems) {
 
     /* Each open explanation is its own card, cloned from the `HoverPanel`
        shell above and mounted by the card manager (`card-manager.ts`) on
-       `<body>`. Relative to the surrounding prose's own font-size, not a
-       fixed Starlight step: `%` resolves against the same base the article's
-       paragraphs use. `.notation-panel-body` and its descendants below style
-       the fields common to both this static list and a card's content. */
-    .notation-popup.hover-panel {
-      font-size: 90%;
-    }
+       `<body>`. Its text is the size of every card's, `HoverPanel`'s
+       `--sl-text-sm` (14 px, the article's caption size); it used to be 90%
+       here alone. `.notation-panel-body` and its descendants below style the
+       fields common to both this static list and a card's content. */
 
     /* Symbols inside a card's formula are click/hover-through triggers for
        another card — the D15 case this whole file exists for. */

package/src/components/notation/NotationMath.astro

@@ -3,6 +3,8 @@ import { renderNotationMath } from './render-notation-math';
 import SafeMathNode from './SafeMathNode.astro';
 import {
   decorationOfEntry,
+  indexDisplayLatex,
+  indexOfEntry,
   operatorDisplayLatex,
 } from '../../reference/math-glyphs.mjs';
 
@@ -14,9 +16,14 @@ interface Props {
 const { latex, class: className } = Astro.props;
 // An operator entry (`\dot{}`, rule N22) is shown over a placeholder square;
 // on its own the decoration is a speck.
+// An index entry (`{}_0`, rule N23) the same way: `\square_0`.
 const operator = decorationOfEntry(latex);
 const nodes = renderNotationMath(
-  operator === undefined ? latex : operatorDisplayLatex(operator),
+  operator !== undefined
+    ? operatorDisplayLatex(operator)
+    : indexOfEntry(latex) !== undefined
+      ? indexDisplayLatex(latex)
+      : latex,
 );
 ---