@textui/widgets 0.1.0

package/dist/layout/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/layout/divider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/D,gEAAgE;IAChE,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,OAAO,8DAkBlB,CAAC"}

package/dist/layout/divider.js

@@ -0,0 +1,13 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Divider = defineComponent('Divider', (props) => {
+    const theme = useTheme();
+    const { direction = 'horizontal', label, labelAlign = 'left', char, ...rest } = props;
+    const chars = theme.borderChars();
+    if (direction === 'vertical') {
+        return h('box', { role: 'separator', width: 1, fill: char ?? chars.left, fg: 'border', ...rest });
+    }
+    if (!label) {
+        return h('box', { role: 'separator', height: 1, fill: char ?? chars.top, fg: 'border', ...rest });
+    }
+    return h('box', { direction: 'row', gap: 1, height: 1, ...rest }, labelAlign !== 'left' ? h('box', { flex: 1, fill: char ?? chars.top, fg: 'border' }) : null, h('text', { content: label, fg: 'muted' }), labelAlign !== 'right' ? h('box', { flex: 1, fill: char ?? chars.top, fg: 'border' }) : null);
+});

package/dist/layout/grid.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@textui/core';
+export interface GridProps extends BoxProps {
+    columns: number;
+}
+/**
+ * A grid is rows of equal-flex cells. Terminals have no sub-cell measurement,
+ * so an even split is the honest primitive; anything else is a Row with widths.
+ */
+export declare const Grid: (props: GridProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=grid.d.ts.map

package/dist/layout/grid.d.ts.map

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

package/dist/layout/grid.js

@@ -0,0 +1,22 @@
+import { defineComponent, h } from '@textui/core';
+/**
+ * A grid is rows of equal-flex cells. Terminals have no sub-cell measurement,
+ * so an even split is the honest primitive; anything else is a Row with widths.
+ */
+export const Grid = defineComponent('Grid', ({ columns, columnGap, rowGap, children, ...props }) => {
+    const items = Array.isArray(children) ? children : children === undefined ? [] : [children];
+    const rows = [];
+    for (let i = 0; i < items.length; i += columns)
+        rows.push(items.slice(i, i + columns));
+    return h('box', { direction: 'column', gap: rowGap ?? props.gap ?? 0, ...props }, ...rows.map((row, i) => h('box', { key: i, direction: 'row', gap: columnGap ?? props.gap ?? 1 }, 
+    // `basis: 0` is what makes the columns *equal* rather than merely
+    // flexible. Without it a cell starts at the width its content asked
+    // for and only the space left over is shared - so a pane holding one
+    // long unwrapped line takes two thirds of the row and the one beside
+    // it is squeezed to a column of single words. Equal columns is what
+    // this component says it is for; anything that wants to be sized by
+    // its content wants a `Row`.
+    ...row.map((cell, j) => h('box', { key: j, flex: 1, basis: 0, minWidth: 0 }, cell)), 
+    // Pad the last row so its cells keep the same width as the others.
+    ...Array.from({ length: columns - row.length }, (_, k) => h('box', { key: `pad${k}`, flex: 1, basis: 0 })))));
+});

package/dist/layout/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentDefinition } from '@textui/core';
+/**
+ * Layout and containers.
+ *
+ * Every one of these is `box` with an opinion. That is the point: the layout
+ * engine only ever sees the primitive, so a new container costs a function
+ * rather than a new case in the engine.
+ */
+export * from './center.js';
+export * from './column.js';
+export * from './divider.js';
+export * from './grid.js';
+export * from './panel.js';
+export * from './row.js';
+export * from './scroll-view.js';
+export * from './splitter.js';
+export * from './stack.js';
+export declare const LAYOUT_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWxD;;;;;;GAMG;AACH,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAE3B,eAAO,MAAM,iBAAiB,EAAE,mBAAmB,EAUlD,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,36 @@
+import { Center } from './center.js';
+import { Column } from './column.js';
+import { Divider } from './divider.js';
+import { Grid } from './grid.js';
+import { Panel } from './panel.js';
+import { Row } from './row.js';
+import { ScrollView } from './scroll-view.js';
+import { Splitter } from './splitter.js';
+import { Stack } from './stack.js';
+/**
+ * Layout and containers.
+ *
+ * Every one of these is `box` with an opinion. That is the point: the layout
+ * engine only ever sees the primitive, so a new container costs a function
+ * rather than a new case in the engine.
+ */
+export * from './center.js';
+export * from './column.js';
+export * from './divider.js';
+export * from './grid.js';
+export * from './panel.js';
+export * from './row.js';
+export * from './scroll-view.js';
+export * from './splitter.js';
+export * from './stack.js';
+export const LAYOUT_COMPONENTS = [
+    { component: 'Row', category: 'layout', renderer: { kind: 'function', render: Row }, description: 'Horizontal flex container.' },
+    { component: 'Column', category: 'layout', renderer: { kind: 'function', render: Column }, description: 'Vertical flex container.' },
+    { component: 'Center', category: 'layout', renderer: { kind: 'function', render: Center }, description: 'Centres its children.' },
+    { component: 'Grid', category: 'layout', renderer: { kind: 'function', render: Grid }, description: 'Equal-width columns, wrapping into rows.' },
+    { component: 'Panel', category: 'layout', renderer: { kind: 'function', render: Panel }, description: 'Titled region. Bordered or airy, following the theme.', variants: ['bordered', 'plain'], role: 'region' },
+    { component: 'Divider', category: 'layout', renderer: { kind: 'function', render: Divider }, description: 'A rule, optionally labelled.', role: 'separator' },
+    { component: 'Stack', category: 'layout', renderer: { kind: 'function', render: Stack }, description: 'Column with themed spacing.' },
+    { component: 'ScrollView', category: 'layout', renderer: { kind: 'function', render: ScrollView }, description: 'Scrolling viewport with keyboard and wheel support.' },
+    { component: 'Splitter', category: 'layout', renderer: { kind: 'function', render: Splitter }, description: 'Two panes with a divider.' },
+];

