@textui/widgets 0.1.0

package/dist/navigation/menu.js

@@ -0,0 +1,88 @@
+import { defineComponent, h, useFocus, useInput, useState, useTheme } from '@textui/core';
+import { Marquee } from '../display/index.js';
+import { TONE } from '../tone.js';
+export const Menu = defineComponent('Menu', (props) => {
+    const theme = useTheme();
+    const { items, onSelect, visibleRows, activeId, autoFocus, interactive = true, ...rest } = props;
+    const focus = useFocus({ autoFocus, disabled: !interactive });
+    const selectable = items.filter((i) => !i.disabled);
+    const [internalHighlight, setHighlight] = useState(Math.max(0, items.findIndex((i) => i.id === activeId)));
+    // When something else drives the list, `activeId` is the whole truth.
+    const highlight = interactive
+        ? internalHighlight
+        : Math.max(0, items.findIndex((i) => i.id === activeId));
+    useInput((event) => {
+        switch (event.name) {
+            case 'up':
+                setHighlight((highlight - 1 + items.length) % items.length);
+                return true;
+            case 'down':
+                setHighlight((highlight + 1) % items.length);
+                return true;
+            case 'home':
+                setHighlight(0);
+                return true;
+            case 'end':
+                setHighlight(items.length - 1);
+                return true;
+            case 'enter': {
+                const item = items[highlight];
+                if (item && !item.disabled)
+                    onSelect?.(item.id, item);
+                return true;
+            }
+            default: return false;
+        }
+    }, { focusId: focus.id, enabled: interactive });
+    const rows = visibleRows ?? items.length;
+    const start = Math.max(0, Math.min(highlight - Math.floor(rows / 2), items.length - rows));
+    const window = items.slice(start, start + rows);
+    // One switch in the menu gives every row the column, blank on the rows that
+    // are not switches. Per-row would left-align the labels differently
+    // depending on what happened to be a toggle, which reads as a broken menu.
+    const switches = items.some((item) => item.checked !== undefined);
+    return h('box', { id: focus.id, role: 'menu', direction: 'column', ...rest }, ...window.flatMap((item, i) => {
+        const active = start + i === highlight;
+        const row = h('box', {
+            key: item.id,
+            role: 'menuitem',
+            label: item.label,
+            selected: active,
+            direction: 'row',
+            gap: 1,
+            bg: active ? 'selected' : undefined,
+            fg: item.disabled ? 'disabled' : active ? 'inverted' : item.tone ? TONE[item.tone] : undefined,
+            onClick: () => { if (!item.disabled)
+                onSelect?.(item.id, item); },
+        }, h('text', { content: active ? theme.glyphs.chevronRight : ' ', shrink: 0 }), switches
+            ? h('text', { content: item.checked === true ? theme.glyphs.check : ' ', shrink: 0 })
+            : null, 
+        // The mark never gives up room. It is the shortest thing on the row
+        // and the one that stays legible when everything else is an ellipsis.
+        item.icon ? h('text', { content: item.icon, shrink: 0 }) : null, 
+        // The row under the cursor reads itself out. Everything else is
+        // truncated and still, which is what you want of nineteen rows you
+        // are scanning past - and useless for the one you have stopped on.
+        h(Marquee, { content: item.label, active }), h('spacer', { flex: 1 }), 
+        // The description yields first, and by a lot. It is the elaboration;
+        // the label is the thing being chosen, and a row reading "Accept ed…"
+        // beside a full sentence has given up the wrong half.
+        item.description
+            ? h(Marquee, {
+                content: item.description,
+                active,
+                fg: active ? 'inverted' : 'muted',
+                shrink: 8,
+            })
+            : null, item.shortcut ? h('text', { content: item.shortcut, fg: active ? 'inverted' : 'subtle' }) : null, 
+        // Present but empty means "this opens something, contents unknown" -
+        // which is what the command palette knows about an argument whose
+        // choices it has not resolved yet.
+        item.children ? h('text', { content: theme.glyphs.chevronRight }) : null);
+        return item.separatorBefore
+            ? [h('box', { key: `${item.id}-sep`, height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), row]
+            : [row];
+    }), selectable.length === 0
+        ? h('text', { content: '  no matches', fg: 'subtle' })
+        : null);
+});

package/dist/navigation/status-bar.d.ts

@@ -0,0 +1,18 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface StatusSegment {
+    id: string;
+    label: string;
+    icon?: string;
+    tone?: SemanticVariant;
+}
+export interface StatusBarProps extends BoxProps {
+    /**
+     * Segments before the gap and after it. Named `leading`/`trailing` rather
+     * than `left`/`right` because those are style props on every node.
+     */
+    leading?: StatusSegment[];
+    trailing?: StatusSegment[];
+    separator?: string;
+}
+export declare const StatusBar: (props: StatusBarProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=status-bar.d.ts.map

package/dist/navigation/status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../src/navigation/status-bar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,gEAqBpB,CAAC"}

package/dist/navigation/status-bar.js

@@ -0,0 +1,12 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+import { TONE } from '../tone.js';
+export const StatusBar = defineComponent('StatusBar', (props) => {
+    const theme = useTheme();
+    const { leading = [], trailing = [], separator, ...rest } = props;
+    const sep = separator ?? ` ${theme.glyphs.separator} `;
+    const segment = (item) => h('box', { key: item.id, direction: 'row', gap: item.icon ? 1 : 0 }, item.icon ? h('text', { content: item.icon, fg: item.tone ? TONE[item.tone] : undefined }) : null, h('text', { content: item.label, fg: item.tone ? TONE[item.tone] : 'muted' }));
+    const join = (items) => items.flatMap((item, i) => i === items.length - 1
+        ? [segment(item)]
+        : [segment(item), h('text', { key: `${item.id}-s`, content: sep, fg: 'subtle' })]);
+    return h('box', { role: 'contentinfo', direction: 'row', height: 1, ...rest }, ...join(leading), h('spacer', { flex: 1 }), ...join(trailing));
+});

package/dist/navigation/tabs.d.ts

@@ -0,0 +1,20 @@
+import type { BoxProps } from '@textui/core';
+export interface TabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+export interface TabsProps extends BoxProps {
+    items: TabItem[];
+    activeId?: string;
+    onChange?(id: string): void;
+    /** Underline the active tab instead of inverting it. */
+    variant?: 'underline' | 'solid' | 'plain';
+    separator?: string;
+    /** Take focus on mount, so the keyboard has somewhere to be. */
+    autoFocus?: boolean;
+}
+export declare const Tabs: (props: TabsProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/navigation/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,2DAiDf,CAAC"}

package/dist/navigation/tabs.js

@@ -0,0 +1,41 @@
+import { defineComponent, h, useFocus, useInput } from '@textui/core';
+export const Tabs = defineComponent('Tabs', (props) => {
+    const { items, activeId, onChange, variant = 'underline', separator, autoFocus, ...rest } = props;
+    const focus = useFocus({ autoFocus });
+    const index = Math.max(0, items.findIndex((t) => t.id === activeId));
+    useInput((event) => {
+        const step = event.name === 'right' ? 1 : event.name === 'left' ? -1 : 0;
+        if (step === 0)
+            return false;
+        const next = items[(index + step + items.length) % items.length];
+        if (next && !next.disabled)
+            onChange?.(next.id);
+        return true;
+    }, { focusId: focus.id });
+    const gap = separator ? 0 : 1;
+    return h('box', { id: focus.id, role: 'tablist', direction: 'row', gap, ...rest }, ...items.flatMap((item, i) => {
+        const active = item.id === activeId;
+        const tab = h('box', {
+            key: item.id,
+            role: 'tab',
+            label: item.label,
+            selected: active,
+            direction: 'row',
+            gap: 1,
+            padding: variant === 'solid' ? [0, 1] : 0,
+            bg: variant === 'solid' && active ? 'selected' : undefined,
+            fg: item.disabled ? 'disabled' : active ? (variant === 'solid' ? 'inverted' : 'accent') : 'muted',
+            bold: active,
+            underline: variant === 'underline' && active,
+            onClick: () => { if (!item.disabled)
+                onChange?.(item.id); },
+        }, item.icon ? h('text', { content: item.icon }) : null, h('text', { content: item.label }), item.badge !== undefined
+            // No colour of its own on the active tab: `muted` against the
+            // selected background is the one pairing that never reads.
+            ? h('text', { content: String(item.badge), fg: active ? undefined : 'muted' })
+            : null);
+        return separator && i < items.length - 1
+            ? [tab, h('text', { key: `${item.id}-sep`, content: separator, fg: 'borderSubtle' })]
+            : [tab];
+    }));
+});

package/dist/navigation/toolbar.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface ToolbarProps extends BoxProps {
+    items: {
+        id: string;
+        label: string;
+        icon?: string;
+        shortcut?: string;
+        disabled?: boolean;
+        tone?: SemanticVariant;
+    }[];
+    onSelect?(id: string): void;
+}
+export declare const Toolbar: (props: ToolbarProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,eAAe,CAAA;KAAE,EAAE,CAAC;IACrH,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,8DAenB,CAAC"}

package/dist/navigation/toolbar.js

@@ -0,0 +1,10 @@
+import { defineComponent, h } from '@textui/core';
+import { TONE } from '../tone.js';
+export const Toolbar = defineComponent('Toolbar', ({ items, onSelect, ...rest }) => h('box', { role: 'toolbar', direction: 'row', gap: 2, ...rest }, ...items.map((item) => h('box', {
+    key: item.id,
+    direction: 'row',
+    gap: 1,
+    fg: item.disabled ? 'disabled' : item.tone ? TONE[item.tone] : undefined,
+    onClick: () => { if (!item.disabled)
+        onSelect?.(item.id); },
+}, item.shortcut ? h('text', { content: item.shortcut, fg: 'accent', bold: true }) : null, item.icon ? h('text', { content: item.icon }) : null, h('text', { content: item.label, fg: 'muted' })))));

package/dist/navigation/wizard.d.ts

@@ -0,0 +1,15 @@
+import type { BoxProps } from '@textui/core';
+export interface WizardStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface WizardProps extends BoxProps {
+    steps: WizardStep[];
+    activeId: string;
+    /** Steps already completed. */
+    completedIds?: string[];
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Wizard: (props: WizardProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=wizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/navigation/wizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,MAAM,6DAyBjB,CAAC"}

package/dist/navigation/wizard.js

@@ -0,0 +1,17 @@
+import { defineComponent, h, useTheme } from '@textui/core';
+export const Wizard = defineComponent('Wizard', (props) => {
+    const theme = useTheme();
+    const { steps, activeId, completedIds = [], orientation = 'horizontal', ...rest } = props;
+    const activeIndex = steps.findIndex((s) => s.id === activeId);
+    return h('box', { direction: orientation === 'horizontal' ? 'row' : 'column', gap: orientation === 'horizontal' ? 2 : 0, ...rest }, ...steps.map((step, i) => {
+        const done = completedIds.includes(step.id);
+        const active = step.id === activeId;
+        const glyph = done ? theme.glyphs.check : active ? theme.glyphs.bulletFilled : theme.glyphs.bulletHollow;
+        const tone = done ? 'success' : active ? 'accent' : 'subtle';
+        return h('box', { key: step.id, direction: 'row', gap: 1 }, h('text', { content: glyph, fg: tone }), h('box', { direction: 'column' }, h('text', { content: `${i + 1}. ${step.label}`, bold: active, fg: active ? 'text' : 'muted' }), step.description && active
+            ? h('text', { content: step.description, fg: 'subtle' })
+            : null), orientation === 'horizontal' && i < steps.length - 1
+            ? h('text', { content: theme.glyphs.chevronRight, fg: i < activeIndex ? 'success' : 'subtle' })
+            : null);
+    }));
+});

package/dist/overlay/command-palette.d.ts

@@ -0,0 +1,63 @@
+import type { ArgSpec, BoxProps, CommandDefinition } from '@textui/core';
+export interface CommandPaletteProps extends BoxProps {
+    /**
+     * Rows to search. Defaults to every enabled command in the `palette` slot.
+     *
+     * A function is re-read every render, which is what a list of switches
+     * needs: after one is flipped the row has to show its new state, and a
+     * snapshot taken when the palette opened cannot.
+     */
+    commands?: CommandDefinition[] | (() => CommandDefinition[]);
+    placeholder?: string;
+    /** Notified after a command runs. The palette runs it itself. */
+    onRun?(id: string, args?: Record<string, unknown>): void;
+    onClose?(): void;
+    /** Off makes this a picker: it reports the choice and runs nothing. */
+    execute?: boolean;
+    /** Group the list by `category`, with a rule between groups. */
+    grouped?: boolean;
+    visibleRows?: number;
+    width?: number;
+    /**
+     * Open already drilled into this command's choices.
+     *
+     * For a caller that has decided *which* question is being asked and only
+     * wants the palette to ask it - a menu item for "Theme" should offer the
+     * themes, not the whole command list with "Theme" typed into the search box.
+     */
+    openAt?: string;
+}
+/**
+ * The command palette.
+ *
+ * It searches the command registry rather than a list someone maintained, so
+ * a command registered anywhere is reachable here the moment it exists - which
+ * is the payoff for insisting actions are commands. It also *runs* what it
+ * finds, so choosing "Open dialog" here and pressing the button that opens a
+ * dialog are the same act, reaching the same code.
+ *
+ * A command that declares an argument with `choices` gets a second level:
+ * choosing it lists the choices, and picking one runs the command with it.
+ * That is where sub-items come from - the command says what it needs and the
+ * palette asks, rather than every caller inventing its own submenu.
+ */
+export declare const CommandPalette: (props: CommandPaletteProps) => import("@textui/core").RenderOutput;
+/**
+ * The argument the palette should ask about, if there is one.
+ *
+ * A fixed set of choices, or something required that nothing has supplied.
+ * Only the first kind used to count, which meant a command declaring "I need a
+ * title" ran with no title and did nothing - the one failure mode that looks
+ * exactly like a broken key.
+ *
+ * Exported because "will this command ask something?" is a question other
+ * chrome has to answer too - a menu row wants a chevron and wants to hand off
+ * rather than run - and the menu bar had written its own version that
+ * *called* the `choices` function to find out. A function is allowed to be
+ * async, so that answer was sometimes a promise, and the copy went on to call
+ * `.map` on it. Whether a command will ask is a property of its declaration;
+ * nothing has to be resolved to know it.
+ */
+export declare function argumentOf(command: CommandDefinition, collected?: Record<string, unknown>): ArgSpec | undefined;
+export declare function filterCommands(commands: CommandDefinition[], query: string): CommandDefinition[];
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/overlay/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/overlay/command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAgB/F,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,MAAM,iBAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,qEA0VzB,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,GAAG,SAAS,CAKrB;AAqBD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,EAAE,CAehG"}