@textui/widgets 0.1.0

package/dist/data/scroll-thumb.js

@@ -0,0 +1,32 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+/**
+ * A one-cell scrollbar.
+ *
+ * Exported because anything with a viewport wants the same one: two components
+ * drawing their own would drift, and the thumb is the only thing on screen
+ * that says how much of a file you are looking at.
+ */
+export const ScrollThumb = defineComponent('ScrollThumb', ({ total, rows, offset, focused }) => {
+    const theme = useTheme();
+    // Not border glyphs: `left` and `right` are the same character in every
+    // border style, so a thumb drawn with one would be invisible against a
+    // track drawn with the other.
+    const thumbChar = theme.glyphs.progressFull;
+    const trackChar = theme.glyphs.progressEmpty;
+    const track = Math.max(1, rows);
+    const size = Math.max(1, Math.round((rows / Math.max(1, total)) * track));
+    const span = Math.max(0, track - size);
+    const position = total <= rows
+        ? 0
+        : Math.round((offset / Math.max(1, total - rows)) * span);
+    const cells = [];
+    for (let i = 0; i < track; i++) {
+        const onThumb = i >= position && i < position + size;
+        cells.push(h('text', {
+            key: i,
+            content: onThumb ? thumbChar : trackChar,
+            fg: onThumb ? (focused ? 'focus' : 'border') : 'borderSubtle',
+        }));
+    }
+    return h('box', { width: 1, direction: 'column' }, ...cells);
+});

package/dist/data/shared.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps } from '@textui/core';
+/**
+ * An entry that reports how tall it turned out to be.
+ *
+ * Through a ref rather than state, deliberately: a height arriving must not
+ * schedule a render, or every measurement would cause the next measurement.
+ */
+export declare const FeedEntry: (props: BoxProps & {
+    onHeight(height: number): void;
+}) => import("@textui/core").RenderOutput;
+export declare const FeedScrollbar: (props: Record<string, never>) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=shared.d.ts.map

package/dist/data/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,SAAS;qBAAiD,MAAM,GAAG,IAAI;yCAQnF,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}

package/dist/data/shared.js

@@ -0,0 +1,17 @@
+import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+/**
+ * An entry that reports how tall it turned out to be.
+ *
+ * Through a ref rather than state, deliberately: a height arriving must not
+ * schedule a render, or every measurement would cause the next measurement.
+ */
+export const FeedEntry = defineComponent('FeedEntry', (props) => {
+    const { onHeight, children, ...rest } = props;
+    const measured = useMeasure();
+    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    return h('box', { direction: 'column', ...rest }, children);
+});
+export const FeedScrollbar = defineComponent('FeedScrollbar', () => {
+    const theme = useTheme();
+    return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
+});

package/dist/data/tree.d.ts

