@webmcp-auto-ui/ui 2.5.27 → 2.5.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmcp-auto-ui/ui",
-  "version": "2.5.27",
+  "version": "2.5.29",
   "description": "Svelte 5 UI components — primitives, widgets, window manager",
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -15,7 +15,12 @@
     "./canvas": {
       "svelte": "./src/stores/canvas.svelte.ts",
       "import": "./src/stores/canvas.svelte.ts"
-    }
+    },
+    "./widgets/notebook/*": {
+      "svelte": "./src/widgets/notebook/*",
+      "import": "./src/widgets/notebook/*"
+    },
+    "./widgets/notebook/recipes/*": "./src/widgets/notebook/recipes/*"
   },
   "scripts": {
     "build": "svelte-package -i src",
@@ -25,7 +30,13 @@
   "peerDependencies": {
     "d3": "^7.9.0",
     "leaflet": ">=1.9.0",
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "vega-embed": "^6.24.0"
+  },
+  "peerDependenciesMeta": {
+    "vega-embed": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
@@ -46,14 +57,16 @@
     "auto-ui"
   ],
   "dependencies": {
-    "@webmcp-auto-ui/sdk": "*",
     "@types/d3": "^7.4.3",
+    "@webmcp-auto-ui/core": "*",
+    "@webmcp-auto-ui/sdk": "*",
     "bits-ui": "^2.17.2",
     "clsx": "^2.1.1",
     "highlight.js": "^11.10.0",
     "html-to-image": "^1.11.13",
     "marked": "^14.1.3",
     "tailwind-merge": "^3.5.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.2.2",
+    "turndown": "^7.2.4"
   }
 }

package/src/agent/LLMSelector.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { listTransformersModels } from '@webmcp-auto-ui/agent';
+  import { listTransformersModels, listHawkModels } from '@webmcp-auto-ui/agent';
 
   export interface ModelOption {
     value: string;
     label: string;
-    group: 'remote' | 'wasm' | 'transformers' | 'local';
+    group: 'remote' | 'wasm' | 'transformers' | 'local' | 'hawk';
   }
 
   const transformersOptions: ModelOption[] = listTransformersModels().map(({ id, entry }) => ({
@@ -13,15 +13,23 @@
     group: 'transformers' as const,
   }));
 
