@webmcp-auto-ui/sdk 2.5.27 → 2.5.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/sdk",
-  "version": "2.5.27",
+  "version": "2.5.28",
   "description": "Skills CRUD, HyperSkill format, Svelte 5 stores",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/canvas-vanilla.ts

@@ -1,3 +1,3 @@
 // Canvas store — Vanilla (framework-agnostic), no Svelte dependency
 export { canvasVanilla } from './stores/canvas.js';
-export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, CanvasSnapshot } from './stores/canvas.js';
+export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer, CanvasSnapshot } from './stores/canvas.js';

package/src/canvas.ts

@@ -1,3 +1,3 @@
 // Canvas store — Svelte 5 runes (browser-only, must be imported in Svelte components)
 export { canvas } from './stores/canvas.svelte.js';
-export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo } from './stores/canvas.svelte.js';
+export type { Widget, WidgetType, Block, BlockType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer } from './stores/canvas.svelte.js';

package/src/hyperskills.ts

@@ -32,7 +32,10 @@ async function compressGzip(bytes: Uint8Array): Promise<Uint8Array> {
   // @ts-ignore — CompressionStream is part of the DOM lib but may be missing in older TS targets
   const cs = new CompressionStream('gzip');
   const writer = cs.writable.getWriter();
-  writer.write(bytes);
+  // Copy into a fresh Uint8Array to guarantee the underlying buffer is a plain
+  // ArrayBuffer (not SharedArrayBuffer/ArrayBufferLike) — required by
+  // WritableStreamDefaultWriter<BufferSource> under TS 5.x strict lib.
+  writer.write(new Uint8Array(bytes));
   writer.close();
   return new Uint8Array(await new Response(cs.readable).arrayBuffer());
 }
@@ -87,6 +90,7 @@ export function getHsParam(url?: string): string | null {
       return null;
     }
   }
+  if (typeof window === 'undefined') return null;
   return hs.getHsParam();
 }
 

package/src/index.ts

@@ -44,9 +44,7 @@ import { encode, decode, hash, diff } from './hyperskills.js';
 export async function encodeHyperSkill(skill: HyperSkill, sourceUrl?: string): Promise<string> {
   const base = sourceUrl ?? (typeof window !== 'undefined' ? window.location.href.split('?')[0] : 'https://example.com');
   const json = JSON.stringify(skill);
-  // Auto-compress with gzip when payload exceeds 6 KB to keep URLs under nginx limits
-  const compress = json.length > 6144 ? 'gz' as const : undefined;
-  return encode(base, json, compress ? { compress } : {});
+  return encode(base, json, { compress: 'gz' });
 }
 
 export async function decodeHyperSkill(urlOrParam: string): Promise<HyperSkill> {
@@ -94,3 +92,6 @@ export type { McpDemoServer } from './mcp-demo-servers.js';
 // Recipe runner — markdown-fence parser + JS/TS/SQL/etc executor over MCP
 export { parseBody, runCode, estimateTokens, safeStringify } from './recipes/index.js';
 export type { ParsedSegment, RunResult, RunLog, RunTab, RecipeData } from './recipes/index.js';
+
+// Short URL — domain-dependent compact token
+export { buildShortUrl, getShortToken } from './short-url.js';

package/src/short-url.ts

@@ -0,0 +1,33 @@
+// Domain-dependent short URL — compact token served from the skill's own domain.
+// Not a dedicated subdomain: the skill host resolves `?n=<token>` to the full state.
+
+import { hash } from './hyperskills.js';
+
+/**
+ * Build a short URL from a source URL and the content to share.
+ * The short token is a prefix of the content hash, resolved server-side.
+ */
+export async function buildShortUrl(sourceUrl: string, content: string): Promise<string> {
+  const h = await hash(sourceUrl, content);
+  const token = h.slice(0, 10);
+  const u = new URL(sourceUrl);
+  u.search = '';
+  u.searchParams.set('n', token);
+  return u.toString();
+}
+
+/**
+ * Read the short token from a URL or param string. Returns null if absent.
+ */
+export function getShortToken(urlOrParam: string): string | null {
+  try {
+    if (urlOrParam.startsWith('?') || urlOrParam.includes('=')) {
+      const sp = new URLSearchParams(urlOrParam.replace(/^\?/, ''));
+      return sp.get('n');
+    }
+    const u = new URL(urlOrParam);
+    return u.searchParams.get('n');
+  } catch {
+    return null;
+  }
+}

package/src/stores/canvas.svelte.ts

@@ -7,10 +7,10 @@
  */
 
 import { canvasVanilla } from './canvas.js';
-import type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo } from './canvas.js';
+import type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer } from './canvas.js';
 
 // Re-export types (including deprecated aliases)
