@textui/widgets 0.7.0 → 0.9.0

package/dist/control/text-area.d.ts

@@ -96,5 +96,7 @@ export interface TextAreaProps extends BoxProps {
  * is what typing is. That single fact is why an application with one of these
  * cannot have single-letter global commands, and why it does not need to.
  */
+/** The name a theme styles this field's selection under. See `LIST`. */
+export declare const TEXT_AREA = "TextArea";
 export declare const TextArea: (props: TextAreaProps) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=text-area.d.ts.map

package/dist/control/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAwB,eAAe,EAAS,MAAM,cAAc,CAAC;AA0B3F,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DA+rBnB,CAAC"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/control/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAwB,eAAe,EAAS,MAAM,cAAc,CAAC;AA4B3F,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,gEAAgE;IAChE,UAAU,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wEAAwE;AACxE,eAAO,MAAM,SAAS,aAAa,CAAC;AAEpC,eAAO,MAAM,QAAQ,+DAqsBnB,CAAC"}

package/dist/control/text-area.js

@@ -1,4 +1,4 @@
-import { defineComponent, graphemes, h, stringWidth, useClipboard, useEffect, useFocus, useInput, useMeasure, useRef, useState, useTheme, useTicker, } from '@textui/core';
+import { NO_INTERACTION, defineComponent, graphemes, h, stateVariants, stringWidth, useClipboard, useEffect, useFocus, useInput, useMeasure, useRef, useState, useTheme, useTicker, } from '@textui/core';
 /** How many edits back a field remembers. */
 const MEMORY = 200;
 /**
@@ -18,6 +18,8 @@ const MEMORY = 200;
  * is what typing is. That single fact is why an application with one of these
  * cannot have single-letter global commands, and why it does not need to.
  */
+/** The name a theme styles this field's selection under. See `LIST`. */
+export const TEXT_AREA = 'TextArea';
 export const TextArea = defineComponent('TextArea', (props) => {
     const { value, onChange, onSubmit, onCancel, onOverflow, onEdge, placeholder, maxRows = 6, maxLength, autoFocus, focusId, disabled, caretTone, blink = true, wrap = 'word', caretStyle, copyOnSelect = true, ...rest } = props;
     const theme = useTheme();
@@ -104,14 +106,20 @@ export const TextArea = defineComponent('TextArea', (props) => {
     /**
      * How a selected cell is drawn.
      *
-     * The same pair a selected list row uses, and dimmer once the field loses
-     * the keyboard: a selection left visible in an unfocused field says what is
-     * on the clipboard, and saying it as loudly as the live one would put two
-     * selections on the screen.
+     * The theme's to say, and the same pair a selected list row uses: the
+     * `TextArea.focused` fill while the field has the keyboard and the dimmer
+     * `TextArea.selected` one once it does not, because a selection left
+     * visible in an unfocused field says what is on the clipboard, and saying it
+     * as loudly as the live one would put two selections on the screen.
+     *
+     * Asked for here rather than read off a node, because the field's selection
+     * is painted across cells that are not themselves selected nodes.
      */
-    const selectionStyle = focus.focused
-        ? { bg: 'selected', fg: 'inverted' }
-        : { bg: 'active' };
+    const selectionStyle = theme.styleFor(TEXT_AREA, stateVariants({
+        ...NO_INTERACTION,
+        selected: true,
+        focused: focus.focused,
+    }));
     const before = chars.slice(0, position).join('');
     const lines = value === '' ? [''] : value.split('\n');
     const caretLine = before.split('\n').length - 1;

package/dist/control/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEAoKpB,CAAC"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/control/text-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,gEA0KpB,CAAC"}

package/dist/control/text-input.js

@@ -165,5 +165,11 @@ export const TextInput = defineComponent('TextInput', (props) => {
             : sliceColumns(shown, start, field),
         fg: empty ? 'subtle' : disabled ? 'disabled' : undefined,
         flex: 1,
+        // The name a theme styles this field's text under. Without it a theme
+        // could colour a list row and not the field a person types in - and the
+        // palette's search box, which is this component, could not be coloured
+        // at all. The placeholder and the disabled case state their own `fg`, so
+        // they keep the colours they had.
+        styleAs: 'TextInput',
     }));
 });

