@cueplusplus/ui 0.13.0

package/dist/instruments/data-tree.js

@@ -0,0 +1,303 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { flattenTree } from "../chrome/_tree.js";
+import { ChevronRightGlyph } from "../chrome/_glyphs.js";
+import { activateRowFromClick, dataRowVariants } from "./_data-row.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/data-tree.tsx
+/**
+* The hierarchy guides, drawn as a background rather than as characters or
+* borders.
+*
+* One hairline per ancestor level, from a `repeating-linear-gradient` whose
+* period is the indent step and whose painted width is `depth × step` — so the
+* rules stop exactly where the row's own content begins. Three properties of
+* this mechanism are the reason it is not box-drawing glyphs and not a stack of
+* `border-left` spacers:
+*
+* - It is a `background-image`, so the row's hover and selection
+*   `background-color` cannot cover it, move it or switch it off. A guide drawn
+*   with borders on spacer elements has to be re-tinted for every row state.
+* - It costs no DOM. A tree of two thousand visible rows adds no elements per
+*   level, which is what makes a virtualized variant of this row viable later.
+* - It is a picture of structure, not a picture of a tree: `├` and `└` in a mono
+*   grid are characters a screen reader may read out and a proportional font
+*   destroys.
+*
+* The step is `--cue-data-tree-indent` (default `1.25rem`), a local custom
+* property so a `@container` rule can tighten the tree at the same breakpoint it
+* sheds a column — and switch the guides off entirely at the width where an
+* indent is more expensive than it is informative.
+*/
+const DATA_TREE_GUIDES = [
+	"bg-no-repeat",
+	"[background-image:repeating-linear-gradient(to_right,var(--cue-hair)_0,var(--cue-hair)_1px,transparent_1px,transparent_var(--cue-data-tree-indent,1.25rem))]",
+	"[background-size:calc(var(--depth)_*_var(--cue-data-tree-indent,1.25rem))_100%]",
+	"[background-position:var(--cue-pad-row-x)_0]"
+].join(" ");
+/**
+* `DataTreeItem` as the shape `flattenTree` walks, plus a way back.
+*
+* `flattenTree` (`src/chrome/_tree.ts`) is the outline algorithm this library
+* already has, and re-implementing "which rows are visible, at what level, in
+* what position of what set" for a second tree is how two trees start
+* disagreeing about what a collapse hides. It reads `id`, `children` and
+* `disabled`; its `TreeItem` also *declares* a `label`, which a data row does
+* not have — its content is columns. So the walk maps to that shape with a null
+* label and hands back an index from id to the caller's own item, which is what
+* the row renderer reads.
+*
+* @param items The roots, in display order.
+* @returns The outline `flattenTree` accepts, and the items keyed by id.
+*/
+function outlineOf(items) {
+	const byId = /* @__PURE__ */ new Map();
+	const walk = (nodes) => nodes.map((node) => {
+		byId.set(node.id, node);
+		const outlineNode = {
+			id: node.id,
+			label: null,
+			disabled: node.disabled
+		};
+		if (node.children !== void 0) outlineNode.children = walk(node.children);
+		return outlineNode;
+	});
+	return {
+		outline: walk(items),
+		byId
+	};
+}
+/**
+* A hierarchy of multi-column rows: the tree idiom over the `DataRow` anatomy.
+*
+* ## The ARIA pattern, chosen before the component was written
+*
+* `role="treegrid"` is **rejected** for this foundation. It is the semantically
+* exact answer — tabular *and* hierarchical — and it is the one with the worst
+* real-world assistive-technology record: Adrian Roselli's survey of expando
+* tables calls its support poor and notes that the APG's own worked example
+* carries unresolved issues; fancytree's maintainer describes treegrid support
+* as unproven ground; MUI X shipped hierarchical rows with no `aria-level` /
+* `aria-expanded` / `aria-setsize` at all and retrofitted them later. Treegrid
+* earns its cost when cells are individually interactive or editable, because
+* then a reader genuinely needs two-dimensional cell navigation. This surface is
+* read-and-navigate: you move down rows, fold a branch, and open the thing a row
+* names.
+*
+* So the pattern is `role="tree"` with `role="treeitem"` rows — VS Code's
+* choice and Carbon's, and the best-supported composite pattern in ARIA:
+*
+* - A **flat DOM** with `aria-level` / `aria-posinset` / `aria-setsize` per row
+*   rather than nested `role="group"` wrappers.
+* - **Roving tabindex**: the tree is one Tab stop and the arrows move inside it.
+* - The **APG tree keyboard map**: Up/Down between visible rows, Home/End to the
+*   ends, Right to unfold then to descend, Left to fold then to ascend,
+*   Enter/Space to select.
+* - Expansion lives on the **row**, as `aria-expanded` on the `treeitem` — that
+*   is what tree semantics mean by a parent, and it is why the chevron here is
+*   `role="presentation"` rather than a button. (The other half of this trade
+*   is `Table.GroupRow`, where the table's semantics own the grouping and a real
+*   `<button aria-expanded>` owns the disclosure. Two patterns, each internally
+*   consistent; what would be wrong is half of each.)
+*
+* **The documented trade**: columns are not independently navigable. A row's
+* multi-column content lives *inside* the treeitem, so a screen-reader user
+* hears the row as one string rather than moving cell to cell through it. For a
+* dense browse-and-open surface that is the better bargain — `tree` works today
+* on every screen reader, `treegrid` does not — but a surface whose cells are
+* genuinely editable has outgrown this component and wants a real treegrid from
+* a library that maintains one.
+*
+* ## Everything else
+*
+* Rows are the `DataRow` chassis: same padding, same hairline, same hover wash,
+* same inset focus ring, same `group/data-row`, so `DataRow.Actions` reveals in
+* a tree exactly as it does in a ledger. The row element itself is the
+* treeitem — one element owns focus, expansion, selection and the click reading
+* — and the caller's `DataRow.*` slots are its content.
+*
+* A tree whose items declare no children anywhere is a flat list: no chevrons,
+* no spacer column where a chevron would be, no guides, and `aria-expanded` on
+* nothing. A leaf row that carried `aria-expanded="false"` would tell a screen
+* reader it has children it does not have.
+*
+* @example
+* <DataTree
+*   aria-label="Patch"
+*   items={nodes}
+*   defaultExpanded={["inputs"]}
+*   selected={selected}
+*   onSelect={setSelected}
+*   className="[--cue-data-row-cols:1fr_8rem_auto]"
+* />
+*/
+const DataTree = React.forwardRef(function DataTree({ className, items, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected = null, onSelect, guides = true, onKeyDown, ...elementProps }, ref) {
+	const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded ?? []);
+	const expandedList = expandedProp ?? uncontrolledExpanded;
+	const expandedSet = React.useMemo(() => new Set(expandedList), [expandedList]);
+	const [uncontrolledSelected, setUncontrolledSelected] = React.useState(defaultSelected);
+	const selected = selectedProp === void 0 ? uncontrolledSelected : selectedProp;
+	const { outline, byId } = React.useMemo(() => outlineOf(items), [items]);
+	const rows = React.useMemo(() => flattenTree(outline, expandedSet), [outline, expandedSet]);
+	const hierarchical = React.useMemo(() => {
+		for (const item of byId.values()) if (item.children !== void 0) return true;
+		return false;
+	}, [byId]);
+	const [activeId, setActiveId] = React.useState(null);
+	const activeRowId = activeId !== null && rows.some((row) => row.item.id === activeId) ? activeId : rows[0]?.item.id ?? null;
+	const rowRefs = React.useRef(/* @__PURE__ */ new Map());
+	const registerRow = React.useCallback((id, element) => {
+		if (element === null) rowRefs.current.delete(id);
+		else rowRefs.current.set(id, element);
+	}, []);
+	const focusRow = React.useCallback((id) => {
+		setActiveId(id);
+		rowRefs.current.get(id)?.focus();
+	}, []);
+	const setExpanded = React.useCallback((id, next) => {
+		const current = expandedProp ?? uncontrolledExpanded;
+		const result = next ? current.includes(id) ? [...current] : [...current, id] : current.filter((entry) => entry !== id);
+		if (expandedProp === void 0) setUncontrolledExpanded(result);
+		onExpandedChange?.(result);
+	}, [
+		expandedProp,
+		onExpandedChange,
+		uncontrolledExpanded
+	]);
+	const select = React.useCallback((row) => {
+		if (byId.get(row.item.id)?.disabled === true) return;
+		if (selectedProp === void 0) setUncontrolledSelected(row.item.id);
+		onSelect?.(row.item.id);
+	}, [
+		byId,
+		onSelect,
+		selectedProp
+	]);
+	/**
+	* The APG tree keyboard map.
+	*
+	* A near-copy of `Tree`'s handler in `src/chrome/tree.tsx`, and deliberately
+	* so: the two trees paint different rows (a label with a glyph gutter there,
+	* columns with a CSS indent here) and share `flattenTree`, which is the half
+	* that is actually hard. Extracting the twenty lines below into a third module
+	* would have to thread the row registry, the expansion setter and the
+	* selection through it, and the seam would be wider than the code. If a third
+	* tree ever appears, that is the moment to hoist it.
+	*/
+	const handleKeyDown = React.useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.target.getAttribute("data-slot") !== "data-tree-row") return;
+		const index = rows.findIndex((row) => row.item.id === activeRowId);
+		const row = rows[index];
+		if (row === void 0) return;
+		const move = (target) => {
+			if (target === void 0) return;
+			event.preventDefault();
+			focusRow(target.item.id);
+		};
+		switch (event.key) {
+			case "ArrowDown":
+				move(rows[index + 1]);
+				return;
+			case "ArrowUp":
+				move(rows[index - 1]);
+				return;
+			case "Home":
+				move(rows[0]);
+				return;
+			case "End":
+				move(rows[rows.length - 1]);
+				return;
+			case "ArrowRight": {
+				event.preventDefault();
+				if (row.hasChildren && !row.expanded) {
+					setExpanded(row.item.id, true);
+					return;
+				}
+				const child = rows[index + 1];
+				if (row.expanded && child?.parentId === row.item.id) focusRow(child.item.id);
+				return;
+			}
+			case "ArrowLeft":
+				event.preventDefault();
+				if (row.expanded) setExpanded(row.item.id, false);
+				else if (row.parentId !== null) focusRow(row.parentId);
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				select(row);
+				return;
+		}
+	}, [
+		activeRowId,
+		focusRow,
+		onKeyDown,
+		rows,
+		select,
+		setExpanded
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...elementProps,
+		role: "tree",
+		"data-slot": "data-tree",
+		className: cn("flex flex-col font-mono text-(length:--cue-text-ui) text-fg", className),
+		onKeyDown: handleKeyDown,
+		children: rows.map((row) => {
+			const item = byId.get(row.item.id);
+			if (item === void 0) return null;
+			const isSelected = selected === item.id;
+			const state = {
+				level: row.level,
+				hasChildren: row.hasChildren,
+				expanded: row.expanded,
+				selected: isSelected
+			};
+			return /* @__PURE__ */ jsxs("div", {
+				ref: (element) => registerRow(item.id, element),
+				role: "treeitem",
+				tabIndex: activeRowId === item.id ? 0 : -1,
+				"aria-level": row.level + 1,
+				"aria-posinset": row.position,
+				"aria-setsize": row.setSize,
+				"aria-expanded": row.hasChildren ? row.expanded : void 0,
+				"aria-selected": isSelected,
+				"aria-disabled": item.disabled === true ? true : void 0,
+				"data-slot": "data-tree-row",
+				"data-selected": isSelected ? "" : void 0,
+				"data-disabled": item.disabled === true ? "" : void 0,
+				style: { "--depth": row.level },
+				onFocus: () => setActiveId(item.id),
+				onClick: (event) => activateRowFromClick(event, () => select(row)),
+				className: cn(dataRowVariants({
+					layout: "flex",
+					indent: true,
+					interactive: true
+				}), guides && row.level > 0 ? DATA_TREE_GUIDES : null),
+				children: [hierarchical ? row.hasChildren ? /* @__PURE__ */ jsx("span", {
+					role: "presentation",
+					"aria-hidden": "true",
+					"data-slot": "data-tree-toggle",
+					onClick: (event) => {
+						event.stopPropagation();
+						setExpanded(item.id, !row.expanded);
+					},
+					className: "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center text-fg-subtle",
+					children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-150 motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-icon-sm shrink-0"
+				}) : null, /* @__PURE__ */ jsx("span", {
+					"data-slot": "data-tree-row-content",
+					className: "grid min-w-0 flex-1 items-center gap-(--cue-space-3) [grid-template-columns:var(--cue-data-row-cols,1fr_auto)]",
+					children: typeof item.row === "function" ? item.row(state) : item.row
+				})]
+			}, item.id);
+		})
+	});
+});
+//#endregion
+export { DataTree };

