@textui/widgets 0.1.0 → 0.2.0

package/dist/overlay/command-palette.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, useEffect, useFocusScope, useInput, useRuntime, useState, useTheme, } from '@textui/core';
+import { defineComponent, h, stringWidth, useEffect, useFocusScope, useInput, useRuntime, useState, useTheme, } from '@textui/core';
 import { TextInput } from '../control/index.js';
 import { Menu } from '../navigation/index.js';
 import { hint } from './shared.js';
@@ -19,7 +19,7 @@ import { hint } from './shared.js';
 export const CommandPalette = defineComponent('CommandPalette', (props) => {
     const theme = useTheme();
     const runtime = useRuntime();
-    const { commands, placeholder, onRun, onClose, execute = true, grouped = true, visibleRows = 8, width = 60, openAt, ...rest } = props;
+    const { commands, placeholder, onRun, onClose, execute = true, grouped = true, visibleRows = 8, width, maxWidth = 60, openAt, descriptions = 'inline', ...rest } = props;
     const [query, setQuery] = useState('');
     const [highlight, setHighlight] = useState(0);
     /** The command being asked about, when the palette has drilled in. */
@@ -71,16 +71,28 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
         : matches.map((command, i) => ({
             id: command.id,
             label: command.title,
-            // `badge` when the row has state to report, the category otherwise.
-            // The icon stays put either way: it is what the row *is*.
-            description: command.badge ?? command.category,
+            // What this row does, or the state it is reporting. The category is
+            // not here: it names the *group*, so it is said once above it.
+            description: command.badge ?? command.description,
             icon: command.icon,
             // A row may stand for a command registered under another id, and the
             // key a person would press belongs to that one.
             shortcut: command.shortcut ?? app?.keybindings.forCommand(command.id)[0],
             // A chevron, from `Menu`, for anything that will ask a question.
             children: argumentOf(command) ? [] : undefined,
-            separatorBefore: grouped && i > 0 && matches[i - 1].category !== command.category,
+            // The heading goes on the first row of each group, including the
+            // first - a group with no name over it is the one the reader has to
+            // work out from the rows in it.
+            //
+            // Sorted matches interleave the categories, so a query turns the
+            // headings off rather than repeating them: with the rows in relevance
+            // order, "Screens" over a single row is noise, and the group it claims
+            // to start is one row long.
+            ...(grouped && query.trim() === ''
+                && (i === 0 || matches[i - 1].category !== command.category)
+                && command.category
+                ? { sectionBefore: command.category }
+                : {}),
         }));
     const back = () => {
         // `null` is "never mind": whatever the preview did gets undone by whoever
@@ -132,18 +144,40 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
         const resolved = typeof arg.choices === 'function' ? arg.choices() : arg.choices ?? [];
         setPending({ command, arg, collected });
         setQuery('');
-        setHighlight(0);
+        /*
+         * Open on the answer that is already in force.
+         *
+         * A question about a setting is nearly always asked in order to change it
+         * *from* something, and the row that something is on is where the reader
+         * is looking. Starting at the top instead says the first option is the
+         * current one, which is wrong on every list where it is not - and it
+         * costs an extra press to get back to where you began.
+         *
+         * `default` is the argument's own word for it, and the same one the row
+         * labelled "default" already used.
+         */
+        const startAt = (list) => {
+            const at = list.findIndex((choice) => choice.value === arg.default);
+            return at < 0 ? 0 : at;
+        };
         if (Array.isArray(resolved)) {
             setAsking(false);
-            setChoices(resolved.map(asChoice));
+            const list = resolved.map(asChoice);
+            setChoices(list);
+            setHighlight(startAt(list));
             return;
         }
         setChoices([]);
+        setHighlight(0);
         setAsking(true);
         // Answered either way: a `choices` function that rejects leaves the panel
         // saying "nothing to choose", which is true of what it can offer.
         void resolved
-            .then((list) => setChoices(list.map(asChoice)))
+            .then((list) => {
+            const choices = list.map(asChoice);
+            setChoices(choices);
+            setHighlight(startAt(choices));
+        })
             .catch(() => setChoices([]))
             .finally(() => setAsking(false));
     };
@@ -263,12 +297,29 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
         ? chosen?.description
             ?? pending.arg.description ?? `${pending.command.title} needs a ${pending.arg.name}`
         : highlighted?.description ?? highlighted?.id ?? '';
+    /*
+     * How wide the panel wants to be.
+     *
+     * A menu sized to a constant is a menu that is too wide for a list of
+     * one-word answers and too narrow for a list of sentences, and it is the
+     * same menu either way. So it asks for what it holds - the widest row, plus
+     * what the row draws around it - and takes `maxWidth` when that is more than
+     * there is any point having.
+     *
+     * `minWidth` keeps the search field, the hint row and the crumb from being
+     * the things that decide it: a question with two short answers still needs
+     * somewhere to type and a line saying what the keys do.
+     */
+    const content = Math.max(...items.map((item) => rowWidth(item, descriptions)), ...(pending ? [stringWidth(pending.command.title) + 12] : [stringWidth(placeholder ?? '') + 4]));
     return h('box', {
         role: 'dialog',
         label: 'Commands',
         border: theme.border,
         bg: 'overlay',
-        width,
+        // A stated width is a width. Left off, it fits what it holds.
+        ...(width !== undefined
+            ? { width }
+            : { minWidth: Math.min(28, maxWidth), maxWidth, width: Math.min(content, maxWidth) }),
         direction: 'column',
         // A border is a gutter as well as a line. Without one - `paper` sets
         // `border: 'none'` - the rows run flush to the panel edge and the last
@@ -316,6 +367,9 @@ export const CommandPalette = defineComponent('CommandPalette', (props) => {
     }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), h(Menu, {
         items,
         visibleRows,
+        // The argument gets the last word: only it knows whether its answers are
+        // told apart by a word or by a sentence.
+        descriptions: pending?.arg.descriptions ?? descriptions,
         interactive: false,
         activeId: rows[index],
         onSelect: (id) => {
@@ -413,3 +467,23 @@ function subsequenceScore(haystack, needle) {
     }
     return score;
 }
+/**
+ * The cells one row would like, drawn the way this menu draws it.
+ *
+ * Mirrors `Menu`'s own layout rather than guessing: the cursor's column and
+ * the gap after it, the icon when there is one, the label, and then either the
+ * description beside it or a line of its own under it. A description on its
+ * own line does not widen the row past its own indent, which is why `below`
+ * is the layout a long sentence wants.
+ */
+function rowWidth(item, descriptions) {
+    // The marker and its gap; a switch column when the menu has one.
+    const lead = 2 + (item.checked !== undefined ? 2 : 0)
+        + (item.icon ? stringWidth(item.icon) + 1 : 0);
+    const label = stringWidth(item.label);
+    const trail = (item.shortcut ? stringWidth(item.shortcut) + 1 : 0) + (item.children ? 2 : 0);
+    const description = item.description ? stringWidth(item.description) : 0;
+    return descriptions === 'below'
+        ? Math.max(lead + label + trail, lead + description)
+        : lead + label + (description > 0 ? description + 2 : 0) + trail;
+}

package/dist/shells/workbench-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAgDzB,CAAC"}
+{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFA6DzB,CAAC"}

package/dist/shells/workbench-shell.js

@@ -17,6 +17,8 @@ export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
     const sidebar = useSurfaceMounted('sidebar');
     const aside = useSurfaceMounted('aside');
     const narrow = size.width < 90;
+    const showSidebar = Boolean(sidebar) && !sidebarCollapsed && !narrow;
+    const showAside = Boolean(aside) && asideVisible && !narrow;
     return h('box', {
         direction: 'column',
         width: '100%',
@@ -25,14 +27,26 @@ export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
         fg: 'text',
         border: theme.border,
         ...props,
-    }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), sidebar && !sidebarCollapsed && !narrow
+    }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), showSidebar
         ? h('box', {
             width: 24,
             border: { style: theme.border, sides: { right: true } },
             direction: 'column',
             padding: { left: 1 },
         }, h(SurfaceArea, { surface: 'sidebar', flex: 1 }))
-        : null, h('box', { flex: 1, direction: 'column', padding: { left: 1 } }, h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'panel' })), aside && asideVisible && !narrow
+        : null, 
+    // A gutter separates main from the pane beside it, so it belongs on the
+    // sides that have one. Applied unconditionally it insets every screen by
+    // a cell on the left and nothing on the right - hidden under a theme
+    // that draws a frame, and plainly lopsided under one that does not.
+    h('box', {
+        flex: 1,
+        direction: 'column',
+        padding: {
+            ...(showSidebar ? { left: 1 } : {}),
+            ...(showAside ? { right: 1 } : {}),
+        },
+    }, h(SurfaceArea, { surface: 'main', flex: 1 }), h(SurfaceArea, { surface: 'panel' })), showAside
         ? h('box', {
             width: 30,
             border: { style: theme.border, sides: { left: true } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The TextUI component catalog - layout, display, controls, data, overlays and charts",
   "keywords": [
     "terminal",
@@ -40,15 +40,15 @@
       "import": "./dist/index.js"
     }
   },
-  "dependencies": {
-    "@textui/core": "^0.1.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json",
     "test": "vitest run"
+  },
+  "dependencies": {
+    "@textui/core": "^0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/src/control/checkbox.ts

@@ -7,12 +7,14 @@ export interface CheckboxProps extends BoxProps {
   /** Neither checked nor unchecked - a parent of mixed children. */
   indeterminate?: boolean;
   onChange?(checked: boolean): void;
+  /** Take the keyboard on arrival. */
+  autoFocus?: boolean;
 }
 
 export const Checkbox = defineComponent<CheckboxProps>('Checkbox', (props) => {
   const theme = useTheme();
-  const { label, checked = false, indeterminate, onChange, disabled, ...rest } = props;
-  const focus = useFocus({ disabled });
+  const { label, checked = false, indeterminate, onChange, disabled, autoFocus, ...rest } = props;
+  const focus = useFocus({ disabled, autoFocus });
 
   useInput(
     (event) => {

package/src/control/radio-group.ts

@@ -15,12 +15,14 @@ export interface RadioGroupProps extends BoxProps {
   label?: string;
   /** Lay the options out in a row instead of a column. */
   inline?: boolean;
+  /** Take the keyboard on arrival. */
+  autoFocus?: boolean;
 }
 
 export const RadioGroup = defineComponent<RadioGroupProps>('RadioGroup', (props) => {
   const theme = useTheme();
-  const { options, value, onChange, label, inline, disabled, ...rest } = props;
-  const focus = useFocus({ disabled });
+  const { options, value, onChange, label, inline, disabled, autoFocus, ...rest } = props;
+  const focus = useFocus({ disabled, autoFocus });
   const index = Math.max(0, options.findIndex((o) => o.value === value));
 
   useInput(