@ryanyahya/opendoc 0.4.0

package/src/app/assets.css

@@ -0,0 +1,139 @@
+.assets-content { padding-bottom: 70px; }
+.assets-heading { min-height: var(--control-hit-size); margin-bottom: 24px; }
+.assets-tabs { display: flex; flex-direction: row; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
+.assets-tabs a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 12px 0; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--label-size); line-height: var(--label-leading); font-weight: 500; text-decoration: none; }
+.assets-tabs a::after { content: ''; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; background: transparent; }
+.assets-tabs a:hover { color: var(--ink); background: transparent; }
+.assets-tabs a:hover::after { background: var(--line-strong); }
+.assets-tabs a[aria-current] { color: var(--ink); }
+.assets-tabs a[aria-current]::after { background: var(--ink); }
+.assets-tabs a:focus-visible { outline-offset: -3px; border-radius: 4px; }
+.assets-content > .materials-content { padding: 0; max-width: none; }
+.asset-collection-toolbar { display: flex; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 24px; }
+.asset-collection-toolbar .search-field { max-width: 400px; }
+.asset-collection-status { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
+.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 30px 24px; }
+.asset-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--ink); text-decoration: none; border-radius: 7px; }
+.asset-card-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 7px; padding: 28px; overflow: hidden; outline: 1px solid var(--media-edge); outline-offset: -1px; }
+.asset-card-preview img { display: block; width: 100%; height: 100%; object-fit: contain; max-height: 200px; }
+.asset-card-caption { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.asset-card-caption > strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; }
+.asset-card-caption > strong > svg { flex: none; opacity: 0; transition: opacity 120ms; }
+.asset-card:hover .asset-card-caption > strong, .asset-card:focus-visible .asset-card-caption > strong { color: var(--accent-ink); }
+.asset-card:hover .asset-card-caption > strong > svg, .asset-card:focus-visible .asset-card-caption > strong > svg { opacity: 1; }
+.asset-card-caption > span { font-size: var(--body-size); line-height: var(--body-leading); color: var(--muted); overflow-wrap: anywhere; }
+.asset-card-caption > .media-problem { color: var(--error-ink); }
+.asset-font-card-preview { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; aspect-ratio: 4 / 3; border-radius: 7px; padding: 28px; background: var(--surface); box-shadow: var(--shadow-media); outline: 1px solid var(--line); outline-offset: -1px; }
+.asset-font-card-preview > span { font-size: clamp(50px, 6vw, 88px); letter-spacing: -.08em; line-height: 1; font-family: Georgia, serif; }
+.asset-font-card-preview > small { color: var(--muted); white-space: nowrap; }
+.asset-preview-missing { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--label-size); color: var(--muted); }
+.asset-empty-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 14px; font: 30px Georgia, serif; color: var(--muted); }
+.asset-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
+.asset-detail-heading h2 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; letter-spacing: -.01em; margin-bottom: 10px; overflow-wrap: anywhere; }
+.asset-detail-heading p { color: var(--muted); max-width: 65ch; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+.asset-detail-actions { display: flex; gap: 7px; flex: none; }
+.asset-detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(255px, 1fr); gap: 36px; align-items: start; }
+.asset-main-column, .asset-side-column { min-width: 0; }
+.asset-logo-stage { display: grid; place-items: center; width: 100%; min-height: 280px; aspect-ratio: 4 / 3; padding: 10%; border-radius: 8px; overflow: hidden; outline: 1px solid var(--media-edge); outline-offset: -1px; }
+.asset-logo-stage img { display: block; width: 100%; height: 100%; object-fit: contain; max-height: 460px; }
+.asset-background-light { background-color: #fff; color: #282828; }
+.asset-background-dark { background-color: #222; color: #fff; }
+.asset-background-transparent { background-color: #fff; color: #282828; background-image: linear-gradient(45deg, #eaeaea 25%, transparent 25%), linear-gradient(-45deg, #eaeaea 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eaeaea 75%), linear-gradient(-45deg, transparent 75%, #eaeaea 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
+.asset-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px 0 26px; }
+.asset-preview-tools > a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: 13px; min-height: 36px; }
+.asset-backgrounds { display: flex; align-items: center; gap: 4px; }
+.asset-background-choice.ui-button { width: 30px; height: 30px; min-height: 30px; border: 1px solid var(--media-edge); padding: 0; border-radius: 50%; margin: 3px; outline-offset: 3px; }
+.asset-background-choice[aria-pressed='true'] { outline: 1px solid var(--muted); }
+.asset-background-choice > span { display: grid; place-items: center; }
+.asset-background-choice.asset-background-dark:hover { background-color: #222; color: #fff; }
+.asset-background-choice.asset-background-light:hover, .asset-background-choice.asset-background-transparent:hover { background-color: #fff; color: #282828; }
+.asset-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.asset-section-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 500; font-size: var(--title-size); line-height: var(--title-leading); margin: 0; overflow-wrap: anywhere; }
+.asset-section-heading h3 > span { color: var(--muted); font-size: 13px; font-weight: 400; }
+.asset-variation-list { display: flex; flex-direction: column; gap: 8px; }
+.asset-variation-choice.ui-button { display: flex; width: 100%; text-align: left; align-items: center; gap: 14px; padding: 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; white-space: normal; }
+.asset-variation-choice.ui-button:hover { background: var(--surface); }
+.asset-variation-choice.selected { border-color: var(--line); background: var(--surface); }
+.asset-variation-choice > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 5px; overflow-wrap: anywhere; }
+.asset-variation-choice strong { font-weight: 500; font-size: 14px; }
+.asset-variation-choice small { color: var(--muted); font-size: 12px; }
+.asset-variation-thumb { display: grid; place-items: center; width: 72px; height: 52px; border-radius: 4px; flex: none; overflow: hidden; padding: 8px; }
+.asset-variation-thumb img { width: 100%; height: 100%; object-fit: contain; }
+.asset-variation-thumb .asset-preview-missing > span { display: none; }
+.asset-side-column { font-size: 14px; line-height: 1.6; }
+.asset-side-column section + section { border-top: 1px solid var(--line); padding-top: 25px; margin-top: 25px; }
+.asset-side-column h3 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; margin-bottom: 10px; }
+.asset-side-column h4 { font-size: 12px; color: var(--muted); margin: 23px 0 8px; font-weight: 500; }
+.asset-side-column p { white-space: pre-wrap; overflow-wrap: anywhere; }
+.asset-badge { display: inline-flex; align-items: center; min-height: var(--badge-height); padding: 2px 6px; font-size: var(--label-size); line-height: var(--label-leading); font-weight: 500; background: var(--badge-fill); color: var(--badge-ink); border-radius: var(--badge-radius); white-space: nowrap; }
+.asset-action-stack { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 14px; margin: 14px 0 10px; }
+.asset-action-stack .text-button { padding-left: 0; padding-right: 0; font-size: 13px; }
+.asset-variation-size { padding-top: 6px; font-variant-numeric: tabular-nums; }
+.asset-relationships h2 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; margin-bottom: 12px; }
+.asset-relationship { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0; font-size: 13px; color: var(--ink); }
+.asset-relationship > svg { flex: none; margin-top: 3px; color: var(--muted); }
+.asset-relationship > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
+.asset-relationship strong { font-weight: 500; overflow-wrap: anywhere; }
+.asset-relationship small { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 3px; }
+.asset-relationship:hover strong, .asset-relationship a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
+.asset-specimen { overflow: hidden; width: 100%; }
+.asset-specimen-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 0 15px; color: var(--muted); font-size: 12px; }
+.asset-specimen-heading a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); min-height: 34px; }
+.asset-specimen .pdf-page { max-width: 100%; margin: 0 auto 18px; }
+.asset-preview-message { padding: 80px 24px; border-radius: 8px; background: var(--surface); text-align: center; line-height: 1.6; color: var(--muted); }
+.asset-font-styles ul { margin: 0; padding: 0; list-style: none; }
+.asset-font-styles li { display: flex; align-items: center; justify-content: space-between; min-height: var(--data-row-height); padding: 3px 0; border-bottom: 1px solid var(--line); gap: 12px; }
+.asset-font-styles li > span { display: flex; flex-direction: column; }
+.asset-font-styles strong { font-size: var(--label-size); line-height: var(--label-leading); font-weight: 500; }
+.asset-font-styles small { font-size: var(--label-size); line-height: var(--label-leading); color: var(--muted); }
+.asset-font-styles li a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); border-radius: var(--control-radius); }
+.asset-font-styles li a:hover { color: var(--ink); background: var(--surface); }
+.asset-state-banner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; line-height: 1.5; }
+.asset-dialog { max-height: calc(100dvh - 48px); overflow-y: auto; }
+.asset-dialog textarea, .asset-theme-defaults textarea { display: block; width: 100%; resize: vertical; min-height: 75px; border: 1px solid var(--line); border-radius: 5px; padding: 11px 12px; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.5; }
+.asset-upload { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
+.asset-upload input[type=file] { display: block; width: 100%; font: inherit; color: var(--muted); font-size: 13px; border: 0; background: transparent; padding: 0; }
+.asset-upload input[type=file]::file-selector-button { min-height: var(--control-hit-size); padding: 6px 10px; font: 500 var(--label-size)/var(--label-leading) Inter, sans-serif; color: var(--ink); border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); margin: 6px 10px 6px 0; cursor: pointer; }
+.asset-upload-files { margin: 8px 0 0; padding: 0; list-style: none; }
+.asset-upload-files li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.6; padding-top: 5px; overflow-wrap: anywhere; }
+.asset-upload-files li span { flex: none; color: var(--muted); }
+.asset-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; padding: 14px 0; }
+.asset-checkbox input { margin: 3px 0 0; }
+.asset-archive-relationships { margin-top: 24px; font-size: 14px; }
+.asset-archive-relationships ul { list-style: none; padding: 0; margin: 12px 0; }
+.asset-archive-relationships li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
+.asset-archive-relationships li span { color: var(--muted); font-size: 12px; }
+.asset-version-list { display: flex; flex-direction: column; margin-top: 24px; }
+.asset-version.ui-button { width: 100%; padding: 15px 0; justify-content: space-between; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
+.asset-version > span:first-child { display: flex; flex-direction: column; gap: 6px; }
+.asset-version strong { font-weight: 500; }
+.asset-version small { font-size: 12px; color: var(--muted); }
+.asset-theme-defaults { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 25px; }
+.asset-theme-defaults h2 { font-size: var(--title-size); line-height: var(--title-leading); font-weight: 500; margin-bottom: 9px; }
+.asset-theme-defaults > p { font-size: 13px; line-height: 1.6; color: var(--muted); }
+.asset-theme-defaults .asset-fields { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
+.asset-theme-defaults .ui-select { width: 100%; text-align: left; white-space: normal; min-width: 0; }
+.asset-theme-defaults .ui-select > span:first-child { overflow-wrap: anywhere; }
+.asset-theme-defaults .create-field { font-size: 13px; margin: 20px 0 0; }
+.asset-theme-defaults .field-hint { font-size: 12px; line-height: 1.6; }
+.asset-font-defaults { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 1150px) { .asset-detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(225px, 1fr); gap: 26px; } .asset-font-defaults { grid-template-columns: 1fr; gap: 0; } }
+@media (max-width: 950px) { .asset-detail-grid { grid-template-columns: 1fr; gap: 32px; } .asset-logo-stage { aspect-ratio: 3 / 2; } .asset-side-column { display: block; } .asset-detail-heading { flex-wrap: wrap; gap: 16px; } .asset-font-defaults { grid-template-columns: 1fr 1fr; gap: 12px; } }
+@media (max-width: 620px) { .assets-heading { align-items: flex-start; gap: 14px; flex-wrap: wrap; } .assets-tabs { gap: 26px; margin-bottom: 24px; } .asset-grid { grid-template-columns: 1fr; } .asset-collection-toolbar { flex-wrap: wrap; } .asset-collection-toolbar .search-field { flex: 1 1 100%; max-width: none; } .asset-detail-heading h2 { font-size: var(--title-size); line-height: var(--title-leading); } .asset-logo-stage { min-height: 220px; aspect-ratio: 4 / 3; } .asset-preview-tools { gap: 9px; } .asset-preview-tools > a { flex-basis: 100%; margin-left: 0; } .asset-font-defaults { grid-template-columns: 1fr; gap: 0; } .asset-dialog { max-height: calc(100dvh - 24px); } }
+
+/* A logo opens to its files, followed by the selected artwork. */
+.logo-folder-contents { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
+.logo-folder-contents .asset-variation-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
+.logo-folder-contents .asset-variation-choice { flex-direction: column; align-items: stretch; position: relative; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
+.logo-folder-contents .asset-variation-choice.selected { border-color: var(--accent-ink); }
+.logo-folder-contents .asset-variation-thumb { width: 100%; height: 100px; }
+.logo-folder-contents .asset-variation-choice > svg { position: absolute; right: 12px; bottom: 15px; }
+.logo-folder-contents .asset-variation-choice > span:nth-child(2) { padding-right: 20px; }
+.logo-upload-preview { display: grid; place-items: center; width: 76px; height: 70px; border-radius: 5px; padding: 8px; overflow: hidden; flex: none; }
+.logo-upload-preview img { width: 100%; height: 100%; object-fit: contain; }
+.logo-default-upload .logo-upload-preview { width: 100%; height: 180px; margin-bottom: 16px; padding: 24px; }
+.logo-upload-list { display: flex; flex-direction: column; gap: 18px; margin: 22px 0; }
+.logo-upload-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.logo-upload-row .create-field { margin: 0; flex: 1; min-width: 0; }
+.logo-upload-row small { color: var(--muted); overflow-wrap: anywhere; font-size: 12px; }
+@media (max-width: 620px) { .logo-folder-contents .asset-variation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-upload-preview { width: 50px; height: 60px; } .logo-upload-row { gap: 8px; } }

package/src/app/catalogPreview.ts

@@ -0,0 +1,20 @@
+import { api } from './api';
+
+// Leave browser connections available for navigation, context, and document refreshes.
+let active = 0;
+const waiting: (() => void)[] = [];
+async function acquire(signal: AbortSignal) {
+  signal.throwIfAborted();
+  if (active < 2) { active++; return; }
+  await new Promise<void>((accept, reject) => {
+    const start = () => { signal.removeEventListener('abort', cancel); accept(); };
+    const cancel = () => { waiting.splice(waiting.indexOf(start), 1); reject(signal.reason); };
+    waiting.push(start);
+    signal.addEventListener('abort', cancel, { once: true });
+  });
+}
+export async function catalogPreview<T>(path: string, signal: AbortSignal): Promise<T> {
+  await acquire(signal);
+  try { return await api<T>(path, { signal }); }
+  finally { const next = waiting.shift(); if (next) next(); else active--; }
+}

package/src/app/colors.css

@@ -0,0 +1,167 @@
+/* App chrome only. PDF themes and supplied media keep their own colors. */
+:root {
+  color-scheme: light;
+  --background: #f8f8f8;
+  --surface: #f2f2f2;
+  --surface-raised: #ffffff;
+  --surface-alt: #eeeeee;
+  --navigation-surface: #e2e2e2;
+  --surface-hover: #e6e6e6;
+  --ink: #262626;
+  --muted: #666666;
+  --placeholder: #777777;
+  --badge-fill: #caface;
+  --badge-ink: #15b042;
+  --switch-track: #0077e6;
+  --line: #dedede;
+  --line-strong: #b8b8b8;
+  --control-line: #8c8c8c;
+  --accent: #2777c1;
+  --accent-hover: #226aab;
+  --accent-active: #1d5b93;
+  --accent-ink: #1d5b93;
+  --accent-ink-hover: #174d7e;
+  --on-accent: #ffffff;
+  --focus-ring: var(--accent);
+  --control-hover: #eaeaea;
+  --control-active: #e2e2e2;
+  --selected-surface: #e8e8e8;
+  --popup-surface: var(--surface-raised);
+  --inverse-surface: #292929;
+  --inverse-ink: #ffffff;
+  --status-ink: #666666;
+  --notice-surface: #eeeeee;
+  --notice-ink: #424242;
+  --destructive: #b42318;
+  --destructive-fill: #b42318;
+  --error-surface: #e8e8e8;
+  --error-ink: #242424;
+  --error-line: #777777;
+  --comment-marker: var(--accent);
+  --scrollbar: #a3a3a3;
+  --selection: #d2e4f5;
+  --pdf-selection: #2777c133;
+  --inspection-hover: #2777c112;
+  --inspection-selected: #2777c11a;
+  --inspection-line: #2777c1aa;
+  --link-highlight: #2777c125;
+  --link-outline: #2777c177;
+  --backdrop: #00000045;
+  --paper-edge: #0000001a;
+  --media-edge: #00000014;
+  --shadow-control: 0 1px 2px #00000014;
+  --shadow-popup: 0 4px 8px #00000008, 0 12px 32px #00000014;
+  --shadow-dialog: 0 25px 100px #00000030;
+  --shadow-tooltip: 0 2px 6px #00000018;
+  --shadow-cover: 0 2px 5px #00000010, 0 9px 22px #00000010;
+  --shadow-paper: 0 0 0 1px #00000008, 0 2px 6px #00000010, 0 10px 27px #00000008;
+  --shadow-thumbnail: 0 2px 5px #00000012;
+  --shadow-preview: 0 3px 12px #00000017;
+  --shadow-media: 0 2px 8px #00000008;
+  --shadow-panel-left: -12px 0 30px #00000010;
+  --shadow-panel-right: 12px 0 30px #00000014;
+  --wordmark-filter: none;
+  /* Page and media colors remain faithful to the exported artifact in either appearance. */
+  --paper: #ffffff;
+  --paper-muted: #555555;
+  --document-accent: #2777c1;
+  --on-document-accent: #ffffff;
+  --media-surface: #ffffff;
+}
+
+:root[data-appearance="dark"] {
+  color-scheme: dark;
+  --background: #181818;
+  --surface: #202020;
+  --surface-raised: #262626;
+  --surface-alt: #121212;
+  --navigation-surface: #282828;
+  --surface-hover: #303030;
+  --ink: #f0f0f0;
+  --muted: #a6a6a6;
+  --placeholder: #aaaaaa;
+  --line: #393939;
+  --line-strong: #626262;
+  --control-line: #898989;
+  --accent: #8ac4f2;
+  --accent-hover: #9cd0f7;
+  --accent-active: #85bfee;
+  --accent-ink: #9acbf2;
+  --accent-ink-hover: #bfdef7;
+  --on-accent: #132638;
+  --focus-ring: #9acbf2;
+  --control-hover: #333333;
+  --control-active: #3c3c3c;
+  --selected-surface: #343434;
+  --popup-surface: #292929;
+  --inverse-surface: #e2e2e2;
+  --inverse-ink: #242424;
+  --status-ink: #aaaaaa;
+  --notice-surface: #252525;
+  --notice-ink: #dddddd;
+  --destructive: #ff9285;
+  --error-surface: #302828;
+  --error-ink: #f2d7d7;
+  --error-line: #bb8d8d;
+  --scrollbar: #777777;
+  --selection: #345575;
+  --backdrop: #00000099;
+  --media-edge: #ffffff1a;
+  --shadow-control: 0 1px 2px #00000030;
+  --shadow-popup: 0 4px 8px #00000030, 0 12px 32px #00000055;
+  --shadow-dialog: 0 25px 100px #00000080;
+  --shadow-tooltip: 0 2px 6px #00000040;
+  --shadow-cover: 0 2px 5px #00000035, 0 9px 22px #00000045;
+  --shadow-paper: 0 0 0 1px #ffffff12, 0 2px 6px #00000035, 0 10px 27px #00000050;
+  --shadow-thumbnail: 0 2px 5px #00000040;
+  --shadow-preview: 0 3px 12px #00000045;
+  --shadow-media: 0 2px 8px #00000040;
+  --shadow-panel-left: -12px 0 30px #00000055;
+  --shadow-panel-right: 12px 0 30px #00000055;
+  --wordmark-filter: invert(1);
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --ink: #000000;
+    --muted: #222222;
+    --placeholder: #444444;
+    --badge-ink: #0b6427;
+    --line: #8c8c8c;
+    --control-line: #555555;
+    --accent-ink: #123f68;
+  }
+  :root[data-appearance="dark"] {
+    --background: #000000;
+    --surface: #080808;
+    --surface-raised: #0c0c0c;
+    --surface-alt: #000000;
+    --navigation-surface: #141414;
+    --popup-surface: #0c0c0c;
+    --control-hover: #202020;
+    --control-active: #282828;
+    --selected-surface: #202020;
+    --ink: #ffffff;
+    --muted: #eeeeee;
+    --placeholder: #dddddd;
+    --line: #858585;
+    --line-strong: #999999;
+    --control-line: #bbbbbb;
+    --accent-ink: #cce6ff;
+    --focus-ring: #cce6ff;
+    --accent: #baddf7;
+    --accent-hover: #d0eaff;
+    --accent-active: #b3d9f6;
+    --on-accent: #081320;
+    --notice-surface: #080808;
+    --notice-ink: #ffffff;
+    --error-surface: #0c0c0c;
+    --error-ink: #ffffff;
+  }
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--placeholder);
+  opacity: 1;
+}

package/src/app/comment-dock.css

@@ -0,0 +1,53 @@
+.ui-button.comment-dock-trigger {
+  position: fixed;
+  z-index: 34;
+  right: 20px;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  min-width: 62px;
+  min-height: var(--control-hit-size);
+  gap: 8px;
+  padding: 7px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--control-radius);
+  background: var(--popup-surface);
+  color: var(--ink);
+  box-shadow: var(--shadow-popup);
+}
+.ui-button.comment-dock-trigger:hover { background: var(--control-hover); }
+.ui-button.comment-dock-trigger[aria-expanded="true"] { color: var(--accent-ink); }
+.comment-dock-count { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
+
+.correction-editor.comment-dock-panel {
+  top: auto;
+  right: 20px;
+  bottom: max(76px, calc(env(safe-area-inset-bottom) + 56px));
+  left: auto;
+  width: 344px;
+  max-width: calc(100vw - 40px);
+  max-height: min(60dvh, 560px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 12px;
+  background: var(--popup-surface);
+  box-shadow: var(--shadow-popup);
+}
+.comment-dock-panel .correction-heading { flex-shrink: 0; }
+.comment-dock-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+.comment-dock-content .comment-error { margin: 2px 2px 12px; }
+.comment-dock-content .no-comments { margin: 0; padding: 10px 8px; }
+
+@media (max-width: 620px) {
+  .ui-button.comment-dock-trigger { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
+  .correction-editor.comment-dock-panel {
+    top: auto !important;
+    right: 12px;
+    bottom: max(68px, calc(env(safe-area-inset-bottom) + 56px)) !important;
+    left: auto !important;
+    width: calc(100% - 24px);
+    max-width: none;
+    max-height: 60dvh !important;
+    border-radius: 14px;
+  }
+  .comment-dock-panel textarea { font-size: 16px; }
+}

package/src/app/commentDrafts.ts

@@ -0,0 +1,67 @@
+import type { DocumentSelection } from "../shared/selection";
+
+/** Range drafts must not silently move to another phrase in the same paragraph. */
+export function commentDraftKey(selection: DocumentSelection | null) {
+  if (!selection) return "";
+  return selection.quote ? JSON.stringify([selection.blockId, selection.targetId ?? null, selection.start ?? null, selection.end ?? null, selection.quote]) : selection.blockId;
+}
+
+/** Component feedback follows its text slot while an edit preview changes the wording. */
+export function componentCommentDraftKey(selection: DocumentSelection | null) {
+  return selection ? JSON.stringify(['component', selection.blockId, selection.targetId ?? null]) : '';
+}
+
+export type CommentDrafts = Readonly<Record<string, string>>;
+type DraftStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+
+// The browser session is the boundary: drafts stay local and expire with the tab.
+export function createCommentDraftStore(storage: () => DraftStorage | undefined = () => window.sessionStorage) {
+  const memory = new Map<string, CommentDrafts>();
+  const key = (documentId: string) => `opendoc:comment-drafts:${documentId}`;
+
+  function read(documentId: string): CommentDrafts {
+    const cached = memory.get(documentId);
+    if (cached) return cached;
+    const drafts: Record<string, string> = Object.create(null);
+    try {
+      const saved = storage()?.getItem(key(documentId));
+      const parsed: unknown = saved ? JSON.parse(saved) : null;
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        for (const [blockId, value] of Object.entries(parsed)) {
+          if (typeof value === 'string' && value.length > 0 && value.length <= 8000) drafts[blockId] = value;
+        }
+      }
+    } catch {
+      // Unavailable storage and malformed saved data must not interrupt writing.
+    }
+    memory.set(documentId, drafts);
+    return drafts;
+  }
+
+  function set(documentId: string, blockId: string, value: string): CommentDrafts {
+    const drafts: Record<string, string> = Object.assign(Object.create(null), read(documentId));
+    if (value === '') delete drafts[blockId];
+    else drafts[blockId] = value;
+    memory.set(documentId, drafts);
+    try {
+      const target = storage();
+      if (Object.keys(drafts).length) target?.setItem(key(documentId), JSON.stringify(drafts));
+      else target?.removeItem(key(documentId));
+    } catch {
+      // Keep the in-memory copy authoritative if the browser cannot persist it.
+    }
+    return drafts;
+  }
+
+  function clearSubmitted(documentId: string, blockId: string, submitted: string): CommentDrafts {
+    const drafts = read(documentId);
+    // A newer draft may have been typed while the submitted comment was saving.
+    return Object.hasOwn(drafts, blockId) && drafts[blockId] === submitted
+      ? set(documentId, blockId, '')
+      : drafts;
+  }
+
+  return { read, set, clearSubmitted };
+}
+
+export const commentDrafts = createCommentDraftStore();

package/src/app/componentCorrection.ts

@@ -0,0 +1,17 @@
+import type { TextTarget } from '../shared/selection';
+
+export function canCorrectComponent(target: TextTarget | undefined) {
+  return !!target?.runs.some(run => run.source && !run.protected && run.source.value === target.text.slice(run.start, run.end));
+}
+
+/** The popover holds the whole component; a correction still owns one source value. */
+export function componentCorrection(target: TextTarget, replacement: string) {
+  if (target.text === replacement) return undefined;
+  const candidates = target.runs.flatMap(run => {
+    if (!run.source || run.protected || run.source.value !== target.text.slice(run.start, run.end)) return [];
+    const prefix = target.text.slice(0, run.start), suffix = target.text.slice(run.end);
+    if (replacement.length < prefix.length + suffix.length || !replacement.startsWith(prefix) || !replacement.endsWith(suffix)) return [];
+    return [{ start: run.start, end: run.end, replacement: replacement.slice(prefix.length, replacement.length - suffix.length) }];
+  });
+  return candidates.length === 1 ? candidates[0] : undefined;
+}

package/src/app/edit-workbench.css

@@ -0,0 +1,87 @@
+.edit-workbench {
+  position: fixed;
+  z-index: 35;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(620px, calc(100vw - 208px));
+  max-width: calc(100vw - 208px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.text-edit-panel, .edit-session-bar, .edit-session-notice {
+  background: var(--popup-surface);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: var(--shadow-popup);
+}
+.text-edit-panel { padding: 12px; max-height: min(55dvh, 460px); overflow: auto; }
+.text-edit-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -3px -3px 8px 3px; }
+.text-edit-heading > div { display: flex; align-items: center; gap: 8px; color: var(--muted); }
+.text-edit-heading h2 { font-size: 12px; font-weight: 500; margin: 0; color: var(--ink); }
+.text-edit-kind { padding-inline-start: 8px; border-inline-start: 1px solid var(--line); font-size: 11px; text-transform: capitalize; }
+.text-edit-heading .ui-button.icon-button { min-width: 28px; min-height: 28px; padding: 5px; border-radius: 6px; color: var(--muted); }
+.text-edit-panel textarea {
+  display: block;
+  width: 100%;
+  min-height: 100px;
+  max-height: 28dvh;
+  resize: vertical;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 10px 11px;
+  background: var(--background);
+  color: var(--ink);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.65;
+  caret-color: var(--accent);
+}
+.text-edit-panel textarea:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: -1px; }
+.text-edit-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.text-edit-footer > span { flex: 1; color: var(--muted); font-size: 11px; text-align: end; }
+.text-edit-footer .ui-button { min-height: 30px; min-width: 0; padding: 5px 8px; gap: 6px; font-size: 12px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
+.text-edit-footer .ui-button:hover { color: var(--ink); background: var(--control-hover); }
+.text-edit-footer kbd { font: inherit; color: var(--muted); }
+.selection-actions { display: flex; gap: 2px; padding-inline-end: 4px; border-inline-end: 1px solid var(--line); }
+.edit-session-bar .selection-actions .ui-button[aria-pressed="true"] { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.text-edit-footer .add-comment { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.edit-session-bar { display: flex; align-items: center; gap: 6px; padding: 6px; min-height: 46px; }
+.edit-session-status { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 12px; flex: 1; white-space: nowrap; }
+.edit-session-status > svg { display: none; }
+.edit-session-status > span { overflow: hidden; text-overflow: ellipsis; }
+.draft-preview-status { color: var(--muted); font-size: 11px; display: none; }
+.edit-history { display: flex; gap: 2px; padding-inline: 4px; border-inline-start: 1px solid var(--line); }
+.edit-session-bar .ui-button { min-width: 0; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 7px; font-size: 12px; white-space: nowrap; box-shadow: none; }
+.edit-session-bar .ui-button.icon-button { min-width: 30px; padding: 6px; color: var(--muted); }
+.edit-session-bar .discard-edits { color: var(--muted); background: transparent; }
+.edit-session-bar .save-edits { color: var(--on-accent); background: var(--accent); gap: 10px; padding-inline: 12px; }
+.edit-session-bar .save-edits:hover { background: var(--accent-hover); }
+.edit-session-bar .save-edits:active:not(:disabled) { background: var(--accent-active); }
+.edit-session-bar kbd { font: inherit; font-size: 10px; opacity: 0.75; }
+.edit-session-notice { padding: 10px 12px; max-width: 620px; display: flex; align-items: center; gap: 12px; }
+.edit-session-notice p { margin: 0; font-size: 12px; line-height: 1.5; }
+.edit-session-notice .ui-button { flex-shrink: 0; font-size: 12px; padding: 6px 9px; min-height: 32px; }
+.reader:has(.edit-workbench) .sheets { padding-bottom: 300px; }
+.reader-scroll:focus { outline: none; }
+.reader:has(.edit-workbench) .comment-dock-panel { bottom: max(86px, calc(env(safe-area-inset-bottom) + 66px)); }
+@media (max-width: 700px) {
+  .edit-workbench { left: 12px; right: 12px; bottom: max(68px, calc(env(safe-area-inset-bottom) + 56px)); transform: none; width: auto; max-width: none; }
+  .edit-session-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: 36px 36px; gap: 4px; padding: 6px; }
+  .selection-actions { grid-column: 1; grid-row: 1; padding: 0; border: 0; }
+  .edit-session-status { grid-column: 2; grid-row: 1; padding: 0 4px; font-size: 11px; }
+  .edit-history { grid-column: 3; grid-row: 1; border: 0; padding-inline: 0; }
+  .edit-session-bar .discard-edits { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
+  .edit-session-bar .save-edits { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
+  .edit-session-bar .ui-button { min-height: 36px; }
+  .text-edit-panel { max-height: min(48dvh, 360px); }
+  .text-edit-panel textarea { font-size: 16px; min-height: 96px; }
+  .text-edit-footer > span { font-size: 10px; max-width: 116px; margin-inline-start: auto; }
+  .text-edit-heading .ui-button.icon-button, .text-edit-footer .ui-button { min-height: 36px; }
+  .reader:has(.edit-workbench) .comment-dock-panel { bottom: max(168px, calc(env(safe-area-inset-bottom) + 156px)) !important; max-height: 52dvh !important; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .text-edit-panel textarea { transition: outline-color 120ms ease-out; }
+}