seemore 1.12.3 → 1.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/entry.prerender.tsx

@@ -1,7 +1,8 @@
 import { Writable } from 'node:stream';
-import { StrictMode, type ReactNode } from 'react';
+import { StrictMode, type ComponentProps, type ReactNode } from 'react';
 import { renderToPipeableStream } from 'react-dom/server';
 import { MemoryRouter, RouterProvider, createMemoryRouter } from 'react-router';
+import { TabsContent } from 'fumadocs-ui/components/tabs';
 import { config } from 'virtual:seemore/config';
 import { toBasename, withBase } from '../shared/base.js';
 import { ogImagePath } from '../shared/og.js';
@@ -121,6 +122,11 @@ export interface ExportedArticle {
  * single-page export. Rendering the component directly, rather than extracting the
  * article from a full-page render, means no HTML parsing anywhere in the export path.
  *
+ * Tabs render force-mounted: Radix keeps only the active panel's content in the tree, and
+ * a file with three of its four tabs empty is no export at all. Force-mounted panels hide
+ * through fumadocs' own `data-[state=inactive]:hidden` rule, which the stylesheet the
+ * export inlines already carries, and the file's runtime does the switching.
+ *
  * Diagrams are absent here, as in every prerendered page (see `Mermaid.tsx`); the CLI
  * export inlines a runtime that renders them when the file is opened.
  */
@@ -132,12 +138,16 @@ export async function renderArticle(url: string): Promise<ExportedArticle> {
   if (page === undefined) throw new Error(`No page at ${url}.`);
 
   const Content = page.default;
+  const exportComponents = {
+    ...mdxComponents,
+    CodeBlockTab: (props: ComponentProps<typeof TabsContent>) => <TabsContent {...props} forceMount />,
+  };
   // A router is still required: content links go through react-router's `Link`, which
   // reads the routing context. A memory router with just this page is the smallest one.
   const { html, failures } = await renderToHtml(
     <StrictMode>
       <MemoryRouter initialEntries={[withBase(config.base, url)]} basename={toBasename(config.base)}>
-        <Content components={mdxComponents} />
+        <Content components={exportComponents} />
       </MemoryRouter>
     </StrictMode>,
   );

package/src/app/export/exportPage.ts

@@ -216,6 +216,42 @@ function buildExportToc(article: Element): Element | undefined {
   return nav;
 }
 
+/**
+ * Radix Tabs keeps only the active panel's content mounted, so the article's DOM alone
+ * misses every inactive tab. Walk each tablist, select each trigger in turn — which also
+ * gives any diagram inside the panel its scroll-into-view — and record the panel's HTML
+ * while it is up. The first trigger is re-selected so the page is left as it was found.
+ */
+async function captureTabPanels(): Promise<Map<string, string>> {
+  const captured = new Map<string, string>();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+
+  for (const tablist of document.querySelectorAll('[role="tablist"]')) {
+    const triggers = Array.from(tablist.querySelectorAll<HTMLButtonElement>('button[role="tab"]'));
+    for (const trigger of triggers) {
+      // Radix activates a tab on `mousedown`, not `click` — and a React re-render means
+      // the panel's content appears a tick later, so both sides are handled by hand.
+      trigger.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window, button: 0 }));
+      const panel = document.getElementById(trigger.getAttribute('aria-controls') ?? '');
+      if (panel === null) continue;
+      await waitFor(() => panel.childElementCount > 0, 15_000);
+      panel.scrollIntoView({ behavior: 'instant', block: 'center' });
+      await waitFor(
+        () =>
+          panel.querySelector('.seemore-mermaid, .seemore-d2') === null ||
+          panel.querySelector('svg, .seemore-mermaid-error, .seemore-d2-error') !== null,
+        15_000,
+      );
+      captured.set(panel.id, panel.innerHTML);
+    }
+    triggers[0]?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window, button: 0 }));
+  }
+
+  window.scrollTo(scrollX, scrollY);
+  return captured;
+}
+
 /** The article is the only thing taken, but dev leaves editor affordances inside it. */
 function cleanArticleForExport(article: Element): Element {
   const clone = article.cloneNode(true) as Element;
@@ -237,8 +273,9 @@ function escapeHtml(text: string): string {
 }
 
 /**
- * The exported file's runtime: theme toggle, code copy, heading anchor copy, click-to-zoom —
- * the behaviors kept, at roughly a kilobyte instead of the site bundle. Handed to React in
+ * The exported file's runtime: theme toggle, code copy, heading anchor copy, tabs,
+ * click-to-zoom — the behaviors kept, at roughly a kilobyte instead of the site bundle.
+ * Handed to React in
  * hydration on the live page; here each is a few lines against the static DOM.
  *
  * Kept free of `</script>`-shaped sequences by construction: it is inlined verbatim.
@@ -280,6 +317,27 @@ const RUNTIME = `(function () {
     });
   });
 
+  // Tabs are exported as the static Radix markup the live page hydrated; the file wires
+  // them back up by hand — a click selects within its tablist and swaps the panels.
+  document.querySelectorAll('[role="tablist"]').forEach(function (tablist) {
+    var triggers = [].slice.call(tablist.querySelectorAll('button[role="tab"]'));
+    triggers.forEach(function (trigger) {
+      trigger.addEventListener('click', function () {
+        triggers.forEach(function (other) {
+          var active = other === trigger;
+          other.setAttribute('aria-selected', active ? 'true' : 'false');
+          other.setAttribute('data-state', active ? 'active' : 'inactive');
+          other.setAttribute('tabindex', active ? '0' : '-1');
+          var panel = document.getElementById(other.getAttribute('aria-controls') || '');
+          if (panel) {
+            panel.hidden = !active;
+            panel.setAttribute('data-state', active ? 'active' : 'inactive');
+          }
+        });
+      });
+    });
+  });
+
   // The live site's TOC follows the reader with fumadocs' own scroll tracking; in the file,
   // the plainest version of the same behaviour — last heading above the fold wins.
   var tocLinks = [].slice.call(document.querySelectorAll('.seemore-export-toc a'));
@@ -398,7 +456,12 @@ export async function exportPageAsHtml(): Promise<void> {
 
   await prepareDiagrams();
 
+  const tabs = await captureTabPanels();
   const clone = cleanArticleForExport(article);
+  for (const [id, html] of tabs) {
+    const panel = clone.querySelector(`[id="${CSS.escape(id)}"]`);
+    if (panel !== null) panel.innerHTML = html;
+  }
   await inlineImages(clone);
 
   const toc = buildExportToc(clone);

package/src/app/export/standalone.ts

@@ -6,7 +6,7 @@
  * bundled to an IIFE and inlined into the file, finishes the job when the page is opened:
  * each diagram is rendered from the source `pre` the site's own components leave in
  * prerendered output. It also binds the behaviors the export keeps — theme toggle, code
- * copy, click-to-zoom — so the file behaves like the browser-exported one.
+ * copy, tabs, click-to-zoom — so the file behaves like the browser-exported one.
  *
  * The browser export ships a hand-written twin of the behavior half (the `RUNTIME` string
  * in `exportPage.ts`): it needs no diagram half, because its diagrams are already SVG when
@@ -96,6 +96,27 @@ function bindBehaviors(): void {
     });
   }
 
+  // Tabs are exported as the static Radix markup the live page hydrated; the file wires
+  // them back up by hand — a click selects within its tablist and swaps the panels.
+  for (const tablist of document.querySelectorAll('[role="tablist"]')) {
+    const triggers = Array.from(tablist.querySelectorAll('button[role="tab"]'));
+    for (const trigger of triggers) {
+      trigger.addEventListener('click', () => {
+        for (const other of triggers) {
+          const active = other === trigger;
+          other.setAttribute('aria-selected', active ? 'true' : 'false');
+          other.setAttribute('data-state', active ? 'active' : 'inactive');
+          other.setAttribute('tabindex', active ? '0' : '-1');
+          const panel = document.getElementById(other.getAttribute('aria-controls') ?? '');
+          if (panel !== null) {
+            panel.hidden = !active;
+            panel.setAttribute('data-state', active ? 'active' : 'inactive');
+          }
+        }
+      });
+    }
+  }
+
   // The live site's TOC follows the reader with fumadocs' own scroll tracking; in the file,
   // the plainest version of the same behaviour — last heading above the fold wins.
   const tocLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.seemore-export-toc a'));