package/dist/data/code-viewer.d.ts

@@ -67,5 +67,7 @@ export declare const HORIZONTAL_STEP = 4;
  * around it. And it colours by asking the registry for a highlighter, so a new
  * file type arrives coloured without this component learning what it is.
  */
+/** The name a theme styles a code row under. See `LIST`. */
+export declare const CODE_VIEWER = "CodeViewer";
 export declare const CodeViewer: (props: CodeViewerProps) => RenderOutput;
 //# sourceMappingURL=code-viewer.d.ts.map

package/dist/data/code-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/data/code-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAiB,WAAW,EAAE,MAAM,cAAc,CAAC;AAuBvF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yEAAyE;IACzE,MAAM,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,uDAAuD;IACvD,UAAU,CAAC,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAChD,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,0CAmMrB,CAAC"}
+{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/data/code-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAiB,WAAW,EAAE,MAAM,cAAc,CAAC;AAuBvF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,yEAAyE;IACzE,MAAM,CAAC,EAAE,WAAW,EAAE,EAAE,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,uDAAuD;IACvD,UAAU,CAAC,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAChD,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC;;;;;;;;GAQG;AACH,4DAA4D;AAC5D,eAAO,MAAM,WAAW,eAAe,CAAC;AAExC,eAAO,MAAM,UAAU,0CAyMrB,CAAC"}

package/dist/data/code-viewer.js

@@ -19,6 +19,8 @@ export const HORIZONTAL_STEP = 4;
  * around it. And it colours by asking the registry for a highlighter, so a new
  * file type arrives coloured without this component learning what it is.
  */
+/** The name a theme styles a code row under. See `LIST`. */
+export const CODE_VIEWER = 'CodeViewer';
 export const CodeViewer = defineComponent('CodeViewer', (props) => {
     const { content, lineNumbers = true, startLine = 1, visibleRows, highlight = [], tokens, language, kind, uri, line, onLineChange, onPosition, scrollbar = true, showCaret = true, tabWidth = 4, disabled, autoFocus, ...rest } = props;
     const theme = useTheme();
@@ -158,7 +160,13 @@ export const CodeViewer = defineComponent('CodeViewer', (props) => {
             key: number,
             direction: 'row',
             height: 1,
-            bg: marked ? 'active' : onCaret ? 'hover' : undefined,
+            styleAs: CODE_VIEWER,
+            // A marked line is a selection; the caret line is that selection with
+            // the keyboard on it. Both fills are the theme's - `CodeViewer.selected`
+            // and `CodeViewer.focused` - and both carry the colour that reads on
+            // the fill, so a token inside the row that states its own keeps it.
+            selected: marked,
+            focused: onCaret,
         }, lineNumbers
             ? h('text', {
                 content: `${String(number).padStart(gutter)} `,

package/dist/data/index.d.ts

@@ -44,6 +44,15 @@ export interface TableProps<T extends object = Record<string, unknown>> extends
     /** Width below which low-priority columns start being dropped. */
     responsive?: boolean;
 }
+/**
+ * A data table.
+ *
+ * Responsiveness is a column-priority problem, not a font-size problem: as the
+ * table narrows it drops the lowest-priority columns rather than squeezing
+ * every column until none of them is readable.
+ */
+/** The name a theme styles a table row under. See `LIST` in `./list.js`. */
+export declare const TABLE = "Table";
 /**
  * Exported with its own generic signature so a caller's row type flows into
  * `format` and `tone` - the alternative is every table taking

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAyBjG;;;;;;;GAOG;AACH,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAE1B,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrE,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC;IACxC,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,eAAe,GAAG,SAAS,CAAC;IAC3D,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,QAAQ;IACtF,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6JD;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;AAE3F,eAAO,MAAM,eAAe,EAAE,mBAAmB,EAShD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAyBjG;;;;;;;GAOG;AACH,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAE1B,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrE,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC;IACxC,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,eAAe,GAAG,SAAS,CAAC;IAC3D,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,QAAQ;IACtF,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;GAMG;AACH,4EAA4E;AAC5E,eAAO,MAAM,KAAK,UAAU,CAAC;AA0J7B;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;AAE3F,eAAO,MAAM,eAAe,EAAE,mBAAmB,EAShD,CAAC"}

package/dist/data/index.js

@@ -32,6 +32,8 @@ export * from './tree.js';
  * table narrows it drops the lowest-priority columns rather than squeezing
  * every column until none of them is readable.
  */
+/** The name a theme styles a table row under. See `LIST` in `./list.js`. */
+export const TABLE = 'Table';
 const TableImpl = defineComponent('Table', (props) => {
     const theme = useTheme();
     const i18n = useI18n();
@@ -153,11 +155,15 @@ const TableImpl = defineComponent('Table', (props) => {
         return h('box', {
             key,
             role: 'row',
+            styleAs: TABLE,
             selected: active,
+            // The keyboard is the table's; the row is told which row it lands on.
+            focused: active && focus.focused,
             direction: 'row',
             gap,
-            bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-            fg: active && focus.focused ? 'inverted' : undefined,
+            // What the row is filled with is the theme's to say - `Table.selected`
+            // for the current row and `Table.focused` over it while the table has
+            // the keyboard - as it is for a list, a tree and a menu.
             onClick: () => {
                 if (selectedKey === undefined)
                     setInternalKey(key);

package/dist/data/list.d.ts

@@ -8,6 +8,15 @@ export interface ListItem {
     meta?: string;
     disabled?: boolean;
 }
+/**
+ * The name a theme styles a row under.
+ *
+ * A row is a plain `box`, so without this `components.List` in a theme is a
+ * key nothing reads. Stated once here because the row, the tree, the table
+ * and the menu all fill the same two colours and a theme author comparing
+ * them should be reading the same four names.
+ */
+export declare const LIST = "List";
 /** How a row stands at the moment it is asked to draw itself. */
 export interface ListItemState {
     /** The row the selection is on. */

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/data/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAiB5E,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iEAAiE;AACjE,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,QAAQ;IACxE;;;;;;;;OAQG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAAC;IACzD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,CAgIvE;AAED,eAAO,MAAM,IAAI,EAA8E,OAAO,QAAQ,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/data/list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAiB5E,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B,iEAAiE;AACjE,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,QAAQ;IACxE;;;;;;;;OAQG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAAC;IACzD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,CAwIvE;AAED,eAAO,MAAM,IAAI,EAA8E,OAAO,QAAQ,CAAC"}

package/dist/data/list.js

@@ -2,6 +2,15 @@ import { chorded, defineComponent, h, useFocus, useI18n, useInput, useMeasure, u
 import { EmptyState } from '../display/index.js';
 import { TONE } from '../tone.js';
 import { viewportRows } from '../viewport.js';
+/**
+ * The name a theme styles a row under.
+ *
+ * A row is a plain `box`, so without this `components.List` in a theme is a
+ * key nothing reads. Stated once here because the row, the tree, the table
+ * and the menu all fill the same two colours and a theme author comparing
+ * them should be reading the same four names.
+ */
+export const LIST = 'List';
 function ListView(props) {
     const theme = useTheme();
     const i18n = useI18n();
@@ -105,14 +114,22 @@ function ListView(props) {
             key: item.id,
             role: 'listitem',
             label: item.label,
+            styleAs: LIST,
             selected: active,
+            // The keyboard is the list's, not the row's, so the row is told. It is
+            // the difference between "the current row" and "the current row you
+            // can type at", and a theme states the two fills separately.
+            focused: active && focus.focused,
             direction: 'row',
             gap: 1,
             // One background over the whole row, however many lines it draws: a
             // highlight that stopped after the first would split the row it is
-            // highlighting in two.
-            bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-            fg: item.disabled ? 'disabled' : active && focus.focused ? 'inverted' : undefined,
+            // highlighting in two. What it is filled with is the theme's to say -
+            // `List.selected` for the current row, `List.focused` over it while
+            // the list has the keyboard - and a background always comes with the
+            // colour that reads on it, which is why that pairing lives in the
+            // theme rather than here.
+            fg: item.disabled ? 'disabled' : undefined,
             onClick: () => {
                 if (item.disabled)
                     return;

package/dist/data/markdown-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAelG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEAuLvB,CAAC"}
+{"version":3,"file":"markdown-view.d.ts","sourceRoot":"","sources":["../../src/data/markdown-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAA0C,MAAM,cAAc,CAAC;AAelG,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,mEA0LvB,CAAC"}

package/dist/data/markdown-view.js

@@ -167,7 +167,10 @@ export const MarkdownView = defineComponent('MarkdownView', (props) => {
         i++;
     }
     return h('box', { role: 'document', direction: 'column', ...rest }, ...out, hidden > 0
-        ? h('text', { content: i18n.t('textui.markdown.moreLines', { glyph: theme.glyphs.ellipsis, count: hidden }, '{glyph} {count} more lines'), fg: 'subtle' })
+        ? h('text', { content: i18n.plural(hidden, {
+                one: i18n.t('textui.markdown.moreLines.one', undefined, '{glyph} {count} more line'),
+                other: i18n.t('textui.markdown.moreLines.other', undefined, '{glyph} {count} more lines'),
+            }, { glyph: theme.glyphs.ellipsis }), fg: 'subtle' })
         : null);
 });
 /** One `text` per run, so a bold half of a sentence stays bold after wrapping. */

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/data/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,iEAqBrB,CAAC"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/data/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,iEAwBrB,CAAC"}

package/dist/data/pagination.js

@@ -15,5 +15,8 @@ export const Pagination = defineComponent('Pagination', (props) => {
         }
         return false;
     }, { focusId: focus.id });
-    return h('box', { id: focus.id, direction: 'row', gap: 1, ...rest }, h('text', { content: theme.glyphs.chevronLeft, fg: page > 1 ? 'accent' : 'disabled' }), h('text', { content: `${page} / ${pageCount}`, bold: focus.focused }), h('text', { content: theme.glyphs.chevronRight, fg: page < pageCount ? 'accent' : 'disabled' }), total !== undefined ? h('text', { content: i18n.t('textui.pagination.total', { total }, '{total} items'), fg: 'muted' }) : null);
+    return h('box', { id: focus.id, direction: 'row', gap: 1, ...rest }, h('text', { content: theme.glyphs.chevronLeft, fg: page > 1 ? 'accent' : 'disabled' }), h('text', { content: `${page} / ${pageCount}`, bold: focus.focused }), h('text', { content: theme.glyphs.chevronRight, fg: page < pageCount ? 'accent' : 'disabled' }), total !== undefined ? h('text', { content: i18n.plural(total, {
+            one: i18n.t('textui.pagination.total.one', undefined, '{count} item'),
+            other: i18n.t('textui.pagination.total.other', undefined, '{count} items'),
+        }), fg: 'muted' }) : null);
 });

package/dist/data/tree.d.ts

@@ -1,4 +1,6 @@
 import type { BoxProps, SemanticVariant } from '@textui/core';
+/** The name a theme styles a tree row under. See `LIST`. */
+export declare const TREE = "Tree";
 export interface TreeNode {
     id: string;
     label: string;

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

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

package/dist/data/tree.js

@@ -2,6 +2,8 @@ import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useTheme,
 import { usePanelState } from '../panel/index.js';
 import { TONE } from '../tone.js';
 import { viewportRows } from '../viewport.js';
+/** The name a theme styles a tree row under. See `LIST`. */
+export const TREE = 'Tree';
 function flatten(nodes, expanded, depth = 0, out = []) {
     for (const node of nodes) {
         const expandable = Boolean(node.hasChildren || (node.children && node.children.length > 0));
@@ -135,11 +137,15 @@ export const Tree = defineComponent('Tree', (props) => {
             key: row.node.id,
             role: 'treeitem',
             label: row.node.label,
+            styleAs: TREE,
             selected: active,
+            // The keyboard is the tree's; the row is told which row it lands on.
+            focused: active && focus.focused,
             direction: 'row',
             gap: 1,
-            bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
-            fg: active && focus.focused ? 'inverted' : undefined,
+            // What the row is filled with is the theme's to say - `Tree.selected`
+            // for the current row and `Tree.focused` over it while the tree has
+            // the keyboard - as it is for a list, a table and a menu.
             onClick: () => {
                 if (selectedId === undefined)
                     setInternalSelected(row.node.id);

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

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

package/dist/display/card.js

@@ -4,6 +4,18 @@ export const Card = defineComponent('Card', (props) => {
     const { title, subtitle, children, ...rest } = props;
     return h('box', {
         border: theme.border,
+        /*
+         * A card is a surface, so it states a background and is opaque.
+         *
+         * A bordered box that states none is a frame around whatever is already
+         * there, and what is already there can be a pattern, a scrim or a
+         * neighbouring block - a card dropped on a pattern showed the pattern
+         * through its own interior, which reads as a hole rather than as something
+         * laid on top. `Dialog` and `CommandPalette` have always stated `overlay`
+         * for the same reason; this is the page-level one. `...rest` still wins, so
+         * a caller that wants a different colour names it.
+         */
+        bg: 'surface',
         padding: theme.density === 'compact' ? 0 : [0, 1],
         direction: 'column',
         title,

package/dist/display/color-text.d.ts

@@ -1,4 +1,4 @@
-import type { CellStyle, Color, RenderContext, StyleColor, TextProps } from '@textui/core';
+import type { CellStyle, Color, Style, RenderContext, StyleColor, TextProps } from '@textui/core';
 /**
  * One cell, as the ink sees it.
  *
@@ -154,5 +154,17 @@ export declare function blend(a: Color, b: Color, t: number): Color;
  * Exported so a component that paints its own cells - a chart, a viewer with a
  * heat column - can take an `Ink` and mean the same thing by it.
  */
+/**
+ * A component's own style, resolved for the state it is in.
+ *
+ * A canvas is not told what it was nested in, so a component that paints its
+ * own cells cannot inherit the way a `text` does: it resolves the props it was
+ * given against the theme, and hands the result to every cell the ink declines.
+ * Exported beside `painterOf` so a second painter means the same thing by it -
+ * `ColorText` and `Pattern` both paint their own cells and read the same way.
+ */
+export declare function inkOwnStyle(props: Record<string, unknown>, ctx: RenderContext): Style;
+/** The cell style a canvas painter starts from, given that own style. */
+export declare function inkCellStyle(own: Style, ctx: RenderContext, link?: unknown): CellStyle;
 export declare function painterOf(ink: Ink | undefined, ctx: RenderContext): (cell: InkCell) => CellStyle | undefined;
 //# sourceMappingURL=color-text.d.ts.map

package/dist/display/color-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-text.d.ts","sourceRoot":"","sources":["../../src/display/color-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,aAAa,EAAE,UAAU,EAAE,SAAS,EACrC,MAAM,cAAc,CAAC;AAOtB;;;;;;;;;GASG;AACH,MAAM,WAAW,OAAO;IACtB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACxB;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvE,8CAA8C;AAC9C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,GAAG,GAAG,UAAU,EAAE,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,gEAyEpB,CAAC;AAIH;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAM3D;AAED,mFAAmF;AACnF,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,GAAG,GAAG,SAAS,EACpB,GAAG,EAAE,aAAa,GACjB,CAAC,IAAI,EAAE,OAAO,KAAK,SAAS,GAAG,SAAS,CA2D1C"}
+{"version":3,"file":"color-text.d.ts","sourceRoot":"","sources":["../../src/display/color-text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAAE,KAAK,EAAkC,KAAK,EACvD,aAAa,EAAE,UAAU,EAAE,SAAS,EACrC,MAAM,cAAc,CAAC;AAOtB;;;;;;;;;GASG;AACH,MAAM,WAAW,OAAO;IACtB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAE9F,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,yCAAyC;IACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACxB;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvE,8CAA8C;AAC9C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,GAAG,GAAG,UAAU,EAAE,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,gEAmEpB,CAAC;AAIH;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAM3D;AAED,mFAAmF;AACnF,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAE1D;AAED;;;;;GAKG;AACH;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,aAAa,GAAG,KAAK,CAKrF;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAMtF;AAED,wBAAgB,SAAS,CACvB,GAAG,EAAE,GAAG,GAAG,SAAS,EACpB,GAAG,EAAE,aAAa,GACjB,CAAC,IAAI,EAAE,OAAO,KAAK,SAAS,GAAG,SAAS,CA+D1C"}

package/dist/display/color-text.js

@@ -45,12 +45,9 @@ export const ColorText = defineComponent('ColorText', (props) => {
             return;
         // The component's own style, resolved for the state it is in. Not the
         // inherited one - a canvas is not told what it was nested in.
-        const own = mergeStyles(styleFromProps(props), flattenStyleInput(props.style, stateOf(ctx)));
-        const rest = {
-            fg: resolveColor(own.fg, ctx.theme, 'default'),
-            attrs: attrsFromStyle(own),
-            link: typeof props.link === 'string' ? props.link : undefined,
-        };
+        const ownProps = props;
+        const own = inkOwnStyle(ownProps, ctx);
+        const rest = inkCellStyle(own, ctx, props.link);
         const cut = props.truncate ?? truncateSideOf(wrap) ?? 'end';
         const dots = ellipsis ?? ctx.theme.glyphs.ellipsis;
         const lines = linesOf(source, wrap, area).map((line) => (stringWidth(line) > area && cut !== false ? truncate(line, area, dots, cut) : line));
@@ -114,9 +111,34 @@ export function blend(a, b, t) {
  * Exported so a component that paints its own cells - a chart, a viewer with a
  * heat column - can take an `Ink` and mean the same thing by it.
  */
+/**
+ * A component's own style, resolved for the state it is in.
+ *
+ * A canvas is not told what it was nested in, so a component that paints its
+ * own cells cannot inherit the way a `text` does: it resolves the props it was
+ * given against the theme, and hands the result to every cell the ink declines.
+ * Exported beside `painterOf` so a second painter means the same thing by it -
+ * `ColorText` and `Pattern` both paint their own cells and read the same way.
+ */
+export function inkOwnStyle(props, ctx) {
+    return mergeStyles(styleFromProps(props), flattenStyleInput(props.style, stateOf(ctx)));
+}
+/** The cell style a canvas painter starts from, given that own style. */
+export function inkCellStyle(own, ctx, link) {
+    return {
+        fg: resolveColor(own.fg, ctx.theme, 'default'),
+        attrs: attrsFromStyle(own),
+        link: typeof link === 'string' ? link : undefined,
+    };
+}
 export function painterOf(ink, ctx) {
     if (ink === undefined)
         return () => undefined;
+    // A theme with no colour has no inks, and this is not only faster: a ramp
+    // whose stops all resolve to the terminal's own still has to be *mixed*, and
+    // mixing "no colour" with itself lands on black - which is a colour.
+    if (ctx.theme.monochrome)
+        return () => undefined;
     if (typeof ink === 'function') {
         return (cell) => styleOf(ink(cell, ctx), ctx);
     }

package/dist/display/font-text.d.ts

@@ -0,0 +1,72 @@
+import type { BoxProps } from '@textui/core';
+import type { Font } from './fonts.js';
+/**
+ * `wrap` is not `BoxProps.wrap`.
+ *
+ * On a `text` it means where a line of *characters* is cut, and the whole point
+ * of this component is that the block it draws is not a line of characters: its
+ * rows are the rows of the letters, so cutting one at column sixty cuts every
+ * letter in it in half. `wrap` here means the one thing that can be done
+ * instead - break the *text* between its words, measured in the font - and it
+ * has no `char`, because a banner broken mid-word is not a banner. The drawn
+ * rows are handed to the `text` node as `wrap: 'none'` always; a caller cannot
+ * reach that.
+ */
+export interface FontTextProps extends Omit<BoxProps, 'wrap'> {
+    /** The text to draw. A newline is a line, and each is a line of banner. */
+    content: string;
+    /**
+     * The font to draw it in. The shipped `block` table by default.
+     *
+     * A font may name a substitute for a terminal that cannot draw its glyphs -
+     * `fallback` - and that is used here in place of it. There is no guessing one
+     * for a table the library has never seen, which is why the font says.
+     */
+    font?: Font;
+    /**
+     * Break the text between its words so the drawn banner fits the box.
+     *
+     * `'none'` - the default - draws the text as it was written, however wide
+     * that is: a banner is usually a size somebody picked, and at a width the
+     * caller did not intend, letters that reflow are worse than letters that
+     * overflow. `'word'` asks the box for its width and breaks the text to it,
+     * words first and a word too wide for a line of its own spent a character at
+     * a time, which is the only place a letter boundary is ever crossed.
+     *
+     * It measures the box, so the first frame - which has no width yet - draws
+     * one unbroken line, exactly as `'none'` would.
+     */
+    wrap?: 'none' | 'word';
+    /**
+     * Blank rows between one line of the block and the next. One by default.
+     *
+     * Not `gap`, which every box already has and means the space between its
+     * *children*: this is the space between the rows of one drawing. `0` butts
+     * the lines together, which for a font with a ground of its own - `pagga`'s
+     * `░`, `tmplt`'s rules - merges them into one texture; a larger number is air
+     * between them, and reads as two lines rather than as one.
+     *
+     * A newline in `content` is a line, and so is a wrap when `wrap: 'word'` is
+     * breaking the text: the gap is the same one either way.
+     */
+    lineGap?: number;
+}
+/**
+ * Text as block letters.
+ *
+ * The shape only: a string in, the same string drawn in the font's glyphs out,
+ * as a `text` node that inherits its colour like any other. Colouring the
+ * letters cell by cell - a ramp across a banner, a palette down it - is
+ * [`ColorText`](color-text.md), and handing it this output is the pair the two
+ * were split for.
+ *
+ * The letters are laid out by [`banner`](fonts.ts), which measures in the font
+ * rather than in cells, so the tracking is the font's and a glyph is
+ * proportional to what it actually draws. A character the font has no glyph for
+ * becomes a word space, so a missing letter shows as a gap rather than quietly
+ * closing up, and the placeholders a table is written in - `#`, `%`, `^`, `v` -
+ * are filled from the theme's own glyphs, which is what keeps a banner legible
+ * on a terminal that can only do ascii.
+ */
+export declare const FontText: (props: FontTextProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=font-text.d.ts.map

package/dist/display/font-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-text.d.ts","sourceRoot":"","sources":["../../src/display/font-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC3D,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,+DAmBnB,CAAC"}

package/dist/display/font-text.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, useCapabilities, useMeasure, useTheme } from '@textui/core';
+import { banner, DEFAULT_FONT, fontAt, inkGlyphs } from './fonts.js';
+/**
+ * Text as block letters.
+ *
+ * The shape only: a string in, the same string drawn in the font's glyphs out,
+ * as a `text` node that inherits its colour like any other. Colouring the
+ * letters cell by cell - a ramp across a banner, a palette down it - is
+ * [`ColorText`](color-text.md), and handing it this output is the pair the two
+ * were split for.
+ *
+ * The letters are laid out by [`banner`](fonts.ts), which measures in the font
+ * rather than in cells, so the tracking is the font's and a glyph is
+ * proportional to what it actually draws. A character the font has no glyph for
+ * becomes a word space, so a missing letter shows as a gap rather than quietly
+ * closing up, and the placeholders a table is written in - `#`, `%`, `^`, `v` -
+ * are filled from the theme's own glyphs, which is what keeps a banner legible
+ * on a terminal that can only do ascii.
+ */
+export const FontText = defineComponent('FontText', (props) => {
+    const theme = useTheme();
+    const capabilities = useCapabilities();
+    const measured = useMeasure();
+    const { content, font: chosen, wrap, lineGap, ...rest } = props;
+    const unicode = capabilities.unicode !== 'ascii';
+    const picked = chosen ?? DEFAULT_FONT;
+    const font = !unicode && picked.fallback ? fontAt(picked.fallback) : picked;
+    const width = wrap === 'word' ? measured.width : undefined;
+    const drawn = banner(content, font, inkGlyphs(theme.glyphs, unicode), width ?? Number.POSITIVE_INFINITY, lineGap);
+    // `wrap: 'none'` *after* the spread, so the lines `banner` decided on are the
+    // lines drawn. Every one of them is a row of letters; a text node wrapping
+    // one cuts letters in half, and a caller who passed a `TextWrap` through
+    // `...rest` would be doing exactly that.
+    return h('text', { content: drawn, ...rest, wrap: 'none' });
+});