@textui/widgets 0.6.1 → 0.8.0

package/src/display/gard.ts

@@ -0,0 +1,475 @@
+/**
+ * The `gard` table, transcribed.
+ *
+ * Its own module because it is 62 glyphs of somebody else's drawing and none
+ * of it is code - a table this size in `fonts.ts` would bury the four fonts
+ * that are ten lines of transform each.
+ *
+ * Two cases, digits, and a real descender: `J`, `g`, `j`, `p`, `q` and `y`
+ * hang below the baseline, which no other font here does. Every glyph is the
+ * same nine rows so they all agree where that baseline is - row six - and
+ * `banner` trims the blank rows off a finished line, so a line of capitals is
+ * five rows, one with a `g` in it is seven, and one with a digit is seven from
+ * the other end.
+ *
+ * **The digits are not in the same hand as the letters.** They came that way:
+ * a script numeral beside a pipe-and-quote capital is what the source has, and
+ * inventing a matching set would be replacing the font rather than
+ * transcribing it. What was fixed here is only where they sit - they were two
+ * rows lower than the letters, so `Gard 42` had its number sunk below its
+ * word, and the shift is the whole of the editing.
+ *
+ * Drawn in quotes, pipes, dots and slashes: no placeholder characters, and
+ * nothing outside ascii, so this is the one big font that needs no downgrade.
+ */
+export const GARD: Record<string, string[]> = {
+  // 0: ["", " /\\\\", "|| ||", "|| ||", "|| ||", "|| ||", " \\\\/", "", ""],
+  // 1: ["", " /|", "/||", " ||", " ||", " ||", ",/-'", "", ""],
+  // 2: ["", " /\\", "(  )", "  //", " //", "/(", "{___", "", ""],
+  // 3: ["____", "` //", " //", " \\\\", "  ))", " //", "/'", "", ""],
+  // 4: ["  ,", " /|", "/ |", "__|_", "----", "  |", " '-'", "", ""],
+  // 5: ["____", "||  `", "||_", "|/ \\", "   ))", "  //", " /'", "", ""],
+  // 6: ["", "  ,/", " //", "((_-", "|| ))", "(( ||", " \\//", "", ""],
+  // 7: ["____", "`  ||", "   /,", "  //", " ((", " ||", " |'", "", ""],
+  // 8: [" /\\\\", "|| ||", " \\ /", " /\\\\", "// \\\\", "|| ||", " \\\\/", "", ""],
+  // 9: ["", " /\\\\", "|| ||", "|| ||", " \\/||", "   ||", " \\_/", "", ""],
+
+
+  0: [
+    "",
+    "",
+    " .||. ",
+    "|| .||",
+    "||.'||",
+    "||' ||",
+    " '||' ",
+    "",
+    ""],
+  1: [
+    "",
+    "",
+    "  .|| ",
+    "  ||| ",
+    "   || ",
+    "   || ",
+    "  .||.",
+    "",
+    ""
+  ],
+  2: [
+    "",
+    "",
+    "  .||. ",
+    " ||  ||",
+    "   ||' ",
+    " .||   ",
+    " ||||||",
+    "",
+    ""
+  ],
+  3: [
+    "",
+    "",
+    ".|||.",
+    "   ||",
+    " .|| ",
+    "   ||",
+    "'|||'",
+    "",
+    ""
+  ],
+  4: [
+    "",
+    "",
+    "  .|| ",
+    " .||| ",
+    ".| || ",
+    "||||||",
+    "   || ",
+    "", ""],
+  5: [
+    "",
+    "",
+    "||||||",
+    "||    ",
+    "|||||.",
+    "    ||",
+    "|||||'",
+    "", ""],
+  6: ["",
+    "",
+    ".||||.",
+    "||'  '",
+    "|||||.",
+    "||  ||",
+    "'||||'",
+    "", ""],
+  7: ["",
+    "",
+    "||||||",
+    "    ||",
+    "  .|' ",
+    "  ||  ",
+    "  ||  ",
+    "",
+    ""],
+  8: [
+    "",
+    "",
+    ".||||.",
+    "||  ||",
+    " |||| ",
+    "||  ||",
+    "'||||'",
+    "",
+    ""
+  ],
+  9: [
+    "",
+    "",
+    ".||||.",
+    "||  ||",
+    "'|||||",
+    "    ||",
+    "'||||'",
+    "", ""],
+  A: ["", "", "    |", "   |||", "  |  ||", " .''''|.", ".|.  .||.", "", ""],
+  B: ["", "", "'||''|.", " ||   ||", " ||'''|.", " ||    ||", ".||...|'", "", ""],
+  C: ["", "", "  ..|'''.|", ".|'     '", "||", "'|.      .", " ''|....'", "", ""],
+  D: ["", "", "'||''|.", " ||   ||", " ||    ||", " ||    ||", ".||...|'", "", ""],
+  E: ["", "", "'||''''|", " ||  .", " ||''|", " ||", ".||.....|", "", ""],
+  F: ["", "", "'||''''|", " ||  .", " ||''|", " ||", ".||.", "", ""],
+  G: ["", "", " ..|'''.|", ".|'     '", "||    ....", "'|.    ||", " ''|...'|", "", ""],
+  H: ["", "", "'||'  '||'", " ||    ||", " ||''''||", " ||    ||", ".||.  .||.", "", ""],
+  I: ["", "", "'||'", " ||", " ||", " ||", ".||.", "", ""],
+  J: ["", "",
+    "   '||'",
+    "    ||",
+    "    ||",
+    "||  ||",
+    " '|||'",
+    "",
+    ""],
+  K: ["", "", "'||'  |'", " || .'", " ||'|.", " ||  ||", ".||.  ||.", "", ""],
+  L: ["", "", "'||'", " ||", " ||", " ||", ".||.....|", "", ""],
+  M: ["", "", "'||    ||'", " |||  |||", " |'|..'||", " | '|' ||", ".|. | .||.", "", ""],
+  N: ["", "", "'|.   '|'", " |'|   |", " | '|. |", " |   |||", ".|.   '|", "", ""],
+  O: ["", "", " ..|''||", ".|'    ||", "||      ||", "'|.     ||", " ''|...|'", "", ""],
+  P: ["", "", "'||''|.", " ||   ||", " ||...|'", " ||", ".||.", "", ""],
+  Q: ["", "", " ..|''||", ".|'    ||", "||      ||", "'|.  '. '|", "  '|...'|.", "", ""],
+  R: ["", "", "'||''|.", " ||   ||", " ||''|'", " ||   |.", ".||.  '|'", "", ""],
+  S: ["", "", " .|'''.|", " ||..  '", "  ''|||.", ".     '||", "|'....|'", "", ""],
+  T: ["", "", "|''||''|", "   ||", "   ||", "   ||", "  .||.", "", ""],
+  U: ["", "", "'||'  '|'", " ||    |", " ||    |", " ||    |", "  '|..'", "", ""],
+  V: ["", "", "'||'  '|'", " '|.  .'", "  ||  |", "   |||", "    |", "", ""],
+  W: ["", "", "'|| '||'  '|'", " '|. '|.  .'", "  ||  ||  |", "   ||| |||", "    |   |", "", ""],
+  X: ["", "", "'||' '|'", "  || |", "   ||", "  | ||", ".|   ||.", "", ""],
+  Y: ["", "", "'||' '|'", "  || |", "   ||", "   ||", "  .||.", "", ""],
+  Z: ["", "", "|'''''||", "    .|'", "   ||", " .|'", "||......|", "", ""],
+  a: ["", "", "", " ....", "'' .||", ".|' ||", "'|..'|'", "", ""],
+  b: ["", "", "'||", " || ...", " ||'  ||", " ||    |", " '|...'", "", ""],
+  c: ["", "", "", "  ....", ".|   ''", "||", " '|...'", "", ""],
+  d: ["", "", "     '||", "   .. ||", " .'  '||", " |.   ||", " '|..'||.", "", ""],
+  e: ["", "", "", "  ....", ".|...||", "||", " '|...'", "", ""],
+  f: ["", "", "  .'|.", ".||.", " ||", " ||", ".||.", "", ""],
+  g: ["", "", "", "  ... .", " || ||", "  |''", " '||||.", ".|....'", ""],
+  h: ["", "", "'||", " || ..", " ||' ||", " ||  ||", ".||. ||.", "", ""],
+  i: ["", "", " ||", "...", " ||", " ||", ".||.", "", ""],
+  j: ["", "", "   ||", "  ...", "   ||", "   ||", "   ||", ".. |'", " ''"],
+  k: ["", "", "'||", " ||  ..", " || .'", " ||'|.", ".||. ||.", "", ""],
+  l: ["", "", "'||", " ||", " ||", " ||", ".||.", "", ""],
+  m: ["", "", "", ".. .. ..", " || || ||", " || || ||", ".|| || ||.", "", ""],
+  n: ["", "", "", ".. ...", " ||  ||", " ||  ||", ".||. ||.", "", ""],
+  o: ["", "", "", "  ...", ".|  '|.", "||   ||", " '|..|'", "", ""],
+  p: ["", "", "", "... ...", " ||'  ||", " ||    |", " ||...'", " ||", "''''"],
+  q: ["", "", "", "  ... .", ".'   ||", "|.   ||", "'|..'||", "     ||", "    ''''"],
+  r: ["", "", "", "... ..", " ||' ''", " ||", ".||.", "", ""],
+  s: ["", "", "", " ....", "||. '", ". '|..", "|'..|'", "", ""],
+  t: ["", "", "  .", ".||.", " ||", " ||", " '|.'", "", ""],
+  u: ["", "", "", "... ...", " ||  ||", " ||  ||", " '|..'|.", "", ""],
+  v: ["", "", "", ".... ...", " '|.  |", "  '|.|", "   '|", "", ""],
+  w: ["", "", "", "... ... ...", " ||  ||  |", "  ||| |||", "   |   |", "", ""],
+  x: ["", "", "", "... ...", " '|..'", "  .|.", ".|  ||.", "", ""],
+  y: ["", "", "", ".... ...", " '|.  |", "  '|.|", "   '|", ".. |", " ''"],
+  z: ["", "", "", "......", "'  .|'", " .|'", "||....|", "", ""],
+  // Drawn to match, not transcribed: the source is letters and digits only.
+  // These are the marks its vocabulary of pipes, dots and quotes makes on its
+  // own terms - a full stop is the foot of a letter with no letter over it.
+  // The ornate rest of ascii is not here on purpose: imitating this hand is
+  // guesswork, and a stand-in that says `@` beats a shape that says nothing.
+  '!': ["", "", "'||'", " || ", " || ", "", ".||.", "", ""],
+  '"': ["", "",
+    ".||..||.",
+    " ''  ''",
+    "", "",
+    "", "", ""],
+  '#': [
+    "",
+    "",
+    // "  ..  .. ",
+    // "..||..||..",
+    // "''||''||''",
+    // "..||..||..",
+    // "''||''||''",
+    "   ||  ||",
+    " ||||||||||",
+    "   ||  ||",
+    " ||||||||||",
+    "   ||  ||",
+    "",
+    ""
+  ],
+  '$': [
+    "",
+    "   . .",
+    " .||'|.|",
+    " |||.| '",
+    "  '||||.",
+    ".  | |'||",
+    "|'.|.||'",
+    "   ' '",
+    ""],
+  '%': [
+    "",
+    "",
+    "<>  /  ",
+    "   /   ",
+    "  /    ",
+    " /     ",
+    "/  <>  ",
+    "",
+    ""
+  ],
+  '&': [
+    "",
+    "",
+    " /\\      ",
+    " \\/      ",
+    " /\\ ,    ",
+    "/'\\\\,    ",
+    "|  \\\\    ",
+    "\\\\-/\\    ",
+    ""
+  ],
+  "'": [
+    "",
+    "",
+    "'||'",
+    " ''",
+    "", "", "", "", ""],
+  '(': [
+    "",
+    "    .",
+    "  .|'",
+    " ||   ",
+    " ||   ",
+    " ||   ",
+    "  '|.",
+    "    '",
+    "",
+  ],
+  ')': [
+    "",
+    ".   ",
+    "'|.  ",
+    "  || ",
+    "  ||",
+    "  || ",
+    ".|'  ",
+    "'   ",
+    "",
+  ],
+  '*': [
+    "",
+    "",
+    "",
+    "  \\ /   ",
+    " --*-- ",
+    "  / \\  ",
+    "",
+    "",
+    "",
+  ],
+  '+': [
+    "",
+    "",
+    "",
+    "   ||   ",
+    " |||||| ",
+    "   ||   ",
+    "",
+    "",
+    "",
+  ],
+  ',': ["", "", "", "", "", "", ".||.", " ''", ""],
+  '-': ["", "", "", "", "......", "", "", "", ""],
+  '.': ["", "", "", "", "", "", ".||.", "", ""],
+  '/': [
+    "",
+    "",
+    "    // ",
+    "   //  ",
+    "  //   ",
+    " //    ",
+    "//     ",
+    "",
+    ""
+  ],
+  ':': ["", "", "", ".||.", "", "", ".||.", "", ""],
+  ';': ["", "", "", ".||.", "", "", ".||.", " ''", ""],
+  '<': [
+    "",
+    "",
+    "    ..",
+    " .||' ",
+    "||    ",
+    " '||. ",
+    "    ''",
+    "",
+    ""
+  ],
+  '=': [
+    "",
+    "",
+    "",
+    "|||||",
+    "    ",
+    "|||||",
+    "",
+    "",
+    ""
+  ],
+  '>': [
+    "",
+    "",
+    "..",
+    " '||.",
+    "    ||",
+    " .||'",
+    "''",
+    "",
+    ""
+  ],
+  '?': [
+    "",
+    "",
+    "  .|||. ",
+    " ||   ||",
+    "    .|' ",
+    "   ||   ",
+    "  .||.  ",
+    "",
+    ""
+  ],
+  '@': [
+    "",
+    "",
+    "   .|''|.",
+    "  || .||||",
+    " || ||  ||",
+    " || '|.|||",
+    "  '|....'",
+    "",
+    ""
+  ],
+  '[': [
+    "",
+    "",
+    "||||",
+    "||  ",
+    "||  ",
+    "||  ",
+    "||||",
+    "",
+    ""
+  ],
+  '\\': [
+    "",
+    "",
+    " \\\\    ",
+    "  \\\\   ",
+    "   \\\\  ",
+    "    \\\\ ",
+    "     \\\\",
+    "",
+    ""
+  ],
+  ']': [
+    "",
+    "",
+    "||||",
+    "  ||",
+    "  || ",
+    "  ||",
+    "||||",
+    "",
+    ""
+  ],
+  '^': [
+    "",
+    "",
+    "  .||.",
+    ".||  ||.",
+    "       ",
+    "       ",
+    "       ",
+    "",
+    ""
+  ],
+  '_': ["", "", "", "", "", "", "", "......", ""],
+  '`': [
+    "",
+    "",
+    " \\\\    ",
+    "  ''   ",
+    "       ",
+    "       ",
+    "       ",
+    "",
+    ""
+  ],
+  '{': [
+    "",
+    "",
+    ".||",
+    "'|",
+    "||",
+    ".| ",
+    "'||",
+    "",
+    ""
+  ],
+  '|': [
+    "",
+    "",
+    "  ||  ",
+    "  ||  ",
+    "  ||  ",
+    "  ||  ",
+    "  ||  ",
+    "",
+    ""
+  ],
+  '}': [
+    "",
+    "",
+    "||.",
+    " |' ",
+    " ||",
+    " |.  ",
+    "||'",
+    "",
+    ""
+  ],
+  '~': [
+    "",
+    "",
+    "       ",
+    "       ",
+    ".''..,'",
+    "       ",
+    "       ",
+    "",
+    ""
+  ],
+};

