asdf

Squash the current repository state back into one baseline commit while
preserving the README reframing and repository contents.

Constraint: User explicitly requested a single squashed commit with subject "asdf"
Confidence: high
Scope-risk: broad
Reversibility: clean
Directive: This commit intentionally rewrites published history; coordinate before future force-pushes
Tested: git status clean; local history rewritten to one commit; force-pushed main to origin and instructkr
Not-tested: Fresh clone verification after push

src/components/design-system/Byline.tsx

@@ -0,0 +1,77 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { Children, isValidElement } from 'react';
+import { Text } from '../../ink.js';
+type Props = {
+  /** The items to join with a middot separator */
+  children: React.ReactNode;
+};
+
+/**
+ * Joins children with a middot separator (" · ") for inline metadata display.
+ *
+ * Named after the publishing term "byline" - the line of metadata typically
+ * shown below a title (e.g., "John Doe · 5 min read · Mar 12").
+ *
+ * Automatically filters out null/undefined/false children and only renders
+ * separators between valid elements.
+ *
+ * @example
+ * // Basic usage: "Enter to confirm · Esc to cancel"
+ * <Text dimColor>
+ *   <Byline>
+ *     <KeyboardShortcutHint shortcut="Enter" action="confirm" />
+ *     <KeyboardShortcutHint shortcut="Esc" action="cancel" />
+ *   </Byline>
+ * </Text>
+ *
+ * @example
+ * // With conditional children: "Esc to cancel" (only one item shown)
+ * <Text dimColor>
+ *   <Byline>
+ *     {showEnter && <KeyboardShortcutHint shortcut="Enter" action="confirm" />}
+ *     <KeyboardShortcutHint shortcut="Esc" action="cancel" />
+ *   </Byline>
+ * </Text>
+ *
+ */
+export function Byline(t0) {
+  const $ = _c(5);
+  const {
+    children
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== children) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const validChildren = Children.toArray(children);
+      if (validChildren.length === 0) {
+        t2 = null;
+        break bb0;
+      }
+      t1 = validChildren.map(_temp);
+    }
+    $[0] = children;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  let t3;
+  if ($[3] !== t1) {
+    t3 = <>{t1}</>;
+    $[3] = t1;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+function _temp(child, index) {
+  return <React.Fragment key={isValidElement(child) ? child.key ?? index : index}>{index > 0 && <Text dimColor={true}> · </Text>}{child}</React.Fragment>;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIkNoaWxkcmVuIiwiaXNWYWxpZEVsZW1lbnQiLCJUZXh0IiwiUHJvcHMiLCJjaGlsZHJlbiIsIlJlYWN0Tm9kZSIsIkJ5bGluZSIsInQwIiwiJCIsIl9jIiwidDEiLCJ0MiIsIlN5bWJvbCIsImZvciIsImJiMCIsInZhbGlkQ2hpbGRyZW4iLCJ0b0FycmF5IiwibGVuZ3RoIiwibWFwIiwiX3RlbXAiLCJ0MyIsImNoaWxkIiwiaW5kZXgiLCJrZXkiXSwic291cmNlcyI6WyJCeWxpbmUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDaGlsZHJlbiwgaXNWYWxpZEVsZW1lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9pbmsuanMnXG5cbnR5cGUgUHJvcHMgPSB7XG4gIC8qKiBUaGUgaXRlbXMgdG8gam9pbiB3aXRoIGEgbWlkZG90IHNlcGFyYXRvciAqL1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlXG59XG5cbi8qKlxuICogSm9pbnMgY2hpbGRyZW4gd2l0aCBhIG1pZGRvdCBzZXBhcmF0b3IgKFwiIMK3IFwiKSBmb3IgaW5saW5lIG1ldGFkYXRhIGRpc3BsYXkuXG4gKlxuICogTmFtZWQgYWZ0ZXIgdGhlIHB1Ymxpc2hpbmcgdGVybSBcImJ5bGluZVwiIC0gdGhlIGxpbmUgb2YgbWV0YWRhdGEgdHlwaWNhbGx5XG4gKiBzaG93biBiZWxvdyBhIHRpdGxlIChlLmcuLCBcIkpvaG4gRG9lIMK3IDUgbWluIHJlYWQgwrcgTWFyIDEyXCIpLlxuICpcbiAqIEF1dG9tYXRpY2FsbHkgZmlsdGVycyBvdXQgbnVsbC91bmRlZmluZWQvZmFsc2UgY2hpbGRyZW4gYW5kIG9ubHkgcmVuZGVyc1xuICogc2VwYXJhdG9ycyBiZXR3ZWVuIHZhbGlkIGVsZW1lbnRzLlxuICpcbiAqIEBleGFtcGxlXG4gKiAvLyBCYXNpYyB1c2FnZTogXCJFbnRlciB0byBjb25maXJtIMK3IEVzYyB0byBjYW5jZWxcIlxuICogPFRleHQgZGltQ29sb3I+XG4gKiAgIDxCeWxpbmU+XG4gKiAgICAgPEtleWJvYXJkU2hvcnRjdXRIaW50IHNob3J0Y3V0PVwiRW50ZXJcIiBhY3Rpb249XCJjb25maXJtXCIgLz5cbiAqICAgICA8S2V5Ym9hcmRTaG9ydGN1dEhpbnQgc2hvcnRjdXQ9XCJFc2NcIiBhY3Rpb249XCJjYW5jZWxcIiAvPlxuICogICA8L0J5bGluZT5cbiAqIDwvVGV4dD5cbiAqXG4gKiBAZXhhbXBsZVxuICogLy8gV2l0aCBjb25kaXRpb25hbCBjaGlsZHJlbjogXCJFc2MgdG8gY2FuY2VsXCIgKG9ubHkgb25lIGl0ZW0gc2hvd24pXG4gKiA8VGV4dCBkaW1Db2xvcj5cbiAqICAgPEJ5bGluZT5cbiAqICAgICB7c2hvd0VudGVyICYmIDxLZXlib2FyZFNob3J0Y3V0SGludCBzaG9ydGN1dD1cIkVudGVyXCIgYWN0aW9uPVwiY29uZmlybVwiIC8+fVxuICogICAgIDxLZXlib2FyZFNob3J0Y3V0SGludCBzaG9ydGN1dD1cIkVzY1wiIGFjdGlvbj1cImNhbmNlbFwiIC8+XG4gKiAgIDwvQnlsaW5lPlxuICogPC9UZXh0PlxuICpcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIEJ5bGluZSh7IGNoaWxkcmVuIH06IFByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgLy8gQ2hpbGRyZW4udG9BcnJheSBhbHJlYWR5IGZpbHRlcnMgb3V0IG51bGwsIHVuZGVmaW5lZCwgYW5kIGJvb2xlYW5zXG4gIGNvbnN0IHZhbGlkQ2hpbGRyZW4gPSBDaGlsZHJlbi50b0FycmF5KGNoaWxkcmVuKVxuXG4gIGlmICh2YWxpZENoaWxkcmVuLmxlbmd0aCA9PT0gMCkge1xuICAgIHJldHVybiBudWxsXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7dmFsaWRDaGlsZHJlbi5tYXAoKGNoaWxkLCBpbmRleCkgPT4gKFxuICAgICAgICA8UmVhY3QuRnJhZ21lbnRcbiAgICAgICAgICBrZXk9e2lzVmFsaWRFbGVtZW50KGNoaWxkKSA/IChjaGlsZC5rZXkgPz8gaW5kZXgpIDogaW5kZXh9XG4gICAgICAgID5cbiAgICAgICAgICB7aW5kZXggPiAwICYmIDxUZXh0IGRpbUNvbG9yPiDCtyA8L1RleHQ+fVxuICAgICAgICAgIHtjaGlsZH1cbiAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICkpfVxuICAgIDwvPlxuICApXG59XG4iXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPQSxLQUFLLElBQUlDLFFBQVEsRUFBRUMsY0FBYyxRQUFRLE9BQU87QUFDdkQsU0FBU0MsSUFBSSxRQUFRLGNBQWM7QUFFbkMsS0FBS0MsS0FBSyxHQUFHO0VBQ1g7RUFDQUMsUUFBUSxFQUFFTCxLQUFLLENBQUNNLFNBQVM7QUFDM0IsQ0FBQzs7QUFFRDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLE9BQU8sU0FBQUMsT0FBQUMsRUFBQTtFQUFBLE1BQUFDLENBQUEsR0FBQUMsRUFBQTtFQUFnQjtJQUFBTDtFQUFBLElBQUFHLEVBQW1CO0VBQUEsSUFBQUcsRUFBQTtFQUFBLElBQUFDLEVBQUE7RUFBQSxJQUFBSCxDQUFBLFFBQUFKLFFBQUE7SUFLL0JPLEVBQUEsR0FBQUMsTUFBSSxDQUFBQyxHQUFBLENBQUosNkJBQUcsQ0FBQztJQUFBQyxHQUFBO01BSGIsTUFBQUMsYUFBQSxHQUFzQmYsUUFBUSxDQUFBZ0IsT0FBUSxDQUFDWixRQUFRLENBQUM7TUFFaEQsSUFBSVcsYUFBYSxDQUFBRSxNQUFPLEtBQUssQ0FBQztRQUNyQk4sRUFBQSxPQUFJO1FBQUosTUFBQUcsR0FBQTtNQUFJO01BS1JKLEVBQUEsR0FBQUssYUFBYSxDQUFBRyxHQUFJLENBQUNDLEtBT2xCLENBQUM7SUFBQTtJQUFBWCxDQUFBLE1BQUFKLFFBQUE7SUFBQUksQ0FBQSxNQUFBRSxFQUFBO0lBQUFGLENBQUEsTUFBQUcsRUFBQTtFQUFBO0lBQUFELEVBQUEsR0FBQUYsQ0FBQTtJQUFBRyxFQUFBLEdBQUFILENBQUE7RUFBQTtFQUFBLElBQUFHLEVBQUEsS0FBQUMsTUFBQSxDQUFBQyxHQUFBO0lBQUEsT0FBQUYsRUFBQTtFQUFBO0VBQUEsSUFBQVMsRUFBQTtFQUFBLElBQUFaLENBQUEsUUFBQUUsRUFBQTtJQVJKVSxFQUFBLEtBQ0csQ0FBQVYsRUFPQSxDQUFDLEdBQ0Q7SUFBQUYsQ0FBQSxNQUFBRSxFQUFBO0lBQUFGLENBQUEsTUFBQVksRUFBQTtFQUFBO0lBQUFBLEVBQUEsR0FBQVosQ0FBQTtFQUFBO0VBQUEsT0FUSFksRUFTRztBQUFBO0FBbEJBLFNBQUFELE1BQUFFLEtBQUEsRUFBQUMsS0FBQTtFQUFBLE9BV0MsZ0JBQ08sR0FBb0QsQ0FBcEQsQ0FBQXJCLGNBQWMsQ0FBQ29CLEtBQW9DLENBQUMsR0FBM0JBLEtBQUssQ0FBQUUsR0FBYSxJQUFsQkQsS0FBMkIsR0FBcERBLEtBQW1ELENBQUMsQ0FFeEQsQ0FBQUEsS0FBSyxHQUFHLENBQThCLElBQXpCLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBUixLQUFPLENBQUMsQ0FBQyxHQUFHLEVBQWpCLElBQUksQ0FBbUIsQ0FDckNELE1BQUksQ0FDUCxpQkFBaUI7QUFBQSIsImlnbm9yZUxpc3QiOltdfQ==

src/components/design-system/KeyboardShortcutHint.tsx

@@ -0,0 +1,81 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import Text from '../../ink/components/Text.js';
+type Props = {
+  /** The key or chord to display (e.g., "ctrl+o", "Enter", "↑/↓") */
+  shortcut: string;
+  /** The action the key performs (e.g., "expand", "select", "navigate") */
+  action: string;
+  /** Whether to wrap the hint in parentheses. Default: false */
+  parens?: boolean;
+  /** Whether to render the shortcut in bold. Default: false */
+  bold?: boolean;
+};
+
+/**
+ * Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
+ *
+ * Wrap in <Text dimColor> for the common dim styling.
+ *
+ * @example
+ * // Simple hint wrapped in dim Text
+ * <Text dimColor><KeyboardShortcutHint shortcut="esc" action="cancel" /></Text>
+ *
+ * // With parentheses: "(ctrl+o to expand)"
+ * <Text dimColor><KeyboardShortcutHint shortcut="ctrl+o" action="expand" parens /></Text>
+ *
+ * // With bold shortcut: "Enter to confirm" (Enter is bold)
+ * <Text dimColor><KeyboardShortcutHint shortcut="Enter" action="confirm" bold /></Text>
+ *
+ * // Multiple hints with middot separator - use Byline
+ * <Text dimColor>
+ *   <Byline>
+ *     <KeyboardShortcutHint shortcut="Enter" action="confirm" />
+ *     <KeyboardShortcutHint shortcut="Esc" action="cancel" />
+ *   </Byline>
+ * </Text>
+ */
+export function KeyboardShortcutHint(t0) {
+  const $ = _c(9);
+  const {
+    shortcut,
+    action,
+    parens: t1,
+    bold: t2
+  } = t0;
+  const parens = t1 === undefined ? false : t1;
+  const bold = t2 === undefined ? false : t2;
+  let t3;
+  if ($[0] !== bold || $[1] !== shortcut) {
+    t3 = bold ? <Text bold={true}>{shortcut}</Text> : shortcut;
+    $[0] = bold;
+    $[1] = shortcut;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const shortcutText = t3;
+  if (parens) {
+    let t4;
+    if ($[3] !== action || $[4] !== shortcutText) {
+      t4 = <Text>({shortcutText} to {action})</Text>;
+      $[3] = action;
+      $[4] = shortcutText;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
+    }
+    return t4;
+  }
+  let t4;
+  if ($[6] !== action || $[7] !== shortcutText) {
+    t4 = <Text>{shortcutText} to {action}</Text>;
+    $[6] = action;
+    $[7] = shortcutText;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRleHQiLCJQcm9wcyIsInNob3J0Y3V0IiwiYWN0aW9uIiwicGFyZW5zIiwiYm9sZCIsIktleWJvYXJkU2hvcnRjdXRIaW50IiwidDAiLCIkIiwiX2MiLCJ0MSIsInQyIiwidW5kZWZpbmVkIiwidDMiLCJzaG9ydGN1dFRleHQiLCJ0NCJdLCJzb3VyY2VzIjpbIktleWJvYXJkU2hvcnRjdXRIaW50LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgVGV4dCBmcm9tICcuLi8uLi9pbmsvY29tcG9uZW50cy9UZXh0LmpzJ1xuXG50eXBlIFByb3BzID0ge1xuICAvKiogVGhlIGtleSBvciBjaG9yZCB0byBkaXNwbGF5IChlLmcuLCBcImN0cmwrb1wiLCBcIkVudGVyXCIsIFwi4oaRL+KGk1wiKSAqL1xuICBzaG9ydGN1dDogc3RyaW5nXG4gIC8qKiBUaGUgYWN0aW9uIHRoZSBrZXkgcGVyZm9ybXMgKGUuZy4sIFwiZXhwYW5kXCIsIFwic2VsZWN0XCIsIFwibmF2aWdhdGVcIikgKi9cbiAgYWN0aW9uOiBzdHJpbmdcbiAgLyoqIFdoZXRoZXIgdG8gd3JhcCB0aGUgaGludCBpbiBwYXJlbnRoZXNlcy4gRGVmYXVsdDogZmFsc2UgKi9cbiAgcGFyZW5zPzogYm9vbGVhblxuICAvKiogV2hldGhlciB0byByZW5kZXIgdGhlIHNob3J0Y3V0IGluIGJvbGQuIERlZmF1bHQ6IGZhbHNlICovXG4gIGJvbGQ/OiBib29sZWFuXG59XG5cbi8qKlxuICogUmVuZGVycyBhIGtleWJvYXJkIHNob3J0Y3V0IGhpbnQgbGlrZSBcImN0cmwrbyB0byBleHBhbmRcIiBvciBcIih0YWIgdG8gdG9nZ2xlKVwiXG4gKlxuICogV3JhcCBpbiA8VGV4dCBkaW1Db2xvcj4gZm9yIHRoZSBjb21tb24gZGltIHN0eWxpbmcuXG4gKlxuICogQGV4YW1wbGVcbiAqIC8vIFNpbXBsZSBoaW50IHdyYXBwZWQgaW4gZGltIFRleHRcbiAqIDxUZXh0IGRpbUNvbG9yPjxLZXlib2FyZFNob3J0Y3V0SGludCBzaG9ydGN1dD1cImVzY1wiIGFjdGlvbj1cImNhbmNlbFwiIC8+PC9UZXh0PlxuICpcbiAqIC8vIFdpdGggcGFyZW50aGVzZXM6IFwiKGN0cmwrbyB0byBleHBhbmQpXCJcbiAqIDxUZXh0IGRpbUNvbG9yPjxLZXlib2FyZFNob3J0Y3V0SGludCBzaG9ydGN1dD1cImN0cmwrb1wiIGFjdGlvbj1cImV4cGFuZFwiIHBhcmVucyAvPjwvVGV4dD5cbiAqXG4gKiAvLyBXaXRoIGJvbGQgc2hvcnRjdXQ6IFwiRW50ZXIgdG8gY29uZmlybVwiIChFbnRlciBpcyBib2xkKVxuICogPFRleHQgZGltQ29sb3I+PEtleWJvYXJkU2hvcnRjdXRIaW50IHNob3J0Y3V0PVwiRW50ZXJcIiBhY3Rpb249XCJjb25maXJtXCIgYm9sZCAvPjwvVGV4dD5cbiAqXG4gKiAvLyBNdWx0aXBsZSBoaW50cyB3aXRoIG1pZGRvdCBzZXBhcmF0b3IgLSB1c2UgQnlsaW5lXG4gKiA8VGV4dCBkaW1Db2xvcj5cbiAqICAgPEJ5bGluZT5cbiAqICAgICA8S2V5Ym9hcmRTaG9ydGN1dEhpbnQgc2hvcnRjdXQ9XCJFbnRlclwiIGFjdGlvbj1cImNvbmZpcm1cIiAvPlxuICogICAgIDxLZXlib2FyZFNob3J0Y3V0SGludCBzaG9ydGN1dD1cIkVzY1wiIGFjdGlvbj1cImNhbmNlbFwiIC8+XG4gKiAgIDwvQnlsaW5lPlxuICogPC9UZXh0PlxuICovXG5leHBvcnQgZnVuY3Rpb24gS2V5Ym9hcmRTaG9ydGN1dEhpbnQoe1xuICBzaG9ydGN1dCxcbiAgYWN0aW9uLFxuICBwYXJlbnMgPSBmYWxzZSxcbiAgYm9sZCA9IGZhbHNlLFxufTogUHJvcHMpOiBSZWFjdC5SZWFjdE5vZGUge1xuICBjb25zdCBzaG9ydGN1dFRleHQgPSBib2xkID8gPFRleHQgYm9sZD57c2hvcnRjdXR9PC9UZXh0PiA6IHNob3J0Y3V0XG5cbiAgaWYgKHBhcmVucykge1xuICAgIHJldHVybiAoXG4gICAgICA8VGV4dD5cbiAgICAgICAgKHtzaG9ydGN1dFRleHR9IHRvIHthY3Rpb259KVxuICAgICAgPC9UZXh0PlxuICAgIClcbiAgfVxuICByZXR1cm4gKFxuICAgIDxUZXh0PlxuICAgICAge3Nob3J0Y3V0VGV4dH0gdG8ge2FjdGlvbn1cbiAgICA8L1RleHQ+XG4gIClcbn1cbiJdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU9BLEtBQUssTUFBTSxPQUFPO0FBQ3pCLE9BQU9DLElBQUksTUFBTSw4QkFBOEI7QUFFL0MsS0FBS0MsS0FBSyxHQUFHO0VBQ1g7RUFDQUMsUUFBUSxFQUFFLE1BQU07RUFDaEI7RUFDQUMsTUFBTSxFQUFFLE1BQU07RUFDZDtFQUNBQyxNQUFNLENBQUMsRUFBRSxPQUFPO0VBQ2hCO0VBQ0FDLElBQUksQ0FBQyxFQUFFLE9BQU87QUFDaEIsQ0FBQzs7QUFFRDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsT0FBTyxTQUFBQyxxQkFBQUMsRUFBQTtFQUFBLE1BQUFDLENBQUEsR0FBQUMsRUFBQTtFQUE4QjtJQUFBUCxRQUFBO0lBQUFDLE1BQUE7SUFBQUMsTUFBQSxFQUFBTSxFQUFBO0lBQUFMLElBQUEsRUFBQU07RUFBQSxJQUFBSixFQUs3QjtFQUZOLE1BQUFILE1BQUEsR0FBQU0sRUFBYyxLQUFkRSxTQUFjLEdBQWQsS0FBYyxHQUFkRixFQUFjO0VBQ2QsTUFBQUwsSUFBQSxHQUFBTSxFQUFZLEtBQVpDLFNBQVksR0FBWixLQUFZLEdBQVpELEVBQVk7RUFBQSxJQUFBRSxFQUFBO0VBQUEsSUFBQUwsQ0FBQSxRQUFBSCxJQUFBLElBQUFHLENBQUEsUUFBQU4sUUFBQTtJQUVTVyxFQUFBLEdBQUFSLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUosS0FBRyxDQUFDLENBQUVILFNBQU8sQ0FBRSxFQUFwQixJQUFJLENBQWtDLEdBQTlDQSxRQUE4QztJQUFBTSxDQUFBLE1BQUFILElBQUE7SUFBQUcsQ0FBQSxNQUFBTixRQUFBO0lBQUFNLENBQUEsTUFBQUssRUFBQTtFQUFBO0lBQUFBLEVBQUEsR0FBQUwsQ0FBQTtFQUFBO0VBQW5FLE1BQUFNLFlBQUEsR0FBcUJELEVBQThDO0VBRW5FLElBQUlULE1BQU07SUFBQSxJQUFBVyxFQUFBO0lBQUEsSUFBQVAsQ0FBQSxRQUFBTCxNQUFBLElBQUFLLENBQUEsUUFBQU0sWUFBQTtNQUVOQyxFQUFBLElBQUMsSUFBSSxDQUFDLENBQ0ZELGFBQVcsQ0FBRSxJQUFLWCxPQUFLLENBQUUsQ0FDN0IsRUFGQyxJQUFJLENBRUU7TUFBQUssQ0FBQSxNQUFBTCxNQUFBO01BQUFLLENBQUEsTUFBQU0sWUFBQTtNQUFBTixDQUFBLE1BQUFPLEVBQUE7SUFBQTtNQUFBQSxFQUFBLEdBQUFQLENBQUE7SUFBQTtJQUFBLE9BRlBPLEVBRU87RUFBQTtFQUVWLElBQUFBLEVBQUE7RUFBQSxJQUFBUCxDQUFBLFFBQUFMLE1BQUEsSUFBQUssQ0FBQSxRQUFBTSxZQUFBO0lBRUNDLEVBQUEsSUFBQyxJQUFJLENBQ0ZELGFBQVcsQ0FBRSxJQUFLWCxPQUFLLENBQzFCLEVBRkMsSUFBSSxDQUVFO0lBQUFLLENBQUEsTUFBQUwsTUFBQTtJQUFBSyxDQUFBLE1BQUFNLFlBQUE7SUFBQU4sQ0FBQSxNQUFBTyxFQUFBO0VBQUE7SUFBQUEsRUFBQSxHQUFBUCxDQUFBO0VBQUE7RUFBQSxPQUZQTyxFQUVPO0FBQUEiLCJpZ25vcmVMaXN0IjpbXX0=

src/components/design-system/LoadingState.tsx

@@ -0,0 +1,94 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { Box, Text } from '../../ink.js';
+import { Spinner } from '../Spinner.js';
+type LoadingStateProps = {
+  /**
+   * The loading message to display next to the spinner.
+   */
+  message: string;
+
+  /**
+   * Display the message in bold.
+   * @default false
+   */
+  bold?: boolean;
+
+  /**
+   * Display the message in dimmed color.
+   * @default false
+   */
+  dimColor?: boolean;
+
+  /**
+   * Optional subtitle displayed below the main message.
+   */
+  subtitle?: string;
+};
+
+/**
+ * A spinner with loading message for async operations.
+ *
+ * @example
+ * // Basic loading
+ * <LoadingState message="Loading..." />
+ *
+ * @example
+ * // Bold loading message
+ * <LoadingState message="Loading sessions" bold />
+ *
+ * @example
+ * // With subtitle
+ * <LoadingState
+ *   message="Loading sessions"
+ *   bold
+ *   subtitle="Fetching your Claude Code sessions..."
+ * />
+ */
+export function LoadingState(t0) {
+  const $ = _c(10);
+  const {
+    message,
+    bold: t1,
+    dimColor: t2,
+    subtitle
+  } = t0;
+  const bold = t1 === undefined ? false : t1;
+  const dimColor = t2 === undefined ? false : t2;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <Spinner />;
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== bold || $[2] !== dimColor || $[3] !== message) {
+    t4 = <Box flexDirection="row">{t3}<Text bold={bold} dimColor={dimColor}>{" "}{message}</Text></Box>;
+    $[1] = bold;
+    $[2] = dimColor;
+    $[3] = message;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== subtitle) {
+    t5 = subtitle && <Text dimColor={true}>{subtitle}</Text>;
+    $[5] = subtitle;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t4 || $[8] !== t5) {
+    t6 = <Box flexDirection="column">{t4}{t5}</Box>;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIkJveCIsIlRleHQiLCJTcGlubmVyIiwiTG9hZGluZ1N0YXRlUHJvcHMiLCJtZXNzYWdlIiwiYm9sZCIsImRpbUNvbG9yIiwic3VidGl0bGUiLCJMb2FkaW5nU3RhdGUiLCJ0MCIsIiQiLCJfYyIsInQxIiwidDIiLCJ1bmRlZmluZWQiLCJ0MyIsIlN5bWJvbCIsImZvciIsInQ0IiwidDUiLCJ0NiJdLCJzb3VyY2VzIjpbIkxvYWRpbmdTdGF0ZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLi4vLi4vaW5rLmpzJ1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJy4uL1NwaW5uZXIuanMnXG5cbnR5cGUgTG9hZGluZ1N0YXRlUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBUaGUgbG9hZGluZyBtZXNzYWdlIHRvIGRpc3BsYXkgbmV4dCB0byB0aGUgc3Bpbm5lci5cbiAgICovXG4gIG1lc3NhZ2U6IHN0cmluZ1xuXG4gIC8qKlxuICAgKiBEaXNwbGF5IHRoZSBtZXNzYWdlIGluIGJvbGQuXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBib2xkPzogYm9vbGVhblxuXG4gIC8qKlxuICAgKiBEaXNwbGF5IHRoZSBtZXNzYWdlIGluIGRpbW1lZCBjb2xvci5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIGRpbUNvbG9yPzogYm9vbGVhblxuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBzdWJ0aXRsZSBkaXNwbGF5ZWQgYmVsb3cgdGhlIG1haW4gbWVzc2FnZS5cbiAgICovXG4gIHN1YnRpdGxlPzogc3RyaW5nXG59XG5cbi8qKlxuICogQSBzcGlubmVyIHdpdGggbG9hZGluZyBtZXNzYWdlIGZvciBhc3luYyBvcGVyYXRpb25zLlxuICpcbiAqIEBleGFtcGxlXG4gKiAvLyBCYXNpYyBsb2FkaW5nXG4gKiA8TG9hZGluZ1N0YXRlIG1lc3NhZ2U9XCJMb2FkaW5nLi4uXCIgLz5cbiAqXG4gKiBAZXhhbXBsZVxuICogLy8gQm9sZCBsb2FkaW5nIG1lc3NhZ2VcbiAqIDxMb2FkaW5nU3RhdGUgbWVzc2FnZT1cIkxvYWRpbmcgc2Vzc2lvbnNcIiBib2xkIC8+XG4gKlxuICogQGV4YW1wbGVcbiAqIC8vIFdpdGggc3VidGl0bGVcbiAqIDxMb2FkaW5nU3RhdGVcbiAqICAgbWVzc2FnZT1cIkxvYWRpbmcgc2Vzc2lvbnNcIlxuICogICBib2xkXG4gKiAgIHN1YnRpdGxlPVwiRmV0Y2hpbmcgeW91ciBDbGF1ZGUgQ29kZSBzZXNzaW9ucy4uLlwiXG4gKiAvPlxuICovXG5leHBvcnQgZnVuY3Rpb24gTG9hZGluZ1N0YXRlKHtcbiAgbWVzc2FnZSxcbiAgYm9sZCA9IGZhbHNlLFxuICBkaW1Db2xvciA9IGZhbHNlLFxuICBzdWJ0aXRsZSxcbn06IExvYWRpbmdTdGF0ZVByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgcmV0dXJuIChcbiAgICA8Qm94IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIj5cbiAgICAgIDxCb3ggZmxleERpcmVjdGlvbj1cInJvd1wiPlxuICAgICAgICA8U3Bpbm5lciAvPlxuICAgICAgICA8VGV4dCBib2xkPXtib2xkfSBkaW1Db2xvcj17ZGltQ29sb3J9PlxuICAgICAgICAgIHsnICd9XG4gICAgICAgICAge21lc3NhZ2V9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvQm94PlxuICAgICAge3N1YnRpdGxlICYmIDxUZXh0IGRpbUNvbG9yPntzdWJ0aXRsZX08L1RleHQ+fVxuICAgIDwvQm94PlxuICApXG59XG4iXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPQSxLQUFLLE1BQU0sT0FBTztBQUN6QixTQUFTQyxHQUFHLEVBQUVDLElBQUksUUFBUSxjQUFjO0FBQ3hDLFNBQVNDLE9BQU8sUUFBUSxlQUFlO0FBRXZDLEtBQUtDLGlCQUFpQixHQUFHO0VBQ3ZCO0FBQ0Y7QUFDQTtFQUNFQyxPQUFPLEVBQUUsTUFBTTs7RUFFZjtBQUNGO0FB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

src/components/design-system/Pane.tsx

@@ -0,0 +1,77 @@
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+import { useIsInsideModal } from '../../context/modalContext.js';
+import { Box } from '../../ink.js';
+import type { Theme } from '../../utils/theme.js';
+import { Divider } from './Divider.js';
+type PaneProps = {
+  children: React.ReactNode;
+  /**
+   * Theme color for the top border line.
+   */
+  color?: keyof Theme;
+};
+
+/**
+ * A pane — a region of the terminal that appears below the REPL prompt,
+ * bounded by a colored top line with a one-row gap above and horizontal
+ * padding. Used by all slash-command screens: /config, /help, /plugins,
+ * /sandbox, /stats, /permissions.
+ *
+ * For confirm/cancel dialogs (Esc to dismiss, Enter to confirm), use
+ * `<Dialog>` instead — it registers its own keybindings. For a full
+ * rounded-border card, use `<Panel>`.
+ *
+ * Submenus rendered inside a Pane should use `hideBorder` on their Dialog
+ * so the Pane's border remains the single frame.
+ *
+ * @example
+ * <Pane color="permission">
+ *   <Tabs title="Sandbox:">...</Tabs>
+ * </Pane>
+ */
+export function Pane(t0) {
+  const $ = _c(9);
+  const {
+    children,
+    color
+  } = t0;
+  if (useIsInsideModal()) {
+    let t1;
+    if ($[0] !== children) {
+      t1 = <Box flexDirection="column" paddingX={1} flexShrink={0}>{children}</Box>;
+      $[0] = children;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[2] !== color) {
+    t1 = <Divider color={color} />;
+    $[2] = color;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== children) {
+    t2 = <Box flexDirection="column" paddingX={2}>{children}</Box>;
+    $[4] = children;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== t1 || $[7] !== t2) {
+    t3 = <Box flexDirection="column" paddingTop={1}>{t1}{t2}</Box>;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsInVzZUlzSW5zaWRlTW9kYWwiLCJCb3giLCJUaGVtZSIsIkRpdmlkZXIiLCJQYW5lUHJvcHMiLCJjaGlsZHJlbiIsIlJlYWN0Tm9kZSIsImNvbG9yIiwiUGFuZSIsInQwIiwiJCIsIl9jIiwidDEiLCJ0MiIsInQzIl0sInNvdXJjZXMiOlsiUGFuZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlSXNJbnNpZGVNb2RhbCB9IGZyb20gJy4uLy4uL2NvbnRleHQvbW9kYWxDb250ZXh0LmpzJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vaW5rLmpzJ1xuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3V0aWxzL3RoZW1lLmpzJ1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJy4vRGl2aWRlci5qcydcblxudHlwZSBQYW5lUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbiAgLyoqXG4gICAqIFRoZW1lIGNvbG9yIGZvciB0aGUgdG9wIGJvcmRlciBsaW5lLlxuICAgKi9cbiAgY29sb3I/OiBrZXlvZiBUaGVtZVxufVxuXG4vKipcbiAqIEEgcGFuZSDigJQgYSByZWdpb24gb2YgdGhlIHRlcm1pbmFsIHRoYXQgYXBwZWFycyBiZWxvdyB0aGUgUkVQTCBwcm9tcHQsXG4gKiBib3VuZGVkIGJ5IGEgY29sb3JlZCB0b3AgbGluZSB3aXRoIGEgb25lLXJvdyBnYXAgYWJvdmUgYW5kIGhvcml6b250YWxcbiAqIHBhZGRpbmcuIFVzZWQgYnkgYWxsIHNsYXNoLWNvbW1hbmQgc2NyZWVuczogL2NvbmZpZywgL2hlbHAsIC9wbHVnaW5zLFxuICogL3NhbmRib3gsIC9zdGF0cywgL3Blcm1pc3Npb25zLlxuICpcbiAqIEZvciBjb25maXJtL2NhbmNlbCBkaWFsb2dzIChFc2MgdG8gZGlzbWlzcywgRW50ZXIgdG8gY29uZmlybSksIHVzZVxuICogYDxEaWFsb2c+YCBpbnN0ZWFkIOKAlCBpdCByZWdpc3RlcnMgaXRzIG93biBrZXliaW5kaW5ncy4gRm9yIGEgZnVsbFxuICogcm91bmRlZC1ib3JkZXIgY2FyZCwgdXNlIGA8UGFuZWw+YC5cbiAqXG4gKiBTdWJtZW51cyByZW5kZXJlZCBpbnNpZGUgYSBQYW5lIHNob3VsZCB1c2UgYGhpZGVCb3JkZXJgIG9uIHRoZWlyIERpYWxvZ1xuICogc28gdGhlIFBhbmUncyBib3JkZXIgcmVtYWlucyB0aGUgc2luZ2xlIGZyYW1lLlxuICpcbiAqIEBleGFtcGxlXG4gKiA8UGFuZSBjb2xvcj1cInBlcm1pc3Npb25cIj5cbiAqICAgPFRhYnMgdGl0bGU9XCJTYW5kYm94OlwiPi4uLjwvVGFicz5cbiAqIDwvUGFuZT5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIFBhbmUoeyBjaGlsZHJlbiwgY29sb3IgfTogUGFuZVByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgLy8gV2hlbiByZW5kZXJlZCBpbnNpZGUgRnVsbHNjcmVlbkxheW91dCdzIG1vZGFsIHNsb3QsIGl0cyDilpQgZGl2aWRlciBJU1xuICAvLyB0aGUgZnJhbWUuIFNraXAgb3VyIG93biBEaXZpZGVyICh3b3VsZCBkb3VibGUtZnJhbWUpIGFuZCB0aGUgZXh0cmEgdG9wXG4gIC8vIHBhZGRpbmcuIFRoaXMgbGV0cyBzbGFzaC1jb21tYW5kIHNjcmVlbnMgdGhhdCB3cmFwIGluIFBhbmUgKGUuZy5cbiAgLy8gL21vZGVsIOKGkiBNb2RlbFBpY2tlcikgcm91dGUgdGhyb3VnaCB0aGUgbW9kYWwgc2xvdCB1bmNoYW5nZWQuXG4gIGlmICh1c2VJc0luc2lkZU1vZGFsKCkpIHtcbiAgICAvLyBmbGV4U2hyaW5rPTA6IHRoZSBtb2RhbCBzbG90J3MgYWJzb2x1dGUgQm94IGhhcyBubyBleHBsaWNpdCBoZWlnaHRcbiAgICAvLyAoZ3Jvd3MgdG8gZml0LCBtYXhIZWlnaHQgY2FwKS4gV2l0aCBmbGV4R3Jvdz0xLCByZS1yZW5kZXJzIGNhdXNlXG4gICAgLy8geW9nYSB0byByZXNvbHZlIHRoaXMgQm94J3MgaGVpZ2h0IHRvIDAgYWdhaW5zdCB0aGUgdW5kZXRlcm1pbmVkXG4gICAgLy8gcGFyZW50IOKAlCAvcGVybWlzc2lvbnMgYm9keSBibGFua3Mgb24gRG93biBhcnJvdy4gU2VlICMyMzU5Mi5cbiAgICByZXR1cm4gKFxuICAgICAgPEJveCBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCIgcGFkZGluZ1g9ezF9IGZsZXhTaHJpbms9ezB9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0JveD5cbiAgICApXG4gIH1cbiAgcmV0dXJuIChcbiAgICA8Qm94IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIiBwYWRkaW5nVG9wPXsxfT5cbiAgICAgIDxEaXZpZGVyIGNvbG9yPXtjb2xvcn0gLz5cbiAgICAgIDxCb3ggZmxleERpcmVjdGlvbj1cImNvbHVtblwiIHBhZGRpbmdYPXsyfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9Cb3g+XG4gICAgPC9Cb3g+XG4gIClcbn1cbiJdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU9BLEtBQUssTUFBTSxPQUFPO0FBQ3pCLFNBQVNDLGdCQUFnQixRQUFRLCtCQUErQjtBQUNoRSxTQUFTQyxHQUFHLFFBQVEsY0FBYztBQUNsQyxjQUFjQyxLQUFLLFFBQVEsc0JBQXNCO0FBQ2pELFNBQVNDLE9BQU8sUUFBUSxjQUFjO0FBRXRDLEtBQUtDLFNBQVMsR0FBRztFQUNmQyxRQUFRLEVBQUVOLEtBQUssQ0FBQ08sU0FBUztFQUN6QjtBQUNGO0FBQ0E7RUFDRUMsS0FBSyxDQUFDLEVBQUUsTUFBTUwsS0FBSztBQUNyQixDQUFDOztBQUVEO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLE9BQU8sU0FBQU0sS0FBQUMsRUFBQTtFQUFBLE1BQUFDLENBQUEsR0FBQUMsRUFBQTtFQUFjO0lBQUFOLFFBQUE7SUFBQUU7RUFBQSxJQUFBRSxFQUE4QjtFQUtqRCxJQUFJVCxnQkFBZ0IsQ0FBQyxDQUFDO0lBQUEsSUFBQVksRUFBQTtJQUFBLElBQUFGLENBQUEsUUFBQUwsUUFBQTtNQU1sQk8sRUFBQSxJQUFDLEdBQUcsQ0FBZSxhQUFRLENBQVIsUUFBUSxDQUFXLFFBQUMsQ0FBRCxHQUFDLENBQWMsVUFBQyxDQUFELEdBQUMsQ0FDbkRQLFNBQU8sQ0FDVixFQUZDLEdBQUcsQ0FFRTtNQUFBSyxDQUFBLE1BQUFMLFFBQUE7TUFBQUssQ0FBQSxNQUFBRSxFQUFBO0lBQUE7TUFBQUEsRUFBQSxHQUFBRixDQUFBO0lBQUE7SUFBQSxPQUZORSxFQUVNO0VBQUE7RUFFVCxJQUFBQSxFQUFBO0VBQUEsSUFBQUYsQ0FBQSxRQUFBSCxLQUFBO0lBR0dLLEVBQUEsSUFBQyxPQUFPLENBQVFMLEtBQUssQ0FBTEEsTUFBSSxDQUFDLEdBQUk7SUFBQUcsQ0FBQSxNQUFBSCxLQUFBO0lBQUFHLENBQUEsTUFBQUUsRUFBQTtFQUFBO0lBQUFBLEVBQUEsR0FBQUYsQ0FBQTtFQUFBO0VBQUEsSUFBQUcsRUFBQTtFQUFBLElBQUFILENBQUEsUUFBQUwsUUFBQTtJQUN6QlEsRUFBQSxJQUFDLEdBQUcsQ0FBZSxhQUFRLENBQVIsUUFBUSxDQUFXLFFBQUMsQ0FBRCxHQUFDLENBQ3BDUixTQUFPLENBQ1YsRUFGQyxHQUFHLENBRUU7SUFBQUssQ0FBQSxNQUFBTCxRQUFBO0lBQUFLLENBQUEsTUFBQUcsRUFBQTtFQUFBO0lBQUFBLEVBQUEsR0FBQUgsQ0FBQTtFQUFBO0VBQUEsSUFBQUksRUFBQTtFQUFBLElBQUFKLENBQUEsUUFBQUUsRUFBQSxJQUFBRixDQUFBLFFBQUFHLEVBQUE7SUFKUkMsRUFBQSxJQUFDLEdBQUcsQ0FBZSxhQUFRLENBQVIsUUFBUSxDQUFhLFVBQUMsQ0FBRCxHQUFDLENBQ3ZDLENBQUFGLEVBQXdCLENBQ3hCLENBQUFDLEVBRUssQ0FDUCxFQUxDLEdBQUcsQ0FLRTtJQUFBSCxDQUFBLE1BQUFFLEVBQUE7SUFBQUYsQ0FBQSxNQUFBRyxFQUFBO0lBQUFILENBQUEsTUFBQUksRUFBQTtFQUFBO0lBQUFBLEVBQUEsR0FBQUosQ0FBQTtFQUFBO0VBQUEsT0FMTkksRUFLTTtBQUFBIiwiaWdub3JlTGlzdCI6W119

src/components/design-system/color.ts

@@ -0,0 +1,30 @@
+import { type ColorType, colorize } from '../../ink/colorize.js'
+import type { Color } from '../../ink/styles.js'
+import { getTheme, type Theme, type ThemeName } from '../../utils/theme.js'
+
+/**
+ * Curried theme-aware color function. Resolves theme keys to raw color
+ * values before delegating to the ink renderer's colorize.
+ */
+export function color(
+  c: keyof Theme | Color | undefined,
+  theme: ThemeName,
+  type: ColorType = 'foreground',
+): (text: string) => string {
+  return text => {
+    if (!c) {
+      return text
+    }
+    // Raw color values bypass theme lookup
+    if (
+      c.startsWith('rgb(') ||
+      c.startsWith('#') ||
+      c.startsWith('ansi256(') ||
+      c.startsWith('ansi:')
+    ) {
+      return colorize(text, c, type)
+    }
+    // Theme key lookup
+    return colorize(text, getTheme(theme)[c as keyof Theme], type)
+  }
+}