duckfn-docs-kit 0.3.0 → 0.4.1

package/src/mermaid/render.ts

@@ -0,0 +1,172 @@
+/**
+ * The one place the kit talks to mermaid: the load, the render queue, the config
+ * the renderer is initialised with, and the two document-level facts a diagram
+ * needs (which colour mode the page is in, and how a rendered SVG gets into a
+ * shadow tree).
+ *
+ * Two upstream problems are solved here, and neither can be fixed from a site's
+ * `docusaurus.config.ts` or from the diagram source:
+ *
+ * 1. **The flash on a dark-mode first load, and the blank diagram.** Docusaurus'
+ *    `useColorMode()` deliberately lags behind on the first client render (its
+ *    state is initialised in an effect, to avoid hydration mismatches), so a
+ *    theme-aware renderer paints once with the light palette and then again with
+ *    the dark one: the light one lands on screen briefly (the flash), and the two
+ *    overlap inside mermaid's mutable singleton, which can resolve with an empty
+ *    SVG (an empty container, no error — facebook/docusaurus#8357). This module
+ *    reads `<html data-theme>` instead: the attribute the inline script in
+ *    `<head>` writes *before* the first paint, and the one the page CSS keys off.
+ *    Nothing is rendered until it is known, so each diagram is rendered exactly
+ *    once per mode, in the mode the page is really in.
+ * 2. **Concurrent renders.** Mermaid is a mutable singleton that cannot render
+ *    two diagrams at once (`mermaid.initialize()` sets one global config, and the
+ *    renderer mutates it as it goes): docusaurus#8357 asks to "render them
+ *    sequentially one after the other", pointing at mermaid-js/mermaid#3577.
+ *    Every render therefore goes through a single queue.
+ *
+ * This is browser-only code: `mermaid` and every DOM API are reached lazily, so
+ * Docusaurus' Node prerender can import the module graph without evaluating any
+ * of it.
+ */
+
+import type {DfkMermaidConfig, MermaidColorMode} from './config';
+
+/** The mermaid singleton, exactly as the package's default export types it. */
+type Mermaid = (typeof import('mermaid'))['default'];
+type RenderResult = Awaited<ReturnType<Mermaid['render']>>;
+type MermaidConfig = Parameters<Mermaid['initialize']>[0];
+
+/**
+ * One queue for the whole page: mermaid's `render()` calls are serialised,
+ * never concurrent. A rejected task must not poison the queue, hence the
+ * `catch` on the tail that the next task chains from.
+ */
+let queue: Promise<unknown> = Promise.resolve();
+
+function enqueue<T>(task: () => Promise<T>): Promise<T> {
+  const result = queue.then(task, task);
+  queue = result.catch(() => undefined);
+  return result;
+}
+
+let mermaidModule: Promise<Mermaid> | null = null;
+
+/**
+ * Loads (once) and returns the mermaid singleton. A dynamic `import()` so a page
+ * with no diagram never downloads it, and the Node prerender never evaluates it.
+ */
+function loadMermaid(): Promise<Mermaid> {
+  mermaidModule ??= import('mermaid').then((module) => module.default);
+  return mermaidModule;
+}
+
+/** Keeps the ids mermaid is handed unique across every diagram on a page. */
+let sequence = 0;
+
+/** How a diagram is rendered: its source, its config, and its colour mode. */
+export interface MermaidRenderRequest {
+  source: string;
+  config: DfkMermaidConfig;
+  colorMode: MermaidColorMode;
+}
+
+/** A rendered diagram: the SVG markup, plus mermaid's bind hook for click handlers. */
+export interface MermaidRenderOutput {
+  svg: string;
+  bind?(container: Element): void;
+}
+
+/**
+ * Renders one diagram, through the page-wide queue. Each render re-initialises
+ * mermaid with this diagram's config first: mermaid has two config levels and the
+ * site-wide one can only be set through `initialize()`.
+ */
+export function renderMermaid({
+  source,
+  config,
+  colorMode,
+}: MermaidRenderRequest): Promise<MermaidRenderOutput> {
+  const id = `dfk-mermaid-svg-${(sequence += 1)}`;
+  return enqueue(async () => {
+    const mermaid = await loadMermaid();
+    const options: MermaidConfig = {
+      startOnLoad: false,
+      ...config.options,
+      // `DfkMermaidConfig.theme` is a plain string on purpose — the kit does not
+      // pin mermaid's theme list (the shared config must stay dependency-free,
+      // and a site may name a theme a newer mermaid adds). This is the one place
+      // the value meets mermaid's own union, so the narrowing happens here.
+      theme: config.theme[colorMode] as MermaidConfig['theme'],
+    };
+    mermaid.initialize(options);
+    try {
+      const result: RenderResult = await mermaid.render(id, source);
+      return {svg: result.svg, bind: result.bindFunctions};
+    } catch (error) {
+      // Mermaid leaves a stray SVG/message in the DOM on error
+      // (https://github.com/mermaid-js/mermaid/issues/3205).
+      document.querySelector(`#d${id}`)?.remove();
+      throw error;
+    }
+  });
+}
+
+/** The colour mode the page is actually in, read from the pre-paint attribute. */
+export function documentColorMode(): MermaidColorMode {
+  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+}
+
+/**
+ * Calls `listener` whenever the page's colour mode changes, and returns the
+ * unsubscribe. The `<head>` script only *writes* the attribute on load, so a
+ * mode switch made later has to be observed — that is how a diagram follows the
+ * theme toggle.
+ */
+export function watchColorMode(listener: () => void): () => void {
+  const observer = new MutationObserver(listener);
+  observer.observe(document.documentElement, {attributeFilter: ['data-theme']});
+  return () => observer.disconnect();
+}
+
+/**
+ * Turns mermaid's SVG markup into a node a shadow tree can host.
+ *
+ * Mermaid serialises through `innerHTML`, so its output is *HTML*, not strict
+ * XML: an HTML label can carry a bare `<br>`, which `image/svg+xml` would reject.
+ * Parsing as `text/html` and taking the `<svg>` element gives the right
+ * namespace for free (the HTML parser enters foreign content for `<svg>`) and
+ * keeps markup out of `innerHTML`, which the kit's conventions rule out.
+ *
+ * Returns `null` when there is no `<svg>` to be found, so the caller can show an
+ * error instead of an empty box.
+ */
+export function parseMermaidSvg(owner: Document, svg: string): SVGElement | null {
+  const parsed = new DOMParser().parseFromString(svg, 'text/html');
+  const root = parsed.body.querySelector('svg');
+  return root ? (owner.importNode(root, true) as unknown as SVGElement) : null;
+}
+
+/**
+ * Serialises a rendered diagram into standalone SVG markup.
+ *
+ * Mermaid hands its SVG back as an **HTML** string (it stringifies a detached
+ * element through `innerHTML`), and HTML serialisation writes a void element
+ * without a closing slash: a `<br/>` the author put inside a label comes back as
+ * `<br>`. That is fine where it lands — the page's HTML parser reads it, and
+ * `parseMermaidSvg()` parses it the same way — but it is fatal for a *file*: a
+ * browser opening an `.svg` parses XML, and `<br>` inside a `<p>` there is
+ * `Opening and ending tag mismatch: br … and p`, with the drawing cut off at the
+ * first error.
+ *
+ * Re-serialising the live node with `XMLSerializer` fixes both halves at once:
+ * XML serialisation closes every element, and it emits the namespace declarations
+ * a standalone document needs (`xmlns` on the `<svg>`, and one on any
+ * `foreignObject` subtree, whose XHTML content inherits its namespace from the
+ * page rather than carrying it as an attribute).
+ *
+ * This is why the element keeps the rendered `<svg>` node for the download
+ * instead of mermaid's own string: only the node can be re-serialised.
+ */
+export function serializeMermaidSvg(svg: SVGElement): string {
+  return new XMLSerializer().serializeToString(svg);
+}

