npm - @webmcp-auto-ui/ui - Versions diffs - 2.5.27 → 2.5.29 - Mend

@webmcp-auto-ui/ui 2.5.27 → 2.5.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/package.json +18 -5
package/src/agent/LLMSelector.svelte +11 -3
package/src/agent/ModelCacheManager.svelte +359 -0
package/src/index.ts +42 -30
package/src/theme/scale.ts +128 -0
package/src/widgets/WidgetRenderer.svelte +144 -107
package/src/widgets/export-widget.ts +28 -1
package/src/widgets/helpers/safe-image.ts +78 -0
package/src/widgets/notebook/.gitkeep +0 -0
package/src/widgets/notebook/chart-renderer.ts +63 -0
package/src/widgets/notebook/executors/.gitkeep +1 -0
package/src/widgets/notebook/executors/index.ts +4 -0
package/src/widgets/notebook/executors/js-worker.ts +269 -0
package/src/widgets/notebook/executors/sql.ts +206 -0
package/src/widgets/notebook/import-modals.ts +560 -0
package/src/widgets/notebook/left-pane.ts +256 -0
package/src/widgets/notebook/notebook.ts +930 -0
package/src/widgets/notebook/prose.ts +615 -0
package/src/widgets/notebook/recipe-browser.ts +350 -0
package/src/widgets/notebook/recipes/notebook.md +124 -0
package/src/widgets/notebook/resource-extractor.ts +162 -0
package/src/widgets/notebook/share-handlers.ts +222 -0
package/src/widgets/notebook/shared.ts +1633 -0
package/src/widgets/rich/cards.ts +181 -0
package/src/widgets/rich/carousel.ts +319 -0
package/src/widgets/rich/chart-rich.ts +386 -0
package/src/widgets/rich/d3.ts +503 -0
package/src/widgets/rich/data-table.ts +342 -0
package/src/widgets/rich/gallery.ts +350 -0
package/src/widgets/rich/grid-data.ts +173 -0
package/src/widgets/rich/hemicycle.ts +313 -0
package/src/widgets/rich/js-sandbox.ts +122 -0
package/src/widgets/rich/json-viewer.ts +202 -0
package/src/widgets/rich/log.ts +143 -0
package/src/widgets/rich/map.ts +218 -0
package/src/widgets/rich/profile.ts +256 -0
package/src/widgets/rich/sankey.ts +257 -0
package/src/widgets/rich/stat-card.ts +125 -0
package/src/widgets/rich/timeline.ts +179 -0
package/src/widgets/rich/trombinoscope.ts +246 -0
package/src/widgets/simple/actions.ts +89 -0
package/src/widgets/simple/alert.ts +100 -0
package/src/widgets/simple/chart.ts +189 -0
package/src/widgets/simple/code.ts +79 -0
package/src/widgets/simple/kv.ts +68 -0
package/src/widgets/simple/list.ts +89 -0
package/src/widgets/simple/stat.ts +58 -0
package/src/widgets/simple/tags.ts +125 -0
package/src/widgets/simple/text.ts +198 -0
package/src/widgets/SafeImage.svelte +0 -76
package/src/widgets/rich/Cards.svelte +0 -39
package/src/widgets/rich/Carousel.svelte +0 -88
package/src/widgets/rich/Chart.svelte +0 -142
package/src/widgets/rich/D3Widget.svelte +0 -378
package/src/widgets/rich/DataTable.svelte +0 -62
package/src/widgets/rich/Gallery.svelte +0 -94
package/src/widgets/rich/GridData.svelte +0 -44
package/src/widgets/rich/Hemicycle.svelte +0 -78
package/src/widgets/rich/JsSandbox.svelte +0 -51
package/src/widgets/rich/JsonViewer.svelte +0 -42
package/src/widgets/rich/LogViewer.svelte +0 -24
package/src/widgets/rich/MapView.svelte +0 -140
package/src/widgets/rich/ProfileCard.svelte +0 -59
package/src/widgets/rich/Sankey.svelte +0 -56
package/src/widgets/rich/StatCard.svelte +0 -35
package/src/widgets/rich/Timeline.svelte +0 -43
package/src/widgets/rich/Trombinoscope.svelte +0 -48
package/src/widgets/simple/ActionsBlock.svelte +0 -15
package/src/widgets/simple/AlertBlock.svelte +0 -11
package/src/widgets/simple/ChartBlock.svelte +0 -21
package/src/widgets/simple/CodeBlock.svelte +0 -11
package/src/widgets/simple/KVBlock.svelte +0 -16
package/src/widgets/simple/ListBlock.svelte +0 -17
package/src/widgets/simple/StatBlock.svelte +0 -14
package/src/widgets/simple/TagsBlock.svelte +0 -15
package/src/widgets/simple/TextBlock.svelte +0 -122

