@ryanyahya/opendoc 0.4.0

package/src/app/templates.css

@@ -0,0 +1,49 @@
+.template-intro { max-width: 65ch; line-height: 1.6; }
+.template-gallery-label, .template-proof-label { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
+.template-gallery-label { margin: 32px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
+.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 24px; }
+.template-card { max-width: 280px; min-width: 0; }
+.template-card-link { display: block; color: inherit; text-decoration: none; border-radius: 5px; }
+.template-card-mat { background: var(--surface-alt); border-radius: 6px; padding: 26px 32px; transition: background-color 160ms ease; }
+.template-card-link:hover .template-card-mat { background: var(--surface-hover); }
+.template-preview { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: 180px; }
+.template-preview .pdf-page { flex-shrink: 0; max-width: 100%; box-shadow: var(--shadow-preview); }
+.template-preview-message { padding: 20px 10px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.template-card h2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 8px; font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; }
+.template-card p { font-size: var(--body-size); color: var(--muted); line-height: var(--body-leading); margin: 8px 0 0; }
+.template-format { font-size: 12px; color: var(--muted); }
+.template-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 24px; }
+.template-back:hover { color: var(--ink); }
+.template-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); gap: 40px; align-items: start; }
+.template-proof { padding: 22px; background: var(--surface-alt); border-radius: 6px; min-width: 0; }
+.template-proof-label { margin-bottom: 20px; }
+.template-options { position: sticky; top: 32px; max-height: calc(100dvh - 64px); overflow-y: auto; }
+.template-options-heading { margin-bottom: 28px; }
+.template-options-heading h1 { margin-bottom: 12px; }
+.template-options-heading .lead { margin: 0; }
+.template-options h2 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; margin: 0 0 12px; }
+.template-options ul { padding-left: 18px; margin: 16px 0 28px; font-size: 13px; line-height: 1.7; color: var(--muted); }
+.template-options li + li { margin-top: 12px; }
+.template-options .primary { width: 100%; justify-content: space-between; }
+@media (max-width: 1050px) {
+  .template-detail-layout { grid-template-columns: minmax(0, 1fr); }
+  .template-options { position: static; max-height: none; overflow: visible; grid-row: 1; max-width: 620px; }
+  .template-options ul { margin-bottom: 24px; }
+  .template-proof { max-width: 639px; }
+}
+@media (max-width: 620px) {
+  .templates-content .library-heading { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+  .templates-content .library-heading h1 { margin-bottom: 0; }
+  .template-gallery-label { flex-wrap: wrap; gap: 8px; }
+  .template-grid { grid-template-columns: minmax(0, 1fr); }
+  .template-card { max-width: 350px; }
+  .template-proof { padding: 14px; }
+}
+@media (prefers-reduced-motion: reduce) { .template-card-mat { transition: none; } }
+
+.template-card .template-preview { aspect-ratio: 595.28 / 841.89; justify-content: center; }
+.template-grid-presentations { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
+.template-grid-presentations .template-card { max-width: 520px; }
+.template-grid-presentations .template-card-mat { padding: 20px; }
+.template-grid-presentations .template-preview { aspect-ratio: 16 / 9; min-height: 0; }
+.template-detail-presentation .template-preview { min-height: 0; }

package/src/app/themes.css

@@ -0,0 +1,80 @@
+.theme-intro { max-width: 65ch; line-height: 1.6; }
+.theme-gallery-label { margin: 24px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
+.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 24px; }
+.theme-gallery-card { min-width: 0; max-width: 280px; }
+.theme-gallery-preview { position: relative; }
+.theme-preview-link { position: absolute; inset: 0; border-radius: 6px; }
+.theme-gallery-preview:has(.theme-preview-message[role="alert"]) .theme-preview-link { display: none; }
+.theme-specimen { min-width: 0; background: var(--surface-alt); border-radius: 6px; padding: 26px 32px; transition: background-color 160ms ease; }
+.theme-gallery-preview .theme-specimen { padding-bottom: 46px; }
+.theme-gallery-preview:hover .theme-specimen { background: var(--surface-hover); }
+.theme-preview-placeholder { aspect-ratio: 595 / 842; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; text-align: center; }
+.theme-pdf { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; min-width: 0; }
+.theme-gallery-card .theme-pdf { justify-content: center; }
+.theme-pdf .pdf-page { flex-shrink: 0; box-shadow: var(--shadow-preview); max-width: 100%; scroll-margin-top: 24px; }
+.theme-preview-message { padding: 20px 0; font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
+.theme-preview-message p + p { margin-top: 8px; }
+.theme-preview-message button { margin-top: 16px; }
+.theme-gallery-card h2 { margin: 12px 0 0; font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; }
+.theme-gallery-card h2 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
+.theme-gallery-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
+.theme-palette-strip { position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
+.theme-palette-strip span { flex: 1; min-width: 0; height: 6px; }
+.theme-back { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; margin-bottom: 20px; font-size: 13px; color: var(--muted); }
+.theme-back:hover { color: var(--ink); }
+.theme-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); gap: 40px; align-items: start; }
+.theme-specimen-full { padding: 22px; }
+.theme-proof-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; font-size: 12px; color: var(--muted); }
+.theme-specimen-full .theme-preview-placeholder { min-height: 380px; aspect-ratio: auto; }
+.theme-options { min-width: 0; align-self: stretch; padding-bottom: 4px; overflow-wrap: anywhere; }
+.theme-options > header { position: sticky; top: 32px; z-index: 1; margin-bottom: 22px; background: var(--background); }
+.theme-options > header::before { content: ''; position: absolute; inset: -32px 0 -12px; z-index: -1; background: var(--background); }
+.theme-options .lead { line-height: 1.65; }
+.theme-options section { margin-top: 26px; }
+.theme-options h2 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; margin: 0 0 12px; }
+.theme-options section > p, .theme-options ul { font-size: 13px; color: var(--muted); line-height: 1.75; }
+.theme-options ul { padding-left: 18px; margin: 0; }
+.theme-options li + li { margin-top: 9px; }
+.theme-type-details { margin: 0; font-size: 12px; }
+.theme-type-details div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
+.theme-type-details div + div { margin-top: 10px; }
+.theme-type-details dt { color: var(--muted); }
+.theme-type-details dd { margin: 0; }
+.theme-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
+.theme-actions .primary { justify-content: space-between; }
+.theme-actions .text-button { align-self: flex-start; }
+.theme-system-details { min-width: 0; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
+.theme-system-details > section:first-child { margin-top: 0; }
+.theme-options .theme-palette { list-style: none; padding: 0; display: grid; gap: 13px; }
+.theme-palette li { display: flex; gap: 11px; align-items: flex-start; }
+.theme-options .theme-palette li + li { margin-top: 0; }
+.theme-color-swatch { display: block; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px #00000022; }
+.theme-palette li > div { min-width: 0; flex: 1; }
+.theme-color-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; line-height: 1.3; }
+.theme-color-label strong { font-size: 12px; font-weight: 500; color: var(--ink); }
+.theme-color-label code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
+.theme-palette p { margin-top: 4px; font-size: 12px; line-height: 1.5; }
+.theme-used-by { padding-top: 22px; border-top: 1px solid var(--line); }
+.theme-used-by a { display: flex; align-items: center; gap: 9px; min-height: 40px; font-size: 13px; line-height: 1.5; }
+.theme-used-by a span { flex: 1; min-width: 0; }
+.theme-used-by a:hover span { text-decoration: underline; text-underline-offset: 3px; }
+@media (max-width: 1050px) {
+  .theme-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
+  .theme-options { display: contents; }
+  .theme-options > header { position: static; grid-row: 1; margin: 0; max-width: 660px; }
+  .theme-options > header::before { content: none; }
+  .theme-options > .theme-actions { grid-row: 2; max-width: 400px; width: 100%; }
+  .theme-specimen-full { grid-row: 3; max-width: 704px; width: 100%; }
+  .theme-system-details { grid-row: 4; margin: 0; max-width: 660px; }
+  .theme-options .theme-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
+}
+@media (max-width: 620px) {
+  .themes-content .library-heading { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+  .theme-gallery { grid-template-columns: minmax(0, 1fr); gap: 30px; }
+  .theme-gallery-card { max-width: 350px; }
+  .theme-specimen { padding: 22px 26px; }
+  .theme-specimen-full { padding: 14px; }
+  .theme-actions .ui-button { white-space: normal; }
+  .theme-options .theme-palette { grid-template-columns: minmax(0, 1fr); }
+}
+@media (prefers-reduced-motion: reduce) { .theme-specimen { transition: none; } }

package/src/app/ui/Icon.tsx

@@ -0,0 +1,92 @@
+import type React from "react";
+
+export function Icon({ name, size = 18 }: { name: string; size?: number }) {
+  const paths: Record<string, React.ReactNode> = {
+    book: <><path d="M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1Z" /><path d="M12 5v15" /></>,
+    history: <><path d="M3 11a9 9 0 1 1 2.6 7M3 4v7h7" /><path d="M12 7v5l3 2" /></>,
+    document: (
+      <>
+        <path d="M6 3h8l4 4v14H6z" />
+        <path d="M14 3v5h4M9 12h6M9 16h6" />
+      </>
+    ),
+    documents: <><path d="M7 3h9l4 4v11H7zM16 3v5h4" /><path d="M4 7v14h12M10 12h7M10 15h5" /></>,
+    grid: (
+      <>
+        <rect x="4" y="4" width="6" height="6" rx="1" />
+        <rect x="14" y="4" width="6" height="6" rx="1" />
+        <rect x="4" y="14" width="6" height="6" rx="1" />
+        <rect x="14" y="14" width="6" height="6" rx="1" />
+      </>
+    ),
+    image: <><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8" cy="9" r="1.5"/><path d="m4 17 5-5 4 4 3-3 5 5"/></>,
+    sidebar: <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></>,
+    settings: <><path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="3" fill="var(--surface)"/><circle cx="15" cy="17" r="3" fill="var(--surface)"/></>,
+    gear: <><path d="m9.5 3-.6 2.2-1.5.9-2.2-.6-2.5 4.3 1.6 1.6v1.8l-1.6 1.6 2.5 4.3 2.2-.6 1.5.9.6 2.2h5l.6-2.2 1.5-.9 2.2.6 2.5-4.3-1.6-1.6v-1.8l1.6-1.6-2.5-4.3-2.2.6-1.5-.9-.6-2.2Z"/><circle cx="12" cy="12" r="3"/></>,
+    folder: <path d="M3 7V5h7l2 2h9v13H3z"/>,
+    list: <><path d="M9 6h12M9 12h12M9 18h12" /><path d="M3 6h1M3 12h1M3 18h1" /></>,
+    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" /></>,
+    moon: <path d="M20 14A8.5 8.5 0 0 1 10 4a8.5 8.5 0 1 0 10 10Z" />,
+    monitor: <><rect x="3" y="4" width="18" height="13" rx="2" /><path d="M12 17v4M8 21h8" /></>,
+    layout: <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M10 9v11"/></>,
+    theme: (
+      <>
+        <path d="M12 3a9 9 0 1 0 0 18h1.2a2.3 2.3 0 0 0 1.7-3.9 1.2 1.2 0 0 1 .9-2.1H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8Z" />
+        <circle cx="7" cy="11" r="1" fill="currentColor" stroke="none" />
+        <circle cx="10" cy="7" r="1" fill="currentColor" stroke="none" />
+        <circle cx="15" cy="7" r="1" fill="currentColor" stroke="none" />
+        <circle cx="18" cy="11" r="1" fill="currentColor" stroke="none" />
+      </>
+    ),
+    search: (
+      <>
+        <circle cx="10.5" cy="10.5" r="6.5" />
+        <path d="m16 16 5 5" />
+      </>
+    ),
+    comment: <path d="M4 4h16v12H9l-5 4z" />,
+    download: (
+      <>
+        <path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5" />
+      </>
+    ),
+    select: (
+      <>
+        <path d="M5 3v16l4-5 4 7 3-2-4-6 6-1z" />
+      </>
+    ),
+    left: <path d="m14 5-7 7 7 7" />,
+    right: <path d="m10 5 7 7-7 7" />,
+    close: <path d="m6 6 12 12M6 18 18 6" />,
+    edit: <><path d="m15 5 4 4M4 20l4-1L20 7a2.8 2.8 0 0 0-4-4L4 15z" /></>,
+    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14M10 11v6M14 11v6" /></>,
+    plus: <path d="M12 5v14M5 12h14" />,
+    copy: (
+      <>
+        <rect x="8" y="8" width="12" height="13" rx="2" />
+        <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+      </>
+    ),
+    check: <path d="m4 12 5 5L20 6" />,
+    more: <><circle cx="5" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></>,
+    down: <path d="m6 9 6 6 6-6" />,
+    undo: <><path d="m8 5-5 5 5 5M3 10h11a6 6 0 0 1 0 12" /></>,
+    redo: <path d="m16 5 5 5-5 5M21 10H10a6 6 0 0 0 0 12" />,
+    arrow: <path d="M5 12h14m-6-6 6 6-6 6" />,
+  };
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {paths[name] ?? paths.document}
+    </svg>
+  );
+}

package/src/app/ui/README.md

@@ -0,0 +1,27 @@
+# OpenDoc UI
+
+Use Base UI for interactive controls. The app uses plain CSS and local fonts; PDF document themes remain independent of the browser UI.
+
+Text fields use a fine blue focus edge on the existing border with a soft 3px glow. Keep the edge flush with the control; search fields own focus on their wrapper, without a second ring on the inner input.
+
+- `Button` preserves the Base UI props, refs, and `render` composition API. Use the `primary`, `text-button`, or `icon-button` class for the existing visual treatments. Standard buttons use a 32px minimum height and 6px radius, with 32px sidebar/menu rows and 40px document list rows. Sidebar and menu rows retain 44px touch targets. Controls retain a subtle press response; `static` disables press scaling. Use it for document cards, thumbnails, quote anchors, and precise PDF targets. PDF targets also retain their exact geometry instead of adopting minimum control dimensions.
+- `IconButton` requires an accessible label and provides a tooltip. `ToggleButton` exposes controlled pressed state. Avoid adding tooltips to already descriptive document cards or PDF hit areas.
+- `SelectControl` composes Base UI Select for short, labeled choices. Larger searchable sets should use Base UI Combobox when needed.
+- All action menus and dropdown lists use the shared `ui-menu-*` / `ui-select-*` styles in `ui.css`: 12.5px regular labels, 32px rows (44px for touch), 4px popup padding, 6px corners, and compact separators. Action menus start at 184px wide; selects fit their trigger and content within the viewport. Use the `--menu-*` tokens to change density across the system. Domain styles must not override menu type, spacing, or surfaces. Use `ui-menu-item-danger` for destructive actions and `ui-menu-label`, `ui-menu-group`, and `ui-menu-check` for grouped and checked choices.
+- Compose `Dialog.Trigger`, `Dialog.Close`, and `Dialog.Popup` within the same root so dismissal, focus containment, and focus restoration remain library-owned. Give each dialog a title and description.
+- Use Base UI Popover and `ui-popover-popup` for anchored panels containing forms, such as the reader's Export dropdown. Reuse shared fields and `ui-menu-item` action rows; retain touch-aware focus, viewport bounds, and dismissal without losing an in-flight request. Previous exports opens after the dropdown restores focus to its trigger.
+- `UiProvider` owns tooltip timing and notifications. Errors stay visible until dismissed; success notices expire and pause while interacting.
+
+`ui.css` owns shared control styling, focus, popup layering, and reduced-motion behavior. `style.css` owns application layout and document surfaces. Keep domain components in `src/app`; add a shared abstraction only when it has a concrete use.
+
+`SkillIndex` is the shared sidebar/reader reference tooltip. Its entries come from `.agents/skills/opendoc-*/agents/openai.yaml` at build time; edit `short_description` there using a JSON-quoted YAML string and rebuild. Keep names aligned with skill folders and frontmatter. The index lists skills for the external agent; it does not execute them.
+
+`DocumentCard` uses Base UI Button around a live PDF.js cover. `PdfPage` remains responsible for canvas rendering, references, and component geometry. Text selection is confined to the floating text editor. Base UI Preview Card is a hover popup, not a PDF renderer. Component hit areas use shared Buttons with hover outlines and keyboard activation. Clicking a target selects it. The bottom bar’s Edit and Comment icons open one shared panel.
+
+When changing controls, check keyboard activation, Escape, focus restoration, disabled states, and a narrow viewport. When changing document surfaces, check live covers, fit width, page entry, text selection, inspection, comments, and export. Use a temporary workspace for feedback tests so the user's comment history stays clean.
+
+The app shell uses bundled Geist variable WOFF2 faces, including real italic and the full weight range, from `assets/ui-fonts/geist`. Document typography belongs to the PDF and theme specimens. UI sizes are explicit at native browser zoom: 18px page headings, 14px card/section titles, 13px body and control text, and 12.5px sidebar labels. Match density through these type and spacing tokens, not global CSS zoom or a transform on the app. Library pages have one title and one primary action, without a second breadcrumb header, promotional subtitle, or repeated document list. The reader uses one toolbar with document context, centered reading controls, and trailing actions. Document options contains project moves and appearance; compact layouts expose reading controls through the page counter while comments keep their own bottom-right dock. Document cards lead with the real preview, then the title and compact metadata. Keep secondary text readable; avoid uppercase micro-labels, decorative badges, floating arrow ornaments, and motion on the paper. Feedback uses compact rows with page/component labels, comment text, and pencil/trash actions. A fixed-width bottom bar owns selection actions, pending text changes, undo/redo, and Save all; draft PDFs stay separate from saved source.
+
+## App color palette
+
+`src/app/colors.css` owns the grayscale browser palette: `#F8F8F8` background and `#2777C1` primary accent. Use its semantic tokens throughout app styles, including surfaces, selection, errors, and shadows. Small interactive labels use the darker `--accent-ink` shade for contrast. Headings and secondary controls stay neutral. Status and error messages keep their explicit wording; color is not their only signal. The app supports light, dark, and system appearance, with stronger foregrounds/borders for increased contrast. PDF themes, theme swatches, and supplied media retain their own colors.

package/src/app/ui/fonts.css

@@ -0,0 +1,36 @@
+/* Local variable UI faces. PDF font bindings remain independent. */
+@font-face {
+  font-family: 'OpenDoc UI';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('/assets/ui-fonts/geist/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'OpenDoc UI';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('/assets/ui-fonts/geist/geist-latin-wght-normal.woff2') format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+  font-family: 'OpenDoc UI';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('/assets/ui-fonts/geist/geist-latin-ext-wght-italic.woff2') format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'OpenDoc UI';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('/assets/ui-fonts/geist/geist-latin-wght-italic.woff2') format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}

package/src/app/ui/index.tsx

@@ -0,0 +1,223 @@
+import type { ReactElement, ReactNode } from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
+import { Select } from "@base-ui/react/select";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Toast } from "@base-ui/react/toast";
+import { Icon } from "./Icon";
+import "./ui.css";
+
+export { Dialog } from "@base-ui/react/dialog";
+export { Input } from "@base-ui/react/input";
+export { Tabs } from "@base-ui/react/tabs";
+
+// Keep the Base UI composition and ref API available to every consumer.
+export type ButtonProps = BaseButton.Props & { static?: boolean };
+
+export function Button({
+  className,
+  static: isStatic = false,
+  ...props
+}: ButtonProps) {
+  return (
+    <BaseButton
+      {...props}
+      data-static={isStatic || undefined}
+      className={(state) =>
+        `ui-button ${typeof className === "function" ? className(state) : (className ?? "")}`
+      }
+    />
+  );
+}
+
+function Hint({ label, children }: { label: string; children: ReactElement }) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger render={children} />
+      <Tooltip.Portal>
+        <Tooltip.Positioner sideOffset={8}>
+          <Tooltip.Popup className="ui-tooltip">{label}</Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}
+
+export function IconButton({
+  label,
+  className,
+  ...props
+}: Omit<ButtonProps, "className"> & {
+  label: string;
+  className?: string;
+}) {
+  return (
+    <Hint label={label}>
+      <Button
+        {...props}
+        aria-label={label}
+        className={`icon-button ${className ?? ""}`}
+      />
+    </Hint>
+  );
+}
+
+export function ToggleButton({
+  label,
+  children,
+  static: isStatic = false,
+  ...props
+}: Toggle.Props & { label: string; static?: boolean }) {
+  return (
+    <Hint label={label}>
+      <Toggle
+        {...props}
+        data-static={isStatic || undefined}
+        aria-label={label}
+        className="ui-button tool-button"
+      >
+        {children}
+      </Toggle>
+    </Hint>
+  );
+}
+
+export function SelectControl({
+  label,
+  disabled,
+  value,
+  onValueChange,
+  items,
+}: {
+  label: string;
+  disabled?: boolean;
+  value: string;
+  onValueChange: (value: string) => void;
+  items: { label: string; value: string }[];
+}) {
+  return (
+    <Select.Root
+      disabled={disabled}
+      items={items}
+      value={value}
+      onValueChange={(next) => {
+        if (next !== null) onValueChange(next);
+      }}
+    >
+      <Select.Trigger
+        data-static
+        className="ui-button ui-select"
+        aria-label={label}
+      >
+        <Select.Value />
+        <Select.Icon>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="m3 4.5 3 3 3-3"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Positioner
+          className="ui-positioner"
+          sideOffset={6}
+          align="start"
+          alignItemWithTrigger={false}
+        >
+          <Select.Popup className="ui-select-popup">
+            <Select.List>
+              {items.map((item) => (
+                <Select.Item
+                  key={item.value}
+                  value={item.value}
+                  className="ui-select-item"
+                >
+                  <Select.ItemText>{item.label}</Select.ItemText>
+                  <Select.ItemIndicator>
+                    <Icon name="check" size={14} />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              ))}
+            </Select.List>
+          </Select.Popup>
+        </Select.Positioner>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+export function useNotifications() {
+  const manager = Toast.useToastManager();
+  return {
+    success: (title: string, action?: { label: string; onClick: () => void | Promise<void> }) => {
+      let pending = false;
+      const id = manager.add({ title, type: "success", ...(action ? { timeout: 12000, actionProps: { children: action.label, onClick: async () => {
+        if (pending) return;
+        pending = true;
+        try { await action.onClick(); manager.close(id); }
+        catch (error) { manager.add({ title: error instanceof Error ? error.message : 'The action could not finish. Try again.', type: 'error', timeout: 0, priority: 'high' }); }
+        finally { pending = false; }
+      } } } : {}) });
+      return id;
+    },
+    error: (title: string) =>
+      manager.add({ title, type: "error", timeout: 0, priority: "high" }),
+  };
+}
+
+function Notifications() {
+  const { toasts } = Toast.useToastManager();
+  return (
+    <Toast.Portal>
+      <Toast.Viewport className="ui-notifications">
+        {toasts.map((toast) => (
+          <Toast.Root
+            key={toast.id}
+            toast={toast}
+            className="ui-notification"
+            data-kind={toast.type}
+          >
+            <Toast.Content>
+              <Toast.Title className="ui-notification-title" />
+              {toast.actionProps && <Toast.Action render={<Button className="text-button notification-action" />} />}
+            </Toast.Content>
+            <Toast.Close
+              aria-hidden={false}
+              aria-label="Dismiss notification"
+              render={
+                <Button
+                  className="icon-button"
+                  aria-label="Dismiss notification"
+                />
+              }
+            >
+              <Icon name="close" size={14} />
+            </Toast.Close>
+          </Toast.Root>
+        ))}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+export function UiProvider({ children }: { children: ReactNode }) {
+  return (
+    <Tooltip.Provider delay={500}>
+      <Toast.Provider limit={3}>
+        {children}
+        <Notifications />
+      </Toast.Provider>
+    </Tooltip.Provider>
+  );
+}