+  const hawkOptions: ModelOption[] = listHawkModels().map(m => ({
+    value: `hawk-${m.id}`,
+    label: m.label,
+    group: 'hawk' as const,
+  }));
+
   const DEFAULT_MODELS: ModelOption[] = [
     { value: 'haiku',     label: 'claude-haiku-4-5',      group: 'remote' },
     { value: 'gemma-e2b', label: 'Gemma E2B (MediaPipe)', group: 'wasm'   },
     { value: 'gemma-e4b', label: 'Gemma E4B (MediaPipe)', group: 'wasm'   },
     ...transformersOptions,
+    ...hawkOptions,
   ];
 
   const GROUP_LABELS: Record<string, string> = {
     remote:       'Remote',
+    hawk:         'Remote (Hawk)',
     wasm:         'In-Browser (MediaPipe)',
     transformers: 'In-Browser (Transformers.js)',
     local:        'Local',
@@ -36,7 +44,7 @@
   let { value, onchange, models = DEFAULT_MODELS, class: cls = '' }: Props = $props();
 
   const groups = $derived(
-    ['remote', 'wasm', 'transformers', 'local'].filter(g => models.some(m => m.group === g))
+    ['remote', 'hawk', 'wasm', 'transformers', 'local'].filter(g => models.some(m => m.group === g))
   );
 </script>
 

package/src/agent/ModelCacheManager.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+  import {
+    listCachedModels, clearModelCache, clearAllModelCaches, type CachedModelInfo,
+    listAllStorage, deleteStorageEntry, clearAllStorage, type StorageEntry,
+  } from '@webmcp-auto-ui/agent';
+
+  interface Props {
+    class?: string;
+  }
+  let { class: cls = '' }: Props = $props();
+
+  let models = $state<CachedModelInfo[]>([]);
+  let storage = $state<StorageEntry[]>([]);
+  let usage = $state<number | null>(null);
+  let quota = $state<number | null>(null);
+  let loading = $state(true);
+  let supported = $state(true);
+  let busy = $state<string | null>(null);
+  let collapsed = $state(true);
+
+  let opfsCollapsed = $state(false);
+  let cacheCollapsed = $state(true);
+  let idbCollapsed = $state(true);
+
+  const totalSize = $derived(models.reduce((s, m) => s + m.size, 0));
+  const usagePct = $derived(quota && quota > 0 && usage !== null ? Math.min(100, (usage / quota) * 100) : 0);
+
+  const opfsExtras = $derived(storage.filter((e) => e.source === 'opfs'));
+  const cacheEntries = $derived(storage.filter((e) => e.source === 'cache-storage'));
+  const idbEntries = $derived(storage.filter((e) => e.source === 'indexeddb'));
+
+  const cacheTotalSize = $derived(cacheEntries.reduce((s, e) => s + e.size, 0));
+  const opfsExtrasTotalSize = $derived(opfsExtras.reduce((s, e) => s + e.size, 0));
+
+  function formatBytes(n: number): string {
+    if (!Number.isFinite(n) || n <= 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let v = n;
+    let i = 0;
+    while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
+    return `${v.toFixed(v >= 100 || i === 0 ? 0 : v >= 10 ? 1 : 2)} ${units[i]}`;
+  }
+
+  function formatDate(ms: number): string {
+    if (!ms) return '—';
+    const d = new Date(ms);
+    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  }
+
+  function formatSize(e: StorageEntry): string {
+    if (!e.sizeKnown) return 'taille inconnue';
+    return formatBytes(e.size);
+  }
+
+  async function refresh() {
+    loading = true;
+    try {
+      if (typeof navigator === 'undefined' || !navigator.storage?.getDirectory) {
+        supported = false;
+        return;
+      }
+      supported = true;
+      const [ms, sto] = await Promise.all([listCachedModels(), listAllStorage()]);
+      models = ms;
+      storage = sto;
+      try {
+        const est = await navigator.storage.estimate();
+        usage = est.usage ?? null;
+        quota = est.quota ?? null;
+      } catch {
+        usage = null;
+        quota = null;
+      }
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function deleteOne(repo: string) {
+    if (!confirm(`Supprimer le cache "${repo}" ?`)) return;
+    busy = `opfs:${repo}`;
+    try {
+      await clearModelCache(repo);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteAll() {
+    if (!confirm(`Supprimer TOUS les modèles en cache (${models.length} repo·s, ${formatBytes(totalSize)}) ?`)) return;
+    busy = '__opfs_all__';
+    try {
+      await clearAllModelCaches();
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteEntry(e: StorageEntry) {
+    const label = `${e.source} · ${e.key}`;
+    if (!confirm(`Supprimer ${label} ?`)) return;
+    busy = `${e.source}:${e.key}`;
+    try {
+      await deleteStorageEntry(e);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function deleteSource(source: 'opfs' | 'cache-storage' | 'indexeddb', count: number) {
+    if (!confirm(`Supprimer TOUT le ${source} (${count} entrée·s) ?`)) return;
+    busy = `__${source}_all__`;
+    try {
+      await clearAllStorage(source);
+      await refresh();
+    } finally {
+      busy = null;
+    }
+  }
+
+  $effect(() => { refresh(); });
+</script>
+
+<div class="flex flex-col gap-2 {cls}">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="flex items-center gap-1 cursor-pointer select-none"
+       onclick={() => collapsed = !collapsed}>
+    <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Model cache (OPFS)</span>
+    <span class="text-[9px] text-text2/60 font-mono">
+      {#if !supported}(n/a){:else if loading}(…){:else}({models.length} · {formatBytes(totalSize)}){/if}
+    </span>
+    <span class="text-[10px] text-text2 ml-auto transition-transform {collapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+  </div>
+
+  {#if !collapsed}
+    <div class="text-[9px] font-mono text-text2/50 -mt-1">OPFS + Cache Storage + IndexedDB</div>
+
+    {#if !supported}
+      <div class="text-[10px] font-mono text-text2/60 p-2 border border-border2 rounded">
+        OPFS indisponible dans ce navigateur.
+      </div>
+    {:else if loading}
+      <div class="text-[10px] font-mono text-text2/60">Lecture du cache…</div>
+    {:else}
+      {#if quota !== null && usage !== null}
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center justify-between font-mono text-[10px] text-text2">
+            <span>{formatBytes(usage)} / {formatBytes(quota)}</span>
+            <span class="text-text2/60">origine entière · {usagePct.toFixed(1)}%</span>
+          </div>
+          <div class="h-1 bg-surface2 rounded overflow-hidden">
+            <div class="h-full bg-teal transition-all" style="width: {usagePct}%"></div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- ── LLM models (OPFS webmcp-models) ───────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => opfsCollapsed = !opfsCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">LLM models (OPFS)</span>
+          <span class="text-[9px] text-text2/60 font-mono">({models.length} · {formatBytes(totalSize)})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {opfsCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !opfsCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Modèles : <span class="text-text1">{models.length}</span> · {formatBytes(totalSize)}
+            </span>
+            {#if models.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={deleteAll}
+              >
+                {busy === '__opfs_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if models.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucun modèle en cache.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each models as m (m.repo)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate" title={m.repo}>{m.repo}</span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatBytes(m.size)} · {m.fileCount} fichier{m.fileCount > 1 ? 's' : ''} · {formatDate(m.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteOne(m.repo)}
+                    title="Supprimer ce cache"
+                  >
+                    {busy === `opfs:${m.repo}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+
+          {#if opfsExtras.length > 0}
+            <div class="text-[9px] font-mono text-text2/50 mt-1">Autres OPFS : {opfsExtras.length} · {formatBytes(opfsExtrasTotalSize)}</div>
+            <ul class="flex flex-col gap-1">
+              {#each opfsExtras as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatSize(e)} · {e.itemCount} fichier{e.itemCount > 1 ? 's' : ''} · {formatDate(e.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer ce répertoire OPFS"
+                  >
+                    {busy === `opfs:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- ── Cache Storage ─────────────────────────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => cacheCollapsed = !cacheCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">Cache Storage</span>
+          <span class="text-[9px] text-text2/60 font-mono">({cacheEntries.length} · {formatBytes(cacheTotalSize)})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {cacheCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !cacheCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Caches : <span class="text-text1">{cacheEntries.length}</span> · {formatBytes(cacheTotalSize)}
+            </span>
+            {#if cacheEntries.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={() => deleteSource('cache-storage', cacheEntries.length)}
+              >
+                {busy === '__cache-storage_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if cacheEntries.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucun cache.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each cacheEntries as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      {formatSize(e)} · {e.itemCount} item{e.itemCount > 1 ? 's' : ''} · {formatDate(e.lastModified)}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer ce cache"
+                  >
+                    {busy === `cache-storage:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+
+      <!-- ── IndexedDB ─────────────────────────────────────────────────── -->
+      <div class="flex flex-col gap-1">
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center gap-1 cursor-pointer select-none"
+             onclick={() => idbCollapsed = !idbCollapsed}>
+          <span class="text-[9px] font-mono text-text2 uppercase tracking-wider">IndexedDB</span>
+          <span class="text-[9px] text-text2/60 font-mono">({idbEntries.length})</span>
+          <span class="text-[10px] text-text2 ml-auto transition-transform {idbCollapsed ? '' : 'rotate-90'}">{@html '&#x25B6;'}</span>
+        </div>
+
+        {#if !idbCollapsed}
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-[10px] text-text2">
+              Bases : <span class="text-text1">{idbEntries.length}</span> · taille inconnue
+            </span>
+            {#if idbEntries.length > 0}
+              <button
+                class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/40 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40"
+                disabled={busy !== null}
+                onclick={() => deleteSource('indexeddb', idbEntries.length)}
+              >
+                {busy === '__indexeddb_all__' ? 'Suppression…' : 'Tout supprimer'}
+              </button>
+            {/if}
+          </div>
+
+          {#if idbEntries.length === 0}
+            <div class="text-[10px] font-mono text-text2/60 p-2 border border-dashed border-border2 rounded text-center">
+              Aucune base IndexedDB.
+            </div>
+          {:else}
+            <ul class="flex flex-col gap-1">
+              {#each idbEntries as e (e.key)}
+                <li class="flex items-center gap-2 p-2 rounded border border-border2 bg-surface2/40">
+                  <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                    <span class="font-mono text-[11px] text-text1 truncate flex items-center gap-1" title={e.key}>
+                      {#if e.modelLike}<span class="text-accent text-[9px]">model</span>{/if}
+                      {e.key}
+                    </span>
+                    <span class="font-mono text-[9px] text-text2/60">
+                      taille inconnue · version {e.itemCount}
+                    </span>
+                  </div>
+                  <button
+                    class="font-mono text-[10px] h-6 px-2 rounded border border-accent2/30 text-accent2 hover:bg-accent2/10 transition-colors disabled:opacity-40 flex-shrink-0"
+                    disabled={busy !== null}
+                    onclick={() => deleteEntry(e)}
+                    title="Supprimer cette base"
+                  >
+                    {busy === `indexeddb:${e.key}` ? '…' : 'Supprimer'}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+  {/if}
+</div>

package/src/index.ts

@@ -5,6 +5,8 @@ export { default as ThemeProvider, getTheme } from './theme/ThemeProvider.svelte
 export type { ThemeJSON } from './theme/ThemeProvider.svelte';
 export { DARK_TOKENS, LIGHT_TOKENS, THEME_MAP } from './theme/tokens.js';
 export type { ThemeMode, ThemeOverrides, ThemeTokens } from './theme/tokens.js';
+export { getUIScale, setUIScale, toggleUIScale, initUIScale, isUIScaled } from './theme/scale.js';
+export type { UIScale, UIScaleKey } from './theme/scale.js';
 
 // Primitives
 export { default as Card } from './primitives/Card.svelte';
@@ -16,38 +18,47 @@ export { default as MarkdownView } from './primitives/MarkdownView.svelte';
 export { default as CodeView } from './primitives/CodeView.svelte';
 export { renderMarkdown, highlightCode, createMarkdownRenderer } from './primitives/markdown-renderer.js';
 
-// Simple widgets (PJ blocks)
-export { default as StatBlock } from './widgets/simple/StatBlock.svelte';
-export { default as KVBlock } from './widgets/simple/KVBlock.svelte';
-export { default as ListBlock } from './widgets/simple/ListBlock.svelte';
-export { default as ChartBlock } from './widgets/simple/ChartBlock.svelte';
-export { default as AlertBlock } from './widgets/simple/AlertBlock.svelte';
-export { default as CodeBlock } from './widgets/simple/CodeBlock.svelte';
-export { default as TextBlock } from './widgets/simple/TextBlock.svelte';
-export { default as ActionsBlock } from './widgets/simple/ActionsBlock.svelte';
-export { default as TagsBlock } from './widgets/simple/TagsBlock.svelte';
+// Simple widgets (vanilla renderers) — contract: render(container, data): () => void
+export { render as renderStat }    from './widgets/simple/stat.js';
+export { render as renderKv }      from './widgets/simple/kv.js';
+export { render as renderList }    from './widgets/simple/list.js';
+export { render as renderChart }   from './widgets/simple/chart.js';
+export { render as renderAlert }   from './widgets/simple/alert.js';
+export { render as renderCode }    from './widgets/simple/code.js';
+export { render as renderText }    from './widgets/simple/text.js';
+export { render as renderActions } from './widgets/simple/actions.js';
+export { render as renderTags }    from './widgets/simple/tags.js';
 
-// Rich widgets (Archive)
-export { default as StatCard } from './widgets/rich/StatCard.svelte';
-export { default as DataTable } from './widgets/rich/DataTable.svelte';
-export { default as Timeline } from './widgets/rich/Timeline.svelte';
-export { default as ProfileCard } from './widgets/rich/ProfileCard.svelte';
-export { default as Trombinoscope } from './widgets/rich/Trombinoscope.svelte';
-export { default as JsonViewer } from './widgets/rich/JsonViewer.svelte';
-export { default as Hemicycle } from './widgets/rich/Hemicycle.svelte';
-export { default as Chart } from './widgets/rich/Chart.svelte';
-export { default as Cards } from './widgets/rich/Cards.svelte';
-export { default as GridData } from './widgets/rich/GridData.svelte';
-export { default as Sankey } from './widgets/rich/Sankey.svelte';
-export { default as MapView } from './widgets/rich/MapView.svelte';
-export { default as D3Widget } from './widgets/rich/D3Widget.svelte';
-export { default as JsSandbox } from './widgets/rich/JsSandbox.svelte';
-export { default as LogViewer } from './widgets/rich/LogViewer.svelte';
-export { default as Gallery } from './widgets/rich/Gallery.svelte';
-export { default as Carousel } from './widgets/rich/Carousel.svelte';
+// Rich widgets (vanilla renderers)
+export { render as renderStatCard }      from './widgets/rich/stat-card.js';
+export { render as renderDataTable }     from './widgets/rich/data-table.js';
+export { render as renderTimeline }      from './widgets/rich/timeline.js';
+export { render as renderProfile }       from './widgets/rich/profile.js';
+export { render as renderTrombinoscope } from './widgets/rich/trombinoscope.js';
+export { render as renderJsonViewer }    from './widgets/rich/json-viewer.js';
+export { render as renderHemicycle }     from './widgets/rich/hemicycle.js';
+export { render as renderChartRich }     from './widgets/rich/chart-rich.js';
+export { render as renderCards }         from './widgets/rich/cards.js';
+export { render as renderGridData }      from './widgets/rich/grid-data.js';
+export { render as renderSankey }        from './widgets/rich/sankey.js';
+export { render as renderMap }           from './widgets/rich/map.js';
+export { render as renderD3 }            from './widgets/rich/d3.js';
+export { render as renderJsSandbox }     from './widgets/rich/js-sandbox.js';
+export { render as renderLog }           from './widgets/rich/log.js';
+export { render as renderGallery }       from './widgets/rich/gallery.js';
+export { render as renderCarousel }      from './widgets/rich/carousel.js';
 
-// Safe image (URL validation + error fallback)
-export { default as SafeImage } from './widgets/SafeImage.svelte';
+// Notebook widget renderer (vanilla)
+export { render as renderNotebook }             from './widgets/notebook/notebook.js';
+export { render as renderRecipeBrowserWidget } from './widgets/notebook/recipe-browser.js';
+// Notebook types (optional public API)
+export type { NotebookState, NotebookCell } from './widgets/notebook/shared.js';
+// Notebook cell extractors (for hosts that build notebooks from recipes/tools)
+export { extractCellsFromRecipe, extractCellsFromTool, extractCellFromMarkdown, extractCellFromFence } from './widgets/notebook/resource-extractor.js';
+
+// Safe image helper (URL validation + error fallback)
+export { createSafeImage } from './widgets/helpers/safe-image.js';
+export type { SafeImageOptions } from './widgets/helpers/safe-image.js';
 
 // Widget export utility
 export { exportWidget, getExportFormats, exportWidgetAs } from './widgets/export-widget.js';
@@ -90,6 +101,7 @@ export { default as ModelLoader } from './agent/ModelLoader.svelte';
 /** @deprecated Use ModelLoader instead. Alias maintained for backward compatibility. */
 export { default as GemmaLoader } from './agent/ModelLoader.svelte';
 export { default as McpStatus } from './agent/McpStatus.svelte';
+export { default as ModelCacheManager } from './agent/ModelCacheManager.svelte';
 export { default as AgentProgress } from './agent/AgentProgress.svelte';
 export { default as McpConnector } from './agent/McpConnector.svelte';
 export { default as ChatPanel } from './agent/ChatPanel.svelte';