package/dist/layout/panel.d.ts

@@ -0,0 +1,37 @@
+import type { BorderSpec, BoxProps, StyleColor } from '@textui/core';
+export interface PanelProps extends BoxProps {
+    /** Section heading drawn into the border, or above a borderless panel. */
+    title?: string;
+    subtitle?: string;
+    /** Accent colour for the title. */
+    tone?: StyleColor;
+    /** Overrides the theme's default border. `'none'` gives an airy panel. */
+    border?: BorderSpec;
+    /**
+     * Right-aligned text beside the title, on the same row.
+     *
+     * The short thing that belongs next to a heading rather than under it: a
+     * count, a state, the shortcut that opens it. Optional, and most panels do
+     * not have one.
+     */
+    rightTitle?: string;
+    /**
+     * Right-aligned text on the *bottom* rule, where there is one.
+     *
+     * Not the title row - which is what this said for a long time while doing
+     * something else. A bordered panel put it in the footer and a borderless one
+     * put it beside the title, so the same prop meant two places depending on a
+     * different prop. `rightTitle` is the title row, in both; this is the
+     * bottom, and on a borderless panel there is no bottom to put it on.
+     */
+    meta?: string;
+}
+/**
+ * The workhorse container.
+ *
+ * A panel is the one component that has to look right in all three house
+ * styles, so it renders its title into the border when it has one and as a
+ * heading row when it does not - rather than forcing a border to have a title.
+ */
+export declare const Panel: (props: PanelProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=panel.d.ts.map

package/dist/layout/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/layout/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGrE,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,4DA2EhB,CAAC"}

package/dist/layout/panel.js

@@ -0,0 +1,71 @@
+import { defineComponent, h, resolveEdges, useTheme } from '@textui/core';
+/**
+ * The workhorse container.
+ *
+ * A panel is the one component that has to look right in all three house
+ * styles, so it renders its title into the border when it has one and as a
+ * heading row when it does not - rather than forcing a border to have a title.
+ */
+export const Panel = defineComponent('Panel', (props) => {
+    const theme = useTheme();
+    const { title, subtitle, tone, meta, rightTitle, children, padding, ...rest } = props;
+    /*
+     * Padding is about the *body*, and a subtitle is not the body.
+     *
+     * It used to be one box: the border or the heading row, then the subtitle
+     * and the children together inside whatever padding the caller asked for. So
+     * `padding={1}` put a blank row between the title and its own caption and
+     * left the caption sitting directly on top of the content it was not part
+     * of - the subtitle read as the first line of the body. On a borderless
+     * panel it pushed the title down as well.
+     *
+     * Split, then: the horizontal padding stays outside and applies to
+     * everything, because a subtitle indented differently from the body under it
+     * is worse than either; the vertical padding wraps the children alone.
+     *
+     * Only when there is a subtitle to protect. Without one there is nothing to
+     * separate the padding from, and a panel that gained a box would be a panel
+     * whose layout changed for no reason.
+     */
+    const pad = resolveEdges(padding);
+    const split = subtitle !== undefined && (pad.top > 0 || pad.bottom > 0);
+    const outerPad = split ? { left: pad.left, right: pad.right } : padding;
+    const body = split
+        ? h('box', { direction: 'column', padding: { top: pad.top, bottom: pad.bottom } }, children)
+        : children;
+    const border = props.border ?? theme.border;
+    const borderless = border === 'none' || (typeof border === 'object' && border.style === 'none');
+    // A panel is a pane, so it fills its row rather than floating in the middle
+    // of it. `Row` centres its children by default, which is right for a row of
+    // labels and wrong for a row of panels sitting next to a taller one.
+    const fill = { alignSelf: 'stretch' };
+    if (!borderless) {
+        // Two rules, two labels: `rightTitle` on the top one beside the title, and
+        // `meta` on the bottom one. The border painter gives the right label its
+        // width first, so a long title truncates rather than running into it.
+        return h('box', {
+            role: 'region',
+            border,
+            title,
+            ...(rightTitle !== undefined ? { rightTitle } : {}),
+            footer: meta,
+            footerAlign: 'right',
+            ...fill,
+            ...(outerPad === undefined ? {} : { padding: outerPad }),
+            ...rest,
+        }, subtitle !== undefined ? h('text', { content: subtitle, fg: 'muted' }) : null, body);
+    }
+    return h('box', {
+        role: 'region',
+        direction: 'column',
+        ...fill,
+        ...(outerPad === undefined ? {} : { padding: outerPad }),
+        ...rest,
+        border: 'none',
+    }, title
+        ? h('box', { direction: 'row', gap: 1 }, h('text', { content: title, bold: true, fg: tone ?? 'text', flex: 1, truncate: 'end' }), 
+        // No border to write on, so the same two labels share the heading
+        // row - `rightTitle` first, because it is the one that must survive.
+        rightTitle ? h('text', { content: rightTitle, fg: 'muted' }) : null, meta ? h('text', { content: meta, fg: 'muted' }) : null)
+        : null, subtitle !== undefined ? h('text', { content: subtitle, fg: 'muted' }) : null, body);
+});

package/dist/layout/row.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps } from '@textui/core';
+export interface RowProps extends BoxProps {
+    /** Shorthand for `align`, which reads better on a row. */
+    vAlign?: BoxProps['align'];
+}
+export declare const Row: (props: RowProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=row.d.ts.map

package/dist/layout/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../src/layout/row.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,GAAG,0DAEf,CAAC"}

package/dist/layout/row.js

@@ -0,0 +1,2 @@
+import { defineComponent, h } from '@textui/core';
+export const Row = defineComponent('Row', ({ vAlign, ...props }) => h('box', { direction: 'row', align: vAlign ?? props.align ?? 'center', ...props }));

package/dist/layout/scroll-view.d.ts

@@ -0,0 +1,27 @@
+import type { BoxProps } from '@textui/core';
+export interface ScrollViewProps extends BoxProps {
+    /** Controlled offset. Omit to let the view manage its own. */
+    offset?: number;
+    onScroll?(offset: number): void;
+    /** Draw a scrollbar on the right when the content overflows. */
+    scrollbar?: boolean;
+    /**
+     * A tab stop, so the keys that scroll it can reach it.
+     *
+     * On by default: a viewport had the arrow handlers all along and registered
+     * nothing, so unless the caller happened to make it focusable itself the
+     * only way to scroll was the wheel - which is to say, on a keyboard, not at
+     * all. Turn it off for a view that scrolls inside something already focused.
+     */
+    focusable?: boolean;
+    autoFocus?: boolean;
+}
+/**
+ * A scrolling viewport.
+ *
+ * Scroll position is a number of cells, not a fraction: a terminal cannot
+ * scroll by half a line, and pretending otherwise makes a list jitter as it
+ * rounds.
+ */
+export declare const ScrollView: (props: ScrollViewProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=scroll-view.d.ts.map

package/dist/layout/scroll-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-view.d.ts","sourceRoot":"","sources":["../../src/layout/scroll-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAa7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iEA4ErB,CAAC"}

package/dist/layout/scroll-view.js

@@ -0,0 +1,93 @@
+import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useScrollExtent, useState, } from '@textui/core';
+import { ScrollThumb } from '../data/scroll-thumb.js';
+/**
+ * A scrolling viewport.
+ *
+ * Scroll position is a number of cells, not a fraction: a terminal cannot
+ * scroll by half a line, and pretending otherwise makes a list jitter as it
+ * rounds.
+ */
+export const ScrollView = defineComponent('ScrollView', (props) => {
+    const { offset, onScroll, scrollbar = true, focusable = true, autoFocus, id, children, ...rest } = props;
+    const focus = useFocus({ disabled: !focusable, autoFocus });
+    const [internal, setInternal] = useState(0);
+    const top = offset ?? internal;
+    // How far down this can go before the last line leaves the bottom. Written
+    // by the viewport during its render, read here when a key arrives - so a
+    // limit that changed with the terminal's height needs no round trip.
+    const measured = useMeasure();
+    const extent = useScrollExtent();
+    // How far the top can go before the last line leaves the bottom of the view.
+    // Zero when everything fits, which is also what makes the arrows do nothing
+    // in a viewport that has nothing to scroll.
+    const limit = Math.max(0, (extent?.height ?? 0) - measured.height);
+    const scrollTo = (next) => {
+        const clamped = Math.max(0, Math.min(next, limit));
+        if (offset === undefined)
+            setInternal(clamped);
+        onScroll?.(clamped);
+    };
+    useInput((event) => {
+        if (chorded(event))
+            return false;
+        if (event.name === 'up') {
+            scrollTo(top - 1);
+            return true;
+        }
+        if (event.name === 'down') {
+            scrollTo(top + 1);
+            return true;
+        }
+        if (event.name === 'pageup') {
+            scrollTo(top - 10);
+            return true;
+        }
+        if (event.name === 'pagedown') {
+            scrollTo(top + 10);
+            return true;
+        }
+        if (event.name === 'home') {
+            scrollTo(0);
+            return true;
+        }
+        return false;
+    }, { focusId: focus.id, enabled: focusable });
+    // The outer box holds the viewport beside the scrollbar and does not scroll
+    // itself. It used to say `overflow: 'scroll'` with a `scrollTop`, on a row -
+    // where the scrolling axis is horizontal, so the offset did nothing and the
+    // only real effect was to stop the viewport being clamped to the width it
+    // had. That made the row report *its own* sideways overflow as this view's
+    // scroll extent: a number about a different box on a different axis.
+    return h('box', {
+        id: id ?? focus.id,
+        role: 'region',
+        ...rest,
+        overflow: 'hidden',
+        direction: 'row',
+        onMouse: (event) => {
+            if (event.action !== 'wheel')
+                return false;
+            scrollTo(top + (event.wheel ?? 0) * 3);
+            return true;
+        },
+    }, h('box', { flex: 1, direction: 'column', scrollTop: Math.min(top, limit), overflow: 'scroll' }, children), 
+    // `ScrollThumb`, which is what every other viewport in the library draws -
+    // its own comment says so: "two components drawing their own would drift".
+    // This one drew a different thing, a one-cell column filled with a border
+    // glyph, that took the offset as a prop and ignored it. So it said nothing
+    // about where you were or how much there was, and against a bordered child
+    // it was indistinguishable from another border. A scrollbar that cannot be
+    // told from a frame is not a scrollbar.
+    //
+    // And only when there is something to scroll. `limit` is zero when it all
+    // fits, which is exactly when a bar is a lie - the prop has always been
+    // documented that way and was drawn unconditionally.
+    scrollbar && limit > 0
+        ? h(ScrollThumb, {
+            total: extent?.height ?? measured.height,
+            rows: measured.height,
+            offset: Math.min(top, limit),
+            focused: focus.focused,
+        })
+        : null);
+});

package/dist/layout/splitter.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps, Dimension } from '@textui/core';
+export interface SplitterProps extends BoxProps {
+    direction?: 'row' | 'column';
+    /** Size of the first pane, in cells or percent. */
+    size?: Dimension;
+    /** Cells the divider occupies. 0 hides it. */
+    dividerSize?: number;
+}
+export declare const Splitter: (props: SplitterProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=splitter.d.ts.map

package/dist/layout/splitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["../../src/layout/splitter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIxD,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,+DAWnB,CAAC"}

package/dist/layout/splitter.js

@@ -0,0 +1,9 @@
+import { defineComponent, h } from '@textui/core';
+import { Divider } from './divider.js';
+export const Splitter = defineComponent('Splitter', (props) => {
+    const { direction = 'row', size = '50%', dividerSize = 1, children, ...rest } = props;
+    const panes = Array.isArray(children) ? children : [children];
+    return h('box', { direction, ...rest }, h('box', { [direction === 'row' ? 'width' : 'height']: size }, panes[0]), dividerSize > 0
+        ? h(Divider, { direction: direction === 'row' ? 'vertical' : 'horizontal' })
+        : null, h('box', { flex: 1 }, panes[1]));
+});

package/dist/layout/stack.d.ts

@@ -0,0 +1,7 @@
+import type { BoxProps } from '@textui/core';
+export interface StackProps extends BoxProps {
+    /** Space between children, from the theme's scale. */
+    spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare const Stack: (props: StackProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=stack.d.ts.map

package/dist/layout/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/layout/stack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,KAAK,4DAGhB,CAAC"}

package/dist/layout/stack.js

@@ -0,0 +1,5 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Stack = defineComponent('Stack', ({ spacing = 'sm', ...props }) => {
+    const theme = useTheme();
+    return h('box', { direction: 'column', gap: theme.spacing[spacing], ...props });
+});

package/dist/navigation/breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@textui/core';
+export interface BreadcrumbProps extends BoxProps {
+    items: {
+        id: string;
+        label: string;
+        icon?: string;
+    }[];
+    onSelect?(id: string): void;
+    separator?: string;
+    /** Collapse the middle when it does not fit. */
+    maxItems?: number;
+}
+export declare const Breadcrumb: (props: BreadcrumbProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/navigation/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/navigation/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,iEA+BrB,CAAC"}

package/dist/navigation/breadcrumb.js

@@ -0,0 +1,24 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Breadcrumb = defineComponent('Breadcrumb', (props) => {
+    const theme = useTheme();
+    const { items, onSelect, separator, maxItems, ...rest } = props;
+    const sep = separator ?? theme.glyphs.breadcrumb;
+    const shown = maxItems && items.length > maxItems
+        ? [
+            items[0],
+            { id: '__ellipsis__', label: theme.glyphs.ellipsis },
+            ...items.slice(items.length - (maxItems - 2)),
+        ]
+        : items;
+    return h('box', { role: 'navigation', direction: 'row', gap: 1, ...rest }, ...shown.flatMap((item, i) => {
+        const last = i === shown.length - 1;
+        const crumb = h('box', {
+            key: item.id,
+            direction: 'row',
+            gap: item.icon ? 1 : 0,
+            onClick: () => { if (item.id !== '__ellipsis__')
+                onSelect?.(item.id); },
+        }, item.icon ? h('text', { content: item.icon }) : null, h('text', { content: item.label, fg: last ? 'text' : 'muted', bold: last }));
+        return last ? [crumb] : [crumb, h('text', { key: `${item.id}-s`, content: sep, fg: 'subtle' })];
+    }));
+});

package/dist/navigation/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentDefinition } from '@textui/core';
+/**
+ * Navigation chrome.
+ *
+ * These are the components a shell is made of, which is why they all take
+ * their own items rather than reading a surface: the same `Tabs` serves a tab
+ * strip in a workbench and a segmented control inside a panel.
+ */
+export * from './breadcrumb.js';
+export * from './key-hints.js';
+export * from './menu.js';
+export * from './status-bar.js';
+export * from './tabs.js';
+export * from './toolbar.js';
+export * from './wizard.js';
+export declare const NAVIGATION_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AASxD;;;;;;GAMG;AACH,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,eAAO,MAAM,qBAAqB,EAAE,mBAAmB,EAQtD,CAAC"}

package/dist/navigation/index.js

@@ -0,0 +1,30 @@
+import { Breadcrumb } from './breadcrumb.js';
+import { KeyHints } from './key-hints.js';
+import { Menu } from './menu.js';
+import { StatusBar } from './status-bar.js';
+import { Tabs } from './tabs.js';
+import { Toolbar } from './toolbar.js';
+import { Wizard } from './wizard.js';
+/**
+ * Navigation chrome.
+ *
+ * These are the components a shell is made of, which is why they all take
+ * their own items rather than reading a surface: the same `Tabs` serves a tab
+ * strip in a workbench and a segmented control inside a panel.
+ */
+export * from './breadcrumb.js';
+export * from './key-hints.js';
+export * from './menu.js';
+export * from './status-bar.js';
+export * from './tabs.js';
+export * from './toolbar.js';
+export * from './wizard.js';
+export const NAVIGATION_COMPONENTS = [
+    { component: 'Tabs', category: 'navigation', renderer: { kind: 'function', render: Tabs }, role: 'tablist', variants: ['underline', 'solid', 'plain'], description: 'Tab strip or segmented control.' },
+    { component: 'Breadcrumb', category: 'navigation', renderer: { kind: 'function', render: Breadcrumb }, role: 'navigation', description: 'Where you are, collapsing in the middle when narrow.' },
+    { component: 'Menu', category: 'navigation', renderer: { kind: 'function', render: Menu }, role: 'menu', description: 'Keyboard-driven list of actions.' },
+    { component: 'StatusBar', category: 'chrome', renderer: { kind: 'function', render: StatusBar }, role: 'contentinfo', description: 'One line, segments left and right.' },
+    { component: 'Toolbar', category: 'chrome', renderer: { kind: 'function', render: Toolbar }, role: 'toolbar', description: 'A row of actions.' },
+    { component: 'KeyHints', category: 'chrome', renderer: { kind: 'function', render: KeyHints }, description: 'What the keys do, right now.' },
+    { component: 'Wizard', category: 'navigation', renderer: { kind: 'function', render: Wizard }, description: 'Ordered steps with progress.' },
+];

package/dist/navigation/key-hints.d.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@textui/core';
+export interface KeyHintsProps extends BoxProps {
+    hints: {
+        keys: string;
+        label: string;
+    }[];
+    separator?: string;
+}
+/** The footer line every TUI needs: what the keys do, right now. */
+export declare const KeyHints: (props: KeyHintsProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=key-hints.d.ts.map

package/dist/navigation/key-hints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-hints.d.ts","sourceRoot":"","sources":["../../src/navigation/key-hints.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oEAAoE;AACpE,eAAO,MAAM,QAAQ,+DAenB,CAAC"}

package/dist/navigation/key-hints.js

@@ -0,0 +1,13 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+/** The footer line every TUI needs: what the keys do, right now. */
+export const KeyHints = defineComponent('KeyHints', (props) => {
+    const theme = useTheme();
+    const { hints, separator, ...rest } = props;
+    const sep = separator ?? ` ${theme.glyphs.separator} `;
+    return h('box', { direction: 'row', height: 1, ...rest }, ...hints.flatMap((hint, i) => {
+        const item = h('box', { key: hint.keys, direction: 'row', gap: 1 }, h('text', { content: hint.keys, fg: 'accent', bold: true }), h('text', { content: hint.label, fg: 'muted' }));
+        return i === hints.length - 1
+            ? [item]
+            : [item, h('text', { key: `${hint.keys}-s`, content: sep, fg: 'subtle' })];
+    }));
+});

package/dist/navigation/menu.d.ts

@@ -0,0 +1,35 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface MenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    /** Keyboard hint shown right-aligned. */
+    shortcut?: string;
+    description?: string;
+    disabled?: boolean;
+    tone?: SemanticVariant;
+    separatorBefore?: boolean;
+    /**
+     * A switch, and whether it is on. Absent means the row is not a switch, so
+     * a menu of ordinary commands keeps its left edge rather than indenting
+     * every label to make room for a mark nothing uses.
+     */
+    checked?: boolean;
+    children?: MenuItem[];
+}
+export interface MenuProps extends BoxProps {
+    items: MenuItem[];
+    onSelect?(id: string, item: MenuItem): void;
+    /** Rows shown at once. */
+    visibleRows?: number;
+    activeId?: string;
+    autoFocus?: boolean;
+    /**
+     * Take focus and handle keys. Off when something else drives the selection -
+     * a command palette, where typing belongs to the search field and the list
+     * only follows.
+     */
+    interactive?: boolean;
+}
+export declare const Menu: (props: MenuProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=menu.d.ts.map

package/dist/navigation/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/navigation/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,IAAI,2DA8Ff,CAAC"}