@ryanyahya/opendoc 0.4.0

package/src/app/SearchField.tsx

@@ -0,0 +1,13 @@
+import { Input } from './ui';
+import { Icon } from './ui/Icon';
+
+export function SearchField({ label, value, onValueChange }: {
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+}) {
+  return <label className="search-field">
+    <Icon name="search" />
+    <Input aria-label={label} placeholder={label} value={value} onChange={event => onValueChange(event.target.value)} />
+  </label>;
+}

package/src/app/Sidebar.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import type { Project } from '../shared/projects';
+import { documentFormat, type DocumentSummary } from '../shared/types';
+import { Button, Dialog, IconButton } from './ui';
+import { Icon } from './ui/Icon';
+import { AppearanceControl } from './AppearanceControl';
+import { SkillIndex } from './SkillIndex';
+import type { Appearance } from './appearance';
+import './sidebar.css';
+
+const wordmark = new URL('../../assets/brand/wordmark.png', import.meta.url).href;
+
+type SidebarProps = {
+  view: string;
+  projectId?: string;
+  projects: Project[];
+  documents: DocumentSummary[];
+  loaded: boolean;
+  connected: boolean;
+  appearance: Appearance;
+  onAppearanceChange: (value: Appearance) => void;
+  onCreateProject: () => void;
+  onProjectSettings: (project: Project) => void;
+};
+
+function SidebarContent({ view, projectId, projects, documents, loaded, connected, appearance, onAppearanceChange, onCreateProject, onProjectSettings, onNavigate, onClose }: SidebarProps & { onNavigate?: () => void; onClose?: () => void }) {
+  return <>
+    <div className="sidebar-brand-row">
+      <a className="sidebar-brand" href="#library" onClick={onNavigate}><img className="brand-wordmark" src={wordmark} alt="OpenDoc" width={112} height={37.333} /></a>
+      {onClose && <IconButton label="Close sidebar" onClick={onClose}><Icon name="close" /></IconButton>}
+    </div>
+    <nav className="workspace-nav" aria-label="Workspace">
+      {[
+        { id: 'library', label: 'Documents', icon: 'documents' },
+        { id: 'presentations', label: 'Presentations', icon: 'monitor' },
+        { id: 'assets', label: 'Media & Assets', icon: 'image' },
+        { id: 'templates', label: 'Templates', icon: 'layout' },
+        { id: 'themes', label: 'Themes', icon: 'theme' },
+      ].map(item => <a key={item.id} href={`#${item.id}`} aria-label={item.label} onClick={onNavigate} className={view === item.id ? 'active' : ''} aria-current={view === item.id ? 'page' : undefined}>
+        <Icon name={item.icon} size={18} /><span>{item.label}</span>{['library', 'presentations'].includes(item.id) && loaded && <span className="nav-count" aria-hidden="true">{documents.filter(document => documentFormat(document) === (item.id === 'presentations' ? 'presentation' : 'document')).length}</span>}
+      </a>)}
+    </nav>
+    <section className="sidebar-projects" aria-label="Projects">
+      <div className="sidebar-section-heading"><h2>Projects</h2><IconButton label="Create project" disabled={!loaded || !connected} onClick={onCreateProject}><Icon name="plus" size={17} /></IconButton></div>
+      <nav className="project-nav" aria-label="Projects">
+        {projects.map(project => <div className={`sidebar-project-row ${project.id === projectId ? 'selected' : ''}`} key={project.id}>
+          <a href={`#project/${project.id}`} onClick={onNavigate} aria-label={project.name} title={project.name} aria-current={view === 'project' && project.id === projectId ? 'page' : undefined}>
+            <Icon name="folder" size={17} /><span className="project-nav-name">{project.name}</span><span className="nav-count" aria-hidden="true">{documents.filter(document => document.projectId === project.id).length}</span>
+          </a>
+          <IconButton label={`Settings for ${project.name}`} className="project-settings-shortcut" onClick={() => onProjectSettings(project)}><Icon name="settings" size={16} /></IconButton>
+        </div>)}
+        {!projects.length && <p className="sidebar-empty">{loaded ? 'Create a project to organize your documents.' : 'Loading projects…'}</p>}
+      </nav>
+    </section>
+    <div className="sidebar-footer"><span className="workspace-status" role="status"><span className={`status-dot ${connected ? '' : 'offline'}`} />{connected ? 'Local workspace' : 'Reconnecting…'}</span><div className="sidebar-footer-actions"><SkillIndex /><AppearanceControl value={appearance} onChange={onAppearanceChange} /></div></div>
+  </>;
+}
+
+export function Sidebar(props: SidebarProps) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const wide = window.matchMedia('(min-width: 761px)');
+    const closeOnWide = () => { if (wide.matches) setOpen(false); };
+    wide.addEventListener('change', closeOnWide);
+    return () => wide.removeEventListener('change', closeOnWide);
+  }, []);
+  const close = () => setOpen(false);
+  return <>
+    <aside className="sidebar" aria-label="Sidebar"><SidebarContent {...props} /></aside>
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <header className="mobile-workspace-header">
+        <Dialog.Trigger render={<Button className="icon-button" aria-label="Open sidebar" />}><Icon name="sidebar" size={21} /></Dialog.Trigger>
+        <a className="mobile-brand" href="#library"><img className="brand-wordmark" src={wordmark} alt="OpenDoc" width={112} height={37.333} /></a>
+      </header>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="ui-dialog-backdrop" />
+        <Dialog.Popup className="sidebar-drawer">
+          <Dialog.Title className="visually-hidden">Workspace navigation</Dialog.Title>
+          <SidebarContent {...props} onNavigate={close} onClose={close}
+            onCreateProject={() => { close(); props.onCreateProject(); }}
+            onProjectSettings={project => { close(); props.onProjectSettings(project); }} />
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  </>;
+}