package/src/display/index.ts

@@ -4,11 +4,13 @@ import { Badge } from './badge.js';
 import { Card } from './card.js';
 import { ColorText } from './color-text.js';
 import { EmptyState } from './empty-state.js';
+import { FontText } from './font-text.js';
 import { ErrorState } from './error-state.js';
 import { Heading } from './heading.js';
 import { KeyValue } from './key-value.js';
 import { Label } from './label.js';
 import { Marquee } from './marquee.js';
+import { Pattern } from './pattern.js';
 import { Progress } from './progress.js';
 import { Skeleton } from './skeleton.js';
 import { Spinner } from './spinner.js';
@@ -28,11 +30,14 @@ export * from './badge.js';
 export * from './card.js';
 export * from './color-text.js';
 export * from './empty-state.js';
+export * from './font-text.js';
+export * from './fonts.js';
 export * from './error-state.js';
 export * from './heading.js';
 export * from './key-value.js';
 export * from './label.js';
 export * from './marquee.js';
+export * from './pattern.js';
 export * from './progress.js';
 export * from './skeleton.js';
 export * from './spinner.js';
@@ -50,7 +55,9 @@ export const DISPLAY_COMPONENTS: ComponentDefinition[] = [
   { component: 'Progress', category: 'feedback', renderer: { kind: 'function', render: Progress }, role: 'progressbar', description: 'Determinate or indeterminate bar, sub-cell resolution.' },
   { component: 'Spinner', category: 'feedback', renderer: { kind: 'function', render: Spinner }, role: 'status', description: 'Animated activity indicator.' },
   { component: 'ColorText', category: 'display', renderer: { kind: 'function', render: ColorText }, description: 'Multiline text coloured cell by cell - a ramp, a palette per line, or a function.' },
+  { component: 'FontText', category: 'display', renderer: { kind: 'function', render: FontText }, description: 'Text drawn in a block font, one glyph table to a letter.' },
   { component: 'Marquee', category: 'display', renderer: { kind: 'function', render: Marquee }, role: 'marquee', description: 'Text too long for its box, read by sliding it while it has the cursor.' },
+  { component: 'Pattern', category: 'display', renderer: { kind: 'function', render: Pattern }, description: 'A tile, repeated - a texture under the children or a motif over them.' },
   { component: 'Skeleton', category: 'feedback', renderer: { kind: 'function', render: Skeleton }, description: 'Loading placeholder.' },
   { component: 'EmptyState', category: 'feedback', renderer: { kind: 'function', render: EmptyState }, description: 'Nothing here, and what to do about it.' },
   { component: 'ErrorState', category: 'feedback', renderer: { kind: 'function', render: ErrorState }, role: 'alert', description: 'A failure, with its message.' },

package/src/display/key-value.ts

@@ -2,19 +2,47 @@ import type { BoxProps, SemanticVariant } from '@textui/core';
 import { defineComponent, h, stringWidth } from '@textui/core';
 import { TONE as TONE_COLOR } from '../tone.js';
 
+/** Where a label or a value sits in the cells it was given. */
+export type KeyValueAlign = 'left' | 'right';
+
+export interface KeyValueItem {
+  label: string;
+  value: string;
+  tone?: SemanticVariant;
+  /** Overrides the block's `labelAlign` for this pair. */
+  labelAlign?: KeyValueAlign;
+  /** Overrides the block's `valueAlign` for this pair. */
+  valueAlign?: KeyValueAlign;
+}
+
 export interface KeyValueProps extends BoxProps {
-  items: { label: string; value: string; tone?: SemanticVariant }[];
+  items: KeyValueItem[];
   /** Cells reserved for labels. Computed from the longest when unset. */
   labelWidth?: number;
+  /**
+   * Cells added to the longest label when the width is computed.
+   *
+   * The column is otherwise exactly as wide as its longest label, which leaves
+   * the value one gap after it; room here is what makes the values read as a
+   * column of their own rather than as the tail of the labels. Ignored when
+   * `labelWidth` states the width, which is exact.
+   */
+  labelGap?: number;
+  /** Where a label sits in its column. `left` by default. */
+  labelAlign?: KeyValueAlign;
+  /** Where a value sits in what is left of the pair. `left` by default. */
+  valueAlign?: KeyValueAlign;
   columns?: number;
 }
 
 /** Structured data as aligned label/value pairs. */
 export const KeyValue = defineComponent<KeyValueProps>('KeyValue', (props) => {
-  const { items, labelWidth, columns = 1, ...rest } = props;
-  const width = labelWidth ?? Math.max(0, ...items.map((i) => stringWidth(i.label)));
+  const {
+    items, labelWidth, labelGap = 0, labelAlign = 'left', valueAlign = 'left', columns = 1, ...rest
+  } = props;
+  const width = labelWidth ?? Math.max(0, ...items.map((i) => stringWidth(i.label))) + labelGap;
 
-  const rows: typeof items[] = [];
+  const rows: KeyValueItem[][] = [];
   for (let i = 0; i < items.length; i += columns) rows.push(items.slice(i, i + columns));
 
   return h('box', { direction: 'column', ...rest },
@@ -22,8 +50,18 @@ export const KeyValue = defineComponent<KeyValueProps>('KeyValue', (props) => {
       h('box', { key: i, direction: 'row', gap: 2 },
         ...row.map((item, j) =>
           h('box', { key: j, direction: 'row', gap: 1, flex: 1 },
-            h('box', { width }, h('text', { content: item.label, fg: 'muted' })),
-            h('text', { content: item.value, fg: item.tone ? TONE_COLOR[item.tone] : undefined, truncate: 'end', flex: 1 }),
+            h('box', { width }, h('text', {
+              content: item.label,
+              fg: 'muted',
+              textAlign: item.labelAlign ?? labelAlign,
+            })),
+            h('text', {
+              content: item.value,
+              fg: item.tone ? TONE_COLOR[item.tone] : undefined,
+              truncate: 'end',
+              flex: 1,
+              textAlign: item.valueAlign ?? valueAlign,
+            }),
           ),
         ),
       ),