@textui/widgets 0.1.0

package/src/data/pagination.ts

@@ -0,0 +1,31 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useFocus, useInput, useTheme } from '@textui/core';
+
+export interface PaginationProps extends BoxProps {
+  page: number;
+  pageCount: number;
+  total?: number;
+  onChange?(page: number): void;
+}
+
+export const Pagination = defineComponent<PaginationProps>('Pagination', (props) => {
+  const theme = useTheme();
+  const { page, pageCount, total, onChange, ...rest } = props;
+  const focus = useFocus({});
+
+  useInput(
+    (event) => {
+      if (event.name === 'left' && page > 1) { onChange?.(page - 1); return true; }
+      if (event.name === 'right' && page < pageCount) { onChange?.(page + 1); return true; }
+      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: `${total} items`, fg: 'muted' }) : null,
+  );
+});

package/src/data/scroll-thumb.ts

@@ -0,0 +1,40 @@
+import type { RenderOutput } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+
+/**
+ * A one-cell scrollbar.
+ *
+ * Exported because anything with a viewport wants the same one: two components
+ * drawing their own would drift, and the thumb is the only thing on screen
+ * that says how much of a file you are looking at.
+ */
+export const ScrollThumb = defineComponent<{
+  total: number;
+  rows: number;
+  offset: number;
+  focused: boolean;
+}>('ScrollThumb', ({ total, rows, offset, focused }) => {
+  const theme = useTheme();
+  // Not border glyphs: `left` and `right` are the same character in every
+  // border style, so a thumb drawn with one would be invisible against a
+  // track drawn with the other.
+  const thumbChar = theme.glyphs.progressFull;
+  const trackChar = theme.glyphs.progressEmpty;
+  const track = Math.max(1, rows);
+  const size = Math.max(1, Math.round((rows / Math.max(1, total)) * track));
+  const span = Math.max(0, track - size);
+  const position = total <= rows
+    ? 0
+    : Math.round((offset / Math.max(1, total - rows)) * span);
+
+  const cells: RenderOutput[] = [];
+  for (let i = 0; i < track; i++) {
+    const onThumb = i >= position && i < position + size;
+    cells.push(h('text', {
+      key: i,
+      content: onThumb ? thumbChar : trackChar,
+      fg: onThumb ? (focused ? 'focus' : 'border') : 'borderSubtle',
+    }));
+  }
+  return h('box', { width: 1, direction: 'column' }, ...cells);
+});

package/src/data/shared.ts

@@ -0,0 +1,23 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+
+/**
+ * An entry that reports how tall it turned out to be.
+ *
+ * Through a ref rather than state, deliberately: a height arriving must not
+ * schedule a render, or every measurement would cause the next measurement.
+ */
+export const FeedEntry = defineComponent<BoxProps & { onHeight(height: number): void }>(
+  'FeedEntry',
+  (props) => {
+    const { onHeight, children, ...rest } = props;
+    const measured = useMeasure();
+    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    return h('box', { direction: 'column', ...rest }, children);
+  },
+);
+
+export const FeedScrollbar = defineComponent<Record<string, never>>('FeedScrollbar', () => {
+  const theme = useTheme();
+  return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
+});

package/src/data/tree.ts

