seemore 1.9.1 → 1.10.0

package/dist/index.d.ts

@@ -16,7 +16,7 @@ type ResolvedFeatures = Record<Feature, boolean>;
  * The actions a page-actions button can hold, by id. Presence in the `actions` array is
  * what enables an action; the array order is the menu order.
  */
-declare const ACTION_IDS: readonly ["export-html", "export-pdf"];
+declare const ACTION_IDS: readonly ["copy-markdown", "export-html"];
 type ActionId = (typeof ACTION_IDS)[number];
 
 /** The CSS presets fumadocs-ui ships. We do not invent a token system. */
@@ -102,8 +102,8 @@ declare const configSchema: z.ZodObject<{
         indexName: z.ZodString;
     }, z.core.$strip>]>>;
     pageActions: z.ZodDefault<z.ZodArray<z.ZodEnum<{
+        "copy-markdown": "copy-markdown";
         "export-html": "export-html";
-        "export-pdf": "export-pdf";
     }>>>;
     exclude: z.ZodDefault<z.ZodArray<z.ZodString>>;
 }, z.core.$strip>;

package/package.json

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

package/src/app/export/copyMarkdown.ts

@@ -0,0 +1,58 @@
+import { preloadPage } from '../lib/pages.js';
+
+/**
+ * Copy the page you are reading as Markdown.
+ *
+ * The Markdown is not reconstructed from the DOM, and no second copy of the content is
+ * fetched: `remark-llms` stringifies the page during the MDX compile and writes the result
+ * to a named export (see `MARKDOWN_EXPORT` in `node/vite/mdx.ts`), which rides along in the
+ * same module the router already imports to render the page. By the time this runs that
+ * module is on screen, so `preloadPage` is a cache hit and the copy is synchronous in
+ * practice.
+ *
+ * The trade is payload: every page ships its own source alongside its compiled form. That
+ * buys a copy that matches what the author wrote — `.mdx` components included, as JSX —
+ * rather than a lossy walk over rendered HTML.
+ */
+export async function copyPageAsMarkdown(url: string): Promise<void> {
+  const page = await preloadPage(url);
+  const markdown = page?._markdown;
+  if (markdown === undefined || markdown.trim() === '') {
+    throw new Error('There is no Markdown source for this page.');
+  }
+
+  // Emptying the frontmatter node leaves the blank lines that followed it.
+  await writeToClipboard(`${markdown.trim()}\n`);
+}
+
+/**
+ * `navigator.clipboard` needs a secure context, which `file://` pages and some editor
+ * webviews are not. The deprecated `execCommand` path is the only thing that works there,
+ * and it needs a real selection over a live element, so the textarea has to be in the
+ * document and visible enough to focus.
+ */
+async function writeToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard !== undefined && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+      // Permission refused or the document was not focused; fall through.
+    }
+  }
+
+  const area = document.createElement('textarea');
+  area.value = text;
+  area.setAttribute('readonly', '');
+  area.style.position = 'fixed';
+  area.style.top = '0';
+  area.style.opacity = '0';
+  document.body.append(area);
+  area.select();
+
+  try {
+    if (!document.execCommand('copy')) throw new Error('The browser refused the copy.');
+  } finally {
+    area.remove();
+  }
+}

package/src/app/export/exportPage.ts

@@ -1,5 +1,5 @@
 import { config } from 'virtual:seemore/config';
-import { THEME_TOGGLE } from './themeToggle.js';
+import { THEME_INIT, THEME_TOGGLE } from './themeToggle.js';
 
 /**
  * The single-page export: the article you are reading, in one HTML file that renders
@@ -11,10 +11,6 @@ import { THEME_TOGGLE } from './themeToggle.js';
  * after hydration (diagrams must already be rendered or renderable), it needs the network
  * only for assets that are themselves remote, and it serialises the DOM as it is — site
  * chrome never enters the file because only the article is taken.
- *
- * The same preparation drives the PDF path: print is the browser's own renderer, so the
- * feature contributes a print stylesheet (see `globals.css`) and a light theme, not a PDF
- * library.
  */
 
 /** Mermaid and D2 render on scroll-into-view; the export needs every diagram as SVG. */
