@agimon-ai/doompi-author 0.0.1-alpha.3 → 0.0.1-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-author",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.6",
   "description": "Visual steering workspace for focused document review and bounded authoring",
   "keywords": [
     "ai",
@@ -35,7 +35,8 @@
     "llms.txt",
     "README.md",
     "LICENSE",
-    "package.json"
+    "package.json",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -74,10 +75,10 @@
     "saxes": "6.0.0",
     "yauzl": "3.4.0",
     "yazl": "3.3.1",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.64",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.24",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.27",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.26"
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.30",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.27",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.29"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",
@@ -94,7 +95,7 @@
     "tsdown": "0.23.0",
     "typescript": "7.0.2",
     "vitest": "5.0.0",
-    "@agimon-ai/vibe-lint-plugin-doom-extension": "0.0.1-alpha.61"
+    "@agimon-ai/vibe-lint-plugin-doom-extension": "0.0.1-alpha.64"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1"

package/src/web/components/AuthorDocumentPanel.tsx

@@ -53,7 +53,7 @@ export function AuthorDocumentPanel(props: AuthorDocumentPanelProps) {
       return <fallback.panel {...props} />;
     }
     return (
-      <p data-testid="author-mode-inactive" className="p-3 text-xs text-doom-dim">
+      <p data-testid="author-mode-inactive" className="p-3 text-sm text-doom-dim">
         No file viewer is available for this path.
       </p>
     );
@@ -114,7 +114,7 @@ function ActiveAuthorDocumentPanel({ path, sessionId, statuses }: AuthorDocument
     };
   }, [kind, path, sessionId]);
   if (document === undefined || sessionId === null) {
-    return <p className="p-4 text-[11px] text-doom-faint">{status ?? 'Loading document...'}</p>;
+    return <p className="p-4 text-sm text-doom-faint">{status ?? 'Loading document...'}</p>;
   }
 
   const save = async (): Promise<void> => {
@@ -145,7 +145,7 @@ function ActiveAuthorDocumentPanel({ path, sessionId, statuses }: AuthorDocument
   return (
     <section data-testid="author-document" className="flex min-h-0 flex-1 flex-col">
       <header className="flex items-center gap-2 border-b border-doom-border px-4 py-2">
-        <strong className="min-w-0 flex-1 truncate text-sm text-doom-hi">{document.title ?? document.path}</strong>
+        <strong className="min-w-0 flex-1 truncate text-base text-doom-hi">{document.title ?? document.path}</strong>
         {document.kind === 'markdown' ? (
           <Button
             size="xs"
@@ -157,10 +157,10 @@ function ActiveAuthorDocumentPanel({ path, sessionId, statuses }: AuthorDocument
           </Button>
         ) : null}
         {document.kind === 'video' ? (
-          <span className="text-sm text-doom-dim">Video feedback</span>
+          <span className="text-base text-doom-dim">Video feedback</span>
         ) : (
           <Button
-            className="min-h-11 px-4 text-sm"
+            className="min-h-11 px-4 text-base"
             variant="outline"
             data-testid="author-save"
             disabled={document.revisions.length === 0 || document.savingVersion !== undefined}
@@ -170,7 +170,7 @@ function ActiveAuthorDocumentPanel({ path, sessionId, statuses }: AuthorDocument
           </Button>
         )}
       </header>
-      {status === undefined ? null : <output className="px-4 py-1 text-[10px] text-doom-faint">{status}</output>}
+      {status === undefined ? null : <output className="px-4 py-1 text-xs text-doom-faint">{status}</output>}
       <div className="relative flex min-h-0 flex-1 overflow-hidden">
         {document.kind === 'text' || document.kind === 'markdown' ? (
           textPanel

package/src/web/components/AuthorGridOverlay.tsx

@@ -69,7 +69,7 @@ export function AuthorGridOverlay({
         const row = Math.floor(index / AUTHOR_GRID_SIZE);
         return (
           <div key={index} className="relative border border-doom-red/25">
-            <span className="absolute left-1 top-0.5 rounded bg-doom-deep/80 px-1 text-[8px] font-bold text-doom-red">
+            <span className="absolute left-1 top-0.5 rounded bg-doom-deep/80 px-1 text-2xs font-bold text-doom-red">
               {AUTHOR_GRID_COLUMNS[column]}
               {row + 1}
             </span>

package/src/web/components/AuthorMediaView.tsx

@@ -279,7 +279,7 @@ export function AuthorMediaView({
                   height: `${String(rect.height * 100)}%`,
                 }}
               >
-                <span className="absolute -left-2 -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-[9px] font-bold text-doom-deep">
+                <span className="absolute -left-2 -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-bold text-doom-deep">
                   {ordinal}
                 </span>
               </div>,
@@ -350,7 +350,7 @@ export function AuthorMediaView({
           }}
         />
       ) : null}
-      {error ? <output className="text-sm text-doom-red">{error}</output> : null}
+      {error ? <output className="text-base text-doom-red">{error}</output> : null}
     </div>
   );
 }

package/src/web/components/AuthorPanel.tsx

@@ -34,12 +34,12 @@ export function AuthorPanel({ sessionId, activeMinorModes, submitCapture, status
     <section data-testid="author-panel" className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-3">
       {sessionId !== null && workspace !== undefined && focused !== undefined ? (
         <>
-          <h2 className="text-sm font-semibold text-doom-text">Annotations</h2>
-          <p className="text-sm leading-normal text-doom-dim sm:text-xs">
+          <h2 className="text-base font-semibold text-doom-text">Annotations</h2>
+          <p className="text-base leading-normal text-doom-dim sm:text-sm">
             Select a region, add a comment, then submit here. Requests queue while the agent is working.
           </p>
           {focused.kind === 'video' ? (
-            <p className="text-sm text-doom-dim sm:text-xs">
+            <p className="text-base text-doom-dim sm:text-sm">
               Annotations reference video frames. They do not save changes to the source video.
             </p>
           ) : null}
@@ -47,7 +47,7 @@ export function AuthorPanel({ sessionId, activeMinorModes, submitCapture, status
           {autonomousVoiceGridVisible(statuses) && grid !== undefined ? (
             <div
               data-testid="author-grid-snapshot"
-              className="rounded border border-doom-red/40 bg-doom-red/5 p-2 text-sm text-doom-dim"
+              className="rounded border border-doom-red/40 bg-doom-red/5 p-2 text-base text-doom-dim"
             >
               <strong className="text-doom-red">VOICE GRID A1–H8</strong>
               <p className="mt-1 truncate">token {grid.geometryToken}</p>
@@ -57,7 +57,7 @@ export function AuthorPanel({ sessionId, activeMinorModes, submitCapture, status
           {workspace.regions.length > 0 ? (
             <div className="space-y-1.5 border-b border-doom-border-soft pb-3">
               <Button
-                className="min-h-11 min-w-11 w-full text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
+                className="min-h-11 min-w-11 w-full text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
                 variant="outline"
                 data-testid="author-attach-capture"
                 disabled={capturing || workspace.candidate !== undefined || submitCapture === undefined}
@@ -87,16 +87,16 @@ export function AuthorPanel({ sessionId, activeMinorModes, submitCapture, status
                   : `Submit ${workspace.regions.length} annotation${workspace.regions.length === 1 ? '' : 's'}`}
               </Button>
               {workspace.candidate ? (
-                <p className="text-sm text-doom-dim sm:text-xs">
+                <p className="text-base text-doom-dim sm:text-sm">
                   Add or discard the current selection before submitting.
                 </p>
               ) : null}
             </div>
           ) : null}
           {submitCapture === undefined ? (
-            <output className="text-xs text-doom-red">Submission unavailable. Reload to update the app.</output>
+            <output className="text-sm text-doom-red">Submission unavailable. Reload to update the app.</output>
           ) : null}
-          {captureStatus ? <output className="block text-xs text-doom-dim">{captureStatus}</output> : null}
+          {captureStatus ? <output className="block text-sm text-doom-dim">{captureStatus}</output> : null}
         </>
       ) : null}
       <AuthorRequestLog requests={workspace?.requests ?? []} />

package/src/web/components/AuthorRegionDrafts.tsx

@@ -25,10 +25,10 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
     <section className="space-y-2" data-testid="author-region-drafts">
       {workspace.candidate ? (
         <>
-          <h3 className="text-sm font-semibold text-doom-text">Current selection</h3>
-          <p className="text-sm text-doom-dim sm:text-xs">Add a comment to keep this selection as an unsent draft.</p>
+          <h3 className="text-base font-semibold text-doom-text">Current selection</h3>
+          <p className="text-base text-doom-dim sm:text-sm">Add a comment to keep this selection as an unsent draft.</p>
           {workspace.candidate.anchor.kind === 'video-time-rect' ? (
-            <p className="text-sm text-doom-dim sm:text-xs">
+            <p className="text-base text-doom-dim sm:text-sm">
               Frame at {workspace.candidate.anchor.timeSeconds.toFixed(3)}s
             </p>
           ) : null}
@@ -38,10 +38,10 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
             onChange={(event) => setComment(event.target.value)}
             placeholder="What should change here?"
             rows={3}
-            className="min-h-11 w-full resize-y rounded border border-doom-border bg-doom-deep p-2 text-base leading-normal text-doom-text focus:border-doom-red focus:outline-none sm:text-xs"
+            className="min-h-11 w-full resize-y rounded border border-doom-border bg-doom-deep p-2 text-lg leading-normal text-doom-text focus:border-doom-red focus:outline-none sm:text-sm"
           />
           <Button
-            className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
+            className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
             variant="outline"
             onClick={add}
             disabled={!workspace.candidate || !comment.trim() || workspace.regions.length >= 16}
@@ -50,7 +50,7 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
           </Button>
           <Button
             variant="ghost"
-            className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
+            className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
             onClick={() => {
               setAuthorRegionCandidate(sessionId, undefined);
               setComment('');
@@ -61,15 +61,15 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
           </Button>
         </>
       ) : null}
-      {error ? <output className="block text-sm text-doom-red">{error}</output> : null}
+      {error ? <output className="block text-base text-doom-red">{error}</output> : null}
       {workspace.regions.length > 0 ? (
-        <h3 className="text-sm font-semibold text-doom-text">Unsent drafts ({workspace.regions.length})</h3>
+        <h3 className="text-base font-semibold text-doom-text">Unsent drafts ({workspace.regions.length})</h3>
       ) : null}
       <ol className="space-y-2">
         {workspace.regions.map((region, index) => (
           <li
             key={region.id}
-            className="rounded border border-doom-border bg-doom-panel p-2 text-sm leading-normal text-doom-text sm:text-xs"
+            className="rounded border border-doom-border bg-doom-panel p-2 text-base leading-normal text-doom-text sm:text-sm"
           >
             <span>
               ({index + 1}) {region.comment}
@@ -77,7 +77,7 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
             {region.anchor.kind === 'video-time-rect' ? (
               <Button
                 variant="outline"
-                className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
+                className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
                 disabled={workspace.candidate !== undefined}
                 onClick={() => {
                   if (region.anchor.kind === 'video-time-rect') seekAuthorVideo(sessionId, region.anchor.timeSeconds);
@@ -87,7 +87,7 @@ export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string
               </Button>
             ) : null}
             <Button
-              className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
+              className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
               variant="ghost"
               aria-label={`Remove region ${index + 1}`}
               onClick={() => removeAuthorRegion(sessionId, region.id)}

package/src/web/components/AuthorRequestLog.tsx

@@ -72,8 +72,8 @@ function RequestRecord({ request, prominent = false }: { request: AuthorRequestR
   return (
     <article data-testid={prominent ? 'author-active-request' : undefined} className="space-y-3">
       <header className="border-b border-doom-border-soft pb-3">
-        <p className="text-[9px] font-bold tracking-[0.18em] text-doom-faint">DOCUMENT CONTEXT</p>
-        <p className="mt-2 flex items-center gap-2 truncate text-[13px] font-bold text-doom-hi">
+        <p className="text-2xs font-bold tracking-widest text-doom-faint">DOCUMENT CONTEXT</p>
+        <p className="mt-2 flex items-center gap-2 truncate text-base font-bold text-doom-hi">
           <span aria-hidden className="text-doom-magenta">
             ↗
           </span>
@@ -85,16 +85,16 @@ function RequestRecord({ request, prominent = false }: { request: AuthorRequestR
         <ol className="space-y-3">
           {request.regions.map((region, index) => (
             <li key={region.id} className="space-y-2">
-              <p className="font-mono text-[9px] font-bold uppercase tracking-[0.14em] text-doom-yellow">
+              <p className="font-mono text-2xs font-bold uppercase tracking-wider text-doom-yellow">
                 WHERE · {request.regions.length > 1 ? `${index + 1} · ` : ''}
                 {documentName(request.documentPath)} / {anchorLabel(region.anchor)} · rev {request.revision}
               </p>
               {region.quote ? (
-                <blockquote className="line-clamp-3 text-[11px] italic leading-relaxed text-doom-text">
+                <blockquote className="line-clamp-3 text-sm italic leading-relaxed text-doom-text">
                   “{region.quote}”
                 </blockquote>
               ) : null}
-              <p className="text-[10px] leading-relaxed text-doom-dim">{region.comment}</p>
+              <p className="text-xs leading-relaxed text-doom-dim">{region.comment}</p>
             </li>
           ))}
         </ol>
@@ -104,7 +104,7 @@ function RequestRecord({ request, prominent = false }: { request: AuthorRequestR
         data-testid={prominent ? 'author-operation-card' : undefined}
         className={`rounded border p-3 ${STATUS_STYLES[request.status]}`}
       >
-        <p className="font-mono text-[10px] font-bold tracking-[0.14em]">
+        <p className="font-mono text-xs font-bold tracking-wider">
           ●{' '}
           {request.status === 'CHANGING'
             ? 'WORKING'
@@ -114,12 +114,12 @@ function RequestRecord({ request, prominent = false }: { request: AuthorRequestR
                 ? 'ERROR'
                 : request.status}
         </p>
-        <p className="mt-2 text-[12px] leading-relaxed text-doom-hi">
+        <p className="mt-2 text-sm leading-relaxed text-doom-hi">
           {request.currentOperation || STATUS_LABELS[request.status]}
         </p>
-        {request.error ? <p className="mt-2 text-[10px] leading-relaxed text-doom-red">{request.error}</p> : null}
+        {request.error ? <p className="mt-2 text-xs leading-relaxed text-doom-red">{request.error}</p> : null}
         {request.before !== undefined || request.after !== undefined ? (
-          <details className="mt-2 border-t border-current/20 pt-2 text-[10px] text-doom-dim">
+          <details className="mt-2 border-t border-current/20 pt-2 text-xs text-doom-dim">
             <summary className="cursor-pointer select-none">change preview</summary>
             {request.before !== undefined ? (
               <pre className="mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono">
@@ -136,15 +136,15 @@ function RequestRecord({ request, prominent = false }: { request: AuthorRequestR
       </section>
 
       <section className="space-y-2">
-        <p className="text-[9px] font-bold tracking-[0.18em] text-doom-faint">REQUEST · HOW TO CHANGE</p>
+        <p className="text-2xs font-bold tracking-widest text-doom-faint">REQUEST · HOW TO CHANGE</p>
         <div className="rounded border border-doom-border bg-doom-deep p-3">
-          <p className="whitespace-pre-wrap text-[11px] leading-relaxed text-doom-text">
+          <p className="whitespace-pre-wrap text-sm leading-relaxed text-doom-text">
             {instruction || 'No additional instruction.'}
           </p>
         </div>
       </section>
 
-      <footer className="font-mono text-[9px] text-doom-dim">{progressLabel(request)}</footer>
+      <footer className="font-mono text-2xs text-doom-dim">{progressLabel(request)}</footer>
     </article>
   );
 }
@@ -154,15 +154,15 @@ export function AuthorRequestLog({ requests }: { requests: readonly AuthorReques
   const earlier = requests.slice(0, -1).toReversed();
   return (
     <section data-testid="author-request-history" className="space-y-3">
-      <h3 className="text-[9px] font-bold tracking-[0.18em] text-doom-faint">AUTHORING</h3>
+      <h3 className="text-2xs font-bold tracking-widest text-doom-faint">AUTHORING</h3>
       {latest === undefined ? (
-        <p className="text-[11px] leading-relaxed text-doom-dim">No requests or changes yet.</p>
+        <p className="text-sm leading-relaxed text-doom-dim">No requests or changes yet.</p>
       ) : (
         <RequestRecord request={latest} prominent />
       )}
       {earlier.length > 0 ? (
         <details className="border-t border-doom-border-soft pt-3" data-testid="author-earlier-requests">
-          <summary className="cursor-pointer select-none text-[9px] font-bold tracking-[0.14em] text-doom-faint">
+          <summary className="cursor-pointer select-none text-2xs font-bold tracking-wider text-doom-faint">
             EARLIER REQUESTS ({earlier.length})
           </summary>
           <ol className="mt-3 space-y-5">

package/src/web/components/AuthorStructuredView.tsx

@@ -65,10 +65,10 @@ export function AuthorStructuredView({
   }
   return (
     <div data-testid="author-structured" className="min-h-0 flex-1 space-y-3 overflow-auto p-4">
-      {!cells ? <p className="text-[10px] text-doom-faint">Slide text view, not a layout-faithful rendering.</p> : null}
+      {!cells ? <p className="text-xs text-doom-faint">Slide text view, not a layout-faithful rendering.</p> : null}
       {[...groups].map(([location, fragments]) => (
         <section key={location} className="space-y-1">
-          <h3 className="text-[10px] text-doom-faint">{location}</h3>
+          <h3 className="text-xs text-doom-faint">{location}</h3>
           <div className={cells ? 'flex gap-1' : 'space-y-2'}>
             {fragments.map((fragment) => (
               <div
@@ -78,7 +78,7 @@ export function AuthorStructuredView({
                 className={`${cells ? 'w-40 shrink-0' : ''} relative rounded ${displayedByFragment.has(fragment.id) ? 'ring-1 ring-doom-yellow' : ''}`}
               >
                 {displayedByFragment.has(fragment.id) ? (
-                  <span className="absolute -left-1 -top-1 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-[9px] font-bold text-doom-deep">
+                  <span className="absolute -left-1 -top-1 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-bold text-doom-deep">
                     {displayedByFragment.get(fragment.id)}
                   </span>
                 ) : null}
@@ -108,7 +108,7 @@ export function AuthorStructuredView({
                   aria-label={fragment.location}
                   value={fragment.text}
                   readOnly={fragment.readOnly === true}
-                  className="w-full rounded border border-doom-border bg-doom-deep p-2 text-[11px] text-doom-text"
+                  className="w-full rounded border border-doom-border bg-doom-deep p-2 text-sm text-doom-text"
                   onChange={(event) => reviseAuthorFragment(sessionId, document.path, fragment.id, event.target.value)}
                 />
               </div>

package/src/web/components/AuthorTextView.tsx

@@ -59,7 +59,7 @@ export function AuthorTextView({
   return (
     <div ref={host} className="flex min-h-0 flex-1 flex-col">
       {preview ? (
-        <div data-testid="author-markdown" className="min-h-0 flex-1 overflow-auto p-4 text-[12px] text-doom-text">
+        <div data-testid="author-markdown" className="min-h-0 flex-1 overflow-auto p-4 text-sm text-doom-text">
           <Markdown text={document.content ?? ''} />
         </div>
       ) : (

package/src/web/components/AuthorToolPalette.tsx

@@ -72,7 +72,7 @@ export function AuthorToolPalette({
   ];
   return (
     <section data-testid="author-tool-palette" className="space-y-2 border-b border-doom-border-soft pb-3">
-      <div className="flex justify-between text-xs text-doom-dim">
+      <div className="flex justify-between text-sm text-doom-dim">
         <h3 className="font-bold tracking-widest">TOOLS</h3>
         <span>focused tab</span>
       </div>
@@ -85,19 +85,19 @@ export function AuthorToolPalette({
             aria-label={tool.label === 'Region' ? 'mark region' : tool.label}
             aria-pressed={tool.active}
             onClick={tool.action}
-            className={`min-h-11 min-w-11 gap-1.5 rounded border text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs ${tool.active ? 'border-doom-red bg-doom-red/10 text-doom-red hover:bg-doom-red/15' : 'border-doom-border bg-doom-panel text-doom-dim'}`}
+            className={`min-h-11 min-w-11 gap-1.5 rounded border text-base [@media(pointer:fine)]:min-h-8 sm:text-sm ${tool.active ? 'border-doom-red bg-doom-red/10 text-doom-red hover:bg-doom-red/15' : 'border-doom-border bg-doom-panel text-doom-dim'}`}
           >
             <span aria-hidden="true">{tool.glyph}</span>
             {tool.label}
           </Button>
         ))}
       </div>
-      <p className="text-sm leading-normal text-doom-dim sm:text-xs">
+      <p className="text-base leading-normal text-doom-dim sm:text-sm">
         {activeTool === 'mark'
           ? 'Drag over the document to mark a region.'
           : 'Choose Region to mark an area for a comment.'}
       </p>
-      {error ? <output className="block text-sm text-doom-red">{error}</output> : null}
+      {error ? <output className="block text-base text-doom-red">{error}</output> : null}
     </section>
   );
 }

package/src/web/components/AuthorVideoControls.tsx

@@ -27,14 +27,14 @@ export function AuthorVideoControls({
   const duration = playback.duration;
   const invalid =
     seconds.trim() === '' || !Number.isFinite(Number(seconds)) || Number(seconds) < 0 || Number(seconds) > duration;
-  const buttonClass = 'min-h-11 px-3 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs';
+  const buttonClass = 'min-h-11 px-3 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm';
   return (
     <section
       aria-label="Video annotation controls"
-      className="mt-2 space-y-2 rounded border border-doom-border bg-doom-panel p-2.5 text-sm text-doom-text sm:text-xs"
+      className="mt-2 space-y-2 rounded border border-doom-border bg-doom-panel p-2.5 text-base text-doom-text sm:text-sm"
     >
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <output aria-label="Playback position" className="font-mono text-sm tabular-nums">
+        <output aria-label="Playback position" className="font-mono text-base tabular-nums">
           {videoTimeLabel(playback.currentTime)} / {videoTimeLabel(duration)}
         </output>
         <span className="text-doom-dim">
@@ -99,7 +99,7 @@ export function AuthorVideoControls({
             onChange={(event) => setSeconds(event.target.value)}
             disabled={locked || duration <= 0}
             placeholder="1.250"
-            className="h-11 w-24 rounded border border-doom-border bg-doom-deep px-2 text-base [@media(pointer:fine)]:h-8 sm:text-xs"
+            className="h-11 w-24 rounded border border-doom-border bg-doom-deep px-2 text-lg [@media(pointer:fine)]:h-8 sm:text-sm"
           />
           <Button type="submit" className={buttonClass} disabled={locked || duration <= 0 || invalid}>
             Go