@@ -0,0 +1,215 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+import {
+  chorded,
+  defineComponent,
+  h,
+  useFocus,
+  useInput,
+  useMeasure,
+  useTheme,
+} from '@textui/core';
+import { usePanelState } from '../panel/index.js';
+import { TONE } from '../tone.js';
+import { viewportRows } from '../viewport.js';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  icon?: string;
+  children?: TreeNode[];
+  /** Children exist but are not loaded yet. */
+  hasChildren?: boolean;
+  tone?: SemanticVariant;
+  meta?: string;
+}
+
+export interface TreeProps extends BoxProps {
+  nodes: TreeNode[];
+  selectedId?: string;
+  expandedIds?: string[];
+  onSelect?(id: string, node: TreeNode): void;
+  onActivate?(id: string, node: TreeNode): void;
+  onToggle?(id: string, expanded: boolean): void;
+  visibleRows?: number;
+  indent?: number;
+  /**
+   * What the expand mark looks like, when a chevron is not what it means.
+   *
+   * A file tree's twisty is not only "there is more here" - it is also the one
+   * thing on the row that says this is a folder, because a folder has no size
+   * beside it and nothing else distinguishes it. A caller that knows its rows
+   * are folders can say so; everything else gets the theme's chevrons.
+   */
+  twistyOpen?: string;
+  twistyClosed?: string;
+  /** Claim focus on mount, if nothing in this scope already has it. */
+  autoFocus?: boolean;
+}
+
+interface FlatNode {
+  node: TreeNode;
+  depth: number;
+  expanded: boolean;
+  expandable: boolean;
+}
+
+function flatten(nodes: TreeNode[], expanded: Set<string>, depth = 0, out: FlatNode[] = []): FlatNode[] {
+  for (const node of nodes) {
+    const expandable = Boolean(node.hasChildren || (node.children && node.children.length > 0));
+    const isExpanded = expanded.has(node.id);
+    out.push({ node, depth, expanded: isExpanded, expandable });
+    if (isExpanded && node.children) flatten(node.children, expanded, depth + 1, out);
+  }
+  return out;
+}
+
+export const Tree = defineComponent<TreeProps>('Tree', (props) => {
+  const theme = useTheme();
+  const {
+    nodes, selectedId, expandedIds, onSelect, onActivate, onToggle,
+    visibleRows, indent = 2, twistyOpen, twistyClosed, autoFocus, ...rest
+  } = props;
+
+  const focus = useFocus({ autoFocus });
+  const measured = useMeasure();
+  const treePage = viewportRows(props, measured, 10, { requested: visibleRows });
+  /*
+   * Uncontrolled expansion belongs to the panel when there is one: a JSON file
+   * opened as a structure, switched away from and switched back to, comes back
+   * open where it was rather than collapsed to the root. A tree in a sidebar
+   * is in no panel and keeps ordinary component state, which is what it had.
+   */
+  const [treeView, setTreeView] = usePanelState<{ expanded: string[]; selected: string | null }>(
+    { expanded: [], selected: null },
+  );
+  const internalExpanded = treeView.expanded;
+  const setInternalExpanded = (next: string[]): void => setTreeView({ expanded: next });
+  const internalSelected = treeView.selected;
+  const setInternalSelected = (next: string | null): void => setTreeView({ selected: next });
+
+  const expanded = new Set(expandedIds ?? internalExpanded);
+  const rows = flatten(nodes, expanded);
+  const currentId = selectedId ?? internalSelected ?? rows[0]?.node.id ?? null;
+  const index = Math.max(0, rows.findIndex((r) => r.node.id === currentId));
+
+  const select = (next: number): void => {
+    const row = rows[Math.max(0, Math.min(rows.length - 1, next))];
+    if (!row) return;
+    if (selectedId === undefined) setInternalSelected(row.node.id);
+    onSelect?.(row.node.id, row.node);
+  };
+
+  const toggle = (id: string, next: boolean): void => {
+    if (expandedIds === undefined) {
+      setInternalExpanded(next
+        ? [...internalExpanded, id]
+        : internalExpanded.filter((e) => e !== id));
+    }
+    onToggle?.(id, next);
+  };
+
+  useInput(
+    (event) => {
+      const row = rows[index];
+      if (!row || chorded(event)) return false;
+      switch (event.name) {
+        case 'up': select(index - 1); return true;
+        case 'down': select(index + 1); return true;
+        case 'pageup': select(index - treePage); return true;
+        case 'pagedown': select(index + treePage); return true;
+        case 'home': select(0); return true;
+        case 'end': select(rows.length - 1); return true;
+        case 'right':
+          // Right expands, and only moves inward once already expanded.
+          if (row.expandable && !row.expanded) toggle(row.node.id, true);
+          else select(index + 1);
+          return true;
+        case 'left':
+          if (row.expandable && row.expanded) toggle(row.node.id, false);
+          else {
+            const parent = rows.slice(0, index).reverse().find((r) => r.depth < row.depth);
+            if (parent) select(rows.indexOf(parent));
+          }
+          return true;
+        case 'enter':
+          if (row.expandable) toggle(row.node.id, !row.expanded);
+          onActivate?.(row.node.id, row.node);
+          return true;
+        default: return false;
+      }
+    },
+    { focusId: focus.id },
+  );
+
+  // As with the list: how many rows fit is a question for the layout, not for
+  // the data. A deep tree scrolls inside its pane instead of stretching it.
+  const shown = viewportRows(props, measured, rows.length, { requested: visibleRows });
+  const window = rows.length <= shown
+    ? rows
+    : rows.slice(
+        Math.max(0, Math.min(index - Math.floor(shown / 2), rows.length - shown)),
+        Math.max(0, Math.min(index - Math.floor(shown / 2), rows.length - shown)) + shown,
+      );
+
+  /*
+   * One glyph column, and a second only when something needs both.
+   *
+   * A row that cannot expand has no twisty, so its icon goes in the twisty's
+   * place - otherwise a file sits one column right of a folder at the same
+   * depth and reads as being inside it. That was exactly the bug: an explorer
+   * that puts the folder glyph *in* the twisty (which is what `twistyClosed`
+   * is for) had its files pushed two columns clear of their siblings the
+   * moment they grew icons of their own.
+   *
+   * A second column appears only for a tree where something expandable also
+   * has an icon - a chevron *and* a folder mark - and then it is reserved on
+   * every row, including the ones that leave it blank, because a column that
+   * comes and go by row is the same misalignment wearing a different hat.
+   * Measured over every row rather than the visible ones, so scrolling cannot
+   * shift the layout under you.
+   */
+  const iconColumn = rows.some((r) => r.expandable && r.node.icon !== undefined);
+
+  return h('box', { id: focus.id, role: 'tree', direction: 'column', ...rest },
+    ...window.map((row) => {
+      const active = row.node.id === currentId;
+      const twisty = row.expandable
+        ? (row.expanded ? (twistyOpen ?? theme.glyphs.chevronDown)
+          : (twistyClosed ?? theme.glyphs.chevronRight))
+        : (iconColumn ? ' ' : row.node.icon ?? ' ');
+      // The marker carries the node's colour only when it *is* the node's
+      // icon; a twisty is structure and takes the row's own colour.
+      const markerTone = !row.expandable && !iconColumn && row.node.tone !== undefined
+        ? TONE[row.node.tone]
+        : undefined;
+
+      return h('box', {
+        key: row.node.id,
+        role: 'treeitem',
+        label: row.node.label,
+        selected: active,
+        direction: 'row',
+        gap: 1,
+        bg: active && focus.focused ? 'selected' : active ? 'active' : undefined,
+        fg: active && focus.focused ? 'inverted' : undefined,
+        onClick: () => {
+          if (selectedId === undefined) setInternalSelected(row.node.id);
+          onSelect?.(row.node.id, row.node);
+        },
+      },
+        h('text', {
+          content: ' '.repeat(row.depth * indent) + twisty,
+          ...(markerTone !== undefined && !(active && focus.focused) ? { fg: markerTone } : {}),
+        }),
+        iconColumn
+          ? h('text', {
+              content: row.node.icon ?? ' ',
+              ...(row.node.tone !== undefined ? { fg: TONE[row.node.tone] } : {}),
+            })
+          : null,
+        h('text', { content: row.node.label, flex: 1, truncate: 'end' }),
+        row.node.meta ? h('text', { content: row.node.meta, fg: active ? undefined : 'muted' }) : null,
+      );
+    }),
+  );
+});