package/dist/instruments/group-bar.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+//#region src/instruments/group-bar.d.ts
+/** Ink for one segment, in the shared status vocabulary plus `neutral`. */
+type GroupBarTone = "neutral" | "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+/** One slice of the distribution. */
+interface GroupBarItem {
+  /** Stable key. Defaults to the label, which is normally unique already. */
+  id?: string;
+  /** What this slice is. Used in the legend and in the accessible summary. */
+  label: string;
+  /** The quantity. Shares are computed against the sum; zero and below are dropped. */
+  value: number;
+  /** Ink for the slice. Defaults to `"neutral"`. */
+  tone?: GroupBarTone;
+}
+interface GroupBarProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The slices, in display order. */
+  items: readonly GroupBarItem[];
+  /** Strip height in px at the 16px root, emitted as `rem`. Defaults to `6`. */
+  height?: number;
+  /** What the distribution is *of*. Required in practice — it names the graphic. */
+  label?: string;
+  /** List the slices with their shares underneath the strip. */
+  legend?: boolean;
+  /** Format one share for the summary and the legend. Defaults to `"42%"`. */
+  formatShare?: (share: number, item: GroupBarItem) => string;
+  /** What to say when every slice is empty. Defaults to `"no data"`. */
+  emptyLabel?: string;
+}
+/**
+ * The distribution strip: one flex cell per group, weighted by its value.
+ *
+ * A stacked bar with no axis and no numbers — the shape *is* the reading. Three
+ * rules keep it honest:
+ *
+ * 1. **Empty groups get no cell.** A minimum width is what makes a two-pixel
+ *    sliver visible, and a minimum width on a zero would draw a group that is
+ *    not there.
+ * 2. **The percentages add to 100.** Shares are rounded by largest remainder,
+ *    so the legend never sums to 99 and never to 101.
+ * 3. **Colour is never the only channel.** The strip is a `role="img"` whose
+ *    accessible name spells the whole distribution out (WCAG 1.4.1); the legend
+ *    repeats it in text when there is room for one.
+ *
+ * The cells are divided by the same 1px seam as `SeamList`, so a distribution
+ * strip and a seam list sitting in the same panel share one hairline language.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <GroupBar
+ *   label="Universe load"
+ *   items={[
+ *     { label: "dimmers", value: 212, tone: "accent" },
+ *     { label: "movers", value: 96, tone: "info" },
+ *     { label: "free", value: 204 },
+ *   ]}
+ *   legend
+ * />
+ */
+declare const GroupBar: React.ForwardRefExoticComponent<GroupBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone };

