sid-ui 0.0.0-stage → 0.1.1

package/src/components/chartParts.tsx

@@ -0,0 +1,116 @@
+import { VisuallyHidden } from "./Lists";
+
+import type { ReactNode } from "react";
+
+/**
+ * Shared pieces for every chart: the tone names, the legend, the hover readout, and the
+ * screen-reader table that keeps each value reachable without hovering.
+ * Tones resolve to the theme's data tokens in styles/components/charts.css.
+ */
+
+/**
+ * Categorical tones, in the fixed order series take them: blue, orange, purple, green.
+ * red is kept for loss or rejection; neutral is for "other" and for remainders.
+ */
+export type ChartTone = "blue" | "orange" | "purple" | "green" | "red" | "neutral";
+
+/** The order a chart assigns tones to series that do not name one. Never cycled. */
+export const CHART_TONES: ChartTone[] = ["blue", "orange", "purple", "green"];
+
+export function toneAt(index: number, tone?: ChartTone): ChartTone {
+  return tone ?? CHART_TONES[index] ?? "neutral";
+}
+
+export type LegendItem = { label: string; tone: ChartTone; value?: string };
+
+/** Swatch, name, and an optional value. The swatch mirrors the mark: a dash for lines. */
+export function ChartLegend({
+  items,
+  mark = "dot",
+}: {
+  items: LegendItem[];
+  mark?: "dot" | "line";
+}) {
+  return (
+    <ul className="os-chart-legend">
+      {items.map((item) => (
+        <li key={item.label}>
+          <span className="os-chart-key" data-tone={item.tone} data-mark={mark} aria-hidden />
+          <span>{item.label}</span>
+          {item.value ? <strong>{item.value}</strong> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export type TipRow = { label: string; value: string; tone?: ChartTone };
+
+/** The hover readout. The value leads; the series name follows in secondary ink. */
+export function ChartTip({
+  title,
+  rows,
+  left,
+  top,
+  align = "center",
+}: {
+  title?: string;
+  rows: TipRow[];
+  left: number | string;
+  top: number | string;
+  align?: "center" | "start" | "end";
+}) {
+  return (
+    <div className="os-chart-tip" data-align={align} style={{ left, top }} role="presentation">
+      {title ? <span className="os-chart-tip-title">{title}</span> : null}
+      {rows.map((row) => (
+        <span key={row.label} className="os-chart-tip-row">
+          {row.tone ? (
+            <span className="os-chart-key" data-tone={row.tone} data-mark="line" />
+          ) : null}
+          <strong>{row.value}</strong>
+          <span>{row.label}</span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+/** Every plotted value as a table, for screen readers. */
+export function ChartTable({
+  caption,
+  headers,
+  rows,
+}: {
+  caption: string;
+  headers: string[];
+  rows: ReactNode[][];
+}) {
+  return (
+    <VisuallyHidden>
+      <table>
+        <caption>{caption}</caption>
+        <thead>
+          <tr>
+            {headers.map((header) => (
+              <th key={header} scope="col">
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={index}>
+              {row.map((cell, cellIndex) => (
+                <td key={cellIndex}>{cell}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VisuallyHidden>
+  );
+}
+
+export const defaultFormat = (value: number) => value.toLocaleString();

package/src/components/codeInputRules.ts

@@ -0,0 +1,58 @@
+/** Pure editing rules for CodeInput, kept apart from React so they can be tested. */
+
+export type CodeCharset = "numeric" | "alphanumeric";
+
+export interface CodeEdit {
+  value: string;
+  /** The cell that should hold focus after the edit. */
+  focusIndex: number;
+}
+
+const CHARSET_PATTERN: Record<CodeCharset, RegExp> = {
+  numeric: /[^0-9]/g,
+  alphanumeric: /[^a-z0-9]/gi,
+};
+
+/** Drops characters the code does not allow, so a pasted "123 456" still works. */
+export function sanitizeCode(raw: string, charset: CodeCharset = "numeric") {
+  const cleaned = raw.replace(CHARSET_PATTERN[charset], "");
+  return charset === "alphanumeric" ? cleaned.toUpperCase() : cleaned;
+}
+
+/**
+ * Types or pastes `raw` into the cell at `index`. The value stays contiguous, so a cell past the
+ * end of the value writes at the end. A full-length paste replaces the whole code.
+ */
+export function insertCode(
+  value: string,
+  index: number,
+  raw: string,
+  length: number,
+  charset: CodeCharset = "numeric",
+): CodeEdit {
+  const chars = sanitizeCode(raw, charset);
+  if (!chars) return { value, focusIndex: Math.min(index, length - 1) };
+
+  const start = chars.length >= length ? 0 : Math.min(index, value.length);
+  const next = (value.slice(0, start) + chars + value.slice(start + chars.length)).slice(0, length);
+  return { value: next, focusIndex: Math.min(start + chars.length, length - 1) };
+}
+
+/** Backspace: clears the focused cell, or, when it is empty, the one before it. */
+export function deleteCode(value: string, index: number): CodeEdit {
+  if (index < value.length) {
+    return { value: value.slice(0, index) + value.slice(index + 1), focusIndex: index };
+  }
+  const previous = Math.max(value.length - 1, 0);
+  return { value: value.slice(0, previous), focusIndex: previous };
+}
+
+/**
+ * A cell's `onChange` gives its whole text. When the cell already held a character and the browser
+ * kept it, what remains after removing that character is what was typed.
+ */
+export function typedCharacters(raw: string, previous: string | undefined) {
+  if (!previous || raw.length <= 1) return raw;
+  const at = raw.indexOf(previous);
+  return at === -1 ? raw : raw.slice(0, at) + raw.slice(at + previous.length);
+}

package/src/components/date.ts

@@ -0,0 +1,87 @@
+export const DAYS_PER_WEEK = 7;
+/** Month grids always show six weeks so the calendar never changes height. */
+export const GRID_WEEKS = 6;
+export const MONTHS_PER_YEAR = 12;
+export const MS_PER_DAY = 86_400_000;
+/** Fixed so server and client format dates the same way. */
+export const DEFAULT_LOCALE = "en-US";
+
+export type WeekStart = 0 | 1;
+
+export function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function addDays(date: Date, days: number) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+
+/** Adds months and clamps the day, so Jan 31 + 1 month is Feb 28/29. */
+export function addMonths(date: Date, months: number) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const last = daysInMonth(target.getFullYear(), target.getMonth());
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), last));
+}
+
+export function daysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function sameDay(a: Date | null | undefined, b: Date | null | undefined) {
+  return Boolean(
+    a &&
+    b &&
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate(),
+  );
+}
+
+export function sameMonth(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function startOfWeek(date: Date, weekStartsOn: WeekStart) {
+  const shift = (date.getDay() - weekStartsOn + DAYS_PER_WEEK) % DAYS_PER_WEEK;
+  return addDays(date, -shift);
+}
+
+export function weekOf(date: Date, weekStartsOn: WeekStart) {
+  const first = startOfWeek(date, weekStartsOn);
+  return Array.from({ length: DAYS_PER_WEEK }, (_, i) => addDays(first, i));
+}
+
+export function monthGrid(cursor: Date, weekStartsOn: WeekStart) {
+  const first = startOfWeek(new Date(cursor.getFullYear(), cursor.getMonth(), 1), weekStartsOn);
+  return Array.from({ length: GRID_WEEKS * DAYS_PER_WEEK }, (_, i) => addDays(first, i));
+}
+
+export function isBetween(date: Date, start: Date, end: Date) {
+  const t = startOfDay(date).getTime();
+  const a = startOfDay(start).getTime();
+  const b = startOfDay(end).getTime();
+  return t > Math.min(a, b) && t < Math.max(a, b);
+}
+
+export function weekdayNames(
+  weekStartsOn: WeekStart,
+  width: "narrow" | "short",
+  locale = DEFAULT_LOCALE,
+) {
+  const sunday = new Date(2023, 0, 1);
+  return Array.from({ length: DAYS_PER_WEEK }, (_, i) =>
+    addDays(sunday, i + weekStartsOn).toLocaleDateString(locale, { weekday: width }),
+  );
+}
+
+export function monthNames(width: "short" | "long", locale = DEFAULT_LOCALE) {
+  return Array.from({ length: MONTHS_PER_YEAR }, (_, i) =>
+    new Date(2023, i, 1).toLocaleDateString(locale, { month: width }),
+  );
+}
+
+/** Local-date ISO: "2026-09-24". */
+export function toISODate(date: Date) {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}

package/src/components/hooks.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+
+/** Calls `onDismiss` on a pointer-down outside `ref` or on Escape while `active`. */
+export function useDismiss(
+  ref: RefObject<HTMLElement | null>,
+  active: boolean,
+  onDismiss: () => void,
+) {
+  useEffect(() => {
+    if (!active) return;
+    function onPointer(event: PointerEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) onDismiss();
+    }
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") onDismiss();
+    }
+    document.addEventListener("pointerdown", onPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [ref, active, onDismiss]);
+}
+
+/** Current time, refreshed every `intervalMs`. `null` until mounted so SSR output stays stable. */
+export function useNow(intervalMs: number, enabled = true) {
+  const [now, setNow] = useState<Date | null>(null);
+  useEffect(() => {
+    if (!enabled) return;
+    setNow(new Date());
+    const id = window.setInterval(() => setNow(new Date()), intervalMs);
+    return () => window.clearInterval(id);
+  }, [intervalMs, enabled]);
+  return now;
+}
+
+/** Internal state that defers to `controlled` when the caller passes one. */
+export function useControllable<T>(
+  controlled: T | undefined,
+  initial: T,
+  onChange?: (value: T) => void,
+) {
+  const [inner, setInner] = useState<T>(initial);
+  const value = controlled !== undefined ? controlled : inner;
+  function set(next: T) {
+    if (controlled === undefined) setInner(next);
+    onChange?.(next);
+  }
+  return [value, set] as const;
+}

package/src/components/index.ts

@@ -0,0 +1,195 @@
+// Original Astryx, Joined-themed: primitives, actions, content, containers,
+// data input, feedback, navigation, overlays, lists, and chat.
+export * from "./Primitives";
+export * from "./Action";
+export * from "./Content";
+export * from "./Container";
+export * from "./DataInput";
+export * from "./Feedback";
+export * from "./Navigation";
+export * from "./Overlay";
+export * from "./Lists";
+export * from "./Chat";
+
+export type { ControlSize, FieldSize } from "./size";
+
+export { JobCard } from "./Card";
+export type { JobCardProps } from "./Card";
+
+// Brand — the Joined wordmark, app icon, and product name.
+export * from "../brand";
+
+// Sign in with Google — Google's mark and the button every app's sign-in uses.
+export { GoogleMark, GoogleSignInButton } from "./GoogleSignIn";
+export type { GoogleMarkProps, GoogleSignInButtonProps } from "./GoogleSignIn";
+
+export { Nav } from "./Nav";
+export type { NavProps, NavItem } from "./Nav";
+
+export { TokenDemo } from "./TokenDemo";
+
+export * from "./LayoutPrimitives";
+
+// Responsive layer — Joined composites on Astryx breakpoints.
+export { GridSystem, GridColumn, GRID_COLUMNS } from "./GridSystem";
+export type { GridSystemProps, GridColumnProps, GridSpanValue, Responsive } from "./GridSystem";
+export {
+  ResponsiveStack,
+  ResponsiveContainer,
+  Show,
+  Hide,
+  useElementWidth,
+  useContainerBreakpoint,
+  useViewportBreakpoint,
+} from "./Responsive";
+export type { ResponsiveStackProps, ResponsiveContainerProps, ShowProps } from "./Responsive";
+export { ResponsiveFrame, FRAME_PRESETS } from "./ResponsiveFrame";
+export type { ResponsiveFrameProps, FramePreset } from "./ResponsiveFrame";
+export { Tile } from "./Tile";
+export type { TileProps } from "./Tile";
+export { Sticky } from "./Sticky";
+export type { StickyProps } from "./Sticky";
+export { TIERS, VIEWPORT_TIERS, CONTAINER_TIERS, tierFor } from "./breakpoints";
+export type { Tier, TierOrBase, ResponsiveTo } from "./breakpoints";
+
+export { CodeInput, CODE_INPUT_LENGTH } from "./CodeInput";
+export type { CodeInputProps, CodeInputStatus } from "./CodeInput";
+export type { CodeCharset } from "./codeInputRules";
+
+export { Glyph, icons } from "./Glyph";
+export type { GlyphName, GlyphProps } from "./Glyph";
+
+export { Timeline } from "./Timeline";
+export type {
+  TimelineProps,
+  TimelineItem,
+  TimelineTone,
+  TimelineStatus,
+  TimelineVariant,
+} from "./Timeline";
+
+export { Tree } from "./Tree";
+export type { TreeProps, TreeNode, TreeVariant, TreeCheckState } from "./Tree";
+
+export { Table } from "./Table";
+export type {
+  TableProps,
+  TableColumn,
+  TableSort,
+  SortDirection,
+  TableVariant,
+  TableSelection,
+  TableDensity,
+} from "./Table";
+
+export { Clock } from "./Clock";
+export type { ClockProps, ClockVariant } from "./Clock";
+export { TimeField } from "./TimeField";
+export type { TimeFieldProps, TimePicker } from "./TimeField";
+export { TimeDial } from "./TimeDial";
+export type { TimeDialProps } from "./TimeDial";
+export { TimeColumns } from "./TimeColumns";
+export type { TimeColumnsProps } from "./TimeColumns";
+export { TimeSlots } from "./TimeSlots";
+export type { TimeSlotsProps } from "./TimeSlots";
+export { displayTime } from "./time";
+
+export { Calendar } from "./Calendar";
+export type {
+  CalendarProps,
+  CalendarEvent,
+  CalendarView,
+  CalendarTone,
+  DateRange,
+} from "./Calendar";
+export { DateField } from "./DateField";
+export type { DateFieldProps } from "./DateField";
+
+// Drawer — a side or edge panel on Astryx Dialog.
+export { Drawer } from "./Drawer";
+export type { DrawerProps, DrawerSide, DrawerSize } from "./Drawer";
+
+// Kanban / scrum board — drag and drop or keyboard, columns and lanes.
+export { KanbanBoard } from "./KanbanBoard";
+export type { KanbanBoardProps, KanbanItemState } from "./KanbanBoard";
+export { moveKanbanItem, cellItems, slotOf } from "./kanban";
+export type { KanbanColumn, KanbanLane, KanbanItemBase, KanbanSlot, KanbanMove } from "./kanban";
+
+// Drag-and-drop uploads, built from Astryx parts.
+export { FileUploader } from "./FileUploader";
+export type { FileUploaderProps, UploadItem, UploadStatus, UploadHandler } from "./FileUploader";
+export { useFileDrop, formatBytes, matchesAccept } from "./useFileDrop";
+export type { UseFileDropOptions, FileDropProps } from "./useFileDrop";
+
+export { Rating, RATING_MAX } from "./Rating";
+export type { RatingProps } from "./Rating";
+
+export { Notification, NotificationList } from "./Notification";
+export type { NotificationProps, NotificationListProps, NotificationTone } from "./Notification";
+export { NotificationViewport, useNotification } from "./NotificationTrigger";
+export type {
+  NotificationPosition,
+  ShowNotificationOptions,
+  NotificationDismiss,
+} from "./NotificationTrigger";
+
+// Joined pickers — typed segments plus a dial, wheels, or slot list.
+export { TimeInput } from "./TimeInput";
+export type { TimeInputProps, TimeInputVariant, HourCycle, MinuteStep } from "./TimeInput";
+
+export { CitySelector } from "./CitySelector";
+export { LocationSelector } from "./LocationSelector";
+export { StateSelector } from "./StateSelector";
+export { AddressSelector } from "./AddressSelector";
+export {
+  US_STATES,
+  US_CITIES,
+  LOCATION_SEPARATOR,
+  cityLabel,
+  joinLocations,
+  splitLocations,
+  formatAddress,
+  parseAddress,
+  emptyAddress,
+} from "./places";
+export type { State, City, Address } from "./places";
+
+export { TreeList, PageBody, PageHero, Preview, PreviewGrid } from "./Data";
+
+// Page composites every app shares: content column, title row, section card, stats.
+export { PageContainer, PageHeader, SectionCard, StatCard, StatGrid, PAGE_WIDTHS } from "./Page";
+export type { PageWidth, Stat } from "./Page";
+
+export { ThemeToggle } from "./ThemeToggle";
+export type { ThemeName } from "./ThemeToggle";
+
+// Workspace shell and dashboard pieces: pill navigation, KPI widget, segment bar.
+export { PillNav } from "./PillNav";
+export type { PillNavProps, PillNavItem } from "./PillNav";
+export { KpiWidget } from "./Kpi";
+export type { KpiDelta } from "./Kpi";
+export { SegmentBar } from "./Charts";
+export type { Segment, SegmentTone } from "./Charts";
+
+// Charts — one look for trends, magnitudes, parts of a whole, funnels, and daily activity.
+// Tones come from the theme's data tokens in a fixed, colour-blind-checked order.
+export { TrendChart } from "./TrendChart";
+export type { TrendSeries } from "./TrendChart";
+export { BarChart } from "./BarChart";
+export type { BarDatum } from "./BarChart";
+export { DonutChart } from "./DonutChart";
+export type { DonutSlice } from "./DonutChart";
+export { Sparkline } from "./Sparkline";
+export { FunnelChart } from "./FunnelChart";
+export type { FunnelStage } from "./FunnelChart";
+export { HeatmapCalendar } from "./HeatmapCalendar";
+export type { HeatmapDay } from "./HeatmapCalendar";
+export { ChartLegend, CHART_TONES } from "./chartParts";
+export type { ChartTone, LegendItem } from "./chartParts";
+export { compactNumber } from "./chartMath";
+
+// Mail — one line per message, for inboxes and reply feeds.
+export { MessageList } from "./MessageList";
+export type { MessageListItem } from "./MessageList";
+export { PageTabs } from "./PageTabs";
+export type { PageTab } from "./PageTabs";

package/src/components/kanban.ts

@@ -0,0 +1,78 @@
+/** Board data and the pure move logic behind KanbanBoard — usable on a server too. */
+
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  /** Work-in-progress limit; the count turns to a warning when exceeded. */
+  limit?: number;
+  /** Nothing can be dropped here — a done-and-locked or archived column. */
+  isLocked?: boolean;
+}
+
+export interface KanbanLane {
+  id: string;
+  title: string;
+  subtitle?: string;
+}
+
+/** Items only need an id and a column; order within a cell is the array order. */
+export interface KanbanItemBase {
+  id: string;
+  columnId: string;
+  laneId?: string;
+}
+
+export interface KanbanSlot {
+  columnId: string;
+  laneId?: string;
+  /** Position among the other items in that cell. */
+  index: number;
+}
+
+export interface KanbanMove {
+  itemId: string;
+  from: KanbanSlot;
+  to: KanbanSlot;
+}
+
+export function inCell<T extends KanbanItemBase>(item: T, columnId: string, laneId?: string) {
+  return item.columnId === columnId && (laneId === undefined || item.laneId === laneId);
+}
+
+export function cellItems<T extends KanbanItemBase>(items: T[], columnId: string, laneId?: string) {
+  return items.filter((item) => inCell(item, columnId, laneId));
+}
+
+/** Where an item sits now. */
+export function slotOf<T extends KanbanItemBase>(items: T[], itemId: string): KanbanSlot | null {
+  const item = items.find((i) => i.id === itemId);
+  if (!item) return null;
+  const index = cellItems(items, item.columnId, item.laneId).findIndex((i) => i.id === itemId);
+  return { columnId: item.columnId, laneId: item.laneId, index };
+}
+
+/**
+ * Moves one item to a column (and lane) at an index among that cell's other
+ * items. Returns a new array; everything else keeps its order.
+ */
+export function moveKanbanItem<T extends KanbanItemBase>(
+  items: T[],
+  itemId: string,
+  to: KanbanSlot,
+): T[] {
+  const moving = items.find((i) => i.id === itemId);
+  if (!moving) return items;
+  const rest = items.filter((i) => i.id !== itemId);
+  const laneId = to.laneId ?? moving.laneId;
+  const moved = { ...moving, columnId: to.columnId, laneId } as T;
+  const siblings = rest.filter((i) => inCell(i, to.columnId, laneId));
+  const index = Math.max(0, Math.min(to.index, siblings.length));
+  const anchor = siblings[index];
+  if (anchor) {
+    const at = rest.indexOf(anchor);
+    return [...rest.slice(0, at), moved, ...rest.slice(at)];
+  }
+  const last = siblings[siblings.length - 1];
+  const at = last ? rest.indexOf(last) + 1 : rest.length;
+  return [...rest.slice(0, at), moved, ...rest.slice(at)];
+}

package/src/components/motion.ts

@@ -0,0 +1,78 @@
+/**
+ * Pure motion helpers so JS-driven animation can follow the theme's motion tokens
+ * (`--duration-*`, `--ease-*`) instead of hardcoding its own timing.
+ */
+
+export type Easing = (t: number) => number;
+export type Box = { x: number; width: number };
+
+const linear: Easing = (t) => t;
+
+/** "300ms" or "0.3s" → milliseconds. Anything unreadable → 0, so motion snaps instead of breaking. */
+export function parseDuration(value: string): number {
+  const match = /^\s*(-?[\d.]+)\s*(ms|s)\s*$/.exec(value);
+  if (!match) return 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount) || amount < 0) return 0;
+  return match[2] === "s" ? amount * 1000 : amount;
+}
+
+/** "cubic-bezier(a, b, c, d)" → an easing function; keywords and junk fall back to linear. */
+export function parseEasing(value: string): Easing {
+  const match = /cubic-bezier\(\s*([^)]+)\)/.exec(value);
+  if (!match) return linear;
+  const points = match[1].split(",").map((part) => Number(part.trim()));
+  if (points.length !== 4 || points.some((n) => !Number.isFinite(n))) return linear;
+  const [x1, y1, x2, y2] = points as [number, number, number, number];
+  return cubicBezier(x1, y1, x2, y2);
+}
+
+const NEWTON_STEPS = 8;
+const BISECTION_STEPS = 24;
+const EPSILON = 1e-6;
+
+/** The CSS cubic-bezier timing function: for progress x in [0, 1], the eased y. */
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t;
+  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t;
+  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
+
+  function solveT(x: number) {
+    let t = x;
+    for (let i = 0; i < NEWTON_STEPS; i++) {
+      const error = sampleX(t) - x;
+      if (Math.abs(error) < EPSILON) return t;
+      const slope = slopeX(t);
+      if (Math.abs(slope) < EPSILON) break;
+      t -= error / slope;
+    }
+    let low = 0;
+    let high = 1;
+    t = x;
+    for (let i = 0; i < BISECTION_STEPS; i++) {
+      const value = sampleX(t);
+      if (Math.abs(value - x) < EPSILON) return t;
+      if (value < x) low = t;
+      else high = t;
+      t = (low + high) / 2;
+    }
+    return t;
+  }
+
+  return (x) => {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    return sampleY(solveT(x));
+  };
+}
+
+/** A box part-way from `from` to `to`. */
+export function lerpBox(from: Box, to: Box, t: number): Box {
+  return { x: from.x + (to.x - from.x) * t, width: from.width + (to.width - from.width) * t };
+}