@webmcp-auto-ui/sdk 2.5.37 → 2.5.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/sdk",
-  "version": "2.5.37",
+  "version": "2.5.39",
   "description": "Skills CRUD, HyperSkill format, Svelte 5 stores",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -8,14 +8,17 @@
   "main": "./src/index.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "svelte": "./src/index.ts",
       "import": "./src/index.ts"
     },
     "./canvas": {
+      "types": "./dist/canvas.d.ts",
       "svelte": "./src/canvas.ts",
       "import": "./src/canvas.ts"
     },
     "./canvas-vanilla": {
+      "types": "./dist/canvas-vanilla.d.ts",
       "import": "./src/canvas-vanilla.ts"
     }
   },

package/src/canvas-to-notebook.ts

@@ -0,0 +1,220 @@
+/**
+ * Canvas → HyperSkill notebook serializer.
+ * Each block becomes one or more SQL/JS/MD cells. Dynamic when lineage is
+ * present, snapshot fallback otherwise.
+ */
+
+import { pickFence } from './recipes/fence.js';
+
+export interface WidgetLineage {
+  widgetType: string;
+  widgetParams: Record<string, unknown>;
+  toolCalls: Array<{
+    serverName: string;
+    toolName: string;
+    args: Record<string, unknown>;
+    resultPreview?: string;
+  }>;
+  originRecipe?: string;
+}
+
+export interface CanvasToNotebookOptions {
+  title?: string;
+  description?: string;
+  /** Active MCP servers (name, url) — copied as `servers:` in frontmatter. */
+  servers?: Array<{ name: string; url: string }>;
+  /** Active bundled WebMCP server ids (e.g. ['autoui', 'deckgl']). */
+  webmcpServers?: string[];
+}
+
+export interface NotebookCell {
+  kind: 'sql' | 'js' | 'md';
+  content: string;
+  varname?: string;
+}
+
+export interface CanvasBlock {
+  id: string;
+  type: string;
+  data: Record<string, unknown>;
+}
+
+const SQL_TOOL_RE = /(^|[._-])query_sql$|^(query|run|execute)(_sql)?$/i;
+const ARRAY_PARAM_KEYS = ['rows', 'data', 'items', 'cards'] as const;
+
+/** Convert a single block + lineage into one or more notebook cells. */
+export function lineageToCells(
+  block: CanvasBlock,
+  lineage: WidgetLineage | null,
+): NotebookCell[] {
+  const cells: NotebookCell[] = [];
+
+  if (lineage?.originRecipe) {
+    cells.push({ kind: 'md', content: `> Generated from recipe: \`${lineage.originRecipe}\`` });
+  }
+
+  // Snapshot fallback — no lineage.
+  if (!lineage || !lineage.toolCalls || lineage.toolCalls.length === 0) {
+    cells.push({
+      kind: 'js',
+      content: `await widget('${block.type}', ${JSON.stringify(block.data, null, 2)});`,
+    });
+    return cells;
+  }
+
+  // Single SQL tool call → SQL cell + JS widget cell.
+  if (lineage.toolCalls.length === 1 && SQL_TOOL_RE.test(lineage.toolCalls[0]!.toolName)) {
+    const tc = lineage.toolCalls[0]!;
+    const sql = typeof tc.args['sql'] === 'string' ? (tc.args['sql'] as string) : '';
+    const varname = 'rows';
+    cells.push({ kind: 'sql', content: sql, varname });
+
+    const arrayKey = pickArrayParamKey(lineage.widgetParams);
+    let widgetCall: string;
+    if (arrayKey) {
+      const others = stripKeys(lineage.widgetParams, [arrayKey]);
+      const merged = { ...others, [arrayKey]: '__ROWS__' };
+      const json = JSON.stringify(merged, null, 2).replace('"__ROWS__"', varname);
+      widgetCall = `await widget('${block.type}', ${json});`;
+    } else {
+      widgetCall = `// TODO: map rows -> widget params\nawait widget('${block.type}', ${JSON.stringify(lineage.widgetParams, null, 2)});`;
+    }
+    cells.push({ kind: 'js', content: widgetCall });
+    return cells;
+  }
+
+  // General case — replay tool calls in order.
+  const lines: string[] = [];
+  lines.push('const unwrap = (r) => (r?.data ?? r?.results ?? r?.items ?? r ?? []);');
+  lineage.toolCalls.forEach((tc, i) => {
+    lines.push(
+      `const r${i} = await call('${tc.serverName}', '${tc.toolName}', ${JSON.stringify(tc.args, null, 2)});`,
+    );
+  });
+
+  const lastIdx = lineage.toolCalls.length - 1;
+  const arrayKey = pickArrayParamKey(lineage.widgetParams);
+  if (arrayKey) {
+    lines.push(`const ${arrayKey} = unwrap(r${lastIdx});`);
+    const others = stripKeys(lineage.widgetParams, [arrayKey]);
+    const merged = { ...others, [arrayKey]: '__ITEMS__' };
+    const json = JSON.stringify(merged, null, 2).replace('"__ITEMS__"', arrayKey);
+    lines.push(`await widget('${block.type}', ${json});`);
+  } else {
+    lines.push(`await widget('${block.type}', ${JSON.stringify(lineage.widgetParams, null, 2)});`);
+  }
+
+  cells.push({ kind: 'js', content: lines.join('\n') });
+  return cells;
+}
+
+/** Build the full notebook markdown from a snapshot of the canvas. */
+export function canvasToNotebookMarkdown(
+  blocks: CanvasBlock[],
+  getLineage: (blockId: string) => WidgetLineage | null,
+  opts: CanvasToNotebookOptions = {},
+): string {
+  const fm: string[] = ['---'];
+  fm.push(`title: ${yamlQuote(opts.title ?? 'Canvas snapshot')}`);
+  if (opts.description) fm.push(`description: ${yamlQuote(opts.description)}`);
+  if (opts.servers && opts.servers.length > 0) {
+    fm.push('servers:');
+    for (const s of opts.servers) {
+      fm.push(`  - name: ${yamlQuote(s.name)}`);
+      fm.push(`    url: ${yamlQuote(s.url)}`);
+    }
+  }
+  if (opts.webmcpServers && opts.webmcpServers.length > 0) {
+    fm.push(`webmcp_servers: [${opts.webmcpServers.map((s) => yamlQuote(s)).join(', ')}]`);
+  }
+  fm.push('---', '');
+
+  const body: string[] = [];
+  for (const block of blocks) {
+    const cells = lineageToCells(block, getLineage(block.id));
+    for (const cell of cells) {
+      body.push(renderCell(cell), '');
+    }
+  }
+
+  return fm.join('\n') + '\n' + body.join('\n').replace(/\n+$/, '') + '\n';
+}
+
+export interface CanvasToNotebookData {
+  title?: string;
+  description?: string;
+  /** Active MCP servers (name, url) — to seed the notebook widget's data. */
+  servers?: Array<{ name: string; url: string }>;
+  /** Active bundled WebMCP server ids. */
+  webmcpServers?: string[];
+  /** Cells ready to feed into a NotebookState. */
+  cells: Array<{
+    id: string;
+    type: 'md' | 'sql' | 'js';
+    content: string;
+    varname?: string;
+    status?: 'idle';
+  }>;
+}
+
+/** Same logic as canvasToNotebookMarkdown but returns structured cells for direct widget mounting. */
+export function canvasToNotebookCells(
+  blocks: CanvasBlock[],
+  getLineage: (blockId: string) => WidgetLineage | null,
+  opts: CanvasToNotebookOptions = {},
+): CanvasToNotebookData {
+  let counter = 0;
+  const cells: CanvasToNotebookData['cells'] = [];
+
+  for (const block of blocks) {
+    const raw = lineageToCells(block, getLineage(block.id));
+    for (const cell of raw) {
+      const entry: CanvasToNotebookData['cells'][number] = {
+        id: `c${counter++}`,
+        type: cell.kind,
+        content: cell.content,
+        status: 'idle',
+      };
+      if (cell.varname !== undefined) entry.varname = cell.varname;
+      cells.push(entry);
+    }
+  }
+
+  const out: CanvasToNotebookData = { cells };
+  if (opts.title) out.title = opts.title;
+  if (opts.description) out.description = opts.description;
+  if (opts.servers && opts.servers.length > 0) out.servers = opts.servers;
+  if (opts.webmcpServers && opts.webmcpServers.length > 0) out.webmcpServers = opts.webmcpServers;
+  return out;
+}
+
+function renderCell(cell: NotebookCell): string {
+  if (cell.kind === 'md') return cell.content;
+  if (cell.kind === 'sql') {
+    const meta = cell.varname ? `-- @meta {"varname": "${cell.varname}"}\n` : '';
+    const body = meta + cell.content;
+    const fence = pickFence(body);
+    return fence + 'sql\n' + body + '\n' + fence;
+  }
+  const fence = pickFence(cell.content);
+  return fence + 'js\n' + cell.content + '\n' + fence;
+}
+
+function pickArrayParamKey(params: Record<string, unknown>): string | null {
+  for (const k of ARRAY_PARAM_KEYS) {
+    if (k in params && Array.isArray(params[k])) return k;
+  }
+  return null;
+}
+
+function stripKeys(obj: Record<string, unknown>, keys: string[]): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(obj)) {
+    if (!keys.includes(k)) out[k] = v;
+  }
+  return out;
+}
+
+function yamlQuote(s: string): string {
+  return '"' + s.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"';
+}

