@webmcp-auto-ui/ui 2.5.28 → 2.5.30

package/src/widgets/notebook/prose.ts

@@ -201,6 +201,348 @@ function walk(node: Node): void {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Inline WYSIWYG editor — single contenteditable zone, no dual-view.
+// Markdown remains the source of truth: rendered on mount/blur, converted back
+// via turndown on input (debounced) and at blur.
+// ---------------------------------------------------------------------------
+
+// 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;
+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: '---',
+    bulletListMarker: '-',
+    codeBlockStyle: 'fenced',
+    emDelimiter: '*',
+    strongDelimiter: '**',
+    linkStyle: 'inlined',
+  });
+  // Preserve <mark> as ==...== (matches our renderer)
+  _td.addRule('mark', {
+    filter: 'mark',
+    replacement: (content: string) => `==${content}==`,
+  });
+  return _td;
+}
+
+async function htmlToMd(html: string): Promise<string> {
+  try {
+    const t = await ensureTd();
+    return t ? t.turndown(html || '') : '';
+  } catch { return ''; }
+}
+
+function ensureToolbarStyles(): void {
+  if (document.getElementById('nbe-wysiwyg-styles')) return;
+  const style = document.createElement('style');
+  style.id = 'nbe-wysiwyg-styles';
+  style.textContent = `
+.nbe-prose-wysiwyg {
+  display: block;
+  min-height: 1.6em;
+  max-width: 620px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+  border: 1px dashed transparent;
+  border-radius: 4px;
+  outline: none;
+  cursor: text;
+}
+.nbe-prose-wysiwyg:hover { border-color: var(--color-border); }
+.nbe-prose-wysiwyg:focus,
+.nbe-prose-wysiwyg.nbe-focus {
+  border-color: var(--color-border2);
+  border-style: solid;
+  background: var(--color-bg);
+}
+.nbe-prose-wysiwyg[data-empty="true"]::before {
+  content: attr(data-placeholder);
+  color: var(--color-text2);
+  font-style: italic;
+  pointer-events: none;
+}
+.nbe-wysiwyg-toolbar {
+  position: fixed;
+  z-index: 1010;
+  display: inline-flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--color-surface2);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
+  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+  font-size: 11px;
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.nbe-wysiwyg-toolbar.nbe-visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.nbe-wysiwyg-toolbar button {
+  background: transparent;
+  color: var(--color-text1);
+  border: none;
+  border-radius: 3px;
+  padding: 4px 7px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  min-width: 22px;
+}
+.nbe-wysiwyg-toolbar button:hover { background: var(--color-surface); }
+.nbe-wysiwyg-toolbar button.nbe-wy-strong { font-weight: 700; }
+.nbe-wysiwyg-toolbar button.nbe-wy-em { font-style: italic; }
+`;
+  document.head.appendChild(style);
+}
+
+let _toolbarEl: HTMLElement | null = null;
+let _activeEditor: HTMLElement | null = null;
+let _toolbarCallback: ((cmd: string) => void) | null = null;
+
+function ensureToolbar(): HTMLElement {
+  if (_toolbarEl) return _toolbarEl;
+  const bar = document.createElement('div');
+  bar.className = 'nbe-wysiwyg-toolbar';
+  bar.setAttribute('role', 'toolbar');
+  const btns: Array<[string, string, string]> = [
+    ['bold', 'B', 'nbe-wy-strong'],
+    ['italic', 'I', 'nbe-wy-em'],
+    ['h2', 'H2', ''],
+    ['h3', 'H3', ''],
+    ['ul', '• list', ''],
+    ['link', 'link', ''],
+    ['code', '<>', ''],
+  ];
+  for (const [cmd, label, cls] of btns) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.textContent = label;
+    b.dataset.cmd = cmd;
+    if (cls) b.classList.add(cls);
+    // mousedown before focus is lost
+    b.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      _toolbarCallback?.(cmd);
+    });
+    bar.appendChild(b);
+  }
+  document.body.appendChild(bar);
+  _toolbarEl = bar;
+  return bar;
+}
+
+function positionToolbar(): void {
+  if (!_toolbarEl || !_activeEditor) return;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
+    _toolbarEl.classList.remove('nbe-visible');
+    return;
+  }
+  // Only show if selection is within active editor
+  const range = sel.getRangeAt(0);
+  if (!_activeEditor.contains(range.commonAncestorContainer)) {
+    _toolbarEl.classList.remove('nbe-visible');
+    return;
+  }
+  const rect = range.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    _toolbarEl.classList.remove('nbe-visible');
+    return;
+  }
+  const bar = _toolbarEl;
+  bar.classList.add('nbe-visible');
+  const barRect = bar.getBoundingClientRect();
+  let top = rect.bottom + 6;
+  if (top + barRect.height > window.innerHeight) top = rect.top - barRect.height - 6;
+  let left = rect.left + rect.width / 2 - barRect.width / 2;
+  left = Math.max(6, Math.min(window.innerWidth - barRect.width - 6, left));
+  bar.style.top = `${top}px`;
+  bar.style.left = `${left}px`;
+}
+
+function hideToolbar(): void {
+  _toolbarEl?.classList.remove('nbe-visible');
+}
+
+function execCmd(cmd: string, editor: HTMLElement): void {
+  editor.focus();
+  switch (cmd) {
+    case 'bold': document.execCommand('bold'); break;
+    case 'italic': document.execCommand('italic'); break;
+    case 'h2': document.execCommand('formatBlock', false, 'H2'); break;
+    case 'h3': document.execCommand('formatBlock', false, 'H3'); break;
+    case 'ul': document.execCommand('insertUnorderedList'); break;
+    case 'code': {
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const range = sel.getRangeAt(0);
+      if (range.collapsed) return;
+      const text = range.toString();
+      const codeEl = document.createElement('code');
+      codeEl.textContent = text;
+      range.deleteContents();
+      range.insertNode(codeEl);
+      sel.removeAllRanges();
+      const r2 = document.createRange();
+      r2.setStartAfter(codeEl);
+      r2.collapse(true);
+      sel.addRange(r2);
+      break;
+    }
+    case 'link': {
+      const url = window.prompt('Link URL:');
+      if (!url) return;
+      document.execCommand('createLink', false, url);
+      break;
+    }
+  }
+  // Fire an input event to trigger debounced MD conversion
+  editor.dispatchEvent(new InputEvent('input', { bubbles: true }));
+  requestAnimationFrame(() => positionToolbar());
+}
+
+/**
+ * Mount a WYSIWYG editor in place of the traditional textarea+preview split.
+ * - Single contenteditable zone rendering live markdown.
+ * - Floating toolbar (B/I/H2/H3/ul/link/code) shown on text selection.
+ * - Paste handler converts HTML → markdown (strips inline styles from Notion/GDocs).
+ * - On input (debounced) + on blur, HTML is converted to markdown into `get`/`set`.
+ *
+ * Returns the host element and a cleanup function.
+ */
+export function mountEditableProse(opts: {
+  getContent: () => string;
+  setContent: (md: string) => void;
+  onChange?: () => void;
+  placeholder?: string;
+}): { el: HTMLElement; destroy: () => void } {
+  ensureToolbarStyles();
+  ensureToolbar();
+
+  const host = document.createElement('div');
+  host.className = 'nbe-prose nbe-prose-render nbe-prose-wysiwyg';
+  host.contentEditable = 'true';
+  host.spellcheck = true;
+  host.dataset.placeholder = opts.placeholder ?? 'write prose (markdown, WYSIWYG)…';
+  host.innerHTML = renderProse(opts.getContent() || '');
+  updateEmptyState(host);
+
+  let debounceId: any = null;
+  const scheduleSync = () => {
+    if (debounceId) clearTimeout(debounceId);
+    debounceId = setTimeout(() => {
+      flushToMd();
+    }, 400);
+  };
+  const flushToMd = async () => {
+    const html = host.innerHTML;
+    const md = await htmlToMd(html);
+    opts.setContent(md);
+    opts.onChange?.();
+    updateEmptyState(host);
+  };
+
+  const onInput = () => {
+    updateEmptyState(host);
+    scheduleSync();
+    positionToolbar();
+  };
+  const onFocus = () => {
+    host.classList.add('nbe-focus');
+    _activeEditor = host;
+    _toolbarCallback = (cmd: string) => execCmd(cmd, host);
+  };
+  const onBlur = () => {
+    host.classList.remove('nbe-focus');
+    // If focus moves to the toolbar we skip — use a deferred check
+    setTimeout(() => {
+      if (document.activeElement === host) return;
+      if (_toolbarEl && _toolbarEl.contains(document.activeElement)) return;
+      if (_activeEditor === host) {
+        _activeEditor = null;
+        _toolbarCallback = null;
+        hideToolbar();
+      }
+      flushToMd();
+    }, 10);
+  };
+  const onSelectionChange = () => {
+    if (_activeEditor === host) positionToolbar();
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    const meta = e.metaKey || e.ctrlKey;
+    if (meta && e.key.toLowerCase() === 'b') { e.preventDefault(); execCmd('bold', host); }
+    else if (meta && e.key.toLowerCase() === 'i') { e.preventDefault(); execCmd('italic', host); }
+    else if (meta && e.key.toLowerCase() === 'k') { e.preventDefault(); execCmd('link', host); }
+  };
+  const onPaste = (e: ClipboardEvent) => {
+    const cd = e.clipboardData;
+    if (!cd) return;
+    const html = cd.getData('text/html');
+    const text = cd.getData('text/plain');
+    if (html) {
+      e.preventDefault();
+      // Strip inline styles by routing via turndown → re-render via our MD pipeline
+      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();
+    }
+  };
+
+  host.addEventListener('input', onInput);
+  host.addEventListener('focus', onFocus);
+  host.addEventListener('blur', onBlur);
+  host.addEventListener('keydown', onKeyDown);
+  host.addEventListener('paste', onPaste);
+  document.addEventListener('selectionchange', onSelectionChange);
+
+  return {
+    el: host,
+    destroy: () => {
+      if (debounceId) clearTimeout(debounceId);
+      host.removeEventListener('input', onInput);
+      host.removeEventListener('focus', onFocus);
+      host.removeEventListener('blur', onBlur);
+      host.removeEventListener('keydown', onKeyDown);
+      host.removeEventListener('paste', onPaste);
+      document.removeEventListener('selectionchange', onSelectionChange);
+      if (_activeEditor === host) {
+        _activeEditor = null;
+        _toolbarCallback = null;
+        hideToolbar();
+      }
+    },
+  };
+}
+
+function updateEmptyState(host: HTMLElement): void {
+  const txt = (host.textContent || '').trim();
+  if (!txt && host.children.length <= 1) {
+    host.dataset.empty = 'true';
+  } else {
+    host.dataset.empty = 'false';
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Renderer with inject buttons — used by recipe viewer modal.
 // Each fenced code block gets an "↳ inject" button next to it.

package/src/widgets/notebook/recipes/{editorial.md → notebook.md}

@@ -1,5 +1,5 @@
 ---
-widget: notebook-editorial
+widget: notebook
 description: Publication-ready notebook with serif prose and inline cells, all drag-and-droppable in a single ordered flow. Inspired by Observable — cells can be prose paragraphs, sql queries, or js charts, mixed freely in any order to build an article-like narrative.
 schema:
   type: object
@@ -14,6 +14,10 @@ schema:
     kicker:
       type: string
       description: Small uppercase label above the title (e.g. "analysis", "memo", "brief"). Editable inline. Defaults to "untitled".
+    hideLiveToggle:
+      type: boolean
+      default: false
+      description: When true, hides the "Live data" toggle in the header (useful for embedded/host-controlled contexts where the autoRun flag is managed externally).
     cells:
       type: array
       description: Mixed flow of prose and code cells. All share the same ordering and can be reordered together.
@@ -35,7 +39,7 @@ schema:
 
 ## When to use
 
-Use `notebook-editorial` when the notebook is meant to be published or shared as a finished artifact:
+Use `notebook` when the notebook is meant to be published or shared as a finished artifact:
 - Research memos with code appendices visible on demand
 - Blog-style writeups mixing narrative and runnable code
 - Final deliverables where prose leads and code supports
@@ -46,7 +50,7 @@ The distinguishing feature: prose paragraphs and code cells share a single order
 
 1. **Start with prose-first seed content** and intersperse code cells:
    ```
-   widget_display({name: "notebook-editorial", params: {
+   widget_display({name: "notebook", params: {
      title: "Q3 observations",
      kicker: "memo",
      cells: [
@@ -74,7 +78,7 @@ The distinguishing feature: prose paragraphs and code cells share a single order
 - Prose cells are rendered via an HTML-sanitizing markdown pipeline: markdown syntax is resolved, unsafe tags are stripped (XSS closed), `<mark>` and other editorial tags are preserved.
 - The footer exposes a single `share` button.
 - Run / Stop controls are at the left of each code cell's header, same as the other notebook layouts.
-- Unlike the other widgets, `notebook-editorial` does not separate prose and code into different flows — they are the same flow in one list.
+- Unlike the other widgets, `notebook` does not separate prose and code into different flows — they are the same flow in one list.
 
 ## Left pane — resources from connected servers
 
@@ -105,7 +109,7 @@ An editorial piece earns its weight when the prose is anchored to real material.
 
    ```ts
    widget_display({
-     name: 'notebook-editorial',
+     name: 'notebook',
      params: {
        title: '...',
        kicker: 'memo',

package/src/widgets/notebook/shared.ts

@@ -104,6 +104,46 @@ export function autosize(ta: HTMLTextAreaElement): void {
   ta.style.height = ta.scrollHeight + 'px';
 }
 
+/**
+ * Scroll-preservation helper for rerender paths that wipe-and-rebuild a cells
+ * container. Call BEFORE the rebuild; invoke the returned fn AFTER.
+ *
+ * Walks up from `anchor` collecting scrollable ancestors, snapshots their
+ * scrollTop + window.scrollY + active-cell id, and restores them on the next
+ * animation frame. Without this, clicking a cell's run button scrolls the
+ * page back to the top because the cells container briefly collapses.
+ */
+export function preserveScrollAround(anchor: HTMLElement): () => void {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return () => { /* no-op in SSR */ };
+  }
+  const scrollParents: HTMLElement[] = [];
+  let node: HTMLElement | null = anchor;
+  while (node) {
+    const oy = getComputedStyle(node).overflowY;
+    if ((oy === 'auto' || oy === 'scroll') && node.scrollHeight > node.clientHeight) {
+      scrollParents.push(node);
+    }
+    node = node.parentElement;
+  }
+  const winY = window.scrollY;
+  const saved = scrollParents.map((el) => el.scrollTop);
+  const activeEl = document.activeElement as HTMLElement | null;
+  const activeCellId = activeEl?.closest<HTMLElement>('[data-cell-id]')?.dataset.cellId ?? null;
+
+  return () => {
+    requestAnimationFrame(() => {
+      scrollParents.forEach((el, i) => { el.scrollTop = saved[i]!; });
+      try { window.scrollTo({ top: winY, behavior: 'instant' as ScrollBehavior }); }
+      catch { window.scrollTo(0, winY); }
+      if (activeCellId) {
+        const host = anchor.querySelector<HTMLElement>(`[data-cell-id="${activeCellId}"] textarea`);
+        host?.focus?.();
+      }
+    });
+  };
+}
+
 export function defaultCellContent(type: CellType): string {
   if (type === 'md') return '### new section\n\nwrite here…';
   if (type === 'sql') return 'select *\nfrom source\nlimit 10';
@@ -1062,10 +1102,11 @@ const NOTEBOOK_STYLES = `
 
 .nb-root.nb-view-mode .nb-drag-handle,
 .nb-root.nb-view-mode .nb-icon-btn.nb-danger,
-.nb-root.nb-view-mode .nb-ctl-pill,
 .nb-root.nb-view-mode .nb-toggle-src,
 .nb-root.nb-view-mode .nb-toggle-res,
 .nb-root.nb-view-mode .nb-add-cell { display: none !important; }
+/* Run controls (.nb-ctl-pill) remain active in view mode — users can execute cells
+ * even when the notebook is read-only; only editing the source is locked. */
 .nb-root.nb-view-mode textarea,
 .nb-root.nb-view-mode [contenteditable] { pointer-events: none; }
 .nb-root.nb-view-mode input.nb-title-edit,

package/src/widgets/rich/js-sandbox.ts

@@ -21,13 +21,18 @@ function buildSrcdoc(spec: JsSandboxSpec): string {
   const css = spec.css ?? '';
   const html = spec.html ?? '';
   const code = spec.code ?? '';
+  // Neutral base: just reset box-sizing and remove body margin. NO default
+  // colours — sandboxed iframes can't inherit the host's CSS custom properties,
+  // so forcing a dark palette here would clash with user-provided `css` that
+  // assumes the browser default (white bg, black text).
   return `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 *,*::before,*::after{box-sizing:border-box}
-body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:13px;background:var(--bg,#1a1a2e);color:var(--fg,#e2e2e8)}
+html,body{margin:0;padding:0}
+body{padding:8px;font-family:system-ui,sans-serif;font-size:13px}
 ${css}
 </style>
 </head>
@@ -38,7 +43,7 @@ ${css}
 try{
 ${code}
 }catch(e){
-document.getElementById('root').innerHTML='<pre style="color:red;white-space:pre-wrap">'+e+'</pre>';
+document.getElementById('root').innerHTML='<pre style="color:red;white-space:pre-wrap;padding:8px;margin:0">'+e+'</pre>';
 }
 })();
 <\/script>
@@ -46,8 +51,15 @@ document.getElementById('root').innerHTML='<pre style="color:red;white-space:pre
 </html>`;
 }
 
-export function render(container: HTMLElement, data: JsSandboxData): () => void {
-  const spec: JsSandboxSpec = (data && data.spec) || ({ code: '' } as JsSandboxSpec);
+export function render(container: HTMLElement, data: JsSandboxData | JsSandboxSpec | undefined): () => void {
+  // Tolerate three shapes from callers:
+  //   { spec: { code, html, css, ... } }   — explicit spec wrapper
+  //   { code, html, css, ... }             — bare spec (widget_display params)
+  //   undefined / {}                       — empty placeholder
+  const raw = data ?? {};
+  const spec: JsSandboxSpec = ('spec' in raw && raw.spec)
+    ? (raw as JsSandboxData).spec
+    : (raw as JsSandboxSpec);
 
   // Outer wrapper mirrors the Svelte markup classes.
   const wrapper = document.createElement('div');
@@ -82,7 +94,11 @@ export function render(container: HTMLElement, data: JsSandboxData): () => void
   if (spec && (spec.code || spec.html || spec.css)) {
     iframe.srcdoc = buildSrcdoc(spec);
   } else {
-    iframe.srcdoc = buildSrcdoc({ code: '', html: '', css: '' });
+    iframe.srcdoc = buildSrcdoc({
+      code: '',
+      html: '<div style="opacity:.7;font-family:system-ui;font-size:13px;padding:12px">⚠ js-sandbox: no code/html/css provided.</div>',
+      css: 'body{background:#f5f5f7;color:#333}',
+    });
   }
 
   wrapper.appendChild(iframe);

package/src/widgets/rich/sankey.ts

@@ -7,7 +7,7 @@
  * Emits on `container`:
  *   - CustomEvent 'widget:interact' { detail: { action: 'nodeclick', payload: node }, bubbles: true }
  *   - CustomEvent 'widget:interact' { detail: { action: 'linkclick', payload: link }, bubbles: true }
- *   - CustomEvent 'widget:node-dblclick' { detail: { nodeId, nodeData }, bubbles: true }
+ *   - CustomEvent 'widget:interact' { detail: { action: 'node-dblclick', payload: node }, bubbles: true }
  *
  * Not a real d3-sankey layout — horizontal "bar" visualization sorted by value,
  * matching the historical Svelte widget (Sankey.svelte).
@@ -37,7 +37,7 @@ type Cleanup = () => void;
 
 function emitInteract(
   container: HTMLElement,
-  action: 'nodeclick' | 'linkclick',
+  action: 'nodeclick' | 'linkclick' | 'node-dblclick',
   payload: unknown,
 ): void {
   container.dispatchEvent(
@@ -49,12 +49,7 @@ function emitInteract(
 }
 
 function emitNodeDblclick(container: HTMLElement, node: SankeyNode): void {
-  container.dispatchEvent(
-    new CustomEvent('widget:node-dblclick', {
-      detail: { nodeId: node.id, nodeData: node },
-      bubbles: true,
-    }),
-  );
+  emitInteract(container, 'node-dblclick', node);
 }
 
 export function render(container: HTMLElement, data: unknown): Cleanup {