@@ -0,0 +1,35 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    children?: TreeNode[];
+    /** Children exist but are not loaded yet. */
+    hasChildren?: boolean;
+    tone?: SemanticVariant;
+    meta?: string;
+}
+export interface TreeProps extends BoxProps {
+    nodes: TreeNode[];
+    selectedId?: string;
+    expandedIds?: string[];
+    onSelect?(id: string, node: TreeNode): void;
+    onActivate?(id: string, node: TreeNode): void;
+    onToggle?(id: string, expanded: boolean): void;
+    visibleRows?: number;
+    indent?: number;
+    /**
+     * What the expand mark looks like, when a chevron is not what it means.
+     *
+     * A file tree's twisty is not only "there is more here" - it is also the one
+     * thing on the row that says this is a folder, because a folder has no size
+     * beside it and nothing else distinguishes it. A caller that knows its rows
+     * are folders can say so; everything else gets the theme's chevrons.
+     */
+    twistyOpen?: string;
+    twistyClosed?: string;
+    /** Claim focus on mount, if nothing in this scope already has it. */
+    autoFocus?: boolean;
+}
+export declare const Tree: (props: TreeProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=tree.d.ts.map

package/dist/data/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/data/tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAc9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmBD,eAAO,MAAM,IAAI,2DAqJf,CAAC"}

package/dist/data/tree.js

@@ -0,0 +1,158 @@
+import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useTheme, } from '@textui/core';
+import { usePanelState } from '../panel/index.js';
+import { TONE } from '../tone.js';
+import { viewportRows } from '../viewport.js';
+function flatten(nodes, expanded, depth = 0, out = []) {
+    for (const node of nodes) {
+        const expandable = Boolean(node.hasChildren || (node.children && node.children.length > 0));
+        const isExpanded = expanded.has(node.id);
+        out.push({ node, depth, expanded: isExpanded, expandable });
+        if (isExpanded && node.children)
+            flatten(node.children, expanded, depth + 1, out);
+    }
+    return out;
+}
+export const Tree = defineComponent('Tree', (props) => {
+    const theme = useTheme();
+    const { nodes, selectedId, expandedIds, onSelect, onActivate, onToggle, visibleRows, indent = 2, twistyOpen, twistyClosed, autoFocus, ...rest } = props;
+    const focus = useFocus({ autoFocus });
+    const measured = useMeasure();
+    const treePage = viewportRows(props, measured, 10, { requested: visibleRows });
+    /*
+     * Uncontrolled expansion belongs to the panel when there is one: a JSON file
+     * opened as a structure, switched away from and switched back to, comes back
+     * open where it was rather than collapsed to the root. A tree in a sidebar
+     * is in no panel and keeps ordinary component state, which is what it had.
+     */
+    const [treeView, setTreeView] = usePanelState({ expanded: [], selected: null });
+    const internalExpanded = treeView.expanded;
+    const setInternalExpanded = (next) => setTreeView({ expanded: next });
+    const internalSelected = treeView.selected;
+    const setInternalSelected = (next) => setTreeView({ selected: next });
+    const expanded = new Set(expandedIds ?? internalExpanded);
+    const rows = flatten(nodes, expanded);
+    const currentId = selectedId ?? internalSelected ?? rows[0]?.node.id ?? null;
+    const index = Math.max(0, rows.findIndex((r) => r.node.id === currentId));
+    const select = (next) => {
+        const row = rows[Math.max(0, Math.min(rows.length - 1, next))];
+        if (!row)
+            return;
+        if (selectedId === undefined)
+            setInternalSelected(row.node.id);
+        onSelect?.(row.node.id, row.node);
+    };
+    const toggle = (id, next) => {
+        if (expandedIds === undefined) {
+            setInternalExpanded(next
+                ? [...internalExpanded, id]
+                : internalExpanded.filter((e) => e !== id));
+        }
+        onToggle?.(id, next);
+    };
+    useInput((event) => {
+        const row = rows[index];
+        if (!row || chorded(event))
+            return false;
+        switch (event.name) {
+            case 'up':
+                select(index - 1);
+                return true;
+            case 'down':
+                select(index + 1);
+                return true;
+            case 'pageup':
+                select(index - treePage);
+                return true;
+            case 'pagedown':
+                select(index + treePage);
+                return true;
+            case 'home':
+                select(0);
+                return true;
+            case 'end':
+                select(rows.length - 1);
+                return true;
+            case 'right':
+                // Right expands, and only moves inward once already expanded.
+                if (row.expandable && !row.expanded)
+                    toggle(row.node.id, true);
+                else
+                    select(index + 1);
+                return true;
+            case 'left':
+                if (row.expandable && row.expanded)
+                    toggle(row.node.id, false);
+                else {
+                    const parent = rows.slice(0, index).reverse().find((r) => r.depth < row.depth);
+                    if (parent)
+                        select(rows.indexOf(parent));
+                }
+                return true;
+            case 'enter':
+                if (row.expandable)
+                    toggle(row.node.id, !row.expanded);
+                onActivate?.(row.node.id, row.node);
+                return true;
+            default: return false;
+        }
+    }, { focusId: focus.id });
+    // As with the list: how many rows fit is a question for the layout, not for
+    // the data. A deep tree scrolls inside its pane instead of stretching it.
+    const shown = viewportRows(props, measured, rows.length, { requested: visibleRows });
+    const window = rows.length <= shown
+        ? rows
+        : rows.slice(Math.max(0, Math.min(index - Math.floor(shown / 2), rows.length - shown)), Math.max(0, Math.min(index - Math.floor(shown / 2), rows.length - shown)) + shown);
+    /*
+     * One glyph column, and a second only when something needs both.
+     *
+     * A row that cannot expand has no twisty, so its icon goes in the twisty's
+     * place - otherwise a file sits one column right of a folder at the same
+     * depth and reads as being inside it. That was exactly the bug: an explorer
+     * that puts the folder glyph *in* the twisty (which is what `twistyClosed`
+     * is for) had its files pushed two columns clear of their siblings the
+     * moment they grew icons of their own.
+     *
+     * A second column appears only for a tree where something expandable also
+     * has an icon - a chevron *and* a folder mark - and then it is reserved on
+     * every row, including the ones that leave it blank, because a column that
+     * comes and go by row is the same misalignment wearing a different hat.
+     * Measured over every row rather than the visible ones, so scrolling cannot
+     * shift the layout under you.
+     */
+    const iconColumn = rows.some((r) => r.expandable && r.node.icon !== undefined);
+    return h('box', { id: focus.id, role: 'tree', direction: 'column', ...rest }, ...window.map((row) => {
+        const active = row.node.id === currentId;
+        const twisty = row.expandable
+            ? (row.expanded ? (twistyOpen ?? theme.glyphs.chevronDown)
+                : (twistyClosed ?? theme.glyphs.chevronRight))
+            : (iconColumn ? ' ' : row.node.icon ?? ' ');
+        // The marker carries the node's colour only when it *is* the node's
+        // icon; a twisty is structure and takes the row's own colour.
+        const markerTone = !row.expandable && !iconColumn && row.node.tone !== undefined
+            ? TONE[row.node.tone]
+            : undefined;
+        return h('box', {
+            key: row.node.id,
+            role: 'treeitem',
+            label: row.node.label,
+            selected: active,
+            direction: 'row',
+            gap: 1,
+            bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
+            fg: active && focus.focused ? 'inverted' : undefined,
+            onClick: () => {
+                if (selectedId === undefined)
+                    setInternalSelected(row.node.id);
+                onSelect?.(row.node.id, row.node);
+            },
+        }, h('text', {
+            content: ' '.repeat(row.depth * indent) + twisty,
+            ...(markerTone !== undefined && !(active && focus.focused) ? { fg: markerTone } : {}),
+        }), iconColumn
+            ? h('text', {
+                content: row.node.icon ?? ' ',
+                ...(row.node.tone !== undefined ? { fg: TONE[row.node.tone] } : {}),
+            })
+            : null, h('text', { content: row.node.label, flex: 1, truncate: 'end' }), row.node.meta ? h('text', { content: row.node.meta, fg: active ? undefined : 'muted' }) : null);
+    }));
+});

