altitude-design 0.2.1 → 0.3.0

package/dist/types/adapter-codemirror.d.ts

@@ -0,0 +1,13 @@
+import { HighlightStyle } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+/**
+ * The editor is an opening: a well with its inside wall, the floor lit while focused and a 2px neutral rim for keyboard
+ * focus. Gutter and lines are ground; the active line is a tint, never a height; the selection is accent. Lint errors
+ * sink their gutter marker into a trench on critical-soft and say the problem in words. Tooltips and completion lists
+ * float at level 3.
+ */
+export declare const altitudeEditorTheme: Extension;
+/** Syntax in ink, ink-muted and accent-ink only: code is text to read, not data to compare, so no data-* hues. */
+export declare const altitudeHighlightStyle: HighlightStyle;
+/** The whole adapter: `new EditorView({ extensions: [altitudeTheme(), …] })`. */
+export declare function altitudeTheme(): Extension;

package/dist/types/agent-fleet.d.ts

@@ -0,0 +1,166 @@
+import * as React from 'react';
+/**
+ * Where an agent is in its run. Needing you is one state with three reasons (`needs`); failed also waits on you, since
+ * nothing happens until someone retries or stops it. Stalled is a suspicion, not a request: the agent is still working
+ * but has made no progress, or keeps retrying the same thing.
+ */
+export type AgentState = 'queued' | 'working' | 'needs-input' | 'blocked' | 'stalled' | 'failed' | 'done' | 'stopped';
+export type AgentNeeds = 'approval' | 'question' | 'review';
+type Time = Date | string | number;
+/** "under a minute", "4 min", "1 h 5 min": a span in words, never a ticking counter. */
+export declare function formatSpan(span: number): string;
+/** Whether a state is waiting on a person: these lead the fleet and fill the requests. */
+export declare const needsYou: (state: AgentState) => state is "failed" | "needs-input";
+export interface AgentFleetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Names the fleet: "Agents". */
+    'aria-label'?: string;
+    /** The time the rows measure waits and runs from. Default: now, refreshed every 30 seconds. */
+    now?: Time;
+    /** The counts in words above the groups: "2 need you · 3 working · 4 done" (`summarizeFleet` writes it). */
+    summary?: React.ReactNode;
+    /** AgentFleetGroups. */
+    children: React.ReactNode;
+}
+/**
+ * Every agent in a run of work, grouped by what they need from you: the ones waiting on you first,
+ * longest wait at the top, then the ones working, then the finished ones folded away. Rows are the record, flush, each
+ * saying its state in words with a lamp that only repeats it; the one open beside the fleet is selected (tinted and
+ * raised a level, as a table's selected row). An agent that starts needing you is announced once.
+ */
+export declare function AgentFleet({ 'aria-label': label, now, summary, className, children, ...rest }: AgentFleetProps): React.JSX.Element;
+export interface AgentFleetGroupProps {
+    /** "Needs you", "Working", "Done". */
+    label: string;
+    /** Shown after the label and in its name; default: the number of rows in it. null: no count (a group of one, like a lead agent). */
+    count?: number | null;
+    /** Folds the group under its heading, a lid that opens it: for finished agents. */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    /** What to say when the group is empty: "Nothing needs you." Without it an empty group isn't drawn. */
+    empty?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+/** A run of agents under a heading, with its count. */
+export declare function AgentFleetGroup({ label, count, collapsible, defaultOpen, empty, children, className }: AgentFleetGroupProps): React.JSX.Element | null;
+export interface AgentFleetItemProps {
+    name: string;
+    state: AgentState;
+    /** For 'needs-input': what it needs. Default 'approval'. */
+    needs?: AgentNeeds;
+    /** One line: what it's doing now, the question it's asking, or what it finished with. */
+    activity?: React.ReactNode;
+    /** When it entered this state: how long it's been waiting on you, stalled or blocked. */
+    since?: Time;
+    /** When it started: how long it's been running (or took, once done). */
+    startedAt?: Time;
+    /** When it finished, for "took 9 min". */
+    endedAt?: Time;
+    /** Where it is in its plan: "Step 3 of 5". */
+    step?: {
+        current: number;
+        total: number;
+    };
+    /** For 'blocked': who or what it's waiting on. "Billing API". */
+    blockedBy?: string;
+    /** Another agent is changing the same file: said on the row, so the clash is caught before either merges. */
+    conflict?: {
+        file: string;
+        with: string;
+    };
+    /** For 'stalled': why. Default "No progress for <since>". */
+    stalledReason?: string;
+    /** Spend so far, already formatted: "$0.42" or "38k tokens". */
+    cost?: string;
+    /** What it produced: a pull request plate, a link. */
+    output?: React.ReactNode;
+    /** Open beside the fleet. */
+    selected?: boolean;
+    onSelect?: () => void;
+    /** Agents it started, as AgentFleetItems: a bracketed list under it. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/** One agent: its name, its state in words, what it's doing, how long, and anything about to go wrong. */
+export declare function AgentFleetItem(props: AgentFleetItemProps): React.JSX.Element;
+/** "2 need you · 3 working · 1 stalled · 4 done": the fleet in words, for its summary, a page title or a tab. */
+export declare function summarizeFleet(states: AgentState[]): string;
+/**
+ * Sorts agents into the fleet's three groups: needs you (longest wait first), working (stalled first, then running,
+ * then blocked and queued), and finished (newest first).
+ */
+export declare function groupAgents<T>(agents: T[], get: (a: T) => {
+    state: AgentState;
+    since?: Time;
+    endedAt?: Time;
+}): {
+    needsYou: T[];
+    working: T[];
+    finished: T[];
+};
+export interface AgentRequestsProps extends React.HTMLAttributes<HTMLElement> {
+    /** Default "Needs you". */
+    title?: string;
+    now?: Time;
+    /** Said when nothing is waiting. Default "Nothing needs you. Agents ask here when they need a decision." */
+    empty?: React.ReactNode;
+    /** AgentRequests, in any order: they're shown longest wait first. */
+    children?: React.ReactNode;
+}
+/**
+ * Every decision your agents are waiting on, in one queue, so you can answer them without opening
+ * each agent: oldest first, because a wait costs the most the longer it runs. Each request asks for action, so it's a
+ * raised card that arrives lifted and settles; nothing in it has been dispatched. A new one is announced once.
+ */
+export declare function AgentRequests({ title, now, empty, className, children, ...rest }: AgentRequestsProps): React.JSX.Element;
+export interface AgentRequestProps {
+    /** Which agent is asking. */
+    agent: string;
+    /** 'failed' is an agent that stopped on an error and waits for Retry or Stop. */
+    kind: AgentNeeds | 'failed';
+    /** The ask in a sentence: "Run the migration on staging?" */
+    title: React.ReactNode;
+    /** What happens if you say yes, or what went wrong. */
+    detail?: React.ReactNode;
+    /** When it started waiting. */
+    since: Time;
+    /** The answers you can give here: Buttons, secondary and ghost (the view's one primary stays where it is). */
+    actions?: React.ReactNode;
+    /** Opens the agent beside the queue, for anything that needs more than the actions. */
+    onOpen?: () => void;
+    className?: string;
+}
+/** One decision an agent is waiting on: who's asking, what, for how long, and the answers you can give in place. */
+export declare function AgentRequest({ agent, kind, title, detail, since, actions, onOpen, className }: AgentRequestProps): React.JSX.Element;
+/** What a stretch of an agent's time was spent on. 'waiting' is waiting on you; 'blocked' is waiting on another agent. */
+export type AgentLaneState = 'working' | 'waiting' | 'blocked' | 'failed';
+export interface AgentLane {
+    id: string;
+    name: string;
+    /** Stretches of time; one without `to` runs to now. Gaps are time it wasn't running (queued, or finished). */
+    segments: {
+        from: Time;
+        to?: Time;
+        state: AgentLaneState;
+    }[];
+}
+export interface AgentLanesProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    lanes: AgentLane[];
+    /** Where the axis starts. Default: the earliest segment. */
+    start?: Time;
+    now?: Time;
+    /** The sentence above the lanes. Default: how long agents waited on you, and the longest wait. */
+    takeaway?: React.ReactNode;
+    /** Names the figure. Default "Where the agents' time went". */
+    'aria-label'?: string;
+    selected?: string;
+    onSelect?: (id: string) => void;
+}
+/**
+ * Where each agent's time went, one lane per agent on a shared clock: the time they spent waiting on
+ * you is the bottleneck a fleet hides, so the takeaway says it first. A chart, so its marks are flat (Charts): the
+ * stretches are equal-height bars on each lane's ground line, told apart by fill and pattern (waiting is hatched,
+ * blocked an outline) and named in a legend in words; a 1px "Now" rule ends the record. A table says the same.
+ */
+export declare function AgentLanes({ lanes, start, now, takeaway, 'aria-label': label, selected, onSelect, className, ...rest }: AgentLanesProps): React.JSX.Element;
+export {};

package/dist/types/ai-label.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface AISource {
+    title: string;
+    url?: string;
+}
+export interface AILabelProps {
+    /** What it marks ("Summary", "Reply"), for its name: "Summary generated with AI". Default "Content". */
+    subject?: string;
+    /** The model that produced it. */
+    model?: string;
+    generatedAt?: Date | string | number;
+    /** What it was based on. */
+    sources?: AISource[];
+    /** Confidence, in words ("Medium: two sources disagreed"). */
+    confidence?: string;
+    /** A person who reviewed and accepted it: the plate reads "Drafted with AI". */
+    reviewedBy?: string;
+    /** A person who changed it after it was generated. */
+    editedBy?: string;
+    /** Anything else about how it was made. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Marks what AI made, and explains it when asked. A label is part of the record, so it's a flush Badge plate ("AI", or
+ * "Drafted with AI" once a person has reviewed it), with no gradient and no glow: the light never moves. It acts, so it
+ * lifts one level when pointed at and opens a Popover saying how the content was produced. Provenance stays on the
+ * accepted record.
+ */
+export declare function AILabel({ subject, model, generatedAt, sources, confidence, reviewedBy, editedBy, children, className }: AILabelProps): React.JSX.Element;

package/dist/types/app-shell.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+type SidebarCtxT = {
+    collapsed: boolean;
+    setCollapsed: (c: boolean) => void;
+    mobile: boolean;
+    drawer: boolean;
+    setDrawer: (o: boolean) => void;
+    toggle: () => void;
+};
+/** The sidebar's state: collapsed to a rail (desktop) or open as a drawer (narrow screens), and how to toggle it. */
+export declare const useSidebar: () => SidebarCtxT;
+export interface SidebarProviderProps {
+    /** Collapsed to a rail of icons. Persisting it (a cookie, localStorage) is up to your app. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Below this width the sidebar becomes a drawer. Default 640, the compact breakpoint (`breakpoint-compact`). */
+    mobileBreakpoint?: number;
+    children: React.ReactNode;
+}
+/** Holds the sidebar's state, and toggles it with ⌘B / Ctrl+B. */
+export declare function SidebarProvider({ collapsed, defaultCollapsed, onCollapsedChange, mobileBreakpoint, children }: SidebarProviderProps): React.JSX.Element;
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** 'icon' (default) collapses to a rail of icons; 'none' never collapses. */
+    collapsible?: 'icon' | 'none';
+    /** The navigation landmark's name. Default "Main". */
+    'aria-label'?: string;
+}
+/**
+ * Where you are is part of the record, so the frame lies on the ground: the sidebar is a nav on surface-ground divided
+ * from the page by a line. Only what's in it acts. On narrow screens it moves into a Sheet drawer.
+ */
+export declare function Sidebar({ collapsible, className, children, 'aria-label': label, ...rest }: SidebarProps): React.JSX.Element;
+export declare function SidebarHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function SidebarFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** The scrolling middle. The current item's raised pill glides here from item to item, as segmented Tabs' does. */
+export declare function SidebarContent({ className, children, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The group's name, shown above it. */
+    label?: React.ReactNode;
+    /** The label is a disclosure button that shows and hides the group. */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+/** Destinations that belong together, under a label in ink-muted. A collapsible group is a disclosure. */
+export declare function SidebarGroup({ label, collapsible, defaultOpen, className, children, ...rest }: SidebarGroupProps): React.JSX.Element;
+export declare function SidebarGroupLabel({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function SidebarMenu({ className, ...rest }: React.HTMLAttributes<HTMLUListElement>): React.JSX.Element;
+/** One destination. A SidebarMenuBadge inside it is said as part of the button's name. */
+export declare function SidebarMenuItem({ className, children, ...rest }: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element;
+export interface SidebarMenuButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** The page you're on: aria-current="page", and the raised pill. */
+    current?: boolean;
+    icon?: React.ReactNode;
+    /** Styles your own link element (a router's Link). Pass exactly one element; its children are the label. */
+    asChild?: boolean;
+}
+/** A destination: flush at rest, lifts one level when pointed at; the current one sits on the raised pill. */
+export declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface SidebarMenuBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    /** What the count is, for its name: "4 unread". Default: the number alone. */
+    label?: string;
+}
+/** A count on a destination. Only a count floats (Badge variant="count"); it's part of the destination's name. */
+export declare function SidebarMenuBadge({ label, className, children, ...rest }: SidebarMenuBadgeProps): React.JSX.Element;
+/** Collapses the sidebar to a rail (desktop) or opens the drawer (narrow screens). ⌘B / Ctrl+B does the same. */
+export declare function SidebarTrigger({ className, ...rest }: React.ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** The page beside the sidebar: the main landmark, with --alt-page-pad set for PageHeader. */
+export declare function SidebarInset({ className, ...rest }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+export interface AppShellProps extends Omit<SidebarProviderProps, 'children'> {
+    sidebar: React.ReactNode;
+    /** The top bar's contents (search, the user's menu). A SidebarTrigger comes first by itself. */
+    topBar?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * The frame of an app: a sidebar of destinations, a top bar and the page, all on the ground and divided by lines.
+ * The top bar rises when content passes under it. A skip link jumps to the page.
+ */
+export declare function AppShell({ sidebar, topBar, children, className, ...provider }: AppShellProps): React.JSX.Element;
+export {};

package/dist/types/area-chart.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { type ChartConfig, type ChartContextValue, type ChartDatum, type ChartInfo, type ChartStatus } from './chart.js';
+import { type ChartWindow } from './line-chart.js';
+export interface AreaChartProps {
+    /** The records, in x order: one per time or value of x. */
+    data: ChartDatum[] | null | undefined | PromiseLike<ChartDatum[] | null>;
+    /** The key of each record's x: an ISO date, a timestamp or a number. */
+    x: string;
+    /**
+     * Stack the series into bands that add up to the total, in config order from the bottom. 'expand' stacks them as
+     * shares of 100%. Default: one area (or several overlapping, though a LineChart compares those better).
+     */
+    stack?: boolean | 'expand';
+    /** 'linear' joins points with straight lines; 'monotone' curves through them without overshooting. Default 'linear'. */
+    curve?: 'linear' | 'monotone';
+    /** Formats values (the axis, the readout, the names and the summary) of series that have no format of their own. */
+    y?: {
+        format?: (value: number) => string;
+    };
+    /** Name each band inside itself where it's tall and wide enough. Default: on when stacked. */
+    labels?: boolean;
+    /** The crosshair and readout. Default true. */
+    tooltip?: boolean;
+    /**
+     * Which records aren't yet the record: 'partial' for a period still being counted, 'projected' for a forecast. From
+     * the last settled point on, bands are hatched rather than filled and their top line is dashed.
+     */
+    status?: (d: ChartDatum) => ChartStatus | undefined;
+    /** The rule where the record ends: its word (default "Today"), or false for none. */
+    boundary?: string | false;
+    /**
+     * Let people pin a reading to the plot (#190): with the readout open, a click (or P on the keyboard path, or a tap
+     * while the touch readout is open) sets it down as a plate. true allows two, which compare in words; a number allows
+     * that many. Escape removes the last.
+     */
+    pinnable?: boolean | number;
+    /** The pinned readings' x values, controlled (to keep them in the URL, say); and when they change. */
+    pins?: Array<string | number>;
+    onPinsChange?: (pins: Array<string | number>) => void;
+    /**
+     * What the chart is about (#188): these series keep their colours and the rest are drawn in data-context, their
+     * labels in ink-muted. The author's statement of importance, not a reader's filter (that's relevance).
+     */
+    focus?: string[];
+    /**
+     * Filter in place: which records match. The bands recede to 35% around its misses (each record owns its stretch of
+     * x), keeping its place and colour; the frame says how many match. Nothing is removed.
+     */
+    relevance?: (d: ChartDatum) => 'match' | 'miss' | undefined;
+    /** With relevance: fit the axis to the matches. Default false: the axis holds, so positions survive. */
+    rescale?: boolean;
+    /** The selected record's x value, for marks you can select. The others recede; the frame says "Filtered to …". */
+    selected?: unknown;
+    /** Makes marks selectable: called with the chosen record, or null when the selection clears (Escape, Clear, or choosing it again). */
+    onSelect?: (d: ChartDatum | null) => void;
+    /** Makes marks open a level down, inside a Drilldown: return the id of the current node's child this record opens. */
+    drill?: (d: ChartDatum) => string | null | undefined;
+    /** Show only the latest stretch of x, as LineChart's `window`: it glides one step in a `live` container. */
+    window?: ChartWindow;
+    /** Called with the new { start, end } when a ChartBrush moves the window. Without `window`, the brush keeps its own. */
+    onWindowChange?: (window: {
+        start: string | number;
+        end: string | number;
+    }) => void;
+    /** A ChartTooltip or ChartLegend. */
+    children?: React.ReactNode;
+    /** What the plot says when there's no data: an EmptyState at widget size. */
+    empty?: import('./chart.js').ChartEmpty;
+}
+/**
+ * A total over time and what it's made of. Bands are the record: flat data-* fills stacked on the ground line in config
+ * order (the order never changes, so a band never jumps), each parted from the one above by a 2px line in the plot's
+ * own colour, with a 2px top line on the topmost. A single area is a flat data-1 fill at reduced opacity under a 2px
+ * line. No gradient fill: the only face gradient in Altitude is the sheen, and it means "press it".
+ */
+export declare function AreaChart({ stack, curve, labels }: AreaChartProps): React.JSX.Element;
+export declare namespace AreaChart {
+    var chartPoint: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum, key: string) => [number, number];
+    var chartInfo: (props: Record<string, unknown>, config: ChartConfig) => ChartInfo;
+}

package/dist/types/artifact.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+export type ArtifactStatus = 'writing' | 'complete' | 'failed';
+export interface ArtifactProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Names the pane: "Pricing page". */
+    title: string;
+    /** Default 'complete'. */
+    status?: ArtifactStatus;
+    /** The latest version's number: "Writing… version 3". */
+    version?: number;
+    onRetry?: () => void;
+    /** Its id, shared with ArtifactReference's aria-controls. Default generated. */
+    id?: string;
+}
+/**
+ * What an agent is making, beside the conversation (#271): a pane on the ground, named by its title. While it's
+ * written it isn't the record yet (a dashed rule at the pane's edge, "Writing… version 3"); complete, the rule goes
+ * solid with one afterglow; failed, "Couldn't finish" with a mark and Retry, the last whole version still there (no coloured edge: #374). Viewing an earlier
+ * version is a mode, so it's a strip and words across the pane's top, not a lift.
+ */
+export declare function Artifact({ title, status, version, onRetry, id: given, className, children, ...rest }: ArtifactProps): React.JSX.Element;
+export interface ArtifactHeaderProps {
+    /** Copy (the whole artifact, or this value). */
+    onCopy?: boolean | (() => string);
+    onDownload?: () => void;
+    /** Opens it on its own (a new tab). */
+    onOpen?: () => void;
+    onClose?: () => void;
+    /** Extra tools, before the standard ones. */
+    children?: React.ReactNode;
+}
+/** The title, its state in words, and ghost tools. */
+export declare function ArtifactHeader({ onCopy, onDownload, onOpen, onClose, children }: ArtifactHeaderProps): React.JSX.Element;
+export interface ArtifactVersionsProps {
+    /** How many versions there are. */
+    versions: number;
+    /** The one shown, from 1. */
+    current: number;
+    onChange: (version: number) => void;
+    /** Make the version shown the latest again. */
+    onRestore?: (version: number) => void;
+}
+/** Previous and next version, and, when an earlier one is shown, a strip that says so with a way back. */
+export declare function ArtifactVersions({ versions, current, onChange, onRestore }: ArtifactVersionsProps): React.JSX.Element | null;
+export interface ArtifactContentProps {
+    /** The ways to see it. With more than one, a segmented switch picks between them. */
+    views: {
+        preview?: React.ReactNode;
+        source?: React.ReactNode;
+        changes?: React.ReactNode;
+    };
+    /** Default the first given. */
+    defaultView?: 'preview' | 'source' | 'changes';
+}
+/** The artifact itself: Preview, Source and Changes, as segmented Tabs when there's more than one. */
+export declare function ArtifactContent({ views, defaultView }: ArtifactContentProps): React.JSX.Element;
+export interface ArtifactReferenceProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    title: string;
+    version?: number;
+    status?: ArtifactStatus;
+    /** The Artifact's id, for aria-controls and to return focus on Escape. */
+    controls: string;
+    onOpen: () => void;
+}
+/** The plate in a message that opens the artifact; a plate that acts, lifting one level when pointed at. */
+export declare function ArtifactReference({ title, version, status, controls, onOpen, className, ...rest }: ArtifactReferenceProps): React.JSX.Element;

package/dist/types/bar-chart.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { type ChartCompare, type ChartConfig, type ChartContextValue, type ChartDatum, type ChartInfo, type ChartStatus } from './chart.js';
+import { type ChartWindow } from './line-chart.js';
+export interface BarChartProps {
+    /** The records: one per category. */
+    data: ChartDatum[] | null | undefined | PromiseLike<ChartDatum[] | null>;
+    /** The key of each record's category. */
+    x: string;
+    /** Order the categories by their total: 'desc' puts the largest first. Default: the data's order. */
+    sort?: 'asc' | 'desc';
+    /** Stack the series into one bar per category (parts of a total); 'expand' stacks them as shares of 100%. Default: side by side. */
+    stack?: boolean | 'expand';
+    /** 'horizontal' runs categories down the side, for long category names or many of them. Default 'vertical'. */
+    layout?: 'vertical' | 'horizontal';
+    /** Label values at their bars, selectively: the largest, or the last category. Never every bar. Default 'none'. */
+    labels?: 'max' | 'last' | 'none';
+    /** The crosshair and readout. Default true. */
+    tooltip?: boolean;
+    /**
+     * Which categories aren't yet the record: 'partial' for a period still being counted (this month so far), 'projected'
+     * for a forecast. Their bars are hatched, never solid, and say "So far" or "Projected". When a partial period
+     * completes, its hatching fills in solid.
+     */
+    status?: (d: ChartDatum) => ChartStatus | undefined;
+    /** The rule where the record ends: its word (default "Today"), or false for none. */
+    boundary?: string | false;
+    /**
+     * Read each value against the record before (#189): `{ key: 'lastMonth', label: 'August' }` for a field on the same
+     * record, or `{ data: lastWeek, label: 'Last week' }` for records matched by position. The earlier value is a 2px ink
+     * tick across the bar (the bullet graph's comparative measure); a stack is compared by its total.
+     */
+    compare?: ChartCompare;
+    /**
+     * Let people pin a reading to the plot (#190): with the readout open, a click (or P on the keyboard path, or a tap
+     * while the touch readout is open) sets it down as a plate. true allows two, which compare in words; a number allows
+     * that many. Escape removes the last.
+     */
+    pinnable?: boolean | number;
+    /** The pinned readings' x values, controlled (to keep them in the URL, say); and when they change. */
+    pins?: Array<string | number>;
+    onPinsChange?: (pins: Array<string | number>) => void;
+    /**
+     * What the chart is about (#188): series keys that keep their colours while the rest take data-context, or a test for
+     * the records that keep theirs (on a one-series chart, the categories the takeaway names). The author's statement of
+     * importance, not a reader's filter (that's relevance).
+     */
+    focus?: string[] | ((d: ChartDatum) => boolean);
+    /**
+     * Filter in place: which categories match. Misses recede to 35% and keep their place and colour; the frame says how
+     * many match. Nothing is removed.
+     */
+    relevance?: (d: ChartDatum) => 'match' | 'miss' | undefined;
+    /** With relevance: fit the axis to the matches. Default false: the axis holds, so positions survive. */
+    rescale?: boolean;
+    /** The selected record's x value, for marks you can select. The others recede; the frame says "Filtered to …". */
+    selected?: unknown;
+    /** Makes marks selectable: called with the chosen record, or null when the selection clears (Escape, Clear, or choosing it again). */
+    onSelect?: (d: ChartDatum | null) => void;
+    /** Makes marks open a level down, inside a Drilldown: return the id of the current node's child this record opens. */
+    drill?: (d: ChartDatum) => string | null | undefined;
+    /** Bars over time: show only a stretch of the categories, by their dates ({ start, end }) or the last { points }. A ChartBrush sets it. */
+    window?: ChartWindow;
+    /** Called with the new { start, end } when a ChartBrush moves the window. Without `window`, the brush keeps its own. */
+    onWindowChange?: (window: {
+        start: string | number;
+        end: string | number;
+    }) => void;
+    /** A ChartTooltip, to change what the readout shows. */
+    children?: React.ReactNode;
+    /** What the plot says when there's no data: an EmptyState at widget size. */
+    empty?: import('./chart.js').ChartEmpty;
+}
+/**
+ * Amounts compared across categories, as lengths standing on the ground line. Bars are the record: flat fills in
+ * their series' colours, square at the ground and rounded only at the data end, never shadowed or lifted. One
+ * series, several side by side, or stacked into a total.
+ */
+export declare function BarChart({ stack, labels, compare }: BarChartProps): React.JSX.Element | null;
+export declare namespace BarChart {
+    var chartPoint: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum, key: string) => [number, number];
+    var chartMark: (props: Record<string, unknown>, ctx: ChartContextValue, d: ChartDatum, key: string) => string | null;
+    var chartInfo: (props: Record<string, unknown>, config: ChartConfig) => ChartInfo;
+}

package/dist/types/bar-list.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface BarListItem {
+    /** The row's label: a page, a referrer, a customer. Also its key unless `key` is given. */
+    name: string;
+    value: number;
+    key?: string;
+    /** Makes the row a link. */
+    href?: string;
+}
+export interface BarListProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onSelect'> {
+    /** The rows. Undefined while your data loads: until they land the list is imprinted rows. */
+    data: BarListItem[] | null | undefined;
+    /** Formats values. Default: Intl.NumberFormat. */
+    format?: (value: number) => string;
+    /** Show at most this many rows; the rest fold into one "Other" row, with a "Show all" button. */
+    limit?: number;
+    /** After each value, show its share of the total ("22%"). */
+    share?: boolean;
+    /** Rank by value, largest first (default), or keep the data's order. */
+    sort?: 'desc' | false;
+    /** What the rows are, in the plural, for "Other (14 pages)" and "Show all 52 pages". */
+    noun?: string;
+    /** Makes each row a button (rows with `href` are links). */
+    onSelect?: (item: BarListItem) => void;
+    /** Filter in place: matches rise one level, misses sink into a well and say "Not matching". Nothing is removed. */
+    relevance?: (item: BarListItem) => 'match' | 'miss' | undefined;
+    locale?: string;
+}
+/**
+ * A ranked list whose rows are their own bars. Rows are the record, flush on the ground with line dividers, like a
+ * table's; each carries a flat data-1 bar behind its label, its length the row's value against the largest, faint
+ * enough that ink holds 4.5:1 over it. A row that does something (a link, a button) lifts one level when pointed at,
+ * as Table's rows do; its bar stays flat on it. When values change, rows are carried to their new ranks all at once.
+ */
+export declare function BarList(props: BarListProps): React.JSX.Element;

package/dist/types/breadcrumb.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+/**
+ * One step of the staircase Breadcrumb and Drilldown share: every step stands on the same ground line, and the deeper
+ * it is, the taller its slab (its wall grows 3px a level). Not exported from the package.
+ */
+export declare function CrumbStep({ depth, current, isNew, children }: {
+    depth: number;
+    current?: boolean;
+    isNew?: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export interface BreadcrumbEntry {
+    label: React.ReactNode;
+    /** Where the step goes. The last entry is the current page and never a link. */
+    href?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    items?: BreadcrumbEntry[];
+    /** Deeper paths keep the first step and the last (maxItems − 1), with the middle in a menu behind "…". */
+    maxItems?: number;
+    /** Renders a step's link your way (a router's Link). Spread the props onto it. */
+    renderLink?: (item: BreadcrumbEntry, props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        className: string;
+    }) => React.ReactElement;
+    /**
+     * 'collapse' (default): when the trail doesn't fit on one line, steps from the second onward move behind "…" until it
+     * does, keeping the first step and the current page (#263). 'wrap': it wraps onto more lines, as before.
+     */
+    fit?: 'collapse' | 'wrap';
+    /** Called when a step in the "…" menu is chosen. Default: follow its href. */
+    onNavigate?: (item: BreadcrumbEntry) => void;
+    /** Composable parts (BreadcrumbList, BreadcrumbItem, …), instead of items. */
+    children?: React.ReactNode;
+}
+/**
+ * Where you are, as a staircase: every step stands on one ground line and each deeper place is a taller step, as in
+ * Drilldown (without its pile: a route change lays no sheet). Steps you can go back to lift when pointed at; the current
+ * page is a step that doesn't press. A route change re-renders it without motion: a new route isn't an arrival.
+ */
+export declare function Breadcrumb({ items, maxItems, fit, renderLink, onNavigate, className, children, 'aria-label': label, ...rest }: BreadcrumbProps): React.JSX.Element;
+/** The ordered list of steps. Each BreadcrumbItem inside it gets its depth from its place. */
+export declare function BreadcrumbList({ children, className, ...rest }: React.OlHTMLAttributes<HTMLOListElement>): React.JSX.Element;
+export interface BreadcrumbItemProps {
+    depth?: number;
+    children: React.ReactNode;
+}
+/** One step. The step holding a BreadcrumbPage is the current one. */
+export declare function BreadcrumbItem({ depth, children }: BreadcrumbItemProps): React.JSX.Element;
+/** A step you can go back to. */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+/** The current page: a step that doesn't press. */
+export declare function BreadcrumbPage({ className, ...rest }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+/** The staircase needs no separators: each step's height already says it's deeper. Kept for code written for shadcn/ui; it renders nothing. */
+export declare function BreadcrumbSeparator(_: {
+    children?: React.ReactNode;
+}): null;
+/** Collapsed steps behind "…", in a menu. */
+export declare function BreadcrumbEllipsis({ items, onNavigate }: {
+    items: BreadcrumbEntry[];
+    onNavigate?: (item: BreadcrumbEntry) => void;
+}): React.JSX.Element;