@webmcp-auto-ui/ui 2.5.37 → 2.5.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.37",
+  "version": "2.5.39",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -70,6 +70,7 @@
   ],
   "dependencies": {
     "@internationalized/date": "^3.8.1",
+    "@turf/turf": "^7.3.5",
     "@types/d3": "^7.4.3",
     "@webmcp-auto-ui/agent": "*",
     "@webmcp-auto-ui/core": "*",
@@ -78,6 +79,7 @@
     "clsx": "^2.1.1",
     "highlight.js": "^11.10.0",
     "html-to-image": "^1.11.13",
+    "maplibre-gl": "^5.24.0",
     "marked": "^14.1.3",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",

package/src/base/chat-inline.svelte

@@ -32,7 +32,7 @@
   }
 </script>
 
-<div class="flex items-center gap-2 w-full">
+<div class="chat-inline">
   <input
     bind:this={inputEl}
     bind:value
@@ -40,16 +40,13 @@
     {placeholder}
     {disabled}
     onkeydown={handleKeydown}
-    class="flex-1 h-9 px-3 rounded-lg border border-border2 bg-surface2 text-sm text-text1
-           placeholder:text-text2/40 focus:outline-none focus:border-accent/50
-           disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+    class="chat-inline__input"
   />
   {#if disabled}
     <button
       type="button"
       onclick={handleStop}
-      class="h-9 px-3 rounded-lg border border-accent2/40 bg-accent2/10 text-accent2
-             text-xs font-mono hover:bg-accent2/20 transition-colors flex-shrink-0"
+      class="chat-inline__btn chat-inline__btn--stop"
     >
       stop
     </button>
@@ -58,11 +55,86 @@
       type="button"
       onclick={handleSubmit}
       disabled={!value?.trim()}
-      class="h-9 px-3 rounded-lg border border-accent/40 bg-accent/10 text-accent
-             text-xs font-mono hover:bg-accent/20 disabled:opacity-40 disabled:cursor-not-allowed
-             transition-colors flex-shrink-0"
+      class="chat-inline__btn chat-inline__btn--send"
     >
       send
     </button>
   {/if}
 </div>
+
+<style>
+  .chat-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .chat-inline__input {
+    flex: 1 1 0%;
+    min-width: 0;
+    height: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-border2, var(--color-border, #2a2a2a));
+    background: var(--color-surface2, var(--color-surface, #1a1a1a));
+    color: var(--color-text1, #f5f5f5);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+  }
+
+  .chat-inline__input::placeholder {
+    color: var(--color-text2, #888);
+    opacity: 0.4;
+  }
+
+  .chat-inline__input:focus {
+    border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 50%, transparent);
+  }
+
+  .chat-inline__input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .chat-inline__btn {
+    flex-shrink: 0;
+    height: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 0.6875rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  }
+
+  .chat-inline__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .chat-inline__btn--send {
+    background: color-mix(in srgb, var(--color-accent, #4a9eff) 10%, transparent);
+    color: var(--color-accent, #4a9eff);
+    border-color: color-mix(in srgb, var(--color-accent, #4a9eff) 40%, transparent);
+  }
+
+  .chat-inline__btn--send:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-accent, #4a9eff) 20%, transparent);
+  }
+
+  .chat-inline__btn--stop {
+    background: color-mix(in srgb, var(--color-accent2, #ff6b6b) 10%, transparent);
+    color: var(--color-accent2, #ff6b6b);
+    border-color: color-mix(in srgb, var(--color-accent2, #ff6b6b) 40%, transparent);
+  }
+
+  .chat-inline__btn--stop:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-accent2, #ff6b6b) 20%, transparent);
+  }
+</style>

package/src/widgets/WidgetRenderer.svelte

@@ -68,6 +68,7 @@
   import './rich/gallery.svelte';
   import './rich/carousel.svelte';
   import './rich/chat-input.svelte';
+  import './rich/map.svelte';
   // Notebook (1)
   import './notebook/notebook.svelte';
   // Agent browsers (registered as widgets for widget_display)
@@ -81,7 +82,7 @@
     // Rich
     'stat-card', 'profile', 'json-viewer', 'chart-rich', 'sankey', 'hemicycle',
     'data-table', 'timeline', 'trombinoscope', 'cards', 'grid-data',
-    'js-sandbox', 'log', 'gallery', 'carousel', 'chat-input',
+    'js-sandbox', 'log', 'gallery', 'carousel', 'chat-input', 'map',
     // Notebook
     'notebook',
     // Agent browsers
@@ -169,7 +170,7 @@
     const tag = `auto-${type}`;
     // Instantiate on first mount. `data` setter is reactive via Svelte 5 custom-element.
     const el = document.createElement(tag) as HTMLElement;
-    (el as unknown as { data: unknown }).data = plainData;
+    (el as unknown as { data: unknown }).data = servers ? { ...plainData, webmcpServers: servers } : plainData;
     const onInteract = (ev: Event) => {
       const ce = ev as CustomEvent<{ action?: string; payload?: unknown }>;
       const action = ce.detail?.action ?? 'interact';
@@ -190,7 +191,7 @@
   $effect(() => {
     const next = plainData;
     if (!isNativeCustomElement || !ceElement) return;
-    (ceElement as unknown as { data: unknown }).data = next;
+    (ceElement as unknown as { data: unknown }).data = servers ? { ...next, webmcpServers: servers } : next;
   });
 
   // ── Vanilla renderer container + lifecycle ────────────
@@ -232,7 +233,7 @@
     let cancelled = false;
 
     try {
-      const result = renderer(container, untrack(() => plainData));
+      const result = renderer(container, untrack(() => servers ? { ...plainData, webmcpServers: servers } : plainData));
       if (result && typeof (result as Promise<unknown>).then === 'function') {
         (result as Promise<void | (() => void)>).then(
           (c) => {
@@ -279,7 +280,7 @@
     runCurrentCleanup();
     container.innerHTML = '';
     try {
-      const result = vanillaRenderer(container, data);
+      const result = vanillaRenderer(container, servers ? { ...data, webmcpServers: servers } : data);
       if (result && typeof (result as Promise<unknown>).then === 'function') {
         (result as Promise<void | (() => void)>).then(
           (c) => { currentCleanup = c ?? undefined; },

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

@@ -67,7 +67,16 @@ export function mountLeftPane(
       serversEl.innerHTML = '<div class="nb-lp-empty">No servers connected.</div>';
       return;
     }
+    let lastGroup: 'data' | 'webmcp' | null = null;
     for (const srv of servers) {
+      const group: 'data' | 'webmcp' = srv.kind === 'webmcp' ? 'webmcp' : 'data';
+      if (group !== lastGroup) {
+        const header = document.createElement('div');
+        header.className = 'nb-lp-group-header';
+        header.textContent = group === 'webmcp' ? 'Widgets' : 'Data';
+        serversEl.appendChild(header);
+        lastGroup = group;
+      }
       const section = document.createElement('section');
       section.className = 'nb-lp-srv';
       section.innerHTML = `
@@ -132,6 +141,10 @@ export function mountLeftPane(
     if (!imported.body && recipeBodyCache.has(key)) {
       imported.body = recipeBodyCache.get(key);
     }
+    // Bundled WebMCP servers expose recipe bodies inline — no MCP roundtrip.
+    if (!imported.body && srv.kind === 'webmcp') {
+      imported.body = `> ⚠ Recipe \`${r.name}\` (server \`${srv.name}\`) has no inline body.`;
+    }
     if (!imported.body) {
       try {
         const res: any = await canvas.callTool(srv.name, 'get_recipe', { name: r.name, id: r.name });
@@ -245,6 +258,13 @@ function injectLeftPaneStyles() {
     .nb-lp-title { flex: 1; font-weight: 600; font-size: 12px; }
     .nb-lp-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text2, #666); }
     .nb-lp-servers { overflow-y: auto; padding: 8px 10px 12px; flex: 1; }
+    .nb-lp-group-header {
+      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
+      color: var(--color-text2, #888); padding: 6px 2px 4px;
+      border-bottom: 1px dashed var(--color-border, #e4e4e7);
+      margin-bottom: 6px;
+    }
+    .nb-lp-group-header:not(:first-child) { margin-top: 14px; }
     .nb-lp-srv { margin-bottom: 10px; }
     .nb-lp-srv-head {
       display: flex; align-items: center; gap: 6px;