package/src/decorations.ts

@@ -0,0 +1,176 @@
+import type { BindingPath, ReactiveStore, SemanticVariant, StyleColor } from '@textui/core';
+import { useStoreSubtree, useRuntime, escapeSegment } from '@textui/core';
+
+/**
+ * Marks on resources.
+ *
+ * A tree of files is the same tree whether or not anything has an opinion
+ * about the files in it - so "this one is modified", "this one has an error",
+ * "this one matched your search" cannot be properties of the explorer. They
+ * are contributions, and the explorer's job is to draw whatever arrived.
+ *
+ * They live in the store rather than behind a registry because a decoration is
+ * a *value that changes*, not a capability that is registered once: git
+ * refreshes, a build finishes, a search runs again. The explorer subscribes to
+ * one subtree and redraws; nothing has to be told about anything.
+ *
+ * Each contributor owns a source name and writes under it, which is what makes
+ * two contributors possible and what makes unloading one of them a single
+ * delete rather than a diff.
+ */
+
+export const DECORATIONS_ROOT = '$/ui/decorations';
+
+export interface ResourceDecoration {
+  /** A short mark at the end of the row. Wins over whatever the row had. */
+  badge?: string;
+  /** Colours the row, so a glance is enough. */
+  tone?: SemanticVariant;
+  /** Replaces the row's icon. */
+  icon?: string;
+}
+
+/** Where one contributor's marks live. */
+export function decorationsPath(source: string): BindingPath {
+  return `${DECORATIONS_ROOT}/${escapeSegment(source)}` as BindingPath;
+}
+
+/**
+ * Publish one contributor's marks, as a whole.
+ *
+ * The whole set at once, deliberately: a decoration that is *gone* - the file
+ * was committed, the error was fixed - has to disappear, and a merge of
+ * updates leaves the old ones behind forever.
+ */
+export function setDecorations(
+  store: ReactiveStore,
+  source: string,
+  byUri: Record<string, ResourceDecoration>,
+): void {
+  const escaped: Record<string, ResourceDecoration> = {};
+  for (const [uri, decoration] of Object.entries(byUri)) {
+    escaped[escapeSegment(uri)] = decoration;
+  }
+  store.set(decorationsPath(source), escaped);
+}
+
+export function clearDecorations(store: ReactiveStore, source: string): void {
+  store.set(decorationsPath(source), null);
+}
+
+/** Every contributor's mark for one resource, merged. */
+export function decorationFor(store: ReactiveStore, uri: string): ResourceDecoration | null {
+  const all = store.get<Record<string, Record<string, ResourceDecoration>>>(
+    DECORATIONS_ROOT as BindingPath,
+  );
+  if (!all) return null;
+
+  const key = escapeSegment(uri);
+  let merged: ResourceDecoration | null = null;
+  for (const bySource of Object.values(all)) {
+    const found = bySource?.[key];
+    if (found) merged = { ...(merged ?? {}), ...found };
+  }
+  return merged;
+}
+
+/**
+ * A reader that redraws when anything changes.
+ *
+ * One subscription for the whole tree rather than one per row: a component
+ * cannot call a hook per item without its hook count moving as the list does,
+ * and the marks arrive as one refresh anyway.
+ */
+export function useDecorations(): (uri: string) => ResourceDecoration | null {
+  const runtime = useRuntime();
+  useStoreSubtree(DECORATIONS_ROOT as BindingPath);
+  return (uri: string) => decorationFor(runtime.store, uri);
+}
+
+// ------------------------------------------------------------------ lines
+
+/**
+ * Marks on lines, which is the same idea one level down.
+ *
+ * A gutter belongs to whatever is drawing the file, and what a line *means* -
+ * added since the last commit, covered by a test, carrying an error - belongs
+ * to whatever knows that. Same bargain as the tree: the editor draws a column
+ * of marks and has never heard of git.
+ *
+ * Kept per resource rather than per panel, because "this line is new" is true
+ * of the file and not of where you happen to be looking at it.
+ */
+export const LINE_MARKS_ROOT = '$/ui/line-marks';
+
+export type LineMark = 'added' | 'changed' | 'removed';
+
+/** Line numbers count from zero, like an index, because a caret does. */
+export type LineMarks = Record<number, LineMark>;
+
+/**
+ * What a marked line looks like, in one cell.
+ *
+ * ASCII, so every terminal draws one - and here rather than in whichever
+ * component happened to need it first, because two renderers drawing the same
+ * mark differently is the same file looking like two files. It lived in the
+ * editor, which is why the *viewer* drew no marks at all: you turned the
+ * setting on, stayed in view mode, and nothing happened.
+ */
+export const MARK_GLYPH: Record<LineMark, string> = {
+  added: '+',
+  changed: '~',
+  removed: '_',
+};
+
+export const MARK_TONE: Record<LineMark, StyleColor> = {
+  added: 'success',
+  changed: 'warning',
+  removed: 'danger',
+};
+
+export function lineMarksPath(source: string, uri: string): BindingPath {
+  return `${LINE_MARKS_ROOT}/${escapeSegment(source)}/${escapeSegment(uri)}` as BindingPath;
+}
+
+export function setLineMarks(
+  store: ReactiveStore,
+  source: string,
+  uri: string,
+  marks: LineMarks | null,
+): void {
+  store.set(lineMarksPath(source, uri), marks);
+}
+
+/** Drop everything one contributor said, wherever it said it. */
+export function clearLineMarks(store: ReactiveStore, source: string): void {
+  store.set(`${LINE_MARKS_ROOT}/${escapeSegment(source)}` as BindingPath, null);
+}
+
+export function lineMarksFor(store: ReactiveStore, uri: string | null): LineMarks {
+  if (uri === null) return {};
+  const all = store.get<Record<string, Record<string, LineMarks>>>(
+    LINE_MARKS_ROOT as BindingPath,
+  );
+  if (!all) return {};
+
+  const key = escapeSegment(uri);
+  let merged: LineMarks = {};
+  for (const bySource of Object.values(all)) {
+    const found = bySource?.[key];
+    if (found) merged = { ...merged, ...found };
+  }
+  return merged;
+}
+
+/**
+ * The marks on one file, redrawn when they change.
+ *
+ * One subscription, and an empty object when nobody has said anything - so a
+ * renderer can ask unconditionally and draw no column at all when the answer
+ * is empty.
+ */
+export function useLineMarks(uri: string | null): LineMarks {
+  const runtime = useRuntime();
+  useStoreSubtree(LINE_MARKS_ROOT as BindingPath);
+  return lineMarksFor(runtime.store, uri);
+}