package/src/app/SkillIndex.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { skillIndex } from '../shared/skill-index';
+import { Button } from './ui';
+import { Icon } from './ui/Icon';
+import './skills.css';
+
+const skills = skillIndex(import.meta.glob<string>('../../.agents/skills/opendoc-*/agents/openai.yaml', {
+  query: '?raw', import: 'default', eager: true,
+}));
+
+export function SkillIndex() {
+  const [open, setOpen] = useState(false);
+  return <Tooltip.Root open={open} onOpenChange={setOpen}>
+    <Tooltip.Trigger render={<Button className="icon-button" aria-label="OpenDoc skills" onClick={() => setOpen(true)} />}>
+      <Icon name="book" size={17} />
+    </Tooltip.Trigger>
+    <Tooltip.Portal>
+      <Tooltip.Positioner className="ui-positioner" side="top" align="end" sideOffset={8}>
+        <Tooltip.Popup className="ui-menu-popup skill-index">
+          <p className="skill-index-title">OpenDoc skills</p>
+          <p className="skill-index-intro">Describe what you need; your agent follows the matching workflow. You can also name a skill.</p>
+          <dl>{skills.map(skill => <div key={skill.name}>
+            <dt>{skill.name}</dt><dd>{skill.description}</dd>
+          </div>)}</dl>
+        </Tooltip.Popup>
+      </Tooltip.Positioner>
+    </Tooltip.Portal>
+  </Tooltip.Root>;
+}

