seemore 1.12.4 → 1.12.6

package/README.md

@@ -1,19 +1,18 @@
 <br/>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/assets/icon.png" alt="seemore" width="40" height="40">
-  <h1 align="center">seemore</h1>
+  <img src="https://raw.githubusercontent.com/arifszn/seemore/main/assets/logo.png" alt="seemore" width="280">
   <h4 align="center">Let AI write the Markdown. Let seemore show it better — zero config documentation framework.</h4>
   <p align="center">
     <a href="https://www.npmjs.com/package/seemore">
       <img src="https://img.shields.io/npm/v/seemore"/>
     </a>
-    <a href="https://marketplace.visualstudio.com/items?itemName=arifszn.seemore-vscode">
-      <img src="https://img.shields.io/badge/VS_Code-Marketplace-007ACC?logo=visualstudiocode&logoColor=white"/>
-    </a>
     <a href="https://open-vsx.org/extension/arifszn/seemore-vscode">
       <img src="https://img.shields.io/badge/Open_VSX-Registry-C160EF?logo=eclipseide&logoColor=white"/>
     </a>
+    <a href="https://marketplace.visualstudio.com/items?itemName=arifszn.seemore-vscode">
+      <img src="https://img.shields.io/badge/VS_Code-Marketplace-007ACC?logo=visualstudiocode&logoColor=white"/>
+    </a>
     <a href="https://github.com/arifszn/seemore/actions/workflows/ci.yml">
       <img src="https://github.com/arifszn/seemore/actions/workflows/ci.yml/badge.svg"/>
     </a>
@@ -39,6 +38,12 @@ A folder of `.md` files has no order. You cannot click a link between files. You
 
 **seemore** points at that folder and renders it as a real site. It does not move your files. It does not need any code.
 
+## Why seemore?
+
+Modern libraries can generate HTML, but that is not the same as previewing an existing project. seemore lets you view a folder of Markdown, such as a wiki or a notes folder, in the browser as a real site, without rewriting it, adding a build pipeline, or asking every teammate to learn HTML.
+
+That is the value of zero configuration: you open the project and see it as intended. If you stop using seemore, your files stay exactly where they are. There is nothing to clean up.
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/arifszn/seemore/main/packages/site/assets/home.png" alt="The seemore site: a terminal typing npx seemore to serve a folder of notes at localhost:4040, with an arrow pointing to the browser preview" width="640"/>
 </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "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

@@ -83,7 +83,16 @@ function renderToHtml(element: ReactNode): Promise<{ html: string; failures: unk
   });
 }
 
-/** Components an MDX file can use without importing anything. */
+/**
+ * Components an MDX file can use without importing anything.
+ *
+ * Adding one that hides or defers content by default (as `CodeBlockTabs` does — Radix
+ * mounts only the active panel) needs the export path updated in the same change, or the
+ * new content goes missing from every exported file the way the tabs did:
+ * `exportComponents` below, which force-mounts it for the prerender; `captureTabPanels` in
+ * `exportPage.ts`, which harvests it for the browser export; and the runtime that wires the
+ * static markup back up (`RUNTIME` in `exportPage.ts`, `bindBehaviors` in `standalone.ts`).
+ */
 const PROVIDED_COMPONENTS = 'Callout, Card, Cards, CodeBlockTabs, Mermaid, D2 and Pdf';
 
 /**

package/src/app/export/exportPage.ts

@@ -57,7 +57,23 @@ function waitFor(predicate: () => boolean, timeoutMs: number): Promise<void> {
  * reloads); the build ships a single hashed stylesheet link. Same-origin sheets are inlined
  * — a `file://` page cannot fetch them — and a sheet that is genuinely remote stays linked,
  * the same treaty as remote images.
+ *
+ * Every `<style>` is taken, not just the framework's: diagram libraries (Mermaid, D2) and
+ * Radix inject their own rules at runtime with no marker to select them by, and the export
+ * needs those. The two exceptions are the highlight rule (installed per-navigation, and
+ * meaningless in a static file) and any sheet a browser extension injected into the page —
+ * the latter is not the page's, would not load from a file anyway, and can run to hundreds
+ * of kilobytes; it is spotted by the `chrome-extension:`/`moz-extension:` URLs it carries.
+ */
+/**
+ * A stylesheet a browser extension put on the page, told apart by the extension-only URL
+ * scheme it loads its own assets from. Deliberately narrow: it must never match a rule the
+ * site or a library authored, since a false positive silently drops real styling.
  */
+function isExtensionCss(text: string): boolean {
+  return /\b(?:chrome-extension|moz-extension):\/\//i.test(text);
+}
+
 async function collectCss(): Promise<{ css: string; remoteLinks: string }> {
   const seen = new Set<string>();
   const parts: string[] = [];
@@ -67,7 +83,7 @@ async function collectCss(): Promise<{ css: string; remoteLinks: string }> {
     // The highlight rule is installed per-navigation and means nothing in a static file.
     if (style.id === 'seemore-highlight-style') continue;
     const text = style.textContent ?? '';
-    if (text.trim() === '' || seen.has(text)) continue;
+    if (text.trim() === '' || seen.has(text) || isExtensionCss(text)) continue;
     seen.add(text);
     parts.push(text);
   }
@@ -80,7 +96,9 @@ async function collectCss(): Promise<{ css: string; remoteLinks: string }> {
       continue;
     }
     if (url.origin !== location.origin) {
-      remote.push(link.outerHTML);
+      // An extension's own sheet (`chrome-extension://…`) is not the page's and would not
+      // load in the file anyway; only a genuinely remote http(s) sheet stays linked.
+      if (url.protocol === 'http:' || url.protocol === 'https:') remote.push(link.outerHTML);
       continue;
     }
     const text = await fetch(url.href)
@@ -384,11 +402,17 @@ const RUNTIME = `(function () {
   });
 })();`;
 
+/** The root attributes that still mean something once the page is a standalone file. */
+const KEPT_ROOT_ATTRIBUTES = new Set(['lang', 'dir', 'class']);
+
 function buildExportHtml(article: Element, css: string, remoteLinks: string, favicons: string): string {
-  // The root's attributes ride along (lang, dir, whatever a theme added) minus the theme
-  // class next-themes resolved for *this* screen: THEME_INIT sets that from the reader's
-  // own OS when the file is opened. An emptied class attribute is dropped entirely.
+  // Only the root attributes that mean something in a standalone file ride along: lang,
+  // dir, and class minus the theme class next-themes resolved for *this* screen — THEME_INIT
+  // sets that from the reader's own OS when the file is opened. The rest of the live root is
+  // state for this screen (next-themes' `style="color-scheme: …"`, the sidebar's collapse
+  // flag) or was put there by a browser extension. An emptied class attribute is dropped.
   const attrs = Array.from(document.documentElement.attributes)
+    .filter((attr) => KEPT_ROOT_ATTRIBUTES.has(attr.name))
     .map((attr) => {
       if (attr.name !== 'class') return { name: attr.name, value: attr.value };
       const kept = attr.value