@humanforest/nuxt-layer 0.1.0

package/packages/charts/src/FBoroughShape.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// A single London borough as a styleable graphic — a glyph, not a chart. Where FLondonMap fills
+// shapes from data, this just hands you one shape, framed to itself, filled with currentColor. So
+// it colours like an icon: `class="text-primary"`, size with a width, add a border in CSS.
+//
+// Deliberately does one thing. No data, no ramp, no labels, no wards, no selection — the moment a
+// caller wants any of those they want FLondonMap. Keeping this presentational is the whole point.
+import { computed } from 'vue';
+import { LONDON_BOROUGHS, indexAreas } from './londonAreas';
+
+const props = withDefaults(
+  defineProps<{
+    /** Which borough: an ONS code (E09…) or a name, matched case-insensitively. */
+    borough: string;
+    /** Breathing room around the shape, as a fraction of its longer side. */
+    pad?: number;
+    /**
+     * Assistive text. With it the graphic is announced as an image; without it it is decorative and
+     * hidden from the accessibility tree — the same call an icon makes.
+     */
+    label?: string;
+  }>(),
+  { pad: 0.04 },
+);
+
+// Boroughs only — the ward set is loaded on demand elsewhere, and a glyph has no reason to pull it.
+const area = computed(() => indexAreas(LONDON_BOROUGHS.areas).get(props.borough.toLowerCase()));
+
+// Framed to the shape's own bounds, from the stored box — no path parsing. An unknown borough draws
+// nothing rather than a stray full-London frame.
+const viewBox = computed(() => {
+  const a = area.value;
+  if (!a) return undefined;
+  const p = Math.max(a.w, a.h) * props.pad;
+  return `${a.x - p} ${a.y - p} ${a.w + p * 2} ${a.h + p * 2}`;
+});
+</script>
+
+<template>
+  <svg
+    v-if="area"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+    :role="label ? 'img' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  >
+    <!-- currentColor so a text-* class paints the fill; non-scaling-stroke keeps any border the
+         caller adds one hairline whatever the rendered size. -->
+    <path :d="area.d" fill="currentColor" vector-effect="non-scaling-stroke" />
+  </svg>
+</template>