package/src/app/TemplatesBrowser.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { TemplateItem, TemplatePreview as Preview } from '../shared/templates';
+import type { DocumentFormat } from '../shared/types';
+import { api } from './api';
+import { catalogPreview } from './catalogPreview';
+import { PdfPage, usePdf } from './Pdf';
+import { Button, Dialog, Input, Tabs } from './ui';
+import { Icon } from './ui/Icon';
+import { CreateDocumentDialog } from './CreateDocumentDialog';
+import { GuideDialog } from './GuideDialog';
+import './templates.css';
+
+function TemplatePreview({ item, allPages = false, onReady }: { item: TemplateItem; allPages?: boolean; onReady?: (revision: string, preview: Preview) => void }) {
+  const [visible, setVisible] = useState(allPages);
+  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState<{ key: string; preview: Preview }>();
+  const key = `${item.id}:${item.revision}:${attempt}`;
+  const preview = state?.key === key ? state.preview : undefined;
+  const { pdf, error: pdfError } = usePdf(item.id, preview?.artifact?.hash, true, 'templates');
+  const error = item.error || preview?.error || pdfError;
+  const frame = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(240);
+  useEffect(() => {
+    if (!frame.current) return;
+    const observer = new ResizeObserver(entries => setWidth(Math.min(item.descriptor.documentFormat === 'presentation' ? 960 : 595, entries[0].contentRect.width)));
+    observer.observe(frame.current);
+    return () => observer.disconnect();
+  }, [item.descriptor.documentFormat]);
+  useEffect(() => {
+    if (allPages || !frame.current) return;
+    if (!('IntersectionObserver' in window)) { setVisible(true); return; }
+    const observer = new IntersectionObserver(entries => setVisible(entries.some(entry => entry.isIntersecting)), { rootMargin: '240px 0px' });
+    observer.observe(frame.current);
+    return () => observer.disconnect();
+  }, [allPages]);
+  useEffect(() => {
+    if (!visible || item.error || state?.key === key) return;
+    const controller = new AbortController();
+    void catalogPreview<Preview>(`/api/templates/${item.id}/preview`, controller.signal)
+      .then(preview => { if (!controller.signal.aborted) setState({ key, preview }); })
+      .catch(error => { if (!controller.signal.aborted) setState({ key, preview: { error: error.message } }); });
+    return () => controller.abort();
+  }, [visible, item.id, item.error, key, state?.key]);
+  useEffect(() => { if (preview) onReady?.(item.revision, preview); }, [preview, item.revision, onReady]);
+  return <div className={`template-preview ${allPages ? 'template-preview-full' : ''}`} ref={frame}>
+    {error ? <div className="template-preview-message" role="alert"><p>{error}</p>{allPages && <Button onClick={() => setAttempt(value => value + 1)}>Try again</Button>}</div>
+      : pdf ? Array.from({ length: allPages ? pdf.numPages : 1 }, (_, index) => <PdfPage key={index} pdf={pdf} number={index + 1} width={width} thumbnail={!allPages} />)
+        : <p className="template-preview-message" role="status">{visible ? "Preparing preview…" : "PDF preview"}</p>}
+  </div>;
+}
+
+const customPrompt = '$opendoc-create-template';
+
+export function TemplatesBrowser({ selection, generation, format = 'document' }: { selection: string; generation: number; format?: DocumentFormat }) {
+  const [proof, setProof] = useState<{ revision: string; preview: Preview }>();
+  const previewReady = useCallback((revision: string, preview: Preview) => setProof({ revision, preview }), []);
+  const [items, setItems] = useState<TemplateItem[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [loadError, setLoadError] = useState('');
+  const [attempt, setAttempt] = useState(0);
+  const [custom, setCustom] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const promptField = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const controller = new AbortController();
+    void api<TemplateItem[]>('/api/templates', { signal: controller.signal }).then(next => {
+      setItems(next); setLoaded(true); setLoadError('');
+    }).catch(error => { if (!controller.signal.aborted) { setLoadError(error.message); setLoaded(true); } });
+    return () => controller.abort();
+  }, [generation, attempt]);
+  useEffect(() => setCreateOpen(false), [selection]);
+  const item = items.find(item => item.id === selection);
+  const presentation = item?.descriptor.documentFormat === 'presentation';
+  const artifact = item && proof?.revision === item.revision ? proof.preview.artifact : undefined;
+  async function copy() {
+    try { await navigator.clipboard.writeText(customPrompt); setCopied(true); setCopyError(''); }
+    catch { setCopyError('Select the skill name and copy it manually.'); promptField.current?.focus(); promptField.current?.select(); }
+  }
+  return <section className="library-content templates-content">
+    {selection ? <>
+      <a className="template-back" href={presentation ? '#templates?format=presentation' : '#templates'}><Icon name="left" size={15} /> {presentation ? 'Presentation templates' : 'Document templates'}</a>
+      {item ? <>
+        <div className={`template-detail-layout${presentation ? ' template-detail-presentation' : ''}`}>
+          <div className="template-proof">
+            <div className="template-proof-label"><span>Neutral preview</span><span>{artifact ? `${artifact.pages.length} ${presentation ? artifact.pages.length === 1 ? 'slide' : 'slides' : artifact.pages.length === 1 ? 'page' : 'pages'}` : 'Preparing preview…'}</span></div>
+            <TemplatePreview key={item.id} item={item} allPages onReady={previewReady} />
+          </div>
+          <div className="template-options">
+            <header className="template-options-heading">
+              <h1>{item.descriptor.name}</h1>
+              <p className="lead template-intro">{item.descriptor.description}</p>
+            </header>
+            <h2>{presentation ? 'The deck structure' : 'The page structure'}</h2>
+            <p className="template-format">{item.descriptor.format}</p>
+            <ul>{item.descriptor.structure.map(note => <li key={note}>{note}</li>)}</ul>
+            <Button className="primary" onClick={() => setCreateOpen(true)}>
+              Use this template<Icon name="arrow" size={16} />
+            </Button>
+            <CreateDocumentDialog open={createOpen} onOpenChange={setCreateOpen} template={item} />
+            <GuideDialog key={item.id} kind="template" id={item.id} name={item.descriptor.name} generation={generation} />
+          </div>
+        </div>
+      </> : <div className="empty-state"><h1>{loaded ? 'Template not found' : 'Loading template…'}</h1><p>{loaded ? 'It may have been moved or removed from the workspace.' : 'Preparing its PDF preview.'}</p></div>}
+    </> : <>
+      <div className="library-heading"><h1>Templates</h1>
+        <Dialog.Root open={custom} onOpenChange={open => { setCustom(open); if (open) { setCopied(false); setCopyError(''); } }}>
+          <Dialog.Trigger render={<Button />}><Icon name="plus" size={17} />Create template</Dialog.Trigger>
+          <Dialog.Portal>
+            <Dialog.Backdrop className="ui-dialog-backdrop" />
+            <Dialog.Popup className="help-dialog">
+              <Dialog.Close render={<Button className="icon-button modal-close" aria-label="Close" />}><Icon name="close" /></Dialog.Close>
+              <Dialog.Title>Create a template</Dialog.Title>
+              <Dialog.Description>Use this skill in your coding agent in the OpenDoc workspace. Describe the reusable layout you want and share any sample content.</Dialog.Description>
+              <Input ref={promptField} className="prompt-example skill-invocation" aria-label="Template creation skill" readOnly value={customPrompt} />
+              <Button className="primary copy-prompt" onClick={() => void copy()}><Icon name={copied ? 'check' : 'copy'} size={16} />{copied ? 'Copied' : 'Copy skill'}</Button>
+              <span className="sr-only" role="status">{copied ? 'Skill copied to clipboard.' : ''}</span>
+              {copyError && <p role="alert" className="comment-error">{copyError}</p>}
+            </Dialog.Popup>
+          </Dialog.Portal>
+        </Dialog.Root>
+      </div>
+      <p className="lead template-intro">Choose a structure for your work. Apply a theme when you make it yours.</p>
+      <Tabs.Root value={format} onValueChange={value => { location.hash = value === 'presentation' ? 'templates?format=presentation' : 'templates'; }}>
+        <Tabs.List className="ui-tabs" aria-label="Template format">
+          <Tabs.Tab className="ui-tab" value="document">Documents</Tabs.Tab>
+          <Tabs.Tab className="ui-tab" value="presentation">Presentations</Tabs.Tab>
+        </Tabs.List>
+        {(['document', 'presentation'] as const).map(category => {
+          const visible = items.filter(item => (item.descriptor.documentFormat ?? 'document') === category);
+          return <Tabs.Panel key={category} value={category}>
+      <div className="template-gallery-label"><span>{loaded ? `${visible.length} ${visible.length === 1 ? 'template' : 'templates'}` : 'Preparing templates…'}</span><span>All previews use Neutral</span></div>
+      <div className={`template-grid${category === 'presentation' ? ' template-grid-presentations' : ''}`}>{visible.map(item => <article className="template-card" key={item.id}>
+        <a href={`#templates/${item.id}`} className="template-card-link" aria-labelledby={`template-title-${item.id}`}>
+          <div className="template-card-mat" aria-hidden="true"><TemplatePreview item={item} /></div>
+          <h2 id={`template-title-${item.id}`}>{item.descriptor.name}<Icon name="arrow" size={17} /></h2>
+        </a>
+        <p className="template-format">{item.descriptor.format}</p>
+        {item.error && <p className="comment-error" role="alert">Preview needs attention. Open the template for details.</p>}
+      </article>)}</div>
+      {loaded && !visible.length && !loadError && <div className="empty-state"><h2>No {category === 'presentation' ? 'presentation' : 'document'} templates yet</h2><p>Choose Create template to find the skill to use in your coding agent.</p></div>}
+          </Tabs.Panel>;
+        })}
+      </Tabs.Root>
+    </>}
+    {loadError && <div className="error-banner" role="alert"><span>{loadError}</span><Button onClick={() => setAttempt(value => value + 1)}>Try again</Button></div>}
+  </section>;
+}

