@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Sortable/index.ts

@@ -0,0 +1,13 @@
+export {
+  Sortable,
+  SortableHandle,
+  SortableItem,
+  SortableItemContext,
+  type SortableProps,
+  type SortableItemProps,
+  type SortableHandleProps,
+  type SortableReorderEvent,
+  type SortableItemContextValue,
+  type SortableArrangement,
+} from './Sortable';
+export type { CollapseBreakpoint } from '../_internal/collapse';

package/src/components/SortableGroup/SortableGroup.module.scss

@@ -0,0 +1,23 @@
+@use '../Sortable/Sortable.tokens';
+
+.list {
+  // UA reset for <ol> default margin/padding.
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default margin
+  margin: 0;
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default padding
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sortable-list-gap);
+}
+
+// Overlay chrome — mirrors <Sortable>'s lifted-item visual (#165).
+.item {
+  position: relative;
+}
+
+.overlayItem {
+  box-shadow: var(--sortable-item-shadow-dragging);
+  cursor: grabbing;
+}

package/src/components/SortableGroup/SortableGroup.tsx

@@ -0,0 +1,315 @@
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import {
+  SortableItem,
+  SortableItemContext,
+  type SortableItemContextValue,
+  type SortableItemProps,
+} from '../Sortable';
+import { containerAwareClosestCorners } from '../Sortable/containerAwareCollision';
+import {
+  containerName,
+  sortableTarget,
+  useDragAccessibility,
+  type DescribeDragTarget,
+} from '../_internal/dragAnnouncements';
+import { useTranslation } from '../../i18n';
+import { type SortableMoveEvent } from './moveSortableItem';
+import styles from './SortableGroup.module.scss';
+
+type Id = string | number;
+
+// SortableMoveEvent is defined in ./moveSortableItem (Task 1) and re-exported by
+// index.ts — keeps the helper module self-contained.
+
+export interface SortableGroupProps {
+  /**
+   * Fires on every cross-container handoff (during the drag) AND on the final
+   * drop. Apply it to your controlled per-container state — see `moveSortableItem`.
+   */
+  onMove?: (event: SortableMoveEvent) => void;
+  /** The `<SortableGroup.Container>` lists. */
+  children: ReactNode;
+}
+
+export interface SortableGroupContainerProps extends Omit<HTMLAttributes<HTMLOListElement>, 'id'> {
+  /** Stable container id (the `container` reported in `SortableMoveEvent`). */
+  id: Id;
+  /** Ordered item ids in THIS container — the controlled source of truth. */
+  items: Id[];
+  /** `<Sortable.Item>`s for the ids in `items`. */
+  children: ReactNode;
+}
+
+interface ContainerRecord {
+  items: Id[];
+  itemContent: Map<Id, ReactNode>;
+  /** The container's `aria-label`, used to name it in drag announcements. */
+  label?: string;
+}
+interface GroupContextValue {
+  register: (containerId: Id, rec: ContainerRecord) => void;
+  unregister: (containerId: Id) => void;
+}
+const GroupContext = createContext<GroupContextValue | null>(null);
+
+// Inert context for the overlay clone (mirrors Sortable's internal
+// OVERLAY_ITEM_CONTEXT) — the overlay is a static visual; a Handle inside it
+// must render without wiring real drag listeners.
+const OVERLAY_ITEM_CONTEXT: SortableItemContextValue = {
+  listeners: undefined,
+  attributes: {} as SortableItemContextValue['attributes'],
+  setActivatorNodeRef: () => {},
+};
+
+/** Build an id → content map from a container's `<Sortable.Item>` children. */
+function itemContentMap(children: ReactNode): Map<Id, ReactNode> {
+  const map = new Map<Id, ReactNode>();
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === SortableItem) {
+      const props = child.props as SortableItemProps;
+      map.set(props.id, props.children);
+    }
+  });
+  return map;
+}
+
+/**
+ * Multi-container drag-to-sort: drag items within a list and between lists.
+ * @see docs/components/SortableGroup.md
+ */
+const SortableGroupRoot = function SortableGroup({ onMove, children }: SortableGroupProps) {
+  const t = useTranslation();
+  const [activeId, setActiveId] = useState<Id | null>(null);
+  const registryRef = useRef<Map<Id, ContainerRecord>>(new Map());
+  const [overlayVersion, setOverlayVersion] = useState(0);
+
+  const register = useCallback((containerId: Id, rec: ContainerRecord) => {
+    registryRef.current.set(containerId, rec);
+    setOverlayVersion((v) => v + 1);
+  }, []);
+  const unregister = useCallback((containerId: Id) => {
+    registryRef.current.delete(containerId);
+    setOverlayVersion((v) => v + 1);
+  }, []);
+  const ctx = useMemo<GroupContextValue>(() => ({ register, unregister }), [register, unregister]);
+
+  const containerOf = useCallback((id: Id | null | undefined): Id | undefined => {
+    if (id == null) return undefined;
+    for (const [cid, rec] of registryRef.current) if (rec.items.includes(id)) return cid;
+    return undefined;
+  }, []);
+  // over.id is either an item (→ its container) or a container droppable id (→ itself).
+  const resolveContainer = useCallback(
+    (id: Id): Id | undefined => containerOf(id) ?? (registryRef.current.has(id) ? id : undefined),
+    [containerOf],
+  );
+  const indexIn = useCallback((containerId: Id | undefined, id: Id): number => {
+    if (containerId == null) return -1;
+    return registryRef.current.get(containerId)?.items.indexOf(id) ?? -1;
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragStart = (e: DragStartEvent) => setActiveId(e.active.id as Id);
+
+  const handleDragOver = (e: DragOverEvent) => {
+    const { active, over } = e;
+    if (!over) return;
+    const id = active.id as Id;
+    const overId = over.id as Id;
+    const fromC = containerOf(id);
+    const toC = resolveContainer(overId);
+    if (!fromC || !toC || fromC === toC) return; // within-container handled in dragEnd
+    const overItems = registryRef.current.get(toC)?.items ?? [];
+    const overIndex = overItems.indexOf(overId);
+    let toIndex: number;
+    if (overIndex >= 0) {
+      // Insert after the over item once the dragged item's MIDPOINT passes the
+      // over item's midpoint (matches Kanban's cross-container heuristic).
+      const activeRect = active.rect.current.translated;
+      const overRect = over.rect;
+      const isBelow =
+        activeRect != null && overRect != null
+          ? activeRect.top + activeRect.height / 2 > overRect.top + overRect.height / 2
+          : false;
+      toIndex = overIndex + (isBelow ? 1 : 0);
+    } else {
+      toIndex = overItems.length; // hovered the (possibly empty) container itself
+    }
+    onMove?.({
+      id,
+      from: { container: fromC, index: indexIn(fromC, id) },
+      to: { container: toC, index: toIndex },
+    });
+  };
+
+  const handleDragEnd = (e: DragEndEvent) => {
+    const { active, over } = e;
+    setActiveId(null);
+    if (!over) return;
+    const id = active.id as Id;
+    const overId = over.id as Id;
+    if (id === overId) return;
+    const fromC = containerOf(id);
+    const toC = resolveContainer(overId);
+    if (!fromC || !toC || fromC !== toC) return; // cross-container already handled in dragOver
+    const from = indexIn(fromC, id);
+    const to = indexIn(toC, overId);
+    if (from < 0 || to < 0 || from === to) return;
+    onMove?.({ id, from: { container: fromC, index: from }, to: { container: toC, index: to } });
+  };
+
+  const handleDragCancel = () => setActiveId(null);
+
+  // Localized announcements (Hard rule 9, #390). Items name themselves via the
+  // label `<Sortable.Item>` publishes; a container names itself with its
+  // `aria-label` / `aria-labelledby`, falling back to its 1-based registration
+  // order.
+  const describeDrag: DescribeDragTarget = (entry, activeId) => {
+    if (!entry) return null;
+    const reg = registryRef.current;
+    const id = entry.id as Id;
+    const cid = reg.has(id) ? id : containerOf(id);
+    const rec = cid == null ? undefined : reg.get(cid);
+    if (cid == null || !rec) return null;
+    // `||`, not `??`. NOT a live defect: `rec.label` is whatever
+    // `containerName` returned, and that helper already rejects a blank
+    // (`label.trim()`), so it is `string | undefined` and never `''`. The
+    // operator is aligned anyway — `||` is never wrong for a name fallback,
+    // and leaving `??` here made a reader re-derive the guarantee two files
+    // away before they could tell this apart from #535's real sites.
+    const container =
+      rec.label ||
+      t('drag.unnamedContainer', { index: [...reg.keys()].indexOf(cid) + 1, total: reg.size });
+    const base = sortableTarget(entry);
+    // An item: dnd-kit's own sortable data already carries the slot.
+    if (!reg.has(id)) return base && { ...base, container };
+    // The container itself (empty list, or the space below the items): the item
+    // keeps its slot if a cross-container handoff already seated it here, and
+    // is otherwise counted as one more at the end.
+    const seated = rec.items.indexOf(activeId as Id);
+    return seated >= 0
+      ? { index: seated + 1, total: rec.items.length, container }
+      : { index: rec.items.length + 1, total: rec.items.length + 1, container };
+  };
+  const accessibility = useDragAccessibility(describeDrag);
+
+  const overlayContent = useMemo<ReactNode>(() => {
+    void overlayVersion; // re-read the registry after container (re)registrations
+    if (activeId == null) return null;
+    const cid = containerOf(activeId);
+    return cid == null ? null : (registryRef.current.get(cid)?.itemContent.get(activeId) ?? null);
+  }, [activeId, overlayVersion, containerOf]);
+
+  const prefersReducedMotion =
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  return (
+    <GroupContext.Provider value={ctx}>
+      <DndContext
+        accessibility={accessibility}
+        sensors={sensors}
+        collisionDetection={containerAwareClosestCorners}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        {children}
+        <DragOverlay dropAnimation={prefersReducedMotion ? null : undefined}>
+          {overlayContent != null ? (
+            <SortableItemContext.Provider value={OVERLAY_ITEM_CONTEXT}>
+              <div className={clsx(styles.item, styles.overlayItem)} data-dragging="true">
+                {overlayContent}
+              </div>
+            </SortableItemContext.Provider>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    </GroupContext.Provider>
+  );
+};
+SortableGroupRoot.displayName = 'SortableGroup';
+
+/**
+ * One list inside a `<SortableGroup>`; renders an `<ol>` that accepts cross-container drops.
+ * @see docs/components/SortableGroup.md
+ */
+const SortableGroupContainer = forwardRef<HTMLOListElement, SortableGroupContainerProps>(
+  function SortableGroupContainer({ id, items, className, children, ...rest }, ref) {
+    const group = useContext(GroupContext);
+    if (!group) {
+      throw new Error('<SortableGroup.Container> must be used inside <SortableGroup>.');
+    }
+    const { setNodeRef } = useDroppable({ id });
+
+    const contentMap = useMemo(() => itemContentMap(children), [children]);
+    // Resolved in the effect, not during render: `aria-labelledby` names an
+    // element that only exists once the tree is mounted.
+    const ariaLabel = rest['aria-label'];
+    const ariaLabelledBy = rest['aria-labelledby'];
+    useEffect(() => {
+      const label = containerName({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy });
+      group.register(id, { items, itemContent: contentMap, label });
+      return () => group.unregister(id);
+    }, [group, id, items, contentMap, ariaLabel, ariaLabelledBy]);
+
+    const setRefs = useCallback(
+      (node: HTMLOListElement | null) => {
+        setNodeRef(node);
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+      },
+      [setNodeRef, ref],
+    );
+
+    return (
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <ol ref={setRefs} className={clsx(styles.list, className)} {...rest}>
+          {children}
+        </ol>
+      </SortableContext>
+    );
+  },
+);
+SortableGroupContainer.displayName = 'SortableGroup.Container';
+
+export const SortableGroup = Object.assign(SortableGroupRoot, {
+  Container: SortableGroupContainer,
+});

package/src/components/SortableGroup/index.ts

@@ -0,0 +1,4 @@
+export { SortableGroup } from './SortableGroup';
+export type { SortableGroupProps, SortableGroupContainerProps } from './SortableGroup';
+export { moveSortableItem } from './moveSortableItem';
+export type { SortableMoveEvent } from './moveSortableItem';

package/src/components/SortableGroup/moveSortableItem.ts

@@ -0,0 +1,39 @@
+// moveSortableItem.ts — pure, immutable cross/within-container move for the
+// controlled state behind <SortableGroup>. Operates by index, so it's generic
+// over the item type (id arrays or whole objects). Owns the SortableMoveEvent
+// type (SortableGroup.tsx imports + re-exports it) so this module is self-contained.
+
+/** A move within or across containers — fired by `SortableGroup.onMove`. */
+export interface SortableMoveEvent {
+  /** The dragged item's id. */
+  id: string | number;
+  /** Where it came from. */
+  from: { container: string | number; index: number };
+  /** Where it goes. `from.container === to.container` is a within-list reorder. */
+  to: { container: string | number; index: number };
+}
+
+/**
+ * Apply a `SortableMoveEvent` to a `{ containerId: items[] }` map, immutably.
+ * Splices the item out of `from` and into `to` by index — supports within-
+ * container reorder, cross-container moves, and an empty target. Returns the
+ * input unchanged when `from.index` is out of range.
+ *
+ * @example
+ * <SortableGroup onMove={(e) => setGroups((g) => moveSortableItem(g, e))}>
+ */
+export function moveSortableItem<T>(
+  containers: Record<string, T[]>,
+  { from, to }: SortableMoveEvent,
+): Record<string, T[]> {
+  const fromKey = String(from.container);
+  const toKey = String(to.container);
+  const fromArr = (containers[fromKey] ?? []).slice();
+  const [moved] = fromArr.splice(from.index, 1);
+  if (moved === undefined) return containers; // out-of-range → no-op
+  const next = { ...containers, [fromKey]: fromArr };
+  const toArr = fromKey === toKey ? fromArr : (containers[toKey] ?? []).slice();
+  toArr.splice(to.index, 0, moved);
+  next[toKey] = toArr;
+  return next;
+}

package/src/components/Sparkline/Sparkline.module.scss

@@ -0,0 +1,28 @@
+@use './Sparkline.tokens';
+
+.root {
+  width: 100%;
+  height: var(--sparkline-height);
+}
+
+.svg {
+  display: block;
+  overflow: visible;
+}
+
+.line {
+  fill: none;
+  stroke: var(--sparkline-color);
+  stroke-width: var(--sparkline-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.area {
+  fill: var(--sparkline-area-fill);
+}
+
+.bar,
+.dot {
+  fill: var(--sparkline-color);
+}

package/src/components/Sparkline/Sparkline.tokens.scss

@@ -0,0 +1,7 @@
+// Sparkline.tokens.scss — component tokens for <Sparkline>.
+:root {
+  --sparkline-height: var(--size-sparkline);
+  --sparkline-color: var(--color-accent);
+  --sparkline-area-fill: var(--color-accent-subtle-bg);
+  --sparkline-line-width: var(--border-width-emphasis);
+}

package/src/components/Sparkline/Sparkline.tsx

@@ -0,0 +1,133 @@
+import { forwardRef, useLayoutEffect, useMemo, useState, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { useLocale, useTranslation } from '../../i18n';
+import { mergeRefs } from '../_internal/refs';
+import {
+  layoutSparkline,
+  summarize,
+  SPARKLINE_DOT_RADIUS,
+  type SparklineType,
+} from './sparklineModel';
+import styles from './Sparkline.module.scss';
+
+export type { SparklineType };
+
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** What the series is, e.g. "Contacts per day". Starts the accessible name. */
+  label: string;
+  /** Values oldest → newest. `null` (or a non-finite number) = no data for that slot: a gap in a line/area, no bar. */
+  values: readonly (number | null)[];
+  /**
+   * Mark type. Default `'line'`.
+   * - `'line'` — smoothed line with a dot on the latest value. Trends of a rate or level.
+   * - `'area'` — the line over a filled area anchored at zero. Volumes / counts over time.
+   * - `'bar'` — one bar per value. Discrete per-period counts (daily signups).
+   */
+  type?: SparklineType;
+  /** Formats numbers in the accessible summary. Default: `Intl.NumberFormat` for the current locale. */
+  formatValue?: (n: number) => string;
+  /**
+   * Dot on the latest value (`line` / `area`; `bar` never has one). Default `true`.
+   * Turn off where the dot reads as a stray marker rather than emphasis, e.g. a
+   * dense row of `StatTile` sparklines.
+   */
+  endDot?: boolean;
+}
+
+function useSize() {
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const measure = () => {
+      const { width, height } = el.getBoundingClientRect();
+      setSize((prev) =>
+        prev.width === Math.floor(width) && prev.height === Math.floor(height)
+          ? prev
+          : { width: Math.floor(width), height: Math.floor(height) },
+      );
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [el]);
+  return [setEl, size] as const;
+}
+
+/**
+ * Compact, static, axis-free trend graphic (line / area / bar) for KPI cards.
+ * `role`, `aria-label` and `aria-labelledby` are ignored; the name is derived from `label` and `values`.
+ * @see docs/components/Sparkline.md
+ */
+// {...rest} FIRST (Pattern B) so role="img" and the summary name always win.
+export const Sparkline = forwardRef<HTMLDivElement, SparklineProps>(function Sparkline(
+  {
+    label,
+    values,
+    type = 'line',
+    formatValue,
+    endDot = true,
+    className,
+    'aria-labelledby': _ignored,
+    ...rest
+  },
+  ref,
+) {
+  const t = useTranslation();
+  const locale = useLocale();
+  const [setMeasureEl, { width, height }] = useSize();
+  const rootRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, setMeasureEl), [ref, setMeasureEl]);
+
+  const format = useMemo(
+    () => formatValue ?? ((n: number) => new Intl.NumberFormat(locale).format(n)),
+    [formatValue, locale],
+  );
+  const summary = summarize(values);
+  const name = summary
+    ? t('sparkline.summary', {
+        label,
+        first: format(summary.first),
+        last: format(summary.last),
+        min: format(summary.min),
+        max: format(summary.max),
+      })
+    : t('sparkline.noData', { label });
+
+  const geometry = useMemo(
+    () => layoutSparkline(values, type, width, height),
+    [values, type, width, height],
+  );
+
+  return (
+    <div
+      {...rest}
+      ref={rootRef}
+      className={clsx(styles.root, className)}
+      role="img"
+      aria-label={name}
+    >
+      <svg
+        className={styles.svg}
+        width={width}
+        height={height}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {geometry?.area && <path className={styles.area} d={geometry.area} />}
+        {geometry?.line && <path className={styles.line} d={geometry.line} />}
+        {geometry?.bars?.map((b, i) => (
+          <rect key={i} className={styles.bar} x={b.x} y={b.y} width={b.width} height={b.height} />
+        ))}
+        {endDot && geometry?.dot && (
+          <circle
+            className={styles.dot}
+            cx={geometry.dot.cx}
+            cy={geometry.dot.cy}
+            r={SPARKLINE_DOT_RADIUS}
+          />
+        )}
+      </svg>
+    </div>
+  );
+});

package/src/components/Sparkline/index.ts

@@ -0,0 +1,2 @@
+export { Sparkline } from './Sparkline';
+export type { SparklineProps, SparklineType } from './Sparkline';

package/src/components/Sparkline/sparklineModel.ts

@@ -0,0 +1,119 @@
+// sparklineModel.ts — pure geometry + summary for <Sparkline>. No DOM; Node-tested.
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { area as d3Area, curveMonotoneX, line as d3Line } from 'd3-shape';
+
+/** Sparkline mark type. */
+export type SparklineType = 'line' | 'area' | 'bar';
+
+/** Px kept clear on every edge so the stroke and end dot are never clipped. */
+export const SPARKLINE_INSET = 3;
+/** End-dot radius in px. */
+export const SPARKLINE_DOT_RADIUS = 2.5;
+
+/** First / last / min / max of the finite values. */
+export interface SparklineSummary {
+  first: number;
+  last: number;
+  min: number;
+  max: number;
+}
+
+export interface SparklineRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface SparklineGeometry {
+  /** Stroke path (line + area). */
+  line?: string;
+  /** Fill path (area only). */
+  area?: string;
+  /** Bars (bar only). */
+  bars?: SparklineRect[];
+  /** Marker on the last finite value (line + area). */
+  dot?: { cx: number; cy: number };
+}
+
+const finite = (v: number | null | undefined): v is number => v != null && Number.isFinite(v);
+
+export function summarize(values: readonly (number | null)[]): SparklineSummary | null {
+  const nums = values.filter(finite);
+  if (nums.length === 0) return null;
+  // Loop, not Math.min(...nums): spread overflows the stack on very large arrays.
+  let min = nums[0];
+  let max = nums[0];
+  for (const v of nums) {
+    if (v < min) min = v;
+    if (v > max) max = v;
+  }
+  return { first: nums[0], last: nums[nums.length - 1], min, max };
+}
+
+export function layoutSparkline(
+  values: readonly (number | null)[],
+  type: SparklineType,
+  width: number,
+  height: number,
+): SparklineGeometry | null {
+  const s = summarize(values);
+  if (!s || width <= 0 || height <= 0) return null;
+  const pad = SPARKLINE_INSET;
+  const n = values.length;
+
+  // Area/bar read as quantities: anchor at zero when nothing is negative.
+  const lo = type !== 'line' && s.min >= 0 ? 0 : s.min;
+  // All-negative bars hang from a zero line at the top (mirror of the zero baseline).
+  const hi = type === 'bar' && s.max < 0 ? 0 : s.max;
+  const y = scaleLinear()
+    .domain(lo === hi ? [lo - 1, hi + 1] : [lo, hi]) // flat → mid height
+    .range([height - pad, pad]);
+
+  if (type === 'bar') {
+    const band = scaleBand<number>()
+      .domain(values.map((_, i) => i))
+      .range([0, width])
+      .paddingInner(0.2);
+    const zero = y(Math.min(Math.max(0, y.domain()[0]), y.domain()[1]));
+    const bars: SparklineRect[] = [];
+    values.forEach((v, i) => {
+      if (!finite(v)) return;
+      const top = y(v);
+      bars.push({
+        x: band(i) ?? 0,
+        y: Math.min(top, zero),
+        width: Math.max(1, band.bandwidth()),
+        height: v === 0 ? 0 : Math.abs(zero - top),
+      });
+    });
+    return { bars };
+  }
+
+  const xs = scaleLinear()
+    .domain([0, Math.max(n - 1, 1)])
+    .range([pad, width - pad]);
+  const x = (i: number) => (n === 1 ? width / 2 : xs(i));
+
+  const lineGen = d3Line<number | null>()
+    .defined(finite)
+    .x((_, i) => x(i))
+    .y((v) => y(v as number))
+    .curve(curveMonotoneX);
+  const geometry: SparklineGeometry = { line: lineGen(values as (number | null)[]) ?? undefined };
+
+  if (type === 'area') {
+    const areaGen = d3Area<number | null>()
+      .defined(finite)
+      .x((_, i) => x(i))
+      .y0(height - pad)
+      .y1((v) => y(v as number))
+      .curve(curveMonotoneX);
+    geometry.area = areaGen(values as (number | null)[]) ?? undefined;
+  }
+
+  let last = n - 1;
+  while (last >= 0 && !finite(values[last])) last--;
+  geometry.dot = { cx: x(last), cy: y(values[last] as number) };
+  return geometry;
+}