package/src/index.ts

@@ -91,7 +91,7 @@ export type { RemoteMcpRegistryEntry } from './remote-mcp-registry.js';
 // import { canvas } from '@webmcp-auto-ui/sdk/canvas'
 
 // Recipe runner — markdown-fence parser + JS/TS/SQL/etc executor over MCP
-export { parseBody, runCode, estimateTokens, safeStringify, findCodeParamName, buildToolArgs } from './recipes/index.js';
+export { parseBody, pickFence, runCode, estimateTokens, safeStringify, findCodeParamName, buildToolArgs, parseWidgetDisplayCall } from './recipes/index.js';
 export type { ParsedSegment, RunResult, RunLog, RunTab, RecipeData } from './recipes/index.js';
 
 // Short URL — domain-dependent compact token
@@ -99,3 +99,16 @@ export { buildShortUrl, getShortToken } from './short-url.js';
 
 // Widget sample-data extractor — parses the `## Example` block of a recipe
 export { extractSampleData } from './widget-sample-data.js';
+
+// MCP response normalizer — flattens common envelope shapes to array
+export { unwrap } from './unwrap.js';
+
+// Canvas → HyperSkill notebook serializer
+export { lineageToCells, canvasToNotebookMarkdown, canvasToNotebookCells } from './canvas-to-notebook.js';
+export type {
+  WidgetLineage,
+  CanvasToNotebookOptions,
+  CanvasToNotebookData,
+  NotebookCell,
+  CanvasBlock,
+} from './canvas-to-notebook.js';