package/src/app/ThemesBrowser.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ThemePreview, ThemeSummary } from '../shared/themes';
+import { documentName, type DocumentSummary } from '../shared/types';
+import type { Project } from '../shared/projects';
+import { api } from './api';
+import { catalogPreview } from './catalogPreview';
+import { PdfPage, usePdf } from './Pdf';
+import { GuideDialog } from './GuideDialog';
+import { AssetThemeDefaults } from './AssetThemeDefaults';
+import { CreateDocumentDialog } from './CreateDocumentDialog';
+import { Button, Dialog, Input } from './ui';
+import { Icon } from './ui/Icon';
+import './themes.css';
+
+function ThemePdf({ id, preview, allPages, onRetry }: { id: string; preview: ThemePreview; allPages: boolean; onRetry: () => void }) {
+  const frame = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(220);
+  const { pdf, error } = usePdf(id, preview.artifact?.hash, true, 'themes');
+  useEffect(() => {
+    if (!frame.current) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry.contentRect.width > 0) setWidth(Math.min(660, entry.contentRect.width));
+    });
+    observer.observe(frame.current);
+    return () => observer.disconnect();
+  }, []);
+  const firstPage = preview.artifact?.pages[0];
+  const pageRatio = (firstPage?.width ?? 595.28) / (firstPage?.height ?? 841.89);
+  // Gallery frames stay consistent; contain each paper size without stretching or cropping.
+  const pageWidth = allPages ? width : Math.min(width, width * (841.89 / 595.28) * pageRatio);
+  return <div className="theme-pdf" ref={frame} style={allPages ? undefined : { aspectRatio: '595.28 / 841.89' }}>
+    {error ? <div className="theme-preview-message" role="alert"><p>Could not display this preview.</p><p>{error}</p><Button onClick={onRetry}>Try again</Button></div>
+      : pdf ? Array.from({ length: allPages ? pdf.numPages : 1 }, (_, index) => <PdfPage key={index} pdf={pdf} number={index + 1} width={pageWidth} thumbnail={!allPages} onNavigate={page => frame.current?.querySelector(`[data-page="${page}"]`)?.scrollIntoView({ behavior: 'auto', block: 'start' })} />)
+        : <p className="theme-preview-message" role="status">Opening PDF…</p>}
+  </div>;
+}
+
+function ThemeSpecimen({ theme, generation, allPages = false, onRefresh }: { theme: ThemeSummary; generation: number; allPages?: boolean; onRefresh: () => void }) {
+  const frame = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(allPages);
+  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState<{ key: string; preview: ThemePreview }>();
+  const requestKey = `${theme.id}:${theme.revision ?? generation}:${attempt}`;
+  useEffect(() => {
+    if (allPages || !frame.current) return;
+    if (!('IntersectionObserver' in window)) { setVisible(true); return; }
+    const observer = new IntersectionObserver(entries => {
+      setVisible(entries.some(entry => entry.isIntersecting));
+    }, { rootMargin: '240px 0px' });
+    observer.observe(frame.current);
+    return () => observer.disconnect();
+  }, [allPages]);
+  useEffect(() => {
+    if (!visible || theme.error || state?.key === requestKey) return;
+    const controller = new AbortController();
+    void catalogPreview<ThemePreview>(`/api/themes/${encodeURIComponent(theme.id)}/preview`, controller.signal)
+      .then(preview => { if (!controller.signal.aborted) setState({ key: requestKey, preview }); })
+      .catch(error => { if (!controller.signal.aborted) setState({ key: requestKey, preview: { error: error.message } }); });
+    return () => controller.abort();
+  }, [visible, theme.id, theme.error, requestKey, state?.key]);
+  const preview = state?.key === requestKey ? state.preview : undefined;
+  const error = theme.error || preview?.error || (preview && !preview.artifact ? 'The theme did not produce a preview.' : '');
+  const retry = () => { frame.current?.focus(); setAttempt(value => value + 1); if (theme.error) onRefresh(); };
+  return <div ref={frame} tabIndex={-1} role="group" aria-label={`${theme.name} PDF preview`} aria-busy={visible && !preview && !error} className={`theme-specimen ${allPages ? 'theme-specimen-full' : ''}`}>
+    {allPages && <div className="theme-proof-label"><span>Print system</span><span>{preview?.artifact ? `${preview.artifact.pages.length} ${preview.artifact.pages.length === 1 ? 'page' : 'pages'}` : 'PDF preview'}</span></div>}
+    {error ? <div className="theme-preview-message" role="alert"><p>Preview needs attention.</p><p>{error}</p><Button onClick={retry}>Try again</Button></div>
+      : preview?.artifact ? <ThemePdf key={requestKey} id={theme.id} preview={preview} allPages={allPages} onRetry={retry} />
+        : <div className="theme-preview-placeholder" role="status"><Icon name="document" size={24} /><p>{visible ? 'Preparing preview…' : 'PDF preview'}</p></div>}
+  </div>;
+}
+
+function ThemePromptDialog({ open, onOpenChange, theme }: { open: boolean; onOpenChange: (value: boolean) => void; theme?: ThemeSummary }) {
+  const field = useRef<HTMLInputElement>(null);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState('');
+  const prompt = '$opendoc-create-theme';
+  useEffect(() => { if (open) { setCopied(false); setError(''); } }, [open, prompt]);
+  async function copy() {
+    try { await navigator.clipboard.writeText(prompt); setCopied(true); setError(''); }
+    catch { setError('Select the skill name and copy it manually.'); field.current?.focus(); field.current?.select(); }
+  }
+  return <Dialog.Root open={open} onOpenChange={onOpenChange}><Dialog.Portal><Dialog.Backdrop className="ui-dialog-backdrop" />
+    <Dialog.Popup className="help-dialog">
+      <Dialog.Close render={<Button className="icon-button modal-close" aria-label="Close" />}><Icon name="close" /></Dialog.Close>
+      <Dialog.Title>{theme ? `Adapt ${theme.name}` : 'Create a theme'}</Dialog.Title>
+      <Dialog.Description>Use this skill in your coding agent in the OpenDoc workspace. Describe the theme you want and share any visual references.</Dialog.Description>
+      <Input ref={field} className="prompt-example skill-invocation" aria-label="Theme creation skill" readOnly value={prompt} />
+      <Button className="primary" onClick={() => void copy()}><Icon name={copied ? 'check' : 'copy'} size={16} />{copied ? 'Copied' : 'Copy skill'}</Button>
+      <span className="sr-only" role="status">{copied ? 'Skill copied to clipboard.' : ''}</span>
+      {error && <p className="comment-error" role="alert">{error}</p>}
+    </Dialog.Popup>
+  </Dialog.Portal></Dialog.Root>;
+}
+
+function ThemePalette({ theme, compact = false }: { theme: ThemeSummary; compact?: boolean }) {
+  if (!theme.palette?.length) return null;
+  if (compact) return <div className="theme-palette-strip" role="img" aria-label={`Palette: ${theme.palette.map(color => `${color.name} ${color.value}`).join(', ')}`}>
+    {theme.palette.map(color => <span key={`${color.name}-${color.value}`} style={{ backgroundColor: color.value }} />)}
+  </div>;
+  return <section className="theme-palette-section"><h2>Palette</h2><ul className="theme-palette">
+    {theme.palette.map(color => <li key={`${color.name}-${color.value}`}>
+      <span className="theme-color-swatch" style={{ backgroundColor: color.value }} aria-hidden="true" />
+      <div><div className="theme-color-label"><strong>{color.name}</strong><code>{color.value}</code></div><p>{color.role}</p></div>
+    </li>)}
+  </ul></section>;
+}
+
+function ThemeGallery({ themes, generation, onRefresh }: { themes: ThemeSummary[]; generation: number; onRefresh: () => void }) {
+  return <div className="theme-gallery">{themes.map(theme => <article className="theme-gallery-card" key={theme.id}>
+    <div className="theme-gallery-preview"><ThemeSpecimen theme={theme} generation={generation} onRefresh={onRefresh} /><ThemePalette theme={theme} compact /><a className="theme-preview-link" href={`#themes/${theme.id}`} aria-label={`Explore ${theme.name}`} /></div>
+    <h2><a href={`#themes/${theme.id}`}>{theme.name}<Icon name="arrow" size={17} /></a></h2>
+  </article>)}</div>;
+}
+
+export function ThemesBrowser({ themes, selection, generation, loaded, documents, projects, onRefresh, connected = true }: {
+  themes: ThemeSummary[]; selection: string; generation: number; loaded: boolean; documents: DocumentSummary[]; projects: Project[]; onRefresh: () => void; connected?: boolean;
+}) {
+  const theme = themes.find(theme => theme.id === selection);
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  useEffect(() => { setPromptOpen(false); setCreateOpen(false); window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); }, [selection]);
+  useEffect(() => {
+    void api('/api/context', { method: 'POST', body: JSON.stringify({ projectId: null, documentId: null, blockId: null, page: 1, themeId: theme?.id ?? null, selectedAsset: null }) }).catch(() => {});
+  }, [theme?.id]);
+  const usingDocuments = documents.filter(document => document.artifact?.meta.theme === theme?.id && theme);
+  const defaultProjects = projects.filter(project => project.defaultTheme === theme?.id && theme);
+  const ordered = [...themes].sort((a, b) => a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
+  return <section className="library-content themes-content">
+    {selection ? <>
+      <a href="#themes" className="theme-back"><Icon name="left" size={16} />All themes</a>
+      {theme ? <div className="theme-detail-layout">
+        <ThemeSpecimen key={theme.id} theme={theme} generation={generation} allPages onRefresh={onRefresh} />
+        <aside className="theme-options">
+          <header><h1>{theme.name}</h1><p className="lead">{theme.description}</p></header>
+          <div className="theme-actions"><Button className="primary" disabled={Boolean(theme.error)} onClick={() => setCreateOpen(true)}>Create with this theme<Icon name="arrow" size={16} /></Button><Button onClick={() => setPromptOpen(true)}>Adapt this theme</Button><GuideDialog key={theme.id} kind="theme" id={theme.id} name={theme.name} generation={theme.revision ?? generation} /></div>
+          {theme.assetError && <p className="field-error" role="alert">{theme.assetError}</p>}
+          <AssetThemeDefaults key={theme.id} themeId={theme.id} generation={generation} connected={connected} />
+          <div className="theme-system-details">
+            <ThemePalette theme={theme} />
+            <section><h2>Typography</h2><dl className="theme-type-details"><div><dt>Headings</dt><dd>{theme.heading}</dd></div><div><dt>Body</dt><dd>{theme.body}</dd></div><div><dt>Page</dt><dd>{theme.pageSize}</dd></div></dl></section>
+            {Boolean(theme.geometry?.length) && <section><h2>Geometry &amp; layout</h2><ul>{theme.geometry!.map(rule => <li key={rule}>{rule}</li>)}</ul></section>}
+            {theme.principles.length > 0 && <section><h2>System rules</h2><ul>{theme.principles.map(principle => <li key={principle}>{principle}</li>)}</ul></section>}
+            {theme.useFor.length > 0 && <section><h2>Works well for</h2><p>{theme.useFor.join(' · ')}</p></section>}
+            {usingDocuments.length > 0 && <section className="theme-used-by"><h2>Documents using {theme.name}</h2>{usingDocuments.map(document => <a key={document.id} href={`#document/${document.id}`}><Icon name="document" size={16} /><span>{documentName(document)}</span><Icon name="arrow" size={15} /></a>)}</section>}
+            {defaultProjects.length > 0 && <section className="theme-used-by"><h2>Project default</h2>{defaultProjects.map(project => <a key={project.id} href={`#project/${project.id}`}><Icon name="folder" size={16} /><span>{project.name}</span><Icon name="arrow" size={15} /></a>)}</section>}
+          </div>
+        </aside>
+      </div> : <div className="empty-state"><h1>{loaded ? 'Theme not found' : 'Loading theme…'}</h1><p>{loaded ? 'It may have been moved or removed from the workspace.' : 'Reading the local theme folders.'}</p><Button onClick={onRefresh}>Try again</Button></div>}
+    </> : <>
+      <div className="library-heading"><h1>Themes</h1><Button onClick={() => setPromptOpen(true)}><Icon name="plus" size={17} />Create theme</Button></div>
+      <p className="lead theme-intro">Explore complete print systems: color, typography, components, and page layouts.</p>
+      <p className="theme-gallery-label" role="status">{loaded ? `${ordered.length} ${ordered.length === 1 ? 'print system' : 'print systems'}` : 'Reading local themes…'}</p>
+      <ThemeGallery themes={ordered} generation={generation} onRefresh={onRefresh} />
+      {loaded && themes.length === 0 && <div className="empty-state"><h2>No themes yet</h2><p>Create a print system with your coding agent. Its reviewed PDF will appear here.</p><Button onClick={() => setPromptOpen(true)}>Create theme</Button></div>}
+    </>}
+    <ThemePromptDialog open={promptOpen} onOpenChange={setPromptOpen} theme={selection ? theme : undefined} />
+    <CreateDocumentDialog open={createOpen} onOpenChange={setCreateOpen} theme={theme} />
+  </section>;
+}