package/src/theme/scale.ts ADDED Viewed

@@ -0,0 +1,128 @@
+/**
+ * UI scale — binary 1× / 1.5× toggle, labeled as "2×" in the UI for affordance.
+ *
+ * Implementation: CSS `zoom` on `<html>`, driven by a custom property set
+ * imperatively. This rescales everything uniformly (fonts, icons, borders,
+ * modals, widgets) while keeping layout reflow (contrary to `transform: scale`).
+ *
+ * Persistence: `localStorage['webmcp-ui-scale']` — "x1" | "x2".
+ */
+export type UIScale = 1 | 1.5;
+export type UIScaleKey = 'x1' | 'x2';
+const STORAGE_KEY = 'webmcp-ui-scale';
+const STYLE_ID = 'webmcp-ui-scale-style';
+function injectStyle(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  // When scaled:
+  //  - zoom the root so everything grows uniformly
+  //  - compensate layouts sized in 100vh/100vw (viewport units stay tied to the
+  //    physical viewport regardless of zoom, so a `h-screen` container rendered
+  //    at 1.5× would overflow by 50%). Force these containers to the logical
+  //    equivalent so they fit after scaling.
+  //  - keep html/body overflow:hidden (matches the unscaled baseline) so
+  //    floating bars with flex-shrink-0 stay pinned to the viewport edge
+  //    instead of drifting mid-screen when the body scrolls.
+  style.textContent = `
+html { zoom: var(--ui-scale, 1); }
+html[data-ui-scale="x2"] {
+  width: calc(100vw / 1.5);
+  height: calc(100vh / 1.5);
+  overflow: hidden;
+}
+html[data-ui-scale="x2"] body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+html[data-ui-scale="x2"] .h-screen,
+html[data-ui-scale="x2"] [class*="h-screen"] {
+  height: calc(100vh / 1.5);
+  max-height: calc(100vh / 1.5);
+}
+html[data-ui-scale="x2"] .w-screen,
+html[data-ui-scale="x2"] [class*="w-screen"] {
+  width: calc(100vw / 1.5);
+  max-width: calc(100vw / 1.5);
+}
+`;
+  document.head.appendChild(style);
+}
+function applyScale(scale: UIScale): void {
+  if (typeof document === 'undefined') return;
+  injectStyle();
+  const root = document.documentElement;
+  root.style.setProperty('--ui-scale', String(scale));
+  root.dataset.uiScale = scale === 1 ? 'x1' : 'x2';
+  try {
+    window.dispatchEvent(new CustomEvent('webmcp:ui-scale-change', { detail: { scale } }));
+  } catch { /* ignore */ }
+  // Canvas-based widgets (cytoscape, d3, vega-embed, leaflet, custom SVG) size
+  // their rendering surface at mount via getBoundingClientRect and don't react
+  // to CSS-only zoom changes. Fire a resize event after the browser has applied
+  // the zoom (next RAF) so those libs redraw against the new container size.
+  // A second tick after ~200ms catches widgets that listen via debounced
+  // ResizeObserver + widgets that rebuild on a longer cycle.
+  try {
+    requestAnimationFrame(() => {
+      window.dispatchEvent(new Event('resize'));
+      setTimeout(() => window.dispatchEvent(new Event('resize')), 200);
+    });
+  } catch { /* ignore */ }
+}
+function readStored(): UIScale {
+  if (typeof localStorage === 'undefined') return 1;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === 'x2') return 1.5;
+    return 1;
+  } catch { return 1; }
+}
+function writeStored(scale: UIScale): void {
+  if (typeof localStorage === 'undefined') return;
+  try { localStorage.setItem(STORAGE_KEY, scale === 1 ? 'x1' : 'x2'); } catch { /* ignore */ }
+}
+/** Current scale value. Safe to call before init. */
+export function getUIScale(): UIScale {
+  if (typeof document === 'undefined') return readStored();
+  const key = document.documentElement.dataset.uiScale;
+  if (key === 'x2') return 1.5;
+  if (key === 'x1') return 1;
+  return readStored();
+}
+/** True when the UI is currently displayed at 1.5× (label "2×" in the UI). */
+export function isUIScaled(): boolean {
+  return getUIScale() !== 1;
+}
+/** Set the scale explicitly. Persists + applies. */
+export function setUIScale(scale: UIScale): void {
+  writeStored(scale);
+  applyScale(scale);
+}
+/** Toggle between 1× and 1.5×. Returns the new scale. */
+export function toggleUIScale(): UIScale {
+  const next: UIScale = getUIScale() === 1 ? 1.5 : 1;
+  setUIScale(next);
+  return next;
+}
+/**
+ * Read persisted scale and apply it. Call once at app boot (e.g. in a root
+ * +layout onMount) to restore the user's preference before first paint.
+ * Safe to call multiple times.
+ */
+export function initUIScale(): void {
+  applyScale(readStored());
+}