package/src/display/alert.ts

@@ -0,0 +1,28 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+
+export interface AlertProps extends BoxProps {
+  tone?: 'info' | 'success' | 'warning' | 'danger';
+  title?: string;
+  message?: string;
+}
+
+export const Alert = defineComponent<AlertProps>('Alert', (props) => {
+  const theme = useTheme();
+  const { tone = 'info', title, message, children, ...rest } = props;
+  const icon = {
+    info: theme.glyphs.info,
+    success: theme.glyphs.check,
+    warning: theme.glyphs.warning,
+    danger: theme.glyphs.cross,
+  }[tone];
+
+  return h('box', { role: 'alert', direction: 'row', gap: 1, ...rest },
+    h('text', { content: icon, fg: tone }),
+    h('box', { direction: 'column', flex: 1 },
+      title ? h('text', { content: title, bold: true, fg: tone }) : null,
+      message ? h('text', { content: message, wrap: 'word' }) : null,
+      children,
+    ),
+  );
+});

package/src/display/badge.ts

@@ -0,0 +1,40 @@
+import type { BoxProps, SemanticVariant, SurfaceVariant } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+import { ON_TONE, TONE as TONE_COLOR } from '../tone.js';
+
+export interface BadgeProps extends BoxProps {
+  label: string;
+  tone?: SemanticVariant;
+  variant?: SurfaceVariant;
+  /** Glyph before the label, so the badge reads without colour. */
+  icon?: string;
+}
+
+export const Badge = defineComponent<BadgeProps>('Badge', (props) => {
+  const { label, tone = 'default', variant = 'ghost', icon, ...rest } = props;
+  const color = TONE_COLOR[tone];
+
+  // `ghost` is chrome-less: the tone, and nothing around it. That is the
+  // default because it is the badge that fits in a sentence, and it is what
+  // `ghost` already means on Button - one word, one meaning, both components.
+  const style =
+    variant === 'solid' ? { bg: color, fg: ON_TONE[tone] } : { fg: color };
+
+  // A badge is inline: it sits in a row of text and must stay one line tall.
+  // The outline variant is therefore brackets rather than a box border - a
+  // three-row chip in a sentence is not an outline, it is a panel.
+  const brackets = variant === 'outline';
+
+  return h('box', {
+    direction: 'row',
+    gap: icon ? 1 : 0,
+    padding: variant === 'solid' ? [0, 1] : 0,
+    ...style,
+    ...rest,
+  },
+    brackets ? h('text', { content: '[' }) : null,
+    icon ? h('text', { content: icon }) : null,
+    h('text', { content: label }),
+    brackets ? h('text', { content: ']' }) : null,
+  );
+});

