@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/data/UiRichText.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import type { RichSegment } from '../../../shared/rich-text'
+import { computed } from 'vue'
+import { NuxtLink, UiFavicon, UiIcon, UiTooltip } from '#components'
+/**
+ * UiRichText — renders a `RichSegment[]` inline sentence of typed tokens.
+ * Supersedes the retired `UiActionTitle` (deleted Phase 4, 2026-07-29, once
+ * its last consumers moved to `richSegments`) — same styling precedent,
+ * extended with `page`/`domain`/`delta`/`code` and optional tooltips/deep
+ * links. See `../../../shared/rich-text.ts`
+ * for the pinned contract; segments are never parsed from prose here, they
+ * arrive already typed from a why-template.
+ *
+ * Colour budget (DESIGN.md, near-monochrome): the only pieces that earn hue are
+ * `position`'s quality band (mirrors `UiPositionMetric`) and `delta` when its
+ * caller passes an explicit `good`. Everything else is weight, mono, and
+ * dimming — no chip fills. Every hue-bearing signal also gets a text/aria
+ * equivalent so it's never colour-only (WCAG 1.4.1).
+ *
+ * Brand-flavor pass (2026-07-28, Phase 2 Wave B3) — personality through
+ * typography, not decoration: `metric`/`position`/delta's `to` value ride
+ * `.numerals-display`(-heavy) so figures read as set, not typed; `keyword`
+ * quotes are curly + hair-spaced (U+200A) off the mono run so they read as
+ * intentional typography, not stray punctuation; `delta` pairs fade/lift 2px
+ * once on mount (`.rich-delta-reveal`, registered in the reduced-motion
+ * block); `domain` favicons sit in a 14px ring-tinted frame — the one place a
+ * primary tint is allowed, because it marks an external entity, not a status,
+ * and their gap is em-relative and narrower than the row's `gap-x-[0.25em]`
+ * inter-word space so the host stays grouped with its own favicon;
+ * `page` dims its leading directory so the differentiating last segment pops;
+ * `code` gets a whisper `bg-elevated` inset, distinct from `.code-inline`'s
+ * bolder chip.
+ */
+
+const { segments, size = 'sm', truncate = false, spacing = 'auto', inertLinks = false } = defineProps<{
+  segments: RichSegment[]
+  /**
+   * Render every linked token as plain text — no `NuxtLink`, no external `<a>`.
+   *
+   * Set by any host that is ITSELF inside an interactive element (a linked row,
+   * a `<button>` row). An `<a>` inside an `<a>` is not valid HTML: the parser
+   * closes the outer anchor before the inner one, so the server's byte stream
+   * and the client's vdom describe different trees and hydration mismatches on
+   * every such row. `<a>` inside `<button>` is invalid for the same reason
+   * (interactive content has no interactive descendants), and swallows the
+   * button's own activation.
+   *
+   * The affordance isn't lost, it moves: the row opens a detail surface that
+   * renders the SAME segments with their links live.
+   *
+   * An `external` `domain` segment is the one token that links without a `to`
+   * (a raw `<a href>`), so it is gated on this flag directly and falls through
+   * to the span form, which keeps the ring-framed favicon marking it external.
+   */
+  inertLinks?: boolean
+  /**
+   * Who owns the whitespace between segments.
+   *
+   * `auto` (default) — this component injects a space before each segment. Right
+   * for a TOKEN LIST, where segments are discrete things sitting side by side.
+   *
+   * `none` — the caller's text segments already carry their own spaces. Right for
+   * a SENTENCE, where a token can be followed by punctuation: with `auto`, a
+   * possessive renders `example.com 's traffic?` and a trailing token renders
+   * `3 months ?`. Pair it with `whitespace-pre-wrap` on the host so the caller's
+   * literal spaces survive.
+   */
+  spacing?: 'auto' | 'none'
+  /** Text-size + density knob. `sm` matches `UiActionTitle`'s ambient board-row
+   *  usage (inherits `text-sm` from the caller); `md`/`lg` size the sentence
+   *  directly for standalone headline contexts (e.g. the modal why-sentence);
+   *  `inherit` stamps no size at all — for hosts whose row scale isn't `sm`
+   *  (e.g. a `text-xs` feed row) where the tokens size off the ambient `em`. */
+  size?: 'sm' | 'md' | 'lg' | 'inherit'
+  /**
+   * Single-line row mode with PER-SEGMENT truncation. A one-line host that
+   * end-truncates the whole sentence lets a long leading token push the rest
+   * out entirely (a fault-first "404 Not Found — <path>" row on a narrow card
+   * showed no path at all) — here the sentence becomes an inline-flex row
+   * where only the long-tail segments (`page`/`keyword`/`code`) shrink with
+   * their own ellipsis, so every token stays represented. Those segments
+   * render tooltip-less in this mode (a tooltip wrapper span can't shrink);
+   * `page` keeps its full URL in `title`. Off for wrapping contexts (modal
+   * sentences) where multi-line flow is the point. `'sm'` wraps below the
+   * `sm` breakpoint and truncates from it up: a touch screen has no hover
+   * tooltip to recover a cut title.
+   */
+  truncate?: boolean | 'sm'
+}>()
+
+/** Long-tail tokens shrink with their own ellipsis wherever the row is single-line. */
+/** Linked tokens take the design focus ring instead of the browser outline. */
+const LINK_FOCUS = 'rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+
+const shrinkClass = computed(() => truncate === 'sm' ? 'sm:min-w-0 sm:shrink sm:truncate' : truncate ? 'min-w-0 shrink truncate' : '')
+
+const sizeClass = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  inherit: '',
+} as const
+
+// Position quality → semantic text colour + a screen-reader qualifier, so the
+// signal never rides on hue alone. Mirrors UiPositionMetric's bands.
+// Deliberate second, severity-toned tier variant for inline prose — NOT
+// `UiPositionMetric`'s table-cell spec (amber 1-3 / blue 4-10 / muted 11+).
+// A sentence needs a binary-ish "is this fine or not" read at a glance, so
+// `position` here uses the same success/warning/error vocabulary every other
+// inline segment (delta, coverage) already carries; the table component's
+// tighter banding stays as-is for its own denser, side-by-side context.
+// Confirmed 2026-07-28 visual-scoring pass — not drift, see gap-hunt.md.
+function positionMeta(position: number): { tone: string, label: string } {
+  if (!Number.isFinite(position))
+    return { tone: 'text-muted', label: '' }
+  if (position < 10)
+    return { tone: 'text-success', label: ' (strong rank)' }
+  if (position < 30)
+    return { tone: 'text-warning', label: ' (moderate rank)' }
+  return { tone: 'text-error', label: ' (weak rank)' }
+}
+
+// Delta colour rides ONLY on an explicit `good` — direction alone (up/down/flat)
+// never implies "better"/"worse" on its own (e.g. a ranking POSITION going up
+// is worse). Neutral is the default so the trend color budget stays hero-only.
+function deltaTone(good?: boolean): string {
+  if (good === true)
+    return 'text-success'
+  if (good === false)
+    return 'text-error'
+  return 'text-muted'
+}
+
+const DELTA_ICON = {
+  up: 'arrow-up-right',
+  down: 'arrow-down-right',
+  flat: 'next',
+} as const
+
+function deltaAriaLabel(seg: Extract<RichSegment, { kind: 'delta' }>): string {
+  const verdict = seg.good === true ? ', improved' : seg.good === false ? ', worsened' : ''
+  return `${seg.from} to ${seg.to}, trending ${seg.direction}${verdict}`
+}
+
+// Tooltip only wraps when the tooltip text says something the visible label
+// doesn't already say — an identical tooltip is dead weight on the trigger.
+function visibleText(seg: RichSegment): string {
+  switch (seg.kind) {
+    case 'delta': return `${seg.from} ${seg.to}`
+    default: return 'text' in seg ? seg.text : ''
+  }
+}
+function showTooltip(seg: RichSegment): boolean {
+  return 'tooltip' in seg && !!seg.tooltip && seg.tooltip !== visibleText(seg)
+}
+
+/**
+ * The route a segment links to, or `undefined` under `inertLinks`. Every
+ * link-bearing branch below reads its `to` through here, so there is one place
+ * that decides whether this sentence emits anchors at all.
+ */
+function segTo(seg: RichSegment): string | undefined {
+  if (inertLinks)
+    return undefined
+  return 'to' in seg && seg.to ? seg.to : undefined
+}
+
+/** Punctuation that binds to the word before it — a space in front reads as a typo. */
+const BINDS_LEFT = /^["'’`.,!?;:)\]}%…]/
+
+/**
+ * Whether to emit a space before segment `i`.
+ *
+ * The spacing is injected rather than carried in the caller's text because a
+ * literal space at the boundary of an adjacent `inline-flex` token does not
+ * survive HTML whitespace handling — measured, not assumed.
+ *
+ * `spacing="none"` (sentence mode) keeps the injection but skips it where the
+ * next run opens with punctuation that binds leftward, so a possessive renders
+ * `example.com's traffic?` rather than `example.com 's traffic?`. Token-list
+ * callers (the default) space unconditionally, since a token list has no
+ * punctuation running between its items.
+ */
+function needsLeadingSpace(seg: RichSegment, i: number): boolean {
+  // Flex mode drops whitespace-only text nodes, so `'sm'` keeps them for its wrapped flow.
+  if (i === 0 || seg.kind === 'sep' || truncate === true)
+    return false
+  if (spacing !== 'none')
+    return true
+  return !(seg.kind === 'text' && BINDS_LEFT.test(seg.text))
+}
+
+// `page` compaction: the leading directory reads as context (dimmed), the
+// last path segment is the differentiating part and carries full weight —
+// mirrors why the path was compacted to begin with (compactTarget's
+// rationale: don't make the reader re-parse a whole URL to find what changed).
+function splitPathTail(text: string): { lead: string, tail: string } {
+  const idx = text.lastIndexOf('/')
+  if (idx < 0 || idx === text.length - 1)
+    return { lead: '', tail: text }
+  return { lead: text.slice(0, idx + 1), tail: text.slice(idx + 1) }
+}
+</script>
+
+<template>
+  <!-- Truncate mode clips overflow, so a 2px pad with a matching negative
+       margin leaves room for a focused token's ring without moving text. -->
+  <span
+    :class="[sizeClass[size], truncate === 'sm' ? '[overflow-wrap:anywhere] sm:inline-flex sm:min-w-0 sm:max-w-[calc(100%+4px)] sm:items-baseline sm:gap-x-[0.25em] sm:overflow-hidden sm:whitespace-nowrap sm:-m-0.5 sm:p-0.5' : truncate ? 'inline-flex min-w-0 max-w-[calc(100%+4px)] items-baseline gap-x-[0.25em] overflow-hidden whitespace-nowrap -m-0.5 p-0.5' : '']"
+    data-ui="UiRichText"
+  >
+    <template v-for="(seg, i) in segments" :key="i">
+      <!-- Flex mode spaces via gap; whitespace-only text nodes are dropped by flex layout. -->
+      <template v-if="needsLeadingSpace(seg, i)">{{ ' ' }}</template>
+
+      <span v-if="seg.kind === 'text'">{{ seg.text }}</span>
+
+      <!-- In the wrapped flow of `truncate="sm"`, a no-break space keeps the
+           separator off the start of a line. Flex mode spaces via gap. -->
+      <span v-else-if="seg.kind === 'sep'" class="text-dimmed" aria-hidden="true"><template v-if="truncate === 'sm'"><span class="sm:hidden">&nbsp;</span>· </template><template v-else> · </template></span>
+
+      <!-- Truncate-mode long-tail tokens: tooltip-less so the flex item IS the
+           shrinkable element (a tooltip trigger wrapper can't shrink). -->
+      <component
+        :is="segTo(seg) ? NuxtLink : 'code'"
+        v-else-if="seg.kind === 'keyword' && truncate"
+        :to="segTo(seg)"
+        class="font-mono tracking-[-0.01em] text-default"
+        :class="[shrinkClass, segTo(seg) ? `underline decoration-dotted decoration-muted underline-offset-4 hover:text-highlighted hover:decoration-solid ${LINK_FOCUS}` : '']"
+        :title="seg.tooltip || undefined"
+      ><span class="text-dimmed" aria-hidden="true">&ldquo;&#8202;</span>{{ seg.text }}<span class="text-dimmed" aria-hidden="true">&#8202;&rdquo;</span></component>
+
+      <UiTooltip v-else-if="seg.kind === 'keyword'" :disabled="!showTooltip(seg)" :text="seg.tooltip">
+        <component
+          :is="segTo(seg) ? NuxtLink : 'code'"
+          :to="segTo(seg)"
+          class="font-mono tracking-[-0.01em] text-default"
+          :class="segTo(seg) || showTooltip(seg) ? `underline decoration-dotted decoration-muted underline-offset-4 hover:text-highlighted hover:decoration-solid ${LINK_FOCUS}` : ''"
+        ><span class="text-dimmed" aria-hidden="true">&ldquo;&#8202;</span>{{ seg.text }}<span class="text-dimmed" aria-hidden="true">&#8202;&rdquo;</span></component>
+      </UiTooltip>
+
+      <component
+        :is="segTo(seg) ? NuxtLink : 'span'"
+        v-else-if="seg.kind === 'handle'"
+        :to="segTo(seg)"
+        class="font-mono text-[0.92em] text-default"
+        :class="segTo(seg) ? `underline-offset-2 hover:text-highlighted hover:underline ${LINK_FOCUS}` : ''"
+      >{{ seg.text }}</component>
+
+      <component
+        :is="segTo(seg) ? NuxtLink : 'span'"
+        v-else-if="seg.kind === 'page' && truncate"
+        :to="segTo(seg)"
+        class="font-sans"
+        :class="[shrinkClass, segTo(seg) ? `underline-offset-2 hover:text-highlighted hover:underline ${LINK_FOCUS}` : '']"
+        :aria-label="seg.text"
+        :title="seg.tooltip || seg.url"
+      ><span class="hidden text-dimmed sm:inline">{{ splitPathTail(seg.text).lead }}</span><span class="text-default">{{ splitPathTail(seg.text).tail }}</span></component>
+
+      <UiTooltip v-else-if="seg.kind === 'page'" :disabled="!showTooltip(seg)" :text="seg.tooltip">
+        <component
+          :is="segTo(seg) ? NuxtLink : 'span'"
+          :to="segTo(seg)"
+          class="font-sans truncate align-bottom"
+          :class="segTo(seg) ? `underline-offset-2 hover:text-highlighted hover:underline ${LINK_FOCUS}` : ''"
+          :title="seg.url"
+        ><span class="text-dimmed">{{ splitPathTail(seg.text).lead }}</span><span class="text-default">{{ splitPathTail(seg.text).tail }}</span></component>
+      </UiTooltip>
+
+      <a
+        v-else-if="seg.kind === 'domain' && seg.external && !inertLinks"
+        :href="`https://${seg.domain}`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-[0.2em] align-middle font-medium text-default underline-offset-2 hover:text-highlighted hover:underline"
+        :class="LINK_FOCUS"
+      >
+        <span class="inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm ring-1 ring-primary/30 bg-primary/8">
+          <UiFavicon :domain="seg.domain" :size="11" decorative />
+        </span>
+        {{ seg.text }}
+        <UiIcon name="external" class="size-2.5 text-dimmed" aria-hidden="true" />
+        <span class="sr-only">(opens in a new tab)</span>
+      </a>
+      <component
+        :is="segTo(seg) ? NuxtLink : 'span'"
+        v-else-if="seg.kind === 'domain'"
+        :to="segTo(seg)"
+        class="inline-flex items-center gap-[0.2em] align-middle font-medium text-default"
+        :class="segTo(seg) ? `underline-offset-2 hover:text-highlighted hover:underline ${LINK_FOCUS}` : ''"
+      >
+        <span class="inline-flex size-3.5 shrink-0 items-center justify-center rounded-sm ring-1 ring-primary/30 bg-primary/8">
+          <UiFavicon :domain="seg.domain" :size="11" decorative />
+        </span>
+        {{ seg.text }}
+      </component>
+
+      <UiTooltip v-else-if="seg.kind === 'metric'" :disabled="!showTooltip(seg)" :text="seg.tooltip">
+        <span class="numerals-display text-default">{{ seg.text }}</span>
+      </UiTooltip>
+
+      <span
+        v-else-if="seg.kind === 'position'"
+        class="numerals-display numerals-display-heavy"
+        :class="positionMeta(seg.position).tone"
+        :title="`Position ${seg.position}${positionMeta(seg.position).label}`"
+      >{{ seg.text }}<span class="sr-only">{{ positionMeta(seg.position).label }}</span></span>
+
+      <UiTooltip v-else-if="seg.kind === 'delta'" :disabled="!showTooltip(seg)" :text="seg.tooltip">
+        <span
+          class="rich-delta-reveal inline-flex items-center gap-1.5"
+          :class="deltaTone(seg.good)"
+          :title="deltaAriaLabel(seg)"
+        >
+          <span class="numerals-display text-muted">{{ seg.from }}</span>
+          <UiIcon :name="DELTA_ICON[seg.direction]" class="size-3 shrink-0" aria-hidden="true" />
+          <span class="numerals-display numerals-display-heavy">{{ seg.to }}</span>
+          <span class="sr-only">{{ deltaAriaLabel(seg) }}</span>
+        </span>
+      </UiTooltip>
+
+      <code v-else-if="seg.kind === 'code'" class="rounded-[3px] bg-elevated px-1 py-0.5 font-mono text-[0.85em] text-muted ring-1 ring-default/60" :class="shrinkClass">{{ seg.text }}</code>
+    </template>
+  </span>
+</template>

package/app/components/data/UiScatterPlot.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup generic="T extends ScatterPoint">
+import type { VNodeChild } from 'vue'
+import { computed } from 'vue'
+import { UiChartDataReveal, UiSkeleton, UiTooltip } from '#components'
+// Bubble scatter plot. Each point is plotted by two percentage coordinates
+// (x/y, 0..100 within the plot area) and sized by a third metric, the marker
+// drawn as a circle whose inner content is slotted. The canonical "opportunity
+// map" surface (reach vs conversion, sized by volume).
+//
+// Tooltip anchoring: the positioned wrapper sits OUTSIDE the tooltip trigger and
+// the sized marker lives inside it. reka's `TooltipTrigger as-child` measures the
+// trigger element's box for floating-ui; if the `position:absolute` element were
+// the trigger's child (out of flow) the trigger would collapse to zero-size at
+// the plot origin and every tooltip would anchor to the top-left corner. Keeping
+// the marker in-flow inside an absolutely-positioned wrapper anchors each tooltip
+// to its own bubble.
+
+export interface ScatterPoint {
+  /** Stable key per point. */
+  key: string | number
+  /** Horizontal position, 0..100 (% of plot area). */
+  x: number
+  /** Vertical position, 0..100 (% of plot area). */
+  y: number
+  /** Marker diameter in px. */
+  size: number
+  /** Tooltip title. */
+  title?: string
+  /** Tooltip description. */
+  description?: string
+}
+
+const {
+  points,
+  xLabel,
+  yLabel,
+  midline = false,
+  tooltipSide = 'top',
+  label,
+  loading = false,
+} = defineProps<{
+  points: T[]
+  /** Bottom-right axis caption. */
+  xLabel?: string
+  /** Left vertical axis caption. */
+  yLabel?: string
+  /** Draw a faint dashed gridline across the vertical midpoint. */
+  midline?: boolean
+  tooltipSide?: 'top' | 'bottom' | 'left' | 'right'
+  /** Accessible name for the screen-reader data table (the plot is position-only). */
+  label?: string
+  /** Swap the markers for placeholder bubbles, keeping the plot chrome. */
+  loading?: boolean
+}>()
+
+defineSlots<{
+  /** Inner marker content (e.g. a flag icon). Receives the full point. */
+  marker?: (props: { point: T }) => VNodeChild
+}>()
+
+// Placeholder bubbles for `loading`. They render through the SAME positioned
+// wrapper (and the same centring translate) as real markers, so the plot box,
+// axes and bubble field are already the final layout when data lands — the
+// caller can't drift a hand-rolled skeleton out of shape, and a bubble near the
+// right edge extends half its diameter, not its full width, past its x.
+const LOADING_POINTS = [
+  { key: 'l0', x: 12, y: 66, size: 20 },
+  { key: 'l1', x: 27, y: 42, size: 34 },
+  { key: 'l2', x: 43, y: 55, size: 24 },
+  { key: 'l3', x: 58, y: 27, size: 44 },
+  { key: 'l4', x: 74, y: 38, size: 28 },
+  { key: 'l5', x: 88, y: 18, size: 18 },
+]
+
+// The visual plot encodes data by x/y position only, so it is hidden from
+// assistive tech; a visually-hidden data table carries the same points as text.
+const tableCaption = computed(() => label || [yLabel, xLabel].filter(Boolean).join(' vs ') || 'Plotted data')
+</script>
+
+<template>
+  <div data-ui="UiScatterPlot" class="relative h-60 select-none" :aria-busy="loading || undefined">
+    <!-- Plot area with zero-baseline axes. Position-encoded → hidden from AT;
+         the sr-only table below carries the same data. -->
+    <div class="absolute inset-x-6 top-2 bottom-7 border-l border-b border-muted" aria-hidden="true">
+      <div v-if="midline" class="absolute inset-x-0 top-1/2 border-t border-dashed border-default/40" aria-hidden="true" />
+      <!-- Loading: same wrapper + centring as a real marker, so nothing moves
+           (or spills past the plot edge) when the points arrive. -->
+      <div
+        v-for="point in (loading ? LOADING_POINTS : [])"
+        :key="`skeleton-${point.key}`"
+        class="absolute -translate-x-1/2 -translate-y-1/2"
+        :style="{ left: `${point.x}%`, top: `${point.y}%` }"
+      >
+        <UiSkeleton type="circle" :base="point.size" />
+      </div>
+
+      <!-- Positioned wrapper stays OUTSIDE the tooltip trigger so the trigger
+           anchors to the marker's real location (see component comment). -->
+      <div
+        v-for="point in (loading ? [] : points)"
+        :key="point.key"
+        class="absolute -translate-x-1/2 -translate-y-1/2 hover:z-10"
+        :style="{ left: `${point.x}%`, top: `${point.y}%` }"
+      >
+        <UiTooltip :title="point.title" :description="point.description" :side="tooltipSide">
+          <div
+            class="flex items-center justify-center rounded-full bg-primary/8 ring-1 ring-primary/15 motion-safe:transition-transform motion-safe:duration-150 motion-safe:hover:scale-110 cursor-default"
+            :style="{ width: `${point.size}px`, height: `${point.size}px` }"
+          >
+            <slot name="marker" :point="point" />
+          </div>
+        </UiTooltip>
+      </div>
+    </div>
+    <!-- Axis labels -->
+    <span v-if="yLabel" class="absolute left-0 top-1 text-mini text-dimmed tabular-nums [writing-mode:vertical-rl] rotate-180" aria-hidden="true">{{ yLabel }}</span>
+    <span v-if="xLabel" class="absolute bottom-0 right-6 text-mini text-dimmed" aria-hidden="true">{{ xLabel }}</span>
+
+    <!-- Screen-reader equivalent of the position-only plot, and the keyboard
+         path to the point tooltips: UiChartDataReveal keeps it hidden until a
+         keyboard user asks for it. -->
+    <UiChartDataReveal v-if="!loading">
+      <table>
+        <caption>{{ tableCaption }}</caption>
+        <thead>
+          <tr>
+            <th scope="col">
+              Item
+            </th>
+            <th scope="col">
+              Detail
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="point in points" :key="point.key">
+            <td>{{ point.title || '—' }}</td>
+            <td>{{ point.description || '—' }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </UiChartDataReveal>
+  </div>
+</template>

package/app/components/data/UiSeverityMarker.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { severity } = defineProps<{
+  severity: 'error' | 'warning' | 'info'
+}>()
+
+const SEVERITY_WORD: Record<'error' | 'warning' | 'info', string> = {
+  error: 'High',
+  warning: 'Medium',
+  info: 'Low',
+}
+</script>
+
+<template>
+  <span
+    class="flex h-5 w-2 shrink-0 items-center justify-center"
+    role="img"
+    :aria-label="`${SEVERITY_WORD[severity]} severity`"
+    :title="`${SEVERITY_WORD[severity]} severity`"
+  >
+    <!-- A custom path keeps the 8px triangle soft without adding icon detail. -->
+    <svg v-if="severity === 'error'" viewBox="0 0 8 8" class="size-2 text-error" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M4 .6c.23 0 .43.12.55.33l3.07 5.32c.24.42-.06.95-.54.95H.92c-.48 0-.78-.53-.54-.95L3.45.93A.63.63 0 0 1 4 .6Z"
+      />
+    </svg>
+    <span v-else-if="severity === 'warning'" class="size-1.5 rotate-45 rounded-[1px] border border-warning" aria-hidden="true" />
+    <span v-else class="size-1.5 rounded-full border border-[var(--ui-text-dimmed)]" aria-hidden="true" />
+  </span>
+</template>

package/app/components/data/UiSparkColumns.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// Column sparkline: a run of short columns, one per bucket, the last one
+// carrying the row's tint. This is the sparkline for anything under about
+// 40px tall: a table cell, a list row, a card corner. Under that height a line
+// turns to anti-aliased mush, and a line through weekly buckets or zero-heavy
+// counts invents continuity the data does not have. `UiSparkline` stays the
+// primitive for dense daily series with hover; this one has no hover, no
+// axis, and no gradient on purpose.
+//
+// Colour follows DESIGN's budget. Every column is the neutral border tone; only
+// the last takes `tone`, and `tone` defaults to neutral, so a list of twenty
+// rows paints nothing unless the caller says which rows are the point. The tint
+// is a claim about the last bucket, so the caller keeps that bucket the same
+// window as the number it sits beside.
+
+type Tone = 'success' | 'error' | 'warning' | 'info' | 'neutral'
+
+interface Props {
+  /** Values, oldest first. Buckets are summed (or averaged when `inverted`). */
+  data: number[]
+  /**
+   * Columns to draw. Longer series fold into that many buckets aligned on the
+   * END, so the last column is always the newest whole bucket: 90 daily points
+   * over 30 columns is one column per three days. Defaults to the size's own
+   * count, about a 5px pitch, so a column stays a column and not a hairline.
+   */
+  columns?: number
+  /**
+   * Lower-is-better series (rank). The axis flips so #1 fills the track and a
+   * value at or past `floor` draws as a stub, the same convention as
+   * `UiSparkline` and the rank-run email chart.
+   */
+  inverted?: boolean
+  /** With `inverted`, the value that means "off the chart" (rank 31 = not in the top 30). */
+  floor?: number
+  /** Tint of the last column. Neutral draws it one step darker than the rest. */
+  tone?: Tone
+  /** The last bucket is still filling: it renders hatched, never as a fall. */
+  partial?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  width?: number | string
+  height?: number | string
+  /** Spoken alternative. Say what the run is and where it ended. */
+  ariaLabel?: string
+}
+
+const {
+  data,
+  columns,
+  inverted = false,
+  floor = 31,
+  tone = 'neutral',
+  partial = false,
+  size = 'md',
+  width,
+  height,
+  ariaLabel,
+} = defineProps<Props>()
+
+const SIZE = {
+  sm: { w: 96, h: 20, gap: 1.5, columns: 18 },
+  md: { w: 120, h: 24, gap: 2, columns: 24 },
+  lg: { w: 160, h: 32, gap: 2, columns: 32 },
+} as const
+
+const preset = computed(() => SIZE[size])
+const cssWidth = computed(() => width ?? preset.value.w)
+const cssHeight = computed(() => height ?? preset.value.h)
+const vbW = computed(() => typeof cssWidth.value === 'number' ? cssWidth.value : preset.value.w)
+const vbH = computed(() => typeof cssHeight.value === 'number' ? cssHeight.value : preset.value.h)
+
+/** Fold the series into at most `columns` buckets, newest bucket last and whole. */
+const buckets = computed<number[]>(() => {
+  const values = data.filter(v => Number.isFinite(v))
+  if (!values.length)
+    return []
+  const per = Math.max(1, Math.ceil(values.length / (columns ?? preset.value.columns)))
+  const out: number[] = []
+  // Retain the leading partial bucket instead of dropping early activity.
+  const remainder = values.length % per
+  for (let end = remainder || per; end <= values.length; end += per) {
+    const slice = values.slice(Math.max(0, end - per), end)
+    const sum = slice.reduce((acc, v) => acc + v, 0)
+    out.push(inverted ? sum / slice.length : sum)
+  }
+  return out
+})
+
+const TONE_CLASS: Record<Tone, string> = {
+  success: 'text-success',
+  error: 'text-error',
+  warning: 'text-warning',
+  info: 'text-info',
+  neutral: 'text-dimmed',
+}
+
+const MIN_HEIGHT = 2
+
+const rects = computed(() => {
+  const n = buckets.value.length
+  if (!n)
+    return []
+  // Fit the run inside the declared box. The preset gap holds while every
+  // column keeps at least 1 unit; past that the gap gives way, then the
+  // column width itself. The svg draws overflow-visible, so a run longer
+  // than the viewBox would paint past the declared box, and the x clamp
+  // below keeps `x + width <= viewBox width` structural rather than a
+  // caller's hope.
+  const gap = preset.value.gap
+  const natural = (vbW.value - gap * (n - 1)) / n
+  const gapW = natural >= 1 ? gap : Math.max(0, (vbW.value - n) / Math.max(1, n - 1))
+  const colW = natural >= 1 ? natural : (vbW.value - gapW * (n - 1)) / n
+  const track = vbH.value
+  const max = inverted ? floor : Math.max(...buckets.value, 1)
+  return buckets.value.map((value, index) => {
+    // Rank: #1 fills the track, the floor keeps a stub. Count: scaled to the row's own maximum.
+    const ratio = inverted
+      ? Math.max(0, Math.min(1, (floor - Math.min(value, floor)) / Math.max(1, floor - 1)))
+      : value / max
+    const h = Math.max(MIN_HEIGHT, Math.round(ratio * track))
+    return {
+      x: Math.min(index * (colW + gapW), vbW.value - colW),
+      y: track - h,
+      w: colW,
+      h,
+      last: index === n - 1,
+    }
+  })
+})
+</script>
+
+<template>
+  <svg
+    v-if="rects.length"
+    :width="cssWidth"
+    :height="cssHeight"
+    :viewBox="`0 0 ${vbW} ${vbH}`"
+    preserveAspectRatio="none"
+    :role="ariaLabel ? 'img' : undefined"
+    :aria-label="ariaLabel"
+    :aria-hidden="ariaLabel ? undefined : 'true'"
+    class="block shrink-0 overflow-visible"
+  >
+    <rect
+      v-for="(r, i) in rects"
+      :key="i"
+      :x="r.x"
+      :y="r.y"
+      :width="r.w"
+      :height="r.h"
+      rx="1"
+      :class="[
+        r.last ? [TONE_CLASS[tone], 'fill-current'] : 'fill-current text-dimmed opacity-45',
+        r.last && partial ? 'opacity-50' : '',
+      ]"
+    />
+  </svg>
+</template>