-export type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo };
+export type { Widget, WidgetType, Mode, LLMId, ChatMsg, McpToolInfo, DataServer };
 export type { Block, BlockType, CanvasSnapshot } from './canvas.js';
 
 function createCanvas() {
@@ -29,6 +29,7 @@ function createCanvas() {
   let statusColor = $state(canvasVanilla.statusColor);
   let themeOverrides = $state<Record<string, string>>(canvasVanilla.themeOverrides);
   let enabledServerIds = $state<string[]>(canvasVanilla.enabledServerIds);
+  let dataServers = $state<DataServer[]>(canvasVanilla.dataServers);
 
   // ── Derived ─────────────────────────────────────────────────────────────
   const blockCount = $derived(blocks.length);
@@ -51,6 +52,7 @@ function createCanvas() {
     statusColor = s.statusColor;
     themeOverrides = s.themeOverrides;
     enabledServerIds = canvasVanilla.enabledServerIds;
+    dataServers = canvasVanilla.dataServers;
   });
 
   // ── Return public API ───────────────────────────────────────────────────
@@ -112,6 +114,16 @@ function createCanvas() {
     get enabledServerIds() { return enabledServerIds; },
     setEnabledServers: canvasVanilla.setEnabledServers.bind(canvasVanilla),
 
+    // Data servers (multi-MCP) — additive, coexists with mcp* primary fields
+    get dataServers() { return dataServers; },
+    set dataServers(v: DataServer[]) { canvasVanilla.dataServers = v; },
+    addDataServer: canvasVanilla.addDataServer.bind(canvasVanilla),
+    removeDataServer: canvasVanilla.removeDataServer.bind(canvasVanilla),
+    getDataServer: canvasVanilla.getDataServer.bind(canvasVanilla),
+    setDataServerMeta: canvasVanilla.setDataServerMeta.bind(canvasVanilla),
+    setDataServerEnabled: canvasVanilla.setDataServerEnabled.bind(canvasVanilla),
+    toggleDataServer: canvasVanilla.toggleDataServer.bind(canvasVanilla),
+
     // HyperSkill
     buildSkillJSON: canvasVanilla.buildSkillJSON.bind(canvasVanilla),
     buildHyperskillParam: canvasVanilla.buildHyperskillParam.bind(canvasVanilla),

package/src/stores/canvas.ts

@@ -46,6 +46,17 @@ export interface McpToolInfo {
   inputSchema?: Record<string, unknown>;
 }
 
+export interface DataServer {
+  name: string;         // unique identifier (user-chosen label)
+  url: string;
+  kind: 'data';
+  enabled: boolean;     // user intent; bridge only connects to enabled servers
+  connected: boolean;   // flipped by the bridge after handshake
+  tools?: McpToolInfo[];
+  recipes?: { name: string; description?: string; body?: string }[];
+  error?: string;       // handshake error message, if any
+}
+
 export interface CanvasSnapshot {
   blocks: Widget[];
   mode: Mode;
@@ -61,6 +72,7 @@ export interface CanvasSnapshot {
   statusColor: string;
   themeOverrides: Record<string, string>;
   enabledServerIds: string[];
+  dataServers: DataServer[];
   blockCount: number;
   isEmpty: boolean;
 }
@@ -96,6 +108,50 @@ function createCanvasVanilla() {
   let _statusColor = 'text-zinc-600';
   let _themeOverrides: Record<string, string> = {};
   let _enabledServerIds: string[] = ['autoui'];
+  let _dataServers: DataServer[] = [];
+
+  // ── Data servers (multi-MCP) ───────────────────────────────────────────
+  function addDataServer(desc: { name: string; url: string }): DataServer {
+    const existing = _dataServers.find((s) => s.name === desc.name);
+    if (existing) return existing;
+    const srv: DataServer = { name: desc.name, url: desc.url, kind: 'data', enabled: true, connected: false };
+    _dataServers = [..._dataServers, srv];
+    notify();
+    return srv;
+  }
+
+  function removeDataServer(name: string): boolean {
+    const before = _dataServers.length;
+    _dataServers = _dataServers.filter((s) => s.name !== name);
+    if (_dataServers.length !== before) { notify(); return true; }
+    return false;
+  }
+
+  function getDataServer(name: string): DataServer | undefined {
+    return _dataServers.find((s) => s.name === name);
+  }
+
+  function setDataServerMeta(name: string, patch: Partial<Omit<DataServer, 'name' | 'url' | 'kind'>>): void {
+    const idx = _dataServers.findIndex((s) => s.name === name);
+    if (idx < 0) return;
+    _dataServers = _dataServers.map((s, i) => i === idx ? { ...s, ...patch } : s);
+    notify();
+  }
+
+  function setDataServerEnabled(name: string, enabled: boolean): boolean {
+    const s = _dataServers.find((x) => x.name === name);
+    if (!s) return false;
+    if (s.enabled === enabled) return true;
+    _dataServers = _dataServers.map((x) => x.name === name ? { ...x, enabled } : x);
+    notify();
+    return true;
+  }
+
+  function toggleDataServer(name: string): boolean {
+    const s = _dataServers.find((x) => x.name === name);
+    if (!s) return false;
+    return setDataServerEnabled(name, !s.enabled);
+  }
 
   // ── Widget actions ─────────────────────────────────────────────────────
   function addWidget(type: WidgetType, data: Record<string, unknown> = {}): Widget {
@@ -173,12 +229,16 @@ function createCanvasVanilla() {
     tools?: McpToolInfo[]
   ) {
     _mcpConnected = connected;
-    if (name) _mcpName = name;
-    if (tools) _mcpTools = tools;
     if (connected) {
+      if (name) _mcpName = name;
+      if (tools) _mcpTools = tools;
       _statusText = `● ${name} · ${tools?.length ?? 0} tools`;
       _statusColor = 'text-teal-400';
     } else {
+      // Reset stale connection state on disconnect so the UI doesn't keep
+      // advertising the previous server name / tool list.
+      _mcpName = '';
+      _mcpTools = [];
       _statusText = '● no MCP connected';
       _statusColor = 'text-zinc-600';
     }
@@ -222,8 +282,7 @@ function createCanvasVanilla() {
 
   async function buildHyperskillParam(): Promise<string> {
     const json = JSON.stringify(buildSkillJSON());
-    const compress = json.length > 6144 ? 'gz' as const : undefined;
-    const url = await encode('https://x.local', json, compress ? { compress } : {});
+    const url = await encode('https://x.local', json, { compress: 'gz' });
     return new URL(url).searchParams.get('hs')!;
   }
 
@@ -267,10 +326,19 @@ function createCanvasVanilla() {
   async function loadFromUrl(url: string): Promise<boolean> {
     try {
       const { content: raw } = await decode(url);
-      const decoded = JSON.parse(raw) as { meta?: Record<string, unknown>; content?: { blocks?: { type: WidgetType; data: Record<string, unknown> }[] } };
+      const decoded = JSON.parse(raw) as {
+        meta?: Record<string, unknown>;
+        content?: { blocks?: { type: WidgetType; data: Record<string, unknown> }[] };
+        servers?: string[];
+      };
       if (decoded.meta?.mcp) _mcpUrl = decoded.meta.mcp as string;
       if (decoded.meta?.llm) _llm = decoded.meta.llm as LLMId;
       if (decoded.meta?.theme) _themeOverrides = decoded.meta.theme as Record<string, string>;
+      // Align with loadFromParam: restore enabledServerIds when `servers` is
+      // present. buildSkillJSON emits it at the root, but tolerate it under
+      // `meta` as well for forward/back compatibility.
+      const servers = (decoded.servers ?? (decoded.meta?.servers as string[] | undefined));
+      if (Array.isArray(servers)) _enabledServerIds = servers;
       if (decoded.content?.blocks) _blocks = decoded.content.blocks.map((b) => ({ id: uuid(), type: b.type, data: b.data }));
       notify();
       return true;
@@ -296,6 +364,7 @@ function createCanvasVanilla() {
       statusColor: _statusColor,
       themeOverrides: _themeOverrides,
       enabledServerIds: _enabledServerIds,
+      dataServers: _dataServers,
       blockCount: _blocks.length,
       isEmpty: _blocks.length === 0,
     };
@@ -358,6 +427,16 @@ function createCanvasVanilla() {
     get enabledServerIds() { return _enabledServerIds; },
     setEnabledServers,
 
+    // Data servers (multi-MCP) — additive, coexists with mcp* primary fields
+    get dataServers() { return _dataServers; },
+    set dataServers(v: DataServer[]) { _dataServers = Array.isArray(v) ? v : []; notify(); },
+    addDataServer,
+    removeDataServer,
+    getDataServer,
+    setDataServerMeta,
+    setDataServerEnabled,
+    toggleDataServer,
+
     // HyperSkill
     buildSkillJSON, buildHyperskillParam, loadFromParam, loadFromUrl,