@cat-factory/app 0.308.0 → 0.310.0

package/app/components/common/SectionLabel.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// The one section "eyebrow": the small uppercase label that titles a group inside a panel, a
+// result window, an inspector section or a dropdown (issue #2248).
+//
+// The recipe:
+//
+//   text-2xs  font-semibold  uppercase  tracking-wide  text-muted
+//
+// Those five are the whole component and are NOT overridable. A caller that wants a different
+// size or colour wants a different thing, not a variant of this one.
+//
+// The colour is `text-muted`, not `text-dimmed`, for contrast: at this size `text-dimmed` is 2.63:1
+// on a light surface, under WCAG AA's 4.5:1 and under the 3:1 large-text floor. `text-muted` is
+// 4.76:1. Do not "correct" it to the fainter token.
+//
+// A label that merely SHARES the uppercase styling is not this component: a pill or chip carrying
+// a fill and a radius, an accent-coloured label signalling state or category, or a metadata row
+// (`board/nodes/BlockNode.vue`'s composition line) that states counts rather than titling the
+// block after it. Nor is a caption INSIDE a control: a switcher trigger's "Language" line above its
+// value, a slider's end labels. A caption names part of the control and titles nothing after it.
+// Those keep their own classes on a named step.
+//
+// What a caller DOES control:
+//   - `as`, the element. The default `div` suits a label that titles a region without being a
+//     document heading; pass `h3` / `h4` when the section is a real heading, `label` with an `:id`
+//     when it names a field. A collapsing section is a `UButton` around `as="span"`: the button
+//     owns the focus ring and the disabled state, which a raw `as="button"` would not have.
+//   - Layout, through the ordinary `class` attribute (`mb-2`, `px-2 pt-2`), which Vue merges onto
+//     the root. Spacing is the caller's business because it belongs to the surrounding block.
+//   - Every other attribute and listener, which fall through to the root element.
+withDefaults(defineProps<{ as?: string }>(), { as: 'div' })
+</script>
+
+<template>
+  <component :is="as" class="text-2xs font-semibold uppercase tracking-wide text-muted">
+    <slot />
+  </component>
+</template>

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -12,6 +12,7 @@ import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import { agentKindMeta } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, n } = useI18n()
 
@@ -165,12 +166,12 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
         <!-- synthesized result -->
         <section v-if="session.synthesis" class="mb-6">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('consensus.synthesizedResult') }}
-            </h3>
+            </SectionLabel>
             <span
               v-if="session.confidence != null"
-              class="rounded bg-app-success-500/15 px-1.5 py-0.5 text-xs text-app-success-300"
+              class="rounded-sm bg-app-success-500/15 px-1.5 py-0.5 text-xs text-app-success-300"
               >{{ t('consensus.confidence', { pct: pct(session.confidence) }) }}</span
             >
             <CopyButton :text="session.synthesis" class="ms-auto -my-1" />
@@ -193,9 +194,9 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- participants -->
         <section class="mb-6">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('consensus.panel') }}
-          </h3>
+          </SectionLabel>
           <div class="flex flex-wrap gap-2">
             <div
               v-for="(p, i) in session.participants"