package/src/mermaid/styles.ts

@@ -0,0 +1,24 @@
+// The `<dfk-mermaid>` shadow-root CSS as an inline string (Vite `?inline`
+// import), mirroring `home/styles.ts` and `sql/styles.ts`. Everything the
+// component draws lives in the shadow tree — the diagram included, which is what
+// keeps mermaid's inline `<style>` (it ships one inside every SVG) scoped to this
+// one component instead of leaking into the page or into a sibling diagram.
+//
+// The type declaration lives in `vite-env.d.ts`; `tsc` never resolves the
+// `?inline` suffix, so the module graph stays buildable without Vite running.
+import mermaidCss from './DfkMermaid.css?inline';
+
+let sheet: CSSStyleSheet | null = null;
+
+/**
+ * The one parsed stylesheet shared by every `<dfk-mermaid>` shadow root.
+ * Created lazily: `CSSStyleSheet` does not exist during Docusaurus' Node
+ * prerender, and only the browser ever calls this.
+ */
+export function mermaidStyles(): CSSStyleSheet {
+  if (!sheet) {
+    sheet = new CSSStyleSheet();
+    sheet.replaceSync(mermaidCss);
+  }
+  return sheet;
+}

package/src/panzoom-view.ts

@@ -0,0 +1,235 @@
+import type {PanzoomObject} from '@panzoom/panzoom';
+
+/**
+ * The zoom / pan behaviour behind a rendered figure, shared by `<dfk-mermaid>`
+ * and the SQL result `svg` viewer.
+ *
+ * It owns no structure: the caller builds the viewport and the content box (each
+ * with its own class names, so each consumer's stylesheet can reach them) and
+ * hands both over. What lives here is the interaction contract — when panzoom may
+ * take the gesture, and how the zoom state is reflected back onto the viewport.
+ *
+ * **Zoom is opt-in and reversible.** panzoom starts disabled and only
+ * {@link setActive} turns it on, which is what lets an inline figure leave the
+ * page's scrolling alone: a wheel over a figure that is merely displayed is the
+ * browser's, and only a figure the reader has opened moves (the SQL result's
+ * fullscreen, a diagram's own). Deactivating resets the view to fit, so the next
+ * activation starts from the whole figure.
+ *
+ * This is browser-only code: `@panzoom/panzoom` is reached through a dynamic
+ * `import()`, so a page whose figures are never zoomed never loads it.
+ */
+
+/**
+ * The zoom range. `MIN_SCALE` is the fit-to-box scale: the figure opens there and
+ * cannot go below it, which is what makes "zoomed" a clean yes/no — it is exactly
+ * the state in which a drag pans, the wheel has something to undo, and the cursor
+ * stops promising plain text.
+ */
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const ZOOM_STEP = 0.25;
+
+/** The pan/zoom library, loaded once per page on first use. */
+let panzoomModule: Promise<typeof import('@panzoom/panzoom')['default']> | null = null;
+
+function loadPanzoom(): Promise<typeof import('@panzoom/panzoom')['default']> {
+  panzoomModule ??= import('@panzoom/panzoom').then((module) => module.default);
+  return panzoomModule;
+}
+
+export class PanZoomView {
+  readonly #viewport: HTMLElement;
+  readonly #content: HTMLElement;
+  #panzoom: PanzoomObject | null = null;
+  #loading = false;
+  #active = false;
+  /** Whether the viewport's wheel listener is currently attached. */
+  #wheelBound = false;
+
+  readonly #onWheel = (event: WheelEvent): void => {
+    this.#panzoom?.zoomWithWheel(event);
+  };
+  /** The cursor follows the zoom state, so it never promises a pan that cannot happen. */
+  readonly #onChange = (): void => {
+    this.#viewport.classList.toggle('dfk-panzoom-zoomed', this.zoomed);
+  };
+  readonly #onStart = (): void => {
+    // `panzoomstart` fires at fit too, where the gesture was left to the browser;
+    // only a drag that will really pan gets the closed hand.
+    this.#viewport.classList.toggle('dfk-panzoom-grabbing', this.zoomed);
+  };
+  readonly #onEnd = (): void => {
+    this.#viewport.classList.remove('dfk-panzoom-grabbing');
+  };
+
+  constructor(viewport: HTMLElement, content: HTMLElement) {
+    this.#viewport = viewport;
+    this.#content = content;
+    // panzoom reports state as DOM `CustomEvent`s dispatched on the element it
+    // transforms (`@panzoom/panzoom` v4 has no `on()` API), so they are listened
+    // for here, on the content box — which also means they need no teardown, and
+    // that re-creating the panzoom instance after a reconnect cannot double them.
+    content.addEventListener('panzoomchange', this.#onChange);
+    content.addEventListener('panzoomstart', this.#onStart);
+    content.addEventListener('panzoomend', this.#onEnd);
+  }
+
+  /** Whether the figure is enlarged past its fit-to-box size. */
+  get zoomed(): boolean {
+    return (this.#panzoom?.getScale() ?? MIN_SCALE) > MIN_SCALE;
+  }
+
+  /** Replaces the figure on screen and returns the view to fit. */
+  setContent(node: Node | null): void {
+    this.#content.replaceChildren(...(node ? [node] : []));
+    this.reset();
+  }
+
+  /**
+   * Turns wheel zoom and dragging on or off. Activating loads panzoom on first
+   * use (a figure nobody zooms never pays for the chunk); deactivating leaves the
+   * view at fit, so the figure a reader returns to is the whole one.
+   */
+  setActive(active: boolean): void {
+    if (active === this.#active) {
+      return;
+    }
+    this.#active = active;
+    if (active) {
+      void this.#ensurePanzoom();
+    } else {
+      this.reset();
+      this.#setEnabled(false);
+      this.#unbindWheel();
+    }
+  }
+
+  reset(): void {
+    this.#panzoom?.reset({
+      // Zooming back to fit is a transition the reader did not ask to skip, but
+      // one they may have asked not to have.
+      animate: !prefersReducedMotion(),
+    });
+  }
+
+  /** Releases the panzoom instance and returns the viewport to its idle state. */
+  destroy(): void {
+    this.#active = false;
+    this.#unbindWheel();
+    this.#panzoom?.destroy();
+    this.#panzoom = null;
+    this.#viewport.classList.remove('dfk-panzoom-zoomed', 'dfk-panzoom-grabbing');
+  }
+
+  /**
+   * Binds panzoom to the content box. `@panzoom/panzoom` is an enhancement, not a
+   * requirement: if its chunk never arrives, the figure still renders, only wheel
+   * zoom and dragging stay inert.
+   *
+   * Three settings carry the interaction contract:
+   *
+   * - `panOnlyWhenZoomed` — a figure that already fits must not swallow drags, so
+   *   panning only engages once it is enlarged. That is also what keeps
+   *   `touchAction: 'pan-y'` meaningful: vertical page scrolling stays the
+   *   browser's, pinch and horizontal drags go to the figure.
+   * - `handleStartEvent` — panzoom's default takes the gesture on *every*
+   *   pointerdown (`preventDefault` + `stopPropagation`), which costs the reader
+   *   text selection at every zoom level. Handing the gesture over only when a
+   *   drag will really pan is what makes the labels selectable while the figure is
+   *   at fit. Nothing else blocks it: panzoom's move listener is `passive` and
+   *   never calls `preventDefault`.
+   * - no `cursor` option — panzoom would then put `grab` on the element for good,
+   *   over text that is perfectly selectable. The cursor is driven by the zoom
+   *   state instead, from each consumer's stylesheet.
+   */
+  async #ensurePanzoom(): Promise<void> {
+    if (this.#panzoom !== null) {
+      this.#setEnabled(true);
+      this.#bindWheel();
+      return;
+    }
+    if (this.#loading) {
+      return;
+    }
+    this.#loading = true;
+    try {
+      const Panzoom = await loadPanzoom();
+      // Deactivated while the chunk was in flight: nothing to build, and the next
+      // activation starts from here again.
+      if (!this.#active || this.#panzoom !== null) {
+        return;
+      }
+      this.#panzoom = Panzoom(this.#content, {
+        maxScale: MAX_SCALE,
+        minScale: MIN_SCALE,
+        step: ZOOM_STEP,
+        panOnlyWhenZoomed: true,
+        touchAction: 'pan-y',
+        // panzoom's own default is `move`, written inline on the element — the
+        // cursor has to stay a CSS decision (see the consumers' stylesheets), so
+        // it is switched off here.
+        cursor: '',
+        disablePan: false,
+        disableZoom: false,
+        handleStartEvent: (event) => {
+          if (!this.zoomed) {
+            return;
+          }
+          event.preventDefault();
+          event.stopPropagation();
+        },
+      });
+      this.#clearPanzoomStyles();
+      this.#bindWheel();
+    } catch {
+      // Nothing to report: the figure is already usable without pan/zoom.
+    } finally {
+      this.#loading = false;
+    }
+  }
+
+  #setEnabled(enabled: boolean): void {
+    if (this.#panzoom === null) {
+      return;
+    }
+    this.#panzoom.setOptions({disablePan: !enabled, disableZoom: !enabled});
+    this.#clearPanzoomStyles();
+  }
+
+  /**
+   * panzoom forces `user-select: none` inline on the element *and its parent*,
+   * with no option to prevent it — that alone made every label in every diagram
+   * unselectable. It exists to stop a drag from selecting while panning, which
+   * `handleStartEvent` already covers: whenever a pan will happen, the gesture is
+   * taken with `preventDefault()` before the browser can start a selection.
+   * panzoom writes these styles when the instance is created and again on every
+   * `setOptions`, so they are cleared after each.
+   */
+  #clearPanzoomStyles(): void {
+    this.#content.style.userSelect = '';
+    this.#viewport.style.userSelect = '';
+  }
+
+  #bindWheel(): void {
+    if (this.#wheelBound) {
+      return;
+    }
+    this.#wheelBound = true;
+    // `passive: false` because `zoomWithWheel()` calls `preventDefault()` — a
+    // passive listener could not stop the page from scrolling underneath.
+    this.#viewport.addEventListener('wheel', this.#onWheel, {passive: false});
+  }
+
+  #unbindWheel(): void {
+    if (!this.#wheelBound) {
+      return;
+    }
+    this.#wheelBound = false;
+    this.#viewport.removeEventListener('wheel', this.#onWheel);
+  }
+}
+
+function prefersReducedMotion(): boolean {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

package/src/register.ts

@@ -4,6 +4,7 @@
 import 'iconify-icon';
 import {DfkFeatures} from './home/DfkFeatures';
 import {DfkHero} from './home/DfkHero';
+import {DfkMermaid} from './mermaid/DfkMermaid';
 import {DfkNextSteps} from './home/DfkNextSteps';
 import {DfkSql} from './sql/DfkSql';
 
@@ -12,6 +13,7 @@ const TAGS = {
   features: 'dfk-features',
   nextSteps: 'dfk-next-steps',
   sql: 'dfk-sql',
+  mermaid: 'dfk-mermaid',
 } as const;
 
 /**
@@ -31,6 +33,7 @@ export function registerDfkElements(): void {
     [TAGS.features]: DfkFeatures,
     [TAGS.nextSteps]: DfkNextSteps,
     [TAGS.sql]: DfkSql,
+    [TAGS.mermaid]: DfkMermaid,
   })) {
     if (!customElements.get(name)) {
       customElements.define(name, ctor);

package/src/remark.ts

@@ -15,7 +15,7 @@ import type {Plugin} from 'unified';
 export const DEFAULT_VERSION_PLACEHOLDER = '{{DUCKFN_VERSION}}';
 
 export interface VersionPlaceholderOptions {
-  /** The real version string to substitute in, e.g. `0.0.15`. */
+  /** The real version string to substitute in, e.g. `0.0.17`. */
   version: string;
   /** Override the token if a site uses a different one. */
   placeholder?: string;

package/src/source-dialog.ts

@@ -0,0 +1,126 @@
+import type {CodeEditor} from './codemirror';
+import {mountCodeEditor} from './codemirror';
+import {el} from './dom';
+
+/**
+ * The "edit the source" dialog shared by `<dfk-mermaid>` and the SQL result `svg`
+ * viewer: a modal holding a plain-text CodeMirror editor and an Apply / Cancel
+ * pair.
+ *
+ * The editor writes back through the callback {@link open} is given rather than
+ * through an event, so the owner keeps its own source as the single truth — the
+ * dialog never renders anything and never decides what a change means.
+ *
+ * The `<dialog>` is built once and reused; the editor mounts on first open and is
+ * kept, because a reader who edits one diagram is likely to edit the next. The
+ * dialog is shown *before* the editor mounts: CodeMirror measures its container as
+ * it is constructed, and a `display: none` dialog measures to zero.
+ *
+ * This is browser-only code.
+ */
+
+export interface SourceDialogLabels {
+  title: string;
+  apply: string;
+  cancel: string;
+}
+
+export class SourceDialog {
+  readonly root = el('dialog', {class: 'dfk-source-dialog'});
+  readonly #title = el('h2', {class: 'dfk-source-dialog-title'});
+  /** Where the CodeMirror editor mounts, inside the dialog. */
+  readonly #editorHost = el('div', {class: 'dfk-source-dialog-editor'});
+  readonly #applyBtn = el('button', {
+    class: 'dfk-source-dialog-button dfk-source-dialog-apply',
+    type: 'button',
+  });
+  readonly #cancelBtn = el('button', {class: 'dfk-source-dialog-button', type: 'button'});
+
+  /** The source the dialog was opened with, and the baseline for "was it edited". */
+  #source = '';
+  #onApply: ((value: string) => void) | null = null;
+  #editor: CodeEditor | null = null;
+  #editorLoading = false;
+
+  constructor(labels: SourceDialogLabels) {
+    this.#applyBtn.addEventListener('click', () => this.#apply());
+    this.#cancelBtn.addEventListener('click', () => this.root.close());
+    this.root.append(
+      el('div', {class: 'dfk-source-dialog-body'}, (body) =>
+        body.append(
+          this.#title,
+          this.#editorHost,
+          el('div', {class: 'dfk-source-dialog-footer'}, (footer) =>
+            footer.append(this.#cancelBtn, this.#applyBtn),
+          ),
+        ),
+      ),
+    );
+    this.setLabels(labels);
+  }
+
+  setLabels(labels: SourceDialogLabels): void {
+    this.#title.textContent = labels.title;
+    this.#cancelBtn.textContent = labels.cancel;
+    this.#applyBtn.textContent = labels.apply;
+  }
+
+  /**
+   * Shows the dialog with `source` in the editor. `onApply` receives the edited
+   * text — only when it differs from what was opened, so an unedited Apply is a
+   * plain close.
+   */
+  open(source: string, onApply: (value: string) => void): void {
+    this.#source = source;
+    this.#onApply = onApply;
+    this.root.showModal();
+    if (this.#editor) {
+      this.#editor.setValue(source);
+      return;
+    }
+    void this.#mountEditor();
+  }
+
+  /** Closes the dialog and releases the editor. The dialog node stays in place. */
+  destroy(): void {
+    this.#editor?.destroy();
+    this.#editor = null;
+    if (this.root.open) {
+      this.root.close();
+    }
+  }
+
+  async #mountEditor(): Promise<void> {
+    if (this.#editorLoading) {
+      return;
+    }
+    this.#editorLoading = true;
+    try {
+      // No language: the dialog edits mermaid source or SVG markup, neither of
+      // which has a first-party CodeMirror grammar here, and the reader is
+      // touching up a figure rather than writing SQL.
+      const editor = await mountCodeEditor(this.#editorHost, this.#source, () => undefined);
+      if (!this.root.isConnected || !this.root.open) {
+        // Closed (or detached) while the modules were loading: nothing will ever
+        // dispose this editor, so dispose it here.
+        editor.destroy();
+        return;
+      }
+      editor.setWrap(true);
+      this.#editor = editor;
+    } catch {
+      // The dialog stays open with an empty editor box; a second click retries.
+    } finally {
+      this.#editorLoading = false;
+    }
+  }
+
+  #apply(): void {
+    const edited = this.#editor?.getValue();
+    this.root.close();
+    if (edited !== undefined && edited !== this.#source) {
+      this.#source = edited;
+      this.#onApply?.(edited);
+    }
+  }
+}