package/src/app/api.ts

@@ -0,0 +1,47 @@
+let session: Promise<string> | undefined;
+
+export class ApiError extends Error {
+  constructor(message: string, public status: number) { super(message); }
+}
+
+function sessionToken() {
+  session ??= fetch('/api/session', { signal: AbortSignal.timeout(10_000) })
+    .then(async (response) => {
+      if (!response.ok) throw new Error('Could not reconnect to the local workspace. Try again.');
+      const value = await response.json();
+      if (typeof value.token !== 'string') throw new Error('The local session is unavailable. Reload OpenDoc.');
+      return value.token as string;
+    })
+    .catch((error) => { session = undefined; throw error; });
+  return session;
+}
+
+export async function request(path: string, init?: RequestInit) {
+  const headers = new Headers(init?.headers);
+  const write = init?.method && !['GET', 'HEAD'].includes(init.method.toUpperCase());
+  // Reads must stop waiting even when callers supply their own unmount signal.
+  if (!write) {
+    const deadline = AbortSignal.timeout(60_000);
+    init = { ...init, signal: init?.signal ? AbortSignal.any([init.signal, deadline]) : deadline };
+  }
+  if (write) {
+    headers.set('X-OpenDoc-Token', await sessionToken());
+    if (!(init?.body instanceof FormData)) headers.set('Content-Type', 'application/json');
+  }
+  let response = await fetch(path, { ...init, headers });
+  // A local server restart changes its session. Retry only a rejected write.
+  if (write && response.status === 403 && !init?.signal?.aborted) {
+    session = undefined;
+    headers.set('X-OpenDoc-Token', await sessionToken());
+    response = await fetch(path, { ...init, headers });
+  }
+  if (!response.ok) {
+    const value = await response.json().catch(() => ({}));
+    throw new ApiError(value.error ?? 'OpenDoc could not complete that request. Try again.', response.status);
+  }
+  return response;
+}
+
+export async function api<T>(path: string, init?: RequestInit): Promise<T> {
+  return (await request(path, init)).json();
+}