package/dist/instruments/group-bar.js

@@ -0,0 +1,122 @@
+import { cn } from "../lib/cn.js";
+import { toRem } from "./_rem.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/group-bar.tsx
+const CELL_TONES = {
+	neutral: "bg-fg-subtle",
+	accent: "bg-accent",
+	ok: "bg-ok",
+	busy: "bg-busy",
+	warn: "bg-warn",
+	danger: "bg-danger",
+	info: "bg-info"
+};
+const LEGEND_TONES = {
+	neutral: "text-fg-subtle",
+	accent: "text-accent",
+	ok: "text-ok",
+	busy: "text-busy",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+/** Default strip height in px at the 16px root — thin enough to sit under a `Stat`. */
+const DEFAULT_HEIGHT_PX = 6;
+/** Percentages that add up: largest-remainder, so the row never reads 99%. */
+function shares(values) {
+	const total = values.reduce((sum, value) => sum + value, 0);
+	if (total <= 0) return values.map(() => 0);
+	const exact = values.map((value) => value / total * 100);
+	const floors = exact.map((value) => Math.floor(value));
+	let remainder = 100 - floors.reduce((sum, value) => sum + value, 0);
+	const order = exact.map((value, index) => ({
+		index,
+		fraction: value - Math.floor(value)
+	})).sort((a, b) => b.fraction - a.fraction);
+	const result = [...floors];
+	for (const { index } of order) {
+		if (remainder <= 0) break;
+		result[index] = result[index] + 1;
+		remainder -= 1;
+	}
+	return result;
+}
+/**
+* The distribution strip: one flex cell per group, weighted by its value.
+*
+* A stacked bar with no axis and no numbers — the shape *is* the reading. Three
+* rules keep it honest:
+*
+* 1. **Empty groups get no cell.** A minimum width is what makes a two-pixel
+*    sliver visible, and a minimum width on a zero would draw a group that is
+*    not there.
+* 2. **The percentages add to 100.** Shares are rounded by largest remainder,
+*    so the legend never sums to 99 and never to 101.
+* 3. **Colour is never the only channel.** The strip is a `role="img"` whose
+*    accessible name spells the whole distribution out (WCAG 1.4.1); the legend
+*    repeats it in text when there is room for one.
+*
+* The cells are divided by the same 1px seam as `SeamList`, so a distribution
+* strip and a seam list sitting in the same panel share one hairline language.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <GroupBar
+*   label="Universe load"
+*   items={[
+*     { label: "dimmers", value: 212, tone: "accent" },
+*     { label: "movers", value: 96, tone: "info" },
+*     { label: "free", value: 204 },
+*   ]}
+*   legend
+* />
+*/
+const GroupBar = React.forwardRef(function GroupBar({ className, items, height = DEFAULT_HEIGHT_PX, label, legend = false, formatShare = (share) => `${share}%`, emptyLabel = "no data", ...elementProps }, ref) {
+	const present = items.filter((item) => item.value > 0);
+	const percentages = shares(present.map((item) => item.value));
+	const empty = present.length === 0;
+	const summary = empty ? emptyLabel : present.map((item, index) => `${item.label} ${formatShare(percentages[index], item)}`).join(", ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "group-bar",
+		"data-empty": empty ? "true" : void 0,
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3)", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "img",
+			"aria-label": label === void 0 ? summary : `${label}: ${summary}`,
+			"data-slot": "group-bar-track",
+			className: "flex w-full gap-px overflow-hidden rounded-(--radius-control) bg-border",
+			style: { height: toRem(height) },
+			children: present.map((item) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "group-bar-cell",
+				"data-tone": item.tone ?? "neutral",
+				className: cn("min-w-[2px] shrink-0", CELL_TONES[item.tone ?? "neutral"]),
+				style: {
+					flexGrow: item.value,
+					flexBasis: 0
+				}
+			}, item.id ?? item.label))
+		}), legend && !empty ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-slot": "group-bar-legend",
+			className: "flex flex-wrap items-center gap-x-(--cue-space-5) gap-y-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg-muted",
+			children: present.map((item, index) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-(--cue-space-2)",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: cn("size-[0.375rem] shrink-0 rounded-full", CELL_TONES[item.tone ?? "neutral"]) }),
+					/* @__PURE__ */ jsx("span", { children: item.label }),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("tabular-nums", LEGEND_TONES[item.tone ?? "neutral"]),
+						children: formatShare(percentages[index], item)
+					})
+				]
+			}, item.id ?? item.label))
+		}) : null]
+	});
+});
+//#endregion
+export { GroupBar };