package/src/sql/DfkSql.css

@@ -159,10 +159,13 @@
 
 /* --- Icon buttons and their tooltips ------------------------------------- */
 
-/* Duplicated in `sql.css`: these buttons live in this shadow tree, while the
-   fullscreen toggle a renderer parks in the result's tab strip lives in the
-   light DOM, where a shadow rule could not reach it. Keep both copies in sync. */
-.dfk-sql-icon-button {
+/* The class names are written by the shared `IconButton` widget (`src/IconButton.ts`).
+   The rules are duplicated in `sql.css` and `DfkMermaid.css`: these buttons live
+   in this shadow tree, the fullscreen toggle a renderer parks in the result's tab
+   strip lives in the light DOM, and a diagram's cluster lives in another shadow
+   tree entirely — a shadow rule can only ever reach one of the three. Keep the
+   copies in sync. */
+.dfk-icon-button {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -178,27 +181,27 @@
   transition: background 0.12s ease, color 0.12s ease;
 }
 
-.dfk-sql-icon-button:hover:not(:disabled),
-.dfk-sql-icon-button:focus-visible {
+.dfk-icon-button:hover:not(:disabled),
+.dfk-icon-button:focus-visible {
   background: var(--ifm-color-emphasis-200, #e6e6e6);
   color: var(--ifm-color-primary, #14459b);
 }
 
-.dfk-sql-icon-button:disabled {
+.dfk-icon-button:disabled {
   opacity: 0.45;
   cursor: progress;
 }
 
-.dfk-sql-icon-button[hidden] {
+.dfk-icon-button[hidden] {
   display: none;
 }
 
 /* A sticky state, e.g. the wrap toggle while wrapping is on. */
-.dfk-sql-icon-on {
+.dfk-icon-on {
   color: var(--ifm-color-primary, #14459b);
 }
 
-.dfk-sql-icon {
+.dfk-icon {
   font-size: 1rem;
 }