@openchamber/sdk 1.23.2-preview.1

package/dist/protocol.js

@@ -0,0 +1,450 @@
+import { z } from 'zod';
+import { guestSessionWorktreeSchema, guestStorageRequestSchema, guestStorageResultSchema, guestWorkspaceQuerySchema, guestWorkspaceSnapshotSchema } from "./workspace-schemas.js";
+import { OPENCHAMBER_SDK_API_VERSION, OPENCHAMBER_SDK_CHANNEL } from "./api-version.js";
+import { SERVICE_STATUS_VALUES, ATTACH_PROVIDER_ID, GUEST_ACCOUNT_MAX, GUEST_ATTACH_AUTHOR_MAX, GUEST_BADGE_MAX, GUEST_ITEM_MESSAGE_TEXT_MAX, GUEST_ITEM_SESSION_MAX, GUEST_RESOLVE_ERROR_MAX, GUEST_ATTACH_BRANCH_MAX, GUEST_ATTACH_DATA_MAX, GUEST_ATTACH_ID_MAX, GUEST_ATTACH_TEXT_MAX, GUEST_ATTACH_TITLE_MAX, GUEST_ATTACH_URL_MAX, GUEST_CLIPBOARD_TEXT_MAX, GUEST_COMPOSE_TEXT_MAX, GUEST_FILE_CONTENT_MAX, GUEST_FILE_ENTRY_KINDS, GUEST_FILE_LIST_MAX, GUEST_GENERATE_OUTPUT_TOKENS_MAX, GUEST_GENERATE_PROMPT_MAX, GUEST_GENERATE_SYSTEM_MAX, GUEST_GENERATE_TEXT_MAX, GUEST_FILE_PATH_MAX, GUEST_FILE_STAT_KINDS, GUEST_REQUEST_BODY_MAX, GUEST_REQUEST_PATH_MAX, GUEST_REQUEST_RESPONSE_MAX, GUEST_SESSION_AGENT_MAX, GUEST_SESSION_MODEL_MAX, GUEST_SETTING_VALUE_MAX, GUEST_TOAST_MAX, SESSION_LIFECYCLE_PHASES, SETTING_KEY, START_SESSION_SENT, isGuestFilePath, isGuestRequestPath, resolveHostRequestErrorCode, } from "./contract.js";
+const envelope = {
+    channel: z.literal(OPENCHAMBER_SDK_CHANNEL),
+    v: z.literal(OPENCHAMBER_SDK_API_VERSION),
+};
+const themeTokensSchema = z.object({
+    background: z.string().min(1),
+    elevated: z.string().min(1),
+    foreground: z.string().min(1),
+    muted: z.string().min(1),
+    subtle: z.string().min(1),
+    border: z.string().min(1),
+    hover: z.string().min(1),
+    selection: z.string().min(1),
+    focus: z.string().min(1),
+    primary: z.string().min(1),
+    mutedSurface: z.string().min(1),
+    elevatedForeground: z.string().min(1),
+    active: z.string().min(1),
+    selectionForeground: z.string().min(1),
+    primaryForeground: z.string().min(1),
+    success: z.string().min(1),
+    warning: z.string().min(1),
+    error: z.string().min(1),
+    info: z.string().min(1),
+    font: z.string().min(1),
+    mono: z.string().min(1),
+    radius: z.string().min(1),
+});
+const sessionSnapshotSchema = z.object({
+    id: z.string().min(1),
+    title: z.string().min(1),
+    busy: z.boolean().optional().default(false),
+    model: z.string().min(1).max(GUEST_SESSION_MODEL_MAX).optional(),
+    agent: z.string().min(1).max(GUEST_SESSION_AGENT_MAX).optional(),
+}).nullable();
+const guestConnectionSchema = z.object({
+    connected: z.boolean(),
+    account: z.string().max(GUEST_ACCOUNT_MAX),
+});
+const guestSettingsSchema = z.record(z.string().regex(SETTING_KEY), z.string().max(GUEST_SETTING_VALUE_MAX));
+const requestResultPayloadSchema = z.object({
+    status: z.number().int().min(100).max(599),
+    body: z.string().max(GUEST_REQUEST_RESPONSE_MAX),
+});
+const resultWorktree = z.object({ directory: z.string(), name: z.string(), branch: z.string(), status: z.enum(['ready', 'pending', 'invalid', 'missing']) });
+const startSessionResultPayloadSchema = z.union([z.object({
+        sessionId: z.string().min(1),
+        sent: z.enum(START_SESSION_SENT),
+        directory: z.string().optional(), worktree: resultWorktree.optional(), linked: z.boolean().optional(),
+    }), z.object({ sessionId: z.null(), sent: z.literal('skipped'), directory: z.string(), worktree: resultWorktree, failure: z.enum(['bootstrap-failed', 'session-create-failed']) })]);
+const promptResultPayloadSchema = z.object({
+    sent: z.enum(START_SESSION_SENT),
+});
+const serviceStatusResultPayloadSchema = z.object({
+    status: z.enum(SERVICE_STATUS_VALUES),
+});
+const fileReadResultPayloadSchema = z.object({
+    content: z.string().max(GUEST_FILE_CONTENT_MAX),
+});
+const fileWriteResultPayloadSchema = z.object({
+    written: z.literal(true),
+});
+const fileListResultPayloadSchema = z.object({
+    entries: z.array(z.object({
+        name: z.string().min(1),
+        kind: z.enum(GUEST_FILE_ENTRY_KINDS),
+    })).max(GUEST_FILE_LIST_MAX),
+});
+const fileStatResultPayloadSchema = z.object({
+    kind: z.enum(GUEST_FILE_STAT_KINDS),
+    size: z.number().int().min(0),
+    mtime: z.number().int().min(0),
+});
+const generateResultPayloadSchema = z.object({
+    text: z.string().max(GUEST_GENERATE_TEXT_MAX),
+});
+const hostResultPayloadSchema = z.union([
+    guestStorageResultSchema,
+    guestWorkspaceSnapshotSchema,
+    startSessionResultPayloadSchema,
+    requestResultPayloadSchema,
+    promptResultPayloadSchema,
+    serviceStatusResultPayloadSchema,
+    fileReadResultPayloadSchema,
+    fileWriteResultPayloadSchema,
+    fileListResultPayloadSchema,
+    fileStatResultPayloadSchema,
+    generateResultPayloadSchema,
+]);
+const attachPayloadSchema = z.object({
+    providerId: z.string().trim().regex(ATTACH_PROVIDER_ID),
+    id: z.string().trim().min(1).max(GUEST_ATTACH_ID_MAX),
+    title: z.string().trim().min(1).max(GUEST_ATTACH_TITLE_MAX),
+    url: z.string().trim().min(1).max(GUEST_ATTACH_URL_MAX),
+    text: z.string().trim().min(1).max(GUEST_ATTACH_TEXT_MAX).optional(),
+    kind: z.enum(['issue', 'pull']).optional(),
+    author: z.string().trim().min(1).max(GUEST_ATTACH_AUTHOR_MAX).optional(),
+    branches: z.object({
+        head: z.string().trim().min(1).max(GUEST_ATTACH_BRANCH_MAX),
+        base: z.string().trim().min(1).max(GUEST_ATTACH_BRANCH_MAX),
+    }).optional(),
+    data: z.json().refine((value) => JSON.stringify(value).length <= GUEST_ATTACH_DATA_MAX).optional(),
+});
+const guestItemRoleSchema = z.enum(['user', 'assistant']);
+const messageItemSchema = z.object({
+    kind: z.literal('message'),
+    action: z.string().trim().min(1).max(64),
+    sessionId: z.string().min(1),
+    sessionTitle: z.string(),
+    directory: z.string().nullable(),
+    messageId: z.string().min(1),
+    role: guestItemRoleSchema,
+    text: z.string().max(GUEST_ITEM_MESSAGE_TEXT_MAX),
+});
+const sessionItemSchema = z.object({
+    kind: z.literal('session'),
+    action: z.string().trim().min(1).max(64),
+    sessionId: z.string().min(1),
+    sessionTitle: z.string(),
+    directory: z.string().nullable(),
+    messages: z.array(z.object({
+        id: z.string().min(1),
+        role: guestItemRoleSchema,
+        text: z.string().max(GUEST_ITEM_MESSAGE_TEXT_MAX),
+        createdAt: z.number().int().min(0),
+    })).optional(),
+    truncated: z.boolean().optional(),
+}).refine((value) => JSON.stringify(value).length <= GUEST_ITEM_SESSION_MAX);
+// Message and session items carry a literal `kind`; the chip's optional
+// `kind` is `issue` / `pull`, so the three never overlap.
+const guestItemSchema = z.union([messageItemSchema, sessionItemSchema, attachPayloadSchema]).nullable();
+const readyPayloadSchema = z.object({
+    theme: z.object({
+        mode: z.enum(['light', 'dark']),
+        tokens: themeTokensSchema,
+    }),
+    locale: z.string().min(1),
+    directory: z.string().nullable(),
+    session: sessionSnapshotSchema,
+    surface: z.enum(['panel', 'dialog', 'page']),
+    connection: guestConnectionSchema,
+    settings: guestSettingsSchema,
+    item: guestItemSchema,
+});
+const hostResultSchema = z.object({
+    ...envelope,
+    type: z.literal('result'),
+    id: z.string().min(1),
+    ok: z.boolean(),
+    error: z.string().min(1).optional(),
+    code: z.string().min(1).optional(),
+    payload: hostResultPayloadSchema.optional(),
+}).transform((message, ctx) => {
+    if (message.ok) {
+        if (message.payload) {
+            return {
+                channel: message.channel,
+                v: message.v,
+                type: 'result',
+                id: message.id,
+                ok: true,
+                payload: message.payload,
+            };
+        }
+        return {
+            channel: message.channel,
+            v: message.v,
+            type: 'result',
+            id: message.id,
+            ok: true,
+        };
+    }
+    if (!message.error) {
+        ctx.addIssue({ code: 'custom', message: 'Failed result needs an error string.' });
+        return z.NEVER;
+    }
+    return {
+        channel: message.channel,
+        v: message.v,
+        type: 'result',
+        id: message.id,
+        ok: false,
+        error: message.error,
+        code: resolveHostRequestErrorCode(message.code),
+    };
+});
+export const hostMessageSchema = z.union([
+    z.object({ ...envelope, type: z.literal('workspace'), payload: z.object({ subscriptionId: z.string().min(1).max(128), snapshot: guestWorkspaceSnapshotSchema }) }),
+    z.object({
+        ...envelope,
+        type: z.literal('ready'),
+        payload: readyPayloadSchema,
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('directory'),
+        payload: z.object({
+            directory: z.string().nullable(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('session'),
+        payload: z.object({
+            session: sessionSnapshotSchema,
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('connection'),
+        payload: z.object({
+            connection: guestConnectionSchema,
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('settings'),
+        payload: z.object({
+            settings: guestSettingsSchema,
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('session-lifecycle'),
+        payload: z.object({
+            sessionId: z.string().min(1),
+            phase: z.enum(SESSION_LIFECYCLE_PHASES),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('item'),
+        payload: z.object({
+            item: guestItemSchema,
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('resolve'),
+        id: z.string().min(1),
+        payload: z.object({
+            command: z.string().min(1),
+            args: z.string(),
+        }),
+    }),
+    hostResultSchema,
+]);
+const filePathSchema = z.string().min(1).max(GUEST_FILE_PATH_MAX).refine(isGuestFilePath);
+export const guestMessageSchema = z.discriminatedUnion('type', [
+    z.object({ ...envelope, type: z.literal('workspace-read'), id: z.string().min(1), payload: guestWorkspaceQuerySchema }),
+    z.object({ ...envelope, type: z.literal('workspace-subscribe'), id: z.string().min(1), payload: z.object({ subscriptionId: z.string().min(1).max(128), query: guestWorkspaceQuerySchema }) }),
+    z.object({ ...envelope, type: z.literal('workspace-unsubscribe'), id: z.string().min(1), payload: z.object({ subscriptionId: z.string().min(1).max(128) }) }),
+    z.object({ ...envelope, type: z.literal('storage'), id: z.string().min(1), payload: guestStorageRequestSchema }),
+    z.object({ ...envelope, type: z.literal('open-session'), id: z.string().min(1), payload: z.object({ sessionId: z.string().min(1).max(1024) }) }),
+    z.object({
+        ...envelope,
+        type: z.literal('hello'),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('toast'),
+        id: z.string().min(1),
+        payload: z.object({
+            kind: z.enum(['info', 'success', 'error']),
+            message: z.string().trim().min(1).max(GUEST_TOAST_MAX),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('open-url'),
+        id: z.string().min(1),
+        payload: z.object({
+            url: z.string().trim().min(1).max(GUEST_ATTACH_URL_MAX),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('open-surface'),
+        id: z.string().min(1),
+        payload: z.object({
+            surfaceId: z.string().trim().min(1).max(64),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('clipboard-write'),
+        id: z.string().min(1),
+        payload: z.object({
+            text: z.string().min(1).max(GUEST_CLIPBOARD_TEXT_MAX),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('compose'),
+        id: z.string().min(1),
+        payload: z.object({
+            text: z.string().trim().min(1).max(GUEST_COMPOSE_TEXT_MAX),
+            mode: z.enum(['replace', 'append']).optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('attach'),
+        id: z.string().min(1),
+        payload: attachPayloadSchema,
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('start-session'),
+        id: z.string().min(1),
+        payload: attachPayloadSchema.extend({
+            worktree: guestSessionWorktreeSchema.optional(),
+            projectId: z.string().trim().min(1).max(1024).optional(),
+            navigation: z.enum(['preserve', 'open']).optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('prompt'),
+        id: z.string().min(1),
+        payload: z.object({
+            text: z.string().trim().min(1).max(GUEST_COMPOSE_TEXT_MAX),
+            send: z.boolean().optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('session-link'),
+        id: z.string().min(1),
+        payload: attachPayloadSchema,
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('close'),
+        id: z.string().min(1),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('oauth-start'),
+        id: z.string().min(1),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('oauth-disconnect'),
+        id: z.string().min(1),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('request'),
+        id: z.string().min(1),
+        payload: z.object({
+            method: z.enum(['GET', 'POST', 'PUT', 'PATCH', 'DELETE']),
+            path: z.string().trim().min(1).max(GUEST_REQUEST_PATH_MAX).refine(isGuestRequestPath),
+            query: z.record(z.string().min(1).max(128), z.string().max(2_000)).optional(),
+            body: z.string().max(GUEST_REQUEST_BODY_MAX).optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('service-request'),
+        id: z.string().min(1),
+        payload: z.object({
+            method: z.enum(['GET', 'POST', 'PUT', 'PATCH', 'DELETE']),
+            path: z.string().trim().min(1).max(GUEST_REQUEST_PATH_MAX).refine(isGuestRequestPath),
+            query: z.record(z.string().min(1).max(128), z.string().max(2_000)).optional(),
+            body: z.string().max(GUEST_REQUEST_BODY_MAX).optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('service-status'),
+        id: z.string().min(1),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('file-read'),
+        id: z.string().min(1),
+        payload: z.object({ path: filePathSchema }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('file-write'),
+        id: z.string().min(1),
+        payload: z.object({
+            path: filePathSchema,
+            content: z.string().max(GUEST_FILE_CONTENT_MAX),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('file-list'),
+        id: z.string().min(1),
+        payload: z.object({ path: filePathSchema }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('file-stat'),
+        id: z.string().min(1),
+        payload: z.object({ path: filePathSchema }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('generate'),
+        id: z.string().min(1),
+        payload: z.object({
+            prompt: z.string().trim().min(1).max(GUEST_GENERATE_PROMPT_MAX),
+            system: z.string().trim().min(1).max(GUEST_GENERATE_SYSTEM_MAX).optional(),
+            maxOutputTokens: z.number().int().min(1).max(GUEST_GENERATE_OUTPUT_TOKENS_MAX).optional(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('badge'),
+        id: z.string().min(1),
+        payload: z.object({
+            count: z.number().int().min(0).max(GUEST_BADGE_MAX).nullable(),
+        }),
+    }),
+    z.object({
+        ...envelope,
+        type: z.literal('resolve-result'),
+        id: z.string().min(1),
+        payload: z.union([
+            z.object({ item: attachPayloadSchema.nullable() }),
+            z.object({ error: z.string().trim().min(1).max(GUEST_RESOLVE_ERROR_MAX) }),
+        ]),
+    }),
+]);
+// The hand-written contract types and the schemas must describe the same wire
+// shapes; either drifting from the other fails this file's type-check.
+const assertHostParsed = (value) => value;
+const assertHostContract = (value) => value;
+const assertGuestParsed = (value) => value;
+const assertGuestContract = (value) => value;
+void assertHostParsed;
+void assertHostContract;
+void assertGuestParsed;
+void assertGuestContract;
+export const parseHostMessage = (document) => {
+    const parsed = hostMessageSchema.safeParse(document);
+    return parsed.success ? parsed.data : null;
+};
+export const parseGuestMessage = (document) => {
+    const parsed = guestMessageSchema.safeParse(document);
+    return parsed.success ? parsed.data : null;
+};

package/dist/schemas.d.ts

@@ -0,0 +1,4 @@
+export { openChamberManifestSchema, PACKAGE_VERSION_PATTERN, packageManifestSchema, parseManifest, parseManifestJson, } from './parse.ts';
+export type { ManifestDocument } from './parse.ts';
+export { guestStorageRequestSchema, guestStorageResultSchema, guestWorkspaceSnapshotSchema } from './workspace-schemas.ts';
+export { guestMessageSchema, hostMessageSchema, parseGuestMessage, parseHostMessage, } from './protocol.ts';

package/dist/schemas.js

@@ -0,0 +1,6 @@
+// Host-side parsing. OpenChamber (browser host and server) imports this to
+// validate an untrusted guest's manifest and messages with zod. Guests import
+// `@openchamber/sdk`, which carries no schema library.
+export { openChamberManifestSchema, PACKAGE_VERSION_PATTERN, packageManifestSchema, parseManifest, parseManifestJson, } from "./parse.js";
+export { guestStorageRequestSchema, guestStorageResultSchema, guestWorkspaceSnapshotSchema } from "./workspace-schemas.js";
+export { guestMessageSchema, hostMessageSchema, parseGuestMessage, parseHostMessage, } from "./protocol.js";

package/dist/ui/badge.d.ts

@@ -0,0 +1,10 @@
+import { type Handle } from './dom.ts';
+export type Tone = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeProps = {
+    label: string;
+    tone?: Tone;
+};
+export type BadgeHandle = Handle<BadgeProps>;
+/** Writes `data-tone` for toned colours; neutral removes it. */
+export declare const applyTone: (node: Element, tone: Tone | undefined) => void;
+export declare const mountBadge: (root: Element, initial: BadgeProps) => BadgeHandle;

package/dist/ui/badge.js

@@ -0,0 +1,26 @@
+import { el, ensureStyle, setAttr, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+/** Writes `data-tone` for toned colours; neutral removes it. */
+export const applyTone = (node, tone) => {
+    setAttr(node, 'data-tone', tone && tone !== 'neutral' ? tone : null);
+};
+export const mountBadge = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('span', 'oc-sdk oc-sdk-badge');
+    root.append(node);
+    const paint = () => {
+        setText(node, props.label);
+        applyTone(node, props.tone);
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.remove();
+        },
+    };
+};

package/dist/ui/banner.d.ts

@@ -0,0 +1,13 @@
+import { type Handle } from './dom.ts';
+export type BannerTone = 'info' | 'success' | 'warning' | 'error';
+export type BannerProps = {
+    tone: BannerTone;
+    title: string;
+    body?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type BannerHandle = Handle<BannerProps>;
+export declare const mountBanner: (root: Element, initial: BannerProps) => BannerHandle;

package/dist/ui/banner.js

@@ -0,0 +1,48 @@
+import { mountButton } from "./button.js";
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountBanner = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('div', 'oc-sdk oc-sdk-banner');
+    const text = el('div', 'oc-sdk-banner-text');
+    const title = el('div', 'oc-sdk-banner-title');
+    const body = el('div', 'oc-sdk-banner-body');
+    const slot = el('div', 'oc-sdk-banner-action');
+    text.append(title, body);
+    node.append(text, slot);
+    root.append(node);
+    let action = null;
+    const paint = () => {
+        node.dataset.tone = props.tone;
+        node.setAttribute('role', props.tone === 'error' || props.tone === 'warning' ? 'alert' : 'status');
+        setText(title, props.title);
+        setText(body, props.body);
+        body.hidden = !props.body;
+        slot.hidden = !props.action;
+        if (!props.action) {
+            action?.dispose();
+            action = null;
+            return;
+        }
+        const next = { label: props.action.label, onClick: props.action.onClick };
+        if (action) {
+            action.update(next);
+        }
+        else {
+            action = mountButton(slot, { ...next, variant: 'outline', size: 'xs' });
+        }
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            action?.dispose();
+            action = null;
+            node.remove();
+        },
+    };
+};

package/dist/ui/button.d.ts

@@ -0,0 +1,14 @@
+import { type Handle } from './dom.ts';
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+export type ButtonSize = 'default' | 'sm' | 'xs';
+export type ButtonProps = {
+    label: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    /** Shows a spinner in front of the label and blocks clicks. */
+    loading?: boolean;
+    onClick: () => void;
+};
+export type ButtonHandle = Handle<ButtonProps>;
+export declare const mountButton: (root: Element, initial: ButtonProps) => ButtonHandle;

package/dist/ui/button.js

@@ -0,0 +1,49 @@
+import { button, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+const ring = () => {
+    const spinner = document.createElement('span');
+    spinner.className = 'oc-sdk-spinner-ring';
+    spinner.setAttribute('aria-hidden', 'true');
+    return spinner;
+};
+export const mountButton = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = button('oc-sdk oc-sdk-btn');
+    const spinner = ring();
+    const label = document.createElement('span');
+    node.append(label);
+    root.append(node);
+    const paint = () => {
+        node.dataset.variant = props.variant ?? 'default';
+        node.dataset.size = props.size ?? 'default';
+        node.disabled = Boolean(props.disabled) || Boolean(props.loading);
+        node.dataset.loading = props.loading ? 'true' : 'false';
+        node.setAttribute('aria-busy', props.loading ? 'true' : 'false');
+        if (props.loading && spinner.parentNode !== node) {
+            node.prepend(spinner);
+        }
+        else if (!props.loading && spinner.parentNode === node) {
+            spinner.remove();
+        }
+        setText(label, props.label);
+    };
+    const onClick = () => {
+        if (props.disabled || props.loading) {
+            return;
+        }
+        props.onClick();
+    };
+    node.addEventListener('click', onClick);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.removeEventListener('click', onClick);
+            node.remove();
+        },
+    };
+};

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { type Handle } from './dom.ts';
+export type CheckboxProps = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Muted line under the label. */
+    description?: string;
+};
+export type CheckboxHandle = Handle<CheckboxProps>;
+export declare const mountCheckbox: (root: Element, initial: CheckboxProps) => CheckboxHandle;
+export declare const mountSwitch: (root: Element, initial: CheckboxProps) => CheckboxHandle;

package/dist/ui/checkbox.js

@@ -0,0 +1,45 @@
+import { button, el, ensureStyle, setText } from "./dom.js";
+import { icon } from "./icons.js";
+import { UI_CSS } from "./style.js";
+const mountToggle = (root, initial, role) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = button('oc-sdk oc-sdk-check');
+    node.setAttribute('role', role);
+    const control = el('span', role === 'switch' ? 'oc-sdk-check-thumb' : 'oc-sdk-check-box');
+    if (role === 'checkbox') {
+        control.append(icon('check', 12));
+    }
+    const text = el('span', 'oc-sdk-check-text');
+    const label = el('span', 'oc-sdk-check-label');
+    const description = el('span', 'oc-sdk-check-desc');
+    text.append(label, description);
+    node.append(control, text);
+    root.append(node);
+    const paint = () => {
+        node.setAttribute('aria-checked', props.checked ? 'true' : 'false');
+        node.disabled = Boolean(props.disabled);
+        setText(label, props.label);
+        setText(description, props.description);
+        description.hidden = !props.description;
+    };
+    const onClick = () => {
+        if (!props.disabled) {
+            props.onChange(!props.checked);
+        }
+    };
+    node.addEventListener('click', onClick);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.removeEventListener('click', onClick);
+            node.remove();
+        },
+    };
+};
+export const mountCheckbox = (root, initial) => (mountToggle(root, initial, 'checkbox'));
+export const mountSwitch = (root, initial) => (mountToggle(root, initial, 'switch'));