package/dist/decorations.d.ts

@@ -0,0 +1,88 @@
+import type { BindingPath, ReactiveStore, SemanticVariant, StyleColor } from '@textui/core';
+/**
+ * Marks on resources.
+ *
+ * A tree of files is the same tree whether or not anything has an opinion
+ * about the files in it - so "this one is modified", "this one has an error",
+ * "this one matched your search" cannot be properties of the explorer. They
+ * are contributions, and the explorer's job is to draw whatever arrived.
+ *
+ * They live in the store rather than behind a registry because a decoration is
+ * a *value that changes*, not a capability that is registered once: git
+ * refreshes, a build finishes, a search runs again. The explorer subscribes to
+ * one subtree and redraws; nothing has to be told about anything.
+ *
+ * Each contributor owns a source name and writes under it, which is what makes
+ * two contributors possible and what makes unloading one of them a single
+ * delete rather than a diff.
+ */
+export declare const DECORATIONS_ROOT = "$/ui/decorations";
+export interface ResourceDecoration {
+    /** A short mark at the end of the row. Wins over whatever the row had. */
+    badge?: string;
+    /** Colours the row, so a glance is enough. */
+    tone?: SemanticVariant;
+    /** Replaces the row's icon. */
+    icon?: string;
+}
+/** Where one contributor's marks live. */
+export declare function decorationsPath(source: string): BindingPath;
+/**
+ * Publish one contributor's marks, as a whole.
+ *
+ * The whole set at once, deliberately: a decoration that is *gone* - the file
+ * was committed, the error was fixed - has to disappear, and a merge of
+ * updates leaves the old ones behind forever.
+ */
+export declare function setDecorations(store: ReactiveStore, source: string, byUri: Record<string, ResourceDecoration>): void;
+export declare function clearDecorations(store: ReactiveStore, source: string): void;
+/** Every contributor's mark for one resource, merged. */
+export declare function decorationFor(store: ReactiveStore, uri: string): ResourceDecoration | null;
+/**
+ * A reader that redraws when anything changes.
+ *
+ * One subscription for the whole tree rather than one per row: a component
+ * cannot call a hook per item without its hook count moving as the list does,
+ * and the marks arrive as one refresh anyway.
+ */
+export declare function useDecorations(): (uri: string) => ResourceDecoration | null;
+/**
+ * Marks on lines, which is the same idea one level down.
+ *
+ * A gutter belongs to whatever is drawing the file, and what a line *means* -
+ * added since the last commit, covered by a test, carrying an error - belongs
+ * to whatever knows that. Same bargain as the tree: the editor draws a column
+ * of marks and has never heard of git.
+ *
+ * Kept per resource rather than per panel, because "this line is new" is true
+ * of the file and not of where you happen to be looking at it.
+ */
+export declare const LINE_MARKS_ROOT = "$/ui/line-marks";
+export type LineMark = 'added' | 'changed' | 'removed';
+/** Line numbers count from zero, like an index, because a caret does. */
+export type LineMarks = Record<number, LineMark>;
+/**
+ * What a marked line looks like, in one cell.
+ *
+ * ASCII, so every terminal draws one - and here rather than in whichever
+ * component happened to need it first, because two renderers drawing the same
+ * mark differently is the same file looking like two files. It lived in the
+ * editor, which is why the *viewer* drew no marks at all: you turned the
+ * setting on, stayed in view mode, and nothing happened.
+ */
+export declare const MARK_GLYPH: Record<LineMark, string>;
+export declare const MARK_TONE: Record<LineMark, StyleColor>;
+export declare function lineMarksPath(source: string, uri: string): BindingPath;
+export declare function setLineMarks(store: ReactiveStore, source: string, uri: string, marks: LineMarks | null): void;
+/** Drop everything one contributor said, wherever it said it. */
+export declare function clearLineMarks(store: ReactiveStore, source: string): void;
+export declare function lineMarksFor(store: ReactiveStore, uri: string | null): LineMarks;
+/**
+ * The marks on one file, redrawn when they change.
+ *
+ * One subscription, and an empty object when nobody has said anything - so a
+ * renderer can ask unconditionally and draw no column at all when the answer
+ * is empty.
+ */
+export declare function useLineMarks(uri: string | null): LineMarks;
+//# sourceMappingURL=decorations.d.ts.map

