@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpTilt.vue

@@ -31,12 +31,12 @@ const props = withDefaults(
   { max: 10, lift: 8, scale: 1.03, glare: false, perspective: 900 },
 )
 
-const tilt = useTilt({
+const tilt = useTilt(() => ({
   max: props.max,
   lift: props.lift,
   scale: props.scale,
   glare: props.glare,
-})
+}))
 
 const stageStyle = computed(() => ({ perspective: `${props.perspective}px` }))
 </script>

package/src/components/LpTimeField.vue

@@ -13,6 +13,7 @@
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
+import { useFieldControl } from "../composables/useField"
 import LpIcon from "./LpIcon.vue"
 
 const props = withDefaults(
@@ -50,6 +51,12 @@ function onUpdate(next: unknown) {
   emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`)
 }
 
+const field = useFieldControl(() => ({
+  wrapped: false,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+
 const shellSize = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -64,16 +71,20 @@ const shellSize = {
     :hour-cycle="hourCycle"
     :locale="locale"
     granularity="minute"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-invalid="field.invalid || undefined"
+    :aria-describedby="field.describedBy"
     class="flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
     :class="[
       shellSize[size],
-      invalid ? 'border-danger focus-within:ring-danger-soft' : 'border-line focus-within:border-brand',
+      field.invalid ? 'border-danger focus-within:ring-danger-soft' : 'border-line focus-within:border-brand',
     ]"
     @update:model-value="onUpdate"
   >
     <LpIcon v-if="icon" name="lucide:clock" :size="15" class="mr-1.5 shrink-0 text-muted" />
-    <template v-for="item in segments" :key="item.part">
+    <!-- Indexed keys: in 12-hour mode the segments hold two "literal" parts
+         (the ":" and the space before AM/PM), which a key by part repeats. -->
+    <template v-for="(item, i) in segments" :key="i">
       <TimeFieldInput v-if="item.part === 'literal'" :part="item.part" class="text-muted">
         {{ item.value }}
       </TimeFieldInput>

package/src/components/LpToaster.vue

@@ -11,38 +11,95 @@ import {
   ToastTitle,
   ToastViewport,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch } from "vue"
+import { nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 
+const props = defineProps<{ labels?: Partial<{ dismiss: string }> }>()
+const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels)
+
 const { queue, dismiss } = useToast()
 
+/*
+ * The stack slides rather than jumps. A new toast lands at the bottom and the
+ * ones above used to leap up by its height in a single frame; one leaving let
+ * the rest drop the same way. Each toast's layout position (offsetTop, which
+ * ignores transforms) is remembered, and when the list changes every toast
+ * that moved is played from where it was to where it is (FLIP). The observer
+ * fires after the DOM changes and before the frame is painted, so the jump is
+ * never seen. Toasts render through reka's portal into the viewport, which is
+ * why this watches the DOM rather than a TransitionGroup.
+ */
+let observer: MutationObserver | undefined
+const tops = new WeakMap<Element, number>()
+
+function toastsIn(root: Element): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>("li[data-state]")]
+}
+
+function slide(root: Element) {
+  const reduce = prefersReducedMotion()
+  const height = (root as HTMLElement).offsetHeight
+  for (const el of toastsIn(root)) {
+    const before = tops.get(el)
+    const now = el.offsetTop - height
+    tops.set(el, now)
+    if (before === undefined || before === now || reduce || el.hasAttribute("data-swipe")) continue
+    el.animate([{ translate: `0 ${before - now}px` }, { translate: "0 0" }], {
+      duration: 220,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+    })
+  }
+}
+
+// The viewport's component root is a wrapper fragment, not the list, so the
+// list is found by a mark of its own once it is teleported into place.
+const viewportId = useId()
+onMounted(() =>
+  nextTick(() => {
+    const root = document.querySelector(`[data-lp-toasts="${viewportId}"]`)
+    if (!root || typeof MutationObserver === "undefined") return
+    for (const el of toastsIn(root)) tops.set(el, el.offsetTop - (root as HTMLElement).offsetHeight)
+    observer = new MutationObserver(() => slide(root))
+    observer.observe(root, { childList: true, subtree: true })
+  }),
+)
+onBeforeUnmount(() => observer?.disconnect())
+
+// A toast replaced through its `key` keeps its id and gets a new revision, so
+// everything tied to one rendered toast goes by both.
+const tag = (t: ToastItem) => `${t.id}:${t.rev}`
+
 // Toasts that are playing their exit animation. We don't splice them out of the
 // queue immediately on close — that would unmount before `toast-out` can run.
 // Instead we flip `open` to false (reka sets data-state=closed → the keyframe
 // plays), then drop the toast for real once `animationend` fires. A safety
 // timer removes it even if the animationend event is missed (e.g. tab hidden).
-const closing = ref<Set<number>>(new Set())
+const closing = ref<Set<string>>(new Set())
 
-function beginClose(id: number) {
-  if (closing.value.has(id)) return
-  closing.value = new Set(closing.value).add(id)
+function beginClose(t: ToastItem) {
+  const at = tag(t)
+  if (closing.value.has(at)) return
+  closing.value = new Set(closing.value).add(at)
   // Fallback slightly longer than the 140ms toast-out duration.
-  window.setTimeout(() => finishClose(id), 220)
+  window.setTimeout(() => finishClose(t.id, at), 220)
 }
 
-function finishClose(id: number) {
-  if (!closing.value.has(id)) return
+function finishClose(id: number, at: string) {
+  if (!closing.value.has(at)) return
   const next = new Set(closing.value)
-  next.delete(id)
+  next.delete(at)
   closing.value = next
-  dismiss(id)
+  // Replaced while it was leaving: the new revision stays.
+  if (queue.some((t) => tag(t) === at)) dismiss(id)
 }
 
-function onAnimEnd(e: AnimationEvent, id: number) {
+function onAnimEnd(e: AnimationEvent, t: ToastItem) {
   // Only the exit keyframe should trigger removal, not toast-in.
-  if (e.animationName === "toast-out") finishClose(id)
+  if (e.animationName === "toast-out") finishClose(t.id, tag(t))
 }
 
 const variantIcon: Record<ToastItem["variant"], string> = {
@@ -97,7 +154,7 @@ watch(
     // Same for the closing set — a toast evicted by the queue cap or clear()
     // leaves without an animationend, so prune dead ids here.
     if (closing.value.size) {
-      const live = new Set([...closing.value].filter((id) => queue.some((t) => t.id === id)))
+      const live = new Set([...closing.value].filter((at) => queue.some((t) => tag(t) === at)))
       if (live.size !== closing.value.size) closing.value = live
     }
     if (queue.some((t) => t.dismissAt !== null)) startTimer()
@@ -126,16 +183,41 @@ function progress(t: ToastItem): number {
   return Math.max(0, Math.min(100, (remaining / t.duration) * 100))
 }
 
-async function runClick(t: ToastItem) {
-  if (t.onClick) {
-    await t.onClick()
-    beginClose(t.id)
+/*
+ * reka cancels the click that ends a swipe by adding a listener after ours, so
+ * by the time it runs our handler has already acted on it: a swiped-away
+ * "View details" toast navigated. The swipe marks the toast instead, and the
+ * mark lasts only until that trailing click has had its chance.
+ */
+let swiped: string | null = null
+function onSwipeDone(t: ToastItem) {
+  swiped = tag(t)
+  window.setTimeout(() => (swiped = null), 0)
+}
+
+const busy = ref<Set<string>>(new Set())
+
+async function settle(t: ToastItem, run: () => void | Promise<void>) {
+  const at = tag(t)
+  if (busy.value.has(at)) return
+  busy.value = new Set(busy.value).add(at)
+  try {
+    await run()
+    beginClose(t)
+  } finally {
+    const next = new Set(busy.value)
+    next.delete(at)
+    busy.value = next
   }
 }
 
-async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
-  await action.onClick()
-  beginClose(t.id)
+function runClick(t: ToastItem) {
+  if (swiped === tag(t)) return
+  if (t.onClick) return settle(t, t.onClick)
+}
+
+function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
+  return settle(t, action.onClick)
 }
 </script>
 
@@ -143,13 +225,16 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
   <ToastProvider>
     <ToastRoot
       v-for="t in queue"
-      :key="t.id"
-      :open="!closing.has(t.id)"
+      :key="tag(t)"
+      :open="!closing.has(tag(t))"
       :duration="t.duration"
+      :type="t.variant === 'error' || t.variant === 'warning' ? 'foreground' : 'background'"
       class="pointer-events-auto relative overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel data-[state=open]:animate-[toast-in_200ms_var(--ease-emphasized)] data-[state=closed]:animate-[toast-out_140ms_ease]"
       :class="{ 'cursor-pointer': t.onClick }"
-      @update:open="(open) => !open && beginClose(t.id)"
-      @animationend="(e: AnimationEvent) => onAnimEnd(e, t.id)"
+      @update:open="(open) => !open && beginClose(t)"
+      @animationend="(e: AnimationEvent) => onAnimEnd(e, t)"
+      @swipe-end="onSwipeDone(t)"
+      @swipe-cancel="onSwipeDone(t)"
       @pause="onPause(t)"
       @resume="onResume(t)"
       @click="runClick(t)"
@@ -178,7 +263,9 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
               v-for="(action, i) in t.actions"
               :key="i"
               type="button"
-              class="inline-flex items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+              :disabled="busy.has(tag(t))"
+              :aria-busy="busy.has(tag(t)) || undefined"
+              class="inline-flex items-center gap-1.5 rounded-control disabled:opacity-60 border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
               @click="runAction(t, action)"
             >
               <LpIcon v-if="action.icon" :name="action.icon" :size="14" />
@@ -190,8 +277,8 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
         <button
           type="button"
           class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
-          aria-label="Dismiss"
-          @click.stop="beginClose(t.id)"
+          :aria-label="text.dismiss"
+          @click.stop="beginClose(t)"
         >
           <LpIcon
             name="lucide:x"
@@ -216,6 +303,7 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
          --z-toast (200) > --z-modal (110) wins as intended. -->
     <Teleport to="body">
       <ToastViewport
+        :data-lp-toasts="viewportId"
         class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
       />
     </Teleport>

package/src/components/LpTooltip.vue

@@ -28,13 +28,14 @@
  * them and the control stops opening. Put `aria-label` on the trigger instead.
  */
 import {
+  injectTooltipProviderContext,
   TooltipContent,
   TooltipPortal,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch } from "vue"
+import { onBeforeUnmount, ref, watch, type FunctionalComponent } from "vue"
 import {
   springSettled,
   springStep,
@@ -54,7 +55,7 @@ const props = withDefaults(
      * adding a description.
      */
     label?: boolean
-    /** Milliseconds before the tip appears on hover. */
+    /** Milliseconds before the tip appears on hover. Unset follows the provider, else 200. */
     delay?: number
     /**
      * Show on any focus, not just keyboard focus. Off by default: a tip that
@@ -83,7 +84,7 @@ const props = withDefaults(
      */
     disabled?: boolean
   }>(),
-  { delay: 200, side: "top" },
+  { side: "top" },
 )
 
 /*
@@ -101,6 +102,23 @@ const props = withDefaults(
  * the pointer exactly reads as jitter, while a slight lag reads as following.
  * Same reasoning, and the same shared "float" feel, as LpChart's readout.
  */
+/*
+ * A provider of its own only when none is above. Each tip in its own provider
+ * meant moving along a toolbar waited the full delay at every button; under a
+ * shared one (LpTooltipProvider at the root) the next tip opens at once.
+ */
+const shared = injectTooltipProviderContext(null)
+/*
+ * Under a shared provider the tip renders straight into it. `Fragment` cannot
+ * stand in for the wrapper: given through `<component :is>` it takes slots,
+ * not children, and rendered nothing at all, so every tip inside an
+ * LpTooltipProvider vanished together with its trigger.
+ */
+const PassThrough: FunctionalComponent = (_, { slots }) => slots.default?.()
+
+const reducedMotion = () =>
+  typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+
 const target = { x: 0, y: 0 }
 const offset = ref({ x: 0, y: 0 })
 
@@ -155,6 +173,11 @@ const onPointerMove = (e: PointerEvent) => {
   const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0
   const dir = props.side === "bottom" ? -1 : 1
   target.y = e.clientY - (rect.top + rect.height / 2) + half * dir
+  // Without motion the tip goes straight to the reading instead of trailing.
+  if (reducedMotion()) {
+    offset.value = { x: target.x, y: target.y }
+    return
+  }
   if (!frame) frame = requestAnimationFrame(settle)
 }
 
@@ -205,7 +228,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <TooltipProvider :delay-duration="delay">
+  <component :is="shared ? PassThrough : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
     <!--
       `disable-closing-trigger` in follow mode: reka dismisses a tip when its
       trigger is clicked, which is right for a button (the tip explained the
@@ -214,6 +237,7 @@ onBeforeUnmount(() => {
     -->
     <TooltipRoot
       :open="open"
+      :delay-duration="delay"
       :ignore-non-keyboard-focus="!showOnPointerFocus"
       :disable-hoverable-content="followCursor"
       :disable-closing-trigger="followCursor"
@@ -245,7 +269,7 @@ onBeforeUnmount(() => {
         </TooltipContent>
       </TooltipPortal>
     </TooltipRoot>
-  </TooltipProvider>
+  </component>
 </template>
 
 <style>

package/src/components/LpTooltipProvider.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/*
+ * Shared timing for every LpTooltip below it: once one tip is showing, moving
+ * to the next opens it without waiting the delay again. Mount once near the
+ * app root; tooltips outside any provider keep working on their own.
+ */
+import { TooltipProvider } from "reka-ui"
+
+withDefaults(
+  defineProps<{
+    /** Milliseconds before the first tip appears on hover. */
+    delay?: number
+    /** How long after a tip closes the next one still opens at once. */
+    skipDelay?: number
+  }>(),
+  { delay: 200, skipDelay: 300 },
+)
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delay" :skip-delay-duration="skipDelay">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/LpTopologyCanvas.vue

@@ -22,7 +22,7 @@ import {
   type NodeTypesObject,
 } from "@vue-flow/core"
 import { MiniMap } from "@vue-flow/minimap"
-import { computed, markRaw, watch, type Component } from "vue"
+import { computed, defineComponent, h, markRaw, watch, type Component } from "vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpLaneNode from "./LpLaneNode.vue"
 import LpServiceNode, { type ServiceNodeData } from "./LpServiceNode.vue"
@@ -193,7 +193,18 @@ const emit = defineEmits<{
 // their own props (data/selected) which Vue Flow supplies at runtime as part of
 // NodeProps. Widen to `Component` (not the concrete DefineComponent) so the
 // registry types cleanly without a cast.
+// Vue Flow ships no "group" renderer, so a host frame without one warns and
+// draws nothing inside its styled box. The frame only needs its label.
+const GroupNode = defineComponent({
+  props: { label: { type: [String, Object], default: undefined } },
+  setup: (props) => () =>
+    typeof props.label === "string"
+      ? h("div", { class: "px-3 pt-2 text-xs font-medium text-muted" }, props.label)
+      : null,
+})
+
 const nodeTypes: NodeTypesObject = {
+  group: markRaw(GroupNode) as Component,
   infra: markRaw(LpInfraNode) as Component,
   service: markRaw(LpServiceNode) as Component,
   lane: markRaw(LpLaneNode) as Component,
@@ -406,8 +417,12 @@ defineExpose({ fitView, setViewport: applyViewport })
     class="lp-topology"
   >
     <Background :gap="22" :size="1.4" pattern-color="var(--color-line-strong)" />
+    <!-- On a phone the minimap, the zoom controls and the legend would all
+         share the bottom of a canvas a few hundred pixels wide and cover each
+         other and the graph; pinch-zoom and panning do the minimap's job there. -->
     <MiniMap
       v-if="minimap"
+      class="max-sm:!hidden"
       pannable
       zoomable
       node-color="var(--color-surface-soft)"
@@ -416,7 +431,9 @@ defineExpose({ fitView, setViewport: applyViewport })
     <Controls v-if="controls" />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
-    <Panel v-if="legend" :position="legendPosition" :class="legendOffset">
+    <!-- On a phone the legend would sit on the graph itself; the edge styles
+         stay readable without it there. -->
+    <Panel v-if="legend" :position="legendPosition" :class="legendOffset" class="max-sm:hidden">
       <div
         class="flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
       >

package/src/components/LpUptimeBar.vue

@@ -11,6 +11,7 @@ import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
 import LpTooltip from "./LpTooltip.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty"
 
@@ -39,6 +40,8 @@ const props = withDefaults(
      * `{ degraded: '#ffb84d' }` to recolour just one state.
      */
     colors?: Partial<Record<UptimeStatus, string>>
+    /** Status names, for the tooltip and screen readers. */
+    labels?: Partial<Record<UptimeStatus, string>>
   }>(),
   { showUptime: true },
 )
@@ -64,13 +67,17 @@ const opacityFor = (status: UptimeStatus): number =>
 const colorFor = (status: UptimeStatus): string =>
   props.colors?.[status] ?? defaultColor[status]
 
-const statusLabel: Record<UptimeStatus, string> = {
-  operational: "Operational",
-  degraded: "Degraded",
-  down: "Down",
-  maintenance: "Maintenance",
-  empty: "No data",
-}
+const statusLabel = useLabels(
+  "uptimeBar",
+  {
+    operational: "Operational",
+    degraded: "Degraded",
+    down: "Down",
+    maintenance: "Maintenance",
+    empty: "No data",
+  },
+  () => props.labels,
+)
 
 // Uptime counts only slices with data; operational + maintenance are "up".
 const uptimePct = computed(() => {
@@ -114,9 +121,35 @@ const tip = computed(() => {
   if (i == null) return null
   const seg = props.segments[i]
   if (!seg) return null
-  return { status: seg.status, text: seg.label ?? statusLabel[seg.status] }
+  return { status: seg.status, text: seg.label ?? statusLabel.value[seg.status] }
 })
 
+/*
+ * One Tab stop for the whole bar, arrows to walk it. A quarter's worth of
+ * slices as separate stops made the bar ninety Tab presses to get past.
+ */
+const focusIndex = ref(-1)
+const slots = ref<HTMLElement[]>([])
+const tabStop = computed(() =>
+  focusIndex.value >= 0 && focusIndex.value < props.segments.length
+    ? focusIndex.value
+    : props.segments.length - 1,
+)
+
+function onSlotKeydown(e: KeyboardEvent, i: number) {
+  const last = props.segments.length - 1
+  const next =
+    e.key === "ArrowRight" ? Math.min(last, i + 1)
+    : e.key === "ArrowLeft" ? Math.max(0, i - 1)
+    : e.key === "Home" ? 0
+    : e.key === "End" ? last
+    : -1
+  if (next < 0) return
+  e.preventDefault()
+  focusIndex.value = next
+  slots.value[next]?.focus()
+}
+
 const uptimeDecimals = computed(() => {
   const v = uptimePct.value
   if (v == null) return 0
@@ -168,10 +201,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <button
           v-for="(seg, i) in segments"
           :key="i"
+          ref="slots"
           type="button"
           class="lp-uptime__slot min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          :tabindex="i === tabStop ? 0 : -1"
           :aria-label="seg.label ?? statusLabel[seg.status]"
           @pointerenter="hovered = i"
+          @focus="focusIndex = i; hovered = i"
+          @blur="hovered === i && (hovered = null)"
+          @keydown="onSlotKeydown($event, i)"
         >
           <span
             class="lp-uptime__mark block h-full rounded-[1px] transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"

package/src/components/chart.ts

@@ -30,6 +30,62 @@ export interface ChartSeries {
 
 export type ChartAxis = "left" | "right"
 
+/**
+ * A reference level drawn across the plot: a line at `value`, or a band from
+ * `value` to `to`. SLOs, budgets, alert thresholds.
+ */
+export interface ChartThreshold {
+  value: number
+  /** Upper (or lower) edge of a band. Omit for a single line. */
+  to?: number
+  label?: string
+  /** Any CSS colour. Defaults to the strong line token. */
+  color?: string
+  axis?: ChartAxis
+  /** Solid instead of the default dashed line. */
+  solid?: boolean
+}
+
+/**
+ * A vertical marker at one x position: a deploy, an incident, a release.
+ * `at` is a point index or one of the x labels.
+ */
+export interface ChartMarker {
+  at: number | string
+  label?: string
+  color?: string
+}
+
+/** The x index a marker points at, or -1 when it names nothing on the axis. */
+export const markerIndex = (at: number | string, labels: string[], count: number): number => {
+  if (typeof at === "number") return Number.isInteger(at) && at >= 0 && at < count ? at : -1
+  return labels.indexOf(at)
+}
+
+/**
+ * A one-sentence reading of the chart for assistive technology: what is
+ * plotted, over how many points, and each series' range and latest value.
+ */
+export const chartSummary = (
+  series: NormalSeries[],
+  labels: string[],
+  fmt: (s: NormalSeries, v: number) => string,
+  title?: string,
+): string => {
+  const parts: string[] = []
+  const span = labels.length ? `${labels.length} points, ${labels[0]} to ${labels[labels.length - 1]}` : ""
+  parts.push([title, span].filter(Boolean).join(", "))
+  for (const s of series) {
+    const values = s.values.filter((v): v is number => v != null)
+    if (!values.length) continue
+    const last = values[values.length - 1]
+    parts.push(
+      `${s.name}: from ${fmt(s, Math.min(...values))} to ${fmt(s, Math.max(...values))}, latest ${fmt(s, last)}`,
+    )
+  }
+  return parts.filter(Boolean).join(". ")
+}
+
 export interface NormalSeries {
   name: string
   color: string
@@ -101,10 +157,12 @@ export const niceScale = (
 ): { min: number; max: number; step: number } => {
   if (!Number.isFinite(min) || !Number.isFinite(max)) return { min: 0, max: 1, step: 1 }
   if (min === max) {
-    // A flat series still needs a band to sit in.
+    // A flat series still needs a band to sit in, but the band must not cross
+    // zero: an all-zero count would otherwise read as dipping to -0.5.
     const pad = Math.abs(min) || 1
-    min -= pad / 2
-    max += pad / 2
+    min = min >= 0 ? Math.max(0, min - pad / 2) : min - pad / 2
+    max = max <= 0 ? Math.min(0, max + pad / 2) : max + pad / 2
+    if (min === max) max = min + pad
   }
   const raw = (max - min) / Math.max(1, ticks)
   const mag = 10 ** Math.floor(Math.log10(raw))
@@ -592,6 +650,7 @@ export const calloutLabels = (
       return side === "right" ? a : -a
     }
     const list = sides[side].sort((p, q) => rank(p.mid) - rank(q.mid))
+    if (!list.length) continue
 
     /*
      * Resolve collisions by NUDGING, not by stacking.
@@ -676,11 +735,26 @@ export const calloutLabels = (
   return out
 }
 
-/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001. */
+/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k. */
 export const formatTick = (v: number): string => {
+  if (!Number.isFinite(v)) return String(v)
+  const units: [number, string][] = [
+    [1e3, "k"],
+    [1e6, "M"],
+    [1e9, "B"],
+    [1e12, "T"],
+  ]
   const abs = Math.abs(v)
-  if (abs >= 1e9) return `${Number((v / 1e9).toFixed(1))}B`
-  if (abs >= 1e6) return `${Number((v / 1e6).toFixed(1))}M`
-  if (abs >= 1e3) return `${Number((v / 1e3).toFixed(1))}k`
-  return String(Number(v.toFixed(2)))
+  let i = units.length - 1
+  while (i >= 0 && abs < units[i][0]) i--
+  if (i < 0) {
+    const plain = Number(v.toFixed(2))
+    return Math.abs(plain) >= 1000 ? formatTick(Math.sign(v) * 1000) : String(plain)
+  }
+  const scaled = Number((v / units[i][0]).toFixed(1))
+  // 999 950 rounds to "1000k"; it reads as the next unit up.
+  if (Math.abs(scaled) >= 1000 && i < units.length - 1) {
+    return `${Number((v / units[i + 1][0]).toFixed(1))}${units[i + 1][1]}`
+  }
+  return `${scaled}${units[i][1]}`
 }