explico 0.2.0 → 0.4.0

package/src/components/reference/FloatRefLayer.astro

@@ -0,0 +1,671 @@
+---
+/**
+ * Progressive enhancement for `[[eq-key]]` / `[[tab-key]]` / `[[fig-key]]`
+ * references in prose (F4, extended F-tables-figures) — one hover/pin/jump
+ * engine shared by all three keyed floats. This generalizes the original
+ * equation-only `EquationRefLayer`; the positioning, mutual-exclusion, and
+ * pin/jump/Escape mechanics are unchanged, parameterized over `KIND_CONFIG`
+ * below so a hover on any of the three trigger classes is handled the same
+ * way.
+ *
+ * The no-JS baseline already works for all three: `a.equation-ref` /
+ * `a.table-ref` / `a.figure-ref` are real links to `#eq-`/`#tab-`/`#fig-`
+ * anchors, and `KeyedFloatEnhancer.astro` + `global.css`'s `:target` rules
+ * handle the landing. This layer adds a *preview*, so pointing at a
+ * reference in the prose doesn't require leaving the sentence to see what
+ * it points to:
+ *
+ *  - if the referenced float is on the current page and already fully on
+ *    screen, it is highlighted in place instead of opening a card;
+ *  - otherwise a small card floats near the reference showing its number,
+ *    caption (table/figure), content, and a "Jump to …" link.
+ *
+ * What the card's content shows differs by kind:
+ *  - equation: the KaTeX formula, cloned from the target (unchanged from the
+ *    original `EquationRefLayer` behavior).
+ *  - table: the rendered `<table>`, cloned from the target.
+ *  - figure: cloned only when the `<Figure>` was authored `previewable`
+ *    (the default) — an interactive `client:*` island set
+ *    `previewable={false}` shows its caption and number only, since a
+ *    cloned copy would be an inert, non-hydrated, id-colliding duplicate,
+ *    not a working preview.
+ *
+ * Cross-page references (`[[lesson#eq-key]]` etc.) get the same card: their
+ * `href` is a real path to another lesson page, so `showCrossPage` fetches
+ * and parses that page once (cached), pulls the `#eq-…`/`#tab-…`/`#fig-…`
+ * node out of it, and fills the card exactly as above (cloning across
+ * documents via `importNode`). The card always opens — there is nothing in
+ * this document to highlight in place — and clicking the reference navigates
+ * to the other page, where `KeyedFloatEnhancer.astro` handles the landing.
+ *
+ * This is a single-panel engine, not the notation layer's stack
+ * (`popup-stack.ts`): only one card is ever open at a time — now shared
+ * across all three kinds, not just equations — which is also why it's
+ * hand-rolled here rather than built on `createHoverPanel`.
+ * `claimActiveSurface`/`releaseActiveSurface` are still reused so an open
+ * float card and an open citation or notation popup remain mutually
+ * exclusive.
+ */
+import HoverPanel from '../HoverPanel.astro';
+---
+
+<HoverPanel id="float-ref-panel" label="Reference preview" data-float-ref-panel>
+  <div class="float-ref-panel-body">
+    <div class="float-ref-panel-main">
+      <div class="float-ref-panel-content" data-panel-content></div>
+      <a class="float-ref-panel-number" data-panel-number></a>
+    </div>
+    <p class="float-ref-panel-caption" data-panel-caption></p>
+    <a class="float-ref-panel-jump" data-panel-jump
+      >Jump to <span data-panel-jump-label></span
+      ><span aria-hidden="true"> ↗</span></a
+    >
+  </div>
+</HoverPanel>
+
+<script>
+  import { claimActiveSurface, releaseActiveSurface } from '../hover-panel';
+
+  const GROUP = 'float-ref';
+
+  interface KindConfig {
+    readonly triggerClass: string;
+    readonly hrefPrefix: string;
+    readonly numberClass: string;
+    readonly numberDataKey: string;
+    readonly highlightClass: string;
+    readonly jumpLabel: string;
+    /** Only the equation number badge fades until hovered/visited (F4) — a
+     *  table/figure number is always visible in its caption, so pinning one
+     *  has nothing to reveal. */
+    readonly revealOnPin: boolean;
+    fillContent(target: HTMLElement, contentEl: HTMLElement): void;
+    captionFor(target: HTMLElement): string;
+  }
+
+  // `importNode`, not `cloneNode`: `target` may come from a *different*
+  // document (a cross-page reference's target, parsed from a fetched page —
+  // see `fetchDoc`), and only `importNode` adopts it into this document.
+  function cloneEquationFormula(target: HTMLElement): HTMLElement {
+    const clone = document.importNode(target, true);
+    clone.removeAttribute('id');
+    clone.removeAttribute('data-eq-number');
+    clone.removeAttribute('data-eq-key');
+    clone.removeAttribute('data-eq-auto');
+    clone.classList.remove('keyed-equation', 'eq-ref-highlight');
+    clone.querySelector('.keyed-equation__number')?.remove();
+    return clone;
+  }
+
+  function cloneBody(target: HTMLElement, bodyClass: string): HTMLElement | null {
+    const body = target.querySelector<HTMLElement>(`.${bodyClass}`);
+    return body ? document.importNode(body, true) : null;
+  }
+
+  const KINDS: Record<'equation' | 'table' | 'figure', KindConfig> = {
+    equation: {
+      triggerClass: 'equation-ref',
+      hrefPrefix: '#eq-',
+      numberClass: 'keyed-equation__number',
+      numberDataKey: 'eqNumber',
+      highlightClass: 'eq-ref-highlight',
+      jumpLabel: 'equation',
+      revealOnPin: true,
+      fillContent(target, contentEl) {
+        contentEl.replaceChildren(cloneEquationFormula(target));
+      },
+      captionFor() {
+        return '';
+      },
+    },
+    table: {
+      triggerClass: 'table-ref',
+      hrefPrefix: '#tab-',
+      numberClass: 'keyed-table__number',
+      numberDataKey: 'tabNumber',
+      highlightClass: 'tab-ref-highlight',
+      jumpLabel: 'table',
+      revealOnPin: false,
+      fillContent(target, contentEl) {
+        const clone = cloneBody(target, 'keyed-table__body');
+        contentEl.replaceChildren(...(clone ? [clone] : []));
+      },
+      captionFor(target) {
+        return (
+          target.querySelector('.keyed-table__caption-text')?.textContent ?? ''
+        );
+      },
+    },
+    figure: {
+      triggerClass: 'figure-ref',
+      hrefPrefix: '#fig-',
+      numberClass: 'keyed-figure__number',
+      numberDataKey: 'figNumber',
+      highlightClass: 'fig-ref-highlight',
+      jumpLabel: 'figure',
+      revealOnPin: false,
+      fillContent(target, contentEl) {
+        const previewable = target.dataset.figPreviewable !== 'false';
+        const clone = previewable ? cloneBody(target, 'keyed-figure__body') : null;
+        contentEl.replaceChildren(...(clone ? [clone] : []));
+      },
+      captionFor(target) {
+        return (
+          target.querySelector('.keyed-figure__caption-text')?.textContent ?? ''
+        );
+      },
+    },
+  };
+
+  const TRIGGER_SELECTOR = Object.values(KINDS)
+    .map((kind) => `a.${kind.triggerClass}`)
+    .join(', ');
+
+  function closestElement(node: EventTarget | null, selector: string) {
+    return node instanceof Element ? node.closest<HTMLElement>(selector) : null;
+  }
+
+  function kindOf(trigger: HTMLElement): KindConfig | undefined {
+    return Object.values(KINDS).find((kind) =>
+      trigger.classList.contains(kind.triggerClass),
+    );
+  }
+
+  /**
+   * A `[[lesson#eq-key]]` reference: its `href` is a real path to another page
+   * (`/motion/constant-acceleration/#eq-velocity`), not the bare `#eq-…`
+   * fragment a same-page reference carries. `remark-notation` also stamps a
+   * `data-<prefix>-lesson` attribute, so either signal identifies one.
+   */
+  function crossPageHref(
+    trigger: HTMLElement,
+    kind: KindConfig,
+  ): { page: string; id: string } | null {
+    const href = trigger.getAttribute('href') ?? '';
+    if (href.startsWith('#')) return null;
+    const hash = href.indexOf('#');
+    if (hash === -1) return null;
+    const id = href.slice(hash + 1);
+    if (!id.startsWith(kind.hrefPrefix.slice(1))) return null;
+    return { page: href.slice(0, hash), id };
+  }
+
+  /**
+   * Parsed target pages, keyed by path. A cross-page preview fetches the
+   * referenced lesson once and reuses it for every later hover on this page.
+   * A failed fetch drops its entry so a later hover can retry.
+   */
+  const pageCache = new Map<string, Promise<Document>>();
+
+  function fetchDoc(page: string): Promise<Document> {
+    let pending = pageCache.get(page);
+    if (!pending) {
+      pending = fetch(page, { credentials: 'same-origin' })
+        .then((response) => {
+          if (!response.ok) throw new Error(`${response.status} for ${page}`);
+          return response.text();
+        })
+        .then((html) => new DOMParser().parseFromString(html, 'text/html'))
+        .catch((error) => {
+          pageCache.delete(page);
+          throw error;
+        });
+      pageCache.set(page, pending);
+    }
+    return pending;
+  }
+
+  /**
+   * A cloned equation preview needs KaTeX's stylesheet to render. Every page
+   * that *authors* math already loads it; this only matters for a page whose
+   * sole math is a cross-page reference, so copy the `<link>` from the fetched
+   * document when this one has none.
+   */
+  function ensureKatexStylesheet(sourceDoc: Document): void {
+    const selector = 'link[rel="stylesheet"][href*="katex"]';
+    if (document.querySelector(selector)) return;
+    const link = sourceDoc.querySelector<HTMLLinkElement>(selector);
+    if (link) document.head.appendChild(document.importNode(link, true));
+  }
+
+  function setup() {
+    const panel = document.querySelector<HTMLElement>('[data-float-ref-panel]')!;
+    if (!panel || panel.dataset.floatRefReady === 'true') return;
+
+    const refs = Array.from(
+      document.querySelectorAll<HTMLAnchorElement>(
+        Object.values(KINDS)
+          .map((kind) => `.sl-markdown-content a.${kind.triggerClass}`)
+          .join(', '),
+      ),
+    ).filter((a) => {
+      const kind = kindOf(a);
+      if (!kind) return false;
+      // Same-page (`#eq-…`) or a resolvable cross-page (`/lesson/#eq-…`) ref.
+      return (
+        (a.getAttribute('href') ?? '').startsWith(kind.hrefPrefix) ||
+        crossPageHref(a, kind) !== null
+      );
+    });
+    if (refs.length === 0) return;
+    panel.dataset.floatRefReady = 'true';
+
+    const refSet = new Set<HTMLElement>(refs);
+    const numberEl = panel.querySelector<HTMLAnchorElement>('[data-panel-number]')!;
+    const contentEl = panel.querySelector<HTMLElement>('[data-panel-content]')!;
+    const captionEl = panel.querySelector<HTMLElement>('[data-panel-caption]')!;
+    const jumpEl = panel.querySelector<HTMLAnchorElement>('[data-panel-jump]')!;
+    const jumpLabelEl = panel.querySelector<HTMLElement>('[data-panel-jump-label]')!;
+    const closeButton = panel.querySelector<HTMLElement>('[data-hover-panel-close]');
+
+    let activeTrigger: HTMLElement | null = null;
+    let activeTarget: HTMLElement | null = null;
+    let activeKind: KindConfig | null = null;
+    let mode: 'highlight' | 'panel' | null = null;
+    let pinned = false;
+    let leaveTimer: number | null = null;
+
+    const targetFor = (trigger: HTMLElement, kind: KindConfig) => {
+      const href = trigger.getAttribute('href') ?? '';
+      return href.startsWith(kind.hrefPrefix)
+        ? document.getElementById(href.slice(1))
+        : null;
+    };
+
+    const isFullyVisible = (el: HTMLElement) => {
+      const rect = el.getBoundingClientRect();
+      const headerBottom =
+        document
+          .querySelector<HTMLElement>('.header')
+          ?.getBoundingClientRect().bottom ?? 0;
+      const top = Math.max(0, headerBottom);
+      return (
+        rect.top >= top &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      );
+    };
+
+    const reveal = (target: HTMLElement | null, kind: KindConfig) => {
+      if (!target || !kind.revealOnPin) return;
+      target.querySelector(`.${kind.numberClass}`)?.classList.add('eq-number-revealed');
+    };
+
+    function position(trigger: HTMLElement) {
+      const edge = 12;
+      const gap = 10;
+      const displayEquation = trigger.closest<HTMLElement>('.katex-display');
+      const safeRegion = displayEquation ?? trigger;
+      const regionRect = safeRegion.getBoundingClientRect();
+      const anchorRect = trigger.getBoundingClientRect();
+
+      const headerBottom =
+        document
+          .querySelector<HTMLElement>('.header')
+          ?.getBoundingClientRect().bottom ?? 0;
+      const verticalStart = Math.max(edge, headerBottom + edge);
+      const verticalEnd = window.innerHeight - edge;
+      const spaceAbove = regionRect.top - gap - verticalStart;
+      const spaceBelow = verticalEnd - regionRect.bottom - gap;
+
+      panel.style.maxHeight = `${Math.max(spaceAbove, spaceBelow, 0)}px`;
+      let rect = panel.getBoundingClientRect();
+      const placeBelow = spaceBelow >= rect.height || spaceBelow >= spaceAbove;
+      panel.style.maxHeight = `${Math.max(placeBelow ? spaceBelow : spaceAbove, 0)}px`;
+      rect = panel.getBoundingClientRect();
+
+      let top = placeBelow
+        ? regionRect.bottom + gap
+        : regionRect.top - gap - rect.height;
+      let left = anchorRect.left + anchorRect.width / 2 - rect.width / 2;
+
+      const article = document.querySelector<HTMLElement>('.sl-markdown-content');
+      const articleRect = article?.getBoundingClientRect();
+      const horizontalStart = Math.max(edge, articleRect?.left ?? edge);
+      const horizontalEnd = Math.min(
+        window.innerWidth - edge,
+        articleRect?.right ?? window.innerWidth - edge,
+      );
+
+      top = Math.max(verticalStart, Math.min(top, verticalEnd - rect.height));
+      left =
+        horizontalEnd - horizontalStart >= rect.width
+          ? Math.max(horizontalStart, Math.min(left, horizontalEnd - rect.width))
+          : Math.max(edge, Math.min(left, window.innerWidth - rect.width - edge));
+
+      panel.style.top = `${Math.round(top)}px`;
+      panel.style.left = `${Math.round(left)}px`;
+    }
+
+    function fillPanel(trigger: HTMLElement, target: HTMLElement, kind: KindConfig) {
+      const number = (target.dataset[kind.numberDataKey] ?? '') as string;
+      const label = kind.jumpLabel;
+      const href = trigger.getAttribute('href') ?? '';
+      // The number sits to the right of the content and is itself the jump link
+      // — for an equation just "(2.1)", for a table/figure the labelled form.
+      numberEl.textContent =
+        kind.jumpLabel === 'equation'
+          ? `(${number})`
+          : `${label.charAt(0).toUpperCase()}${label.slice(1)} ${number}`;
+      numberEl.href = href;
+      numberEl.title = `Jump to the ${label}`;
+      kind.fillContent(target, contentEl);
+      captionEl.textContent = kind.captionFor(target);
+      captionEl.hidden = captionEl.textContent.length === 0;
+      jumpLabelEl.textContent = label;
+      jumpEl.href = href;
+    }
+
+    function clearAll() {
+      if (activeTarget && activeKind) {
+        activeTarget.classList.remove(activeKind.highlightClass);
+      }
+      if (mode === 'panel') {
+        panel.hidden = true;
+        releaseActiveSurface(GROUP);
+      }
+      activeTrigger = null;
+      activeTarget = null;
+      activeKind = null;
+      mode = null;
+      pinned = false;
+    }
+
+    /**
+     * Pin the open card and hand the exclusivity group back: a pinned card is a
+     * little workspace the reader dwells in, so hovering a symbol *inside* it
+     * must be free to open its notation popup without the surface arbiter
+     * treating that as "attention moved elsewhere" and closing the card. The
+     * card still closes on its "×", on an outside click, or on Escape.
+     */
+    function pinPanel(target: HTMLElement | null, kind: KindConfig) {
+      pinned = true;
+      reveal(target, kind);
+      releaseActiveSurface(GROUP);
+    }
+
+    function show(trigger: HTMLElement, pin: boolean) {
+      const kind = kindOf(trigger);
+      if (!kind) return;
+
+      const crossPage = crossPageHref(trigger, kind);
+      if (crossPage) {
+        void showCrossPage(trigger, kind, crossPage);
+        return;
+      }
+
+      const target = targetFor(trigger, kind);
+      if (!target) return;
+
+      if (pinned && trigger !== activeTrigger) return;
+
+      if (trigger === activeTrigger) {
+        if (pin) pinPanel(activeTarget, kind);
+        return;
+      }
+
+      clearAll();
+      activeTrigger = trigger;
+      activeTarget = target;
+      activeKind = kind;
+
+      if (isFullyVisible(target)) {
+        // Never reached with `pin: true` — the click handler only calls
+        // `show(trigger, true)` once it has already checked the float is
+        // off screen; an on-screen reference is left to navigate natively.
+        mode = 'highlight';
+        target.classList.add(kind.highlightClass);
+        return;
+      }
+
+      mode = 'panel';
+      fillPanel(trigger, target, kind);
+      claimActiveSurface(GROUP, clearAll);
+      panel.style.visibility = 'hidden';
+      panel.hidden = false;
+      position(trigger);
+      panel.style.visibility = 'visible';
+      if (pin) pinPanel(target, kind);
+    }
+
+    /**
+     * The cross-page counterpart of `show`: the target float lives on another
+     * lesson page, so there is nothing in this document to highlight in place.
+     * Fetch and parse that page once (`fetchDoc` caches it), pull the
+     * `#eq-…`/`#tab-…`/`#fig-…` node out of it, and fill the same card — the
+     * formula, table body, or (for a `previewable` figure) figure body, cloned
+     * across documents by `fillPanel`'s `importNode`-based helpers. A slow
+     * fetch that resolves after the pointer has moved on is discarded.
+     */
+    async function showCrossPage(
+      trigger: HTMLElement,
+      kind: KindConfig,
+      ref: { page: string; id: string },
+    ) {
+      if (pinned && trigger !== activeTrigger) return;
+      if (trigger === activeTrigger) return;
+
+      clearAll();
+      activeTrigger = trigger;
+      activeKind = kind;
+
+      let sourceDoc: Document;
+      try {
+        sourceDoc = await fetchDoc(ref.page);
+      } catch {
+        if (activeTrigger === trigger) clearAll();
+        return;
+      }
+      if (activeTrigger !== trigger) return;
+
+      const target = sourceDoc.getElementById(ref.id);
+      if (!target) {
+        clearAll();
+        return;
+      }
+
+      activeTarget = target; // a detached node owned by `sourceDoc`
+      mode = 'panel';
+      ensureKatexStylesheet(sourceDoc);
+      fillPanel(trigger, target, kind);
+      claimActiveSurface(GROUP, clearAll);
+      panel.style.visibility = 'hidden';
+      panel.hidden = false;
+      position(trigger);
+      panel.style.visibility = 'visible';
+    }
+
+    function scheduleLeave() {
+      if (pinned) return;
+      if (leaveTimer !== null) window.cancelAnimationFrame(leaveTimer);
+      leaveTimer = window.requestAnimationFrame(() => {
+        leaveTimer = null;
+        if (pinned || !activeTrigger) return;
+        const stillActive =
+          activeTrigger.matches(':hover') ||
+          activeTrigger === document.activeElement ||
+          panel.matches(':hover') ||
+          panel.contains(document.activeElement);
+        if (!stillActive) clearAll();
+      });
+    }
+
+    document.addEventListener('pointerover', (event) => {
+      if (event.pointerType === 'touch') return;
+      const trigger = closestElement(event.target, TRIGGER_SELECTOR);
+      if (!trigger || !refSet.has(trigger)) return;
+      if (trigger === closestElement(event.relatedTarget, TRIGGER_SELECTOR)) return;
+      show(trigger, false);
+    });
+
+    document.addEventListener('pointerout', (event) => {
+      if (event.pointerType === 'touch') return;
+      const trigger = closestElement(event.target, TRIGGER_SELECTOR);
+      if (!trigger || !refSet.has(trigger)) return;
+      if (trigger === closestElement(event.relatedTarget, TRIGGER_SELECTOR)) return;
+      scheduleLeave();
+    });
+
+    document.addEventListener('focusin', (event) => {
+      const trigger = closestElement(event.target, TRIGGER_SELECTOR);
+      if (trigger && refSet.has(trigger)) show(trigger, false);
+    });
+
+    document.addEventListener('focusout', (event) => {
+      const trigger = closestElement(event.target, TRIGGER_SELECTOR);
+      if (trigger && refSet.has(trigger)) scheduleLeave();
+    });
+
+    panel.addEventListener('pointerleave', scheduleLeave);
+
+    document.addEventListener('click', (event) => {
+      if (closeButton && closestElement(event.target, '[data-hover-panel-close]')) {
+        event.preventDefault();
+        clearAll();
+        return;
+      }
+
+      const trigger = closestElement(event.target, TRIGGER_SELECTOR);
+      if (trigger && refSet.has(trigger)) {
+        const kind = kindOf(trigger);
+        if (!kind) return;
+
+        const isCrossPage = crossPageHref(trigger, kind) !== null;
+
+        // A card that is already open for this trigger — same-page *or*
+        // cross-page — pins in place instead of navigating. The only way to
+        // the float itself is now the card's own number/"Jump to …" link.
+        if (mode === 'panel' && activeTrigger === trigger) {
+          event.preventDefault();
+          pinPanel(isCrossPage ? null : targetFor(trigger, kind), kind);
+          return;
+        }
+
+        if (isCrossPage) {
+          // No card open yet (keyboard, or a click that beat the hover): open
+          // it — pinned — rather than leave the page.
+          event.preventDefault();
+          const ref = crossPageHref(trigger, kind)!;
+          void showCrossPage(trigger, kind, ref).then(() => {
+            if (activeTrigger === trigger && mode === 'panel') {
+              pinPanel(null, kind);
+            }
+          });
+          return;
+        }
+
+        const target = targetFor(trigger, kind);
+        if (target && !isFullyVisible(target)) {
+          event.preventDefault();
+          show(trigger, true);
+        }
+        // Already fully visible: let the native anchor navigation through —
+        // `KeyedFloatEnhancer.astro` picks up the `hashchange` it produces.
+        return;
+      }
+
+      if (closestElement(event.target, '[data-panel-jump], [data-panel-number]')) {
+        // Real navigation to the float is the point of these links; just drop
+        // our own state so a stray pointerout doesn't fight it.
+        clearAll();
+        return;
+      }
+
+      if (mode === 'panel' && event.target instanceof Node) {
+        // An outside click closes the card — but a click landing in a notation
+        // popup that a card symbol opened is "inside" as far as the reader is
+        // concerned.
+        if (
+          !panel.contains(event.target) &&
+          !closestElement(event.target, '.notation-popup')
+        ) {
+          clearAll();
+        }
+      }
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && mode) clearAll();
+    });
+
+    window.addEventListener(
+      'resize',
+      () => {
+        if (mode === 'panel' && activeTrigger) position(activeTrigger);
+      },
+      { passive: true },
+    );
+    window.addEventListener(
+      'scroll',
+      () => {
+        if (mode === 'panel' && activeTrigger) position(activeTrigger);
+      },
+      { passive: true, capture: true },
+    );
+  }
+
+  setup();
+  document.addEventListener('astro:page-load', setup);
+</script>
+
+<style>
+  @layer starlight.components {
+    .float-ref-panel-body {
+      display: grid;
+      gap: 0.6rem;
+    }
+
+    .float-ref-panel-main {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+
+    .float-ref-panel-number {
+      flex: none;
+      align-self: flex-start;
+      margin: 0;
+      color: var(--sl-color-gray-3);
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      text-decoration: none;
+    }
+
+    .float-ref-panel-number:hover,
+    .float-ref-panel-number:focus-visible {
+      color: var(--sl-color-text-accent);
+      text-decoration: underline;
+    }
+
+    .float-ref-panel-content {
+      min-width: 0;
+      overflow-x: auto;
+      color: var(--sl-color-text);
+    }
+
+    .float-ref-panel-content:empty {
+      display: none;
+    }
+
+    .float-ref-panel-content :global(.katex-display) {
+      margin-block: 0;
+    }
+
+    .float-ref-panel-content :global(table) {
+      margin: 0;
+    }
+
+    .float-ref-panel-caption {
+      margin: 0;
+      color: var(--sl-color-gray-3);
+      font-size: var(--sl-text-xs);
+    }
+
+    .float-ref-panel-jump {
+      justify-self: start;
+      font-size: var(--sl-text-xs);
+    }
+  }
+</style>