@aiworker/sdk 1.24.0

package/dist/ui/style.js

@@ -0,0 +1,202 @@
+import { GUEST_SCROLLBAR_CSS } from "../scrollbar-style.js";
+/** Host CSS variable → `--oc-*` alias written by `theme.ts`. */
+const OC_ALIAS = {
+    'surface-background': 'bg',
+    'surface-elevated': 'elevated',
+    'surface-elevated-foreground': 'elevated-fg',
+    'surface-foreground': 'fg',
+    'surface-muted-foreground': 'muted',
+    'surface-muted': 'muted-surface',
+    'surface-subtle': 'subtle',
+    'interactive-border': 'border',
+    'interactive-hover': 'hover',
+    'interactive-active': 'active',
+    'interactive-selection': 'selection',
+    'interactive-selection-foreground': 'selection-fg',
+    'interactive-focus-ring': 'focus',
+    'primary': 'primary',
+    'primary-foreground': 'primary-fg',
+    'primary-text': 'primary-text',
+    'success-text': 'success-text',
+    'warning-text': 'warning-text',
+    'error-text': 'error-text',
+    'info-text': 'info-text',
+    'status-success': 'success',
+    'status-warning': 'warning',
+    'status-error': 'error',
+    'status-info': 'info',
+    'font-sans': 'font',
+    'font-mono': 'mono',
+    'radius': 'radius',
+};
+const v = (name, fallback) => (`var(--${name}, var(--oc-${OC_ALIAS[name]}, ${fallback}))`);
+const bg = v('surface-background', 'transparent');
+const elevated = v('surface-elevated', 'transparent');
+const elevatedFg = v('surface-elevated-foreground', 'inherit');
+const fg = v('surface-foreground', 'inherit');
+const muted = v('surface-muted-foreground', 'gray');
+const secondary = v('surface-muted', 'transparent');
+const border = v('interactive-border', 'currentColor');
+const hover = v('interactive-hover', 'transparent');
+const active = v('interactive-active', 'transparent');
+const selection = v('interactive-selection', 'transparent');
+const selectionFg = v('interactive-selection-foreground', 'inherit');
+const focus = v('interactive-focus-ring', 'currentColor');
+const primary = v('primary', 'currentColor');
+const primaryText = v('primary-text', 'inherit');
+const errorText = v('error-text', 'inherit');
+const font = v('font-sans', 'inherit');
+const mono = v('font-mono', 'monospace');
+const radius = v('radius', '9px');
+const mix = (color, pct, base = 'transparent') => (`color-mix(in srgb, ${color} ${pct}%, ${base})`);
+const focusRing = `box-shadow: 0 0 0 2px ${focus};`;
+const tone = (name) => {
+    const color = v(`status-${name}`, 'currentColor');
+    return `
+.oc-sdk[data-tone="${name}"], .oc-sdk [data-tone="${name}"] { --oc-sdk-tone: ${color}; --oc-sdk-tone-text: ${v(`${name}-text`, 'inherit')}; }`;
+};
+export const UI_CSS = `
+${GUEST_SCROLLBAR_CSS}
+.oc-sdk { box-sizing: border-box; color: ${fg}; font-family: ${font}; font-size: 0.875rem; line-height: 1.45; }
+.oc-sdk *, .oc-sdk *::before, .oc-sdk *::after { box-sizing: border-box; }
+/* :where() keeps the reset at zero specificity so every primitive class below overrides it. */
+:where(.oc-sdk) :where(button, input, textarea), :where(button.oc-sdk, input.oc-sdk, textarea.oc-sdk) { font: inherit; color: inherit; margin: 0; }
+:where(.oc-sdk) :where(button), :where(button.oc-sdk) { cursor: pointer; background: none; border: 0; padding: 0; }
+.oc-sdk button:disabled, button.oc-sdk:disabled, .oc-sdk[aria-disabled="true"], .oc-sdk [aria-disabled="true"] { opacity: .5; pointer-events: none; }
+.oc-sdk :focus-visible { outline: none; ${focusRing} }
+.oc-sdk-mono { font-family: ${mono}; }
+.oc-sdk-muted { color: ${muted}; }
+${tone('success')}${tone('warning')}${tone('error')}${tone('info')}
+.oc-sdk[data-tone="primary"], .oc-sdk [data-tone="primary"] { --oc-sdk-tone: ${primary}; --oc-sdk-tone-text: ${primaryText}; }
+
+.oc-sdk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: ${radius}; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background 150ms ease-out, color 150ms ease-out; }
+.oc-sdk-btn[data-size="sm"] { height: 32px; padding: 0 10px; font-size: 0.8125rem; }
+.oc-sdk-btn[data-size="xs"] { height: 24px; padding: 0 8px; font-size: 0.75rem; border-radius: 6px; }
+.oc-sdk-btn[data-variant="default"] { color: ${primaryText}; background: ${mix(primary, 10, bg)}; border-color: ${mix(primary, 12)}; }
+.oc-sdk-btn[data-variant="default"]:hover { background: ${mix(primary, 16, bg)}; }
+.oc-sdk-btn[data-variant="default"]:active { background: ${mix(primary, 22, bg)}; }
+.oc-sdk-btn[data-variant="secondary"] { background: ${secondary}; color: var(--oc-fg); }
+.oc-sdk-btn[data-variant="secondary"]:hover { background-image: linear-gradient(${hover}, ${hover}); }
+.oc-sdk-btn[data-variant="secondary"]:active { background-image: linear-gradient(${active}, ${active}); }
+.oc-sdk-btn[data-variant="outline"] { background: ${elevated}; color: ${elevatedFg}; border-color: ${border}; }
+.oc-sdk-btn[data-variant="outline"]:hover { background-image: linear-gradient(${hover}, ${hover}); }
+.oc-sdk-btn[data-variant="outline"]:active { background-image: linear-gradient(${active}, ${active}); }
+.oc-sdk-btn[data-variant="ghost"] { background: transparent; }
+.oc-sdk-btn[data-variant="ghost"]:hover { background: ${hover}; }
+.oc-sdk-btn[data-variant="ghost"]:active { background: ${active}; }
+.oc-sdk-btn[data-variant="destructive"] { --oc-sdk-tone: ${v('status-error', 'red')}; color: ${errorText}; background: ${mix('var(--oc-sdk-tone)', 7, bg)}; border-color: ${mix('var(--oc-sdk-tone)', 12)}; }
+.oc-sdk-btn[data-variant="destructive"]:hover { background: ${mix('var(--oc-sdk-tone)', 9, bg)}; }
+.oc-sdk-btn[data-variant="destructive"]:active { background: ${mix('var(--oc-sdk-tone)', 11, bg)}; }
+.oc-sdk-btn[data-loading="true"] { opacity: .5; pointer-events: none; }
+.oc-sdk-btn > .oc-sdk-spinner-ring { width: 14px; height: 14px; }
+
+.oc-sdk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-field-label { font-size: 0.8125rem; font-weight: 500; }
+.oc-sdk-field-note { font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-field-note { color: ${errorText}; }
+.oc-sdk-input { display: block; width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: ${radius}; background: ${elevated}; color: ${elevatedFg}; font-size: 0.875rem; line-height: 1.45; appearance: none; box-shadow: inset 0 0 0 1px ${mix(border, 60)}; transition: background 150ms ease-out, box-shadow 150ms ease-out; }
+textarea.oc-sdk-input { height: auto; padding: 8px 12px; resize: vertical; }
+.oc-sdk-input::placeholder { color: ${muted}; }
+.oc-sdk-input:hover:not(:focus) { background-image: linear-gradient(${hover}, ${hover}); }
+.oc-sdk-input:focus, .oc-sdk-input:focus-visible { box-shadow: inset 0 0 0 2px ${focus}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-input { box-shadow: inset 0 0 0 1px ${v('status-error', 'red')}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-input:focus { box-shadow: inset 0 0 0 2px ${v('status-error', 'red')}; }
+.oc-sdk-input[data-mono="true"] { font-family: ${mono}; }
+
+.oc-sdk-search { position: relative; min-width: 0; }
+.oc-sdk-search .oc-sdk-input { padding-left: 34px; padding-right: 34px; }
+.oc-sdk-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: ${muted}; pointer-events: none; }
+.oc-sdk-search[data-active="true"] .oc-sdk-search-icon { color: ${primary}; }
+.oc-sdk-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: ${muted}; }
+.oc-sdk-search[data-active="true"] .oc-sdk-search-clear { display: inline-flex; }
+.oc-sdk-search-clear:hover { background: ${hover}; color: ${fg}; }
+
+.oc-sdk-select { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 32px; padding: 0 8px 0 10px; border: 1px solid ${border}; border-radius: 6px; background: ${elevated}; color: ${elevatedFg}; font-size: 0.8125rem; text-align: left; transition: background 150ms ease-out; }
+.oc-sdk-trigger:hover { background-image: linear-gradient(${hover}, ${hover}); }
+.oc-sdk-trigger[aria-expanded="true"] { background-image: linear-gradient(${active}, ${active}); }
+.oc-sdk-trigger-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-trigger-value[data-empty="true"] { color: ${muted}; }
+.oc-sdk-trigger-chevron { flex: 0 0 auto; color: ${muted}; }
+.oc-sdk-popup { --surface-foreground: ${elevatedFg}; position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 2px; min-width: 160px; max-width: calc(100vw - 16px); max-height: min(320px, calc(100vh - 16px)); overflow: auto; padding: 4px; border: 1px solid ${mix(border, 60)}; border-radius: 12px; background: ${elevated}; color: ${elevatedFg}; box-shadow: 0 8px 24px ${mix(fg, 12)}; }
+.oc-sdk-popup-search { flex: 0 0 auto; padding: 2px 2px 4px; }
+.oc-sdk-popup-search .oc-sdk-input { height: 32px; font-size: 0.8125rem; }
+.oc-sdk-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 0.8125rem; text-align: left; }
+.oc-sdk-option[data-active="true"] { background: ${hover}; }
+.oc-sdk-option[aria-selected="true"] { background: ${selection}; color: ${selectionFg}; }
+.oc-sdk-option[data-destructive="true"] { color: ${errorText}; }
+.oc-sdk-option[data-destructive="true"][data-active="true"] { background: ${mix(v('status-error', 'red'), 10)}; }
+.oc-sdk-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-option-hint { flex: 0 0 auto; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-option-check { flex: 0 0 auto; width: 12px; }
+.oc-sdk-popup-empty { padding: 8px; font-size: 0.8125rem; color: ${muted}; }
+
+.oc-sdk-check { display: inline-flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; }
+.oc-sdk-check-box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-top: 3px; border: 1px solid ${border}; border-radius: 4px; color: ${primary}; transition: border-color 150ms ease-out; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-box { border-color: ${mix(primary, 65, border)}; }
+.oc-sdk-check-box > svg { display: none; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-box > svg { display: block; }
+.oc-sdk-check-thumb { flex: 0 0 auto; position: relative; width: 36px; height: 20px; border-radius: 9999px; background: ${border}; transition: background 150ms ease-out; }
+.oc-sdk-check-thumb::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px; background: ${bg}; transition: transform 150ms ease-out; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-thumb { background: ${primary}; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-thumb::after { transform: translateX(16px); }
+.oc-sdk-check:focus-visible { box-shadow: none; }
+.oc-sdk-check:focus-visible .oc-sdk-check-box, .oc-sdk-check:focus-visible .oc-sdk-check-thumb { ${focusRing} }
+.oc-sdk-check-text { display: flex; flex-direction: column; min-width: 0; }
+.oc-sdk-check-label { font-size: 0.875rem; }
+.oc-sdk-check-desc { font-size: 0.75rem; color: ${muted}; }
+
+.oc-sdk-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; max-width: 100%; overflow: auto; }
+.oc-sdk-tabs[data-track="true"] { background: ${mix(fg, 4)}; }
+.oc-sdk-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; color: ${muted}; white-space: nowrap; transition: color 150ms ease-out, background 150ms ease-out; }
+.oc-sdk-tab:hover { color: ${fg}; }
+.oc-sdk-tab[aria-selected="true"] { color: ${selectionFg}; background: ${selection}; border-color: ${border}; }
+.oc-sdk-tab-count { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: ${muted}; }
+
+.oc-sdk-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; background: ${hover}; color: ${muted}; }
+.oc-sdk-badge[data-tone] { color: var(--oc-sdk-tone-text, var(--oc-sdk-tone)); background: ${mix('var(--oc-sdk-tone)', 15)}; }
+
+.oc-sdk-list { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.oc-sdk-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; transition: background 120ms ease-out; }
+.oc-sdk-row:hover, .oc-sdk-row[data-active="true"] { background: ${hover}; }
+.oc-sdk-row[aria-selected="true"] { background: ${selection}; color: ${selectionFg}; }
+.oc-sdk-row-lead { flex: 0 0 auto; width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ${mono}; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
+.oc-sdk-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-row-meta { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: ${muted}; }
+.oc-sdk-row[aria-selected="true"] .oc-sdk-row-lead, .oc-sdk-row[aria-selected="true"] .oc-sdk-row-sub, .oc-sdk-row[aria-selected="true"] .oc-sdk-row-meta { color: inherit; opacity: .75; }
+.oc-sdk-list-empty { padding: 16px 8px; text-align: center; font-size: 0.8125rem; color: ${muted}; }
+
+.oc-sdk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 40px 16px; text-align: center; }
+.oc-sdk-empty-title { margin: 0; font-size: 0.8125rem; font-weight: 600; }
+.oc-sdk-empty-body { margin: 0; max-width: 32rem; font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-empty-action { margin-top: 12px; }
+
+@keyframes oc-sdk-spin { to { transform: rotate(360deg); } }
+.oc-sdk-spinner { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-spinner-ring { width: 16px; height: 16px; border: 2px solid ${border}; border-top-color: ${primary}; border-radius: 9999px; animation: oc-sdk-spin .8s linear infinite; }
+.oc-sdk-spinner[data-size="sm"] .oc-sdk-spinner-ring { width: 12px; height: 12px; }
+
+.oc-sdk-banner { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border: 1px solid ${mix('var(--oc-sdk-tone)', 40)}; border-radius: 8px; background: ${mix('var(--oc-sdk-tone)', 10)}; }
+.oc-sdk-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.oc-sdk-banner-title { font-size: 0.8125rem; font-weight: 500; color: var(--oc-sdk-tone-text, var(--oc-sdk-tone)); }
+.oc-sdk-banner-body { font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-banner-action { flex: 0 0 auto; }
+
+.oc-sdk-separator { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-separator::before, .oc-sdk-separator::after { content: ""; flex: 1 1 auto; height: 1px; background: ${mix(border, 40)}; }
+.oc-sdk-separator[data-labeled="false"]::after { display: none; }
+.oc-sdk-popup > .oc-sdk-separator { margin: 4px 0; }
+
+.oc-sdk-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-progress-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: ${muted}; font-variant-numeric: tabular-nums; }
+.oc-sdk-progress-track { height: 6px; border-radius: 9999px; background: ${border}; overflow: hidden; }
+.oc-sdk-progress-fill { height: 100%; border-radius: 9999px; background: var(--oc-sdk-tone, ${primary}); transform-origin: left; transition: transform 200ms ease-out; }
+
+.oc-sdk-menu { position: relative; display: inline-flex; }
+
+.oc-sdk-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.oc-sdk-text a { color: ${primaryText}; text-decoration: underline; text-underline-offset: 2px; }
+.oc-sdk-text img { display: block; max-width: 100%; margin: 8px 0; border-radius: 8px; border: 1px solid ${mix(border, 60)}; }
+`;