package/src/display/card.ts

@@ -0,0 +1,23 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+
+export interface CardProps extends BoxProps {
+  title?: string;
+  subtitle?: string;
+  footer?: string;
+}
+
+export const Card = defineComponent<CardProps>('Card', (props) => {
+  const theme = useTheme();
+  const { title, subtitle, children, ...rest } = props;
+  return h('box', {
+    border: theme.border,
+    padding: theme.density === 'compact' ? 0 : [0, 1],
+    direction: 'column',
+    title,
+    ...rest,
+  },
+    subtitle ? h('text', { content: subtitle, fg: 'muted' }) : null,
+    children,
+  );
+});

package/src/display/empty-state.ts

@@ -0,0 +1,21 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+export interface EmptyStateProps extends BoxProps {
+  title: string;
+  message?: string;
+  icon?: string;
+  /** Hint text: what the reader can do about it. */
+  hint?: string;
+}
+
+export const EmptyState = defineComponent<EmptyStateProps>('EmptyState', (props) => {
+  const { title, message, icon, hint, children, ...rest } = props;
+  return h('box', { direction: 'column', align: 'center', justify: 'center', flex: 1, gap: 0, ...rest },
+    icon ? h('text', { content: icon, fg: 'subtle' }) : null,
+    h('text', { content: title, bold: true, fg: 'muted' }),
+    message ? h('text', { content: message, fg: 'subtle', wrap: 'word', textAlign: 'center' }) : null,
+    hint ? h('text', { content: hint, fg: 'subtle', dim: true }) : null,
+    children,
+  );
+});

