@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/app/components/data/UiBarChart.vue

@@ -0,0 +1,281 @@
+<script lang="ts" setup generic="T extends object">
+import { computed } from 'vue'
+import { formatGroupedNumber } from '../../composables/formatting'
+// Horizontal ranked bar chart. Sorts rows by their numeric value and draws a labelled bar per
+// row, scaled to the largest value — the canonical "top N pages / queries / countries" view.
+// Generic + dependency-free (CSS bars), so any row array drives it.
+
+const {
+  data,
+  labelKey,
+  valueKey,
+  max = 8,
+  sort = true,
+  size = 'sm',
+  density = 'regular',
+  color = 'var(--ui-primary)',
+  format,
+  ceilingKey,
+  truncatedKey,
+} = defineProps<{
+  data: T[]
+  /** Row key for the category label. */
+  labelKey: keyof T & string
+  /** Row key for the numeric value. */
+  valueKey: keyof T & string
+  /**
+   * Row key holding the observation CEILING — how far the row could have gone
+   * had the producer finished (sitemap-expected pages, sampled population).
+   * The span between `valueKey` and this draws hatched: observed, then
+   * unobserved. Without it a short bar reads as "measured and small" when it
+   * often means "we stopped looking".
+   */
+  ceilingKey?: keyof T & string
+  /**
+   * Row key holding a truthy "this value is a floor" flag — the scan hit a row
+   * budget or per-rule cap, so the true count is at or above what is drawn.
+   * The whole bar hatches and the value label renders `≥ n`.
+   */
+  truncatedKey?: keyof T & string
+  /** Max rows to show (top N). Default 8. */
+  max?: number
+  /** Sort largest first. Disable for ordered buckets such as histograms. */
+  sort?: boolean
+  /** Row density. Use md when the chart is the primary comparison. */
+  size?: 'sm' | 'md'
+  /** Compact keeps readable type and condenses to one row when space permits. */
+  density?: 'regular' | 'compact'
+  /** Bar colour (any CSS colour). */
+  color?: string
+  /** Format the value label. */
+  format?: (value: number) => string
+}>()
+
+defineSlots<{
+  /** Replace the text label while preserving the ranked row and exact value. */
+  label: (props: { item: T, label: string, value: number, index: number }) => unknown
+}>()
+
+function num(v: unknown) {
+  const n = typeof v === 'number' ? v : Number(String(v).replace(/^"+|"+$/g, ''))
+  return Number.isFinite(n) ? n : 0
+}
+
+const rows = computed(() => {
+  const values = Array.from(data, item => ({
+    item,
+    label: String(item[labelKey] ?? ''),
+    value: num(item[valueKey]),
+    // A ceiling below the observed value is meaningless, so clamp rather than
+    // draw a negative provisional span.
+    ceiling: ceilingKey ? Math.max(num(item[ceilingKey]), num(item[valueKey])) : 0,
+    truncated: truncatedKey ? Boolean(item[truncatedKey]) : false,
+  }))
+  const sorted = sort ? values.sort((a, b) => b.value - a.value) : values
+  const visible = sorted
+    .slice(0, max)
+  // The ceiling shares the value's scale — a bar whose unobserved span ran past
+  // the peak would otherwise clip and read as complete.
+  const peak = Math.max(1, ...visible.map(r => Math.max(r.value, r.ceiling)))
+  const pct = (v: number) => Math.min(100, Math.max(0, (v / peak) * 100))
+  return visible.map(r => ({
+    ...r,
+    pct: pct(r.value),
+    // Width of the hatched span, in track percent. Zero when the row is a
+    // complete observation.
+    provisionalPct: r.ceiling > r.value ? pct(r.ceiling) - pct(r.value) : 0,
+  }))
+})
+
+function fmt(value: number): string {
+  return format ? format(value) : formatGroupedNumber(value)
+}
+
+// `141 / 188` needs a wider value column than `141`. Widen once for the whole
+// chart so the numbers stay on one right-aligned edge.
+const hasCeiling = computed(() => rows.value.some(r => r.provisionalPct > 0))
+
+/** Truncated counts are floors — say so in the label, not only in the fill. */
+function fmtValue(r: { value: number, truncated: boolean }): string {
+  return r.truncated ? `≥ ${fmt(r.value)}` : fmt(r.value)
+}
+</script>
+
+<template>
+  <ol
+    data-ui="UiBarChart"
+    :data-density="density"
+    class="ui-bar-chart flex flex-col"
+    :class="[
+      size === 'md' ? 'ui-bar-chart--md' : 'ui-bar-chart--sm',
+      hasCeiling ? 'ui-bar-chart--ceiling' : '',
+      density === 'compact' ? 'ui-bar-chart--compact gap-1' : size === 'md' ? 'gap-3' : 'gap-1.5',
+    ]"
+  >
+    <li
+      v-for="(r, i) in rows"
+      :key="`${r.label}:${i}`"
+      class="ui-bar-chart__row"
+    >
+      <span class="ui-bar-chart__label min-w-0 text-muted" :title="r.label">
+        <slot
+          name="label"
+          :item="r.item"
+          :label="r.label"
+          :value="r.value"
+          :index="i"
+        >{{ r.label }}</slot>
+      </span>
+      <div
+        data-bar-track
+        class="ui-bar-chart__track relative overflow-hidden rounded bg-muted/40"
+        :class="density === 'compact' ? 'h-2' : size === 'md' ? 'h-7' : 'h-5'"
+        aria-hidden="true"
+      >
+        <!-- Truncated rows hatch the whole bar: the value itself is a floor, so
+             there is no solid span to separate. Width, not scaleX — a scaled
+             hatch stretches its pitch and stops reading as one texture. -->
+        <div
+          v-if="r.truncated"
+          class="provisional-hatch absolute inset-y-0 left-0 rounded ring-1 ring-inset ring-current/35"
+          :style="{ width: `${r.pct}%`, color }"
+        />
+        <div
+          v-else
+          class="absolute inset-y-0 left-0 w-full origin-left rounded"
+          :style="{ transform: `scaleX(${r.pct / 100})`, background: color, opacity: 0.85 }"
+        />
+        <!-- Observed → unobserved. Starts where the solid span ends. -->
+        <div
+          v-if="r.provisionalPct > 0"
+          class="provisional-hatch absolute inset-y-0 rounded-r ring-1 ring-inset ring-current/30"
+          :style="{ left: `${r.pct}%`, width: `${r.provisionalPct}%`, color }"
+        />
+      </div>
+      <span class="ui-bar-chart__value text-right tabular-nums text-highlighted" :class="size === 'md' ? 'numerals-display' : ''">
+        {{ fmtValue(r) }}
+        <!-- The ceiling reads in the label too, not only in the fill — a hatch
+             survives neither greyscale nor a cropped screenshot. -->
+        <span v-if="r.provisionalPct > 0" class="text-muted">/&nbsp;{{ fmt(r.ceiling) }}</span>
+        <span v-if="r.provisionalPct > 0" class="sr-only">expected, the rest unobserved</span>
+        <span v-else-if="r.truncated" class="sr-only">at least — the scan hit its row budget</span>
+      </span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.ui-bar-chart {
+  container-type: inline-size;
+}
+
+.ui-bar-chart__row {
+  align-items: center;
+  column-gap: 0.75rem;
+  display: grid;
+}
+
+.ui-bar-chart--sm .ui-bar-chart__row {
+  font-size: 0.75rem;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 3.5rem;
+}
+
+.ui-bar-chart--sm.ui-bar-chart--ceiling .ui-bar-chart__row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 5.5rem;
+}
+
+.ui-bar-chart--sm .ui-bar-chart__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-bar-chart--md .ui-bar-chart__row {
+  font-size: 0.875rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  row-gap: 0.5rem;
+}
+
+.ui-bar-chart--md .ui-bar-chart__label {
+  overflow-wrap: anywhere;
+}
+
+.ui-bar-chart--md .ui-bar-chart__track {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.ui-bar-chart__value {
+  min-width: 4rem;
+  white-space: nowrap;
+}
+
+.ui-bar-chart--compact .ui-bar-chart__row {
+  column-gap: 0.5rem;
+  font-size: 0.875rem;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  row-gap: 0.25rem;
+}
+
+.ui-bar-chart--compact .ui-bar-chart__label {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.ui-bar-chart--compact .ui-bar-chart__track {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.ui-bar-chart--compact .ui-bar-chart__value {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+}
+
+@container (min-width: 16rem) {
+  .ui-bar-chart--compact .ui-bar-chart__row {
+    grid-template-columns: minmax(0, 1.15fr) minmax(3rem, 1fr) minmax(3.5rem, max-content);
+    row-gap: 0;
+  }
+
+  .ui-bar-chart--compact .ui-bar-chart__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-bar-chart--compact .ui-bar-chart__track {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .ui-bar-chart--compact .ui-bar-chart__value {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+
+@container (min-width: 36rem) {
+  .ui-bar-chart--md:not(.ui-bar-chart--compact) .ui-bar-chart__row {
+    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) 4rem;
+    row-gap: 0;
+  }
+
+  .ui-bar-chart--md.ui-bar-chart--ceiling:not(.ui-bar-chart--compact) .ui-bar-chart__row {
+    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) 6.5rem;
+  }
+
+  .ui-bar-chart--md:not(.ui-bar-chart--compact) .ui-bar-chart__track {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .ui-bar-chart--md:not(.ui-bar-chart--compact) .ui-bar-chart__value {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+</style>

package/app/components/data/UiChartAnnotationControls.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup generic="K extends string">
+import type { ChartAnnotationControlItem } from '../../utils/chartAnnotations'
+import { computed } from 'vue'
+import { UCheckbox, UiButton, UiIcon, UiPopover } from '#components'
+
+const { items, dense = false } = defineProps<{
+  items: readonly ChartAnnotationControlItem<K>[]
+  /** Compact icon+chevron trigger for a joined toolbar pill (e.g. beside a metric toggle) instead of the standalone quiet button. */
+  dense?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [key: K, enabled: boolean]
+}>()
+
+const hiddenCount = computed(() => items.filter(item => !item.enabled).length)
+const triggerLabel = computed(() => hiddenCount.value
+  ? `Configure chart annotations, ${hiddenCount.value} hidden`
+  : 'Configure chart annotations')
+</script>
+
+<template>
+  <UiPopover :content="{ side: 'bottom', align: 'end' }">
+    <button
+      v-if="dense"
+      type="button"
+      data-annotation-controls
+      :aria-label="triggerLabel"
+      class="cursor-pointer inline-flex items-center justify-center gap-0.5 size-11 sm:size-7 rounded-md transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary"
+      :class="hiddenCount ? 'text-primary' : 'text-dimmed hover:text-default'"
+    >
+      <UiIcon name="flag" class="size-3.5" aria-hidden="true" />
+      <UiIcon name="chevron-down" class="size-2.5" aria-hidden="true" />
+    </button>
+    <UiButton
+      v-else
+      data-annotation-controls
+      purpose="quiet"
+      size="xs"
+      icon="sliders"
+      :aria-label="triggerLabel"
+      :class="hiddenCount ? 'size-11 text-primary bg-primary/10 sm:size-8' : 'size-11 text-muted sm:size-8'"
+    />
+
+    <template #panel>
+      <div data-annotation-controls-panel class="w-64 max-w-[calc(100vw-2rem)] p-3">
+        <p class="px-1 pb-2 text-label">
+          Show on charts
+        </p>
+        <div class="divide-y divide-default" role="group" aria-label="Annotation sources">
+          <label
+            v-for="item in items"
+            :key="item.key"
+            class="min-h-11 grid grid-cols-[1.5rem_minmax(0,1fr)_auto_auto] items-center gap-2 px-1 text-sm text-default cursor-pointer"
+          >
+            <span class="size-6 rounded-full bg-default ring-1 ring-default grid place-items-center text-muted" aria-hidden="true">
+              <UiIcon :name="item.icon" class="size-3.5" />
+            </span>
+            <span class="min-w-0 truncate">{{ item.label }}</span>
+            <span v-if="item.count != null" class="text-mini text-dimmed tabular-nums">
+              {{ item.count }}
+            </span>
+            <UCheckbox
+              :model-value="item.enabled"
+              size="sm"
+              :aria-label="`Show ${item.label}`"
+              @update:model-value="emit('toggle', item.key, $event === true)"
+            />
+          </label>
+        </div>
+      </div>
+    </template>
+  </UiPopover>
+</template>

package/app/components/data/UiChartAnnotations.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { ChartAnnotation, ChartAnnotationOptions } from '../../utils/chartAnnotations'
+import { computed } from 'vue'
+import { UiIcon, UiPopover } from '#components'
+import { safeHttpHref } from '../../../shared/utils/urls'
+import { annotationIconPreview, DEFAULT_ANNOTATION_ICON_LIMIT, resolveAnnotationMarkerGroups } from '../../utils/chartAnnotations'
+
+// Annotation marker overlay: thin vertical lines + interactive dots at specific
+// x-positions, for any time-series chart. Extracted from UiChartFrame so charts
+// that compose unovis directly (CWV, indexing) get the same markers without
+// adopting the whole tooltip/brush frame.
+//
+// Same-day annotations collapse into ONE marker. Every marker opens the same
+// click/keyboard popover, so interactive source and edit actions never depend
+// on hover. Up to three item icons preview the stack beside the marker dot;
+// remaining items collapse into a +N count.
+//
+// Positioning: drop this INSIDE the chart's plot wrap (the element whose box is
+// `position: relative` and whose width == the plot x-span, i.e. a chart drawn
+// with zero horizontal margin). Each marker is `position: absolute` with a CSS
+// left-percentage; `width: 0` so it never affects layout, `-translate-x-1/2` to
+// centre on the anchor. `bottom-9` (36px) clears a standard x-axis label band.
+
+const { annotations, xDomain, options } = defineProps<{
+  /** Event annotations. Empty/undefined renders nothing. */
+  annotations?: ChartAnnotation[]
+  /** Visible x range [min, max] (Date | ISO string | epoch-ms). Required to position. */
+  xDomain?: [Date | string | number, Date | string | number]
+  /** Marker presentation. Icon previews are capped at three by type. */
+  options?: ChartAnnotationOptions
+}>()
+
+const emit = defineEmits<{
+  /** Activation of a marker carrying a user-editable annotation. */
+  edit: [annotation: ChartAnnotation]
+  /** Whether the pointer is currently over a marker trigger. */
+  interactionChange: [active: boolean]
+}>()
+
+const maxIcons = computed(() => options?.maxIcons ?? DEFAULT_ANNOTATION_ICON_LIMIT)
+const markers = computed(() => resolveAnnotationMarkerGroups(annotations, xDomain).map(marker => ({
+  ...marker,
+  iconPreview: annotationIconPreview(marker.items, maxIcons.value),
+})))
+
+function editItem(item: ChartAnnotation, close?: () => void) {
+  emit('edit', item)
+  close?.()
+}
+
+function markerAriaLabel(items: ChartAnnotation[]): string {
+  return items.map(item => item.description ? `${item.label}. ${item.description}` : item.label).join('; ')
+}
+
+function itemIcon(item: ChartAnnotation): string {
+  return item.icon ?? (item.editable ? 'edit' : 'note')
+}
+</script>
+
+<template>
+  <div
+    v-for="m in markers"
+    :key="m.id"
+    class="absolute top-0 bottom-9 z-[5] pointer-events-none w-0"
+    :style="{ left: m.leftPct }"
+  >
+    <!-- Thin 1px vertical marker line centred on the anchor point. -->
+    <div class="absolute inset-y-0 w-px -translate-x-1/2 opacity-50" :class="m.toneClass" aria-hidden="true" />
+    <UiPopover :content="{ side: 'top', align: 'center' }">
+      <button
+        type="button"
+        data-annotation-marker
+        class="group absolute -bottom-4.5 size-11 -translate-x-1/2 pointer-events-auto rounded-full grid place-items-center cursor-pointer active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        :aria-label="markerAriaLabel(m.items)"
+        @pointerenter.stop="emit('interactionChange', true)"
+        @pointerleave.stop="emit('interactionChange', false)"
+        @pointerdown.stop
+        @pointermove.stop
+        @mousemove.stop
+        @click.stop
+      >
+        <span
+          class="size-1.5 transition-transform duration-100 group-hover:scale-125 group-hover:ring-2 group-hover:ring-primary"
+          :class="[m.toneClass, m.editable ? 'rounded-[2px]' : 'rounded-full']"
+          aria-hidden="true"
+        />
+        <span
+          v-if="m.iconPreview.visible.length || m.iconPreview.overflowCount"
+          data-annotation-icon-preview
+          class="absolute left-7 top-1/2 -translate-y-1/2 pointer-events-auto flex items-center -space-x-1 cursor-pointer transition-transform duration-100 group-hover:-translate-y-[55%]"
+          aria-hidden="true"
+        >
+          <span
+            v-for="(item, index) in m.iconPreview.visible"
+            :key="item.id ?? index"
+            data-annotation-icon
+            class="size-4 shrink-0 rounded-full bg-default ring-1 ring-default grid place-items-center text-muted transition-colors duration-100 group-hover:ring-primary group-hover:text-default"
+          >
+            <UiIcon :name="itemIcon(item)" class="size-2.5" />
+          </span>
+          <span
+            v-if="m.iconPreview.overflowCount"
+            data-annotation-overflow
+            class="h-4 min-w-4 rounded-full bg-default px-1 ring-1 ring-default grid place-items-center font-mono text-[9px] leading-none text-muted transition-colors duration-100 group-hover:ring-primary group-hover:text-default"
+          >
+            +{{ m.iconPreview.overflowCount }}
+          </span>
+        </span>
+      </button>
+      <template #panel="{ close }">
+        <div data-annotation-popover-panel class="w-96 max-w-[calc(100vw-2rem)] p-4">
+          <p class="pb-3 text-label">
+            {{ m.count === 1 ? 'Annotation' : `${m.count} annotations` }}
+          </p>
+          <div class="divide-y divide-default">
+            <div
+              v-for="(item, i) in m.items"
+              :key="item.id ?? i"
+              class="grid grid-cols-[1.25rem_minmax(0,1fr)_auto] items-start gap-x-3 gap-y-1 py-3 first:pt-0 last:pb-0"
+            >
+              <span class="mt-0.5 size-5 rounded-full bg-default ring-1 ring-default grid place-items-center text-muted" aria-hidden="true">
+                <UiIcon :name="itemIcon(item)" class="size-3" />
+              </span>
+              <button
+                v-if="item.editable"
+                type="button"
+                class="min-h-11 min-w-0 text-left text-sm font-semibold leading-5 text-default hover:text-primary sm:min-h-0"
+                @click="editItem(item, close)"
+              >
+                {{ item.label }}
+              </button>
+              <p v-else class="min-w-0 text-sm font-semibold leading-5 text-default">
+                {{ item.label }}
+              </p>
+              <a
+                v-if="safeHttpHref(item.href)"
+                :href="safeHttpHref(item.href)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="size-11 -my-3 shrink-0 rounded-md grid place-items-center text-muted hover:text-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary sm:-my-1 sm:size-7"
+                :aria-label="`Open source for ${item.label}`"
+              >
+                <UiIcon name="arrow-up-right" class="size-4" aria-hidden="true" />
+              </a>
+              <p v-if="item.description" class="col-start-2 col-end-4 text-sm leading-5 text-muted">
+                {{ item.description }}
+              </p>
+              <img
+                v-if="item.image"
+                :src="item.image.src"
+                :alt="item.image.alt"
+                loading="lazy"
+                width="1600"
+                height="800"
+                class="col-start-2 col-end-4 mt-1 aspect-[2/1] w-full rounded-md object-cover object-top ring-1 ring-default"
+              >
+            </div>
+          </div>
+        </div>
+      </template>
+    </UiPopover>
+  </div>
+</template>

package/app/components/data/UiChartBrushOverlay.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { ChartBrushRange } from '../../composables/useChartBrush'
+import { AnimatePresence, motion, useReducedMotion } from 'motion-v'
+import { computed } from 'vue'
+import { formatReportingDay } from '../../composables/formatting'
+
+// Brush overlay for time-series charts. Pairs with useChartBrush — pass through
+// `dragRange`, `selectionLeft`, `selectionWidth`. Renders:
+//   1. The translucent selection rect with dashed primary borders
+//   2. Floating start + end date pills (inverted, anchored to rect edges)
+//   3. Centred duration pill (primary, only when rect is wide enough)
+// Day labels are formatted inline (Month Day) — generic enough that no caller
+// has needed to customise so far.
+
+const props = defineProps<{
+  dragRange: ChartBrushRange | null
+  selectionLeft: number
+  selectionWidth: number
+  /** Distance from the wrapper's bottom in px (default 36, leaves room for axis ticks). */
+  bottomOffset?: number
+  /** Minimum width before the duration pill renders (default 56px). */
+  durationThreshold?: number
+}>()
+
+function formatDragDate(iso: string): string {
+  if (!iso)
+    return ''
+  // Reporting-day label — UTC frame so it doesn't drift per viewer (ADR-0082).
+  return formatReportingDay(iso)
+}
+
+// Honour reduced-motion: collapse the entry/exit tween to an instant cut.
+const reduced = useReducedMotion()
+const enterTransition = computed(() => reduced.value ? { duration: 0 } : { duration: 0.15, ease: 'easeOut' as const })
+
+const startLabel = computed(() => formatDragDate(props.dragRange?.startDate ?? ''))
+const endLabel = computed(() => formatDragDate(props.dragRange?.endDate ?? ''))
+const durationLabel = computed(() => {
+  const r = props.dragRange
+  if (!r)
+    return ''
+  const days = r.endIdx - r.startIdx + 1
+  return `${days} day${days === 1 ? '' : 's'}`
+})
+</script>
+
+<template>
+  <AnimatePresence>
+    <motion.div
+      v-if="dragRange"
+      key="chart-brush-rect"
+      :initial="{ opacity: 0 }"
+      :animate="{ opacity: 1 }"
+      :exit="{ opacity: 0 }"
+      :transition="enterTransition"
+      :style="{ left: `${selectionLeft}px`, width: `${selectionWidth}px`, bottom: `${bottomOffset ?? 36}px` }"
+      class="absolute top-0 z-10 pointer-events-none bg-primary/10"
+    />
+    <motion.div
+      v-if="dragRange"
+      key="chart-brush-start"
+      :initial="{ opacity: 0, y: 4 }"
+      :animate="{ opacity: 1, y: 0 }"
+      :exit="{ opacity: 0, y: 4 }"
+      :transition="enterTransition"
+      :style="{ left: `${selectionLeft}px`, bottom: `${bottomOffset ?? 36}px` }"
+      class="absolute z-10 -translate-x-1/2 px-1.5 py-0.5 rounded-full bg-inverted text-inverted text-mini font-medium tabular-nums whitespace-nowrap pointer-events-none shadow-sm"
+    >
+      {{ startLabel }}
+    </motion.div>
+    <motion.div
+      v-if="dragRange"
+      key="chart-brush-end"
+      :initial="{ opacity: 0, y: 4 }"
+      :animate="{ opacity: 1, y: 0 }"
+      :exit="{ opacity: 0, y: 4 }"
+      :transition="enterTransition"
+      :style="{ left: `${selectionLeft + selectionWidth}px`, bottom: `${bottomOffset ?? 36}px` }"
+      class="absolute z-10 -translate-x-1/2 px-1.5 py-0.5 rounded-full bg-inverted text-inverted text-mini font-medium tabular-nums whitespace-nowrap pointer-events-none shadow-sm"
+    >
+      {{ endLabel }}
+    </motion.div>
+    <motion.div
+      v-if="dragRange && selectionWidth > (durationThreshold ?? 56)"
+      key="chart-brush-duration"
+      :initial="{ opacity: 0, scale: 0.9 }"
+      :animate="{ opacity: 1, scale: 1 }"
+      :exit="{ opacity: 0, scale: 0.9 }"
+      :transition="enterTransition"
+      :style="{ left: `${selectionLeft + selectionWidth / 2}px` }"
+      class="absolute top-2 z-10 -translate-x-1/2 px-2 py-0.5 rounded-full bg-primary/90 text-inverted text-label whitespace-nowrap pointer-events-none shadow-sm"
+    >
+      {{ durationLabel }}
+    </motion.div>
+  </AnimatePresence>
+</template>