package/dist/decorations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorations.d.ts","sourceRoot":"","sources":["../src/decorations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG5F;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAE3D;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,GACxC,IAAI,CAMN;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAE3E;AAED,yDAAyD;AACzD,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAa1F;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,CAAC,GAAG,EAAE,MAAM,KAAK,kBAAkB,GAAG,IAAI,CAI3E;AAID;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,yEAAyE;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAEjD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAI/C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,UAAU,CAIlD,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,CAEtE;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,SAAS,GAAG,IAAI,GACtB,IAAI,CAEN;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAEzE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAchF;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAI1D"}

package/dist/decorations.js

@@ -0,0 +1,135 @@
+import { useStoreSubtree, useRuntime, escapeSegment } from '@textui/core';
+/**
+ * Marks on resources.
+ *
+ * A tree of files is the same tree whether or not anything has an opinion
+ * about the files in it - so "this one is modified", "this one has an error",
+ * "this one matched your search" cannot be properties of the explorer. They
+ * are contributions, and the explorer's job is to draw whatever arrived.
+ *
+ * They live in the store rather than behind a registry because a decoration is
+ * a *value that changes*, not a capability that is registered once: git
+ * refreshes, a build finishes, a search runs again. The explorer subscribes to
+ * one subtree and redraws; nothing has to be told about anything.
+ *
+ * Each contributor owns a source name and writes under it, which is what makes
+ * two contributors possible and what makes unloading one of them a single
+ * delete rather than a diff.
+ */
+export const DECORATIONS_ROOT = '$/ui/decorations';
+/** Where one contributor's marks live. */
+export function decorationsPath(source) {
+    return `${DECORATIONS_ROOT}/${escapeSegment(source)}`;
+}
+/**
+ * Publish one contributor's marks, as a whole.
+ *
+ * The whole set at once, deliberately: a decoration that is *gone* - the file
+ * was committed, the error was fixed - has to disappear, and a merge of
+ * updates leaves the old ones behind forever.
+ */
+export function setDecorations(store, source, byUri) {
+    const escaped = {};
+    for (const [uri, decoration] of Object.entries(byUri)) {
+        escaped[escapeSegment(uri)] = decoration;
+    }
+    store.set(decorationsPath(source), escaped);
+}
+export function clearDecorations(store, source) {
+    store.set(decorationsPath(source), null);
+}
+/** Every contributor's mark for one resource, merged. */
+export function decorationFor(store, uri) {
+    const all = store.get(DECORATIONS_ROOT);
+    if (!all)
+        return null;
+    const key = escapeSegment(uri);
+    let merged = null;
+    for (const bySource of Object.values(all)) {
+        const found = bySource?.[key];
+        if (found)
+            merged = { ...(merged ?? {}), ...found };
+    }
+    return merged;
+}
+/**
+ * A reader that redraws when anything changes.
+ *
+ * One subscription for the whole tree rather than one per row: a component
+ * cannot call a hook per item without its hook count moving as the list does,
+ * and the marks arrive as one refresh anyway.
+ */
+export function useDecorations() {
+    const runtime = useRuntime();
+    useStoreSubtree(DECORATIONS_ROOT);
+    return (uri) => decorationFor(runtime.store, uri);
+}
+// ------------------------------------------------------------------ lines
+/**
+ * Marks on lines, which is the same idea one level down.
+ *
+ * A gutter belongs to whatever is drawing the file, and what a line *means* -
+ * added since the last commit, covered by a test, carrying an error - belongs
+ * to whatever knows that. Same bargain as the tree: the editor draws a column
+ * of marks and has never heard of git.
+ *
+ * Kept per resource rather than per panel, because "this line is new" is true
+ * of the file and not of where you happen to be looking at it.
+ */
+export const LINE_MARKS_ROOT = '$/ui/line-marks';
+/**
+ * What a marked line looks like, in one cell.
+ *
+ * ASCII, so every terminal draws one - and here rather than in whichever
+ * component happened to need it first, because two renderers drawing the same
+ * mark differently is the same file looking like two files. It lived in the
+ * editor, which is why the *viewer* drew no marks at all: you turned the
+ * setting on, stayed in view mode, and nothing happened.
+ */
+export const MARK_GLYPH = {
+    added: '+',
+    changed: '~',
+    removed: '_',
+};
+export const MARK_TONE = {
+    added: 'success',
+    changed: 'warning',
+    removed: 'danger',
+};
+export function lineMarksPath(source, uri) {
+    return `${LINE_MARKS_ROOT}/${escapeSegment(source)}/${escapeSegment(uri)}`;
+}
+export function setLineMarks(store, source, uri, marks) {
+    store.set(lineMarksPath(source, uri), marks);
+}
+/** Drop everything one contributor said, wherever it said it. */
+export function clearLineMarks(store, source) {
+    store.set(`${LINE_MARKS_ROOT}/${escapeSegment(source)}`, null);
+}
+export function lineMarksFor(store, uri) {
+    if (uri === null)
+        return {};
+    const all = store.get(LINE_MARKS_ROOT);
+    if (!all)
+        return {};
+    const key = escapeSegment(uri);
+    let merged = {};
+    for (const bySource of Object.values(all)) {
+        const found = bySource?.[key];
+        if (found)
+            merged = { ...merged, ...found };
+    }
+    return merged;
+}
+/**
+ * The marks on one file, redrawn when they change.
+ *
+ * One subscription, and an empty object when nobody has said anything - so a
+ * renderer can ask unconditionally and draw no column at all when the answer
+ * is empty.
+ */
+export function useLineMarks(uri) {
+    const runtime = useRuntime();
+    useStoreSubtree(LINE_MARKS_ROOT);
+    return lineMarksFor(runtime.store, uri);
+}