@@ -215,10 +216,10 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- rounds -->
         <section v-for="round in session.rounds" :key="round.index" class="mb-5">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('consensus.round.heading', { n: round.index + 1 }) }} ·
             {{ roundLabel(round.kind) }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-3">
             <div
               v-for="c in round.contributions"
@@ -232,7 +233,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                 <span class="text-xs text-dimmed">{{ roleFor(c.participantId) }}</span>
                 <span
                   v-if="topScore(c)"
-                  class="ms-auto rounded bg-elevated px-1.5 py-0.5 text-xs text-toned"
+                  class="ms-auto rounded-sm bg-elevated px-1.5 py-0.5 text-xs text-toned"
                   >{{
                     t('consensus.topScore', {
                       label: topScore(c)!.label,
@@ -247,7 +248,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                 <span
                   v-for="s in c.scores"
                   :key="s.dimension"
-                  class="rounded bg-elevated/80 px-1.5 py-0.5 text-xs text-muted"
+                  class="rounded-sm bg-elevated/80 px-1.5 py-0.5 text-xs text-muted"
                   >{{ s.dimension }}: {{ pct(s.value) }}</span
                 >
               </div>

package/app/components/context/ContextAttachmentFields.vue

@@ -21,6 +21,8 @@ import { claimCandidates, firstLinkCandidate } from '~/components/context/pasted
 import { connectableSources } from '~/utils/sourcePicker'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{
   /** The staged attachments; the host owns the array and commits it after creating the block. */
@@ -188,9 +190,9 @@ function removePending(item: PendingContext) {
     <!-- Context documents (ungated; Attach disabled until a source is connected). -->
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('contextAttachments.documents') }}
-        </span>
+        </SectionLabel>
         <UButton
           v-if="docsConnected"
           color="neutral"
@@ -288,24 +290,29 @@ function removePending(item: PendingContext) {
             >
               {{ t('contextAttachments.importsOnAdd') }}
             </UBadge>
-            <button
-              type="button"
-              class="ms-auto shrink-0 text-muted hover:text-default"
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              class="ms-auto shrink-0"
+              :label="t('contextAttachments.removePending', { name: item.title })"
+              :ui="{
+                base: 'p-0 text-muted hover:bg-transparent hover:text-default',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removePending(item)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
+            class="px-2 pb-1.5 text-2xs text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ docsHint }}
       </p>
     </div>
@@ -313,9 +320,9 @@ function removePending(item: PendingContext) {
     <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="span">
           {{ t('contextAttachments.issues') }}
-        </span>
+        </SectionLabel>
         <UButton
           v-if="issuesConnected"
           color="neutral"
@@ -396,27 +403,32 @@ function removePending(item: PendingContext) {
             >
               {{ t('contextAttachments.importsOnAdd') }}
             </UBadge>
-            <button
-              type="button"
-              class="ms-auto shrink-0 text-muted hover:text-default"
+            <IconButton
+              color="neutral"
+              variant="ghost"
+              icon="i-lucide-x"
+              class="ms-auto shrink-0"
+              :label="t('contextAttachments.removePending', { name: item.title })"
+              :ui="{
+                base: 'p-0 text-muted hover:bg-transparent hover:text-default',
+                leadingIcon: 'h-3.5 w-3.5',
+              }"
               @click="removePending(item)"
-            >
-              <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-            </button>
+            />
           </div>
           <!-- An issue reference gets no pre-flight of its own (there is no `parseRef` to ask a
                tracker), so this line IS its warning: the fetch is attempted when the form opens and
                again on submit, and a failure now blocks the create. -->
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
+            class="px-2 pb-1.5 text-2xs text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ issuesHint }}
       </p>
     </div>

package/app/components/docs/DocInterviewWindow.vue

@@ -24,6 +24,7 @@ import {
   interviewGatePhase,
   interviewStepReached,
 } from '~/utils/interviewGate'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const docInterview = useDocInterviewStore()
@@ -131,7 +132,7 @@ const onProceed = () =>
       </div>
 
       <template v-else>
-        <p class="mb-4 text-[13px] leading-relaxed text-toned">
+        <p class="mb-4 text-sm leading-relaxed text-toned">
           {{ t('docInterview.intro') }}
         </p>
 
@@ -171,20 +172,20 @@ const onProceed = () =>
           class="rounded-lg border border-default bg-app-950/40 p-4"
           data-testid="doc-interview-converged"
         >
-          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-dimmed">
+          <SectionLabel as="p" class="mb-2">
             {{ t('docInterview.brief') }}
-          </p>
+          </SectionLabel>
           <pre
             v-if="session.brief"
-            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-toned"
+            class="whitespace-pre-wrap break-words text-sm leading-relaxed text-toned"
             >{{ session.brief }}</pre>
-          <p v-else class="text-[13px] text-muted">{{ t('docInterview.converged') }}</p>
+          <p v-else class="text-sm text-muted">{{ t('docInterview.converged') }}</p>
         </div>
 
         <!-- No pending questions but not yet converged -->
         <div
           v-else-if="questions.length === 0"
-          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
         >
           {{ t('docInterview.converged') }}
         </div>
@@ -197,7 +198,7 @@ const onProceed = () =>
             class="rounded-lg border border-default bg-app-950/40 p-3"
             data-testid="doc-interview-question"
           >
-            <p class="mb-2 text-[13px] font-medium text-default">{{ q.question }}</p>
+            <p class="mb-2 text-sm font-medium text-default">{{ q.question }}</p>
             <UTextarea
               v-model="drafts[q.key]"
               :rows="2"
@@ -212,7 +213,7 @@ const onProceed = () =>
                  for an answer to go. Saying so beats taking text the flush could only drop. -->
             <p
               v-if="!addressable(q)"
-              class="mt-1 text-[11px] text-app-warning-300"
+              class="mt-1 text-2xs text-app-warning-300"
               data-testid="doc-interview-unanswerable"
             >
               {{ t('docInterview.unanswerable') }}
@@ -228,7 +229,7 @@ const onProceed = () =>
       v-if="session && phase === 'awaiting' && questions.length > 0"
       class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         <span
           v-if="unanswered > 0"
           class="text-app-warning-400/90"

package/app/components/documents/ContextDocumentPicker.vue

@@ -49,6 +49,7 @@ import {
   reconcileSource,
   sourceMenuItems,
 } from '~/utils/sourcePicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Repo-backed document sources pick a FILE out of a repository (repo search → file
 // search / tree browse) instead of the generic free-text catalogue search. Today only
@@ -420,12 +421,9 @@ onMounted(() => {
          here (each opens the connect modal over the caller's form). Rendered as plain text when
          there is nothing to decide, which for a member is the usual case. -->
     <div class="flex items-center gap-1.5">
-      <span
-        :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-      >
+      <SectionLabel as="span" :id="sourceLabelId" class="shrink-0">
         {{ t('documents.picker.sourceLabel') }}
-      </span>
+      </SectionLabel>
       <UDropdownMenu
         v-if="sourcePickable"
         :items="sourceMenu"
@@ -490,7 +488,7 @@ onMounted(() => {
         @keydown.enter="refRow && pickRef(refRow)"
       />
 
-      <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
+      <p v-if="searchError" class="px-1 text-2xs text-app-warning-400">
         {{ t('documents.picker.searchFailed', { error: searchError }) }}
       </p>
 
@@ -498,14 +496,14 @@ onMounted(() => {
            the user can still edit, rather than as a toast after the task is created. -->
       <p
         v-if="refState.status === 'checking'"
-        class="px-1 text-[11px] text-dimmed"
+        class="px-1 text-2xs text-dimmed"
         data-testid="doc-ref-checking"
       >
         {{ t('documents.picker.refChecking') }}
       </p>
       <div
         v-else-if="refRejection"
-        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-app-warning-400"
+        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-2xs text-app-warning-400"
         data-testid="doc-ref-rejected"
       >
         <span>{{ refRejection }}</span>
@@ -523,7 +521,7 @@ onMounted(() => {
       </div>
       <p
         v-else-if="refState.status === 'unchecked'"
-        class="px-1 text-[11px] text-app-warning-400"
+        class="px-1 text-2xs text-app-warning-400"
         data-testid="doc-ref-unchecked"
       >
         {{ t('documents.picker.refCheckFailed', { error: refState.message }) }}
@@ -532,7 +530,7 @@ onMounted(() => {
            at all reads as a picker that dropped it. -->
       <p
         v-else-if="refAlreadyAttached"
-        class="px-1 text-[11px] text-dimmed"
+        class="px-1 text-2xs text-dimmed"
         data-testid="doc-ref-already-attached"
       >
         {{ t('documents.picker.refAlreadyAttached') }}
@@ -540,10 +538,11 @@ onMounted(() => {
 
       <div class="max-h-56 space-y-0.5 overflow-y-auto">
         <!-- Already-imported documents (linked directly, no re-fetch). -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="d in importedRows"
           :key="`imp:${d.externalId}`"
-          type="button"
           class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickImported(d.externalId, d.title, d.excerpt)"
         >
@@ -552,26 +551,28 @@ onMounted(() => {
           <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
             t('documents.picker.importedBadge')
           }}</UBadge>
-        </button>
+        </UButton>
 
         <!-- Source search hits (imported on add). -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-for="r in searchRows"
           :key="`hit:${r.externalId}`"
-          type="button"
           class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickSearch(r)"
         >
           <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="truncate">{{ r.title }}</span>
-        </button>
+        </UButton>
 
         <!-- Explicit URL/ID reference, RESOLVED: the row shows the canonical form the source
              settled on, so a share link's title segment and tracking params are visibly gone
              before the attachment is staged. -->
-        <button
+        <UButton
+          color="neutral"
+          variant="ghost"
           v-if="refRow"
-          type="button"
           class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           data-testid="doc-ref-attach"
           @click="pickRef(refRow)"
@@ -585,7 +586,7 @@ onMounted(() => {
                 </template>
               </i18n-t>
             </span>
-            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-dimmed">
+            <span v-if="refRow.trimmed" class="block truncate text-2xs text-dimmed">
               {{ t('documents.picker.refTrimmed') }}
             </span>
             <!-- A WIDENED reference, which the trim note above must never be left to imply: the
@@ -593,7 +594,7 @@ onMounted(() => {
                  around it. Amber and separate, because it is a loss rather than tidying. -->
             <span
               v-if="refRow.droppedScope"
-              class="block text-[11px] text-app-warning-400"
+              class="block text-2xs text-app-warning-400"
               data-testid="doc-ref-widened"
             >
               {{ t('documents.picker.refWidened', { scope: refRow.droppedScope }) }}
@@ -608,7 +609,7 @@ onMounted(() => {
           >
             {{ t('documents.picker.importedBadge') }}
           </UBadge>
-        </button>
+        </UButton>
 
         <EmptyState
           v-if="empty"

package/app/components/documents/DocumentImportModal.vue

@@ -2,6 +2,7 @@
 import type { DocumentSourceKind } from '~/types/domain'
 import DocumentSyncState from '~/components/documents/DocumentSyncState.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Import pages from a connected document source and pick one to expand into
 // board structure. A source selector lets the user choose which connected source
@@ -125,9 +126,9 @@ function preview(externalId: string) {
         </div>
 
         <div v-if="sourceDocs.length" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3">
             {{ t('documents.import.importedHeading') }}
-          </h3>
+          </SectionLabel>
           <div
             v-for="doc in sourceDocs"
             :key="`${doc.source}:${doc.externalId}`"
@@ -135,14 +136,15 @@ function preview(externalId: string) {
           >
             <div class="flex items-start justify-between gap-2">
               <div class="min-w-0">
-                <a
-                  :href="doc.url"
+                <ULink
+                  raw
+                  :to="doc.url"
                   target="_blank"
                   rel="noopener"
                   class="truncate text-sm font-medium text-highlighted hover:underline"
                 >
                   {{ doc.title }}
-                </a>
+                </ULink>
                 <p class="mt-0.5 line-clamp-2 text-xs text-dimmed">{{ doc.excerpt }}</p>
                 <DocumentSyncState :doc="doc" class="mt-1" />
               </div>

package/app/components/documents/DocumentOriginLink.vue

@@ -16,15 +16,18 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <component
-    :is="props.url ? 'a' : 'span'"
-    :class="props.url ? props.hoverClass : undefined"
-    v-bind="
-      props.url
-        ? { href: props.url, title: props.url, target: '_blank', rel: 'noopener' }
-        : { title: t('documents.taskDocs.uploadedHint') }
-    "
+  <ULink
+    v-if="props.url"
+    raw
+    :to="props.url"
+    target="_blank"
+    rel="noopener"
+    :title="props.url"
+    :class="props.hoverClass"
   >
     <slot />
-  </component>
+  </ULink>
+  <span v-else :title="t('documents.taskDocs.uploadedHint')">
+    <slot />
+  </span>
 </template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -132,10 +132,10 @@ async function disconnect() {
           >
             {{ t('documents.connect.oauth.action', { source: descriptor.label }) }}
           </UButton>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('documents.connect.oauth.scopes', { scopes: oauth.scopes.join(', ') }) }}
           </p>
-          <p class="text-[11px] text-dimmed">{{ t('documents.connect.oauth.fallback') }}</p>
+          <p class="text-2xs text-dimmed">{{ t('documents.connect.oauth.fallback') }}</p>
         </div>
 
         <div class="space-y-3">

package/app/components/documents/DocumentSyncState.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { isConnectableSource } from '@cat-factory/contracts'
+import IconButton from '~/components/common/IconButton.vue'
 import type { SourceDocument } from '~/types/domain'
 import {
   CHANGE_KEYS,
@@ -165,7 +166,7 @@ async function refresh() {
 </script>
 
 <template>
-  <div class="flex items-center gap-1.5 text-[11px] text-dimmed">
+  <div class="flex items-center gap-1.5 text-2xs text-dimmed">
     <span class="truncate">
       {{ t('documents.freshness.updated', { when: d(new Date(props.doc.syncedAt), 'long') }) }}
     </span>
@@ -182,15 +183,14 @@ async function refresh() {
       <UIcon name="i-lucide-image-off" class="h-3 w-3 shrink-0" />
       <span class="truncate">{{ renders }}</span>
     </span>
-    <UButton
+    <IconButton
       v-if="askable"
       color="neutral"
       variant="ghost"
       size="xs"
       icon="i-lucide-refresh-cw"
       :loading="busy"
-      :aria-label="t('documents.freshness.refresh')"
-      :title="t('documents.freshness.refresh')"
+      :label="t('documents.freshness.refresh')"
       class="ml-auto shrink-0"
       @click="refresh"
     />

package/app/components/documents/DocumentTemplatesModal.vue

@@ -3,6 +3,7 @@ import { DOC_KINDS } from '~/types/domain'
 import type { DocKind, DocumentLinkRole, SourceDocument } from '~/types/domain'
 import DocumentOriginLink from '~/components/documents/DocumentOriginLink.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Manage the workspace's per-DocKind TEMPLATE (singular) + EXEMPLAR (multi) document links (WS1).
 // A kind can be pointed at one of the workspace's already-imported documents so its parsed
@@ -132,9 +133,9 @@ async function unlink(doc: SourceDocument) {
 
           <!-- Template (singular per kind) ------------------------------------ -->
           <section class="rounded-lg border border-default bg-default/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('documents.templates.templateHeading') }}
-            </h3>
+            </SectionLabel>
             <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.templateHint', { kind }) }}
             </p>
@@ -167,9 +168,9 @@ async function unlink(doc: SourceDocument) {
 
           <!-- Exemplars (multi per kind) -------------------------------------- -->
           <section class="rounded-lg border border-default bg-default/50 p-3">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="h3">
               {{ t('documents.templates.exemplarsHeading') }}
-            </h3>
+            </SectionLabel>
             <p class="mt-0.5 text-xs text-dimmed">
               {{ t('documents.templates.exemplarsHint') }}
             </p>

package/app/components/documents/RepoContextDocPicker.vue

@@ -238,21 +238,22 @@ onMounted(() => {
           class="w-full"
           :placeholder="t('documents.repoPicker.searchFilesPlaceholder')"
         />
-        <p v-if="filesError" class="px-1 text-[11px] text-app-warning-400">
+        <p v-if="filesError" class="px-1 text-2xs text-app-warning-400">
           {{ t('documents.repoPicker.filesFailed', { error: filesError }) }}
         </p>
         <div class="max-h-56 space-y-0.5 overflow-y-auto">
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-for="f in fileMatches"
             :key="f.path"
-            type="button"
             class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
             @click="pickFile(f.path)"
           >
             <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
             <span class="truncate">{{ f.path }}</span>
-          </button>
-          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-[11px] text-dimmed">
+          </UButton>
+          <p v-if="fileMatchesTruncated" class="px-2 py-1 text-2xs text-dimmed">
             {{ t('documents.repoPicker.moreFiles', { count: FILE_RESULTS_CAP }) }}
           </p>
           <EmptyState
@@ -261,10 +262,7 @@ onMounted(() => {
             icon="i-lucide-file-search"
             :title="t('documents.repoPicker.noFileMatches')"
           />
-          <p
-            v-else-if="!loadingFiles && !fileQuery.trim()"
-            class="px-2 py-1 text-[11px] text-dimmed"
-          >
+          <p v-else-if="!loadingFiles && !fileQuery.trim()" class="px-2 py-1 text-2xs text-dimmed">
             {{ t('documents.repoPicker.searchFilesHint') }}
           </p>
         </div>

package/app/components/documents/StartFromDesignModal.vue

@@ -191,18 +191,18 @@ function stage() {
               <UIcon name="i-lucide-frame" class="h-4 w-4 text-primary" />
               <span class="truncate">{{ row.label }}</span>
             </div>
-            <p v-if="row.trimmed" class="text-[11px] text-muted">
+            <p v-if="row.trimmed" class="text-2xs text-muted">
               {{ t('documents.startFromDesign.trimmed') }}
             </p>
             <!-- Its own line, in amber: a trim resolves the same page, a drop widens ONE frame to
                  the whole design file, and the second is what a designer needs to see. -->
-            <p v-if="row.droppedScope" class="text-[11px] text-app-warning-300">
+            <p v-if="row.droppedScope" class="text-2xs text-app-warning-300">
               {{ t('documents.startFromDesign.widened', { scope: row.droppedScope }) }}
             </p>
-            <p v-if="row.unchecked && target" class="text-[11px] text-muted">
+            <p v-if="row.unchecked && target" class="text-2xs text-muted">
               {{ t('documents.startFromDesign.unchecked') }}
             </p>
-            <p v-else-if="row.unchecked" class="text-[11px] text-app-warning-300">
+            <p v-else-if="row.unchecked" class="text-2xs text-app-warning-300">
               {{ t('documents.startFromDesign.uncheckedAmbiguous') }}
             </p>
           </div>

package/app/components/documents/TaskContextDocs.vue

@@ -165,7 +165,7 @@ async function attach(item: PendingContext) {
         <DocumentSyncState :doc="doc" class="mt-1" />
       </div>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ emptyHint }}
     </p>
   </InspectorSection>