@textui/widgets 0.1.0

package/dist/control/button.d.ts

@@ -0,0 +1,27 @@
+import type { BoxProps, SemanticVariant, SurfaceVariant } from '@textui/core';
+export interface ButtonProps extends BoxProps {
+    label: string;
+    tone?: SemanticVariant;
+    variant?: SurfaceVariant;
+    icon?: string;
+    /** Shortcut hint rendered after the label. */
+    hint?: string;
+    onPress?(): void;
+    autoFocus?: boolean;
+    /**
+     * How much of the screen the button takes, and how heavy its edge is.
+     *
+     * `md` is a button: three rows, the theme's edge. `sm` is one row with no
+     * edge at all, for a toolbar or a row of buttons that must not out-weigh
+     * the fields beside them. `lg` is three rows with a heavy one.
+     *
+     * It matters most when filled. A solid `md` draws its edge in half-blocks,
+     * so it stands the same height as the outline button next to it without
+     * reading as a heavier object; `lg` fills the edge cells too and becomes
+     * the whole rectangle, which is what solid used to do at every size - and
+     * why one row of buttons looked bigger than the row above it.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Button: (props: ButtonProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=button.d.ts.map

package/dist/control/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/control/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EACR,eAAe,EAEf,cAAc,EACf,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,6DA6IjB,CAAC"}

package/dist/control/button.js

@@ -0,0 +1,130 @@
+import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
+import { ON_TONE, TONE } from '../tone.js';
+/** A border that takes up space without drawing anything. */
+const BLANK_BORDER = {
+    topLeft: ' ', top: ' ', topRight: ' ', right: ' ',
+    bottomRight: ' ', bottom: ' ', bottomLeft: ' ', left: ' ',
+    cross: ' ', teeTop: ' ', teeBottom: ' ', teeLeft: ' ', teeRight: ' ',
+};
+export const Button = defineComponent('Button', (props) => {
+    const theme = useTheme();
+    const { label, tone = 'default', variant = 'outline', icon, hint, onPress, disabled, autoFocus, size = 'md', ...rest } = props;
+    const focus = useFocus({ disabled, autoFocus });
+    useInput((event) => {
+        if (disabled)
+            return false;
+        if (event.name === 'enter' || event.name === 'space') {
+            onPress?.();
+            return true;
+        }
+        return false;
+    }, { focusId: focus.id });
+    // Selection inverts.
+    //
+    // At rest a button is a line and a label in its tone; selected, the tone
+    // becomes the background and the label flips to the colour written for it.
+    // Recolouring only the border was too quiet to find - and next to a filled
+    // button it read backwards, because the filled one looked like the selected
+    // one however hard the border tried.
+    const filled = (focus.focused || props.selected === true) && !disabled;
+    const resolvedTone = filled && tone === 'default' ? 'primary' : tone;
+    const color = disabled ? 'disabled' : TONE[resolvedTone];
+    const onColor = disabled ? 'text' : ON_TONE[resolvedTone];
+    // `sm` has no ring, so nothing here reserves one.
+    const ringed = size !== 'sm' && theme.border !== 'none';
+    // A solid button reserves the same ring an outline one draws, filled with
+    // its own background rather than left out. Without it the two are one row
+    // and three rows tall, and a dialog's OK sits a line above its Cancel.
+    const solidBorder = {
+        style: theme.border,
+        color: focus.focused ? 'focus' : undefined,
+        ...(focus.focused ? {} : { chars: BLANK_BORDER }),
+    };
+    // The tone fills the inside of the frame, not the frame itself. A cell
+    // carries one background, so a background on the button's own box lands on
+    // the border glyphs too - rounded corners included - and the button reads as
+    // a coloured block rather than a filled button. Hanging the fill on an inner
+    // box leaves the ring on whatever is behind it. The wrapper is there whether
+    // or not the button is filled, so focusing one does not reshape its tree.
+    //
+    // A solid button is inset too at `md`, which is the whole of the size fix:
+    // hanging the fill on an inner box leaves the ring to be drawn in
+    // half-blocks rather than filled through, so it weighs what the outline
+    // button beside it weighs. `lg` keeps the fill on the outer box - the ring
+    // cells take the tone as well and the button becomes a solid rectangle.
+    const inset = variant === 'ghost' || variant === 'link'
+        ? false
+        : variant !== 'solid' || (ringed && size === 'md');
+    // Filled, the frame becomes the fill's own edge.
+    //
+    // A cell holds one background, so filling the box the ordinary way colours
+    // its border glyphs too and the button reads as a block; filling only the
+    // inside leaves the border cell on the backdrop, and a gap runs between the
+    // frame and the fill. `half` is drawn from block elements whose coloured
+    // half faces inward, so the ring meets the inside with nothing between. It
+    // measures the same as the line border it replaces - one cell a side - so
+    // focus changes how a button looks without changing its size.
+    //
+    // A theme that asked for no border, or for ascii, is left alone: both are
+    // deliberate looks, and `half` degrades to ascii anyway on a terminal that
+    // cannot draw block elements.
+    const filledBorder = theme.border === 'none' || theme.border === 'ascii' ? theme.border : 'half';
+    // The edge, by size. `lg` asks for the heaviest line the theme can draw and
+    // falls back to the theme's own where there is none to ask for.
+    const edge = size === 'lg' && theme.border !== 'ascii' ? 'bold' : theme.border;
+    const style = variant === 'solid'
+        ? size === 'sm' || !ringed
+            // One row, filled. No ring to reserve and nothing to align to.
+            ? { bg: color, fg: onColor }
+            : size === 'lg'
+                // The fill runs under the ring, so the whole rectangle is the button.
+                ? { bg: color, fg: onColor, border: solidBorder }
+                // The ring is drawn from block elements whose coloured half faces
+                // inward: it meets the fill with no gap and stands half as heavy.
+                : { border: { style: filledBorder, color }, fg: color }
+        : variant === 'ghost' || variant === 'link'
+            ? (filled ? { bg: color, fg: onColor } : { fg: color })
+            : size === 'sm' || !ringed
+                ? (filled ? { bg: color, fg: onColor } : { fg: color })
+                : { border: { style: filled ? filledBorder : edge, color }, fg: color };
+    const padding = variant === 'ghost' || variant === 'link' ? 0 : [0, 1];
+    const content = [
+        icon ? h('text', { content: icon }) : null,
+        h('text', { content: label }),
+        // On a filled button the hint has to sit on the tone too; `muted` against
+        // a solid colour is the one combination that is never readable.
+        hint ? h('text', { content: hint, fg: filled ? onColor : 'muted', dim: !filled }) : null,
+    ];
+    return h('box', {
+        id: focus.id,
+        role: 'button',
+        label,
+        direction: 'row',
+        // The inner box owns the run of the label - gap, padding and centring -
+        // whenever there is one, so the two paths measure the same.
+        gap: inset ? 0 : 1,
+        // Centred, so a button stretched by the row it sits in keeps its label on
+        // the same line as its neighbours' labels.
+        align: 'center',
+        padding: inset ? 0 : padding,
+        bold: inset ? undefined : focus.focused,
+        underline: focus.focused && (variant === 'ghost' || variant === 'link'),
+        onClick: () => { if (!disabled)
+            onPress?.(); },
+        ...style,
+        ...rest,
+    }, inset
+        ? h('box', {
+            // Grow, so the fill reaches the frame on a button the row stretched.
+            flex: 1,
+            direction: 'row',
+            gap: 1,
+            align: 'center',
+            padding,
+            bold: focus.focused,
+            // A solid button is filled whether or not it has focus - that is
+            // what solid means. An outline one fills only when it takes focus.
+            ...(variant === 'solid' || filled ? { bg: color, fg: onColor } : {}),
+        }, ...content)
+        : content);
+});

package/dist/control/checkbox.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@textui/core';
+export interface CheckboxProps extends BoxProps {
+    label?: string;
+    checked?: boolean;
+    /** Neither checked nor unchecked - a parent of mixed children. */
+    indeterminate?: boolean;
+    onChange?(checked: boolean): void;
+}
+export declare const Checkbox: (props: CheckboxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/control/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/control/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,+DAoCnB,CAAC"}

package/dist/control/checkbox.js

@@ -0,0 +1,31 @@
+import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
+export const Checkbox = defineComponent('Checkbox', (props) => {
+    const theme = useTheme();
+    const { label, checked = false, indeterminate, onChange, disabled, ...rest } = props;
+    const focus = useFocus({ disabled });
+    useInput((event) => {
+        if (disabled)
+            return false;
+        if (event.name === 'space' || event.name === 'enter') {
+            onChange?.(!checked);
+            return true;
+        }
+        return false;
+    }, { focusId: focus.id });
+    const glyph = indeterminate
+        ? theme.glyphs.checkboxMixed
+        : checked ? theme.glyphs.checkboxOn : theme.glyphs.checkboxOff;
+    return h('box', {
+        id: focus.id,
+        role: 'checkbox',
+        label,
+        selected: checked,
+        direction: 'row',
+        gap: 1,
+        fg: disabled ? 'disabled' : focus.focused ? 'accent' : undefined,
+        bold: focus.focused,
+        onClick: () => { if (!disabled)
+            onChange?.(!checked); },
+        ...rest,
+    }, h('text', { content: glyph }), label ? h('text', { content: label }) : null);
+});

package/dist/control/index.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentDefinition } from '@textui/core';
+/**
+ * Controls.
+ *
+ * Every control here is focusable, keyboard-first and states its own focus
+ * ring, because a terminal has no hover to fall back on: if the focused
+ * control is not obvious without moving a mouse, the interface is unusable.
+ */
+export * from './button.js';
+export * from './checkbox.js';
+export * from './radio-group.js';
+export * from './search-box.js';
+export * from './select.js';
+export * from './slider.js';
+export * from './switch.js';
+export * from './text-area.js';
+export * from './text-input.js';
+export type { TextInputProps } from './shared.js';
+export declare const CONTROL_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/control/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWxD;;;;;;GAMG;AACH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,EAUnD,CAAC"}

package/dist/control/index.js

@@ -0,0 +1,36 @@
+import { Button } from './button.js';
+import { Checkbox } from './checkbox.js';
+import { RadioGroup } from './radio-group.js';
+import { SearchBox } from './search-box.js';
+import { Select } from './select.js';
+import { Slider } from './slider.js';
+import { Switch } from './switch.js';
+import { TextArea } from './text-area.js';
+import { TextInput } from './text-input.js';
+/**
+ * Controls.
+ *
+ * Every control here is focusable, keyboard-first and states its own focus
+ * ring, because a terminal has no hover to fall back on: if the focused
+ * control is not obvious without moving a mouse, the interface is unusable.
+ */
+export * from './button.js';
+export * from './checkbox.js';
+export * from './radio-group.js';
+export * from './search-box.js';
+export * from './select.js';
+export * from './slider.js';
+export * from './switch.js';
+export * from './text-area.js';
+export * from './text-input.js';
+export const CONTROL_COMPONENTS = [
+    { component: 'Button', category: 'control', renderer: { kind: 'function', render: Button }, role: 'button', variants: ['solid', 'outline', 'ghost', 'link'], description: 'Focusable action.' },
+    { component: 'Checkbox', category: 'control', renderer: { kind: 'function', render: Checkbox }, role: 'checkbox', description: 'On, off, or mixed.' },
+    { component: 'Switch', category: 'control', renderer: { kind: 'function', render: Switch }, role: 'switch', description: 'Two-state toggle with words, not only colour.' },
+    { component: 'RadioGroup', category: 'control', renderer: { kind: 'function', render: RadioGroup }, role: 'radio', description: 'One of several.' },
+    { component: 'Slider', category: 'control', renderer: { kind: 'function', render: Slider }, role: 'slider', description: 'A value along a track.' },
+    { component: 'TextArea', category: 'control', renderer: { kind: 'function', render: TextArea }, role: 'textbox', description: 'A field that is a paragraph: grows, scrolls, and gives back the keys it does not want.' },
+    { component: 'TextInput', category: 'control', renderer: { kind: 'function', render: TextInput }, role: 'textbox', description: 'Single-line text with a real caret.' },
+    { component: 'Select', category: 'control', renderer: { kind: 'function', render: Select }, role: 'combobox', description: 'Pick from a list, collapsed or open.' },
+    { component: 'SearchBox', category: 'control', renderer: { kind: 'function', render: SearchBox }, role: 'searchbox', description: 'A text field that looks like search.' },
+];

package/dist/control/radio-group.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from '@textui/core';
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends BoxProps {
+    options: RadioOption[];
+    value?: string;
+    onChange?(value: string): void;
+    label?: string;
+    /** Lay the options out in a row instead of a column. */
+    inline?: boolean;
+}
+export declare const RadioGroup: (props: RadioGroupProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/control/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/control/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,iEAwCrB,CAAC"}

package/dist/control/radio-group.js

@@ -0,0 +1,32 @@
+import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
+export const RadioGroup = defineComponent('RadioGroup', (props) => {
+    const theme = useTheme();
+    const { options, value, onChange, label, inline, disabled, ...rest } = props;
+    const focus = useFocus({ disabled });
+    const index = Math.max(0, options.findIndex((o) => o.value === value));
+    useInput((event) => {
+        if (disabled)
+            return false;
+        const step = inline
+            ? (event.name === 'right' ? 1 : event.name === 'left' ? -1 : 0)
+            : (event.name === 'down' ? 1 : event.name === 'up' ? -1 : 0);
+        if (step === 0)
+            return false;
+        const next = options[(index + step + options.length) % options.length];
+        if (next && !next.disabled)
+            onChange?.(next.value);
+        return true;
+    }, { focusId: focus.id });
+    return h('box', { id: focus.id, role: 'group', label, direction: 'column', gap: 0, ...rest }, label ? h('text', { content: label, fg: 'muted' }) : null, h('box', { direction: inline ? 'row' : 'column', gap: inline ? 2 : 0 }, ...options.map((option) => {
+        const selected = option.value === value;
+        return h('box', {
+            key: option.value,
+            direction: 'row',
+            gap: 1,
+            fg: option.disabled ? 'disabled' : selected && focus.focused ? 'accent' : undefined,
+            bold: selected && focus.focused,
+            onClick: () => { if (!option.disabled)
+                onChange?.(option.value); },
+        }, h('text', { content: selected ? theme.glyphs.radioOn : theme.glyphs.radioOff }), h('text', { content: option.label }), option.description ? h('text', { content: option.description, fg: 'subtle' }) : null);
+    })));
+});

package/dist/control/search-box.d.ts

@@ -0,0 +1,7 @@
+import type { TextInputProps } from './shared.js';
+export interface SearchBoxProps extends Omit<TextInputProps, 'search'> {
+    /** Result count, shown after the field. */
+    count?: number;
+}
+export declare const SearchBox: (props: SearchBoxProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=search-box.d.ts.map

package/dist/control/search-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.d.ts","sourceRoot":"","sources":["../../src/control/search-box.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;IACpE,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,SAAS,gEAKrB,CAAC"}

package/dist/control/search-box.js

@@ -0,0 +1,3 @@
+import { defineComponent, h } from '@textui/core';
+import { TextInput } from './text-input.js';
+export const SearchBox = defineComponent('SearchBox', ({ count, ...props }) => h('box', { direction: 'row', gap: 1 }, h(TextInput, { search: true, flex: 1, ...props }), count !== undefined ? h('text', { content: `${count}`, fg: 'muted' }) : null));

package/dist/control/select.d.ts

@@ -0,0 +1,42 @@
+import type { BoxProps, RenderOutput } from '@textui/core';
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface SelectProps extends BoxProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?(value: string): void;
+    label?: string;
+    placeholder?: string;
+    /** Show the list inline instead of collapsing to one line. */
+    open?: boolean;
+    /** Rows shown at once when open. */
+    visibleRows?: number;
+    /**
+     * Where the list goes when it opens.
+     *
+     * `inline` grows the control: the options appear inside the same border, and
+     * everything under it moves down. Honest about the space it takes and the
+     * only one that cannot be clipped, which is why it is the default.
+     *
+     * `floating` puts the list on the floating layer, anchored under the
+     * control. Nothing below it moves, which is what you want in a form or a
+     * dense row of controls - the layout does not jump as you open and shut it.
+     *
+     * `modal` puts it in the middle of the screen over a scrim. For a list long
+     * enough or a choice consequential enough that the rest of the screen is a
+     * distraction.
+     *
+     * The keys are the same in all three, because the control keeps the keyboard
+     * in all three: the layer is somewhere to *draw* the list, not somewhere the
+     * focus goes. Arrow keys, enter and escape are answered by the same handler
+     * whichever mode it is in.
+     */
+    mode?: 'inline' | 'floating' | 'modal';
+}
+export declare const Select: (props: SelectProps) => RenderOutput;
+//# sourceMappingURL=select.d.ts.map

package/dist/control/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/control/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,YAAY,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,sCAuLjB,CAAC"}

package/dist/control/select.js

@@ -0,0 +1,166 @@
+import { defineComponent, h, useApp, useEffect, useFocus, useInput, useMeasure, useState, useTheme, } from '@textui/core';
+export const Select = defineComponent('Select', (props) => {
+    const theme = useTheme();
+    const { options, value, onChange, label, placeholder, open: openProp, visibleRows = 6, disabled, mode = 'inline', ...rest } = props;
+    const app = useApp();
+    const focus = useFocus({ disabled });
+    const measured = useMeasure();
+    const empty = placeholder ?? `Select${theme.glyphs.ellipsis}`;
+    const [open, setOpen] = useState(openProp ?? false);
+    const index = Math.max(0, options.findIndex((o) => o.value === value));
+    const [highlight, setHighlight] = useState(index);
+    useInput((event) => {
+        if (disabled)
+            return false;
+        if (!open) {
+            if (event.name === 'enter' || event.name === 'space' || event.name === 'down') {
+                setOpen(true);
+                return true;
+            }
+            return false;
+        }
+        switch (event.name) {
+            case 'up':
+                setHighlight((highlight - 1 + options.length) % options.length);
+                return true;
+            case 'down':
+                setHighlight((highlight + 1) % options.length);
+                return true;
+            case 'enter': {
+                const chosen = options[highlight];
+                if (chosen && !chosen.disabled)
+                    onChange?.(chosen.value);
+                setOpen(false);
+                return true;
+            }
+            case 'escape':
+                setOpen(false);
+                return true;
+            default: return false;
+        }
+    }, { focusId: focus.id });
+    const selected = options.find((o) => o.value === value);
+    const start = Math.max(0, Math.min(highlight - Math.floor(visibleRows / 2), options.length - visibleRows));
+    const window = options.slice(start, start + visibleRows);
+    /**
+     * The options, wherever they are being drawn.
+     *
+     * One function rather than one per mode: three copies of a highlighted row
+     * is three chances for the modes to drift into looking like different
+     * controls, and the whole claim here is that they are one control shown in
+     * three places.
+     */
+    function list() {
+        return h('box', { direction: 'column' }, ...window.map((option, i) => {
+            const active = start + i === highlight;
+            return h('box', {
+                key: option.value,
+                direction: 'row',
+                gap: 1,
+                // Ink, not a filled row.
+                //
+                // A background swatch is the heaviest mark available and it has
+                // to invert the text to stay readable, so the highlighted option
+                // is the one option whose colour tells you nothing about itself.
+                // Accent and an underline say "here" without repainting the row.
+                fg: option.disabled ? 'disabled' : active ? 'accent' : undefined,
+                onClick: () => {
+                    if (option.disabled)
+                        return;
+                    onChange?.(option.value);
+                    setOpen(false);
+                },
+            }, h('text', { content: active ? theme.glyphs.chevronRight : ' ' }), option.icon ? h('text', { content: option.icon }) : null, h('text', { content: option.label, underline: active, bold: active }), h('box', { flex: 1 }), option.value === value ? h('text', { content: theme.glyphs.check }) : null);
+        }));
+    }
+    /*
+     * Opening a layer, and keeping it in step.
+     *
+     * Two effects rather than one, because they answer different questions. The
+     * first is "is there a layer" and runs when the mode or the open state
+     * changes; the second is "what is in it" and runs whenever the highlight
+     * moves. Reopening on every arrow key would work and would also mean a new
+     * layer entry per keystroke, with whatever a layer manager does on open -
+     * ordering, focus bookkeeping, the scrim - done four times to move a cursor
+     * four rows.
+     *
+     * The control keeps the keyboard either way, so `trapFocus` stays off: the
+     * layer is a surface to draw the list on, and moving focus into it would
+     * take the arrow keys away from the handler that answers them.
+     */
+    const layerId = `select:${focus.id}`;
+    const floating = mode !== 'inline';
+    useEffect(() => {
+        if (!floating || !open)
+            return undefined;
+        const handle = app.layers.open({
+            id: layerId,
+            layer: mode === 'modal' ? 'modal' : 'floating',
+            scrim: mode === 'modal',
+            // Escape is the control's, and closing it there disposes this. Handled
+            // in both places, the layer would close and the control would still
+            // think it was open.
+            dismissOnEscape: false,
+            dismissOnOutsideClick: true,
+            position: mode === 'modal'
+                ? { kind: 'center' }
+                : { kind: 'anchor', targetId: focus.id, side: 'bottom', align: 'start' },
+            node: panel(),
+            onClose: () => setOpen(false),
+        });
+        return () => { handle.dispose(); };
+    }, [floating, open, mode]);
+    useEffect(() => {
+        if (!floating || !open)
+            return;
+        app.layers.update(layerId, { node: panel() });
+    }, [highlight, value, options.length]);
+    /** The list with something to sit in, which inline gets from the control. */
+    function panel() {
+        return h('box', {
+            direction: 'column',
+            // As wide as the control it came out of, so the two line up.
+            //
+            // `useMeasure` reports the *content* rect, and this panel has a frame
+            // and a gutter of its own to pay for - the same two the control is
+            // already paying - so it is four cells narrower than the box it is
+            // supposed to sit under unless they are added back.
+            width: Math.max(20, measured.width + 4),
+            border: theme.border,
+            bg: 'overlay',
+            padding: [0, 1],
+        }, list());
+    }
+    /**
+     * One box, open or shut.
+     *
+     * The list used to be a second bordered box under the first, so opening the
+     * control drew two rules back to back and the options read as a separate
+     * thing that happened to be nearby. They are the control - the same border
+     * holds both, with a rule between them where the two borders used to be.
+     */
+    return h('box', {
+        id: focus.id,
+        role: 'combobox',
+        label,
+        direction: 'column',
+        border: { style: theme.border, color: focus.focused ? 'focus' : 'border' },
+        padding: [0, 1],
+        ...rest,
+    }, h('box', {
+        direction: 'row',
+        gap: 1,
+        onClick: () => { if (!disabled)
+            setOpen(!open); },
+    }, label ? h('text', { content: label, fg: 'muted' }) : null, h('text', {
+        content: selected?.label ?? empty,
+        fg: selected ? undefined : 'subtle',
+        flex: 1,
+        truncate: 'end',
+    }), h('text', { content: open ? theme.glyphs.chevronUp : theme.glyphs.chevronDown, fg: 'muted' })), 
+    // A borderless theme has no rule to draw, and a blank row there would be
+    // the gap this was meant to close.
+    mode === 'inline' && open && theme.border !== 'none'
+        ? h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' })
+        : null, mode === 'inline' && open ? list() : null);
+});

package/dist/control/shared.d.ts

@@ -0,0 +1,41 @@
+import type { BoxProps } from '@textui/core';
+export interface TextInputProps extends BoxProps {
+    value: string;
+    onChange?(value: string): void;
+    onSubmit?(value: string): void;
+    placeholder?: string;
+    label?: string;
+    /**
+     * Keep the label as the field's name but do not draw it inside the field -
+     * for a form or a dialog that already shows it beside or above the input.
+     */
+    hideLabel?: boolean;
+    /** Replace every character, for secrets. */
+    mask?: string;
+    /** Stop accepting input past this many characters. */
+    maxLength?: number;
+    autoFocus?: boolean;
+    /** Draw a search glyph before the field. */
+    search?: boolean;
+    /**
+     * A stable focus id, so a command can send the reader here by name.
+     *
+     * Without one a control's id is derived from its instance, which nothing
+     * outside the render can know - so "focus the filter" has nothing to name
+     * and the key that would do it cannot be written.
+     */
+    focusId?: string;
+    /**
+     * The caret tried to leave the field.
+     *
+     * A single-line input answers `left` and `right` itself right up to the
+     * ends, so a caller that wants those keys past the ends cannot have them
+     * from a key handler - the field takes the key and reports nothing. This is
+     * how it reports: the palette drills into a command's choices on `right`,
+     * and the path picker goes up a folder on `left`. `TextArea` has had this
+     * from the start; the two controls disagreeing is what left both of those
+     * keys silently doing nothing.
+     */
+    onEdge?(edge: 'start' | 'end'): void;
+}
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/control/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC"}

package/dist/control/shared.js

@@ -0,0 +1 @@
+export {};

package/dist/control/slider.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@textui/core';
+export interface SliderProps extends BoxProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    onChange?(value: number): void;
+    /** Cells the track occupies. */
+    trackWidth?: number;
+    format?(value: number): string;
+}
+export declare const Slider: (props: SliderProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=slider.d.ts.map

package/dist/control/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/control/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,6DA+CjB,CAAC"}