package/src/app/appearance.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export type Appearance = 'system' | 'light' | 'dark';
+const storageKey = 'opendoc-appearance';
+
+export function readAppearance(): Appearance {
+  try {
+    const value = localStorage.getItem(storageKey);
+    if (value === 'light' || value === 'dark') return value;
+  } catch { /* System appearance remains available without browser storage. */ }
+  return 'system';
+}
+
+export function useAppearance() {
+  const [appearance, setAppearance] = useState<Appearance>(readAppearance);
+  useEffect(() => {
+    const system = window.matchMedia('(prefers-color-scheme: dark)');
+    const apply = () => {
+      const resolved = appearance === 'system' ? system.matches ? 'dark' : 'light' : appearance;
+      document.documentElement.dataset.appearance = resolved;
+      document.documentElement.style.colorScheme = resolved;
+      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', resolved === 'dark' ? '#181818' : '#f8f8f8');
+    };
+    apply();
+    system.addEventListener('change', apply);
+    const sync = (event: StorageEvent) => { if (event.key === storageKey || event.key === null) setAppearance(readAppearance()); };
+    window.addEventListener('storage', sync);
+    return () => { system.removeEventListener('change', apply); window.removeEventListener('storage', sync); };
+  }, [appearance]);
+  const changeAppearance = (next: Appearance) => {
+    setAppearance(next);
+    try { localStorage.setItem(storageKey, next); } catch { /* Keep the selection for this session. */ }
+  };
+  return { appearance, changeAppearance };
+}