package/src/display/error-state.ts

@@ -0,0 +1,23 @@
+import type { BoxProps } from '@textui/core';
+import { defineComponent, h, useTheme } from '@textui/core';
+
+export interface ErrorStateProps extends BoxProps {
+  title?: string;
+  error: unknown;
+  /** Command id offered as a retry. */
+  onRetry?: () => void;
+}
+
+export const ErrorState = defineComponent<ErrorStateProps>('ErrorState', (props) => {
+  const theme = useTheme();
+  const { title = 'Something went wrong', error, onRetry, ...rest } = props;
+  const message = error instanceof Error ? error.message : String(error);
+
+  return h('box', { role: 'alert', direction: 'column', gap: 1, padding: 1, ...rest },
+    h('box', { direction: 'row', gap: 1 },
+      h('text', { content: theme.glyphs.cross, fg: 'danger' }),
+      h('text', { content: title, bold: true, fg: 'danger' })),
+    h('text', { content: message, fg: 'muted', wrap: 'word' }),
+    onRetry ? h('text', { content: 'r  retry', fg: 'subtle' }) : null,
+  );
+});

package/src/display/heading.ts

@@ -0,0 +1,17 @@
+import type { TextProps } from '@textui/core';
+import { defineComponent, h } from '@textui/core';
+
+
+export interface HeadingProps extends TextProps {
+  level?: 1 | 2 | 3;
+}
+
+export const Heading = defineComponent<HeadingProps>('Heading', ({ level = 1, ...props }) =>
+  h('text', {
+    role: 'heading',
+    bold: level <= 2,
+    dim: level === 3,
+    fg: level === 1 ? 'text' : level === 2 ? 'text' : 'muted',
+    ...props,
+  }),
+);