package/dist/ui/tabs.d.ts

@@ -0,0 +1,15 @@
+import { type Handle } from './dom.ts';
+export type TabItem = {
+    id: string;
+    label: string;
+    count?: number;
+};
+export type TabsProps = {
+    items: TabItem[];
+    activeId: string;
+    onChange: (id: string) => void;
+    /** Paints a faint track behind the pills. */
+    trackBackground?: boolean;
+};
+export type TabsHandle = Handle<TabsProps>;
+export declare const mountTabs: (root: Element, initial: TabsProps) => TabsHandle;

package/dist/ui/tabs.js

@@ -0,0 +1,61 @@
+import { button, clearNode, el, ensureStyle } from "./dom.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { UI_CSS } from "./style.js";
+export const mountTabs = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const track = el('div', 'oc-sdk oc-sdk-tabs');
+    track.setAttribute('role', 'tablist');
+    root.append(track);
+    const paint = () => {
+        clearNode(track);
+        track.dataset.track = props.trackBackground ? 'true' : 'false';
+        for (const item of props.items) {
+            const tab = button('oc-sdk-tab');
+            tab.setAttribute('role', 'tab');
+            const active = item.id === props.activeId;
+            tab.setAttribute('aria-selected', active ? 'true' : 'false');
+            tab.tabIndex = active ? 0 : -1;
+            tab.dataset.id = item.id;
+            const label = el('span');
+            label.textContent = item.label;
+            tab.append(label);
+            if (item.count !== undefined) {
+                const count = el('span', 'oc-sdk-tab-count');
+                count.textContent = String(item.count);
+                tab.append(count);
+            }
+            tab.addEventListener('click', () => {
+                if (item.id !== props.activeId)
+                    props.onChange(item.id);
+            });
+            track.append(tab);
+        }
+    };
+    const onKeyDown = (event) => {
+        const step = navigationKey(event, 'horizontal');
+        if (!step) {
+            return;
+        }
+        const next = moveListSelection(props.items, props.activeId, step);
+        if (next && next !== props.activeId) {
+            event.preventDefault();
+            props.onChange(next);
+            const tab = track.querySelector(`[data-id="${CSS.escape(next)}"]`);
+            if (tab instanceof HTMLElement)
+                tab.focus();
+        }
+    };
+    track.addEventListener('keydown', onKeyDown);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            track.removeEventListener('keydown', onKeyDown);
+            track.remove();
+        },
+    };
+};

