@ryanyahya/opendoc 0.4.0

package/node_modules/undici-types/webidl.d.ts

@@ -0,0 +1,228 @@
+// These types are not exported, and are only used internally
+
+/**
+ * Take in an unknown value and return one that is of type T
+ */
+type Converter<T> = (object: unknown) => T
+
+type SequenceConverter<T> = (object: unknown, iterable?: IterableIterator<T>) => T[]
+
+type RecordConverter<K extends string, V> = (object: unknown) => Record<K, V>
+
+interface ConvertToIntOpts {
+  clamp?: boolean
+  enforceRange?: boolean
+}
+
+interface WebidlErrors {
+  exception (opts: { header: string, message: string }): TypeError
+  /**
+   * @description Throw an error when conversion from one type to another has failed
+   */
+  conversionFailed (opts: {
+    prefix: string
+    argument: string
+    types: string[]
+  }): TypeError
+  /**
+   * @description Throw an error when an invalid argument is provided
+   */
+  invalidArgument (opts: {
+    prefix: string
+    value: string
+    type: string
+  }): TypeError
+}
+
+interface WebidlUtil {
+  /**
+   * @see https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values
+   */
+  Type (object: unknown):
+    | 'Undefined'
+    | 'Boolean'
+    | 'String'
+    | 'Symbol'
+    | 'Number'
+    | 'BigInt'
+    | 'Null'
+    | 'Object'
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#abstract-opdef-converttoint
+   */
+  ConvertToInt (
+    V: unknown,
+    bitLength: number,
+    signedness: 'signed' | 'unsigned',
+    opts?: ConvertToIntOpts
+  ): number
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#abstract-opdef-converttoint
+   */
+  IntegerPart (N: number): number
+
+  /**
+   * Stringifies {@param V}
+   */
+  Stringify (V: any): string
+
+  /**
+   * Mark a value as uncloneable for Node.js.
+   * This is only effective in some newer Node.js versions.
+   */
+  markAsUncloneable (V: any): void
+}
+
+interface WebidlConverters {
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-DOMString
+   */
+  DOMString (V: unknown, prefix: string, argument: string, opts?: {
+    legacyNullToEmptyString: boolean
+  }): string
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-ByteString
+   */
+  ByteString (V: unknown, prefix: string, argument: string): string
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-USVString
+   */
+  USVString (V: unknown): string
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-boolean
+   */
+  boolean (V: unknown): boolean
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-any
+   */
+  any <Value>(V: Value): Value
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-long-long
+   */
+  ['long long'] (V: unknown): number
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-unsigned-long-long
+   */
+  ['unsigned long long'] (V: unknown): number
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-unsigned-long
+   */
+  ['unsigned long'] (V: unknown): number
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-unsigned-short
+   */
+  ['unsigned short'] (V: unknown, opts?: ConvertToIntOpts): number
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#idl-ArrayBuffer
+   */
+  ArrayBuffer (V: unknown): ArrayBufferLike
+  ArrayBuffer (V: unknown, opts: { allowShared: false }): ArrayBuffer
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-buffer-source-types
+   */
+  TypedArray (
+    V: unknown,
+    TypedArray: NodeJS.TypedArray | ArrayBufferLike
+  ): NodeJS.TypedArray | ArrayBufferLike
+  TypedArray (
+    V: unknown,
+    TypedArray: NodeJS.TypedArray | ArrayBufferLike,
+    opts?: { allowShared: false }
+  ): NodeJS.TypedArray | ArrayBuffer
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-buffer-source-types
+   */
+  DataView (V: unknown, opts?: { allowShared: boolean }): DataView
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#BufferSource
+   */
+  BufferSource (
+    V: unknown,
+    opts?: { allowShared: boolean }
+  ): NodeJS.TypedArray | ArrayBufferLike | DataView
+
+  ['sequence<ByteString>']: SequenceConverter<string>
+  
+  ['sequence<sequence<ByteString>>']: SequenceConverter<string[]>
+
+  ['record<ByteString, ByteString>']: RecordConverter<string, string>
+
+  [Key: string]: (...args: any[]) => unknown
+}
+
+export interface Webidl {
+  errors: WebidlErrors
+  util: WebidlUtil
+  converters: WebidlConverters
+
+  /**
+   * @description Performs a brand-check on {@param V} to ensure it is a
+   * {@param cls} object.
+   */
+  brandCheck <Interface>(V: unknown, cls: Interface, opts?: { strict?: boolean }): asserts V is Interface
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-sequence
+   * @description Convert a value, V, to a WebIDL sequence type.
+   */
+  sequenceConverter <Type>(C: Converter<Type>): SequenceConverter<Type>
+
+  illegalConstructor (): never
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#es-to-record
+   * @description Convert a value, V, to a WebIDL record type.
+   */
+  recordConverter <K extends string, V>(
+    keyConverter: Converter<K>,
+    valueConverter: Converter<V>
+  ): RecordConverter<K, V>
+
+  /**
+   * Similar to {@link Webidl.brandCheck} but allows skipping the check if third party
+   * interfaces are allowed.
+   */
+  interfaceConverter <Interface>(cls: Interface): (
+    V: unknown,
+    opts?: { strict: boolean }
+  ) => asserts V is typeof cls
+
+  // TODO(@KhafraDev): a type could likely be implemented that can infer the return type
+  // from the converters given?
+  /**
+   * Converts a value, V, to a WebIDL dictionary types. Allows limiting which keys are
+   * allowed, values allowed, optional and required keys. Auto converts the value to
+   * a type given a converter.
+   */
+  dictionaryConverter (converters: {
+    key: string,
+    defaultValue?: () => unknown,
+    required?: boolean,
+    converter: (...args: unknown[]) => unknown,
+    allowedValues?: unknown[]
+  }[]): (V: unknown) => Record<string, unknown>
+
+  /**
+   * @see https://webidl.spec.whatwg.org/#idl-nullable-type
+   * @description allows a type, V, to be null
+   */
+  nullableConverter <T>(
+    converter: Converter<T>
+  ): (V: unknown) => ReturnType<typeof converter> | null
+
+  argumentLengthCheck (args: { length: number }, min: number, context: string): void
+}