package/dist/display/alert.d.ts

@@ -0,0 +1,8 @@
+import type { BoxProps } from '@textui/core';
+export interface AlertProps extends BoxProps {
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    message?: string;
+}
+export declare const Alert: (props: AlertProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=alert.d.ts.map

package/dist/display/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/display/alert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,4DAkBhB,CAAC"}

package/dist/display/alert.js

@@ -0,0 +1,12 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Alert = defineComponent('Alert', (props) => {
+    const theme = useTheme();
+    const { tone = 'info', title, message, children, ...rest } = props;
+    const icon = {
+        info: theme.glyphs.info,
+        success: theme.glyphs.check,
+        warning: theme.glyphs.warning,
+        danger: theme.glyphs.cross,
+    }[tone];
+    return h('box', { role: 'alert', direction: 'row', gap: 1, ...rest }, h('text', { content: icon, fg: tone }), h('box', { direction: 'column', flex: 1 }, title ? h('text', { content: title, bold: true, fg: tone }) : null, message ? h('text', { content: message, wrap: 'word' }) : null, children));
+});

package/dist/display/badge.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps, SemanticVariant, SurfaceVariant } from '@textui/core';
+export interface BadgeProps extends BoxProps {
+    label: string;
+    tone?: SemanticVariant;
+    variant?: SurfaceVariant;
+    /** Glyph before the label, so the badge reads without colour. */
+    icon?: string;
+}
+export declare const Badge: (props: BadgeProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=badge.d.ts.map

package/dist/display/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/display/badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9E,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,KAAK,4DA2BhB,CAAC"}

package/dist/display/badge.js

@@ -0,0 +1,21 @@
+import { defineComponent, h } from '@textui/core';
+import { ON_TONE, TONE as TONE_COLOR } from '../tone.js';
+export const Badge = defineComponent('Badge', (props) => {
+    const { label, tone = 'default', variant = 'ghost', icon, ...rest } = props;
+    const color = TONE_COLOR[tone];
+    // `ghost` is chrome-less: the tone, and nothing around it. That is the
+    // default because it is the badge that fits in a sentence, and it is what
+    // `ghost` already means on Button - one word, one meaning, both components.
+    const style = variant === 'solid' ? { bg: color, fg: ON_TONE[tone] } : { fg: color };
+    // A badge is inline: it sits in a row of text and must stay one line tall.
+    // The outline variant is therefore brackets rather than a box border - a
+    // three-row chip in a sentence is not an outline, it is a panel.
+    const brackets = variant === 'outline';
+    return h('box', {
+        direction: 'row',
+        gap: icon ? 1 : 0,
+        padding: variant === 'solid' ? [0, 1] : 0,
+        ...style,
+        ...rest,
+    }, brackets ? h('text', { content: '[' }) : null, icon ? h('text', { content: icon }) : null, h('text', { content: label }), brackets ? h('text', { content: ']' }) : null);
+});

package/dist/display/card.d.ts

@@ -0,0 +1,8 @@
+import type { BoxProps } from '@textui/core';
+export interface CardProps extends BoxProps {
+    title?: string;
+    subtitle?: string;
+    footer?: string;
+}
+export declare const Card: (props: CardProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=card.d.ts.map

package/dist/display/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/display/card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,2DAaf,CAAC"}

package/dist/display/card.js

@@ -0,0 +1,12 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Card = defineComponent('Card', (props) => {
+    const theme = useTheme();
+    const { title, subtitle, children, ...rest } = props;
+    return h('box', {
+        border: theme.border,
+        padding: theme.density === 'compact' ? 0 : [0, 1],
+        direction: 'column',
+        title,
+        ...rest,
+    }, subtitle ? h('text', { content: subtitle, fg: 'muted' }) : null, children);
+});

package/dist/display/empty-state.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@textui/core';
+export interface EmptyStateProps extends BoxProps {
+    title: string;
+    message?: string;
+    icon?: string;
+    /** Hint text: what the reader can do about it. */
+    hint?: string;
+}
+export declare const EmptyState: (props: EmptyStateProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/display/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/display/empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,iEASrB,CAAC"}

package/dist/display/empty-state.js

@@ -0,0 +1,5 @@
+import { defineComponent, h } from '@textui/core';
+export const EmptyState = defineComponent('EmptyState', (props) => {
+    const { title, message, icon, hint, children, ...rest } = props;
+    return h('box', { direction: 'column', align: 'center', justify: 'center', flex: 1, gap: 0, ...rest }, icon ? h('text', { content: icon, fg: 'subtle' }) : null, h('text', { content: title, bold: true, fg: 'muted' }), message ? h('text', { content: message, fg: 'subtle', wrap: 'word', textAlign: 'center' }) : null, hint ? h('text', { content: hint, fg: 'subtle', dim: true }) : null, children);
+});

package/dist/display/error-state.d.ts

@@ -0,0 +1,9 @@
+import type { BoxProps } from '@textui/core';
+export interface ErrorStateProps extends BoxProps {
+    title?: string;
+    error: unknown;
+    /** Command id offered as a retry. */
+    onRetry?: () => void;
+}
+export declare const ErrorState: (props: ErrorStateProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=error-state.d.ts.map

package/dist/display/error-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/display/error-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,iEAYrB,CAAC"}

package/dist/display/error-state.js

@@ -0,0 +1,7 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const ErrorState = defineComponent('ErrorState', (props) => {
+    const theme = useTheme();
+    const { title = 'Something went wrong', error, onRetry, ...rest } = props;
+    const message = error instanceof Error ? error.message : String(error);
+    return h('box', { role: 'alert', direction: 'column', gap: 1, padding: 1, ...rest }, h('box', { direction: 'row', gap: 1 }, h('text', { content: theme.glyphs.cross, fg: 'danger' }), h('text', { content: title, bold: true, fg: 'danger' })), h('text', { content: message, fg: 'muted', wrap: 'word' }), onRetry ? h('text', { content: 'r  retry', fg: 'subtle' }) : null);
+});

package/dist/display/heading.d.ts

@@ -0,0 +1,6 @@
+import type { TextProps } from '@textui/core';
+export interface HeadingProps extends TextProps {
+    level?: 1 | 2 | 3;
+}
+export declare const Heading: (props: HeadingProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=heading.d.ts.map

package/dist/display/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/display/heading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,8DAQnB,CAAC"}