package/dist/ui/text.d.ts

@@ -0,0 +1,23 @@
+import { type Handle } from './dom.ts';
+export type TextPart = {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'image';
+    src: string;
+    alt: string;
+} | {
+    kind: 'link';
+    href: string;
+    label: string;
+};
+export type TextProps = {
+    text: string;
+    /** Called with the href of a clicked link. A sandboxed iframe cannot open it alone. */
+    onOpenUrl?: (url: string) => void;
+};
+export type TextHandle = Handle<TextProps>;
+export declare const isHttpUrl: (value: string) => boolean;
+/** Splits text into plain runs, `![alt](https://…)` images, and `[label](https://…)` links. Anything else stays text. */
+export declare const splitTextMedia: (text: string) => TextPart[];
+export declare const mountText: (root: Element, initial: TextProps) => TextHandle;

package/dist/ui/text.js

@@ -0,0 +1,89 @@
+import { clearNode, el, ensureStyle } from "./dom.js";
+import { UI_CSS } from "./style.js";
+const MARKDOWN_TOKEN = /(!?)\[([^\]]*)\]\((https?:\/\/[^)\s]+)\)/g;
+export const isHttpUrl = (value) => {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+};
+/** Splits text into plain runs, `![alt](https://…)` images, and `[label](https://…)` links. Anything else stays text. */
+export const splitTextMedia = (text) => {
+    const parts = [];
+    let last = 0;
+    for (const match of text.matchAll(MARKDOWN_TOKEN)) {
+        const index = match.index ?? 0;
+        if (index > last) {
+            parts.push({ kind: 'text', text: text.slice(last, index) });
+        }
+        const marker = match[1] ?? '';
+        const label = (match[2] ?? '').trim();
+        const href = match[3] ?? '';
+        if (!isHttpUrl(href)) {
+            parts.push({ kind: 'text', text: match[0] });
+        }
+        else if (marker === '!') {
+            parts.push({ kind: 'image', src: href, alt: label });
+        }
+        else {
+            parts.push({ kind: 'link', href, label: label || href });
+        }
+        last = index + match[0].length;
+    }
+    if (last < text.length) {
+        parts.push({ kind: 'text', text: text.slice(last) });
+    }
+    return parts;
+};
+export const mountText = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('div', 'oc-sdk oc-sdk-text');
+    root.append(node);
+    const onClick = (event) => {
+        if (!(event.target instanceof HTMLAnchorElement) || !props.onOpenUrl) {
+            return;
+        }
+        event.preventDefault();
+        props.onOpenUrl(event.target.href);
+    };
+    const paint = () => {
+        clearNode(node);
+        for (const part of splitTextMedia(props.text)) {
+            if (part.kind === 'text') {
+                node.append(document.createTextNode(part.text));
+            }
+            else if (part.kind === 'link') {
+                const link = el('a');
+                link.href = part.href;
+                link.rel = 'noopener noreferrer';
+                link.target = '_blank';
+                link.textContent = part.label;
+                node.append(link);
+            }
+            else {
+                const img = el('img');
+                img.src = part.src;
+                img.alt = part.alt;
+                img.loading = 'lazy';
+                img.referrerPolicy = 'no-referrer';
+                node.append(img);
+            }
+        }
+    };
+    node.addEventListener('click', onClick);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.removeEventListener('click', onClick);
+            node.remove();
+        },
+    };
+};