package/node_modules/undici-types/websocket.d.ts

@@ -0,0 +1,150 @@
+/// <reference types="node" />
+
+import type { Blob } from 'buffer'
+import type { MessagePort } from 'worker_threads'
+import {
+  EventInit,
+  EventListenerOptions,
+  AddEventListenerOptions,
+  EventListenerOrEventListenerObject
+} from './patch'
+import Dispatcher from './dispatcher'
+import { HeadersInit } from './fetch'
+
+export type BinaryType = 'blob' | 'arraybuffer'
+
+interface WebSocketEventMap {
+  close: CloseEvent
+  error: ErrorEvent
+  message: MessageEvent
+  open: Event
+}
+
+interface WebSocket extends EventTarget {
+  binaryType: BinaryType
+  
+  readonly bufferedAmount: number
+  readonly extensions: string
+
+  onclose: ((this: WebSocket, ev: WebSocketEventMap['close']) => any) | null
+  onerror: ((this: WebSocket, ev: WebSocketEventMap['error']) => any) | null
+  onmessage: ((this: WebSocket, ev: WebSocketEventMap['message']) => any) | null
+  onopen: ((this: WebSocket, ev: WebSocketEventMap['open']) => any) | null
+
+  readonly protocol: string
+  readonly readyState: number
+  readonly url: string
+
+  close(code?: number, reason?: string): void
+  send(data: string | ArrayBufferLike | Blob | ArrayBufferView): void
+
+  readonly CLOSED: number
+  readonly CLOSING: number
+  readonly CONNECTING: number
+  readonly OPEN: number
+
+  addEventListener<K extends keyof WebSocketEventMap>(
+    type: K,
+    listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  removeEventListener<K extends keyof WebSocketEventMap>(
+    type: K,
+    listener: (this: WebSocket, ev: WebSocketEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void
+}
+
+export declare const WebSocket: {
+  prototype: WebSocket
+  new (url: string | URL, protocols?: string | string[] | WebSocketInit): WebSocket
+  readonly CLOSED: number
+  readonly CLOSING: number
+  readonly CONNECTING: number
+  readonly OPEN: number
+}
+
+interface CloseEventInit extends EventInit {
+  code?: number
+  reason?: string
+  wasClean?: boolean
+}
+
+interface CloseEvent extends Event {
+  readonly code: number
+  readonly reason: string
+  readonly wasClean: boolean
+}
+
+export declare const CloseEvent: {
+  prototype: CloseEvent
+  new (type: string, eventInitDict?: CloseEventInit): CloseEvent
+}
+
+interface MessageEventInit<T = any> extends EventInit {
+  data?: T
+  lastEventId?: string
+  origin?: string
+  ports?: (typeof MessagePort)[]
+  source?: typeof MessagePort | null
+}
+
+interface MessageEvent<T = any> extends Event {
+  readonly data: T
+  readonly lastEventId: string
+  readonly origin: string
+  readonly ports: ReadonlyArray<typeof MessagePort>
+  readonly source: typeof MessagePort | null
+  initMessageEvent(
+    type: string,
+    bubbles?: boolean,
+    cancelable?: boolean,
+    data?: any,
+    origin?: string,
+    lastEventId?: string,
+    source?: typeof MessagePort | null,
+    ports?: (typeof MessagePort)[]
+  ): void;
+}
+
+export declare const MessageEvent: {
+  prototype: MessageEvent
+  new<T>(type: string, eventInitDict?: MessageEventInit<T>): MessageEvent<T>
+}
+
+interface ErrorEventInit extends EventInit {
+  message?: string
+  filename?: string
+  lineno?: number
+  colno?: number
+  error?: any
+}
+
+interface ErrorEvent extends Event {
+  readonly message: string
+  readonly filename: string
+  readonly lineno: number
+  readonly colno: number
+  readonly error: any
+}
+
+export declare const ErrorEvent: {
+  prototype: ErrorEvent
+  new (type: string, eventInitDict?: ErrorEventInit): ErrorEvent
+}
+
+interface WebSocketInit {
+  protocols?: string | string[],
+  dispatcher?: Dispatcher,
+  headers?: HeadersInit
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@ryanyahya/opendoc",
+  "version": "0.4.0",
+  "description": "A local, agent-driven workspace for documents and editable presentations.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "opendoc": {
+    "edition": "normal"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@formepdf/core": "0.20.1-opendoc.3",
+    "@formepdf/react": "0.20.1",
+    "@napi-rs/canvas": "1.0.8",
+    "@resvg/resvg-js": "^2.6.2",
+    "@shbernal/ts-pptx": "3.7.0",
+    "chokidar": "^4.0.3",
+    "fast-xml-parser": "^5.11.1",
+    "fontkit": "^2.0.4",
+    "pdfjs-dist": "6.3.289",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "ttf2eot": "3.1.0",
+    "ws": "^8.21.3",
+    "@types/fontkit": "^2.0.9",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/ws": "^8.18.1",
+    "esbuild": "0.28.2",
+    "tsx": "^4.20.0",
+    "typescript": "^5.9.3"
+  },
+  "bin": {
+    "opendoc": "./bin/opendoc.mjs"
+  },
+  "exports": {
+    ".": "./src/document/index.tsx",
+    "./assets": "./src/assets/index.ts",
+    "./template": "./src/template/index.ts",
+    "./themes": "./src/themes/index.ts",
+    "./jsx-runtime": "./src/runtime/jsx-runtime.ts",
+    "./jsx-dev-runtime": "./src/runtime/jsx-dev-runtime.ts",
+    "./package.json": "./package.json",
+    "./tsconfig.workspace.json": "./tsconfig.workspace.json"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "dist/",
+    "starter/",
+    "docs/",
+    ".agents/skills/",
+    "AGENTS.md",
+    "README.md",
+    "VALIDATION.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md",
+    "LICENSE",
+    "THIRD_PARTY.md",
+    "licenses/",
+    "vendor/formepdf/",
+    "tsconfig.workspace.json",
+    "scripts/rebuild-forme.mjs"
+  ],
+  "bundleDependencies": [
+    "@formepdf/core",
+    "@formepdf/react",
+    "@types/node",
+    "@types/react"
+  ]
+}

package/scripts/rebuild-forme.mjs

@@ -0,0 +1,61 @@
+// Maintenance only. Normal installations use the checked-in package archive.
+import { execFileSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { cpSync, existsSync, mkdirSync, mkdtempSync, readFileSync, realpathSync, rmSync, writeFileSync } from 'node:fs';
+import { homedir, tmpdir } from 'node:os';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const destination = resolve(root, 'vendor/formepdf');
+const work = process.argv[2]
+  ? resolve(process.argv[2])
+  : mkdtempSync(resolve(tmpdir(), 'opendoc-forme-rebuild-'));
+if (process.argv[2] && existsSync(work)) throw new Error(`Choose a new build directory; ${work} already exists.`);
+const commit = '0d706f839617b775e90edcc93d6001a8b0145a78';
+const originalIntegrity = '348ERmxZGqMbTuLzAikY/ktKqn+FZuFuxT6KBLf0k9s4wHO8kR9z8C4fMutPYXy9dM+ynVlr+Buqt6xPCE6RkA==';
+const env = { ...process.env, RUSTUP_TOOLCHAIN: process.env.RUSTUP_TOOLCHAIN ?? '1.98.1' };
+function run(command, args, cwd = work, capture = false) {
+  return execFileSync(command, args, { cwd, env, encoding: 'utf8', stdio: capture ? 'pipe' : 'inherit' });
+}
+mkdirSync(work, { recursive: true });
+// Rust panic locations otherwise embed the builder's home and Cargo registry paths.
+const mappings = [
+  [homedir(), '/build/home'],
+  [process.env.CARGO_HOME ?? resolve(homedir(), '.cargo'), '/build/cargo'],
+  [process.env.RUSTUP_HOME ?? resolve(homedir(), '.rustup'), '/build/rustup'],
+  [work, '/build/forme'], [realpathSync(work), '/build/forme'],
+];
+env.CARGO_ENCODED_RUSTFLAGS = [...(process.env.CARGO_ENCODED_RUSTFLAGS?.split('\u001f') ?? []),
+  ...mappings.map(([from, to]) => `--remap-path-prefix=${from}=${to}`)].join('\u001f');
+console.log(`Rebuilding Forme in ${work}`);
+if (!run('rustc', ['--version'], work, true).startsWith('rustc 1.98.1 ')) throw new Error('This patch is built with Rust 1.98.1.');
+if (run('wasm-pack', ['--version'], work, true).trim() !== 'wasm-pack 0.15.0') throw new Error('Install wasm-pack 0.15.0 to reproduce the package.');
+run('git', ['clone', '--depth', '1', '--branch', 'v0.20.1', 'https://github.com/formepdf/forme.git', 'source']);
+const source = resolve(work, 'source');
+if (run('git', ['rev-parse', 'HEAD'], source, true).trim() !== commit) throw new Error('The upstream tag no longer matches the pinned commit.');
+for (const patch of ['text-writer.patch', 'font-subset.patch']) {
+  run('git', ['apply', '--check', resolve(destination, patch)], source);
+  run('git', ['apply', resolve(destination, patch)], source);
+}
+run('cargo', ['test', '--manifest-path', 'engine/Cargo.toml', '--lib', '--locked'], source);
+for (const [target, folder] of [['bundler', 'pkg'], ['web', 'pkg-web'], ['nodejs', 'pkg-node']]) {
+  run('wasm-pack', ['build', '--target', target, '--out-dir', `../packages/core/${folder}`, '--features', 'wasm', '--locked'], resolve(source, 'engine'));
+  const wasm = readFileSync(resolve(source, 'packages/core', folder, 'forme_bg.wasm'));
+  if (mappings.some(([from]) => wasm.includes(Buffer.from(from)))) throw new Error('The generated engine still contains a local build path.');
+}
+const packed = JSON.parse(run('npm', ['pack', '@formepdf/core@0.20.1', '--ignore-scripts', '--json'], work, true))[0];
+const archive = resolve(work, packed.filename);
+if (createHash('sha512').update(readFileSync(archive)).digest('base64') !== originalIntegrity) throw new Error('The published upstream package failed its integrity check.');
+run('tar', ['-xzf', archive]);
+const pkg = resolve(work, 'package');
+for (const folder of ['pkg', 'pkg-web', 'pkg-node']) {
+  rmSync(resolve(pkg, folder), { recursive: true });
+  cpSync(resolve(source, 'packages/core', folder), resolve(pkg, folder), { recursive: true });
+  rmSync(resolve(pkg, folder, '.gitignore'), { force: true });
+}
+const manifest = JSON.parse(readFileSync(resolve(pkg, 'package.json'), 'utf8'));
+manifest.version = '0.20.1-opendoc.3';
+writeFileSync(resolve(pkg, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
+cpSync(resolve(source, 'LICENSE'), resolve(pkg, 'LICENSE'));
+run('npm', ['pack', '--ignore-scripts', '--pack-destination', destination], pkg);

package/src/app/AppearanceControl.tsx

@@ -0,0 +1,44 @@
+import { Select } from '@base-ui/react/select';
+import { Menu } from '@base-ui/react/menu';
+import type { Appearance } from './appearance';
+import { Button } from './ui';
+import { Icon } from './ui/Icon';
+
+const options = [
+  { value: 'system', label: 'System', icon: 'monitor' },
+  { value: 'light', label: 'Light', icon: 'sun' },
+  { value: 'dark', label: 'Dark', icon: 'moon' },
+] as const;
+
+export function AppearanceMenuItems({ value, onChange }: { value: Appearance; onChange: (value: Appearance) => void }) {
+  return <Menu.Group className="ui-menu-group">
+    <Menu.GroupLabel className="ui-menu-label">Appearance</Menu.GroupLabel>
+    <Menu.RadioGroup value={value} onValueChange={onChange}>
+      {options.map(option => <Menu.RadioItem key={option.value} value={option.value} closeOnClick className="ui-menu-item">
+        <Icon name={option.icon} size={16} /><span>{option.label}</span>
+        <Menu.RadioItemIndicator className="ui-menu-check"><Icon name="check" size={14} /></Menu.RadioItemIndicator>
+      </Menu.RadioItem>)}
+    </Menu.RadioGroup>
+  </Menu.Group>;
+}
+
+export function AppearanceControl({ value, onChange }: { value: Appearance; onChange: (value: Appearance) => void }) {
+  const selected = options.find(option => option.value === value)!;
+  return <Select.Root value={value} onValueChange={next => { if (next) onChange(next); }}>
+    <Select.Trigger render={<Button className="icon-button appearance-trigger" />} aria-label={`Appearance: ${selected.label}`} title={`Appearance: ${selected.label}`}>
+      <Icon name={selected.icon} size={18} />
+    </Select.Trigger>
+    <Select.Portal>
+      <Select.Positioner className="ui-positioner" sideOffset={8} align="end" alignItemWithTrigger={false}>
+        <Select.Popup className="ui-select-popup" aria-label="Appearance">
+          <Select.List>
+            {options.map(option => <Select.Item className="ui-select-item" key={option.value} value={option.value}>
+              <Select.ItemText><span className="appearance-option"><Icon name={option.icon} size={16} />{option.label}</span></Select.ItemText>
+              <Select.ItemIndicator><Icon name="check" size={14} /></Select.ItemIndicator>
+            </Select.Item>)}
+          </Select.List>
+        </Select.Popup>
+      </Select.Positioner>
+    </Select.Portal>
+  </Select.Root>;
+}

package/src/app/AssetThemeDefaults.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import type { AssetCatalog, AssetInspection, AssetSummary, ThemeAssetDefaults } from '../shared/assets';
+import type { ThemeSummary } from '../shared/themes';
+import { api } from './api';
+import { Button, Dialog, SelectControl, useNotifications } from './ui';
+import { Icon } from './ui/Icon';
+import './assets.css';
+
+type DefaultsResponse = { defaults: ThemeAssetDefaults; revision: string };
+const noChoice = '__none__';
+
+export function AssetThemeDefaults({ themeId, generation, connected = true, suggested, onSaved }: {
+  themeId: string; generation: number; connected?: boolean; suggested?: { kind: 'logo' | 'font'; id: string }; onSaved?: () => void;
+}) {
+  const [catalog, setCatalog] = useState<AssetSummary[]>([]);
+  const [saved, setSaved] = useState<DefaultsResponse>();
+  const [draft, setDraft] = useState<ThemeAssetDefaults>({ version: 1 });
+  const [logo, setLogo] = useState<AssetInspection>();
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [retry, setRetry] = useState(0);
+  const working = useRef(false);
+  const dirty = useRef(false);
+  const revision = useRef('');
+  const [remoteChanged, setRemoteChanged] = useState(false);
+  const notifications = useNotifications();
+  useEffect(() => { dirty.current = false; revision.current = ''; setSaved(undefined); setDraft({ version: 1 }); setRemoteChanged(false); }, [themeId]);
+  useEffect(() => {
+    const controller = new AbortController();
+    void Promise.all([api<DefaultsResponse>(`/api/themes/${encodeURIComponent(themeId)}/assets`, { signal: controller.signal }), api<AssetCatalog>('/api/assets', { signal: controller.signal })]).then(([value, assets]) => {
+      setCatalog(assets.items); setError('');
+      if (dirty.current && revision.current !== value.revision) { setRemoteChanged(true); return; }
+      if (!dirty.current) { setSaved(value); setDraft(value.defaults); revision.current = value.revision; }
+    }).catch(error => { if (!controller.signal.aborted) setError(error.message); });
+    return () => controller.abort();
+  }, [themeId, generation, retry]);
+  useEffect(() => {
+    if (!draft.logo) { setLogo(undefined); return; }
+    const controller = new AbortController();
+    void api<AssetInspection>(`/api/assets/logo/${encodeURIComponent(draft.logo.id)}`, { signal: controller.signal }).then(setLogo).catch(() => { if (!controller.signal.aborted) setLogo(undefined); });
+    return () => controller.abort();
+  }, [draft.logo?.id, generation]);
+  function change(value: ThemeAssetDefaults) { dirty.current = true; setDraft(value); }
+  function choices(kind: 'logo' | 'font', selected?: string) {
+    const items = [{ value: noChoice, label: kind === 'logo' ? 'No preferred logo' : 'Keep theme font' }, ...catalog.filter(item => item.kind === kind && !item.archived && !item.error && (kind === 'logo' || item.compatibility?.defaultEligible)).map(item => ({ value: item.id, label: `${item.name}${item.id === suggested?.id ? ' · selected asset' : ''}` }))];
+    if (selected && !items.some(item => item.value === selected)) items.push({ value: selected, label: `${selected} (unavailable)` });
+    return items;
+  }
+  async function save(event: FormEvent) {
+    event.preventDefault(); if (!saved || working.current || !connected) return;
+    working.current = true; setBusy(true); setError('');
+    try {
+      const value = await api<DefaultsResponse>(`/api/themes/${encodeURIComponent(themeId)}/assets`, { method: 'PUT', body: JSON.stringify({ defaults: draft, expectedRevision: saved.revision }) });
+      dirty.current = false; revision.current = value.revision; setSaved(value); setDraft(value.defaults); setRemoteChanged(false); notifications.success('Assets for new documents saved'); onSaved?.();
+    } catch (error) { setError((error as Error).message); }
+    finally { working.current = false; setBusy(false); }
+  }
+  const variationItems = [{ value: noChoice, label: 'Logo’s default variation' }, ...(logo?.asset.kind === 'logo' && logo.asset.id === draft.logo?.id ? logo.asset.variations.map(item => ({ value: item.id, label: item.name })) : [])];
+  if (draft.logo?.variation && !variationItems.some(item => item.value === draft.logo?.variation)) variationItems.push({ value: draft.logo.variation, label: `${draft.logo.variation} (unavailable)` });
+  return <section className="asset-theme-defaults"><h2>Assets for new documents</h2><p>Choose a preferred logo and fonts. Existing documents keep their saved choices.</p>
+    <form onSubmit={event => void save(event)} aria-busy={busy}>
+      <fieldset disabled={busy || !connected || !saved} className="asset-fields" inert={busy || !connected || !saved || undefined}>
+        <div className="create-field"><span>Preferred logo</span><SelectControl label="Preferred logo" value={draft.logo?.id ?? noChoice} onValueChange={value => change({ ...draft, logo: value === noChoice ? undefined : { id: value } })} items={choices('logo', draft.logo?.id)} /><p className="field-hint">Available to your agent; added only where the document uses a logo.</p></div>
+        {draft.logo && <div className="create-field"><span>Variation</span><SelectControl label="Preferred logo variation" value={draft.logo.variation ?? noChoice} onValueChange={value => change({ ...draft, logo: { id: draft.logo!.id, ...(value !== noChoice ? { variation: value } : {}) } })} items={variationItems} /></div>}
+        <div className="asset-font-defaults"><div className="create-field"><span>Body font</span><SelectControl label="Body font" value={draft.bodyFont ?? noChoice} onValueChange={value => change({ ...draft, bodyFont: value === noChoice ? undefined : value })} items={choices('font', draft.bodyFont)} /></div><div className="create-field"><span>Heading font</span><SelectControl label="Heading font" value={draft.headingFont ?? noChoice} onValueChange={value => change({ ...draft, headingFont: value === noChoice ? undefined : value })} items={choices('font', draft.headingFont)} /></div></div>
+      </fieldset>
+      {!saved && !error && <p role="status" className="small muted">Loading asset choices…</p>}
+      {remoteChanged && <p className="field-error" role="alert">These defaults changed elsewhere. Your choices are still here. Reload the latest defaults before saving.</p>}
+      {error && <p className="field-error" role="alert">{error}</p>}
+      {(error || remoteChanged) && <Button className="text-button" disabled={busy} onClick={() => { dirty.current = false; setRemoteChanged(false); setRetry(value => value + 1); }}>Reload defaults</Button>}
+      <Button type="submit" disabled={busy || !connected || !saved || !dirty.current || remoteChanged}>{busy ? 'Saving…' : 'Save defaults'}</Button>
+    </form>
+  </section>;
+}
+
+export function AssetThemeDialog({ open, onClose, themes, generation, connected, asset }: {
+  open: boolean; onClose: () => void; themes: ThemeSummary[]; generation: number; connected: boolean; asset: { kind: 'logo' | 'font'; id: string; name: string };
+}) {
+  const [themeId, setThemeId] = useState('');
+  useEffect(() => { if (open) setThemeId(''); }, [open]);
+  return <Dialog.Root open={open} onOpenChange={value => { if (!value) onClose(); }}><Dialog.Portal><Dialog.Backdrop className="ui-dialog-backdrop" /><Dialog.Popup className="help-dialog create-dialog asset-dialog">
+    <Dialog.Close render={<Button className="icon-button modal-close" aria-label="Close theme assignment" />}><Icon name="close" /></Dialog.Close>
+    <Dialog.Title>Use with a theme</Dialog.Title><Dialog.Description>Choose a theme, then select {asset.name} as a default for new documents.</Dialog.Description>
+    <div className="create-field"><span>Theme</span><SelectControl label="Choose theme" value={themeId} onValueChange={setThemeId} items={[{ value: '', label: 'Choose a theme' }, ...themes.filter(theme => !theme.error).map(theme => ({ value: theme.id, label: theme.name }))]} /></div>
+    {themeId && <AssetThemeDefaults key={themeId} themeId={themeId} generation={generation} connected={connected} suggested={asset} onSaved={onClose} />}
+  </Dialog.Popup></Dialog.Portal></Dialog.Root>;
+}