package/src/recipes/fence.ts

@@ -0,0 +1,12 @@
+/**
+ * Pick a backtick fence longer than any run of backticks inside `content`.
+ * CommonMark rule: a fenced code block opens with N≥3 backticks; the content
+ * must not contain a closing fence of the same length, and the closing fence
+ * must be at least as long as the opening. Choosing N = max(3, longestRun+1)
+ * makes round-trips safe even when the cell content embeds Markdown fences.
+ */
+export function pickFence(content: string): string {
+  const runs = content.match(/`+/g) ?? [];
+  const longest = runs.reduce((m, r) => Math.max(m, r.length), 0);
+  return '`'.repeat(Math.max(3, longest + 1));
+}

package/src/recipes/index.ts

@@ -1,3 +1,4 @@
 export { parseBody } from './parse.js';
-export { runCode, estimateTokens, safeStringify, findCodeParamName, buildToolArgs } from './runner.js';
+export { pickFence } from './fence.js';
+export { runCode, estimateTokens, safeStringify, findCodeParamName, buildToolArgs, parseWidgetDisplayCall } from './runner.js';
 export type { ParsedSegment, RunResult, RunLog, RunTab, RecipeData } from './types.js';

package/src/recipes/parse.ts

@@ -16,14 +16,17 @@ export function parseBody(body: string): ParsedSegment[] {
 
   const segments: ParsedSegment[] = [];
   // Match fenced code blocks with optional language tag.
-  // Non-greedy body; allow any chars between the fences.
-  const re = /```([a-zA-Z0-9_+-]*)\r?\n([\s\S]*?)```/g;
+  // Variable-length fence (≥3 backticks, CommonMark §4.5): the closing fence
+  // must use the same number of backticks as the opening — captured via \1.
+  // This allows cells whose content embeds ``` (e.g. widget('text', { content: "...```js..." }))
+  // to be encoded with a longer fence (4+ backticks) without premature closure.
+  const re = /(`{3,})([a-zA-Z0-9_+-]*)\r?\n([\s\S]*?)\r?\n\1[ \t]*(?=\r?\n|$)/g;
 
   let lastIndex = 0;
   let match: RegExpExecArray | null;
 
   while ((match = re.exec(body)) !== null) {
-    const [full, langRaw, codeRaw] = match;
+    const [full, , langRaw, codeRaw] = match;
     const start = match.index;
 
     if (start > lastIndex) {

package/src/stores/canvas.ts

@@ -290,6 +290,7 @@ function createCanvasVanilla() {
 
     if (srv.enabled && !srv.connected && !liveUrls.has(srv.url)) {
       inFlight.add(name);
+      setDataServerMeta(name, { connecting: true, error: undefined });
       try {
         const opts = srv.headers ? { headers: srv.headers } : undefined;
         const { name: actualName, tools } = await multiClient.addServer(srv.url, opts);

package/src/unwrap.ts

@@ -0,0 +1,11 @@
+/**
+ * Normalize MCP tool responses to an array. Handles common envelopes.
+ * Tries: direct array → .data → .results → .rows → .entries → .items → .feed.entry → .properties.parameter → []
+ */
+export function unwrap(r: unknown): any[] {
+  if (Array.isArray(r)) return r;
+  if (r == null || typeof r !== 'object') return [];
+  const o = r as any;
+  return o.data ?? o.results ?? o.rows ?? o.entries ?? o.items
+       ?? o.feed?.entry ?? o.properties?.parameter ?? [];
+}