package/dist/ui/theme.d.ts

@@ -0,0 +1,22 @@
+import type { GuestHostSurface, HostTheme } from '../contract.ts';
+export type ThemeRoot = {
+    style: {
+        colorScheme: string;
+        setProperty: (name: string, value: string) => void;
+    };
+    dataset?: {
+        ocSurface?: string;
+        ocTheme?: string;
+    };
+};
+/**
+ * Paint the host theme onto the iframe root. Guest chrome reads these
+ * variables, and the root itself gets the host font and text colour so plain
+ * DOM the guest draws outside the kit (a `<pre>`, a `<p>`) inherits them
+ * instead of the browser's serif default.
+ */
+export declare const applyHostTheme: (theme: HostTheme, root: ThemeRoot) => void;
+export declare const applyHostReady: (ctx: {
+    theme: HostTheme;
+    surface: GuestHostSurface;
+}, root: ThemeRoot) => void;

package/dist/ui/theme.js

@@ -0,0 +1,79 @@
+const TOKEN_VARS = [
+    ['--oc-bg', 'background'],
+    ['--oc-elevated', 'elevated'],
+    ['--oc-fg', 'foreground'],
+    ['--oc-muted', 'muted'],
+    ['--oc-subtle', 'subtle'],
+    ['--oc-border', 'border'],
+    ['--oc-hover', 'hover'],
+    ['--oc-selection', 'selection'],
+    ['--oc-focus', 'focus'],
+    ['--oc-primary', 'primary'],
+    ['--oc-muted-surface', 'mutedSurface'],
+    ['--oc-elevated-fg', 'elevatedForeground'],
+    ['--oc-active', 'active'],
+    ['--oc-selection-fg', 'selectionForeground'],
+    ['--oc-primary-fg', 'primaryForeground'],
+    ['--oc-primary-text', 'primaryText'],
+    ['--oc-success-text', 'successText'],
+    ['--oc-warning-text', 'warningText'],
+    ['--oc-error-text', 'errorText'],
+    ['--oc-info-text', 'infoText'],
+    ['--oc-success', 'success'],
+    ['--oc-warning', 'warning'],
+    ['--oc-error', 'error'],
+    ['--oc-info', 'info'],
+    ['--oc-font', 'font'],
+    ['--oc-mono', 'mono'],
+    ['--oc-radius', 'radius'],
+    ['--surface-background', 'background'],
+    ['--surface-elevated', 'elevated'],
+    ['--surface-foreground', 'foreground'],
+    ['--surface-muted-foreground', 'muted'],
+    ['--surface-subtle', 'subtle'],
+    ['--interactive-border', 'border'],
+    ['--interactive-hover', 'hover'],
+    ['--interactive-selection', 'selection'],
+    ['--interactive-focus-ring', 'focus'],
+    ['--primary', 'primary'],
+    ['--surface-muted', 'mutedSurface'],
+    ['--surface-elevated-foreground', 'elevatedForeground'],
+    ['--interactive-active', 'active'],
+    ['--interactive-selection-foreground', 'selectionForeground'],
+    ['--primary-foreground', 'primaryForeground'],
+    ['--primary-text', 'primaryText'],
+    ['--success-text', 'successText'],
+    ['--warning-text', 'warningText'],
+    ['--error-text', 'errorText'],
+    ['--info-text', 'infoText'],
+    ['--status-success', 'success'],
+    ['--status-warning', 'warning'],
+    ['--status-error', 'error'],
+    ['--status-info', 'info'],
+    ['--font-sans', 'font'],
+    ['--font-mono', 'mono'],
+    ['--radius', 'radius'],
+];
+/**
+ * Paint the host theme onto the iframe root. Guest chrome reads these
+ * variables, and the root itself gets the host font and text colour so plain
+ * DOM the guest draws outside the kit (a `<pre>`, a `<p>`) inherits them
+ * instead of the browser's serif default.
+ */
+export const applyHostTheme = (theme, root) => {
+    root.style.colorScheme = theme.mode;
+    for (const [name, key] of TOKEN_VARS) {
+        root.style.setProperty(name, theme.tokens[key]);
+    }
+    root.style.setProperty('font-family', theme.tokens.font);
+    root.style.setProperty('font-size', '0.875rem');
+    root.style.setProperty('line-height', '1.45');
+    root.style.setProperty('color', theme.tokens.foreground);
+};
+export const applyHostReady = (ctx, root) => {
+    applyHostTheme(ctx.theme, root);
+    if (root.dataset) {
+        root.dataset.ocSurface = ctx.surface;
+        root.dataset.ocTheme = ctx.theme.mode;
+    }
+};

