@webmcp-auto-ui/ui 2.5.29 → 2.5.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.29",
+  "version": "2.5.31",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/widgets/notebook/notebook.ts

@@ -11,7 +11,7 @@ import {
   addImportedCells, registerExecutor, collectDataServers,
   autosize, openShareModal, registerHistoryObserver,
   renderCellLogs,
-  createPublishControls, autoConnectFrontmatterServers,
+  createPublishControls, autoConnectFrontmatterServers, bootstrapMcpBridge,
   createRuntimeOverlay, effectiveResult, cellRuntimeStatus,
   lastRefreshedAt, bootstrapLiveRefresh, fmtRelTime, preserveScrollAround,
   type NotebookState, type NotebookCell, type CellResult, type CellExecContext,
@@ -289,6 +289,10 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   // Auto-connect data servers declared in the recipe frontmatter (data.servers)
   autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
 
+  // Start a persistent MCP bridge so the sql executor can find tools in edit mode
+  // too (not just when live-refresh is running in view mode).
+  const mcpBridgeCleanup = bootstrapMcpBridge({ data, MultiMcpBridgeCtor: MultiMcpBridge as any });
+
   // Keep pane servers in sync with canvas changes
   let canvasUnsub: (() => void) | null = null;
   try {
@@ -315,6 +319,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     pane.destroy();
     publishCleanup();
     liveCleanup?.();
+    mcpBridgeCleanup();
   };
 }
 

package/src/widgets/notebook/prose.ts

@@ -207,12 +207,15 @@ function walk(node: Node): void {
 // via turndown on input (debounced) and at blur.
 // ---------------------------------------------------------------------------
 
-// @ts-ignore — turndown ships its own types but we stay ts-nocheck here
-import TurndownService from 'turndown';
-
+// turndown is loaded lazily (browser-only). Top-level import breaks SSR because
+// turndown's CJS internals use require() which throws in ESM scope.
 let _td: any = null;
-function td(): any {
+async function ensureTd(): Promise<any> {
   if (_td) return _td;
+  if (typeof window === 'undefined') return null;
+  // @ts-ignore — turndown ships its own types but we stay ts-nocheck here
+  const mod = await import('turndown');
+  const TurndownService = mod.default || mod;
   _td = new TurndownService({
     headingStyle: 'atx',
     hr: '---',
@@ -230,8 +233,11 @@ function td(): any {
   return _td;
 }
 
-function htmlToMd(html: string): string {
-  try { return td().turndown(html || ''); } catch { return ''; }
+async function htmlToMd(html: string): Promise<string> {
+  try {
+    const t = await ensureTd();
+    return t ? t.turndown(html || '') : '';
+  } catch { return ''; }
 }
 
 function ensureToolbarStyles(): void {
@@ -442,9 +448,9 @@ export function mountEditableProse(opts: {
       flushToMd();
     }, 400);
   };
-  const flushToMd = () => {
+  const flushToMd = async () => {
     const html = host.innerHTML;
-    const md = htmlToMd(html);
+    const md = await htmlToMd(html);
     opts.setContent(md);
     opts.onChange?.();
     updateEmptyState(host);
@@ -491,10 +497,11 @@ export function mountEditableProse(opts: {
     if (html) {
       e.preventDefault();
       // Strip inline styles by routing via turndown → re-render via our MD pipeline
-      const md = htmlToMd(html);
-      const cleanHtml = renderProse(md);
-      document.execCommand('insertHTML', false, cleanHtml);
-      scheduleSync();
+      htmlToMd(html).then((md) => {
+        const cleanHtml = renderProse(md);
+        document.execCommand('insertHTML', false, cleanHtml);
+        scheduleSync();
+      });
     } else if (text) {
       // Plain text paste — default behaviour fine, but still trigger sync
       scheduleSync();

package/src/widgets/notebook/shared.ts

@@ -128,8 +128,19 @@ export function preserveScrollAround(anchor: HTMLElement): () => void {
   }
   const winY = window.scrollY;
   const saved = scrollParents.map((el) => el.scrollTop);
+  // Only capture the active cell if the user was actually editing
+  // (textarea or contentEditable). Clicking a button or label should
+  // NOT trigger a post-rerender refocus, which would scroll the page
+  // to that cell's input.
   const activeEl = document.activeElement as HTMLElement | null;
-  const activeCellId = activeEl?.closest<HTMLElement>('[data-cell-id]')?.dataset.cellId ?? null;
+  const isEditing = !!activeEl && (
+    activeEl.tagName === 'TEXTAREA' ||
+    activeEl.tagName === 'INPUT' ||
+    activeEl.isContentEditable
+  );
+  const activeCellId = isEditing
+    ? activeEl?.closest<HTMLElement>('[data-cell-id]')?.dataset.cellId ?? null
+    : null;
 
   return () => {
     requestAnimationFrame(() => {
@@ -844,6 +855,35 @@ export function createPublishControls(state: NotebookState, opts: PublishControl
   };
 }
 
+/**
+ * Start a persistent MCP bridge that connects declared data servers and keeps
+ * their tool/recipe metadata populated on the canvas store. Independent of
+ * live-refresh — this runs even in edit mode, so the sql executor can discover
+ * `*_query_sql` tools as soon as the bridge is connected.
+ *
+ * Returns a cleanup function. Caller is expected to start this once at mount
+ * and call cleanup on unmount.
+ */
+export function bootstrapMcpBridge(opts: {
+  data: Record<string, unknown>;
+  MultiMcpBridgeCtor: new (opts: { getCanvas: () => unknown }) => {
+    start(): void;
+    stop(): void;
+  };
+}): () => void {
+  try {
+    autoConnectFrontmatterServers(opts.data);
+    const canvas: unknown = (globalThis as { __canvasVanilla?: unknown; canvasVanilla?: unknown })
+      .__canvasVanilla ?? (globalThis as { canvasVanilla?: unknown }).canvasVanilla;
+    if (!canvas) return () => { /* no-op */ };
+    const bridge = new opts.MultiMcpBridgeCtor({ getCanvas: () => canvas });
+    bridge.start();
+    return () => { try { bridge.stop(); } catch { /* ignore */ } };
+  } catch {
+    return () => { /* no-op */ };
+  }
+}
+
 /**
  * Auto-connect any data servers declared in recipe frontmatter (`data.servers`)
  * to the shared canvas store. No-op / no-throw if the canvas store is absent.