@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/table/useTableKeyboardNavigation.js

@@ -1,83 +1,107 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/table/useTableKeyboardNavigation.ts
-/** Body rows carry this attribute so focus can be moved without a ref per row. */
-var ROW_INDEX_ATTRIBUTE = "data-row-index";
 /**
-* Roving-tabindex keyboard navigation over table rows: one Tab stop for the
-* whole body, arrows to move between rows, Enter to activate, Space to select.
+* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+* InfiniteSpreadsheet.
+*
+* Roving row focus over a table body: one row is the tab stop (`tabIndex` 0), the rest -1.
+* ArrowUp / ArrowDown, Home / End and PageUp / PageDown move focus; a virtual body passes
+* `scrollToIndex` so the target row is scrolled into the window before it is focused. Every other
+* key (Enter, Space, ArrowLeft / ArrowRight, Shift+F10) goes to the host's `onKeyDown`.
 */
-function useTableKeyboardNavigation({ bodyRef, rowCount, enabled = false, onActivate, onToggleSelect, scrollToIndex }) {
-	const [focusedRowIndex, setFocusedRowIndex] = useState(0);
-	const shouldMoveFocusRef = useRef(false);
-	const onActivateRef = useRef(onActivate);
-	const onToggleSelectRef = useRef(onToggleSelect);
-	const scrollToIndexRef = useRef(scrollToIndex);
-	useEffect(() => {
-		onActivateRef.current = onActivate;
-		onToggleSelectRef.current = onToggleSelect;
-		scrollToIndexRef.current = scrollToIndex;
+/** Frames to wait for a virtual row to mount after `scrollToIndex`. */
+var MOUNT_RETRY_FRAMES = 4;
+/** @internal Roving focus over the rows of a table body. */
+function useTableKeyboardNavigation({ rowCount, getPageSize, scrollToIndex, onKeyDown }) {
+	const [tabStop, setTabStop] = useState(0);
+	const tabStopIndex = rowCount === 0 ? 0 : Math.min(tabStop, rowCount - 1);
+	const rowsRef = useRef(/* @__PURE__ */ new Map());
+	const frameRef = useRef(null);
+	const optionsRef = useRef({
+		rowCount,
+		getPageSize,
+		scrollToIndex,
+		onKeyDown
 	});
-	const clampedFocusedRowIndex = rowCount === 0 ? 0 : Math.min(focusedRowIndex, Math.max(0, rowCount - 1));
-	useEffect(() => {
-		if (!shouldMoveFocusRef.current) return;
-		shouldMoveFocusRef.current = false;
-		const body = bodyRef.current;
-		if (!body) return;
-		body.querySelector(`[${ROW_INDEX_ATTRIBUTE}="${clampedFocusedRowIndex}"]`)?.focus();
-	}, [bodyRef, clampedFocusedRowIndex]);
-	const moveFocusTo = useCallback((rowIndex) => {
-		shouldMoveFocusRef.current = true;
-		scrollToIndexRef.current?.(rowIndex);
-		setFocusedRowIndex(rowIndex);
+	optionsRef.current = {
+		rowCount,
+		getPageSize,
+		scrollToIndex,
+		onKeyDown
+	};
+	useEffect(() => () => {
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
 	}, []);
-	const onRowKeyDown = useCallback((rowIndex, event) => {
-		if (!enabled || rowCount === 0) return;
-		if (event.target !== event.currentTarget) return;
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				moveFocusTo(Math.min(rowCount - 1, rowIndex + 1));
-				return;
-			case "ArrowUp":
-				event.preventDefault();
-				moveFocusTo(Math.max(0, rowIndex - 1));
-				return;
-			case "Home":
-				event.preventDefault();
-				moveFocusTo(0);
-				return;
-			case "End":
-				event.preventDefault();
-				moveFocusTo(rowCount - 1);
-				return;
-			case "Enter":
-				event.preventDefault();
-				onActivateRef.current?.(rowIndex, event);
-				return;
-			case " ":
-			case "Spacebar":
-				event.preventDefault();
-				onToggleSelectRef.current?.(rowIndex, event);
-				return;
-			default:
+	const focusedIndexRef = useRef(null);
+	const listenedRef = useRef(/* @__PURE__ */ new WeakSet());
+	const registerRow = useCallback((rowIndex, element) => {
+		const rows = rowsRef.current;
+		if (element === null) {
+			if (rows.get(rowIndex) !== void 0 && !rows.get(rowIndex)?.isConnected) rows.delete(rowIndex);
+			return;
 		}
-	}, [
-		enabled,
-		rowCount,
-		moveFocusTo
-	]);
-	const onRowFocus = useCallback((rowIndex) => {
-		setFocusedRowIndex(rowIndex);
+		const previous = rows.get(rowIndex);
+		rows.set(rowIndex, element);
+		if (!listenedRef.current.has(element)) {
+			listenedRef.current.add(element);
+			element.addEventListener("focusout", (event) => {
+				const next = event.relatedTarget;
+				if (next instanceof Node && element.contains(next)) return;
+				queueMicrotask(() => {
+					if (element.isConnected && focusedIndexRef.current === rowIndex) focusedIndexRef.current = null;
+				});
+			});
+		}
+		const active = element.ownerDocument.activeElement;
+		const isFocusLost = active === null || active === element.ownerDocument.body || !active.isConnected;
+		if (previous !== void 0 && previous !== element && !previous.isConnected && focusedIndexRef.current === rowIndex && isFocusLost) element.focus({ preventScroll: true });
+	}, []);
+	const focusRow = useCallback((rowIndex) => {
+		setTabStop(rowIndex);
+		optionsRef.current.scrollToIndex?.(rowIndex);
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+		let attempts = 0;
+		const tryFocus = () => {
+			frameRef.current = null;
+			const element = rowsRef.current.get(rowIndex);
+			if (element?.isConnected) {
+				element.focus();
+				return;
+			}
+			attempts += 1;
+			if (attempts <= MOUNT_RETRY_FRAMES) frameRef.current = requestAnimationFrame(tryFocus);
+		};
+		tryFocus();
 	}, []);
 	return {
-		focusedRowIndex: clampedFocusedRowIndex,
-		getRowTabIndex: useCallback((rowIndex) => {
-			if (!enabled) return void 0;
-			return rowIndex === clampedFocusedRowIndex ? 0 : -1;
-		}, [enabled, clampedFocusedRowIndex]),
-		onRowKeyDown,
-		onRowFocus
+		tabStopIndex,
+		registerRow,
+		handleRowKeyDown: useCallback((rowIndex, event) => {
+			const { rowCount: count, getPageSize: pageSize, onKeyDown: hostKeyDown } = optionsRef.current;
+			if (count === 0) return;
+			const hasModifier = event.altKey || event.ctrlKey || event.metaKey;
+			let next;
+			if (!hasModifier) {
+				if (event.key === "ArrowDown") next = rowIndex + 1;
+				else if (event.key === "ArrowUp") next = rowIndex - 1;
+				else if (event.key === "Home") next = 0;
+				else if (event.key === "End") next = count - 1;
+				else if (event.key === "PageDown") next = rowIndex + Math.max(1, pageSize());
+				else if (event.key === "PageUp") next = rowIndex - Math.max(1, pageSize());
+			}
+			if (next === void 0) {
+				hostKeyDown(rowIndex, event);
+				return;
+			}
+			event.preventDefault();
+			focusRow(Math.min(Math.max(next, 0), count - 1));
+		}, [focusRow]),
+		handleRowFocus: useCallback((rowIndex) => {
+			focusedIndexRef.current = rowIndex;
+			setTabStop(rowIndex);
+		}, []),
+		focusRow
 	};
 }
 //#endregion
-export { ROW_INDEX_ATTRIBUTE, useTableKeyboardNavigation };
+export { useTableKeyboardNavigation };

package/dist/table/useTableRowSelection.d.ts

@@ -1,27 +1,26 @@
-import type { OnChangeFn as TanstackOnChangeFn, Row as TanstackRow, RowSelectionState as TanstackRowSelectionState } from "@tanstack/react-table";
-interface UseTableRowSelectionOptions<TData> {
-    rowSelection?: TanstackRowSelectionState;
-    defaultRowSelection?: TanstackRowSelectionState;
-    onRowSelectionChange?: TanstackOnChangeFn<TanstackRowSelectionState>;
-    enableMultiRowSelection?: boolean;
-    enableSelectionRange?: boolean;
-    onSelectedRowsChange?: (rows: TanstackRow<TData>[]) => void;
+/** @internal Options for `useTableRowSelection`. */
+export interface UseTableRowSelectionOptions {
+    /** Controlled selected ids. */
+    value: string[] | undefined;
+    /** Initial selected ids while uncontrolled. */
+    defaultValue: string[];
+    /** Called with the next selected ids, in row order. */
+    onChange: ((value: string[]) => void) | undefined;
+    /** Ids of the loaded rows in display order. */
+    rowIds: string[];
 }
-export interface TableRowSelection<TData> {
-    /** Always defined, so it can be fed to TanStack's `state.rowSelection`. */
-    rowSelection: TanstackRowSelectionState;
-    onRowSelectionChange: TanstackOnChangeFn<TanstackRowSelectionState>;
-    toggleRow: (row: TanstackRow<TData>, rows: TanstackRow<TData>[], isShiftKey: boolean) => void;
-    toggleAll: (rows: TanstackRow<TData>[], isSelected: boolean) => void;
-    notifySelectedRows: (rows: TanstackRow<TData>[]) => void;
+/** @internal What `useTableRowSelection` returns. */
+export interface TableRowSelection {
+    /** The selected ids. */
+    selectedIds: ReadonlySet<string>;
+    /** Every loaded row is selected (and there is at least one). */
+    isAllSelected: boolean;
+    /** Some, not all, loaded rows are selected. */
+    isSomeSelected: boolean;
+    /** Toggles one row; with `isRange`, selects every row from the last toggled one to it. */
+    toggleRow: (rowId: string, isRange: boolean) => void;
+    /** Selects every loaded row, or clears the selection when all are selected. */
+    toggleAll: () => void;
 }
-/**
- * Owns row-selection state so it works whether the consumer controls it or not.
- *
- * TanStack replaces its default updater as soon as `onRowSelectionChange` is
- * supplied, so passing that callback without also passing `state.rowSelection`
- * silently freezes selection. Holding the state here means there is one code
- * path and selection always sticks.
- */
-export declare function useTableRowSelection<TData>({ rowSelection, defaultRowSelection, onRowSelectionChange, enableMultiRowSelection, enableSelectionRange, onSelectedRowsChange, }: UseTableRowSelectionOptions<TData>): TableRowSelection<TData>;
-export {};
+/** @internal Selection state for a table's rows. */
+export declare function useTableRowSelection({ value, defaultValue, onChange, rowIds, }: UseTableRowSelectionOptions): TableRowSelection;

package/dist/table/useTableRowSelection.js

@@ -1,94 +1,67 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { useCallback, useMemo, useRef } from "react";
 //#region src/table/useTableRowSelection.ts
 /**
-* Owns row-selection state so it works whether the consumer controls it or not.
+* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+* InfiniteSpreadsheet.
 *
-* TanStack replaces its default updater as soon as `onRowSelectionChange` is
-* supplied, so passing that callback without also passing `state.rowSelection`
-* silently freezes selection. Holding the state here means there is one code
-* path and selection always sticks.
+* Row selection over string ids: the `value` / `defaultValue` / `onChange` triple, the
+* shift-range anchor (the last toggled row) and select-all over the loaded rows. Reported ids
+* are in row order. Only InfiniteTable selects rows.
 */
-function useTableRowSelection({ rowSelection, defaultRowSelection, onRowSelectionChange, enableMultiRowSelection = true, enableSelectionRange = true, onSelectedRowsChange }) {
-	const [internalSelection, setInternalSelection] = useState(defaultRowSelection ?? {});
-	const isControlled = rowSelection !== void 0;
-	const resolvedSelection = isControlled ? rowSelection : internalSelection;
-	const selectionRef = useRef(resolvedSelection);
-	const onChangeRef = useRef(onRowSelectionChange);
-	const onSelectedRowsChangeRef = useRef(onSelectedRowsChange);
-	useEffect(() => {
-		selectionRef.current = resolvedSelection;
-		onChangeRef.current = onRowSelectionChange;
-		onSelectedRowsChangeRef.current = onSelectedRowsChange;
+/** @internal Selection state for a table's rows. */
+function useTableRowSelection({ value, defaultValue, onChange, rowIds }) {
+	const [selected, setSelected] = useControlledState({
+		value,
+		defaultValue,
+		onChange
 	});
-	/** Anchor for shift-click ranges — the row of the last plain click. */
-	const anchorRowIdRef = useRef(null);
-	const applySelection = useCallback((next) => {
-		selectionRef.current = next;
-		if (!isControlled) setInternalSelection(next);
-		onChangeRef.current?.(next);
-	}, [isControlled]);
-	const handleRowSelectionChange = useCallback((updater) => {
-		applySelection(typeof updater === "function" ? updater(selectionRef.current) : updater);
-	}, [applySelection]);
-	const toggleRow = useCallback((row, rows, isShiftKey) => {
-		if (!row.getCanSelect()) return;
-		const isSelected = !selectionRef.current[row.id];
-		if (!enableMultiRowSelection) {
-			applySelection(isSelected ? { [row.id]: true } : {});
-			anchorRowIdRef.current = row.id;
-			return;
-		}
-		const anchorRowId = anchorRowIdRef.current;
-		if (!(isShiftKey && enableSelectionRange && anchorRowId !== null)) {
-			const next = { ...selectionRef.current };
-			if (isSelected) next[row.id] = true;
-			else delete next[row.id];
-			applySelection(next);
-			anchorRowIdRef.current = row.id;
-			return;
-		}
-		const anchorIndex = rows.findIndex((candidate) => candidate.id === anchorRowId);
-		const targetIndex = rows.findIndex((candidate) => candidate.id === row.id);
-		if (anchorIndex === -1 || targetIndex === -1) return;
-		const [from, to] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
-		const next = { ...selectionRef.current };
-		rows.slice(from, to + 1).forEach((candidate) => {
-			if (candidate.getCanSelect()) next[candidate.id] = true;
-		});
-		applySelection(next);
-	}, [
-		applySelection,
-		enableMultiRowSelection,
-		enableSelectionRange
-	]);
-	const toggleAll = useCallback((rows, isSelected) => {
-		if (!isSelected) {
-			applySelection({});
-			anchorRowIdRef.current = null;
-			return;
-		}
-		const next = { ...selectionRef.current };
-		rows.forEach((row) => {
-			if (row.getCanSelect()) next[row.id] = true;
-		});
-		applySelection(next);
-	}, [applySelection]);
-	const notifySelectedRows = useCallback((rows) => {
-		onSelectedRowsChangeRef.current?.(rows);
+	const selectedIds = useMemo(() => new Set(selected), [selected]);
+	const anchorRef = useRef(null);
+	const stateRef = useRef({
+		selectedIds,
+		rowIds
+	});
+	stateRef.current = {
+		selectedIds,
+		rowIds
+	};
+	/** Ids in row order; ids no longer loaded keep their place at the end. */
+	const ordered = useCallback((ids) => {
+		const { rowIds: rows } = stateRef.current;
+		const inRows = rows.filter((id) => ids.has(id));
+		const rowSet = new Set(rows);
+		return [...inRows, ...[...ids].filter((id) => !rowSet.has(id))];
 	}, []);
-	return useMemo(() => ({
-		rowSelection: resolvedSelection,
-		onRowSelectionChange: handleRowSelectionChange,
-		toggleRow,
-		toggleAll,
-		notifySelectedRows
-	}), [
-		resolvedSelection,
-		handleRowSelectionChange,
+	const toggleRow = useCallback((rowId, isRange) => {
+		const { selectedIds: current, rowIds: rows } = stateRef.current;
+		const next = new Set(current);
+		const anchor = anchorRef.current;
+		const from = anchor === null ? -1 : rows.indexOf(anchor);
+		const to = rows.indexOf(rowId);
+		if (isRange && from !== -1 && to !== -1) {
+			const [start, end] = from < to ? [from, to] : [to, from];
+			for (const id of rows.slice(start, end + 1)) next.add(id);
+		} else if (next.has(rowId)) next.delete(rowId);
+		else next.add(rowId);
+		anchorRef.current = rowId;
+		setSelected(ordered(next));
+	}, [ordered, setSelected]);
+	const isAllSelected = rowIds.length > 0 && rowIds.every((id) => selectedIds.has(id));
+	return {
+		selectedIds,
+		isAllSelected,
+		isSomeSelected: !isAllSelected && rowIds.some((id) => selectedIds.has(id)),
 		toggleRow,
-		toggleAll,
-		notifySelectedRows
-	]);
+		toggleAll: useCallback(() => {
+			const { selectedIds: current, rowIds: rows } = stateRef.current;
+			const isAll = rows.length > 0 && rows.every((id) => current.has(id));
+			const next = new Set(current);
+			for (const id of rows) if (isAll) next.delete(id);
+			else next.add(id);
+			setSelected(ordered(next));
+		}, [ordered, setSelected])
+	};
 }
 //#endregion
 export { useTableRowSelection };

package/dist/table/useTableVirtualizer.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from "react";
+/** @internal Options for `useTableVirtualizer`. */
+export interface UseTableVirtualizerOptions {
+    /** Rows the body can show, loaded or not. */
+    count: number;
+    /** The table's scroll container. */
+    scrollRef: RefObject<HTMLDivElement | null>;
+    /** The exact row height in pixels. */
+    rowHeightPx: number;
+    /** The sticky header's height: the body starts this far down the scroll container. */
+    headerHeightPx: number;
+    /** The sticky footer's height (0 without a footer), kept clear when scrolling a row into view. */
+    footerHeightPx: number;
+    /** A row's key: its id when loaded, its index otherwise. */
+    getItemKey: (index: number) => string | number;
+    /** Indexes that stay rendered outside the window. */
+    keepIndexes: number[];
+}
+/** @internal A table-body virtualizer with exact row sizes. */
+export declare function useTableVirtualizer({ count, scrollRef, rowHeightPx, headerHeightPx, footerHeightPx, getItemKey, keepIndexes, }: UseTableVirtualizerOptions): import("@tanstack/react-virtual").ReactVirtualizer<HTMLDivElement, HTMLTableRowElement>;

package/dist/table/useTableVirtualizer.js

@@ -0,0 +1,48 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import "./TableCore.js";
+import { useCallback } from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+//#region src/table/useTableVirtualizer.ts
+/**
+* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+* InfiniteSpreadsheet.
+*
+* `useVirtualizer` (`@tanstack/react-virtual`, an optional peer) set up for a table body: every
+* row is exactly the rung's height (no measuring), items are keyed by row id when loaded and by
+* index otherwise, the rows in `keepIndexes` (the focused row, an editing row) stay mounted
+* whatever the scroll position, and the body starts below the sticky header. Only the virtual
+* table components import this module; `TableCore` imports no peer.
+*/
+/** @internal A table-body virtualizer with exact row sizes. */
+function useTableVirtualizer({ count, scrollRef, rowHeightPx, headerHeightPx, footerHeightPx, getItemKey, keepIndexes }) {
+	const keepKey = keepIndexes.join(",");
+	const rangeExtractor = useCallback((range) => {
+		const indexes = new Set(defaultRangeExtractor(range));
+		for (const entry of keepKey === "" ? [] : keepKey.split(",")) {
+			const index = Number(entry);
+			if (index >= 0 && index < range.count) indexes.add(index);
+		}
+		return [...indexes].sort((a, b) => a - b);
+	}, [keepKey]);
+	const virtualizer = useVirtualizer({
+		count,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: useCallback(() => rowHeightPx, [rowHeightPx]),
+		overscan: 10,
+		getItemKey,
+		rangeExtractor,
+		scrollMargin: headerHeightPx,
+		scrollPaddingStart: headerHeightPx,
+		scrollPaddingEnd: footerHeightPx
+	});
+	useIsomorphicLayoutEffect(() => {
+		virtualizer.measure();
+	}, [
+		virtualizer,
+		rowHeightPx,
+		headerHeightPx
+	]);
+	return virtualizer;
+}
+//#endregion
+export { useTableVirtualizer };

package/dist/text/Bold.d.ts

@@ -1,7 +1,6 @@
-import type { PropsWithChildren } from "react";
-/**
- * Bumps its children to the medium weight. Nest it inside a `Text` to emphasize
- * part of a string — DLS has only two weights, so this is as bold as type gets.
- */
-declare const Bold: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+import { type SpanProps } from "./Span.js";
+/** `Span` props without `weight`: a `Bold` is always `TextWeight.MEDIUM`. */
+export type BoldProps = Omit<SpanProps, "weight">;
+/** Medium-weight inline emphasis inside a `Text`; a `Span` preset. */
+declare const Bold: import("react").ForwardRefExoticComponent<BoldProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Bold;

package/dist/text/Bold.js

@@ -1,21 +1,22 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-/* empty css               */
-import { styled } from "@linaria/react";
+import { TextWeight } from "./Text.js";
+import Span from "./Span.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/text/Bold.tsx
-var _exp = () => ({ theme }) => theme.font.sans.weight.medium;
-var StyledBoldText = withTheme(/*#__PURE__*/ styled("span")({
-	name: "StyledBoldText",
-	class: "s10i74tu",
-	propsAsIs: false,
-	vars: { "s10i74tu-0": [_exp()] }
-}));
 /**
-* Bumps its children to the medium weight. Nest it inside a `Text` to emphasize
-* part of a string — DLS has only two weights, so this is as bold as type gets.
+* Medium-weight emphasis for part of a string inside a `Text`. A thin preset over `Span`:
+* `<Span weight={TextWeight.MEDIUM}>`. It takes every other `Span` prop and inherits everything
+* else (size, family, line height, color) from the enclosing `Text`. DLS has two weights, so this
+* is as bold as type gets. No own styles, no own enums.
 */
-var Bold = ({ children }) => {
-	return /* @__PURE__ */ jsx(StyledBoldText, { children });
-};
+/** Medium-weight inline emphasis inside a `Text`; a `Span` preset. */
+var Bold = forwardRef(function Bold(props, ref) {
+	return /* @__PURE__ */ jsx(Span, {
+		weight: TextWeight.MEDIUM,
+		...props,
+		ref
+	});
+});
+Bold.displayName = "Bold";
 //#endregion
 export { Bold as default };

package/dist/text/Code.d.ts

@@ -1,7 +1,6 @@
-import type { PropsWithChildren } from "react";
-/**
- * Inline code — mono family on a tinted, hairline-bordered chip. Nest it inside
- * a `Text` for identifiers and literals in prose.
- */
-declare const Code: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+import { type SpanProps } from "./Span.js";
+/** `Span` props without `isCode` and `family`: a `Code` is always inline code in mono. */
+export type CodeProps = Omit<SpanProps, "isCode" | "family">;
+/** Inline code inside a `Text`; a `Span` preset. */
+declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Code;

package/dist/text/Code.js

@@ -1,31 +1,22 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-/* empty css               */
-import { styled } from "@linaria/react";
+import Span from "./Span.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/text/Code.tsx
-var _exp = () => ({ theme }) => theme.font.mono.family;
-var _exp2 = () => ({ theme }) => theme.font.mono.weight.regular;
-var _exp3 = () => ({ theme }) => theme.font.mono.size.body_sm;
-var _exp4 = () => ({ theme }) => theme.color.border.primary;
-var _exp5 = () => ({ theme }) => theme.color.background.tertiary;
-var StyledCodeText = withTheme(/*#__PURE__*/ styled("span")({
-	name: "StyledCodeText",
-	class: "sdpyy92",
-	propsAsIs: false,
-	vars: {
-		"sdpyy92-0": [_exp()],
-		"sdpyy92-1": [_exp2()],
-		"sdpyy92-2": [_exp3()],
-		"sdpyy92-3": [_exp4()],
-		"sdpyy92-4": [_exp5()]
-	}
-}));
 /**
-* Inline code — mono family on a tinted, hairline-bordered chip. Nest it inside
-* a `Text` for identifiers and literals in prose.
+* Inline code — an identifier, literal or path inside a `Text`. A thin preset over `Span`:
+* `<Span isCode>`: mono at the enclosing `Text`'s step (~0.92×), hairline border,
+* `background.tertiary`, `radius.sm`, `2px 4px` padding. It takes every other `Span` prop and
+* inherits size, line height and color from the enclosing `Text`. Multi-line code is `CodeBlock`,
+* not this. No own styles, no own enums.
 */
-var Code = ({ children }) => {
-	return /* @__PURE__ */ jsx(StyledCodeText, { children });
-};
+/** Inline code inside a `Text`; a `Span` preset. */
+var Code = forwardRef(function Code(props, ref) {
+	return /* @__PURE__ */ jsx(Span, {
+		isCode: true,
+		...props,
+		ref
+	});
+});
+Code.displayName = "Code";
 //#endregion
 export { Code as default };

package/dist/text/CodeBlock.d.ts

@@ -0,0 +1,77 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Grammar used to highlight `content`. Values equal member names. */
+export declare enum CodeBlockLanguage {
+    /** No highlighting. */
+    PLAIN = "PLAIN",
+    /** Shell scripts and commands. */
+    BASH = "BASH",
+    /** CSS. */
+    CSS = "CSS",
+    /** Go. */
+    GO = "GO",
+    /** GraphQL. */
+    GRAPHQL = "GRAPHQL",
+    /** HTML (and XML / SVG markup). */
+    HTML = "HTML",
+    /** JavaScript. */
+    JAVASCRIPT = "JAVASCRIPT",
+    /** JSON. */
+    JSON = "JSON",
+    /** JavaScript with JSX. */
+    JSX = "JSX",
+    /** Markdown. */
+    MARKDOWN = "MARKDOWN",
+    /** Protocol Buffers. */
+    PROTOBUF = "PROTOBUF",
+    /** Python. */
+    PYTHON = "PYTHON",
+    /** Rust. */
+    RUST = "RUST",
+    /** SQL. */
+    SQL = "SQL",
+    /** TOML. */
+    TOML = "TOML",
+    /** TypeScript with JSX. */
+    TSX = "TSX",
+    /** TypeScript. */
+    TYPESCRIPT = "TYPESCRIPT",
+    /** YAML. */
+    YAML = "YAML"
+}
+export interface CodeBlockProps extends AriaAttributes {
+    /** The code. Rendered verbatim; a single trailing newline is dropped. */
+    content: string;
+    /**
+     * Grammar for highlighting. `PLAIN` shows the code unhighlighted.
+     * @default CodeBlockLanguage.PLAIN
+     */
+    language?: CodeBlockLanguage;
+    /** Header text, such as a file name (`pipeline.yaml`). Defaults to the language's display name; there is none for `PLAIN`. */
+    label?: string;
+    /**
+     * Show a copy button in the header that copies `content` exactly as passed.
+     * @default false
+     */
+    canCopy?: boolean;
+    /**
+     * Show a line-number gutter. Numbers are not selected or copied.
+     * @default false
+     */
+    hasLineNumbers?: boolean;
+    /**
+     * Treat `content` as a unified diff: lines starting with `+` / `-` are tinted as added / removed, `@@` lines as hunk headers. The rest of each line is highlighted with `language`.
+     * @default false
+     */
+    isDiff?: boolean;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Read-only code with lazy syntax highlighting, copy, line numbers and diff mode. */
+declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CodeBlock;