@otto-code/protocol 0.6.7 → 0.7.1

package/dist/widgets/bridge.d.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+/**
+ * The widget message bridge — the contract between a widget guest (WebView /
+ * iframe / Electron <webview>) and its host renderer.
+ *
+ * Three transports carry the same two message shapes:
+ *   native   — `window.ReactNativeWebView.postMessage` + `onMessage`
+ *   web      — a `MessageChannel` port transferred in at load
+ *   electron — a preload's `ipcRenderer.sendToHost` + the `ipc-message` event
+ *
+ * The schema lives here, once, so a transport cannot quietly drift. Everything
+ * arriving from a guest is untrusted model-generated content: parse, never
+ * trust, and drop anything that does not match.
+ */
+/** Marker on every guest→host frame, so foreign postMessage traffic is ignored. */
+export declare const WIDGET_BRIDGE_CHANNEL = "otto.widget.v1";
+/**
+ * `sendPrompt` types into the user's chat. That is a privilege, so it is
+ * capped: a widget cannot paste an essay, and cannot machine-gun the composer.
+ */
+export declare const WIDGET_PROMPT_MAX_CHARS = 2000;
+export declare const WIDGET_PROMPT_MIN_INTERVAL_MS = 1000;
+/** Total prompts one widget may send in a session, however slowly. */
+export declare const WIDGET_PROMPT_SESSION_LIMIT = 20;
+/** Clamp for self-reported guest height, in CSS pixels. */
+export declare const WIDGET_MIN_HEIGHT_PX = 24;
+export declare const WIDGET_MAX_HEIGHT_PX = 4000;
+export declare const WidgetGuestMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    channel: z.ZodLiteral<"otto.widget.v1">;
+    widgetId: z.ZodString;
+    type: z.ZodLiteral<"height">;
+    px: z.ZodNumber;
+}, z.core.$strip>, z.ZodObject<{
+    channel: z.ZodLiteral<"otto.widget.v1">;
+    widgetId: z.ZodString;
+    type: z.ZodLiteral<"prompt">;
+    text: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    channel: z.ZodLiteral<"otto.widget.v1">;
+    widgetId: z.ZodString;
+    type: z.ZodLiteral<"open_link">;
+    url: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    channel: z.ZodLiteral<"otto.widget.v1">;
+    widgetId: z.ZodString;
+    type: z.ZodLiteral<"error">;
+    message: z.ZodString;
+}, z.core.$strip>], "type">;
+export type WidgetGuestMessage = z.infer<typeof WidgetGuestMessageSchema>;
+/**
+ * Parse a raw guest frame. Accepts the JSON string the native and Electron
+ * transports deliver as well as an already-structured object (web's
+ * MessageChannel). Returns null for anything unrecognized — including frames
+ * for a different widget, which the caller filters by id.
+ */
+export declare function parseWidgetGuestMessage(raw: unknown): WidgetGuestMessage | null;
+/** Clamp a self-reported height into something a chat row can hold. */
+export declare function clampWidgetHeight(px: number): number;
+//# sourceMappingURL=bridge.d.ts.map

package/dist/widgets/bridge.js