package/dist/instruments/index.d.ts

@@ -0,0 +1,18 @@
+import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
+import { AppWindowFrame, AppWindowFrameProps } from "./app-window-frame.js";
+import { CodeBlock, CodeBlockProps } from "./code-block.js";
+import { CopyButton, CopyButtonProps } from "./copy-button.js";
+import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./data-row.js";
+import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./data-tree.js";
+import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./group-bar.js";
+import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./ledger.js";
+import { Meter, MeterProps, MeterProvenance, MeterTone } from "./meter.js";
+import { Progress, ProgressProps } from "./progress.js";
+import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./seam-grid.js";
+import { Sparkline, SparklineProps } from "./sparkline.js";
+import { Stat, StatProps, StatTone } from "./stat.js";
+import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./table.js";
+import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./terminal-frame.js";
+import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./two-step-button.js";
+import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./usage-chart.js";
+export { AppWindowFrame, type AppWindowFrameProps, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown };

package/dist/instruments/index.js

@@ -0,0 +1,18 @@
+import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
+import { AppWindowFrame } from "./app-window-frame.js";
+import { CopyButton } from "./copy-button.js";
+import { CodeBlock } from "./code-block.js";
+import { DataRow } from "./data-row.js";
+import { DataTree } from "./data-tree.js";
+import { GroupBar } from "./group-bar.js";
+import { Ledger } from "./ledger.js";
+import { Meter } from "./meter.js";
+import { Progress } from "./progress.js";
+import { SeamCell, SeamGrid } from "./seam-grid.js";
+import { Sparkline } from "./sparkline.js";
+import { Stat } from "./stat.js";
+import { Table, TableScrollRegion } from "./table.js";
+import { TerminalFrame } from "./terminal-frame.js";
+import { TwoStepButton } from "./two-step-button.js";
+import { UsageChart } from "./usage-chart.js";
+export { AppWindowFrame, CodeBlock, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown };