@webmcp-auto-ui/ui 2.5.35 → 2.5.37

package/src/widgets/notebook/import-modal-api.ts

@@ -16,7 +16,6 @@
 // Side-effect import: registers <auto-import-modal> custom element
 import './import-modal.svelte';
 
-import { renderMarkdownWithInjectButtons } from './prose.js';
 import { extractCellsFromRecipe, extractCellsFromTool, extractCellFromFence } from './resource-extractor.js';
 import type { NotebookCell } from './shared.js';
 import type { McpToolLike } from './resource-extractor.js';
@@ -56,19 +55,15 @@ type ModalEl = HTMLElement & {
 let _modal: ModalEl | null = null;
 let _cleanup: (() => void) | null = null;
 
-function ensureModal(): ModalEl {
+async function ensureModal(): Promise<ModalEl> {
   if (_modal && document.contains(_modal)) return _modal;
 
-  // Register the CE if not already done (Svelte registers it on first import
-  // but we ensure it here for safety).
-  if (!customElements.get('auto-import-modal')) {
-    // Dynamic import triggers CE registration via Svelte's customElement decorator.
-    // Since this module is already bundled with the CE, it's already registered.
-    // If somehow not registered, fall back gracefully.
-  }
-
   const el = document.createElement('auto-import-modal') as ModalEl;
   document.body.appendChild(el);
+  // Svelte 5's connectedCallback is async (awaits a microtask before creating
+  // $$c), and exported methods are exposed via getters that read $$c. Yield
+  // one microtask so el.openModal/closeModal are defined when we call them.
+  await Promise.resolve();
   _modal = el;
   return el;
 }
@@ -85,8 +80,8 @@ export function closeImportModal(): void {
 // openAddMdModal
 // ---------------------------------------------------------------------------
 
-export function openAddMdModal(onPick: (content: string) => void): void {
-  const el = ensureModal();
+export async function openAddMdModal(onPick: (content: string) => void): Promise<void> {
+  const el = await ensureModal();
 
   // Clean up previous listener
   _cleanup?.();
@@ -112,8 +107,8 @@ export function openAddMdModal(onPick: (content: string) => void): void {
 // openAddRecipeModal
 // ---------------------------------------------------------------------------
 
-export function openAddRecipeModal(opts: AddRecipeModalOptions): void {
-  const el = ensureModal();
+export async function openAddRecipeModal(opts: AddRecipeModalOptions): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 
@@ -142,17 +137,14 @@ export function openAddRecipeModal(opts: AddRecipeModalOptions): void {
 // openRecipeViewerModal
 // ---------------------------------------------------------------------------
 
-export function openRecipeViewerModal(
+export async function openRecipeViewerModal(
   recipe: ImportedRecipe,
   onInjectCell: (cell: NotebookCell) => void,
-): void {
-  const el = ensureModal();
+): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 
-  // We'll hold a reference to the prose renderer's destroy fn.
-  let proseDestroy: (() => void) | null = null;
-
   const handler = (e: CustomEvent) => {
     const { action, payload } = e.detail ?? {};
 
@@ -172,8 +164,6 @@ export function openRecipeViewerModal(
 
     if (action === 'inject-all' || action === 'close') {
       el.removeEventListener('widget:interact', handler as EventListener);
-      proseDestroy?.();
-      proseDestroy = null;
       _cleanup = null;
     }
   };
@@ -181,38 +171,20 @@ export function openRecipeViewerModal(
   el.addEventListener('widget:interact', handler as EventListener);
   _cleanup = () => {
     el.removeEventListener('widget:interact', handler as EventListener);
-    proseDestroy?.();
-    proseDestroy = null;
   };
 
   el.openModal({ mode: 'recipe-viewer', recipe });
-
-  // After the CE opens, inject the rendered markdown into [data-role="render"].
-  // requestAnimationFrame ensures Svelte has rendered the modal DOM.
-  requestAnimationFrame(() => {
-    const renderTarget = el.querySelector('[data-role="render"]') as HTMLElement | null;
-    if (!renderTarget) return;
-    const { root, destroy } = renderMarkdownWithInjectButtons(
-      recipe.body ?? '',
-      ({ lang, content }) => {
-        const cell = extractCellFromFence(lang, content);
-        onInjectCell(cell);
-      },
-    );
-    renderTarget.appendChild(root);
-    proseDestroy = destroy;
-  });
 }
 
 // ---------------------------------------------------------------------------
 // openToolViewerModal
 // ---------------------------------------------------------------------------
 
-export function openToolViewerModal(
+export async function openToolViewerModal(
   tool: McpToolLike,
   onInjectCells: (cells: NotebookCell[]) => void,
-): void {
-  const el = ensureModal();
+): Promise<void> {
+  const el = await ensureModal();
 
   _cleanup?.();
 

package/src/widgets/notebook/import-modal.svelte

@@ -18,7 +18,10 @@
   // ---------------------------------------------------------------------------
 
   import { filterRecipes, sortRecipes, WEBMCP_RECIPES } from '@webmcp-auto-ui/agent';
-  import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+  import { canvas } from '@webmcp-auto-ui/sdk/canvas';
+  import { parseBody } from '@webmcp-auto-ui/sdk';
+  import MarkdownView from '../../primitives/MarkdownView.svelte';
+  import RecipeCodeBlock from '../../recipe/RecipeCodeBlock.svelte';
 
   // ---------------------------------------------------------------------------
   // Types (inlined to avoid import-modals.ts cycle)
@@ -90,6 +93,10 @@
   const mode = $derived(data?.mode ?? 'add-md');
   const recipe = $derived(data?.recipe);
   const tool = $derived(data?.tool);
+  const recipeSegments = $derived(parseBody(recipe?.body ?? ''));
+  const recipeCellCount = $derived(
+    recipeSegments.length + ((recipe?.name || recipe?.description) ? 1 : 0),
+  );
 
   // ---------------------------------------------------------------------------
   // Public API — called by wrapper functions
@@ -150,7 +157,7 @@
     if (d.mcpServers?.length) {
       const fetches = d.mcpServers.map(async (srv) => {
         try {
-          const res: any = await callToolViaPostMessage(`${srv.name}_list_recipes`, {});
+          const res: any = await canvas.callTool(srv.name, 'list_recipes', {});
           const items = extractRecipeItems(res, srv);
           if (items.length) recipes = [...recipes, ...items];
         } catch { /* ignore */ }
@@ -232,8 +239,9 @@
     // Fetch body on demand if missing
     if (!r.body && r.serverName && r.serverName !== 'webmcp') {
       try {
-        const res: any = await callToolViaPostMessage(
-          `${r.serverName}_get_recipe`,
+        const res: any = await canvas.callTool(
+          r.serverName,
+          'get_recipe',
           { name: r.originalName ?? r.name, id: r.id ?? r.name },
         );
         r = { ...r, body: extractRecipeBody(res) ?? '' };
@@ -255,25 +263,13 @@
   // Handlers — recipe-viewer
   // ---------------------------------------------------------------------------
 
-  // prose rendering is done server-side for recipe-viewer; we re-use the
-  // renderMarkdownWithInjectButtons helper injected via slot or data.
-  // Since this is a CE, we render as raw HTML via {@html} after sanitizing.
-  // The inject buttons are wired via event delegation on the section.
-
   function handleInjectAll() {
-    // extractCellsFromRecipe is a pure function from resource-extractor.ts —
-    // but import would create a cycle ui<->notebook. We emit the raw body
-    // and let the consumer (notebook.ts) call extractCellsFromRecipe.
+    // Notebook owns extractCellsFromRecipe to avoid a ui<->notebook cycle.
     emitInteract('inject-all', { recipe: recipe });
     closeModal();
   }
 
-  function handleInjectFence(e: Event) {
-    // Delegated click on .nb-md-fence-inject buttons rendered via {@html}
-    const btn = (e.target as HTMLElement).closest('[data-fence-inject]') as HTMLElement | null;
-    if (!btn) return;
-    const lang = btn.dataset.lang ?? '';
-    const content = btn.dataset.content ?? '';
+  function handleInjectFence(content: string, lang: string) {
     emitInteract('inject-fence', { lang, content });
   }
 
@@ -426,12 +422,30 @@
         {#if recipe?.description}<p>{recipe.description}</p>{/if}
         {#if recipe?.serverName}<span class="nb-imp-recipe-srv">{recipe.serverName}</span>{/if}
       </div>
-      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-      <section class="nb-imp-body nb-imp-body-recipe" data-role="render" onclick={handleInjectFence}>
-        <!-- Content injected imperatively by notebook.ts via renderMarkdownWithInjectButtons -->
+      <section class="nb-imp-body nb-imp-body-recipe">
+        {#each recipeSegments as seg, i (i)}
+          {#if seg.type === 'markdown'}
+            <MarkdownView source={seg.content} />
+          {:else}
+            <RecipeCodeBlock
+              code={seg.content}
+              lang={seg.lang ?? 'text'}
+              actions={[{
+                icon: '+',
+                label: 'Inject as cell',
+                onclick: handleInjectFence,
+              }]}
+            />
+          {/if}
+        {/each}
       </section>
       <footer class="nb-imp-foot">
-        <button type="button" class="nb-imp-btn" onclick={handleInjectAll}>Inject all cells</button>
+        <button
+          type="button"
+          class="nb-imp-btn nb-imp-primary"
+          onclick={handleInjectAll}
+          disabled={recipeCellCount === 0}
+        >Inject all cells{recipeCellCount > 0 ? ` (${recipeCellCount})` : ''}</button>
       </footer>
 
     <!-- ================================================================ -->
@@ -691,48 +705,4 @@
     font-size: 11.5px;
   }
 
-  /* ---- Styles for prose rendered inside recipe-viewer (delegated via {@html} in consumers) ---- */
-  :global(.nb-md-render) { font-size: 13px; line-height: 1.5; }
-  :global(.nb-md-render h1),
-  :global(.nb-md-render h2),
-  :global(.nb-md-render h3) { margin: 12px 0 6px; }
-  :global(.nb-md-render p) { margin: 6px 0; }
-  :global(.nb-md-render ul),
-  :global(.nb-md-render ol) { margin: 6px 0 6px 20px; }
-  :global(.nb-md-render pre) {
-    background: var(--color-surface2, #f4f4f5);
-    padding: 10px 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-    font-size: 12px;
-  }
-  :global(.nb-md-render code) { font-family: var(--font-mono, monospace); font-size: 12px; }
-  :global(.nb-md-fence) {
-    border: 1px solid var(--color-border, #e4e4e7);
-    border-radius: 8px;
-    margin: 10px 0;
-    overflow: hidden;
-  }
-  :global(.nb-md-fence-head) {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 6px 10px;
-    background: var(--color-surface2, #f4f4f5);
-    font-size: 11px;
-    color: var(--color-text2, #666);
-    border-bottom: 1px solid var(--color-border, #e4e4e7);
-  }
-  :global(.nb-md-fence-lang) { font-family: monospace; flex: 1; }
-  :global(.nb-md-fence-inject) {
-    background: var(--color-accent, #6a55ff);
-    color: #fff;
-    border: 0;
-    border-radius: 4px;
-    padding: 3px 9px;
-    font-size: 11px;
-    cursor: pointer;
-  }
-  :global(.nb-md-fence-inject:hover) { filter: brightness(1.08); }
-  :global(.nb-md-fence pre) { margin: 0; border-radius: 0; background: transparent; }
 </style>

package/src/widgets/notebook/left-pane.ts

@@ -6,7 +6,7 @@
 // Collapsed by default.
 // ---------------------------------------------------------------------------
 
-import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+import { canvas } from '@webmcp-auto-ui/sdk/canvas';
 import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modal-api.js';
 import type { NotebookCell, NotebookState, DataServerDescriptor } from './shared.js';
 
@@ -73,8 +73,7 @@ export function mountLeftPane(
       section.innerHTML = `
         <header class="nb-lp-srv-head">
           <span class="nb-lp-srv-dot"></span>
-          <span class="nb-lp-srv-name">${escapeHtml(srv.name)}</span>
-          <span class="nb-lp-srv-meta">${(srv.recipes?.length ?? 0)} recipes · ${(srv.tools?.length ?? 0)} tools</span>
+          <span class="nb-lp-srv-name">${escapeHtml(srv.serverName ?? srv.label ?? srv.name)}</span>
         </header>
         <div class="nb-lp-srv-groups">
           ${srv.recipes?.length ? `
@@ -135,25 +134,45 @@ export function mountLeftPane(
     }
     if (!imported.body) {
       try {
-        const res: any = await callToolViaPostMessage(`${srv.name}_get_recipe`, { name: r.name, id: r.name });
+        const res: any = await canvas.callTool(srv.name, 'get_recipe', { name: r.name, id: r.name });
         const text = res?.content?.find?.((c: any) => c.type === 'text')?.text;
         if (text) {
           let body = text;
           try {
             const parsed = JSON.parse(text);
-            // Recipe servers return either { content: "..." } (legacy) or
-            // { name, description, body, ... } (autoui-style). Pick whichever
-            // string field carries the markdown body, in priority order.
             if (parsed && typeof parsed === 'object') {
-              if (typeof parsed.body === 'string') body = parsed.body;
-              else if (typeof parsed.content === 'string') body = parsed.content;
-              else if (typeof parsed.markdown === 'string') body = parsed.markdown;
+              const candidates = [
+                parsed.body,
+                parsed.content,
+                parsed.markdown,
+                parsed.recipe?.body,
+                parsed.recipe?.content,
+                parsed.recipe?.markdown,
+                parsed.result?.body,
+                parsed.result?.content,
+                parsed.data?.body,
+                parsed.data?.content,
+              ];
+              const hit = candidates.find((c) => typeof c === 'string' && c.trim().length > 0);
+              if (hit) {
+                body = hit;
+              } else {
+                console.warn(
+                  `[notebook] get_recipe(${srv.name}/${r.name}): no recognized body key in parsed JSON. Keys:`,
+                  Object.keys(parsed),
+                );
+              }
             }
           } catch { /* not JSON, use raw text */ }
           imported.body = body;
           recipeBodyCache.set(key, body);
         }
-      } catch { /* pass empty body to viewer */ }
+      } catch (err) {
+        console.warn(`[notebook] get_recipe(${srv.name}/${r.name}) failed:`, err);
+      }
+    }
+    if (!imported.body) {
+      imported.body = `> ⚠ Failed to load recipe body from \`${srv.name}\`. The server returned no usable content for \`${r.name}\`.`;
     }
     openRecipeViewerModal(imported, (cell) => handlers.onInjectCells([cell]));
   }
@@ -236,7 +255,6 @@ function injectLeftPaneStyles() {
       flex-shrink: 0;
     }
     .nb-lp-srv-name { font-weight: 600; color: var(--color-text1, #111); }
-    .nb-lp-srv-meta { margin-left: auto; font-family: monospace; font-size: 10.5px; }
     .nb-lp-group > summary {
       cursor: pointer; padding: 4px 2px; font-size: 11px;
       color: var(--color-text2, #666); font-family: monospace;

package/src/widgets/notebook/notebook.svelte

@@ -21,10 +21,8 @@
   export interface NotebookData {
     id?: string;
     title?: string;
-    kicker?: string;
     mode?: 'edit' | 'view';
     autoRun?: boolean;
-    hideLiveToggle?: boolean;
     cells?: NotebookCell[];
     /** MCP servers for SQL execution (array of {name, url}) */
     servers?: Array<{ name: string; url?: string }>;

package/src/widgets/notebook/notebook.ts

@@ -35,10 +35,10 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     title: data.title as string ?? 'Untitled notebook',
     mode: (data.mode as any) ?? 'edit',
     cells: data.cells as any,
-    kicker: (data.kicker as string) ?? undefined,
     autoRun: (data as any).autoRun === true,
+    publishedSlug: (data as any).publishedSlug,
+    publishedToken: (data as any).publishedToken,
   });
-  if (!state.kicker) state.kicker = (data.kicker as string) ?? 'untitled';
 
   // Live mode runtime overlay (created lazily). Never mutates state.
   let overlay: RuntimeOverlay | null = null;
@@ -56,8 +56,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
       <div class="nbe-leftpane-slot"></div>
       <div class="nbe-shell">
         <div class="nbe-kicker">
-          <input class="nbe-kicker-input" value="${escapeAttr(state.kicker || '')}" placeholder="kicker…">
-          <span class="nbe-live-toggle-slot"></span>
           <div class="nb-mode-switch" style="margin-left:auto;">
             <button class="nb-mode-edit nb-on">edit</button>
             <button class="nb-mode-view">view</button>
@@ -107,24 +105,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     });
   }
 
-  const hideLiveToggle = (data as any).hideLiveToggle === true;
-
-  function renderLiveToggle() {
-    const slot = shell.querySelector('.nbe-live-toggle-slot') as HTMLElement;
-    if (hideLiveToggle) { slot.innerHTML = ''; return; }
-    if (state.mode === 'edit') {
-      const checked = state.autoRun === true ? 'checked' : '';
-      slot.innerHTML = `<label class="nbe-live-toggle" title="Re-execute SQL cells against connected servers when this notebook is opened in view mode."><input type="checkbox" ${checked} />Live data</label>`;
-      const cb = slot.querySelector('input[type=checkbox]') as HTMLInputElement;
-      cb.addEventListener('change', () => {
-        state.autoRun = cb.checked;
-        rerender();
-      });
-    } else {
-      slot.innerHTML = '';
-    }
-  }
-
   function renderLiveBadge() {
     const slot = shell.querySelector('.nbe-live-badge-slot') as HTMLElement;
     if (state.mode === 'view' && state.autoRun === true) {
@@ -197,7 +177,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   function rerender() {
     const restore = preserveScrollAround(cellsEl);
     mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); });
-    renderLiveToggle();
     renderLiveBadge();
     renderEmptyState();
     renderCells();
@@ -224,9 +203,8 @@ export async function render(container: HTMLElement, data: Record<string, unknow
           rerender();
         });
       } else if (which === 'recipe') {
-        const mcpServers = (Array.isArray((data as any)?.servers) ? (data as any).servers : [])
-          .map((s: any) => ({ name: String(s?.name ?? ''), url: s?.url ? String(s.url) : undefined }))
-          .filter((s: any) => s.name);
+        const mcpServers = collectDataServers(data)
+          .map((s) => ({ name: s.name, url: s.url }));
         openAddRecipeModal({
           mcpServers,
           scope: 'data',
@@ -259,10 +237,6 @@ export async function render(container: HTMLElement, data: Record<string, unknow
     footerSlot: shell.querySelector('.nbe-publish-footer-slot') as HTMLElement,
     onPublished: () => rerender(),
   });
-  (shell.querySelector('.nbe-kicker-input') as HTMLInputElement).addEventListener('input', (e) => {
-    state.kicker = (e.target as HTMLInputElement).value;
-    state.lastEditAt = Date.now();
-  });
   (shell.querySelector('.nbe-title') as HTMLInputElement).addEventListener('input', (e) => {
     state.title = (e.target as HTMLInputElement).value;
     state.lastEditAt = Date.now();
@@ -294,7 +268,7 @@ export async function render(container: HTMLElement, data: Record<string, unknow
   });
 
   // Auto-connect data servers declared in the recipe frontmatter (data.servers).
-  // The notebook reads MCP state passively from globalThis.__multiMcp (singleton).
+  // The notebook reads MCP state passively from canvas.dataServers.
   autoConnectFrontmatterServers(data, () => pane.setServers(collectDataServers(data)));
 
   // Keep pane servers in sync with canvas changes
@@ -623,16 +597,6 @@ function injectLayoutStyles(): void {
   letter-spacing: 0.1em; text-transform: uppercase;
   margin-bottom: 14px;
 }
-.nbe-kicker-input {
-  flex: 0 0 auto; min-width: 120px;
-  background: transparent; border: 1px dashed transparent;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  letter-spacing: 0.1em; text-transform: uppercase;
-  padding: 2px 4px; border-radius: 3px; outline: none;
-}
-.nbe-kicker-input:focus { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text1); }
-.nb-root.nb-view-mode .nbe-kicker-input { pointer-events: none; }
 .nbe-title {
   font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
   font-size: 30px; font-weight: 500;
@@ -650,9 +614,13 @@ function injectLayoutStyles(): void {
 .nbe-handle { position: absolute; left: 0; top: 6px; }
 .nbe-del-abs {
   position: absolute; top: 4px; right: 4px;
-  opacity: 0; transition: opacity 0.15s;
+  opacity: 0.65; transition: opacity 0.15s;
+  width: 26px; height: 26px;
+  font-size: 16px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0;
+  z-index: 2;
 }
-.nbe-cell:hover .nbe-del-abs { opacity: 0.5; }
 .nbe-del-abs:hover { opacity: 1 !important; }
 
 .nbe-prose {
@@ -711,7 +679,7 @@ function injectLayoutStyles(): void {
 }
 .nbe-cell-head {
   display: flex; align-items: center; gap: 8px;
-  padding: 7px 12px;
+  padding: 7px 44px 7px 12px;
   border-bottom: 1px solid var(--color-border);
   font-family: var(--font-mono, 'IBM Plex Mono', monospace);
   font-size: 10px; color: var(--color-text2);
@@ -814,18 +782,6 @@ function injectLayoutStyles(): void {
 .nbe-toast.nbe-toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
 .nbe-toast.nbe-toast-error { color: var(--color-accent2); border-color: var(--color-accent2); }
 
-/* Live mode — discreet toggle in header (edit mode only) */
-.nbe-live-toggle {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 10.5px; color: var(--color-text2);
-  letter-spacing: 0.06em; text-transform: uppercase;
-  cursor: pointer; user-select: none;
-  padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 4px;
-}
-.nbe-live-toggle:hover { color: var(--color-text1); border-color: var(--color-border2); }
-.nbe-live-toggle input { margin: 0; cursor: pointer; }
-
 /* Title row + Live badge (view mode + autoRun) */
 .nbe-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
 .nbe-title-row .nbe-title { flex: 1; min-width: 0; }

package/src/widgets/notebook/prose.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 // ---------------------------------------------------------------------------
 // Lightweight markdown renderer + allowlist sanitizer for notebook prose cells.
-// Also: renderMarkdownWithInjectButtons — used by recipe viewer modal.
 // No external dependencies.
 // ---------------------------------------------------------------------------
 
@@ -546,80 +545,3 @@ function updateEmptyState(host: HTMLElement): void {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Renderer with inject buttons — used by recipe viewer modal.
-// Each fenced code block gets an "↳ inject" button next to it.
-// ---------------------------------------------------------------------------
-
-export interface InjectFenceEvent {
-  lang: string;
-  content: string;
-}
-
-/**
- * Render markdown into a container. Each fenced code block is rendered with
- * an "↳ inject" button; clicking it calls onInject({lang, content}).
- * Returns a cleanup function.
- */
-export function renderMarkdownWithInjectButtons(
-  body: string,
-  onInject: (e: InjectFenceEvent) => void,
-): { root: HTMLElement; destroy: () => void } {
-  const root = document.createElement('div');
-  root.className = 'nb-md-render';
-
-  const lines = (body || '').replace(/\r\n/g, '\n').split('\n');
-  const buf: string[] = [];
-  let i = 0;
-  const cleanups: Array<() => void> = [];
-
-  const flushProse = () => {
-    if (buf.length) {
-      const chunk = buf.join('\n');
-      const p = document.createElement('div');
-      p.innerHTML = renderProse(chunk);
-      root.appendChild(p);
-      buf.length = 0;
-    }
-  };
-
-  while (i < lines.length) {
-    const line = lines[i];
-    if (/^```/.test(line)) {
-      flushProse();
-      const lang = line.replace(/^```/, '').trim().toLowerCase() || 'text';
-      const code: string[] = [];
-      i++;
-      while (i < lines.length && !/^```/.test(lines[i])) {
-        code.push(lines[i]);
-        i++;
-      }
-      i++; // closing fence
-      const content = code.join('\n');
-
-      const block = document.createElement('div');
-      block.className = 'nb-md-fence';
-      block.innerHTML = `
-        <div class="nb-md-fence-head">
-          <span class="nb-md-fence-lang">${escapeHtml(lang)}</span>
-          <button type="button" class="nb-md-fence-inject">↳ inject</button>
-        </div>
-        <pre class="hljs-pre"><code class="hljs language-${escapeHtml(lang)}">${highlightCode(content, lang)}</code></pre>
-      `;
-      const btn = block.querySelector('.nb-md-fence-inject') as HTMLButtonElement;
-      const handler = () => onInject({ lang, content });
-      btn.addEventListener('click', handler);
-      cleanups.push(() => btn.removeEventListener('click', handler));
-      root.appendChild(block);
-      continue;
-    }
-    buf.push(line);
-    i++;
-  }
-  flushProse();
-
-  return {
-    root,
-    destroy: () => cleanups.forEach((f) => f()),
-  };
-}

package/src/widgets/notebook/recipes/notebook.md

@@ -11,9 +11,6 @@ schema:
     mode:
       type: string
       enum: [edit, view]
-    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
@@ -52,7 +49,6 @@ The distinguishing feature: prose paragraphs and code cells share a single order
    ```
    widget_display({name: "notebook", params: {
      title: "Q3 observations",
-     kicker: "memo",
      cells: [
        {type: "md", content: "This memo covers the highlights of last quarter."},
        {type: "md", content: "We first look at revenue, then at churn."},
@@ -74,7 +70,6 @@ The distinguishing feature: prose paragraphs and code cells share a single order
 ## Notes
 
 - The serif font (EB Garamond, with Georgia fallback) applies only to prose content inside this widget — it signals "publication" the moment the user sees it.
-- The **kicker** above the title ("analysis", "memo", "internal") is editable inline — click to rename. Keep it short.
 - 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.
@@ -112,7 +107,6 @@ An editorial piece earns its weight when the prose is anchored to real material.
      name: 'notebook',
      params: {
        title: '...',
-       kicker: 'memo',
        cells: [...],
        servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
      }

package/src/widgets/notebook/resource-extractor.ts

@@ -26,6 +26,23 @@ const LANG_TO_TYPE: Record<string, CellType> = {
  *  whenever such a fence is mapped so the user gets a hint. */
 const TS_LIKE_LANGS = new Set(['ts', 'typescript']);
 
+/**
+ * Peel a leading `-- @meta {...}` (SQL) or `// @meta {...}` (JS) line from the
+ * cell content and return the parsed JSON args plus the remaining content.
+ * Round-trip with serializeCellMeta in share-handlers.ts.
+ */
+export function peelMetaComment(content: string): { content: string; args?: Record<string, unknown> } {
+  const m = /^[ \t]*(?:--|\/\/)[ \t]*@meta[ \t]+(\{[\s\S]*?\})[ \t]*\r?\n?/.exec(content);
+  if (!m) return { content };
+  try {
+    const parsed = JSON.parse(m[1]);
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return { content: content.slice(m[0].length), args: parsed as Record<string, unknown> };
+    }
+  } catch { /* invalid JSON → ignore, keep line in content */ }
+  return { content };
+}
+
 export function fenceLangToCellType(lang: string): CellType | null {
   const key = (lang || '').toLowerCase().trim();
   if (TS_LIKE_LANGS.has(key)) {
@@ -45,7 +62,10 @@ export function fenceLangToCellType(lang: string): CellType | null {
 export function extractCellFromFence(lang: string, content: string): NotebookCell {
   const cellType = fenceLangToCellType(lang);
   if (cellType) {
-    return { id: uid(), type: cellType, content: content.trim(), hideSource: false, hideResult: false };
+    const { content: stripped, args } = peelMetaComment(content.trim());
+    const cell: NotebookCell = { id: uid(), type: cellType, content: stripped, hideSource: false, hideResult: false };
+    if (args) cell.args = args;
+    return cell;
   }
   // Detect pseudo-code MCP tool calls like: query_sql({sql: "..."})
   // Only attempted when the fence language is unknown/text (cellType === null).