package/dist/workspace-schemas.d.ts

@@ -0,0 +1,136 @@
+import { z } from 'zod';
+export declare const guestWorkspaceQuerySchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    kind: z.ZodLiteral<"projects">;
+}, z.core.$strict>, z.ZodObject<{
+    kind: z.ZodLiteral<"worktrees">;
+    projectId: z.ZodString;
+}, z.core.$strict>, z.ZodObject<{
+    kind: z.ZodLiteral<"sessions">;
+    projectId: z.ZodString;
+}, z.core.$strict>], "kind">;
+export declare const guestWorkspaceSnapshotSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    kind: z.ZodLiteral<"projects">;
+    state: z.ZodEnum<{
+        loading: "loading";
+        ready: "ready";
+        error: "error";
+    }>;
+    projects: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        name: z.ZodString;
+        directory: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"worktrees">;
+    projectId: z.ZodString;
+    state: z.ZodEnum<{
+        loading: "loading";
+        ready: "ready";
+        error: "error";
+    }>;
+    worktrees: z.ZodArray<z.ZodObject<{
+        directory: z.ZodString;
+        name: z.ZodString;
+        branch: z.ZodString;
+        status: z.ZodEnum<{
+            ready: "ready";
+            pending: "pending";
+            invalid: "invalid";
+            missing: "missing";
+        }>;
+    }, z.core.$strip>>;
+}, z.core.$strip>, z.ZodObject<{
+    kind: z.ZodLiteral<"sessions">;
+    projectId: z.ZodString;
+    state: z.ZodEnum<{
+        loading: "loading";
+        ready: "ready";
+        error: "error";
+    }>;
+    coverage: z.ZodArray<z.ZodObject<{
+        directory: z.ZodString;
+        state: z.ZodEnum<{
+            loading: "loading";
+            ready: "ready";
+            error: "error";
+        }>;
+    }, z.core.$strip>>;
+    sessions: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        title: z.ZodString;
+        projectId: z.ZodString;
+        directory: z.ZodString;
+        parentId: z.ZodNullable<z.ZodString>;
+        createdAt: z.ZodNumber;
+        updatedAt: z.ZodNumber;
+        archivedAt: z.ZodNullable<z.ZodNumber>;
+        worktree: z.ZodNullable<z.ZodObject<{
+            directory: z.ZodString;
+            name: z.ZodString;
+            branch: z.ZodString;
+            status: z.ZodEnum<{
+                ready: "ready";
+                pending: "pending";
+                invalid: "invalid";
+                missing: "missing";
+            }>;
+        }, z.core.$strip>>;
+        activity: z.ZodEnum<{
+            unknown: "unknown";
+            idle: "idle";
+            running: "running";
+            retrying: "retrying";
+            "waiting-permission": "waiting-permission";
+            "waiting-question": "waiting-question";
+        }>;
+        outcome: z.ZodNullable<z.ZodEnum<{
+            completed: "completed";
+            failed: "failed";
+        }>>;
+        items: z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            data: z.ZodOptional<z.ZodJSONSchema>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>], "kind">;
+export declare const guestSessionWorktreeSchema: z.ZodUnion<readonly [z.ZodBoolean, z.ZodObject<{
+    kind: z.ZodLiteral<"existing">;
+    directory: z.ZodString;
+}, z.core.$strict>, z.ZodObject<{
+    kind: z.ZodLiteral<"new">;
+    name: z.ZodOptional<z.ZodString>;
+    baseBranch: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>]>;
+export declare const guestStorageRequestSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    op: z.ZodLiteral<"get">;
+    key: z.ZodString;
+}, z.core.$strict>, z.ZodObject<{
+    op: z.ZodLiteral<"delete">;
+    key: z.ZodString;
+}, z.core.$strict>, z.ZodObject<{
+    op: z.ZodLiteral<"set">;
+    key: z.ZodString;
+    value: z.ZodJSONSchema;
+}, z.core.$strict>, z.ZodObject<{
+    op: z.ZodLiteral<"keys">;
+}, z.core.$strict>], "op">;
+export declare const guestStorageResultSchema: z.ZodUnion<readonly [z.ZodObject<{
+    storage: z.ZodLiteral<true>;
+    op: z.ZodLiteral<"get">;
+    found: z.ZodLiteral<false>;
+}, z.core.$strip>, z.ZodObject<{
+    storage: z.ZodLiteral<true>;
+    op: z.ZodLiteral<"get">;
+    found: z.ZodLiteral<true>;
+    value: z.ZodJSONSchema;
+}, z.core.$strip>, z.ZodObject<{
+    storage: z.ZodLiteral<true>;
+    op: z.ZodEnum<{
+        delete: "delete";
+        set: "set";
+    }>;
+}, z.core.$strip>, z.ZodObject<{
+    storage: z.ZodLiteral<true>;
+    op: z.ZodLiteral<"keys">;
+    keys: z.ZodArray<z.ZodString>;
+}, z.core.$strip>]>;