@@ -0,0 +1,87 @@
+import { z } from "zod";
+/**
+ * The widget message bridge — the contract between a widget guest (WebView /
+ * iframe / Electron <webview>) and its host renderer.
+ *
+ * Three transports carry the same two message shapes:
+ *   native   — `window.ReactNativeWebView.postMessage` + `onMessage`
+ *   web      — a `MessageChannel` port transferred in at load
+ *   electron — a preload's `ipcRenderer.sendToHost` + the `ipc-message` event
+ *
+ * The schema lives here, once, so a transport cannot quietly drift. Everything
+ * arriving from a guest is untrusted model-generated content: parse, never
+ * trust, and drop anything that does not match.
+ */
+/** Marker on every guest→host frame, so foreign postMessage traffic is ignored. */
+export const WIDGET_BRIDGE_CHANNEL = "otto.widget.v1";
+/**
+ * `sendPrompt` types into the user's chat. That is a privilege, so it is
+ * capped: a widget cannot paste an essay, and cannot machine-gun the composer.
+ */
+export const WIDGET_PROMPT_MAX_CHARS = 2000;
+export const WIDGET_PROMPT_MIN_INTERVAL_MS = 1000;
+/** Total prompts one widget may send in a session, however slowly. */
+export const WIDGET_PROMPT_SESSION_LIMIT = 20;
+/** Clamp for self-reported guest height, in CSS pixels. */
+export const WIDGET_MIN_HEIGHT_PX = 24;
+export const WIDGET_MAX_HEIGHT_PX = 4000;
+const WidgetHeightMessageSchema = z.object({
+    channel: z.literal(WIDGET_BRIDGE_CHANNEL),
+    widgetId: z.string().min(1),
+    type: z.literal("height"),
+    /** Content height the guest measured for its in-flow content. */
+    px: z.number().finite().nonnegative(),
+});
+const WidgetPromptMessageSchema = z.object({
+    channel: z.literal(WIDGET_BRIDGE_CHANNEL),
+    widgetId: z.string().min(1),
+    type: z.literal("prompt"),
+    text: z.string().min(1),
+});
+const WidgetOpenLinkMessageSchema = z.object({
+    channel: z.literal(WIDGET_BRIDGE_CHANNEL),
+    widgetId: z.string().min(1),
+    type: z.literal("open_link"),
+    url: z.string().min(1),
+});
+const WidgetErrorMessageSchema = z.object({
+    channel: z.literal(WIDGET_BRIDGE_CHANNEL),
+    widgetId: z.string().min(1),
+    type: z.literal("error"),
+    message: z.string(),
+});
+export const WidgetGuestMessageSchema = z.discriminatedUnion("type", [
+    WidgetHeightMessageSchema,
+    WidgetPromptMessageSchema,
+    WidgetOpenLinkMessageSchema,
+    WidgetErrorMessageSchema,
+]);
+/**
+ * Parse a raw guest frame. Accepts the JSON string the native and Electron
+ * transports deliver as well as an already-structured object (web's
+ * MessageChannel). Returns null for anything unrecognized — including frames
+ * for a different widget, which the caller filters by id.
+ */
+export function parseWidgetGuestMessage(raw) {
+    let value = raw;
+    if (typeof raw === "string") {
+        // A widget's own console noise and any unrelated postMessage traffic land
+        // here too; non-JSON is simply not ours.
+        try {
+            value = JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    const parsed = WidgetGuestMessageSchema.safeParse(value);
+    return parsed.success ? parsed.data : null;
+}
+/** Clamp a self-reported height into something a chat row can hold. */
+export function clampWidgetHeight(px) {
+    if (!Number.isFinite(px)) {
+        return WIDGET_MIN_HEIGHT_PX;
+    }
+    return Math.min(WIDGET_MAX_HEIGHT_PX, Math.max(WIDGET_MIN_HEIGHT_PX, Math.ceil(px)));
+}
+//# sourceMappingURL=bridge.js.map

package/dist/widgets/document.d.ts

@@ -0,0 +1,18 @@
+import { type WidgetThemeInput } from "./theme.js";
+import type { WidgetPayload } from "./types.js";
+/** Host→guest handshake that hands over the web transport's MessagePort. */
+export declare const WIDGET_PORT_HANDSHAKE = "otto.widget.port.v1";
+export interface BuildWidgetDocumentInput {
+    payload: WidgetPayload;
+    theme: WidgetThemeInput;
+}
+/**
+ * Wrap a sanitized fragment into the full guest document.
+ *
+ * The fragment is inserted verbatim — it was already sanitized daemon-side
+ * (`packages/server/src/server/widget/widget-fragment.ts`) and the CSP plus the
+ * per-platform sandbox are what actually contain it. Re-parsing it here would
+ * add a second, weaker sanitizer that only ever disagrees with the first.
+ */
+export declare function buildWidgetDocument(input: BuildWidgetDocumentInput): string;
+//# sourceMappingURL=document.d.ts.map

package/dist/widgets/document.js

@@ -0,0 +1,261 @@
+import { WIDGET_BRIDGE_CHANNEL } from "./bridge.js";
+import { buildWidgetIconRules } from "./icons.js";
+import { buildWidgetThemeVariables } from "./theme.js";
+/**
+ * Assembles the document a widget guest actually loads.
+ *
+ * Shared by all three renderers (native WebView, web iframe, Electron
+ * <webview>) so the CSP, the host stylesheet and the bridge bootstrap cannot
+ * drift apart per platform — a widget that works in one has to work in all of
+ * them.
+ */
+/**
+ * No network. At all.
+ *
+ * Claude's widget host permits five public CDNs plus Google Fonts, which is
+ * what makes its `chart` module's Chart.js/D3 vocabulary work. Otto does not
+ * follow it, for three reasons that all point the same way:
+ *
+ *   1. A widget rendered on a phone over the relay cannot reach a daemon-local
+ *      asset origin, so any "serve it ourselves" scheme degrades in exactly the
+ *      case Otto exists for.
+ *   2. Inlining a library per widget puts 200-400KB into the timeline on every
+ *      call, re-sent on every backfill.
+ *   3. A model-authored fragment may be reflecting content the model read from
+ *      a hostile file or page, and an outbound URL is a payload.
+ *
+ * The fragment therefore gets inline script/style and data: assets, and nothing
+ * else. Charts are hand-rolled SVG — the contract document says so plainly, and
+ * a blocked resource surfaces as a visible error rather than a blank box.
+ */
+const WIDGET_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; " +
+    "img-src data: blob:; font-src data:; connect-src 'none'; frame-src 'none'; " +
+    "object-src 'none'; base-uri 'none'; form-action 'none'";
+/** Host→guest handshake that hands over the web transport's MessagePort. */
+export const WIDGET_PORT_HANDSHAKE = "otto.widget.port.v1";
+const BASE_RULES = `
+*, *::before, *::after { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  /* The chat scrolls; the widget never does. Height is content-driven and
+     reported to the host, so an inner scroller would hide content behind a
+     frame that is already exactly as tall as it needs to be. */
+  overflow: hidden;
+}
+body { display: block; width: 100%; }
+h1, h2, h3, h4 { margin: 0 0 var(--gap-sm); line-height: 1.25; font-weight: 600; }
+h1 { font-size: 20px; }
+h2 { font-size: 17px; }
+h3 { font-size: 15px; }
+p { margin: 0 0 var(--gap-sm); }
+p:last-child { margin-bottom: 0; }
+code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
+pre { margin: 0; overflow-x: auto; }
+a { color: var(--text-accent); text-decoration: none; cursor: pointer; }
+a:hover { text-decoration: underline; }
+button { font: inherit; color: inherit; cursor: pointer; }
+table { border-collapse: collapse; width: 100%; }
+th, td { text-align: left; padding: var(--pad-sm); border-bottom: 1px solid var(--border); }
+th { color: var(--text-secondary); font-weight: 600; }
+img, svg, canvas, video { max-width: 100%; }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+/* SVG palette. \`c-\` fills, \`s-\` strokes; \`t\`/\`ts\`/\`th\` are the three text
+   weights, matching the HTML \`--text-*\` ladder so a diagram and a paragraph
+   agree about emphasis. */
+.t { fill: var(--text-primary); }
+.ts { fill: var(--text-secondary); }
+.th { fill: var(--text-muted); }
+svg text { font-family: var(--font-sans); }
+`;
+function buildPaletteRules() {
+    const names = ["blue", "teal", "amber", "red", "green", "purple", "pink", "gray"];
+    return names
+        .map((name) => `.c-${name}{fill:var(--c-${name});}\n.s-${name}{stroke:var(--c-${name});}`)
+        .join("\n");
+}
+/**
+ * The guest-side bridge.
+ *
+ * Defines the two host globals the contract promises, reports content height,
+ * and routes link clicks. Written as a plain string rather than a bundled
+ * module because it has to run inside a `data:`/`srcDoc` document with no
+ * loader, and because keeping it readable here is the only way it stays
+ * reviewable.
+ */
+function buildBootstrap(widgetId) {
+    return `
+(function () {
+  var CHANNEL = ${JSON.stringify(WIDGET_BRIDGE_CHANNEL)};
+  var WIDGET_ID = ${JSON.stringify(widgetId)};
+  var HANDSHAKE = ${JSON.stringify(WIDGET_PORT_HANDSHAKE)};
+  var port = null;
+  var queued = [];
+
+  function deliver(payload) {
+    var text = JSON.stringify(payload);
+    // Electron: a preload on the guest's own session exposes exactly this one
+    // function and nothing else (no ipcRenderer, no node).
+    if (window.__ottoWidgetHost && typeof window.__ottoWidgetHost.post === "function") {
+      window.__ottoWidgetHost.post(text);
+      return true;
+    }
+    // Native: react-native-webview's injected bridge.
+    if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === "function") {
+      window.ReactNativeWebView.postMessage(text);
+      return true;
+    }
+    // Web: the MessagePort the host transferred in. Validating on port identity
+    // is the point — this iframe has no allow-same-origin, so its origin is
+    // "null" and event.origin can prove nothing.
+    if (port) {
+      port.postMessage(payload);
+      return true;
+    }
+    return false;
+  }
+
+  function post(payload) {
+    if (!deliver(payload)) {
+      if (queued.length < 32) { queued.push(payload); }
+    }
+  }
+
+  window.addEventListener("message", function (event) {
+    if (event.data !== HANDSHAKE || !event.ports || !event.ports[0]) { return; }
+    port = event.ports[0];
+    var pending = queued;
+    queued = [];
+    for (var i = 0; i < pending.length; i += 1) { deliver(pending[i]); }
+  });
+
+  var lastHeight = -1;
+  var frame = 0;
+  function measure() {
+    var doc = document.documentElement;
+    var body = document.body;
+    // Take the max rather than documentElement alone: a fragment that puts
+    // content in an absolutely-positioned or floated box can leave the root's
+    // own height behind what is actually painted.
+    var height = Math.max(
+      doc ? doc.scrollHeight : 0,
+      body ? body.scrollHeight : 0,
+      body ? body.offsetHeight : 0
+    );
+    if (height === lastHeight) { return; }
+    lastHeight = height;
+    post({ channel: CHANNEL, widgetId: WIDGET_ID, type: "height", px: height });
+  }
+  function scheduleMeasure() {
+    if (frame) { return; }
+    frame = requestAnimationFrame(function () { frame = 0; measure(); });
+  }
+
+  if (typeof ResizeObserver === "function") {
+    var observer = new ResizeObserver(scheduleMeasure);
+    observer.observe(document.documentElement);
+    if (document.body) { observer.observe(document.body); }
+  }
+  window.addEventListener("load", scheduleMeasure);
+  // Fonts and late layout settle after load; a short poll costs nothing and
+  // catches the cases the observer misses (image decode, script-built DOM).
+  var polls = 0;
+  var poll = setInterval(function () {
+    polls += 1;
+    measure();
+    if (polls > 20) { clearInterval(poll); }
+  }, 150);
+  scheduleMeasure();
+
+  window.sendPrompt = function (text) {
+    if (typeof text !== "string") { return; }
+    var trimmed = text.trim();
+    if (!trimmed) { return; }
+    post({ channel: CHANNEL, widgetId: WIDGET_ID, type: "prompt", text: trimmed });
+  };
+
+  window.openLink = function (url) {
+    if (typeof url !== "string" || !url) { return; }
+    post({ channel: CHANNEL, widgetId: WIDGET_ID, type: "open_link", url: url });
+  };
+
+  // Plain <a href> clicks route through the same confirmation path as
+  // openLink(). Nothing in a widget navigates the guest itself.
+  document.addEventListener("click", function (event) {
+    var node = event.target;
+    while (node && node !== document.body) {
+      if (node.tagName === "A" && node.getAttribute("href")) {
+        event.preventDefault();
+        window.openLink(node.getAttribute("href"));
+        return;
+      }
+      node = node.parentNode;
+    }
+  }, true);
+
+  window.addEventListener("error", function (event) {
+    post({
+      channel: CHANNEL,
+      widgetId: WIDGET_ID,
+      type: "error",
+      message: String((event && event.message) || "Widget script error")
+    });
+  });
+})();
+`;
+}
+/**
+ * Wrap a sanitized fragment into the full guest document.
+ *
+ * The fragment is inserted verbatim — it was already sanitized daemon-side
+ * (`packages/server/src/server/widget/widget-fragment.ts`) and the CSP plus the
+ * per-platform sandbox are what actually contain it. Re-parsing it here would
+ * add a second, weaker sanitizer that only ever disagrees with the first.
+ */
+export function buildWidgetDocument(input) {
+    const { payload, theme } = input;
+    const styles = [
+        buildWidgetThemeVariables(theme),
+        BASE_RULES,
+        buildPaletteRules(),
+        buildWidgetIconRules(),
+    ].join("\n");
+    // SVG-mode fragments are centered in the frame; an SVG sized to its viewBox
+    // otherwise pins left and reads as a mistake at wide chat widths.
+    const bodyAttrs = payload.mode === "svg" ? ' class="widget-svg"' : "";
+    const modeRules = payload.mode === "svg"
+        ? "body.widget-svg{display:flex;justify-content:center;}body.widget-svg>svg{height:auto;}"
+        : "";
+    return [
+        "<!DOCTYPE html>",
+        '<html lang="en">',
+        "<head>",
+        '<meta charset="utf-8">',
+        '<meta name="viewport" content="width=device-width, initial-scale=1">',
+        `<meta http-equiv="Content-Security-Policy" content="${WIDGET_CSP}">`,
+        `<title>${escapeHtml(payload.title)}</title>`,
+        `<style>${styles}\n${modeRules}</style>`,
+        "</head>",
+        `<body${bodyAttrs}>`,
+        payload.code,
+        `<script>${buildBootstrap(payload.id)}</script>`,
+        "</body>",
+        "</html>",
+    ].join("\n");
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+//# sourceMappingURL=document.js.map

package/dist/widgets/icons.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A curated icon set for widgets, used as `<i class="ti ti-check"></i>`.
+ *
+ * Claude's widget host describes a 5800-glyph Tabler outline webfont as
+ * "already loaded". Otto does not load it: the widget CSP is `default-src
+ * 'none'` with no network at all (see `document.ts`), and a webfont large
+ * enough to cover 5800 glyphs would have to be either inlined into every guest
+ * document or served from an origin that does not survive relay/remote access.
+ *
+ * So the set is curated instead: ~40 glyphs covering what widgets actually
+ * reach for, drawn in Tabler's outline language (24px box, 2px stroke, round
+ * caps) and applied as a CSS mask so each one inherits `currentColor`. A name
+ * outside the set renders nothing rather than a broken box — and the contract
+ * document lists exactly what exists, so the model never guesses.
+ */
+/** Every icon name a widget may use. The contract document renders this list. */
+export declare const WIDGET_ICON_NAMES: readonly string[];
+/** The `.ti-*` rules. Emitted once into every guest document. */
+export declare function buildWidgetIconRules(): string;
+//# sourceMappingURL=icons.d.ts.map

package/dist/widgets/icons.js

@@ -0,0 +1,90 @@
+/**
+ * A curated icon set for widgets, used as `<i class="ti ti-check"></i>`.
+ *
+ * Claude's widget host describes a 5800-glyph Tabler outline webfont as
+ * "already loaded". Otto does not load it: the widget CSP is `default-src
+ * 'none'` with no network at all (see `document.ts`), and a webfont large
+ * enough to cover 5800 glyphs would have to be either inlined into every guest
+ * document or served from an origin that does not survive relay/remote access.
+ *
+ * So the set is curated instead: ~40 glyphs covering what widgets actually
+ * reach for, drawn in Tabler's outline language (24px box, 2px stroke, round
+ * caps) and applied as a CSS mask so each one inherits `currentColor`. A name
+ * outside the set renders nothing rather than a broken box — and the contract
+ * document lists exactly what exists, so the model never guesses.
+ */
+const ICON_PATHS = {
+    check: '<path d="M5 12l5 5L20 7"/>',
+    x: '<path d="M18 6L6 18M6 6l12 12"/>',
+    plus: '<path d="M12 5v14M5 12h14"/>',
+    minus: '<path d="M5 12h14"/>',
+    "chevron-right": '<path d="M9 6l6 6-6 6"/>',
+    "chevron-left": '<path d="M15 6l-6 6 6 6"/>',
+    "chevron-down": '<path d="M6 9l6 6 6-6"/>',
+    "chevron-up": '<path d="M6 15l6-6 6 6"/>',
+    "arrow-right": '<path d="M5 12h14M13 6l6 6-6 6"/>',
+    "arrow-left": '<path d="M19 12H5M11 18l-6-6 6-6"/>',
+    "arrow-up": '<path d="M12 19V5M6 11l6-6 6 6"/>',
+    "arrow-down": '<path d="M12 5v14M18 13l-6 6-6-6"/>',
+    "trending-up": '<path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/>',
+    "trending-down": '<path d="M3 7l6 6 4-4 8 8"/><path d="M14 17h7v-7"/>',
+    "circle-check": '<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>',
+    "circle-x": '<circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/>',
+    "alert-triangle": '<path d="M10.3 4.3L2.8 17a2 2 0 001.7 3h15a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z"/><path d="M12 9v4M12 17h.01"/>',
+    "alert-circle": '<circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/>',
+    "info-circle": '<circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/>',
+    "help-circle": '<circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3M12 17h.01"/>',
+    search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="M21 21l-5.9-5.9"/>',
+    home: '<path d="M5 12L3 12l9-9 9 9h-2"/><path d="M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/>',
+    settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-1.8-.3 1.6 1.6 0 00-1 1.5V21a2 2 0 11-4 0v-.1A1.6 1.6 0 008 19.4a1.6 1.6 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.6 1.6 0 00.3-1.8 1.6 1.6 0 00-1.5-1H2a2 2 0 110-4h.1A1.6 1.6 0 004.6 8a1.6 1.6 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9a1.6 1.6 0 001-1.5V2a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8V9a1.6 1.6 0 001.5 1H22a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z"/>',
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1"/>',
+    users: '<circle cx="9" cy="8" r="4"/><path d="M2 21v-1a6 6 0 016-6h2a6 6 0 016 6v1"/><path d="M17 4.5a4 4 0 010 7M19 14a5 5 0 013 4.5V20"/>',
+    file: '<path d="M14 3v5h5"/><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z"/>',
+    folder: '<path d="M4 5a2 2 0 012-2h3l2 3h7a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2z"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+    calendar: '<rect x="4" y="5" width="16" height="16" rx="2"/><path d="M16 3v4M8 3v4M4 11h16"/>',
+    star: '<path d="M12 4l2.5 5.1 5.6.8-4 3.9 1 5.6-5.1-2.7-5 2.7 1-5.6-4-3.9 5.5-.8z"/>',
+    heart: '<path d="M12 20l-7-7a4.2 4.2 0 010-6 4.2 4.2 0 016 0l1 1 1-1a4.2 4.2 0 016 0 4.2 4.2 0 010 6z"/>',
+    trash: '<path d="M4 7h16M10 11v6M14 11v6"/><path d="M5 7l1 12a2 2 0 002 2h8a2 2 0 002-2l1-12M9 7V4h6v3"/>',
+    pencil: '<path d="M4 20h4L20 8a2.8 2.8 0 00-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+    copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2"/>',
+    download: '<path d="M12 3v12M7 11l5 5 5-5"/><path d="M4 20h16"/>',
+    upload: '<path d="M12 20V8M7 12l5-5 5 5"/><path d="M4 4h16"/>',
+    "external-link": '<path d="M14 4h6v6"/><path d="M20 4L10 14"/><path d="M19 14v5a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h5"/>',
+    refresh: '<path d="M20 11a8 8 0 10-2 6"/><path d="M20 5v6h-6"/>',
+    bolt: '<path d="M13 3L5 14h6l-1 7 8-11h-6z"/>',
+    database: '<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/>',
+    code: '<path d="M9 8l-5 4 5 4M15 8l5 4-5 4"/>',
+    terminal: '<path d="M5 7l5 5-5 5M13 17h6"/>',
+    "chart-bar": '<path d="M4 20h16"/><rect x="6" y="10" width="3" height="7"/><rect x="11" y="6" width="3" height="11"/><rect x="16" y="13" width="3" height="4"/>',
+    "chart-line": '<path d="M4 20h16"/><path d="M5 15l4-5 4 3 5-7"/>',
+    mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 8l9 6 9-6"/>',
+    lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/>',
+    eye: '<path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12z"/><circle cx="12" cy="12" r="2.5"/>',
+    "eye-off": '<path d="M3 3l18 18"/><path d="M10.6 6.2A9.9 9.9 0 0112 6c6.4 0 10 6 10 6a17 17 0 01-3.3 3.9M6.6 8.1A17 17 0 002 12s3.6 6 10 6a9.6 9.6 0 003.4-.6"/>',
+    world: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 010 18 15 15 0 010-18z"/>',
+    sparkles: '<path d="M9 4l1.4 3.6L14 9l-3.6 1.4L9 14l-1.4-3.6L4 9l3.6-1.4z"/><path d="M17 13l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z"/>',
+};
+function toMaskUrl(body) {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+        `stroke-linejoin="round">${body}</svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+/** Every icon name a widget may use. The contract document renders this list. */
+export const WIDGET_ICON_NAMES = Object.keys(ICON_PATHS).sort();
+/** The `.ti-*` rules. Emitted once into every guest document. */
+export function buildWidgetIconRules() {
+    const rules = Object.entries(ICON_PATHS).map(([name, body]) => {
+        const url = toMaskUrl(body);
+        return `.ti-${name}{-webkit-mask-image:${url};mask-image:${url};}`;
+    });
+    return [
+        ".ti{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.18em;",
+        "background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;",
+        "-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;",
+        "mask-size:contain;}",
+        ...rules,
+    ].join("\n");
+}
+//# sourceMappingURL=icons.js.map

package/dist/widgets/theme.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The CSS custom properties a widget fragment is written against, and the
+ * mapping from Otto's semantic theme tokens onto them.
+ *
+ * The HOST assembles the guest document, not the daemon — because only the
+ * client knows which theme is live, and a theme switch has to re-skin an
+ * already-rendered widget without a daemon round trip. The variable NAMES are
+ * frozen here so the contract document, the fixtures, and every renderer agree.
+ */
+export interface WidgetThemeInput {
+    /** True when the live Otto theme is a dark one. Drives the tint direction. */
+    isDark: boolean;
+    surface0: string;
+    surface1: string;
+    surface2: string;
+    /** Highest-elevation surface; also the source of the stronger border steps. */
+    surface3: string;
+    foreground: string;
+    foregroundMuted: string;
+    border: string;
+    accent: string;
+    danger: string;
+    success: string;
+    /** Optional — themes without a warning token fall back to a fixed amber. */
+    warning?: string;
+    fontSans: string;
+    fontMono: string;
+    /** Serif "voice" face. Falls back to a generic serif stack. */
+    fontSerif?: string;
+}
+export declare function widgetPaletteFor(isDark: boolean): Record<string, string>;
+/**
+ * The `:root` custom-property block. Split out from the stylesheet so a theme
+ * change can be reasoned about (and tested) without the 200 lines of rules.
+ */
+export declare function buildWidgetThemeVariables(input: WidgetThemeInput): string;
+//# sourceMappingURL=theme.d.ts.map