seemore 1.1.2 → 1.1.3

package/package.json

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

package/src/app/entry.client.tsx

@@ -4,12 +4,9 @@ import { RouterProvider, createBrowserRouter } from 'react-router';
 import { config } from 'virtual:seemore/config';
 import { decodePath, stripBase, toBasename } from '../shared/base.js';
 import { createRouteObjects } from './router.js';
-import { installCopyBridge } from './lib/copyBridge.js';
 import { preloadPage } from './lib/pages.js';
 import './styles/globals.css';
 
-installCopyBridge();
-
 const container = document.getElementById('root');
 if (container === null) throw new Error('seemore: #root is missing from the page shell.');
 

package/src/app/layout/DocsLayout.tsx

@@ -19,6 +19,7 @@ import { Header } from './Header.js';
 import { Sidebar } from './Sidebar.js';
 import { Breadcrumb } from './Breadcrumb.js';
 import { BackToTop, PageFooter, SiteFooter } from './Footer.js';
+import { SelectionCopyButton } from './SelectionCopyButton.js';
 import { IntegratedToc, Toc, TocProvider } from './Toc.js';
 
 /**
@@ -82,6 +83,7 @@ export function DocPage({ entry }: { entry: RouteEntry }) {
 
         {feature('navigation.top') ? <BackToTop /> : undefined}
         <PagePreview />
+        <SelectionCopyButton />
       </div>
     </TocProvider>
   );

package/src/app/layout/SelectionCopyButton.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A floating "Copy" button that appears over the current text selection.
+ *
+ * Only matters embedded in the VS Code extension's webview: the page runs there inside a
+ * nested, cross-origin iframe, and the workbench's own Ctrl+C/Cmd+C handling never reaches a
+ * selection made inside it. A click does — but the write itself still can't happen here:
+ * VS Code webviews deny the Clipboard API to embedded content regardless of how it's
+ * triggered, so the click instead posts the selected text up to the extension host (see
+ * `panelHtml.ts`/`panel.ts`), which is the only side actually allowed to touch the OS
+ * clipboard (`vscode.env.clipboard`). A plain browser tab already has native copy and is
+ * never embedded this way, so this renders nothing there.
+ */
+export function SelectionCopyButton() {
+  const [rect, setRect] = useState<DOMRect>();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (window.parent === window) return;
+
+    function onSelectionChange() {
+      const selection = window.getSelection();
+      if (selection === null || selection.isCollapsed || selection.toString().trim() === '') {
+        setRect(undefined);
+        return;
+      }
+      setRect(selection.getRangeAt(0).getBoundingClientRect());
+      setCopied(false);
+    }
+
+    document.addEventListener('selectionchange', onSelectionChange);
+    return () => document.removeEventListener('selectionchange', onSelectionChange);
+  }, []);
+
+  if (rect === undefined) return undefined;
+
+  return (
+    <button
+      type="button"
+      className="seemore-selection-copy"
+      style={{ top: Math.max(rect.top - 36, 8), left: rect.left }}
+      // A button's default mousedown behaviour collapses whatever is currently selected
+      // before the click ever fires — this is what keeps the selection alive through it.
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() => {
+        const text = window.getSelection()?.toString() ?? '';
+        if (text === '') return;
+        window.parent.postMessage({ type: 'seemore:copy', text }, '*');
+        setCopied(true);
+      }}
+    >
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  );
+}

package/src/app/styles/globals.css

@@ -244,6 +244,10 @@
     @apply fixed bottom-6 end-6 inline-flex items-center gap-2 rounded-full border border-fd-border bg-fd-background px-4 py-2 text-sm shadow;
   }
 
+  .seemore-selection-copy {
+    @apply fixed z-50 rounded-md border border-fd-border bg-fd-popover px-2 py-1 text-xs font-medium shadow-lg;
+  }
+
   .seemore-preview {
     @apply pointer-events-none fixed z-50 max-h-80 w-[400px] overflow-hidden rounded-xl border border-fd-border bg-fd-popover p-4 text-sm shadow-lg;
   }

package/src/app/lib/copyBridge.ts

@@ -1,28 +0,0 @@
-/**
- * Answers a clipboard-copy request from an embedding parent frame (the seemore VS Code
- * extension's webview shell — see `panelHtml.ts`/`panel.ts` in that package).
- *
- * Embedded there, this page runs inside a nested, cross-origin iframe, and the host's own
- * Ctrl+C/Cmd+C keybinding never reaches this document's native selection-copy at all — the
- * extension asks for the current selection over `postMessage` instead and writes it to the
- * clipboard itself. Outside that embedding, nothing ever posts this message, so the listener
- * is otherwise inert.
- */
-interface CopyRequest {
-  type: 'seemore:copy-request';
-  requestId: string;
-}
-
-function isCopyRequest(value: unknown): value is CopyRequest {
-  if (typeof value !== 'object' || value === null) return false;
-  const candidate = value as Record<string, unknown>;
-  return candidate.type === 'seemore:copy-request' && typeof candidate.requestId === 'string';
-}
-
-export function installCopyBridge(): void {
-  window.addEventListener('message', (event) => {
-    if (event.source !== window.parent || !isCopyRequest(event.data)) return;
-    const text = window.getSelection()?.toString() ?? '';
-    window.parent.postMessage({ type: 'seemore:copy-response', requestId: event.data.requestId, text }, '*');
-  });
-}