@divlet/web 0.0.2 → 0.0.3

package/dist/board.css

@@ -718,6 +718,8 @@ html.w440 .shortcut-group dd { text-align: left; padding-bottom: 5px; white-spac
 .crumbs-bar .crumb { height: 24px; flex: none; max-width: 100%; }
 .crumbs-bar .crumb.home { flex: 0 1 auto; min-width: 0; }
 .crumb.current { background: var(--field); color: var(--ink); }
+/* The next level after a selected artboard: a step you can take, quieter than the current crumb. */
+.crumb.root-entry { color: var(--muted); }
 .ask-more { padding: 0 6px; font: 11px var(--mono); color: var(--muted); }
 .ask-input { width: 100%; min-height: 40px; max-height: 220px; padding: 9px 11px; border: 0; border-radius: var(--radius-inner); background: var(--field); color: var(--ink); font: 13.5px/1.45 var(--font); resize: none; outline: none; }
 .ask-input:focus { outline-offset: 1px; outline: var(--focus-ring) solid var(--accent); }

package/dist/board.js

@@ -1,7 +1,7 @@
 import { $, el, icon, button, clamp, keys, shortcutKey, uiScale } from './lib/util.js';
 import { store, on, emit, documents, descriptor, apiUrl, request, receiveState, setConnection, selectArtboards, selectNodes, undo, redo, toast } from './lib/store.js';
 import * as canvas from './lib/canvas.js';
-import { readSession } from './lib/host.js';
+import { readSession, native } from './lib/host.js';
 import './lib/inspector.js';
 import { loadClientPlugins } from './lib/panels.js';
 import * as layers from './lib/layers.js';
@@ -103,10 +103,12 @@ $('#status').setAttribute('aria-haspopup', 'menu');
 $('#status').addEventListener('click', () => {
   openMenu([
     { heading: String(store.state?.project?.name || 'Project') },
-    { label: 'Open project…', icon: 'folder', keys: keys('Mod+O'), run: () => project.show('open') },
-    { label: 'Save a copy as…', icon: 'download', disabled: !project.canShowCopy(), keys: keys('Mod+Shift+S'), run: () => project.show('save') },
-    '-',
-    { label: 'Copy project folder path', icon: 'copy', run: () => actions.copyText(String(store.state?.projectDir || ''), 'Folder path copied') },
+    // A browser host has no filesystem: opening, copying and folder paths belong to the local host.
+    native && { label: 'Open project…', icon: 'folder', keys: keys('Mod+O'), run: () => project.show('open') },
+    native && { label: 'Save a copy as…', icon: 'download', disabled: !project.canShowCopy(), keys: keys('Mod+Shift+S'), run: () => project.show('save') },
+    native && '-',
+    native && { label: 'Copy project folder path', icon: 'copy', run: () => actions.copyText(String(store.state?.projectDir || ''), 'Folder path copied') },
+    !native && { label: 'Download project file', icon: 'download', run: () => actions.downloadProject() },
   ], { anchor: $('#status'), label: 'Project' });
 });
 $('#empty-new').addEventListener('click', () => actions.newArtboard());
@@ -124,7 +126,7 @@ on('state', state => {
     const doc = descriptor(store.expanded.entry.doc.id);
     if (!doc) canvas.closeExpanded({ reset: false });
     else {
-      $('#expanded-title').textContent = doc.name || doc.id;
+      $('#expanded-title').textContent = store.expanded.title || doc.name || doc.id;
       if (state.site) store.expanded.entry.iframe?.contentWindow.postMessage({ type: 'divlet:site-state', site: { version: state.site.version } }, '*');
     }
   }
@@ -223,8 +225,8 @@ function handleKey(event) {
   if (menuOpen()) { if (key === 'escape') { prevent(); closeMenu(); return true; } return false; }
   if (mod && event.altKey && (key === '=' || key === '+' || key === '-')) { prevent(); help.stepUiSize(key === '-' ? -1 : 1); return true; }
   if (mod && !event.altKey && !event.shiftKey && (key === ',' || event.code === 'Comma')) { prevent(); help.toggle(true); return true; }
-  if (mod && !event.altKey && key === 'o') { prevent(); project.show('open'); return true; }
-  if (mod && event.shiftKey && !event.altKey && key === 's') { prevent(); project.show('save'); return true; }
+  if (native && mod && !event.altKey && key === 'o') { prevent(); project.show('open'); return true; }
+  if (native && mod && event.shiftKey && !event.altKey && key === 's') { prevent(); project.show('save'); return true; }
   if (mod && !event.altKey && key === 'k') { prevent(); palette.toggle(true); return true; }
   // Copy, cut and paste from the board run through the native clipboard events (see clip.js);
   // keys forwarded by a preview frame have no clipboard event, so they act on the board's own copy.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export declare const clientRoot: URL;
 export { createSnapshotReadSession } from './lib/board-session.ts';
 export type { BoardReadSession, BoardReadEvent, BoardSelection, BoardSelectionPublisher, BoardObservation, BoardObservationPublisher } from './lib/board-session.ts';
-export type { BoardHistoryService, BoardSourceUpdates } from './lib/board-host.ts';
+export type { BoardHistoryService, BoardSourceUpdates, BoardWriter, BoardPreviews, BoardComponents, BoardExports, BoardHostComposition } from './lib/board-host.ts';

package/dist/lib/actions.js

@@ -4,6 +4,7 @@ import * as canvas from './canvas.js';
 import { openMenu } from './menu.js';
 import * as clip from './clip.js';
 import { newArtboard, duplicateArtboards, deleteArtboards } from './artboards.js';
+import { components as componentSource, exports as exportSource, native } from './host.js';
 export { newArtboard, duplicateArtboards, deleteArtboards };
 
 /* Command facade for the toolbar, keyboard, context menus, inspector and layers.
@@ -41,22 +42,44 @@ export async function copyHtml(documentId, nodeIds) {
       const model = await modelOf(documentId);
       const ids = nodeIds.filter(id => model.nodes[id]);
       text = clip.htmlOf(model, ids);
-    } else text = (await request(`api/export/${encodeURIComponent(documentId)}`)).html;
+    } else if (exportSource) text = (await exportSource.page(documentId)).html;
+    else throw new Error('This host cannot export HTML.');
     if (!document.hasFocus()) document.querySelector('#viewport')?.focus({ preventScroll: true });
     await navigator.clipboard.writeText(text);
     toast(nodeIds?.length ? 'HTML copied' : `Page HTML copied · ${Math.max(1, Math.round(text.length / 1024))} KB with CSS`);
   } catch (error) { toast(error?.name === 'NotAllowedError' ? 'The clipboard is not available here' : error.message); }
 }
 
+/** Save the browser host's copy of the project as a .divlet file the user can open with the local host. */
+export async function downloadProject() {
+  try {
+    const { text, fileName } = await exportSource.project();
+    const url = URL.createObjectURL(new Blob([text], { type: 'application/json' }));
+    const link = Object.assign(document.createElement('a'), { href: url, download: fileName });
+    document.body.append(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    toast(`Downloading ${fileName} · open it with npx -y @divlet/cli ${fileName}`);
+  } catch (error) { toast(error?.message || 'This host cannot save the project.'); }
+}
+
 /** Save an artboard as a standalone HTML file. */
-export function downloadHtml(documentId) {
+export async function downloadHtml(documentId) {
   const link = document.createElement('a');
-  link.href = apiUrl(`api/export/${encodeURIComponent(documentId)}?download=1`);
+  let blob = null;
+  if (native) link.href = apiUrl(`api/export/${encodeURIComponent(documentId)}?download=1`);
+  else {
+    // A browser host builds the file itself; nothing is requested from a server.
+    try { const page = await exportSource.page(documentId); blob = URL.createObjectURL(new Blob([page.html], { type: 'text/html' })); link.href = blob; }
+    catch (error) { toast(error.message); return; }
+  }
   const fileName = descriptor(documentId)?.htmlPath?.split(/[\\/]/).at(-1) || `${documentId}.html`;
   link.download = fileName;
   document.body.append(link);
   link.click();
   link.remove();
+  if (blob) setTimeout(() => URL.revokeObjectURL(blob), 1000);
   toast(`Downloading ${fileName}`);
 }
 
@@ -338,7 +361,7 @@ export async function selectSibling(step) {
 export async function insertMenu(documentId, position) {
   if (!documentId) { toast('Select an artboard first'); return; }
   let components = [];
-  try { components = (await request('api/components')).components; } catch {}
+  try { if (componentSource) components = (await componentSource.list()).components; } catch {}
   openMenu([
     { heading: store.node?.documentId === documentId ? 'Add after or inside the selection' : `Add to “${nameOf(documentId)}”` },
     ...insertionPresets().map(item => (item === '-' ? '-' : { label: item[2], icon: item[1], run: () => insertElement(documentId, item[0], item[2]) })),

package/dist/lib/artboards.js

@@ -1,5 +1,6 @@
 // Artboard lifecycle commands; selection, reveal, grouping and failure feedback stay with each accepted operation.
-import { descriptor, post, undo, toast, newGroup, selectArtboards, whenDocument, leave } from './store.js';
+import { descriptor, undo, toast, newGroup, selectArtboards, whenDocument, leave } from './store.js';
+import { writer } from './host.js';
 import * as canvas from './canvas.js';
 
 export async function newArtboard({ x, y, width, height, name } = {}) {
@@ -8,7 +9,7 @@ export async function newArtboard({ x, y, width, height, name } = {}) {
   if (name) body.name = name;
   if (Number.isFinite(x) && Number.isFinite(y)) Object.assign(body, { x: Math.round(x), y: Math.round(y) });
   try {
-    const result = await post('api/artboards', body);
+    const result = await writer.createArtboard(body);
     await whenDocument(result.documentId);
     selectArtboards([result.documentId]);
     canvas.reveal(result.documentId);
@@ -21,7 +22,7 @@ export async function duplicateArtboards(ids) {
   const group = newGroup();
   const created = [];
   for (const from of ids) {
-    try { created.push((await post('api/artboards', { from, group, expectedVersion: descriptor(from)?.version, label: ids.length > 1 ? `duplicate ${ids.length} artboards` : 'duplicate artboard' })).documentId); }
+    try { created.push((await writer.createArtboard({ from, group, expectedVersion: descriptor(from)?.version, label: ids.length > 1 ? `duplicate ${ids.length} artboards` : 'duplicate artboard' })).documentId); }
     catch (error) { toast(error.message); }
   }
   if (!created.length) return;
@@ -49,7 +50,7 @@ export async function deleteArtboards(ids) {
   }
   leave(order.map(doc => doc.id));
   for (const doc of order) {
-    try { await post('api/artboards/delete', { documentId: doc.id, group, expectedVersion: doc.version, label: order.length > 1 ? `delete ${order.length} artboards` : `delete “${doc.name}”` }); removed.push(doc); }
+    try { await writer.deleteArtboard({ documentId: doc.id, group, expectedVersion: doc.version, label: order.length > 1 ? `delete ${order.length} artboards` : `delete “${doc.name}”` }); removed.push(doc); }
     catch (error) { leave([doc.id], true); toast(error.message); }
   }
   if (removed.length) toast(removed.length > 1 ? `${removed.length} artboards deleted` : `“${removed[0].name}” deleted`, { label: 'Undo', run: () => undo() });

package/dist/lib/ask.js

@@ -1,6 +1,7 @@
 import { $, el, icon, button, keys } from './util.js';
 import { openMenu } from './menu.js';
 import { store, on, emit, post, toast, descriptor } from './store.js';
+import { native } from './host.js';
 import * as sidebar from './sidebar.js';
 import * as chat from './chat.js';
 
@@ -16,7 +17,10 @@ let draft = '';
 let watchdog = 0;
 let returnFocus = null;
 
-export const available = () => !!store.state?.agent?.connected;
+/** A board request needs a host that relays conversation; agents of a browser host work through its MCP tools only. */
+export const available = () => !!store.state?.agent?.connected && store.state.agent.conversation !== false;
+/** The command an MCP host runs to connect an agent to this page (browser hosts only). */
+const connectCommand = () => `npx -y @divlet/mcp --connect ${new URL('./', location.href).href}`;
 export const isOpen = () => sidebar.isOpen('agent');
 const agent = () => store.state?.agent || {};
 
@@ -162,11 +166,19 @@ function paintStatus() {
   input.disabled = !available();
   // The sidebar can be dragged narrow, so the texts follow its own width (sidebar.js measures it).
   const tight = (document.documentElement.dataset.sidebar ?? 'wide') !== 'wide';
-  input.placeholder = !available() ? (tight ? 'Open from Pi (/divlet)' : 'Open this board from Pi (/divlet) to talk to it')
+  input.placeholder = !native ? (tight ? 'Agents connect over MCP' : 'Agents work on this page through its MCP tools')
+    : !available() ? (tight ? 'Open from Pi (/divlet)' : 'Open this board from Pi (/divlet) to talk to it')
     : tight ? 'Ask the agent…' : 'Ask the agent to change the layout…';
   const keysHint = tight ? [`${keys('Enter')} send`] : [`${keys('Enter')} send`, `${keys('Shift+Enter')} new line`, '↑ previous'];
   // Each key with its meaning is one unit: a narrow composer wraps between units, never inside one.
-  if (!available()) {
+  if (!native) {
+    // A browser host: no conversation relay; offer the command that connects an MCP host to this very page.
+    const copy = button('copy', 'Copy the MCP command that connects an agent to this page', async () => {
+      try { await navigator.clipboard.writeText(connectCommand()); toast('Copied · register it as an MCP server in your agent'); }
+      catch { toast(connectCommand()); }
+    }, 'mini ask-copy');
+    hint.replaceChildren(el('span', '', store.state?.agent?.connected ? 'An agent is working through this page' : 'Connect an agent to this page'), copy);
+  } else if (!available()) {
     // Not connected: say so, and offer the exact command that connects this project in Pi.
     const file = store.state?.project?.file;
     const copy = button('copy', 'Copy the command that opens this project in Pi', async () => {
@@ -193,7 +205,7 @@ function focusInput() {
 
 export function toggle(open = !isOpen(), { text, fromFrame = false } = {}) {
   if (open && !available()) {
-    toast('No agent is connected to this board. Open it from Pi with /divlet, or connect an MCP client (divlet-mcp).');
+    toast(native ? 'No agent is connected to this board. Open it from Pi with /divlet, or connect an MCP client (divlet-mcp).' : `Agents connect to this page over MCP: ${connectCommand()}`);
     return false;
   }
   if (open === isOpen()) { if (open) { if (text !== undefined) { input.value = text; grow(); } input.focus(); } return open; }
@@ -324,7 +336,8 @@ function paintChip() {
   const state = agent();
   if (!state.busy) stopping = false;
   status.hidden = !state.busy;
-  stopButton.hidden = !state.busy;
+  // Only a host that relays the conversation can stop its agent; a browser host's agent is stopped by its own host.
+  stopButton.hidden = !state.busy || !native;
   placeStatus();
   status.classList.toggle('stopping', stopping);
   document.body.classList.toggle('agent-busy', !!state.busy);

package/dist/lib/board-host.d.ts

@@ -12,3 +12,57 @@ export interface BoardSourceUpdates {
     readonly reimport: () => Promise<unknown>;
     readonly openProject: (path: string) => Promise<unknown>;
 }
+/** The board's project writes. Each method takes the request body the native route takes and resolves with its accepted result. */
+export interface BoardWriter {
+    readonly patch: (body: unknown) => Promise<unknown>;
+    readonly edit: (body: unknown) => Promise<unknown>;
+    readonly undo: (body: unknown) => Promise<unknown>;
+    readonly redo: (body: unknown) => Promise<unknown>;
+    readonly createArtboard: (body: unknown) => Promise<unknown>;
+    readonly deleteArtboard: (body: unknown) => Promise<unknown>;
+}
+/** Where frame previews come from: an iframe address carrying the bridge token, and later renders delivered over its channel. */
+export interface BoardPreviews {
+    readonly frameUrl: (id: string, options: {
+        readonly revision?: number;
+        readonly bridge: string;
+    }) => string;
+    readonly readRender: (id: string, options?: {
+        readonly signal?: AbortSignal;
+    }) => Promise<unknown>;
+    /** Called when a preview iframe is discarded, so a host can release what `frameUrl` allocated. */
+    readonly release?: (id: string, url: string) => void;
+}
+/** Clean standalone HTML of one frame (`{ html, fileName }`), for Copy/Download HTML. */
+export interface BoardExports {
+    readonly page: (id: string) => Promise<unknown>;
+    /** The whole project source (`{ text, fileName }`), where the host's copy is not already a file the user owns. */
+    readonly project?: () => Promise<unknown>;
+}
+/** The project's reusable components, for insertion menus. Absent hosts offer no component insertion list. */
+export interface BoardComponents {
+    readonly list: () => Promise<unknown>;
+}
+/**
+ * A complete alternative composition, published before the board starts at `globalThis[Symbol.for('divlet.board-host/1')]`.
+ * Absent members are absent capabilities; nothing falls back to the native HTTP routes. `label` names the host in the chrome.
+ */
+export interface BoardHostComposition {
+    readonly label: string;
+    readonly readSession: import('./board-session.ts').BoardReadSession;
+    readonly writer: BoardWriter;
+    readonly previews: BoardPreviews;
+    readonly components?: BoardComponents;
+    readonly exports?: BoardExports;
+    readonly historyService?: BoardHistoryService;
+    readonly shareSelection?: import('./board-session.ts').BoardSelectionPublisher;
+    readonly publishObservations?: import('./board-session.ts').BoardObservationPublisher;
+    /**
+     * What a visitor with no saved view of this project sees first: `expand` opens that frame as a readable page, and `title`
+     * names the way back to the board. Absent: the board fits all frames, as the native host does.
+     */
+    readonly initialView?: {
+        readonly expand: string;
+        readonly title?: string;
+    };
+}

package/dist/lib/canvas.js

@@ -1,5 +1,5 @@
 import { $, $$, el, icon, clamp, round } from './util.js';
-import { publishObservations } from './host.js';
+import { publishObservations, previews, initialView } from './host.js';
 import { store, emit, on, documents, descriptor, request, post, apiUrl, commit, edit, idle, undo, newGroup, selectArtboards, selectNodes, toast, viewState, saveViewState } from './store.js';
 
 const PREFETCH_TARGET = 8;
@@ -437,7 +437,11 @@ export function reconcileArtboards() {
     initialFit = true;
     const saved = viewState(store.state.projectId);
     if (saved && Number.isFinite(saved.k) && Number.isFinite(saved.x) && Number.isFinite(saved.y)) setCamera(saved);
-    else fit(null, { animate: false });
+    else {
+      fit(null, { animate: false });
+      // A first visit to a published board reads the page itself; the board is one step back.
+      if (initialView?.expand && descriptor(initialView.expand)) requestAnimationFrame(() => openExpanded(initialView.expand, undefined, { title: initialView.title }));
+    }
   }
   updateHandles();
   applyCamera();
@@ -499,6 +503,8 @@ function deliverEdit(entry) {
   entry.port?.postMessage({ type: 'divlet:edit', nodeId: pending.nodeId });
 }
 
+/** An expanded frame browses its published page (no delivery) unless the host has none, where it reads the live preview. */
+const browsingPublished = entry => store.expanded?.entry === entry && !!entry.doc.viewUrl;
 const needsEagerLoad = entry => store.expanded?.entry === entry || store.selected.has(entry.doc.id);
 
 function inspectFlag() { return !store.expanded && store.mode === 'select'; }
@@ -514,7 +520,7 @@ function mount(entry, { revision = false } = {}) {
   frame.referrerPolicy = 'no-referrer';
   // The browser owns when an off-screen page loads; frames are never torn down and rebuilt by scrolling or zooming.
   frame.loading = needsEagerLoad(entry) ? 'eager' : 'lazy';
-  frame.src = apiUrl(`preview/${encodeURIComponent(entry.doc.id)}?${revision ? `revision=${entry.doc.render}&` : ''}bridge=${entry.bridgeToken}`);
+  frame.src = previews.frameUrl(entry.doc.id, { revision: revision ? entry.doc.render : undefined, bridge: entry.bridgeToken });
   frame.addEventListener('load', () => {
     if (entry.iframe !== frame) return;
     entry.loaded = true;
@@ -522,7 +528,7 @@ function mount(entry, { revision = false } = {}) {
     entry.port?.postMessage({ type: 'divlet:inspect', enabled: inspectFlag() });
     syncNodeSelection(entry);
     syncWork(entry);
-    if (store.expanded?.entry === entry) return;
+    if (browsingPublished(entry)) return;
     updateFrame(entry);
   });
   entry.iframe = frame;
@@ -555,6 +561,7 @@ function unmount(entry) {
   entry.abort?.abort();
   entry.abort = null;
   entry.port?.close();
+  previews.release?.(entry.doc.id, entry.iframe.src);
   entry.iframe.remove();
   Object.assign(entry, { iframe: null, port: null, bridgeToken: null, loaded: false, renderedVersion: 0, awaitingVersion: 0, pendingFetch: false, latestReport: null });
   clearTimeout(entry.reportTimer);
@@ -567,15 +574,15 @@ async function updateFrame(entry) {
   // While a pill is being dragged the page shows its own inline preview; delivering a render would replace the DOM under
   // the pointer. The model still moves (the drag commits live) and this frame catches up when the drag ends.
   if (gesture?.type === 'space' && gesture.id === entry.doc.id) return;
-  if (store.expanded?.entry === entry || !entry.iframe || !entry.port || !entry.loaded || entry.pendingFetch || entry.awaitingVersion >= entry.doc.render || entry.renderedVersion >= entry.doc.render) return;
+  if (browsingPublished(entry) || !entry.iframe || !entry.port || !entry.loaded || entry.pendingFetch || entry.awaitingVersion >= entry.doc.render || entry.renderedVersion >= entry.doc.render) return;
   const frame = entry.iframe;
   const generation = entry.deliveryGeneration;
   entry.pendingFetch = true;
   entry.abort = new AbortController();
   setFrameStatus(entry, 'updating');
   try {
-    const rendered = await request(`api/render/${encodeURIComponent(entry.doc.id)}`, { signal: entry.abort.signal });
-    if (entry.iframe !== frame || generation !== entry.deliveryGeneration || store.expanded?.entry === entry || rendered.documentId !== entry.doc.id || rendered.render < entry.renderedVersion) return;
+    const rendered = await previews.readRender(entry.doc.id, { signal: entry.abort.signal });
+    if (entry.iframe !== frame || generation !== entry.deliveryGeneration || browsingPublished(entry) || rendered.documentId !== entry.doc.id || rendered.render < entry.renderedVersion) return;
     entry.awaitingVersion = rendered.render;
     entry.port?.postMessage({ type: 'divlet:update', documentId: entry.doc.id, version: rendered.render, html: rendered.html });
   } catch (error) {
@@ -706,10 +713,10 @@ function cancelDelivery(entry) {
   entry.reportTimer = null;
 }
 
-export function openExpanded(documentId, focusTarget) {
+export function openExpanded(documentId, focusTarget, { title } = {}) {
   const entry = entries.get(documentId);
   if (!entry || store.expanded) return;
-  store.expanded = { entry, mode: store.mode, focusTarget, camera: { ...camera } };
+  store.expanded = { entry, mode: store.mode, focusTarget, camera: { ...camera }, title };
   cancelDelivery(entry);
   store.node = null;
   selectArtboards([documentId]);
@@ -729,11 +736,11 @@ export function openExpanded(documentId, focusTarget) {
     entry.bridgeToken = crypto.randomUUID();
     entry.loaded = false;
     entry.iframe.src = viewUrl;
-  } else entry.port?.postMessage({ type: 'divlet:inspect', enabled: false });
+  } else { entry.port?.postMessage({ type: 'divlet:inspect', enabled: false }); updateFrame(entry); }
   const overlay = $('#expanded-preview');
   overlay.hidden = false;
   overlay.setAttribute('aria-owns', entry.iframe.id);
-  $('#expanded-title').textContent = entry.doc.name || entry.doc.id;
+  $('#expanded-title').textContent = title || entry.doc.name || entry.doc.id;
   setChromeInert(true, entry);
   document.body.classList.add('is-expanded');
   $('#expanded-back').focus({ preventScroll: true });

package/dist/lib/clip.js

@@ -1,4 +1,4 @@
-import { store, documents, descriptor, edit, toast, cachedModel, loadModel, selectNodes, parentOf, canContain, apiUrl, request } from './store.js';
+import { store, capable, documents, descriptor, edit, toast, cachedModel, loadModel, selectNodes, parentOf, canContain, apiUrl, request } from './store.js';
 import * as canvas from './canvas.js';
 import { duplicateArtboards } from './artboards.js';
 
@@ -198,6 +198,7 @@ async function upload(file, documentId, group) {
 
 /** Store images in the project and add an <img> for each at the paste/drop target. */
 export async function addImages(files, documentId) {
+  if (!capable('assets')) { toast('Images need the local divlet host: this browser copy stores no image files.'); return; }
   if (documentId && !(store.selected.size === 1 && store.selected.has(documentId))) {
     const { selectArtboards } = await import('./store.js');
     selectArtboards([documentId]);

package/dist/lib/crumbs.js

@@ -6,8 +6,9 @@ import { openMenu } from './menu.js';
 import { selectRoot } from './actions.js';
 
 /**
- * Fill the bottom path for `ctx` ({ ids, nodes? }). A selected artboard collapses to its root-entry icon;
- * selecting that root opens the path. Container crumbs select ancestors; the artboard crumb folds it again.
+ * Fill the bottom path for `ctx` ({ ids, nodes? }). The artboard is always the first crumb; with only the artboard selected
+ * it is the current one, followed by a `root` crumb that previews the next level and selects the root element.
+ * Container crumbs select ancestors; the artboard crumb selects the whole artboard again.
  * `after()` runs after activation; `repaint()` is called when element data arrives late.
  */
 export function pathInto(container, ctx, { after, repaint, all = false } = {}) {
@@ -23,10 +24,14 @@ export function pathInto(container, ctx, { after, repaint, all = false } = {}) {
   const sep = () => el('i', 'crumb-sep');
   if (!ctx.nodes) {
     if (ctx.ids.length === 1) {
-      const root = crumb('', () => selectRoot(ctx.ids[0]), `Select root element · ${descriptor(ctx.ids[0])?.name || ctx.ids[0]}`, 'root-entry');
+      const id = ctx.ids[0];
+      const home = crumb('', () => {}, 'The selected artboard', 'home current');
+      home.append(icon('artboard'), el('span', '', descriptor(id)?.name || id));
+      // The one exception to "the path ends at the selection": the next level is shown, so the way into the page is visible.
+      const root = crumb('', () => selectRoot(id), `Select the root element of ${descriptor(id)?.name || id}`, 'root-entry');
       root.setAttribute('aria-label', 'Select root element');
-      root.append(icon('inspect'));
-      container.append(root);
+      root.append(icon('inspect'), el('span', '', 'root'));
+      container.append(home, sep(), root);
     } else container.append(crumb(`${ctx.ids.length} artboards`, () => {}, 'These artboards', 'current'));
     return;
   }

package/dist/lib/help.js

@@ -2,6 +2,7 @@
 import { $, el, icon } from './util.js';
 import { filePicker } from './file-picker.js';
 import { on, emit, store, post, request, receiveState } from './store.js';
+import { native } from './host.js';
 import * as canvas from './canvas.js';
 
 const scrim = $('#help');
@@ -230,7 +231,8 @@ function render() {
   status.setAttribute('role', 'status');
   // The status keeps its reserved line above the buttons, so its text never moves them: the actions stay in the bottom-right.
   output.append(label, field, picker, hint, status, actions);
-  dialog.replaceChildren(head, block(appearance), block(scale), block(handleRow), block(output));
+  // The build output directory is a filesystem setting of the local host; a browser host has none.
+  dialog.replaceChildren(head, block(appearance), block(scale), block(handleRow), ...(native ? [block(output)] : []));
   if (isOpen() && hadFocus) dialog.querySelector('button:not(:disabled), input:not(:disabled)')?.focus({ preventScroll: true });
 }
 

package/dist/lib/host.js

@@ -1,16 +1,36 @@
-// The native board's composition point. Alternate hosts implement the read-session contract, not synthetic HTTP routes.
+// @ts-check
+// The board's composition point. The native host composes its HTTP/SSE adapters here; an alternative host publishes a complete
+// `BoardHostComposition` before the board starts, and then no native route is used or synthesized.
 import { createJsonTransport } from './http.js';
 import { createHttpReadSession, createHttpSelectionPublisher, createHttpObservationPublisher } from './http-session.js';
-import { createHttpHistoryService, createHttpSourceUpdates } from './http-services.js';
+import { createHttpHistoryService, createHttpSourceUpdates, createHttpWriter, createHttpPreviews, createHttpComponents, createHttpExports } from './http-services.js';
+
+/** @type {import('@divlet/web/host').BoardHostComposition | undefined} */
+const composed = /** @type {any} */ (globalThis)[Symbol.for('divlet.board-host/1')];
+/** True when the board talks to the local divlet host over its token-scoped routes. */
+export const native = !composed;
+/** The host's display name, for chrome that says where the project lives. */
+export const hostLabel = composed?.label ?? 'local';
 
 export const base = new URL('./', location.href);
 export const { apiUrl, request, post } = createJsonTransport(base);
-export const readSession = createHttpReadSession({ request, events: () => new EventSource(apiUrl('events')) });
+/** @type {import('@divlet/web/session').BoardReadSession} */
+export const readSession = composed ? composed.readSession : createHttpReadSession({ request, events: () => new EventSource(apiUrl('events')) });
 /** @type {import('@divlet/web/session').BoardSelectionPublisher | undefined} */
-export const shareSelection = createHttpSelectionPublisher(post);
+export const shareSelection = composed ? composed.shareSelection : createHttpSelectionPublisher(post);
 /** @type {import('@divlet/web/session').BoardObservationPublisher | undefined} */
-export const publishObservations = createHttpObservationPublisher(post);
+export const publishObservations = composed ? composed.publishObservations : createHttpObservationPublisher(post);
 /** @type {import('@divlet/web/host').BoardHistoryService | undefined} */
-export const historyService = createHttpHistoryService({ request, post });
+export const historyService = composed ? composed.historyService : createHttpHistoryService({ request, post });
 /** @type {import('@divlet/web/host').BoardSourceUpdates | undefined} */
-export const sourceUpdates = createHttpSourceUpdates({ request, post });
+export const sourceUpdates = composed ? undefined : createHttpSourceUpdates({ request, post });
+/** @type {import('@divlet/web/host').BoardWriter} */
+export const writer = composed ? composed.writer : createHttpWriter(post);
+/** @type {import('@divlet/web/host').BoardPreviews} */
+export const previews = composed ? composed.previews : createHttpPreviews({ apiUrl, request });
+/** @type {import('@divlet/web/host').BoardComponents | undefined} */
+export const components = composed ? composed.components : createHttpComponents(request);
+/** @type {import('@divlet/web/host').BoardExports | undefined} */
+export const exports = composed ? composed.exports : createHttpExports(request);
+/** @type {import('@divlet/web/host').BoardHostComposition['initialView']} */
+export const initialView = composed?.initialView;

package/dist/lib/http-services.js

@@ -22,3 +22,36 @@ export function createHttpSourceUpdates({ request, post }) {
   };
   return Object.freeze(service);
 }
+
+/** @param {Post} post @returns {import('@divlet/web/host').BoardWriter} */
+export function createHttpWriter(post) {
+  /** @type {import('@divlet/web/host').BoardWriter} */
+  const writer = {
+    patch: body => post('api/patch', body),
+    edit: body => post('api/edit', body),
+    undo: body => post('api/undo', body),
+    redo: body => post('api/redo', body),
+    createArtboard: body => post('api/artboards', body),
+    deleteArtboard: body => post('api/artboards/delete', body),
+  };
+  return Object.freeze(writer);
+}
+
+/**
+ * @param {{ apiUrl: (path: string) => string, request: (path: string, options?: RequestInit) => Promise<unknown> }} transport
+ * @returns {import('@divlet/web/host').BoardPreviews}
+ */
+export function createHttpPreviews({ apiUrl, request }) {
+  /** @type {import('@divlet/web/host').BoardPreviews} */
+  const previews = {
+    frameUrl: (id, { revision, bridge }) => apiUrl(`preview/${encodeURIComponent(id)}?${revision ? `revision=${revision}&` : ''}bridge=${bridge}`),
+    readRender: (id, { signal } = {}) => request(`api/render/${encodeURIComponent(id)}`, signal ? { signal } : {}),
+  };
+  return Object.freeze(previews);
+}
+
+/** @param {Request} request @returns {import('@divlet/web/host').BoardExports} */
+export const createHttpExports = request => Object.freeze({ page: (/** @type {string} */ id) => request(`api/export/${encodeURIComponent(id)}`) });
+
+/** @param {Request} request @returns {import('@divlet/web/host').BoardComponents} */
+export const createHttpComponents = request => Object.freeze({ list: () => request('api/components') });

package/dist/lib/inspector.js

@@ -1,10 +1,11 @@
 import { $, el, icon, button, clamp, round, debounce, keys, pressGuard } from './util.js';
-import { store, on, documents, descriptor, loadModel, cachedModel, commit, edit, toast, newGroup, selectNodes, parentOf, textChild, whenVersion, request, apiUrl, receiveState } from './store.js';
+import { store, capable, on, documents, descriptor, loadModel, cachedModel, commit, edit, toast, newGroup, selectNodes, parentOf, textChild, whenVersion, request, apiUrl, receiveState } from './store.js';
 import { fit, rectOf, postToFrame, measuredBox } from './canvas.js';
 import * as actions from './actions.js';
 import { openMenu, menuAnchor, closeMenu } from './menu.js';
 import { overflowBar } from './toolbar.js';
 import { panelSections } from './panels.js';
+import { components as componentSource } from './host.js';
 import { fontFamilyControl } from './typography.js';
 import { attributesEditor } from './attrs.js';
 import { formatCss, highlightCss } from './css.js';
@@ -478,7 +479,8 @@ function imageEditor(doc, node) {
   upload.dataset.tip = 'Add an image file to divlet/assets — or drop it onto the artboard';
   upload.addEventListener('click', () => uploadInto(doc, node));
   const buttons = el('div', 'image-buttons');
-  buttons.append(replace, upload);
+  // Choosing or uploading project images needs a host that stores asset bytes; elsewhere the source stays a plain field.
+  if (capable('assets')) buttons.append(replace, upload);
   const alt = textField('image-alt', node.attrs.alt ?? '', value => refreshed(commit(doc.id, { nodes: { [node.id]: { attrs: { alt: value } } } }, { label: `alt text of ${node.id}` })), { placeholder: 'Alt text (describe the image)', label: 'Alt text' });
   side.append(el('span', 'image-src', node.attrs.src || 'No source yet'), buttons);
   box.append(preview, side);
@@ -491,9 +493,9 @@ function imageEditor(doc, node) {
 let componentsCache = { revision: -1, list: [], loading: false };
 function componentList() {
   const revision = store.state?.revision ?? 0;
-  if (componentsCache.revision !== revision && !componentsCache.loading) {
+  if (componentSource && componentsCache.revision !== revision && !componentsCache.loading) {
     componentsCache.loading = true;
-    request('api/components').then(result => { componentsCache = { revision, list: result.components, loading: false }; schedule(); }).catch(() => { componentsCache.loading = false; });
+    componentSource.list().then(result => { componentsCache = { revision, list: result.components, loading: false }; schedule(); }).catch(() => { componentsCache.loading = false; });
   }
   return componentsCache.list;
 }