@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/data/UiTopEntityStackChart.vue

@@ -0,0 +1,393 @@
+<script lang="ts" setup>
+import type { ChartAnnotation, ChartAnnotationOptions } from '../../utils/chartAnnotations'
+import type { TopEntityStackBucket, TopEntityStackRow, TopEntityStackSeries } from '../../utils/topEntityStack'
+import { StackedBar, TextAlign } from '@unovis/ts'
+import { VisAxis, VisCrosshair, VisLine, VisStackedBar, VisTooltip, VisXYContainer } from '@unovis/vue'
+import { useElementSize } from '@vueuse/core'
+import { computed, useTemplateRef } from 'vue'
+import { ClientOnly, UiChartAnnotations, UiChartDataReveal, UiEmptyState, UiSkeleton } from '#components'
+import { gscTopEntityColors } from '../../composables/dataVizColors'
+import { DISPLAY_LOCALE, formatGroupedNumber } from '../../composables/formatting'
+import { useChartTickPlan } from '../../composables/useChartTickPlan'
+import { anchorAnnotationsToBuckets, topEntityStackRows, topEntityStackTimeline } from '../../utils/topEntityStack'
+
+// Shared "top N + Other" stacked-bar trend chart (manual-review-2026-08:
+// search-console Queries / Pages / Countries). Dumb + presentational — the
+// top-N-and-Other bucketing is `bucketTopEntities` (pure, unit-tested); this
+// component only draws whatever `buckets`/`series` it's handed. One component,
+// three call sites (queries, pages-on-queries-table-view, countries).
+
+const {
+  buckets,
+  series,
+  loading = false,
+  height = 220,
+  scale = 'share',
+  legendSlots = 0,
+  format = formatGroupedNumber,
+  xFormat,
+  emptyTitle = 'Not enough data to chart',
+  emptyDescription = 'This trend fills in once there is more than one day of data.',
+  annotations,
+  annotationOptions,
+} = defineProps<{
+  buckets: TopEntityStackBucket[]
+  series: TopEntityStackSeries[]
+  loading?: boolean
+  height?: number | string
+  /** `share` fills each bar to 100%. `absolute` draws real levels, so growth stays visible. */
+  scale?: 'share' | 'absolute'
+  /** Reserve at least this many single-line legend cells, including while loading. */
+  legendSlots?: number
+  /** Format a metric value for the legend + tooltip. */
+  format?: (value: number) => string
+  /** Format bucket labels for details. The axis uses the shared calendar tick planner. */
+  xFormat?: (bucket: TopEntityStackBucket) => string
+  emptyTitle?: string
+  emptyDescription?: string
+  annotations?: ChartAnnotation[]
+  annotationOptions?: ChartAnnotationOptions
+}>()
+
+const emit = defineEmits<{
+  annotationEdit: [annotation: ChartAnnotation]
+}>()
+
+const chartHeight = computed(() => Number(height) || 220)
+// `absolute` draws a value axis, because bar height alone hides the magnitude.
+const margin = computed(() => ({ left: scale === 'absolute' ? 44 : 0, right: 0, top: 4, bottom: 28 }))
+
+// gscTopEntityColors is a fixed 11-slot palette (10 identity hues + 1 neutral),
+// wider than any current caller's topN (5) and already Tailwind-safelisted
+// (dataVizColors.ts), so no new runtime class needs adding here. Other always takes the neutral slot regardless of its position in
+// `series`, ranked entities keep their identity hue by rank order. `.hex` feeds
+// the SVG marks + the HTML-string crosshair tooltip (neither can resolve a
+// Tailwind/CSS-var class); `.dot` (the SOLID identity colour, vs. `.bg`'s
+// translucent fill) feeds the real DOM legend swatches.
+function colorFor(index: number) {
+  return series[index]?.isOther ? gscTopEntityColors.at(-1)! : (gscTopEntityColors[index] ?? gscTopEntityColors.at(-1)!)
+}
+const resolvedColors = computed(() => series.map((s, i) => s.isOther
+  ? 'color-mix(in oklab, var(--ui-primary) 22%, transparent)'
+  : colorFor(i).hex))
+const resolvedDotClasses = computed(() => series.map((_, i) => colorFor(i).dot))
+const legend = computed(() => Array.from({ length: Math.max(legendSlots, series.length) }, (_, index) => series[index]))
+
+const rows = computed(() => topEntityStackRows({ buckets, series }))
+const y = computed(() => series.map((_, si) => (d: TopEntityStackRow) => (scale === 'absolute' ? d.values[si] : d.shares[si]) ?? 0))
+const yDomain = computed<[number, number]>(() => [0, scale === 'absolute' ? Math.max(1, ...rows.value.map(row => row.total)) : 100])
+const percentFormat = new Intl.NumberFormat(DISPLAY_LOCALE, { style: 'percent', maximumFractionDigits: 1 })
+function shareLabel(share: number): string {
+  return percentFormat.format(share / 100)
+}
+
+const x = (_d: TopEntityStackRow, i: number) => i
+const totalY = (d: TopEntityStackRow) => scale === 'absolute' ? d.total : d.total > 0 ? 100 : 0
+
+// The plot box is `overflow-hidden` at a fixed height, and the crosshair
+// tooltip lists one row per series plus a header. Rendered inside the plot it
+// was clipped to the bars, so the caller saw a fragment of the figures. Mount it
+// on `document.body` instead (Unovis switches to fixed positioning and
+// constrains to the viewport). Client-only: the chart renders inside ClientOnly.
+const tooltipContainer = import.meta.client ? document.body : undefined
+// On `document.body` the tooltip no longer inherits the chart's dark vars, and
+// Unovis gives it only generated class names. The dark `.unovis-tooltip` rule
+// in global.css matches this class, so dark mode keeps a dark tooltip.
+const TOOLTIP_CLASS = 'unovis-tooltip'
+const chartKey = computed(() => `${buckets.length}-${series.length}`)
+
+// Both layers share bucket centres. Adjacent normalized buckets form one
+// continuous field, with no gaps between dates or segments.
+const plotEl = useTemplateRef<HTMLElement>('plotEl')
+const { width: plotWidth } = useElementSize(plotEl)
+const barWidth = computed(() => {
+  const count = buckets.length
+  if (!count || plotWidth.value <= 0)
+    return undefined
+  return (plotWidth.value - margin.value.left) / count
+})
+const interactiveXDomain = computed<[number, number]>(() => [-0.5, Math.max(buckets.length - 1, 0) + 0.5])
+
+const defaultDateFmt = new Intl.DateTimeFormat(DISPLAY_LOCALE, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+function bucketLabel(bucket: TopEntityStackBucket): string {
+  if (xFormat)
+    return xFormat(bucket)
+  const d = new Date(`${bucket.start}T00:00:00Z`)
+  return Number.isNaN(d.getTime()) ? bucket.start : defaultDateFmt.format(d)
+}
+
+const timeline = computed(() => topEntityStackTimeline(buckets))
+const { tickPlan, tickFormat: calendarTickFormat } = useChartTickPlan({ dates: () => timeline.value.dates })
+const tickValues = computed(() => {
+  const values = tickPlan.value.indices.map(i => timeline.value.positions[i] ?? 0)
+  const pixelsPerBucket = (plotWidth.value - margin.value.left) / Math.max(buckets.length, 1)
+  const last = values.at(-1) ?? 0
+  return values.reduce<number[]>((kept, value, i) => {
+    if (i === 0 || i === values.length - 1
+      || ((value - kept.at(-1)!) * pixelsPerBucket >= 56 && (last - value) * pixelsPerBucket >= 56)) {
+      kept.push(value)
+    }
+    return kept
+  }, [])
+})
+function tickFormat(position: number): string {
+  const index = timeline.value.positions.indexOf(position)
+  return index < 0 ? '' : calendarTickFormat(index)
+}
+function tickTextAlign(position: number): TextAlign {
+  if (position === -0.5)
+    return TextAlign.Left
+  if (position === buckets.length - 0.5)
+    return TextAlign.Right
+  return TextAlign.Center
+}
+
+// Unovis inserts this template as HTML. Keep every dynamic text value literal,
+// including caller-supplied formatters and stored entity names.
+function escapeTooltipText(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+}
+
+function crosshairTemplate(d: TopEntityStackRow): string {
+  const bucket = buckets[d.i]
+  if (!bucket)
+    return ''
+  const total = d.total
+  const rowsHtml = series
+    .map((s, i) => ({ label: s.label, value: d.values[i] ?? 0, share: d.shares[i] ?? 0, color: resolvedColors.value[i] }))
+    .filter(r => r.value > 0)
+    .map(r => `<div style="display:flex;align-items:center;gap:6px">
+      <span style="width:8px;height:8px;border-radius:9999px;background:${r.color};flex-shrink:0"></span>
+      <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;color:var(--ui-text-muted)">${escapeTooltipText(r.label)}</span>
+      <span style="font-variant-numeric:tabular-nums;color:var(--ui-text-highlighted);margin-left:auto">${escapeTooltipText(format(r.value))} <span style="color:var(--ui-text-muted)">(${escapeTooltipText(shareLabel(r.share))})</span></span>
+    </div>`)
+    .join('')
+  // Rows pin to the header's 12px. On the body they inherit the page's base
+  // size, and a large one made the tooltip swamp the chart under it.
+  return `<div style="display:flex;flex-direction:column;gap:4px;min-width:180px;padding:2px;font-size:12px">
+    <div style="display:flex;justify-content:space-between;align-items:center;color:var(--ui-text-dimmed);margin-bottom:2px;font-size:12px">
+      <span>${escapeTooltipText(bucketLabel(bucket))}</span>
+      <span style="font-weight:600;color:var(--ui-text-highlighted)">${escapeTooltipText(format(total))}</span>
+    </div>
+    ${rowsHtml}
+  </div>`
+}
+
+// Day-anchored annotation markers re-anchor onto the bucket index axis: each
+// lands on the bucket whose day range holds it. They share the bars' domain,
+// so a marker sits on its bar's centre, and the overlay box below starts after
+// the value-axis margin, as the plot does.
+const anchoredAnnotations = computed(() => anchorAnnotationsToBuckets(annotations, buckets))
+
+const ariaLabel = computed(() => `${scale === 'absolute' ? 'Stacked' : '100% stacked'} bar chart of ${series.map(s => s.label).join(', ')} over time`)
+</script>
+
+<template>
+  <div data-ui="UiTopEntityStackChart" class="ui-top-entity-stack-chart relative min-w-0">
+    <!-- Plot area: fixed height, layers grid-stacked. Never grows past `height`
+         regardless of series/bucket count — the axis + legend live OUTSIDE this
+         box in normal flow so nothing can push the plot taller than its box or
+         bleed past the container edge. -->
+    <div
+      ref="plotEl"
+      class="ui-top-entity-stack-chart__plot min-w-0 overflow-hidden"
+      role="img"
+      :aria-label="ariaLabel"
+      :style="{ height: `${chartHeight}px` }"
+    >
+      <div v-if="loading" class="loading-skeleton">
+        <div class="flex-1 flex items-end gap-1">
+          <UiSkeleton v-for="i in 16" :key="i" type="bar" :index="i" />
+        </div>
+      </div>
+
+      <!-- Empty payload is not zero traffic: no buckets/series means we never
+           got data, so this must read as "not enough data", never a chart of
+           zeros. -->
+      <UiEmptyState
+        v-else-if="!buckets.length || !series.length"
+        compact
+        icon="chart-bar"
+        :title="emptyTitle"
+        :description="emptyDescription"
+      />
+
+      <ClientOnly v-else>
+        <VisXYContainer
+          :key="`bars-${chartKey}`"
+          :height="chartHeight"
+          :data="rows"
+          :margin="margin"
+          :auto-margin="false"
+          :y-domain="yDomain"
+          :x-domain="interactiveXDomain"
+          aria-hidden="true"
+          class="chart-layer chart-layer--bars"
+        >
+          <VisStackedBar :attributes="{ [StackedBar.selectors.bar]: { 'shape-rendering': 'crispEdges' } }" :x="x" :y="y" :color="resolvedColors" :bar-padding="0" :bar-width="barWidth" :rounded-corners="0" />
+        </VisXYContainer>
+
+        <VisXYContainer
+          :key="`interactive-${chartKey}`"
+          :height="chartHeight"
+          :data="rows"
+          :margin="margin"
+          :auto-margin="false"
+          :y-domain="yDomain"
+          :x-domain="interactiveXDomain"
+          class="chart-layer chart-layer--interactive"
+        >
+          <VisLine :x="x" :y="totalY" color="transparent" :line-width="0" />
+          <VisAxis
+            type="x"
+            :tick-line="false"
+            :grid-line="false"
+            :domain-line="false"
+            :tick-values="tickValues"
+            :tick-format="tickFormat"
+            :tick-text-align="tickTextAlign"
+            tick-text-font-size="11px"
+            tick-text-color="var(--ui-text-dimmed)"
+          />
+          <!-- No grid lines: this layer sits above the bars, so they would cut
+               through every bar. The labels alone carry the scale. -->
+          <VisAxis
+            v-if="scale === 'absolute'"
+            type="y"
+            :tick-line="false"
+            :grid-line="false"
+            :domain-line="false"
+            :num-ticks="3"
+            :tick-format="format"
+            tick-text-font-size="11px"
+            tick-text-color="var(--ui-text-dimmed)"
+          />
+          <VisTooltip :container="tooltipContainer" :class-name="TOOLTIP_CLASS" :follow-cursor="false" horizontal-placement="right" />
+          <VisCrosshair :x="x" :y="totalY" color="none" :template="crosshairTemplate" />
+        </VisXYContainer>
+
+        <!-- Day-anchored annotation markers (shared overlay). The box spans the
+             plot's x range only, so it starts after the value-axis margin. -->
+        <div class="pointer-events-none absolute inset-y-0 right-0" :style="{ left: `${margin.left}px` }">
+          <UiChartAnnotations
+            :annotations="anchoredAnnotations"
+            :x-domain="interactiveXDomain"
+            :options="annotationOptions"
+            @edit="emit('annotationEdit', $event)"
+            @interaction-change="() => {}"
+          />
+        </div>
+
+        <template #fallback>
+          <div class="loading-skeleton">
+            <div class="flex-1 flex items-end gap-1">
+              <UiSkeleton v-for="i in 16" :key="i" type="bar" :index="i" />
+            </div>
+          </div>
+        </template>
+      </ClientOnly>
+    </div>
+
+    <!-- Legend — normal flow BELOW the plot box, never overlaid on it, so it
+         can never crowd or overflow the bars. Always present for 2+ series so
+         identity is never color-alone. Opt-in slots also reserve loading and
+         unused cells so the surrounding panel keeps its height. -->
+    <ul
+      v-if="legendSlots > 0 || (series.length > 1 && !loading && buckets.length)"
+      class="mt-2 gap-x-3 gap-y-1"
+      :class="legendSlots ? 'ui-top-entity-stack-chart__legend--slots text-mini' : 'flex flex-wrap'"
+      :aria-label="loading ? undefined : `Legend: ${series.map(s => s.label).join(', ')}`"
+      :aria-busy="loading || undefined"
+    >
+      <li
+        v-for="(s, i) in legend"
+        :key="s?.key ?? i"
+        class="flex items-center gap-1.5 min-w-0 max-w-full"
+        :class="{ invisible: !loading && !s }"
+        :aria-hidden="loading || !s || undefined"
+      >
+        <UiSkeleton v-if="loading" type="block" class="h-3 w-24 max-w-full" />
+        <template v-else-if="s">
+          <span class="size-2 rounded-full shrink-0" :class="s.isOther ? 'bg-primary/25' : resolvedDotClasses[i]" aria-hidden="true" />
+          <span class="text-mini text-muted truncate" :title="legendSlots ? s.label : undefined">{{ s.label }}</span>
+        </template>
+      </li>
+    </ul>
+
+    <!-- Screen-reader equivalent of the position-encoded stack, and the
+         keyboard path to the hover readout (mirrors UiLineChart). -->
+    <UiChartDataReveal v-if="buckets.length">
+      <table>
+        <caption>{{ ariaLabel }}</caption>
+        <thead>
+          <tr>
+            <th scope="col">
+              Period
+            </th>
+            <th v-for="s in series" :key="s.key" scope="col">
+              {{ s.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(b, i) in buckets" :key="`${b.start}-${b.end}`">
+            <th scope="row">
+              {{ bucketLabel(b) }}
+            </th>
+            <td v-for="(s, si) in series" :key="s.key">
+              {{ format(s.values[i] ?? 0) }} ({{ shareLabel(rows[i]?.shares[si] ?? 0) }})
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </UiChartDataReveal>
+  </div>
+</template>
+
+<style scoped>
+.ui-top-entity-stack-chart__legend--slots {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
+  grid-auto-rows: 1.5em;
+}
+
+.ui-top-entity-stack-chart__plot {
+  display: grid;
+  /* minmax(0, …): a bare 1fr track floors at the stacked SVGs' width, so the
+     chart grew with its container but never shrank back. */
+  grid-template-columns: minmax(0, 1fr);
+  position: relative;
+  /* Shared edges preserve one continuous 100% field across dates. */
+  --vis-stacked-bar-stroke-width: 0;
+}
+
+.ui-top-entity-stack-chart__plot .chart-layer,
+.ui-top-entity-stack-chart__plot .loading-skeleton {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  min-width: 0;
+}
+
+.ui-top-entity-stack-chart__plot .chart-layer {
+  pointer-events: none;
+}
+
+.ui-top-entity-stack-chart__plot .chart-layer--bars {
+  clip-path: inset(4px 0 28px round calc(var(--ui-radius) * 2));
+}
+
+.ui-top-entity-stack-chart__plot .chart-layer--interactive {
+  pointer-events: auto;
+  --vis-crosshair-line-stroke-color: var(--ui-border-accented);
+  --vis-crosshair-line-stroke-opacity: 0.6;
+}
+
+.loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  padding-bottom: 1.5rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+</style>

package/app/components/data/cells/UiTableDash.vue

@@ -0,0 +1,3 @@
+<template>
+  <span class="text-dimmed" aria-label="No data">{{ '—' }}</span>
+</template>

package/app/components/data/cells/UiTableHeaderCell.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts" generic="T extends object">
+import type { Header } from '@tanstack/vue-table'
+import type { UiTableColumn, UiTableFeatures } from '../../../shared/table'
+import { FlexRender } from '@tanstack/vue-table'
+import { computed } from 'vue'
+import { UiIcon, UiTooltip } from '#components'
+
+const { header, sortDirection } = defineProps<{
+  header: Header<UiTableFeatures, T, unknown>
+  sortDirection: 'asc' | 'desc' | false
+}>()
+
+const emit = defineEmits<{ sort: [columnId: string] }>()
+
+const def = computed(() => header.column.columnDef as UiTableColumn<T>)
+const sortable = computed(() => header.column.getCanSort())
+
+const justifyClass = computed(() => {
+  if (def.value.align === 'center')
+    return 'justify-center'
+  if (def.value.align === 'right' || def.value.numeric)
+    return 'justify-end'
+  return 'justify-start'
+})
+
+const isHeaderEmpty = computed(() => {
+  const v = def.value.header
+  return v === '' || v == null
+})
+
+const sortIcon = computed(() => {
+  if (sortDirection)
+    return 'collapse'
+  return 'sort'
+})
+
+// Chevron rotates 180° between asc/desc — a single icon animates rather than swapping.
+const sortIconRotate = computed(() => sortDirection === 'desc' ? 'rotate-180' : '')
+
+const buttonClass = 'flex min-h-11 items-center gap-1 w-full text-label cursor-pointer select-none transition-colors rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sm:min-h-0'
+</script>
+
+<template>
+  <UiTooltip v-if="def.tooltip" :text="def.tooltip">
+    <button
+      v-if="sortable"
+      type="button"
+      :class="[buttonClass, justifyClass, sortDirection ? 'text-highlighted' : 'text-muted hover:text-default']"
+      :aria-label="isHeaderEmpty ? `Sort by ${header.column.id}` : undefined"
+      @click.stop="emit('sort', header.column.id)"
+    >
+      <FlexRender v-if="!header.isPlaceholder" :header="header" />
+      <UiIcon :name="sortIcon" class="size-3 text-dimmed transition-transform duration-150" :class="sortIconRotate" aria-hidden="true" />
+    </button>
+    <div v-else class="flex items-center gap-1" :class="justifyClass">
+      <FlexRender v-if="!header.isPlaceholder" :header="header" />
+    </div>
+  </UiTooltip>
+  <button
+    v-else-if="sortable"
+    type="button"
+    :class="[buttonClass, justifyClass, sortDirection ? 'text-highlighted' : 'text-muted hover:text-default']"
+    :aria-label="isHeaderEmpty ? `Sort by ${header.column.id}` : undefined"
+    @click.stop="emit('sort', header.column.id)"
+  >
+    <FlexRender v-if="!header.isPlaceholder" :header="header" />
+    <UiIcon :name="sortIcon" class="size-3 text-dimmed transition-transform duration-150" :class="sortIconRotate" aria-hidden="true" />
+  </button>
+  <div v-else class="flex items-center gap-1" :class="justifyClass">
+    <FlexRender v-if="!header.isPlaceholder" :render="def.header" :props="header.getContext()" />
+  </div>
+</template>

package/app/components/data/cells/UiTableMetricCell.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UiTableDash } from '#components'
+
+type Status = 'good' | 'ni' | 'poor' | 'neutral'
+
+const {
+  value,
+  display,
+  status = 'neutral',
+  muted = false,
+  align = 'right',
+} = defineProps<{
+  value: number | null | undefined
+  /** Pre-formatted display string. If omitted, value is rendered as-is via String(). */
+  display?: string | null
+  /** Optional status colour token (e.g. CWV good/needs-improvement/poor). */
+  status?: Status
+  /** Render in muted secondary tone (e.g. impressions vs primary clicks). */
+  muted?: boolean
+  align?: 'left' | 'center' | 'right'
+}>()
+
+const isNullish = computed(() => value == null || display === null)
+
+// Color rides the failure, never the pass. A table of green "good" values spends
+// the page's color budget on non-events, so the one failing row can't stand out
+// (DESIGN — Color budget). `good` reads as a plain numeral; the aria-label still
+// carries the word for anyone who can't see the hue at all.
+const statusClass: Record<Status, string> = {
+  good: '',
+  ni: 'text-warning',
+  poor: 'text-error',
+  neutral: '',
+}
+
+const statusLabel: Record<Status, string | undefined> = {
+  good: 'Good',
+  ni: 'Needs improvement',
+  poor: 'Poor',
+  neutral: undefined,
+}
+
+const alignClass = computed(() => align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start')
+
+const ariaLabel = computed(() => {
+  const label = statusLabel[status]
+  if (!label || !display)
+    return undefined
+  return `${display}, ${label}`
+})
+</script>
+
+<template>
+  <div
+    class="flex"
+    :class="[$slots.trend ? 'flex-col items-stretch gap-1' : 'items-center gap-2', alignClass]"
+  >
+    <UiTableDash v-if="isNullish" />
+    <span
+      v-else
+      class="numerals-display text-sm"
+      :class="[
+        statusClass[status],
+        muted && status === 'neutral' ? 'text-muted' : 'font-medium',
+      ]"
+      :aria-label="ariaLabel"
+    >{{ display ?? String(value) }}</span>
+    <slot v-if="!isNullish" name="trend" />
+    <slot v-if="!isNullish" name="after" />
+  </div>
+</template>

package/app/components/data/cells/UiTablePathCell.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NuxtLink, UiIcon, UiTooltip } from '#components'
+import { safeHttpHref } from '../../../../shared/utils/urls'
+
+const {
+  url,
+  label,
+  to,
+  maxWidth = '280px',
+  external = true,
+} = defineProps<{
+  url: string
+  /** Display text. Defaults to the pathname portion of url. */
+  label?: string
+  /** Internal route. When set, renders NuxtLink to this route instead of an external anchor. */
+  to?: string
+  maxWidth?: string
+  /** Show external open icon on hover/focus. Defaults to true when no internal `to` is provided. */
+  external?: boolean
+}>()
+
+const display = computed(() => {
+  if (label)
+    return label
+  try {
+    const u = new URL(url)
+    return u.pathname + u.search
+  }
+  catch {
+    return url
+  }
+})
+
+// `url` is stored data (Search Console pages, sitemap entries). An unfiltered
+// `href` would run a `javascript:` value on click, so only http(s) reaches the
+// anchor and anything else renders as inert text.
+const safeHref = computed(() => safeHttpHref(url))
+</script>
+
+<template>
+  <UiTooltip :text="url">
+    <div class="group/path inline-flex items-center gap-1.5 min-w-0">
+      <NuxtLink
+        v-if="to"
+        :to="to"
+        :title="url"
+        class="font-sans text-xs text-default hover:text-primary focus-visible:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded transition-colors truncate"
+        :style="{ maxWidth }"
+      >
+        {{ display }}
+      </NuxtLink>
+      <a
+        v-else-if="safeHref"
+        :href="safeHref"
+        :title="url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="font-sans text-xs text-default hover:text-primary focus-visible:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded transition-colors truncate"
+        :style="{ maxWidth }"
+      >{{ display }}</a>
+      <span
+        v-else
+        :title="url"
+        class="font-sans text-xs text-default truncate"
+        :style="{ maxWidth }"
+      >{{ display }}</span>
+      <UiIcon
+        v-if="external && !to && safeHref"
+        name="arrow-up-right"
+        class="size-3 text-dimmed opacity-0 group-hover/path:opacity-100 group-focus-within/path:opacity-100 transition-opacity shrink-0"
+        aria-hidden="true"
+      />
+    </div>
+  </UiTooltip>
+</template>

package/app/components/data/cells/UiTableScoreTile.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const {
+  score,
+  label,
+  bgClass = '',
+} = defineProps<{
+  score: number | null | undefined
+  /** Metric name (e.g. "Performance", "LCP"). Used for the aria-label. */
+  label?: string
+  /** Background class derived from caller's threshold logic (e.g. scoreBgClass()). */
+  bgClass?: string
+}>()
+
+const status = computed<'good' | 'ni' | 'poor' | 'neutral'>(() => {
+  if (score == null)
+    return 'neutral'
+  if (score >= 90)
+    return 'good'
+  if (score >= 50)
+    return 'ni'
+  return 'poor'
+})
+
+const statusWord: Record<typeof status['value'], string> = {
+  good: 'Good',
+  ni: 'Needs improvement',
+  poor: 'Poor',
+  neutral: 'No data',
+}
+
+const ariaLabel = computed(() => {
+  const value = score == null ? 'No data' : String(score)
+  const word = statusWord[status.value]
+  return label ? `${label} ${value}, ${word}` : `${value}, ${word}`
+})
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center justify-center size-8 rounded-md text-mini font-bold numerals-display"
+    :class="bgClass"
+    role="img"
+    :aria-label="ariaLabel"
+  >
+    <span aria-hidden="true">{{ score ?? '—' }}</span>
+  </div>
+</template>