package/src/widgets/WidgetRenderer.svelte CHANGED Viewed

@@ -1,96 +1,95 @@
 <script lang="ts">
-  import { type Component, onMount, onDestroy } from 'svelte';
+  import { type Component, onMount, onDestroy, untrack } from 'svelte';
   import type { WebMcpServer } from '@webmcp-auto-ui/core';
   import { bus } from '../messaging/bus.svelte.js';
-  // Simple widgets
-  import StatBlock from './simple/StatBlock.svelte';
-  import KVBlock from './simple/KVBlock.svelte';
-  import ListBlock from './simple/ListBlock.svelte';
-  import ChartBlock from './simple/ChartBlock.svelte';
-  import AlertBlock from './simple/AlertBlock.svelte';
-  import CodeBlock from './simple/CodeBlock.svelte';
-  import TextBlock from './simple/TextBlock.svelte';
-  import ActionsBlock from './simple/ActionsBlock.svelte';
-  import TagsBlock from './simple/TagsBlock.svelte';
-  // Rich widgets
-  import StatCard from './rich/StatCard.svelte';
-  import DataTable from './rich/DataTable.svelte';
-  import Timeline from './rich/Timeline.svelte';
-  import ProfileCard from './rich/ProfileCard.svelte';
-  import Trombinoscope from './rich/Trombinoscope.svelte';
-  import JsonViewer from './rich/JsonViewer.svelte';
-  import Hemicycle from './rich/Hemicycle.svelte';
-  import Chart from './rich/Chart.svelte';
-  import Cards from './rich/Cards.svelte';
-  import GridData from './rich/GridData.svelte';
-  import Sankey from './rich/Sankey.svelte';
-  import MapView from './rich/MapView.svelte';
-  import D3Widget from './rich/D3Widget.svelte';
-  import JsSandbox from './rich/JsSandbox.svelte';
-  import LogViewer from './rich/LogViewer.svelte';
-  import Gallery from './rich/Gallery.svelte';
-  import Carousel from './rich/Carousel.svelte';
-  type Emit = (action: string, payload: unknown) => void;
-  /** Native widget entry: component + prop builder */
-  type NativeEntry = {
-    component: Component<any>;
-    props: (data: Record<string, unknown>, emit: Emit) => Record<string, unknown>;
-  };
-  /** Simple helper: passes { data } */
-  const d = (c: Component<any>): NativeEntry => ({
-    component: c,
-    props: (data) => ({ data }),
-  });
+  // Monotonic counter for busId generation — avoids collisions on sub-ms remounts.
+  let busIdCounter = 0;
+  function makeBusId(widgetType: string): string {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+      return `block_${widgetType}_${crypto.randomUUID()}`;
+    }
+    return `block_${widgetType}_${Date.now()}-${++busIdCounter}`;
+  }
-  /** Spec helper: passes { spec } */
-  const s = (c: Component<any>): NativeEntry => ({
-    component: c,
-    props: (data) => ({ spec: data }),
-  });
+  // Safe clone for data passed to vanilla renderers — strips Svelte 5 $state
+  // proxies without crashing on BigInt / circular refs / undefined values.
+  function safeClone<T>(value: T): T {
+    if (value === null || typeof value !== 'object') return value;
+    try {
+      return structuredClone(value);
+    } catch (err) {
+      console.warn('[WidgetRenderer] structuredClone failed, falling back to shallow copy', err);
+      return { ...(value as Record<string, unknown>) } as T;
+    }
+  }
-  /** Spec + events helper */
-  const se = (
-    c: Component<any>,
-    events: (emit: Emit) => Record<string, unknown>,
-  ): NativeEntry => ({
-    component: c,
-    props: (data, emit) => ({ spec: data, ...events(emit) }),
-  });
+  // ── Native vanilla renderers ─────────────────────────────────────────────
+  // Simple widgets
+  import { render as renderStat }    from './simple/stat.js';
+  import { render as renderKv }      from './simple/kv.js';
+  import { render as renderList }    from './simple/list.js';
+  import { render as renderChart }   from './simple/chart.js';
+  import { render as renderAlert }   from './simple/alert.js';
+  import { render as renderCode }    from './simple/code.js';
+  import { render as renderText }    from './simple/text.js';
+  import { render as renderActions } from './simple/actions.js';
+  import { render as renderTags }    from './simple/tags.js';
+  // Rich widgets
+  import { render as renderStatCard }      from './rich/stat-card.js';
+  import { render as renderProfile }       from './rich/profile.js';
+  import { render as renderJsonViewer }    from './rich/json-viewer.js';
+  import { render as renderChartRich }     from './rich/chart-rich.js';
+  import { render as renderSankey }        from './rich/sankey.js';
+  import { render as renderHemicycle }     from './rich/hemicycle.js';
+  import { render as renderDataTable }     from './rich/data-table.js';
+  import { render as renderTimeline }      from './rich/timeline.js';
+  import { render as renderTrombinoscope } from './rich/trombinoscope.js';
+  import { render as renderCards }         from './rich/cards.js';
+  import { render as renderGridData }      from './rich/grid-data.js';
+  import { render as renderMap }           from './rich/map.js';
+  import { render as renderD3 }            from './rich/d3.js';
+  import { render as renderJsSandbox }    from './rich/js-sandbox.js';
+  import { render as renderLog }           from './rich/log.js';
+  import { render as renderGallery }       from './rich/gallery.js';
+  import { render as renderCarousel }      from './rich/carousel.js';
+  /** A vanilla renderer: returns cleanup or Promise thereof. */
+  type VanillaRenderer = (
+    container: HTMLElement,
+    data: Record<string, unknown>,
+  ) => void | (() => void) | Promise<void | (() => void)>;
-  /** Static map of all native widget types → component + props */
-  const NATIVE_MAP: Record<string, NativeEntry> = {
-    // Simple widgets (data prop)
-    'stat':           d(StatBlock),
-    'kv':             d(KVBlock),
-    'list':           { component: ListBlock, props: (data, emit) => ({ data, onitemclick: (item: unknown, index: unknown) => emit('itemclick', { item, index }) }) },
-    'chart':          d(ChartBlock),
-    'alert':          d(AlertBlock),
-    'code':           d(CodeBlock),
-    'text':           d(TextBlock),
-    'actions':        d(ActionsBlock),
-    'tags':           d(TagsBlock),
-    // Rich widgets (spec prop)
-    'stat-card':      s(StatCard),
-    'profile':        s(ProfileCard),
-    'json-viewer':    s(JsonViewer),
-    'chart-rich':     s(Chart),
-    'sankey':         s(Sankey),
-    'map':            s(MapView),
-    'd3':             s(D3Widget),
-    'js-sandbox':     s(JsSandbox),
-    'log':            s(LogViewer),
-    // Rich widgets (spec prop + event callbacks)
-    'data-table':     se(DataTable,     (emit) => ({ onrowclick: (row: unknown) => emit('rowclick', row) })),
-    'timeline':       se(Timeline,      (emit) => ({ oneventclick: (e: unknown) => emit('eventclick', e) })),
-    'trombinoscope':  se(Trombinoscope, (emit) => ({ onpersonclick: (p: unknown) => emit('personclick', p) })),
-    'hemicycle':      se(Hemicycle,     (emit) => ({ ongroupclick: (g: unknown) => emit('groupclick', g) })),
-    'cards':          se(Cards,         (emit) => ({ oncardclick: (c: unknown) => emit('cardclick', c) })),
-    'grid-data':      se(GridData,      (emit) => ({ oncellclick: (r: unknown, c: unknown, v: unknown) => emit('cellclick', { row: r, col: c, value: v }) })),
-    'gallery':        se(Gallery,       (emit) => ({ onimageclick: (img: unknown, i: unknown) => emit('imageclick', { image: img, index: i }) })),
-    'carousel':       se(Carousel,      (emit) => ({ onslidechange: (slide: unknown, i: unknown) => emit('slidechange', { slide, index: i }) })),
+  /** Static map of all native widget types → vanilla renderer */
+  const NATIVE_VANILLA_MAP: Record<string, VanillaRenderer> = {
+    // Simple
+    'stat':           renderStat,
+    'kv':             renderKv,
+    'list':           renderList,
+    'chart':          renderChart,
+    'alert':          renderAlert,
+    'code':           renderCode,
+    'text':           renderText,
+    'actions':        renderActions,
+    'tags':           renderTags,
+    // Rich
+    'stat-card':      renderStatCard,
+    'profile':        renderProfile,
+    'json-viewer':    renderJsonViewer,
+    'chart-rich':     renderChartRich,
+    'sankey':         renderSankey,
+    'hemicycle':      renderHemicycle,
+    'data-table':     renderDataTable,
+    'timeline':       renderTimeline,
+    'trombinoscope':  renderTrombinoscope,
+    'cards':          renderCards,
+    'grid-data':      renderGridData,
+    'map':            renderMap,
+    'd3':             renderD3 as unknown as VanillaRenderer,
+    'js-sandbox':     renderJsSandbox as unknown as VanillaRenderer,
+    'log':            renderLog,
+    'gallery':        renderGallery,
+    'carousel':       renderCarousel,
   };
   interface Props {
@@ -103,7 +102,7 @@
   let { id, type, data, servers, oninteract }: Props = $props();
   // Auto-register on the FONC message bus
-  const busId = id ?? `block_${type}_${Date.now().toString(36)}`;
+  const busId = id ?? makeBusId(type);
   const unregisterBus = bus.register(busId, type, ['data-update', 'interact', '*'], (msg) => {
     if (msg.channel === 'data-update' && msg.payload && typeof msg.payload === 'object') {
       oninteract?.(type, 'bus-update', msg.payload);
@@ -116,7 +115,7 @@
     bus.broadcast(busId, 'interact', { type, action, payload });
   }
-  // ── Renderer resolution: servers > native > fallback ────────────
+  // ── Renderer resolution: servers > native vanilla > fallback ────────────
   // Look up a custom widget entry from connected WebMCP servers
   const customWidgetEntry = $derived.by(() => {
@@ -129,36 +128,52 @@
   });
   const customRenderer = $derived(customWidgetEntry?.renderer ?? null);
+  const isCustomVanilla = $derived(customWidgetEntry?.vanilla === true);
+  const nativeVanillaRenderer = $derived<VanillaRenderer | undefined>(
+    customRenderer ? undefined : NATIVE_VANILLA_MAP[type],
+  );
-  /** True when the custom renderer is a vanilla function (not a Svelte component) */
-  const isVanillaRenderer = $derived(customWidgetEntry?.vanilla === true);
+  /** True when a vanilla renderer (custom or native) should be used */
+  const useVanilla = $derived(isCustomVanilla || !!nativeVanillaRenderer);
-  const nativeEntry: NativeEntry | undefined = $derived(
-    customRenderer ? undefined : NATIVE_MAP[type],
+  /** The effective vanilla renderer to invoke */
+  const vanillaRenderer = $derived<VanillaRenderer | null>(
+    isCustomVanilla
+      ? (customRenderer as VanillaRenderer)
+      : (nativeVanillaRenderer ?? null),
   );
-  // Deep-clone data to strip Svelte 5 $state proxies — only needed for vanilla
-  // renderers whose third-party libs (Cytoscape, Plotly, etc.) use
-  // Object.defineProperty which conflicts with Svelte 5 proxies.
-  // Native Svelte components handle proxied data fine and benefit from
-  // fine-grained reactivity, so they receive raw `data` directly.
-  const plainData: Record<string, unknown> = $derived(JSON.parse(JSON.stringify(data)));
+  // Deep-clone data to strip Svelte 5 $state proxies — vanilla renderers + third-party
+  // libs (D3, Leaflet, etc.) rely on Object.defineProperty which conflicts with proxies.
+  const plainData: Record<string, unknown> = $derived(safeClone(data) as Record<string, unknown>);
   // ── Vanilla renderer container + lifecycle ────────────
   let vanillaContainer: HTMLElement | undefined = $state(undefined);
+  // Mount effect — re-runs only when the widget identity changes (type /
+  // renderer / container). Data changes are handled separately to avoid a
+  // flickering full remount on every agent update.
   $effect(() => {
-    if (!isVanillaRenderer || !vanillaContainer) return;
-    // Clear previous content
-    vanillaContainer.innerHTML = '';
+    // Touch only the mount deps; `plainData` is intentionally read via untrack
+    // so data updates don't retrigger this effect.
+    if (!useVanilla || !vanillaRenderer || !vanillaContainer) return;
+    const container = vanillaContainer;
+    const renderer = vanillaRenderer;
+    container.innerHTML = '';
+    const onInteract = (ev: Event) => {
+      const ce = ev as CustomEvent<{ action?: string; payload?: unknown }>;
+      const action = ce.detail?.action ?? 'interact';
+      emit(action, ce.detail?.payload);
+    };
+    container.addEventListener('widget:interact', onInteract);
     let cleanup: (() => void) | void;
     let cancelled = false;
     try {
-      const result = (customRenderer as (container: HTMLElement, data: Record<string, unknown>) => void | (() => void) | Promise<void | (() => void)>)(
-        vanillaContainer, plainData,
-      );
+      const result = renderer(container, untrack(() => plainData));
       if (result && typeof (result as Promise<unknown>).then === 'function') {
         (result as Promise<void | (() => void)>).then(
           (c) => { if (!cancelled) cleanup = c ?? undefined; },
@@ -172,12 +187,36 @@
     return () => {
       cancelled = true;
+      container.removeEventListener('widget:interact', onInteract);
       if (typeof cleanup === 'function') {
         try { cleanup(); } catch (err) { console.error('[WidgetRenderer] cleanup failed:', err); }
       }
     };
   });
+  // Data-update effect — only triggers when plainData changes. Renderers that
+  // support in-place updates should listen for `widget:data-update` and call
+  // preventDefault() on the event; doing so signals they've handled the new
+  // data themselves so we don't need to remount. Renderers that don't listen
+  // fall back to a full remount here (innerHTML cleared + mount effect re-run).
+  let firstDataCycle = true;
+  $effect(() => {
+    const data = plainData;
+    if (!vanillaContainer || !useVanilla) return;
+    if (firstDataCycle) { firstDataCycle = false; return; }
+    const ev = new CustomEvent('widget:data-update', { detail: data, cancelable: true });
+    const handled = !vanillaContainer.dispatchEvent(ev);
+    if (handled || !vanillaRenderer) return;
+    // Not handled — fall back to remount by clearing + calling renderer again.
+    const container = vanillaContainer;
+    container.innerHTML = '';
+    try {
+      vanillaRenderer(container, data);
+    } catch (err) {
+      console.error('[WidgetRenderer] fallback remount failed:', err);
+    }
+  });
   // ── Auto-register WebMCP tools when modelContext is available ────────────
   type ModelContext = {
     registerTool: (t: unknown) => void;
@@ -238,12 +277,10 @@
   });
 </script>
-{#if isVanillaRenderer}
+{#if useVanilla}
   <div bind:this={vanillaContainer} class="vanilla-container w-full h-full overflow-auto p-2"></div>
 {:else if customRenderer}
   <svelte:component this={customRenderer as Component<any>} {data} {id} />
-{:else if nativeEntry}
-  <svelte:component this={nativeEntry.component} {...nativeEntry.props(data, emit)} />
 {:else}
   <div class="p-3 font-mono text-xs text-text2">[{type}]</div>
 {/if}

package/src/widgets/export-widget.ts CHANGED Viewed

@@ -5,7 +5,15 @@
 import { toPng } from 'html-to-image';
-const TARGET_PNG_WIDTH = 2048;
+const TARGET_PNG_WIDTH = 4096;
+export type WidgetExportHook = (scale: number) => Promise<Blob>;
+declare global {
+  interface HTMLElement {
+    __exportPng?: WidgetExportHook;
+  }
+}
 // ── helpers ──────────────────────────────────────────────────────────────────
@@ -95,6 +103,25 @@ async function exportPng(type: string, containerEl: HTMLElement): Promise<void>
   const scrollH = Math.max(containerEl.scrollHeight, containerEl.clientHeight, 1);
   const pixelRatio = TARGET_PNG_WIDTH / scrollW;
+  // Canvas-based widgets (cytoscape, etc.) expose a native exporter via __exportPng.
+  // html-to-image would only recapture the already-rasterised on-screen pixels,
+  // so we route to the widget's own resolution-independent exporter when available.
+  if (typeof containerEl.__exportPng === 'function') {
+    const scale = Math.max(2, Math.ceil(TARGET_PNG_WIDTH / scrollW));
+    try {
+      const blob = await containerEl.__exportPng(scale);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+      return;
+    } catch (err) {
+      console.error('[exportWidget] native __exportPng failed, falling back to html-to-image', err);
+    }
+  }
   const bg = (typeof document !== 'undefined'
     ? getComputedStyle(document.documentElement).getPropertyValue('--color-surface').trim()
     : '') || '#ffffff';

package/src/widgets/helpers/safe-image.ts ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * SafeImage (vanilla) — URL validation, error fallback, placeholder rendering.
+ * Replaces SafeImage.svelte. Used by Profile/Cards/Carousel/Gallery/Trombinoscope renderers.
+ */
+export interface SafeImageOptions {
+  src: string | undefined | null;
+  alt?: string;
+  className?: string;
+  style?: string;
+  loading?: 'lazy' | 'eager';
+  fallbackText?: string;
+  hideOnError?: boolean;
+}
+const VALID_PREFIXES = ['http://', 'https://', 'data:', '/'];
+function isValidSrc(src: unknown): src is string {
+  return typeof src === 'string' && src.length > 0 && VALID_PREFIXES.some((p) => (src as string).startsWith(p));
+}
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]!));
+}
+function buildPlaceholder(label: string, opts: SafeImageOptions): HTMLElement {
+  const div = document.createElement('div');
+  div.className = `flex items-center justify-center bg-surface2 text-text2 text-xs ${opts.className ?? ''}`.trim();
+  if (opts.style) div.setAttribute('style', opts.style);
+  div.setAttribute('role', 'img');
+  div.setAttribute('aria-label', label);
+  div.innerHTML =
+    '<svg class="w-5 h-5 opacity-40 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">' +
+    '<rect x="3" y="3" width="18" height="18" rx="2"/>' +
+    '<circle cx="8.5" cy="8.5" r="1.5"/>' +
+    '<path d="M21 15l-5-5L5 21"/></svg>' +
+    `<span class="truncate max-w-[80%]">${escapeHtml(label)}</span>`;
+  return div;
+}
+function buildHidden(): HTMLElement {
+  const el = document.createElement('div');
+  el.style.display = 'none';
+  el.setAttribute('aria-hidden', 'true');
+  return el;
+}
+/**
+ * Returns an HTMLElement for the given image source.
+ * - Invalid/missing URL → placeholder (or hidden element if hideOnError).
+ * - Valid URL → <img> that self-replaces with placeholder on load error.
+ */
+export function createSafeImage(opts: SafeImageOptions): HTMLElement {
+  const label = opts.fallbackText ?? opts.alt ?? 'Image';
+  if (!isValidSrc(opts.src)) {
+    return opts.hideOnError ? buildHidden() : buildPlaceholder(label, opts);
+  }
+  const img = document.createElement('img');
+  img.src = opts.src;
+  img.alt = opts.alt ?? '';
+  if (opts.className) img.className = opts.className;
+  if (opts.style) img.setAttribute('style', opts.style);
+  img.loading = opts.loading ?? 'lazy';
+  img.referrerPolicy = 'no-referrer';
+  img.addEventListener(
+    'error',
+    () => {
+      const replacement = opts.hideOnError ? buildHidden() : buildPlaceholder(label, opts);
+      img.replaceWith(replacement);
+    },
+    { once: true },
+  );
+  return img;
+}

package/src/widgets/notebook/.gitkeep ADDED Viewed

File without changes

package/src/widgets/notebook/chart-renderer.ts ADDED Viewed

@@ -0,0 +1,63 @@
+// ---------------------------------------------------------------------------
+// Chart renderer — Vega-Lite via lazy dynamic import of vega-embed.
+//
+// Design notes:
+//  - vega-embed is imported dynamically so it does not bloat the initial
+//    bundle. The first chart render pays a one-time cost; subsequent charts
+//    share the cached module.
+//  - On failure (missing dep, invalid spec, CSP denies eval, etc.) we fall
+//    back to a readable <pre>JSON</pre> preview of the spec so the user
+//    still sees *something* rather than an empty panel.
+//  - vega-embed is declared as an optional peer dependency in package.json;
+//    apps that want interactive charts install it, others degrade gracefully.
+// ---------------------------------------------------------------------------
+export interface ChartRenderer {
+  mount(container: HTMLElement, spec: unknown): void | Promise<void>;
+  destroy(): void;
+}
+let cachedEmbed: Promise<any> | null = null;
+function loadEmbed(): Promise<any> {
+  if (!cachedEmbed) {
+    // @ts-ignore — vega-embed is an optional peer dep; resolved at runtime
+    cachedEmbed = import('vega-embed').then((m: any) => m?.default ?? m);
+  }
+  return cachedEmbed;
+}
+function escapeHtml(s: string): string {
+  return String(s ?? '').replace(/[&<>"']/g, (c) =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]!));
+}
+function renderFallback(container: HTMLElement, spec: unknown, reason?: string): void {
+  let preview: string;
+  try { preview = JSON.stringify(spec, null, 2); } catch { preview = String(spec); }
+  const note = reason ? `<div class="nb-chart-fallback-note">${escapeHtml(reason)}</div>` : '';
+  container.innerHTML = `${note}<pre class="nb-chart-fallback">${escapeHtml(preview)}</pre>`;
+}
+/**
+ * Render a Vega / Vega-Lite spec into the given container. Resolves once the
+ * chart is mounted (or falls back to a JSON preview on error). Never throws.
+ */
+export async function renderChart(container: HTMLElement, spec: unknown): Promise<void> {
+  if (!container) return;
+  if (!spec || typeof spec !== 'object') {
+    renderFallback(container, spec, 'Invalid chart spec');
+    return;
+  }
+  try {
+    const embed = await loadEmbed();
+    if (typeof embed !== 'function') {
+      renderFallback(container, spec, 'vega-embed unavailable');
+      return;
+    }
+    container.innerHTML = '';
+    await embed(container, spec as any, { actions: false, renderer: 'canvas' });
+  } catch (err: any) {
+    renderFallback(container, spec, `chart render failed: ${String(err?.message ?? err)}`);
+  }
+}

package/src/widgets/notebook/executors/.gitkeep ADDED Viewed

	@@ -0,0 +1 @@
1	+ for Agent F (sql.ts, js-worker.ts, worker-runtime.ts)

package/src/widgets/notebook/executors/index.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { createSqlExecutor } from './sql.js';
+export type { SqlExecutorOptions } from './sql.js';
+export { createJsExecutor } from './js-worker.js';
+export type { JsExecutorOptions } from './js-worker.js';