@@ -250,7 +246,10 @@ function escapeHtml(text: string): string {
 const RUNTIME = `(function () {
   var root = document.documentElement;
   var toggle = document.querySelector('.seemore-export-theme-toggle');
-  if (toggle) toggle.addEventListener('click', function () { root.classList.toggle('dark'); });
+  if (toggle) toggle.addEventListener('click', function () {
+    root.classList.toggle('dark');
+    if (window.__seemoreRememberTheme) window.__seemoreRememberTheme();
+  });
 
   document.querySelectorAll('figure').forEach(function (figure) {
     var button = figure.querySelector('button[aria-label]');
@@ -308,7 +307,18 @@ const RUNTIME = `(function () {
 })();`;
 
 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.
   const attrs = Array.from(document.documentElement.attributes)
+    .map((attr) => {
+      if (attr.name !== 'class') return { name: attr.name, value: attr.value };
+      const kept = attr.value
+        .split(/\s+/)
+        .filter((name) => name !== '' && name !== 'dark' && name !== 'light');
+      return { name: attr.name, value: kept.join(' ') };
+    })
+    .filter((attr) => attr.name !== 'class' || attr.value !== '')
     .map((attr) => ` ${attr.name}="${escapeHtml(attr.value)}"`)
     .join('');
 
@@ -323,6 +333,7 @@ function buildExportHtml(article: Element, css: string, remoteLinks: string, fav
     `<title>${escapeHtml(document.title)}</title>`,
     description,
     '<meta name="generator" content="seemore">',
+    THEME_INIT,
     favicons,
     remoteLinks,
     // The guard is belt-and-braces: a stylesheet containing `</style>` would already be
@@ -386,31 +397,3 @@ export async function exportPageAsHtml(): Promise<void> {
   const favicons = await collectFavicons();
   download(exportFilename(), buildExportHtml(clone, await inlineCssUrls(css), remoteLinks, favicons));
 }
-
-/**
- * Print the page you are reading — the browser's Save-as-PDF makes it a PDF.
- *
- * Print is always light, whatever the screen was showing: code blocks and diagrams are
- * themed by CSS variables that flip with `dark`, and ink follows the light values.
- */
-export async function printPageAsPdf(): Promise<void> {
-  await prepareDiagrams();
-
-  const root = document.documentElement;
-  const wasDark = root.classList.contains('dark');
-  if (!wasDark) {
-    window.print();
-    return;
-  }
-
-  root.classList.remove('dark');
-  const restore = () => {
-    root.classList.add('dark');
-    window.removeEventListener('afterprint', restore);
-  };
-  window.addEventListener('afterprint', restore);
-  window.print();
-  // Safari's dialog does not always fire `afterprint` when it is dismissed; a page left
-  // dark-less forever is worse than a late restore.
-  window.setTimeout(restore, 60_000);
-}

package/src/app/export/standalone.ts

@@ -65,6 +65,8 @@ function bindBehaviors(): void {
   const root = document.documentElement;
   document.querySelector('.seemore-export-theme-toggle')?.addEventListener('click', () => {
     root.classList.toggle('dark');
+    // Set by THEME_INIT in the head: pins the file to this choice against the OS.
+    (window as { __seemoreRememberTheme?: () => void }).__seemoreRememberTheme?.();
   });
 
   for (const figure of document.querySelectorAll('figure')) {

package/src/app/export/themeToggle.ts

@@ -10,3 +10,40 @@ export const THEME_TOGGLE = `<button type="button" class="seemore-export-theme-t
 <svg class="seemore-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
 <svg class="seemore-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
 </button>`;
+
+/**
+ * The exported file's theme, decided when the reader opens it rather than when the export
+ * ran.
+ *
+ * The live site resolves `system` through next-themes and leaves a literal `dark`/`light`
+ * class on `<html>`; serialising that would hand every reader the exporter's OS setting
+ * forever. So the export strips the resolved class and ships this instead: the reader's own
+ * `prefers-color-scheme` on load, their toggle choice if they have made one, and a listener
+ * that keeps following the OS until they do.
+ *
+ * Inlined in `<head>` by both export paths so it runs before first paint — a class set from
+ * the body would flash the wrong theme first. `localStorage` throws outright on some
+ * `file://` origins, which is why every access is guarded; an unreadable store just means
+ * the file follows the OS, which is the sane default anyway.
+ */
+export const THEME_INIT = `<script>(function () {
+  var KEY = 'seemore-export-theme';
+  var root = document.documentElement;
+  var saved = null;
+  try { saved = localStorage.getItem(KEY); } catch (e) {}
+  var query = window.matchMedia('(prefers-color-scheme: dark)');
+  var apply = function (dark) { root.classList.toggle('dark', dark); };
+
+  apply(saved === 'dark' || saved === 'light' ? saved === 'dark' : query.matches);
+  query.addEventListener('change', function (event) {
+    var override = null;
+    try { override = localStorage.getItem(KEY); } catch (e) {}
+    if (override !== 'dark' && override !== 'light') apply(event.matches);
+  });
+
+  // The toggle lives in the body, so its click handler is bound by each export's runtime;
+  // this only records the choice, which is what pins the file against the OS from then on.
+  window.__seemoreRememberTheme = function () {
+    try { localStorage.setItem(KEY, root.classList.contains('dark') ? 'dark' : 'light'); } catch (e) {}
+  };
+})();</script>`;

package/src/app/layout/PageActions.tsx

@@ -1,18 +1,33 @@
 import { useEffect, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
-import { ChevronDown, Download, Printer } from 'lucide-react';
+import { Check, ChevronDown, Copy, Download } from 'lucide-react';
 import { config } from 'virtual:seemore/config';
 import type { ActionId } from '../../shared/types.js';
-import { exportPageAsHtml, printPageAsPdf } from '../export/exportPage.js';
+import { copyPageAsMarkdown } from '../export/copyMarkdown.js';
+import { exportPageAsHtml } from '../export/exportPage.js';
+import { useRouteUrl } from '../router.js';
+
+interface Action {
+  label: string;
+  icon: ReactNode;
+  run: (url: string) => Promise<void>;
+  /** Shown in place of the label for a moment afterwards, for an action with no visible result. */
+  done?: string;
+}
 
 /**
  * The actions the button can hold, keyed by the id a config's `pageActions` array names.
  * A new action is a new id in `ACTION_IDS`, one entry here, and the menu picks it up —
  * no component changes.
  */
-const ACTIONS: Record<ActionId, { label: string; icon: ReactNode; run: () => Promise<void> }> = {
+const ACTIONS: Record<ActionId, Action> = {
+  'copy-markdown': {
+    label: 'Copy as Markdown',
+    icon: <Copy aria-hidden="true" />,
+    run: copyPageAsMarkdown,
+    done: 'Copied',
+  },
   'export-html': { label: 'Export as HTML', icon: <Download aria-hidden="true" />, run: exportPageAsHtml },
-  'export-pdf': { label: 'Export as PDF', icon: <Printer aria-hidden="true" />, run: printPageAsPdf },
 };
 
 /**
@@ -22,7 +37,20 @@ const ACTIONS: Record<ActionId, { label: string; icon: ReactNode; run: () => Pro
  */
 export function PageActions() {
   const [open, setOpen] = useState(false);
+  const [done, setDone] = useState<ActionId>();
   const root = useRef<HTMLDivElement>(null);
+  const url = useRouteUrl();
+
+  useEffect(() => setDone(undefined), [url]);
+
+  useEffect(() => {
+    if (done === undefined) return;
+    const timer = window.setTimeout(() => {
+      setDone(undefined);
+      setOpen(false);
+    }, 1200);
+    return () => window.clearTimeout(timer);
+  }, [done]);
 
   useEffect(() => {
     if (!open) return;
@@ -65,15 +93,24 @@ export function PageActions() {
               role="menuitem"
               className="seemore-page-actions-item"
               onClick={() => {
-                setOpen(false);
-                void ACTIONS[id].run().catch((cause: unknown) => {
-                  const message = cause instanceof Error ? cause.message : String(cause);
-                  window.alert(`Could not run this action: ${message}`);
-                });
+                const action = ACTIONS[id];
+                // An action that confirms in place keeps the menu open long enough to be
+                // seen; the rest produce a file or a dialog and can close immediately.
+                if (action.done === undefined) setOpen(false);
+                void action
+                  .run(url)
+                  .then(() => {
+                    if (action.done !== undefined) setDone(id);
+                  })
+                  .catch((cause: unknown) => {
+                    setOpen(false);
+                    const message = cause instanceof Error ? cause.message : String(cause);
+                    window.alert(`Could not run this action: ${message}`);
+                  });
               }}
             >
-              {ACTIONS[id].icon}
-              {ACTIONS[id].label}
+              {done === id ? <Check aria-hidden="true" /> : ACTIONS[id].icon}
+              {done === id ? ACTIONS[id].done : ACTIONS[id].label}
             </button>
           ))}
         </div>

package/src/app/styles/globals.css

@@ -487,8 +487,10 @@
     @apply size-4;
   }
 
+  /* `top-full` is load-bearing: without it the menu keeps its static position, which in this
+     flex row is beside the trigger rather than under it, so it opens over its own button. */
   .seemore-page-actions-menu {
-    @apply absolute end-0 z-50 mt-1.5 min-w-44 rounded-lg border border-fd-border bg-fd-background p-1 shadow-lg;
+    @apply absolute end-0 top-full z-50 mt-1.5 min-w-44 rounded-lg border border-fd-border bg-fd-background p-1 shadow-lg;
   }
 
   .seemore-page-actions-item {
@@ -683,8 +685,8 @@
   object-fit: contain;
 }
 
-/* Printing — the PDF path. Every pixel of chrome goes, the article gets the whole page,
-   and nothing reader-consumed is ever split across a page break. */
+/* Printing. Every pixel of chrome goes, the article gets the whole page, and nothing
+   reader-consumed is ever split across a page break. */
 @media print {
   .seemore-header,
   .seemore-sidebar,

package/src/shared/types.ts

@@ -48,7 +48,7 @@ export type ClientSearchConfig =
  * The actions a page-actions button can hold, by id. Presence in the `actions` array is
  * what enables an action; the array order is the menu order.
  */
-export const ACTION_IDS = ['export-html', 'export-pdf'] as const;
+export const ACTION_IDS = ['copy-markdown', 'export-html'] as const;
 
 export type ActionId = (typeof ACTION_IDS)[number];
 
@@ -90,4 +90,6 @@ export interface PageModule {
   default: ComponentType<{ components?: Record<string, unknown> }>;
   /** Exported by fumadocs' `rehype-toc`. */
   toc?: TocEntry[];
+  /** The page as Markdown, written at compile time by `remark-llms`. */
+  _markdown?: string;
 }