package/packages/charts/src/FCalendarGrid.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts" generic="D extends Record<string, unknown>">
+// Days as cells: weeks are columns, weekdays are rows. A year of ride volume, or a year of one
+// station's daily state. Colour resolution is useCellScale's; this component owns the calendar.
+//
+// The grid is built from the date window, not from the data, so a day with no datum is a real empty
+// cell in the right place rather than a missing column. Days are bucketed by local calendar date —
+// a timestamp is floored to its day before lookup, so two events on one day land together.
+import { computed, ref } from 'vue';
+import type { BulletLegendItemInterface } from '@unovis/ts';
+import { useCellScale, CELL_EMPTY_COLOR, type SequentialRamp } from './useCellScale';
+import { CELL_SIZES, orElse, type CellSize } from './cellSize';
+import FCellLegend from './FCellLegend.vue';
+
+const props = withDefaults(
+  defineProps<{
+    data: D[];
+    /** The day a datum belongs to. Any Date-parseable value. */
+    date: (d: D) => Date | number | string;
+    mode?: 'state' | 'intensity';
+    states?: Record<string, BulletLegendItemInterface>;
+    state?: (d: D) => string | null | undefined;
+    value?: (d: D) => number | null | undefined;
+    ramp?: SequentialRamp;
+    /** Intensity domain. Two grids compared side by side must both set it. */
+    domain?: [number, number];
+    steps?: number;
+    /** Window bounds. Default: the first and last dates present in the data. */
+    start?: Date;
+    end?: Date;
+    /** 0 = weeks start Sunday (default), 1 = Monday. */
+    weekStart?: 0 | 1;
+    /** Size step. Sets the cell dimensions, and whether labels, legend and tooltips default on:
+     *  xs and sm are too small to carry chrome, so it defaults off there. Any explicit prop wins. */
+    size?: CellSize;
+    /** Forces the size step's chrome decision either way — labels, legend and tooltips together.
+     *  `monthLabels`, `weekdayLabels` and `legend` still win over it individually. */
+    chrome?: boolean;
+    cellSize?: number;
+    cellGap?: number;
+    radius?: number;
+    monthLabels?: boolean;
+    /** Rule along the month boundary. It steps day by day, so a month opening midweek is cut where
+     *  it actually opens rather than at the column edge. */
+    monthSeparators?: boolean;
+    weekdayLabels?: boolean;
+    legend?: boolean;
+    /** Hover and focus text. Given one, cells become focusable buttons and get the house bubble.
+     *  Suppressed at xs and sm, where the target is too small to hit reliably. */
+    tooltip?: (d: D | undefined, date: Date) => string;
+    ariaLabel?: string;
+  }>(),
+  {
+    mode: 'intensity',
+    weekStart: 0,
+    size: 'md',
+    monthSeparators: false,
+    steps: 5,
+    /* Vue casts an ABSENT Boolean-typed prop to false, so without these the size step could never
+       switch chrome on: `orElse` would read that false as a deliberate "off" at every size. An
+       explicit undefined default is what keeps "not passed" distinguishable from "passed false". */
+    monthLabels: undefined,
+    weekdayLabels: undefined,
+    legend: undefined,
+    chrome: undefined,
+  },
+);
+
+// Three tiers, narrowest first: an individual prop beats `chrome`, which beats the size step.
+const spec = computed(() => CELL_SIZES[props.size]);
+const cellSize = computed(() => orElse(props.cellSize, spec.value.cell));
+const cellGap = computed(() => orElse(props.cellGap, spec.value.gap));
+const radius = computed(() => orElse(props.radius, spec.value.radius));
+const showChrome = computed(() => orElse(props.chrome, spec.value.chrome));
+const showMonthLabels = computed(() => orElse(props.monthLabels, showChrome.value));
+const showWeekdayLabels = computed(() => orElse(props.weekdayLabels, showChrome.value));
+const showLegend = computed(() => orElse(props.legend, showChrome.value));
+const interactive = computed(() => !!props.tooltip && showChrome.value);
+
+/** Local midnight — the calendar day is what a reader means, not the UTC instant. */
+const floorDay = (v: Date | number | string): Date => {
+  const d = new Date(v);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+};
+const keyOf = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+
+// Last datum wins for a day. Summing would silently change the reading into something the caller
+// never asked for; duplicates are the caller's to resolve.
+const byDay = computed(() => {
+  const m = new Map<string, D>();
+  for (const d of props.data) m.set(keyOf(floorDay(props.date(d))), d);
+  return m;
+});
+
+const bounds = computed<[Date, Date]>(() => {
+  if (props.start && props.end) return [floorDay(props.start), floorDay(props.end)];
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const d of props.data) {
+    const t = floorDay(props.date(d)).getTime();
+    if (t < lo) lo = t;
+    if (t > hi) hi = t;
+  }
+  const today = floorDay(new Date());
+  const start = props.start ?? (Number.isFinite(lo) ? new Date(lo) : today);
+  const end = props.end ?? (Number.isFinite(hi) ? new Date(hi) : today);
+  return [floorDay(start), floorDay(end)];
+});
+
+/** Days back to the week boundary, so column 0 is a full week and rows line up with weekdays. */
+const leadingOffset = (d: Date) => (d.getDay() - props.weekStart + 7) % 7;
+
+const weeks = computed<{ date: Date; inRange: boolean }[][]>(() => {
+  const [start, end] = bounds.value;
+  const cursor = new Date(start);
+  cursor.setDate(cursor.getDate() - leadingOffset(start));
+  const out: { date: Date; inRange: boolean }[][] = [];
+  while (cursor <= end) {
+    const week: { date: Date; inRange: boolean }[] = [];
+    for (let i = 0; i < 7; i++) {
+      const day = new Date(cursor);
+      week.push({ date: day, inRange: day >= start && day <= end });
+      // setDate, not +86400000: a clocks-back day is 25 hours, so adding a fixed day and
+      // re-flooring lands on the same midnight and the walk never terminates.
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    out.push(week);
+  }
+  return out;
+});
+
+const scale = useCellScale<D>({
+  mode: props.mode,
+  states: computed(() => props.states),
+  ramp: computed(() => props.ramp ?? ('forest' as SequentialRamp)),
+  domain: computed(() => props.domain),
+  steps: computed(() => props.steps),
+  data: computed(() => props.data),
+  value: props.value,
+  state: props.state,
+});
+
+const datumFor = (d: Date) => byDay.value.get(keyOf(d));
+const fillFor = (cell: { date: Date; inRange: boolean }) =>
+  cell.inRange ? scale.colorOf(datumFor(cell.date) ?? null) : 'transparent';
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+/** Mon, Wed, Fri only — labelling all seven crowds an 11px row. */
+const weekdayRows = computed(() =>
+  Array.from({ length: 7 }, (_, r) => {
+    const dayIndex = (r + props.weekStart) % 7;
+    return [1, 3, 5].includes(dayIndex) ? WEEKDAYS[dayIndex] : '';
+  }),
+);
+
+const monthLabel = (d: Date) => d.toLocaleDateString('en-GB', { month: 'short' });
+
+const pitch = computed(() => cellSize.value + cellGap.value);
+const gridWidth = computed(() => weeks.value.length * pitch.value - cellGap.value);
+const gridHeight = computed(() => 7 * pitch.value - cellGap.value);
+
+// Where each month opens, in grid coordinates. One source for both the label and the rule: the
+// label used to be placed on the week whose FIRST day fell in the new month, which puts it up to
+// six days late whenever a month opens midweek.
+const monthStarts = computed(() => {
+  const out: { wi: number; di: number; label: string; first: boolean }[] = [];
+  let prevMonth: number | null = null;
+  weeks.value.forEach((week, wi) => {
+    week.forEach((cell, di) => {
+      if (!cell.inRange) return;
+      const m = cell.date.getMonth();
+      if (prevMonth === null) out.push({ wi, di, label: monthLabel(cell.date), first: true });
+      else if (m !== prevMonth) out.push({ wi, di, label: monthLabel(cell.date), first: false });
+      prevMonth = m;
+    });
+  });
+  return out;
+});
+
+// The boundary between two months, as one continuous path each.
+//
+// Time runs down a column then into the next, so a month that opens midweek does NOT split its
+// column into left and right: the days above the opening row in every LATER column already belong
+// to the new month. The frontier is therefore a Z — down the right edge of the opening column to
+// the opening row, one column left, then down to the bottom — not a per-cell outline. A month
+// opening on the week-start row degenerates to a single straight vertical.
+//
+// Coordinates land on gap midpoints (w * pitch - cellGap/2), so the rule sits centred between two
+// cells rather than against either one, and one path per boundary welds its own corners.
+const monthPaths = computed(() => {
+  if (!props.monthSeparators) return '';
+  const half = cellGap.value / 2;
+  return monthStarts.value
+    .filter((m) => !m.first)
+    .map(({ wi, di }) => {
+      const xLeft = wi * pitch.value - half;
+      if (di === 0) return `M${xLeft},0V${gridHeight.value}`;
+      const xRight = (wi + 1) * pitch.value - half;
+      const yCut = di * pitch.value - half;
+      return `M${xRight},0V${yCut}H${xLeft}V${gridHeight.value}`;
+    })
+    .join(' ');
+});
+
+const dateLabel = (d: Date) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+const labelFor = (cell: { date: Date }) => props.tooltip?.(datumFor(cell.date), cell.date) ?? '';
+
+const gridLabel = computed(() => {
+  const [start, end] = bounds.value;
+  return props.ariaLabel ?? `Daily values from ${dateLabel(start)} to ${dateLabel(end)}`;
+});
+
+// One UTooltip for the grid, re-anchored to the hovered cell through `reference`. A year is 371
+// cells; a tooltip root per cell would be 371 of them, so the anchor moves instead.
+//
+// `tipOpen` owns visibility; the text and the anchor are left alone on close. Clearing them
+// together with the flag emptied the bubble mid-exit-animation and dropped the anchor back to the
+// trigger, so leaving a segment flashed a blank pill at the container's centre for ~80ms.
+//
+// Anchored to the cell, not the pointer: a keyboard focus has no cursor to follow, and a bubble
+// that tracks the pointer inside an 11px target only jitters.
+const tip = ref<{ text: string; el: Element | null }>({ text: '', el: null });
+const tipOpen = ref(false);
+const showTip = (event: Event, text: string) => {
+  tip.value = { text, el: event.currentTarget as Element };
+  tipOpen.value = true;
+};
+const hideTip = () => {
+  tipOpen.value = false;
+};
+
+const hasEmpty = computed(() =>
+  weeks.value.some((w) => w.some((c) => c.inRange && scale.isEmpty(datumFor(c.date) ?? null))),
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-3">
+    <div class="overflow-x-auto">
+      <div class="flex" :style="{ gap: `${cellGap}px` }">
+        <!-- Weekday gutter. justify-end pins the rows to the grid's bottom, so they line up
+             whether or not a month-label row sits above. -->
+        <div
+          v-if="showWeekdayLabels"
+          class="flex shrink-0 flex-col justify-end"
+          :style="{ gap: `${cellGap}px` }"
+        >
+          <span
+            v-for="(w, r) in weekdayRows"
+            :key="r"
+            class="type-caption flex items-center text-dimmed"
+            :style="{ height: `${cellSize}px`, lineHeight: `${cellSize}px` }"
+          >{{ w }}</span>
+        </div>
+
+        <div class="flex flex-col" :style="{ gap: `${cellGap}px` }">
+          <!-- Labels sit in their own row, positioned by column rather than living inside one, so
+               a long month name cannot widen its week and shove the cells apart. -->
+          <div
+            v-if="showMonthLabels"
+            class="relative h-5"
+            :style="{ width: `${gridWidth}px` }"
+            aria-hidden="true"
+          >
+            <span
+              v-for="m in monthStarts"
+              :key="`${m.wi}-${m.label}`"
+              class="type-caption absolute top-0 whitespace-nowrap text-dimmed"
+              :style="{ left: `${m.wi * pitch}px` }"
+            >{{ m.label }}</span>
+          </div>
+
+          <UTooltip :text="tip.text" :reference="tip.el" :open="tipOpen">
+          <div class="relative" :role="interactive ? 'group' : 'img'" :aria-label="gridLabel">
+            <div class="flex" :style="{ gap: `${cellGap}px` }">
+              <div v-for="(week, wi) in weeks" :key="wi" class="flex flex-col" :style="{ gap: `${cellGap}px` }">
+                <component
+                  :is="interactive && cell.inRange ? 'button' : 'div'"
+                  v-for="(cell, di) in week"
+                  :key="di"
+                  :type="interactive && cell.inRange ? 'button' : undefined"
+                  class="transition-[filter] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]"
+                  :class="interactive && cell.inRange ? 'cursor-pointer hover:brightness-110' : ''"
+                  :style="{
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
+                    borderRadius: `${radius}px`,
+                    background: fillFor(cell),
+                  }"
+                  :aria-label="interactive && cell.inRange ? labelFor(cell) : undefined"
+                  :aria-hidden="interactive && cell.inRange ? undefined : 'true'"
+                  @mouseenter="interactive && cell.inRange && showTip($event, labelFor(cell))"
+                  @mouseleave="hideTip"
+                  @focus="interactive && cell.inRange && showTip($event, labelFor(cell))"
+                  @blur="hideTip"
+                />
+              </div>
+            </div>
+
+            <!-- One path for every boundary, over the cells. pointer-events none so it never takes
+                 a hover from the cell beneath; crispEdges so a 1px rule stays 1px off-integer.
+                 Dimmed text rather than a border token: the border tokens sit around 1.5:1 on the
+                 page and vanish between saturated cells. -->
+
+            <svg
+              v-if="monthSeparators"
+              class="pointer-events-none absolute left-0 top-0 overflow-visible"
+              :width="gridWidth"
+              :height="gridHeight"
+              aria-hidden="true"
+            >
+              <path
+                :d="monthPaths"
+                fill="none"
+                stroke-width="1"
+                shape-rendering="crispEdges"
+                style="stroke: var(--ui-text-dimmed)"
+              />
+            </svg>
+          </div>
+          </UTooltip>
+        </div>
+      </div>
+    </div>
+
+    <FCellLegend
+      v-if="showLegend"
+      :legend="scale.legend.value"
+      :show-empty="hasEmpty"
+      :empty-color="CELL_EMPTY_COLOR"
+    />
+  </div>
+</template>

package/packages/charts/src/FCellLegend.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// The legend both cell components share. Two shapes from one contract: named entries for state
+// mode, an unnamed Less → More ramp for intensity.
+//
+// The empty swatch appears only when the data actually has a gap. A legend that always advertised
+// "no data" would teach readers to look for a category that is usually absent.
+import type { CellLegend } from './useCellScale';
+
+withDefaults(
+  defineProps<{
+    legend: CellLegend;
+    showEmpty?: boolean;
+    emptyColor?: string;
+  }>(),
+  { showEmpty: false, emptyColor: 'var(--ui-bg-accented)' },
+);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+    <template v-if="legend.mode === 'state'">
+      <span v-for="e in legend.entries" :key="e.key" class="flex items-center gap-1.5">
+        <span
+          class="size-2.5 rounded-full"
+          :style="{ background: e.swatch }"
+          aria-hidden="true"
+        />
+        <span class="type-caption text-default">{{ e.name }}</span>
+      </span>
+    </template>
+
+    <span v-else class="flex items-center gap-1.5">
+      <span class="type-caption text-dimmed">{{ legend.bounds?.[0] }}</span>
+      <span class="flex gap-0.5" aria-hidden="true">
+        <span
+          v-for="e in legend.entries"
+          :key="e.key"
+          class="size-2.5 rounded-[2px]"
+          :style="{ background: e.swatch }"
+        />
+      </span>
+      <span class="type-caption text-dimmed">{{ legend.bounds?.[1] }}</span>
+    </span>
+
+    <span v-if="showEmpty" class="flex items-center gap-1.5">
+      <span
+        class="size-2.5 rounded-[2px] ring-1 ring-[var(--ui-border)] ring-inset"
+        :style="{ background: emptyColor }"
+        aria-hidden="true"
+      />
+      <span class="type-caption text-dimmed">No data</span>
+    </span>
+  </div>
+</template>

package/packages/charts/src/FChartFrame.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts" generic="Datum extends Record<string, unknown>">
+// The XY frame. Doctrine: wrap by rot-risk, not chart type — never wrap mark props; wrap only
+// ceremony (container, axes, legend, tooltip/crosshair, repaint). The mark arrives through the
+// #mark slot as real @unovis/vue components, so mark props are Unovis' own ConfigInterface,
+// never re-enumerated here. Every library-shaped surface passes through as a typed
+// Partial<…ConfigInterface> object prop whose runtime is a blind spread over the house preset.
+import { computed, ref } from 'vue';
+import { VisXYContainer, VisAxis, VisCrosshair, VisTooltip, VisBulletLegend } from '@unovis/vue';
+import { Position } from '@unovis/ts';
+import type {
+  AxisConfigInterface,
+  BulletLegendItemInterface,
+  TooltipConfigInterface,
+  XYContainerConfigInterface,
+} from '@unovis/ts';
+// Relative file imports (not the package barrel): the barrel exports this component, and a
+// self-import through it would create a module cycle.
+import { fromCategories } from './fromCategories';
+import { forestTooltip, type ForestTooltipOptions } from './forestTooltip';
+import { motionDuration } from './motionDuration';
+import {
+  axisX as axisXPreset,
+  axisY as axisYPreset,
+  tooltipDefaults,
+  tooltipContainer,
+} from './presets';
+import { useThemeVersion } from './useThemeVersion';
+import { useTooltipSnap, nextTipId } from './snapTooltip';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    data: Datum[];
+    /** Palette categories (from useChartPalette) — series order, names, colours. */
+    categories: Record<string, BulletLegendItemInterface>;
+    height?: number;
+    /** Numeric field to plot on x (e.g. a timestamp). Default: the row index. */
+    xKey?: keyof Datum & string;
+    /** Blind spread onto VisXYContainer — any XYContainerConfigInterface key, presets last-wins. */
+    container?: Partial<XYContainerConfigInterface<Datum>>;
+    /** Merged over the house x-axis preset. `false` removes the axis. */
+    axisX?: Partial<AxisConfigInterface<Datum>> | false;
+    axisY?: Partial<AxisConfigInterface<Datum>> | false;
+    /** Merged over the house tooltip preset. `false` removes tooltip AND crosshair. */
+    tooltip?: Partial<TooltipConfigInterface> | false;
+    /** Let the panel track the pointer instead of snapping to the datum. Off by default: on a
+     *  crosshair chart the panel locks to the crosshair's x at the top of the plot, so it steps
+     *  between rows and holds still in between; without a crosshair it anchors to the hovered
+     *  mark. Turn it on for a free-floating panel. */
+    followCursor?: boolean;
+    /* The `| false` unions above compile to runtime type [Object, Boolean], and Vue casts an
+       ABSENT Boolean-typed prop to `false` unless it has a default — so each carries an empty
+       object default below; without it an unpassed axis or tooltip suppresses itself. */
+    /** `false` keeps the tooltip and drops the crosshair. For marks with no continuous value at
+     *  an x — a timeline row carries a span and a scatter is a cloud, so there is nothing to snap
+     *  to and the tooltip fires from the mark's own `triggers` instead. */
+    crosshair?: boolean;
+    /** Title/value formatting for the house crosshair template. */
+    format?: ForestTooltipOptions<Datum>;
+    /** The mark runs horizontally (set `orientation` on the mark itself). The frame's index
+     *  machinery — tick pinning, the edge gutter, grid-line defaults — follows the category
+     *  dimension onto y; formatters stay yours to place per axis. */
+    horizontal?: boolean;
+    legend?: boolean;
+    /** Where the legend sits. `bottom` (default) renders centred under the chart, caption-style;
+     *  `top` renders start-aligned above it, editorial-style. */
+    legendPosition?: 'top' | 'bottom';
+    /** Animation ms for the whole container (marks + axes). Default: motionDuration('slow'). */
+    duration?: number;
+    /** Extra signals that must remount the chart (theme flips and palette identity are automatic). */
+    repaintOn?: unknown[];
+  }>(),
+  {
+    height: 280,
+    horizontal: false,
+    crosshair: true,
+    followCursor: false,
+    legend: true,
+    legendPosition: 'bottom',
+    repaintOn: () => [],
+    axisX: () => ({}),
+    axisY: () => ({}),
+    tooltip: () => ({}),
+  },
+);
+
+defineSlots<{
+  mark(p: {
+    data: Datum[];
+    x: (d: Datum, i: number) => number;
+    y: Array<(d: Datum) => number | null | undefined>;
+    colors: string[];
+  }): unknown;
+}>();
+
+const acc = computed(() => fromCategories<Datum>(props.categories, props.data, props.xKey));
+
+// Index charts get tick positions at the row indices — without this the axis invents fractional
+// ticks between rows. The pin sits on the category axis: x normally, y when `horizontal` (Unovis
+// swaps which scale carries the index). Grid lines follow the value axis the same way. An xKey
+// chart scales its own axis.
+const indexTicks = computed(() =>
+  props.xKey ? undefined : { tickValues: props.data.map((_, i) => i) },
+);
+const xAxisConfig = computed<Partial<AxisConfigInterface<Datum>>>(() => ({
+  ...axisXPreset,
+  ...(props.horizontal ? { gridLine: true } : indexTicks.value),
+  ...(props.axisX || {}),
+}));
+const yAxisConfig = computed<Partial<AxisConfigInterface<Datum>>>(() => ({
+  ...axisYPreset,
+  ...(props.horizontal ? { gridLine: false, ...indexTicks.value } : {}),
+  ...(props.axisY || {}),
+}));
+
+// Index charts also get half a row of outer gutter: the category domain extends past the first
+// and last rows so edge marks (bars especially) stop sitting flush against the plot edges. Ticks
+// stay on the row indices, and the gutter follows the category dimension under `horizontal`. An
+// xKey chart plots a real field and keeps the library's exact-extent default; an explicit
+// `container` domain overrides this like any other container key.
+const containerConfig = computed<Partial<XYContainerConfigInterface<Datum>>>(() => {
+  const gutter: [number, number] = [-0.5, props.data.length - 0.5];
+  return {
+    ...(props.xKey || props.data.length === 0
+      ? {}
+      : props.horizontal
+        ? { yDomain: gutter }
+        : { xDomain: gutter }),
+    ...(props.container || {}),
+  };
+});
+
+const tipFn = computed(() => forestTooltip<Datum>(props.categories, props.format));
+
+// The panel is snapped to the datum by useTooltipSnap below, which rewrites its position after
+// Unovis places it. What Unovis is configured to do here is therefore only what shows when the
+// snap stands down (`followCursor`), plus the show/hide and content it always owns: pointer
+// tracking as the base, and Auto placement so Crosshair's own left/right flip is free to run.
+// The `data-forest-tip` attribute is how the snap finds this frame's panel among body's children,
+// so it is merged last — a call site's own attributes are kept, but cannot displace the hook.
+const tipId = nextTipId();
+const tooltipConfig = computed<Partial<TooltipConfigInterface>>(() => ({
+  ...tooltipDefaults,
+  container: tooltipContainer(),
+  followCursor: true,
+  ...(props.crosshair ? { horizontalPlacement: Position.Auto } : {}),
+  ...(props.tooltip || {}),
+  attributes: { ...(props.tooltip || {}).attributes, 'data-forest-tip': tipId },
+}));
+
+const rootEl = ref<HTMLElement>();
+useTooltipSnap(rootEl, tipId, props.crosshair ? 'crosshair' : 'mark', () => !props.followCursor);
+
+// Charts animate on the motion tokens (reduced motion resolves to 0); container duration
+// propagates to marks and axes. Override via the prop or container.duration.
+const resolvedDuration = computed(() => props.duration ?? motionDuration());
+
+// Theme flips and palette identity changes both remount: Unovis caches resolved colours on mount.
+const themeVersion = useThemeVersion();
+const repaintKey = computed(() =>
+  [themeVersion.value, acc.value.colors.join('|'), ...props.repaintOn].map(String).join('-'),
+);
+</script>
+
+<template>
+  <div ref="rootEl" style="display: flex; flex-direction: column; gap: 0.75rem">
+    <VisXYContainer
+      :key="repaintKey"
+      :data="data"
+      :height="height"
+      :duration="resolvedDuration"
+      v-bind="{ ...containerConfig, ...$attrs }"
+    >
+      <slot name="mark" :data="data" :x="acc.xAccessor" :y="acc.yAccessors" :colors="acc.colors" />
+      <VisAxis v-if="axisX !== false" v-bind="xAxisConfig" />
+      <VisAxis v-if="axisY !== false" v-bind="yAxisConfig" />
+      <template v-if="tooltip !== false">
+        <!-- duration 0 is deliberate, and load-bearing twice over. Unovis animates the crosshair
+             line's x through a transition, so it eases toward the row the pointer just snapped to
+             — which reads as lag on the one element that should track the pointer exactly, and
+             leaves the line's real position mid-flight while the snap is reading it as the
+             tooltip's anchor. Easing it would put the panel on the wrong side of the plot. -->
+        <VisCrosshair
+          v-if="crosshair"
+          :x="acc.xAccessor"
+          :y="acc.yAccessors"
+          :color="acc.colors"
+          :template="tipFn"
+          :duration="0"
+        />
+        <VisTooltip v-bind="tooltipConfig" />
+      </template>
+    </VisXYContainer>
+    <VisBulletLegend
+      v-if="legend"
+      :items="acc.legendItems"
+      :style="legendPosition === 'top' ? { order: -1, alignSelf: 'flex-start' } : { alignSelf: 'center' }"
+    />
+  </div>
+</template>