termui 0.1.0 → 0.1.2

package/dist/chunk-B2VO7M2O.js

@@ -0,0 +1,3493 @@
+import {
+  useAnimation,
+  useFocus,
+  useInput,
+  useInterval,
+  useTheme
+} from "./chunk-ZZKFZA2U.js";
+
+// packages/components/src/layout/Box.tsx
+import { Box as InkBox } from "ink";
+import { jsx } from "react/jsx-runtime";
+function Box({
+  border,
+  borderVariant = "default",
+  borderColor,
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+  const resolvedBorderColor = borderColor ?? (() => {
+    switch (borderVariant) {
+      case "focus":
+        return theme.colors.focusRing;
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.error;
+      case "warning":
+        return theme.colors.warning;
+      case "muted":
+        return theme.colors.mutedForeground;
+      default:
+        return theme.colors.border;
+    }
+  })();
+  return /* @__PURE__ */ jsx(
+    InkBox,
+    {
+      borderStyle: border ? props.borderStyle ?? theme.border.style : void 0,
+      borderColor: border ? resolvedBorderColor : void 0,
+      ...props,
+      children
+    }
+  );
+}
+
+// packages/components/src/layout/Stack.tsx
+import { Box as Box2 } from "ink";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Stack({
+  direction = "vertical",
+  gap = 0,
+  children,
+  width,
+  height,
+  alignItems,
+  justifyContent
+}) {
+  return /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      flexDirection: direction === "vertical" ? "column" : "row",
+      gap,
+      width,
+      height,
+      alignItems,
+      justifyContent,
+      children
+    }
+  );
+}
+
+// packages/components/src/layout/Grid.tsx
+import { Children } from "react";
+import { Box as Box3 } from "ink";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Grid({ columns, gap = 0, children }) {
+  const items = Children.toArray(children);
+  const rows = [];
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns));
+  }
+  return /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", gap, children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx3(Box3, { flexDirection: "row", gap, children: row.map((cell, colIdx) => /* @__PURE__ */ jsx3(Box3, { flexGrow: 1, children: cell }, colIdx)) }, rowIdx)) });
+}
+
+// packages/components/src/layout/ScrollView.tsx
+import { useState } from "react";
+import { Box as Box4, Text } from "ink";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function ScrollView({
+  height,
+  children,
+  showScrollbar = true,
+  scrollbarColor = "gray"
+}) {
+  const [scrollTop, setScrollTop] = useState(0);
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setScrollTop((s) => Math.max(0, s - 1));
+    } else if (key.downArrow) {
+      setScrollTop((s) => s + 1);
+    } else if (key.pageUp) {
+      setScrollTop((s) => Math.max(0, s - height));
+    } else if (key.pageDown) {
+      setScrollTop((s) => s + height);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Box4, { flexDirection: "row", height, overflow: "hidden", children: [
+    /* @__PURE__ */ jsx4(Box4, { flexGrow: 1, flexDirection: "column", marginTop: -scrollTop, children }),
+    showScrollbar && /* @__PURE__ */ jsx4(Box4, { width: 1, flexDirection: "column", height, children: /* @__PURE__ */ jsx4(Text, { color: scrollbarColor, children: "\u2502".repeat(height) }) })
+  ] });
+}
+
+// packages/components/src/layout/Divider.tsx
+import { Box as Box5, Text as Text2 } from "ink";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var HORIZONTAL_CHARS = {
+  single: "\u2500",
+  double: "\u2550",
+  bold: "\u2501"
+};
+var VERTICAL_CHARS = {
+  single: "\u2502",
+  double: "\u2551",
+  bold: "\u2503"
+};
+function Divider({
+  variant = "single",
+  orientation = "horizontal",
+  color,
+  label,
+  height = 1,
+  width
+}) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.border;
+  const hChar = HORIZONTAL_CHARS[variant];
+  const vChar = VERTICAL_CHARS[variant];
+  if (orientation === "vertical") {
+    const lines = Array.from({ length: height }, (_, i) => i);
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", children: lines.map((i) => /* @__PURE__ */ jsx5(Text2, { color: resolvedColor, children: vChar }, i)) });
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs2(Box5, { flexDirection: "row", width, children: [
+      /* @__PURE__ */ jsxs2(Text2, { color: resolvedColor, children: [
+        hChar,
+        hChar,
+        hChar,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx5(Text2, { color: resolvedColor, children: label }),
+      /* @__PURE__ */ jsxs2(Text2, { color: resolvedColor, children: [
+        " ",
+        hChar,
+        hChar,
+        hChar
+      ] }),
+      /* @__PURE__ */ jsx5(Box5, { flexGrow: 1, children: /* @__PURE__ */ jsx5(Text2, { color: resolvedColor, children: hChar.repeat(1) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx5(Box5, { width: width ?? "100%", children: /* @__PURE__ */ jsx5(Text2, { color: resolvedColor, wrap: "truncate", children: hChar.repeat(width ?? 80) }) });
+}
+
+// packages/components/src/layout/Spacer.tsx
+import { Box as Box6 } from "ink";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Spacer({ size, direction = "horizontal" }) {
+  if (size === void 0) {
+    return /* @__PURE__ */ jsx6(Box6, { flexGrow: 1 });
+  }
+  if (direction === "vertical") {
+    return /* @__PURE__ */ jsx6(Box6, { height: size });
+  }
+  return /* @__PURE__ */ jsx6(Box6, { width: size });
+}
+
+// packages/components/src/layout/Columns.tsx
+import React3 from "react";
+import { Box as Box7 } from "ink";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ALIGN_MAP = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+function Columns({ children, gap = 0, align = "top" }) {
+  const items = React3.Children.toArray(children);
+  return /* @__PURE__ */ jsx7(Box7, { flexDirection: "row", gap, alignItems: ALIGN_MAP[align], children: items.map((child, index) => /* @__PURE__ */ jsx7(Box7, { flexGrow: 1, flexDirection: "column", children: child }, index)) });
+}
+
+// packages/components/src/layout/Center.tsx
+import { Box as Box8 } from "ink";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Center({ children, axis = "both" }) {
+  const justifyContent = axis === "both" || axis === "horizontal" ? "center" : void 0;
+  const alignItems = axis === "both" || axis === "vertical" ? "center" : void 0;
+  return /* @__PURE__ */ jsx8(
+    Box8,
+    {
+      flexGrow: 1,
+      justifyContent,
+      alignItems,
+      children
+    }
+  );
+}
+
+// packages/components/src/layout/AspectRatio.tsx
+import { Box as Box9 } from "ink";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function AspectRatio({ children, ratio = 16 / 9, width = 80 }) {
+  const height = Math.round(width / ratio / 2);
+  return /* @__PURE__ */ jsx9(Box9, { width, height, overflow: "hidden", children });
+}
+
+// packages/components/src/typography/Text.tsx
+import { Text as InkText } from "ink";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Text3({
+  children,
+  bold,
+  italic,
+  underline,
+  strikethrough,
+  dim,
+  inverse,
+  color,
+  backgroundColor,
+  wrap
+}) {
+  return /* @__PURE__ */ jsx10(
+    InkText,
+    {
+      bold,
+      italic,
+      underline,
+      strikethrough,
+      dimColor: dim,
+      inverse,
+      color,
+      backgroundColor,
+      wrap,
+      children
+    }
+  );
+}
+
+// packages/components/src/typography/Badge.tsx
+import { Box as Box10, Text as Text4 } from "ink";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Badge({ children, variant = "default", color, bold = false }) {
+  const theme = useTheme();
+  const variantColor = color ?? (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "warning":
+        return theme.colors.warning;
+      case "error":
+        return theme.colors.error;
+      case "info":
+        return theme.colors.info;
+      case "secondary":
+        return theme.colors.secondary;
+      default:
+        return theme.colors.primary;
+    }
+  })();
+  return /* @__PURE__ */ jsx11(Box10, { borderStyle: "round", borderColor: variantColor, paddingX: 1, children: /* @__PURE__ */ jsx11(Text4, { color: variantColor, bold, children }) });
+}
+
+// packages/components/src/typography/Heading.tsx
+import { Box as Box11, Text as Text5 } from "ink";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+function Heading({ level = 1, children, color }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  switch (level) {
+    case 1:
+      return /* @__PURE__ */ jsxs3(Box11, { children: [
+        /* @__PURE__ */ jsx12(Text5, { color: resolvedColor, bold: true, children: "\u2588\u2588 " }),
+        /* @__PURE__ */ jsx12(Text5, { color: resolvedColor, bold: true, children: typeof children === "string" ? children.toUpperCase() : children })
+      ] });
+    case 2:
+      return /* @__PURE__ */ jsxs3(Box11, { children: [
+        /* @__PURE__ */ jsx12(Text5, { color: resolvedColor, bold: true, children: "\u258C " }),
+        /* @__PURE__ */ jsx12(Text5, { color: resolvedColor, bold: true, children })
+      ] });
+    case 3:
+      return /* @__PURE__ */ jsxs3(Box11, { children: [
+        /* @__PURE__ */ jsx12(Text5, { bold: true, children: "\u203A " }),
+        /* @__PURE__ */ jsx12(Text5, { bold: true, children })
+      ] });
+    case 4:
+      return /* @__PURE__ */ jsx12(Box11, { children: /* @__PURE__ */ jsx12(Text5, { underline: true, dimColor: true, children }) });
+    default:
+      return /* @__PURE__ */ jsx12(Box11, { children: /* @__PURE__ */ jsx12(Text5, { children }) });
+  }
+}
+
+// packages/components/src/typography/Code.tsx
+import { Box as Box12, Text as Text6 } from "ink";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "import",
+  "export",
+  "from",
+  "class",
+  "interface",
+  "type",
+  "async",
+  "await",
+  "new",
+  "this",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "void",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "extends",
+  "implements",
+  "static",
+  "public",
+  "private",
+  "protected",
+  "readonly",
+  "enum",
+  "default",
+  "delete",
+  "yield",
+  "super"
+]);
+var OPERATORS = /^[=+\-*/<>!&|?%^~]+$/;
+function tokenizeLine(line) {
+  const trimmed = line.trimStart();
+  if (trimmed.startsWith("//")) {
+    return [{ text: line, kind: "comment" }];
+  }
+  const tokens = [];
+  let i = 0;
+  while (i < line.length) {
+    if (line[i] === "/" && line[i + 1] === "/") {
+      tokens.push({ text: line.slice(i), kind: "comment" });
+      break;
+    }
+    const quote = line[i];
+    if (quote === '"' || quote === "'" || quote === "`") {
+      let j = i + 1;
+      while (j < line.length && line[j] !== quote) {
+        if (line[j] === "\\") j++;
+        j++;
+      }
+      j++;
+      tokens.push({ text: line.slice(i, j), kind: "string" });
+      i = j;
+      continue;
+    }
+    if (/[0-9]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[0-9._xXa-fA-FbBoO]/.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), kind: "number" });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[a-zA-Z0-9_$]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      tokens.push({ text: word, kind: KEYWORDS.has(word) ? "keyword" : "plain" });
+      i = j;
+      continue;
+    }
+    if (/[=+\-*/<>!&|?%^~]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && OPERATORS.test(line[j])) j++;
+      tokens.push({ text: line.slice(i, j), kind: "operator" });
+      i = j;
+      continue;
+    }
+    tokens.push({ text: line[i], kind: "plain" });
+    i++;
+  }
+  return tokens;
+}
+function CodeLine({
+  line,
+  keywordColor,
+  stringColor,
+  numberColor,
+  commentColor,
+  operatorColor,
+  plainColor
+}) {
+  const tokens = tokenizeLine(line);
+  return /* @__PURE__ */ jsx13(Box12, { flexDirection: "row", children: tokens.map((token, idx) => {
+    switch (token.kind) {
+      case "keyword":
+        return /* @__PURE__ */ jsx13(Text6, { color: keywordColor, children: token.text }, idx);
+      case "string":
+        return /* @__PURE__ */ jsx13(Text6, { color: stringColor, children: token.text }, idx);
+      case "number":
+        return /* @__PURE__ */ jsx13(Text6, { color: numberColor, children: token.text }, idx);
+      case "comment":
+        return /* @__PURE__ */ jsx13(Text6, { dimColor: true, children: token.text }, idx);
+      case "operator":
+        return /* @__PURE__ */ jsx13(Text6, { color: operatorColor, children: token.text }, idx);
+      default:
+        return /* @__PURE__ */ jsx13(Text6, { color: plainColor, children: token.text }, idx);
+    }
+  }) });
+}
+function Code({ children, language, inline = false }) {
+  const theme = useTheme();
+  const keywordColor = theme.colors.accent;
+  const stringColor = theme.colors.success;
+  const numberColor = theme.colors.warning;
+  const commentColor = theme.colors.mutedForeground;
+  const operatorColor = theme.colors.info;
+  const plainColor = theme.colors.foreground;
+  const lines = children.split("\n");
+  if (inline) {
+    const displayLine = lines[0] ?? "";
+    return /* @__PURE__ */ jsx13(Box12, { borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, children: /* @__PURE__ */ jsx13(
+      CodeLine,
+      {
+        line: displayLine,
+        keywordColor,
+        stringColor,
+        numberColor,
+        commentColor,
+        operatorColor,
+        plainColor
+      }
+    ) });
+  }
+  const lineNumberWidth = String(lines.length).length;
+  return /* @__PURE__ */ jsxs4(Box12, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, children: [
+    language && /* @__PURE__ */ jsx13(Box12, { justifyContent: "flex-end", paddingX: 1, children: /* @__PURE__ */ jsx13(Text6, { color: theme.colors.mutedForeground, children: language }) }),
+    lines.map((line, idx) => /* @__PURE__ */ jsxs4(Box12, { flexDirection: "row", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs4(Text6, { color: theme.colors.mutedForeground, children: [
+        String(idx + 1).padStart(lineNumberWidth, " "),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx13(Text6, { color: theme.colors.mutedForeground, children: "\u2502 " }),
+      /* @__PURE__ */ jsx13(
+        CodeLine,
+        {
+          line,
+          keywordColor,
+          stringColor,
+          numberColor,
+          commentColor,
+          operatorColor,
+          plainColor
+        }
+      )
+    ] }, idx))
+  ] });
+}
+
+// packages/components/src/typography/Link.tsx
+import { Box as Box13, Text as Text7 } from "ink";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function Link({ children, href, color, showHref = false }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.info;
+  return /* @__PURE__ */ jsxs5(Box13, { flexDirection: "row", children: [
+    /* @__PURE__ */ jsx14(Text7, { color: resolvedColor, underline: true, children }),
+    showHref && /* @__PURE__ */ jsx14(Text7, { dimColor: true, children: ` (${href})` })
+  ] });
+}
+
+// packages/components/src/typography/Tag.tsx
+import { Box as Box14, Text as Text8 } from "ink";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+function Tag({ children, onRemove, color, variant = "default" }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const borderColor = variant === "outline" ? theme.colors.mutedForeground : resolvedColor;
+  return /* @__PURE__ */ jsxs6(Box14, { borderStyle: "round", borderColor, paddingX: 1, flexDirection: "row", children: [
+    /* @__PURE__ */ jsx15(Text8, { color: variant === "outline" ? theme.colors.mutedForeground : resolvedColor, children }),
+    onRemove && /* @__PURE__ */ jsx15(Text8, { color: theme.colors.mutedForeground, children: " \xD7" })
+  ] });
+}
+
+// packages/components/src/typography/Gradient.tsx
+import { Box as Box15, Text as Text9 } from "ink";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function parseHex(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function toHex({ r, g, b }) {
+  return "#" + [r, g, b].map(
+    (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")
+  ).join("");
+}
+function lerpColor(a, b, t) {
+  return {
+    r: a.r + (b.r - a.r) * t,
+    g: a.g + (b.g - a.g) * t,
+    b: a.b + (b.b - a.b) * t
+  };
+}
+function gradientText(text, colors) {
+  if (colors.length === 0) return text.split("").map((char) => ({ char, color: "" }));
+  if (colors.length === 1) return text.split("").map((char) => ({ char, color: colors[0] }));
+  const parsedColors = colors.map(parseHex);
+  const segments = colors.length - 1;
+  const len = text.length;
+  return text.split("").map((char, i) => {
+    if (len <= 1) {
+      return { char, color: colors[0] };
+    }
+    const pos = i / (len - 1) * segments;
+    const segIndex = Math.min(Math.floor(pos), segments - 1);
+    const t = pos - segIndex;
+    const color = toHex(lerpColor(parsedColors[segIndex], parsedColors[segIndex + 1], t));
+    return { char, color };
+  });
+}
+function Gradient({ children, colors, bold = false }) {
+  const chars = gradientText(children, colors);
+  return /* @__PURE__ */ jsx16(Box15, { flexDirection: "row", children: chars.map((item, idx) => /* @__PURE__ */ jsx16(Text9, { color: item.color, bold, children: item.char }, idx)) });
+}
+
+// packages/components/src/typography/BigText.tsx
+import { Box as Box16, Text as Text10 } from "ink";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var FONT = {
+  A: [
+    [0, 1, 0],
+    [1, 0, 1],
+    [1, 1, 1],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  B: [
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 1, 0]
+  ],
+  C: [
+    [0, 1, 1],
+    [1, 0, 0],
+    [1, 0, 0],
+    [1, 0, 0],
+    [0, 1, 1]
+  ],
+  D: [
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 0]
+  ],
+  E: [
+    [1, 1, 1],
+    [1, 0, 0],
+    [1, 1, 0],
+    [1, 0, 0],
+    [1, 1, 1]
+  ],
+  F: [
+    [1, 1, 1],
+    [1, 0, 0],
+    [1, 1, 0],
+    [1, 0, 0],
+    [1, 0, 0]
+  ],
+  G: [
+    [0, 1, 1],
+    [1, 0, 0],
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 1]
+  ],
+  H: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 1],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  I: [
+    [1, 1, 1],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0],
+    [1, 1, 1]
+  ],
+  J: [
+    [0, 0, 1],
+    [0, 0, 1],
+    [0, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  K: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  L: [
+    [1, 0, 0],
+    [1, 0, 0],
+    [1, 0, 0],
+    [1, 0, 0],
+    [1, 1, 1]
+  ],
+  M: [
+    [1, 0, 1],
+    [1, 1, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  N: [
+    [1, 0, 1],
+    [1, 1, 1],
+    [1, 1, 1],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  O: [
+    [0, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  P: [
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 1, 0],
+    [1, 0, 0],
+    [1, 0, 0]
+  ],
+  Q: [
+    [0, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 1],
+    [0, 1, 1]
+  ],
+  R: [
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  S: [
+    [0, 1, 1],
+    [1, 0, 0],
+    [0, 1, 0],
+    [0, 0, 1],
+    [1, 1, 0]
+  ],
+  T: [
+    [1, 1, 1],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0]
+  ],
+  U: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  V: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  W: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 1],
+    [1, 0, 1]
+  ],
+  X: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1]
+  ],
+  Y: [
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0]
+  ],
+  Z: [
+    [1, 1, 1],
+    [0, 0, 1],
+    [0, 1, 0],
+    [1, 0, 0],
+    [1, 1, 1]
+  ],
+  "0": [
+    [0, 1, 0],
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  "1": [
+    [0, 1, 0],
+    [1, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0],
+    [1, 1, 1]
+  ],
+  "2": [
+    [1, 1, 0],
+    [0, 0, 1],
+    [0, 1, 0],
+    [1, 0, 0],
+    [1, 1, 1]
+  ],
+  "3": [
+    [1, 1, 0],
+    [0, 0, 1],
+    [0, 1, 0],
+    [0, 0, 1],
+    [1, 1, 0]
+  ],
+  "4": [
+    [1, 0, 1],
+    [1, 0, 1],
+    [1, 1, 1],
+    [0, 0, 1],
+    [0, 0, 1]
+  ],
+  "5": [
+    [1, 1, 1],
+    [1, 0, 0],
+    [1, 1, 0],
+    [0, 0, 1],
+    [1, 1, 0]
+  ],
+  "6": [
+    [0, 1, 1],
+    [1, 0, 0],
+    [1, 1, 0],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  "7": [
+    [1, 1, 1],
+    [0, 0, 1],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0]
+  ],
+  "8": [
+    [0, 1, 0],
+    [1, 0, 1],
+    [0, 1, 0],
+    [1, 0, 1],
+    [0, 1, 0]
+  ],
+  "9": [
+    [0, 1, 0],
+    [1, 0, 1],
+    [0, 1, 1],
+    [0, 0, 1],
+    [1, 1, 0]
+  ],
+  " ": [
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0]
+  ],
+  "!": [
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 1, 0],
+    [0, 0, 0],
+    [0, 1, 0]
+  ],
+  "?": [
+    [0, 1, 0],
+    [1, 0, 1],
+    [0, 0, 1],
+    [0, 1, 0],
+    [0, 1, 0]
+  ],
+  ".": [
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 1, 0]
+  ],
+  ":": [
+    [0, 0, 0],
+    [0, 1, 0],
+    [0, 0, 0],
+    [0, 1, 0],
+    [0, 0, 0]
+  ],
+  "-": [
+    [0, 0, 0],
+    [0, 0, 0],
+    [1, 1, 1],
+    [0, 0, 0],
+    [0, 0, 0]
+  ]
+};
+var FALLBACK = [
+  [1, 1, 1],
+  [1, 0, 1],
+  [1, 0, 1],
+  [1, 0, 1],
+  [1, 1, 1]
+];
+function getCharRows(ch) {
+  const upper = ch.toUpperCase();
+  return FONT[upper] ?? FONT[ch] ?? FALLBACK;
+}
+function BigText({ children, color, font = "block" }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const onChar = font === "block" ? "\u2588" : "\u2593";
+  const offChar = " ";
+  const chars = children.split("");
+  const rows = 5;
+  return /* @__PURE__ */ jsx17(Box16, { flexDirection: "column", children: Array.from({ length: rows }, (_, rowIdx) => /* @__PURE__ */ jsx17(Box16, { flexDirection: "row", children: chars.map((ch, charIdx) => {
+    const charRows = getCharRows(ch);
+    const row = charRows[rowIdx] ?? [0, 0, 0];
+    const rowStr = row.map((pixel) => pixel ? onChar : offChar).join("");
+    return /* @__PURE__ */ jsx17(Text10, { color: resolvedColor, children: rowStr + " " }, charIdx);
+  }) }, rowIdx)) });
+}
+
+// packages/components/src/typography/Digits.tsx
+import { Box as Box17, Text as Text11 } from "ink";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var SEGMENTS_MD = {
+  "0": ["\u256D\u2500\u256E", "\u2502 \u2502", "\u2502 \u2502", "\u2502 \u2502", "\u2570\u2500\u256F"],
+  "1": ["  \u2502", "  \u2502", "  \u2502", "  \u2502", "  \u2502"],
+  "2": ["\u256D\u2500\u256E", "  \u2502", "\u256D\u2500\u256F", "\u2502  ", "\u2570\u2500\u2574"],
+  "3": ["\u256D\u2500\u256E", "  \u2502", " \u2500\u2524", "  \u2502", "\u2570\u2500\u256F"],
+  "4": ["\u2577 \u2577", "\u2502 \u2502", "\u2570\u2500\u2524", "  \u2502", "  \u2575"],
+  "5": ["\u256D\u2500\u2574", "\u2502  ", "\u2570\u2500\u256E", "  \u2502", "\u2570\u2500\u256F"],
+  "6": ["\u256D\u2500\u2574", "\u2502  ", "\u251C\u2500\u256E", "\u2502 \u2502", "\u2570\u2500\u256F"],
+  "7": ["\u256D\u2500\u256E", "  \u2502", "  \u2502", "  \u2502", "  \u2575"],
+  "8": ["\u256D\u2500\u256E", "\u2502 \u2502", "\u251C\u2500\u2524", "\u2502 \u2502", "\u2570\u2500\u256F"],
+  "9": ["\u256D\u2500\u256E", "\u2502 \u2502", "\u2570\u2500\u2524", "  \u2502", "\u2570\u2500\u256F"],
+  ":": ["   ", " \u25CF ", "   ", " \u25CF ", "   "],
+  ".": ["   ", "   ", "   ", "   ", " \u25CF "],
+  "-": ["   ", "   ", " \u2500 ", "   ", "   "],
+  " ": ["   ", "   ", "   ", "   ", "   "]
+};
+var SEGMENTS_LG = {
+  "0": ["\u256D\u2500\u2500\u2500\u256E", "\u2502   \u2502", "\u2502   \u2502", "\u2502   \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  "1": ["   \u2577 ", "   \u2502 ", "   \u2502 ", "   \u2502 ", "   \u2575 "],
+  "2": ["\u256D\u2500\u2500\u2500\u256E", "    \u2502", " \u2500\u2500\u2500\u256F", "\u2502    ", "\u2570\u2500\u2500\u2500\u2574"],
+  "3": ["\u256D\u2500\u2500\u2500\u256E", "    \u2502", " \u2500\u2500\u2500\u2524", "    \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  "4": ["\u2577   \u2577", "\u2502   \u2502", "\u2570\u2500\u2500\u2500\u2524", "    \u2502", "    \u2575"],
+  "5": ["\u256D\u2500\u2500\u2500\u2574", "\u2502    ", "\u2570\u2500\u2500\u2500\u256E", "    \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  "6": ["\u256D\u2500\u2500\u2500\u2574", "\u2502    ", "\u251C\u2500\u2500\u2500\u256E", "\u2502   \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  "7": ["\u256D\u2500\u2500\u2500\u256E", "    \u2502", "    \u2502", "    \u2502", "    \u2575"],
+  "8": ["\u256D\u2500\u2500\u2500\u256E", "\u2502   \u2502", "\u251C\u2500\u2500\u2500\u2524", "\u2502   \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  "9": ["\u256D\u2500\u2500\u2500\u256E", "\u2502   \u2502", "\u2570\u2500\u2500\u2500\u2524", "    \u2502", "\u2570\u2500\u2500\u2500\u256F"],
+  ":": ["     ", "  \u25CF  ", "     ", "  \u25CF  ", "     "],
+  ".": ["     ", "     ", "     ", "     ", "  \u25CF  "],
+  "-": ["     ", "     ", " \u2500\u2500\u2500 ", "     ", "     "],
+  " ": ["     ", "     ", "     ", "     ", "     "]
+};
+function getSegmentMap(size) {
+  return size === "lg" ? SEGMENTS_LG : SEGMENTS_MD;
+}
+function getFallback(size) {
+  const w = size === "lg" ? 5 : 3;
+  const bar = "\u2500".repeat(w - 2);
+  const side = "\u2502" + " ".repeat(w - 2) + "\u2502";
+  return [`\u256D${bar}\u256E`, side, side, side, `\u2570${bar}\u256F`];
+}
+function Digits({ value, color, size = "md" }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const str = String(value);
+  if (size === "sm") {
+    return /* @__PURE__ */ jsx18(Text11, { color: resolvedColor, bold: true, children: str });
+  }
+  const segMap = getSegmentMap(size);
+  const fallback = getFallback(size);
+  const chars = str.split("");
+  const rows = 5;
+  return /* @__PURE__ */ jsx18(Box17, { flexDirection: "column", children: Array.from({ length: rows }, (_, rowIdx) => /* @__PURE__ */ jsx18(Box17, { flexDirection: "row", children: chars.map((ch, charIdx) => {
+    const segments = segMap[ch] ?? fallback;
+    const rowStr = segments[rowIdx] ?? " ".repeat(size === "lg" ? 5 : 3);
+    return /* @__PURE__ */ jsxs7(Text11, { color: resolvedColor, children: [
+      rowStr,
+      " "
+    ] }, charIdx);
+  }) }, rowIdx)) });
+}
+
+// packages/components/src/input/TextInput.tsx
+import { useState as useState2 } from "react";
+import { Box as Box18, Text as Text12 } from "ink";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+function TextInput({
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  placeholder = "",
+  mask,
+  validate,
+  width = 40,
+  label,
+  autoFocus = false,
+  id
+}) {
+  const [internalValue, setInternalValue] = useState2("");
+  const [error, setError] = useState2(null);
+  const theme = useTheme();
+  const { isFocused } = useFocus({ autoFocus, id });
+  const value = controlledValue ?? internalValue;
+  useInput((input, key) => {
+    if (!isFocused) return;
+    if (key.return) {
+      const err = validate ? validate(value) : null;
+      if (err) {
+        setError(err);
+        return;
+      }
+      setError(null);
+      onSubmit?.(value);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      const newVal2 = value.slice(0, -1);
+      onChange ? onChange(newVal2) : setInternalValue(newVal2);
+      return;
+    }
+    if (key.escape) return;
+    if (key.upArrow || key.downArrow || key.tab) return;
+    const newVal = value + input;
+    onChange ? onChange(newVal) : setInternalValue(newVal);
+  });
+  const displayValue = mask ? mask.repeat(value.length) : value;
+  const borderColor = error ? theme.colors.error : isFocused ? theme.colors.focusRing : theme.colors.border;
+  return /* @__PURE__ */ jsxs8(Box18, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx19(Text12, { bold: true, children: label }),
+    /* @__PURE__ */ jsxs8(Box18, { borderStyle: "round", borderColor, width, paddingX: 1, children: [
+      /* @__PURE__ */ jsx19(Text12, { color: value ? theme.colors.foreground : theme.colors.mutedForeground, children: displayValue || placeholder }),
+      isFocused && /* @__PURE__ */ jsx19(Text12, { color: theme.colors.focusRing, children: "\u2588" })
+    ] }),
+    error && /* @__PURE__ */ jsx19(Text12, { color: theme.colors.error, children: error })
+  ] });
+}
+
+// packages/components/src/input/TextArea.tsx
+import { useState as useState3 } from "react";
+import { Box as Box19, Text as Text13 } from "ink";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function TextArea({
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  placeholder = "",
+  rows = 4,
+  label,
+  id
+}) {
+  const [internalValue, setInternalValue] = useState3("");
+  const [cursorLine, setCursorLine] = useState3(0);
+  const [cursorCol, setCursorCol] = useState3(0);
+  const [scrollOffset, setScrollOffset] = useState3(0);
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const value = controlledValue ?? internalValue;
+  function setValue(newVal) {
+    onChange ? onChange(newVal) : setInternalValue(newVal);
+  }
+  function getLines(v) {
+    return v.split("\n");
+  }
+  function joinLines(lines2) {
+    return lines2.join("\n");
+  }
+  useInput((input, key) => {
+    if (!isFocused) return;
+    const lines2 = getLines(value);
+    if (key.return && key.ctrl) {
+      onSubmit?.(value);
+      return;
+    }
+    if (key.return) {
+      const totalLines = lines2.length;
+      if (totalLines >= rows && cursorLine === rows - 1) {
+        return;
+      }
+      const currentLine = lines2[cursorLine] ?? "";
+      const before = currentLine.slice(0, cursorCol);
+      const after = currentLine.slice(cursorCol);
+      const newLines = [
+        ...lines2.slice(0, cursorLine),
+        before,
+        after,
+        ...lines2.slice(cursorLine + 1)
+      ];
+      setValue(joinLines(newLines));
+      const newLine = cursorLine + 1;
+      setCursorLine(newLine);
+      setCursorCol(0);
+      if (newLine >= scrollOffset + rows) {
+        setScrollOffset(newLine - rows + 1);
+      }
+      return;
+    }
+    if (key.backspace || key.delete) {
+      const currentLine = lines2[cursorLine] ?? "";
+      if (cursorCol > 0) {
+        const newLine = currentLine.slice(0, cursorCol - 1) + currentLine.slice(cursorCol);
+        const newLines = [...lines2.slice(0, cursorLine), newLine, ...lines2.slice(cursorLine + 1)];
+        setValue(joinLines(newLines));
+        setCursorCol(cursorCol - 1);
+      } else if (cursorLine > 0) {
+        const prevLine = lines2[cursorLine - 1] ?? "";
+        const mergedLine = prevLine + currentLine;
+        const newLines = [
+          ...lines2.slice(0, cursorLine - 1),
+          mergedLine,
+          ...lines2.slice(cursorLine + 1)
+        ];
+        setValue(joinLines(newLines));
+        const newLineIdx = cursorLine - 1;
+        setCursorLine(newLineIdx);
+        setCursorCol(prevLine.length);
+        if (newLineIdx < scrollOffset) {
+          setScrollOffset(newLineIdx);
+        }
+      }
+      return;
+    }
+    if (key.leftArrow) {
+      if (cursorCol > 0) {
+        setCursorCol(cursorCol - 1);
+      } else if (cursorLine > 0) {
+        const prevLine = lines2[cursorLine - 1] ?? "";
+        const newLineIdx = cursorLine - 1;
+        setCursorLine(newLineIdx);
+        setCursorCol(prevLine.length);
+        if (newLineIdx < scrollOffset) {
+          setScrollOffset(newLineIdx);
+        }
+      }
+      return;
+    }
+    if (key.rightArrow) {
+      const currentLine = lines2[cursorLine] ?? "";
+      if (cursorCol < currentLine.length) {
+        setCursorCol(cursorCol + 1);
+      } else if (cursorLine < lines2.length - 1) {
+        const newLineIdx = cursorLine + 1;
+        setCursorLine(newLineIdx);
+        setCursorCol(0);
+        if (newLineIdx >= scrollOffset + rows) {
+          setScrollOffset(newLineIdx - rows + 1);
+        }
+      }
+      return;
+    }
+    if (key.upArrow) {
+      if (cursorLine > 0) {
+        const newLineIdx = cursorLine - 1;
+        const targetLine = lines2[newLineIdx] ?? "";
+        setCursorLine(newLineIdx);
+        setCursorCol(Math.min(cursorCol, targetLine.length));
+        if (newLineIdx < scrollOffset) {
+          setScrollOffset(newLineIdx);
+        }
+      }
+      return;
+    }
+    if (key.downArrow) {
+      if (cursorLine < lines2.length - 1) {
+        const newLineIdx = cursorLine + 1;
+        const targetLine = lines2[newLineIdx] ?? "";
+        setCursorLine(newLineIdx);
+        setCursorCol(Math.min(cursorCol, targetLine.length));
+        if (newLineIdx >= scrollOffset + rows) {
+          setScrollOffset(newLineIdx - rows + 1);
+        }
+      }
+      return;
+    }
+    if (key.escape || key.tab) return;
+    if (input && input.length > 0) {
+      const currentLine = lines2[cursorLine] ?? "";
+      const newLine = currentLine.slice(0, cursorCol) + input + currentLine.slice(cursorCol);
+      const newLines = [...lines2.slice(0, cursorLine), newLine, ...lines2.slice(cursorLine + 1)];
+      setValue(joinLines(newLines));
+      setCursorCol(cursorCol + input.length);
+    }
+  });
+  const borderColor = isFocused ? theme.colors.focusRing : theme.colors.border;
+  const lines = getLines(value);
+  const visibleLines = lines.slice(scrollOffset, scrollOffset + rows);
+  const paddedLines = [...visibleLines];
+  while (paddedLines.length < rows) {
+    paddedLines.push("");
+  }
+  const isEmpty = value.length === 0;
+  return /* @__PURE__ */ jsxs9(Box19, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx20(Text13, { bold: true, children: label }),
+    /* @__PURE__ */ jsx20(Box19, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, children: paddedLines.map((line, rowIdx) => {
+      const absoluteLineIdx = rowIdx + scrollOffset;
+      const isActiveLine = isFocused && absoluteLineIdx === cursorLine;
+      if (isEmpty && rowIdx === 0) {
+        return /* @__PURE__ */ jsxs9(Box19, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx20(Text13, { color: theme.colors.mutedForeground, children: placeholder }),
+          isFocused && /* @__PURE__ */ jsx20(Text13, { color: theme.colors.focusRing, children: "\u2588" })
+        ] }, rowIdx);
+      }
+      if (isActiveLine) {
+        const before = line.slice(0, cursorCol);
+        const after = line.slice(cursorCol);
+        return /* @__PURE__ */ jsxs9(Box19, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx20(Text13, { color: theme.colors.foreground, children: before }),
+          /* @__PURE__ */ jsx20(Text13, { color: theme.colors.focusRing, children: "\u2588" }),
+          /* @__PURE__ */ jsx20(Text13, { color: theme.colors.foreground, children: after })
+        ] }, rowIdx);
+      }
+      return /* @__PURE__ */ jsx20(Box19, { children: /* @__PURE__ */ jsx20(Text13, { color: theme.colors.foreground, children: line }) }, rowIdx);
+    }) })
+  ] });
+}
+
+// packages/components/src/input/PasswordInput.tsx
+import { useState as useState4 } from "react";
+import { Box as Box20, Text as Text14 } from "ink";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+function PasswordInput({
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  placeholder = "",
+  mask = "\u25CF",
+  showToggle = false,
+  label,
+  id
+}) {
+  const [internalValue, setInternalValue] = useState4("");
+  const [isVisible, setIsVisible] = useState4(false);
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const value = controlledValue ?? internalValue;
+  function setValue(newVal) {
+    onChange ? onChange(newVal) : setInternalValue(newVal);
+  }
+  useInput((input, key) => {
+    if (!isFocused) return;
+    if (showToggle && input === "\b") {
+      setIsVisible((v) => !v);
+      return;
+    }
+    if (key.return) {
+      onSubmit?.(value);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setValue(value.slice(0, -1));
+      return;
+    }
+    if (key.escape || key.upArrow || key.downArrow || key.tab) return;
+    if (input && input.length > 0) {
+      setValue(value + input);
+    }
+  });
+  const displayValue = isVisible ? value : mask.repeat(value.length);
+  const borderColor = isFocused ? theme.colors.focusRing : theme.colors.border;
+  return /* @__PURE__ */ jsxs10(Box20, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx21(Text14, { bold: true, children: label }),
+    /* @__PURE__ */ jsxs10(Box20, { flexDirection: "row", alignItems: "center", gap: 1, children: [
+      /* @__PURE__ */ jsxs10(Box20, { borderStyle: "round", borderColor, paddingX: 1, children: [
+        /* @__PURE__ */ jsx21(Text14, { color: value ? theme.colors.foreground : theme.colors.mutedForeground, children: displayValue || placeholder }),
+        isFocused && /* @__PURE__ */ jsx21(Text14, { color: theme.colors.focusRing, children: "\u2588" })
+      ] }),
+      showToggle && isFocused && /* @__PURE__ */ jsx21(Text14, { color: theme.colors.mutedForeground, children: isVisible ? "Ctrl+H hide" : "Ctrl+H show" })
+    ] })
+  ] });
+}
+
+// packages/components/src/input/NumberInput.tsx
+import { useState as useState5 } from "react";
+import { Box as Box21, Text as Text15 } from "ink";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+function NumberInput({
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  min,
+  max,
+  step = 1,
+  placeholder = "",
+  label,
+  id,
+  format
+}) {
+  const [internalValue, setInternalValue] = useState5(void 0);
+  const [buffer, setBuffer] = useState5("");
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const value = controlledValue ?? internalValue;
+  function clamp(n) {
+    let result = n;
+    if (min !== void 0) result = Math.max(min, result);
+    if (max !== void 0) result = Math.min(max, result);
+    return result;
+  }
+  function commitValue(n) {
+    const clamped = clamp(n);
+    onChange ? onChange(clamped) : setInternalValue(clamped);
+    setBuffer(String(clamped));
+  }
+  useInput((input, key) => {
+    if (!isFocused) return;
+    if (key.upArrow) {
+      const current = value ?? 0;
+      commitValue(current + step);
+      return;
+    }
+    if (key.downArrow) {
+      const current = value ?? 0;
+      commitValue(current - step);
+      return;
+    }
+    if (key.return) {
+      const parsed = buffer !== "" ? parseFloat(buffer) : value;
+      if (parsed !== void 0 && !isNaN(parsed)) {
+        const clamped = clamp(parsed);
+        onSubmit?.(clamped);
+      }
+      return;
+    }
+    if (key.backspace || key.delete) {
+      const newBuffer = buffer.slice(0, -1);
+      setBuffer(newBuffer);
+      if (newBuffer === "" || newBuffer === "-") {
+        return;
+      }
+      const parsed = parseFloat(newBuffer);
+      if (!isNaN(parsed)) {
+        onChange ? onChange(clamp(parsed)) : setInternalValue(clamp(parsed));
+      }
+      return;
+    }
+    if (key.escape || key.tab) return;
+    if (input && /^[\d.\-]$/.test(input)) {
+      if (input === "-" && buffer.length > 0) return;
+      if (input === "." && buffer.includes(".")) return;
+      const newBuffer = buffer + input;
+      setBuffer(newBuffer);
+      const parsed = parseFloat(newBuffer);
+      if (!isNaN(parsed)) {
+        onChange ? onChange(clamp(parsed)) : setInternalValue(clamp(parsed));
+      }
+    }
+  });
+  const borderColor = isFocused ? theme.colors.focusRing : theme.colors.border;
+  let displayValue = "";
+  if (isFocused && buffer !== "") {
+    displayValue = buffer;
+  } else if (value !== void 0) {
+    displayValue = format ? format(value) : String(value);
+  }
+  const stepHint = `\u2191 +${step}  \u2193 -${step}`;
+  return /* @__PURE__ */ jsxs11(Box21, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx22(Text15, { bold: true, children: label }),
+    /* @__PURE__ */ jsxs11(Box21, { flexDirection: "row", alignItems: "center", gap: 1, children: [
+      /* @__PURE__ */ jsxs11(Box21, { borderStyle: "round", borderColor, paddingX: 1, children: [
+        /* @__PURE__ */ jsx22(Text15, { color: displayValue ? theme.colors.foreground : theme.colors.mutedForeground, children: displayValue || placeholder }),
+        isFocused && /* @__PURE__ */ jsx22(Text15, { color: theme.colors.focusRing, children: "\u2588" })
+      ] }),
+      isFocused && /* @__PURE__ */ jsx22(Text15, { color: theme.colors.mutedForeground, children: stepHint })
+    ] })
+  ] });
+}
+
+// packages/components/src/input/SearchInput.tsx
+import { useState as useState6, useMemo } from "react";
+import { Box as Box22, Text as Text16 } from "ink";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+function SearchInput({
+  options,
+  getValue,
+  value: controlledValue,
+  onChange,
+  onSelect,
+  placeholder = "Search...",
+  label,
+  maxResults = 5,
+  id
+}) {
+  const [internalValue, setInternalValue] = useState6("");
+  const [selectedIndex, setSelectedIndex] = useState6(0);
+  const [showResults, setShowResults] = useState6(false);
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const query = controlledValue ?? internalValue;
+  function getItemValue(item) {
+    if (getValue) return getValue(item);
+    return String(item);
+  }
+  function setQuery(newQuery) {
+    onChange ? onChange(newQuery) : setInternalValue(newQuery);
+  }
+  const filteredResults = useMemo(() => {
+    if (!options || options.length === 0) return [];
+    if (!query) return options.slice(0, maxResults);
+    const lower = query.toLowerCase();
+    return options.filter((item) => getItemValue(item).toLowerCase().includes(lower)).slice(0, maxResults);
+  }, [options, query, maxResults]);
+  useInput((input, key) => {
+    if (!isFocused) return;
+    if (key.escape) {
+      setQuery("");
+      setShowResults(false);
+      setSelectedIndex(0);
+      return;
+    }
+    if (key.upArrow) {
+      if (showResults && filteredResults.length > 0) {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+      }
+      return;
+    }
+    if (key.downArrow) {
+      if (filteredResults.length > 0) {
+        setShowResults(true);
+        setSelectedIndex((i) => Math.min(filteredResults.length - 1, i + 1));
+      }
+      return;
+    }
+    if (key.return) {
+      if (showResults && filteredResults.length > 0) {
+        onSelect?.(filteredResults[selectedIndex]);
+        setQuery(getItemValue(filteredResults[selectedIndex]));
+        setShowResults(false);
+        setSelectedIndex(0);
+      }
+      return;
+    }
+    if (key.backspace || key.delete) {
+      const newQuery = query.slice(0, -1);
+      setQuery(newQuery);
+      setSelectedIndex(0);
+      if (newQuery.length === 0) {
+        setShowResults(false);
+      }
+      return;
+    }
+    if (key.tab) return;
+    if (input && input.length > 0) {
+      const newQuery = query + input;
+      setQuery(newQuery);
+      setSelectedIndex(0);
+      if (options && options.length > 0) {
+        setShowResults(true);
+      }
+    }
+  });
+  const borderColor = isFocused ? theme.colors.focusRing : theme.colors.border;
+  const hasResults = showResults && filteredResults.length > 0;
+  return /* @__PURE__ */ jsxs12(Box22, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx23(Text16, { bold: true, children: label }),
+    /* @__PURE__ */ jsxs12(Box22, { borderStyle: "round", borderColor, paddingX: 1, children: [
+      /* @__PURE__ */ jsx23(Text16, { color: theme.colors.mutedForeground, children: "\u{1F50D} " }),
+      /* @__PURE__ */ jsx23(Text16, { color: query ? theme.colors.foreground : theme.colors.mutedForeground, children: query || placeholder }),
+      isFocused && /* @__PURE__ */ jsx23(Text16, { color: theme.colors.focusRing, children: "\u2588" })
+    ] }),
+    hasResults && /* @__PURE__ */ jsx23(Box22, { flexDirection: "column", paddingLeft: 2, children: filteredResults.map((item, idx) => {
+      const isSelected = idx === selectedIndex;
+      return /* @__PURE__ */ jsxs12(Box22, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx23(Text16, { color: isSelected ? theme.colors.focusRing : theme.colors.mutedForeground, children: isSelected ? "\u203A " : "  " }),
+        /* @__PURE__ */ jsx23(Text16, { color: isSelected ? theme.colors.foreground : theme.colors.mutedForeground, children: getItemValue(item) })
+      ] }, idx);
+    }) })
+  ] });
+}
+
+// packages/components/src/selection/Checkbox.tsx
+import { useState as useState7 } from "react";
+import { Box as Box23, Text as Text17 } from "ink";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function Checkbox({
+  checked: controlledChecked,
+  onChange,
+  label,
+  indeterminate = false,
+  disabled = false,
+  id
+}) {
+  const [internalChecked, setInternalChecked] = useState7(false);
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const checked = controlledChecked ?? internalChecked;
+  useInput((input) => {
+    if (!isFocused || disabled) return;
+    if (input === " ") {
+      const next = !checked;
+      onChange ? onChange(next) : setInternalChecked(next);
+    }
+  });
+  const icon = indeterminate ? "\u25AA" : checked ? "\u25A0" : "\u25A1";
+  const iconColor = disabled ? theme.colors.mutedForeground : checked || indeterminate ? theme.colors.primary : theme.colors.border;
+  return /* @__PURE__ */ jsxs13(Box23, { gap: 1, children: [
+    /* @__PURE__ */ jsx24(Text17, { color: isFocused ? theme.colors.focusRing : iconColor, bold: isFocused, children: icon }),
+    label && /* @__PURE__ */ jsx24(
+      Text17,
+      {
+        color: disabled ? theme.colors.mutedForeground : theme.colors.foreground,
+        dimColor: disabled,
+        children: label
+      }
+    )
+  ] });
+}
+
+// packages/components/src/selection/Select.tsx
+import { useState as useState8 } from "react";
+import { Box as Box24, Text as Text18 } from "ink";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function Select({
+  options,
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  label,
+  cursor = "\u203A",
+  cursorColor
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState8(0);
+  const resolvedCursorColor = cursorColor ?? theme.colors.primary;
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((i) => {
+        let next = i - 1;
+        while (next >= 0 && options[next]?.disabled) next--;
+        return next < 0 ? i : next;
+      });
+    } else if (key.downArrow) {
+      setActiveIndex((i) => {
+        let next = i + 1;
+        while (next < options.length && options[next]?.disabled) next++;
+        return next >= options.length ? i : next;
+      });
+    } else if (key.return) {
+      const opt = options[activeIndex];
+      if (opt && !opt.disabled) {
+        onChange?.(opt.value);
+        onSubmit?.(opt.value);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs14(Box24, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx25(Text18, { bold: true, children: label }),
+    options.map((opt, idx) => {
+      const isActive = idx === activeIndex;
+      const isSelected = controlledValue !== void 0 && opt.value === controlledValue;
+      return /* @__PURE__ */ jsxs14(Box24, { gap: 1, children: [
+        /* @__PURE__ */ jsx25(Text18, { color: isActive ? resolvedCursorColor : void 0, children: isActive ? cursor : " " }),
+        /* @__PURE__ */ jsx25(
+          Text18,
+          {
+            color: opt.disabled ? theme.colors.mutedForeground : isActive ? resolvedCursorColor : theme.colors.foreground,
+            bold: isActive || isSelected,
+            dimColor: opt.disabled,
+            children: opt.label
+          }
+        ),
+        opt.hint && /* @__PURE__ */ jsx25(Text18, { color: theme.colors.mutedForeground, dimColor: true, children: opt.hint })
+      ] }, idx);
+    })
+  ] });
+}
+
+// packages/components/src/selection/MultiSelect.tsx
+import { useState as useState9 } from "react";
+import { Box as Box25, Text as Text19 } from "ink";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function MultiSelect({
+  options,
+  value: controlledValue,
+  onChange,
+  onSubmit,
+  cursor = "\u203A",
+  checkmark = "\u25C9",
+  height
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState9(0);
+  const [internalSelected, setInternalSelected] = useState9([]);
+  const selected = controlledValue ?? internalSelected;
+  const scrollOffset = (() => {
+    if (!height) return 0;
+    const half = Math.floor(height / 2);
+    const maxOffset = options.length - height;
+    const offset = activeIndex - half;
+    if (offset < 0) return 0;
+    if (offset > maxOffset) return Math.max(0, maxOffset);
+    return offset;
+  })();
+  const visibleOptions = height ? options.slice(scrollOffset, scrollOffset + height) : options;
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((i) => {
+        let next = i - 1;
+        while (next >= 0 && options[next]?.disabled) next--;
+        return next < 0 ? i : next;
+      });
+    } else if (key.downArrow) {
+      setActiveIndex((i) => {
+        let next = i + 1;
+        while (next < options.length && options[next]?.disabled) next++;
+        return next >= options.length ? i : next;
+      });
+    } else if (input === " ") {
+      const opt = options[activeIndex];
+      if (!opt || opt.disabled) return;
+      const isSelected = selected.includes(opt.value);
+      const next = isSelected ? selected.filter((v) => v !== opt.value) : [...selected, opt.value];
+      if (controlledValue === void 0) {
+        setInternalSelected(next);
+      }
+      onChange?.(next);
+    } else if (key.return) {
+      onSubmit?.(selected);
+    }
+  });
+  return /* @__PURE__ */ jsx26(Box25, { flexDirection: "column", children: visibleOptions.map((opt, visibleIdx) => {
+    const idx = scrollOffset + visibleIdx;
+    const isActive = idx === activeIndex;
+    const isSelected = selected.includes(opt.value);
+    const icon = isSelected ? checkmark : "\u25CB";
+    return /* @__PURE__ */ jsxs15(Box25, { gap: 1, children: [
+      /* @__PURE__ */ jsx26(Text19, { color: isActive ? theme.colors.primary : void 0, children: isActive ? cursor : " " }),
+      /* @__PURE__ */ jsx26(
+        Text19,
+        {
+          color: opt.disabled ? theme.colors.mutedForeground : isSelected ? theme.colors.primary : theme.colors.foreground,
+          dimColor: opt.disabled,
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx26(
+        Text19,
+        {
+          color: opt.disabled ? theme.colors.mutedForeground : isActive ? theme.colors.primary : theme.colors.foreground,
+          bold: isActive,
+          dimColor: opt.disabled,
+          children: opt.label
+        }
+      ),
+      opt.hint && /* @__PURE__ */ jsx26(Text19, { color: theme.colors.mutedForeground, dimColor: true, children: opt.hint })
+    ] }, idx);
+  }) });
+}
+
+// packages/components/src/selection/RadioGroup.tsx
+import { useState as useState10 } from "react";
+import { Box as Box26, Text as Text20 } from "ink";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function RadioGroup({
+  options,
+  value: controlledValue,
+  onChange,
+  name: _name,
+  cursor = "\u203A"
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState10(() => {
+    if (controlledValue === void 0) return 0;
+    const idx = options.findIndex((o) => o.value === controlledValue);
+    return idx >= 0 ? idx : 0;
+  });
+  const [internalValue, setInternalValue] = useState10(controlledValue);
+  const selected = controlledValue ?? internalValue;
+  const select = (idx) => {
+    const opt = options[idx];
+    if (!opt || opt.disabled) return;
+    if (controlledValue === void 0) {
+      setInternalValue(opt.value);
+    }
+    onChange?.(opt.value);
+  };
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((i) => {
+        let next = i - 1;
+        while (next >= 0 && options[next]?.disabled) next--;
+        return next < 0 ? i : next;
+      });
+    } else if (key.downArrow) {
+      setActiveIndex((i) => {
+        let next = i + 1;
+        while (next < options.length && options[next]?.disabled) next++;
+        return next >= options.length ? i : next;
+      });
+    } else if (input === " " || key.return) {
+      select(activeIndex);
+    }
+  });
+  return /* @__PURE__ */ jsx27(Box26, { flexDirection: "column", children: options.map((opt, idx) => {
+    const isActive = idx === activeIndex;
+    const isSelected = selected !== void 0 && opt.value === selected;
+    const icon = isSelected ? "\u25C9" : "\u25CB";
+    return /* @__PURE__ */ jsxs16(Box26, { gap: 1, children: [
+      /* @__PURE__ */ jsx27(Text20, { color: isActive ? theme.colors.primary : void 0, children: isActive ? cursor : " " }),
+      /* @__PURE__ */ jsx27(
+        Text20,
+        {
+          color: opt.disabled ? theme.colors.mutedForeground : isSelected ? theme.colors.primary : theme.colors.foreground,
+          dimColor: opt.disabled,
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx27(
+        Text20,
+        {
+          color: opt.disabled ? theme.colors.mutedForeground : isActive ? theme.colors.primary : theme.colors.foreground,
+          bold: isActive || isSelected,
+          dimColor: opt.disabled,
+          children: opt.label
+        }
+      ),
+      opt.hint && /* @__PURE__ */ jsx27(Text20, { color: theme.colors.mutedForeground, dimColor: true, children: opt.hint })
+    ] }, idx);
+  }) });
+}
+
+// packages/components/src/selection/CheckboxGroup.tsx
+import { useState as useState11 } from "react";
+import { Box as Box27, Text as Text21 } from "ink";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+function CheckboxGroup({
+  label,
+  options,
+  value: controlledValue,
+  onChange,
+  min,
+  max
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState11(0);
+  const [internalSelected, setInternalSelected] = useState11([]);
+  const [error, setError] = useState11(void 0);
+  const selected = controlledValue ?? internalSelected;
+  const validateAndUpdate = (next) => {
+    if (min !== void 0 && next.length < min) {
+      setError(`Select at least ${min} option${min === 1 ? "" : "s"}.`);
+    } else if (max !== void 0 && next.length > max) {
+      setError(`Select at most ${max} option${max === 1 ? "" : "s"}.`);
+      return;
+    } else {
+      setError(void 0);
+    }
+    if (controlledValue === void 0) {
+      setInternalSelected(next);
+    }
+    onChange?.(next);
+  };
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((i) => {
+        let next = i - 1;
+        while (next >= 0 && options[next]?.disabled) next--;
+        return next < 0 ? i : next;
+      });
+    } else if (key.downArrow) {
+      setActiveIndex((i) => {
+        let next = i + 1;
+        while (next < options.length && options[next]?.disabled) next++;
+        return next >= options.length ? i : next;
+      });
+    } else if (input === " ") {
+      const opt = options[activeIndex];
+      if (!opt || opt.disabled) return;
+      const isSelected = selected.includes(opt.value);
+      const next = isSelected ? selected.filter((v) => v !== opt.value) : [...selected, opt.value];
+      validateAndUpdate(next);
+    }
+  });
+  return /* @__PURE__ */ jsxs17(Box27, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx28(Text21, { bold: true, color: theme.colors.foreground, children: label }),
+    options.map((opt, idx) => {
+      const isActive = idx === activeIndex;
+      const isSelected = selected.includes(opt.value);
+      const icon = isSelected ? "\u25C9" : "\u25CB";
+      return /* @__PURE__ */ jsxs17(Box27, { gap: 1, children: [
+        /* @__PURE__ */ jsx28(Text21, { color: isActive ? theme.colors.primary : void 0, children: isActive ? "\u203A" : " " }),
+        /* @__PURE__ */ jsx28(
+          Text21,
+          {
+            color: opt.disabled ? theme.colors.mutedForeground : isSelected ? theme.colors.primary : theme.colors.foreground,
+            dimColor: opt.disabled,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          Text21,
+          {
+            color: opt.disabled ? theme.colors.mutedForeground : isActive ? theme.colors.primary : theme.colors.foreground,
+            bold: isActive,
+            dimColor: opt.disabled,
+            children: opt.label
+          }
+        )
+      ] }, idx);
+    }),
+    error && /* @__PURE__ */ jsx28(Text21, { color: theme.colors.error, children: error })
+  ] });
+}
+
+// packages/components/src/selection/TagInput.tsx
+import { useState as useState12 } from "react";
+import { Box as Box28, Text as Text22 } from "ink";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function TagInput({
+  value: controlledValue,
+  onChange,
+  placeholder = "Type and press Enter\u2026",
+  maxTags
+}) {
+  const theme = useTheme();
+  const [internalTags, setInternalTags] = useState12([]);
+  const [inputText, setInputText] = useState12("");
+  const tags = controlledValue ?? internalTags;
+  const updateTags = (next) => {
+    if (controlledValue === void 0) {
+      setInternalTags(next);
+    }
+    onChange?.(next);
+  };
+  const addTag = () => {
+    const trimmed = inputText.trim();
+    if (!trimmed) return;
+    if (maxTags !== void 0 && tags.length >= maxTags) return;
+    updateTags([...tags, trimmed]);
+    setInputText("");
+  };
+  const removeLastTag = () => {
+    if (tags.length === 0) return;
+    updateTags(tags.slice(0, -1));
+  };
+  useInput((input, key) => {
+    if (key.return) {
+      addTag();
+    } else if (key.backspace || key.delete) {
+      if (inputText.length > 0) {
+        setInputText((t) => t.slice(0, -1));
+      } else {
+        removeLastTag();
+      }
+    } else if (!key.ctrl && !key.meta && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.escape && !key.tab) {
+      if (input) {
+        setInputText((t) => t + input);
+      }
+    }
+  });
+  const atMax = maxTags !== void 0 && tags.length >= maxTags;
+  return /* @__PURE__ */ jsxs18(Box28, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx29(Box28, { flexWrap: "wrap", gap: 1, children: tags.map((tag, idx) => /* @__PURE__ */ jsxs18(Box28, { children: [
+      /* @__PURE__ */ jsx29(Text22, { bold: true, children: "[" }),
+      /* @__PURE__ */ jsx29(Text22, { children: tag }),
+      /* @__PURE__ */ jsx29(Text22, { bold: true, children: " \xD7]" })
+    ] }, idx)) }),
+    /* @__PURE__ */ jsxs18(Box28, { gap: 1, children: [
+      /* @__PURE__ */ jsx29(Text22, { color: theme.colors.primary, children: "\u203A" }),
+      atMax ? /* @__PURE__ */ jsx29(Text22, { color: theme.colors.mutedForeground, dimColor: true, children: `Max ${maxTags} tag${maxTags === 1 ? "" : "s"} reached` }) : /* @__PURE__ */ jsx29(Text22, { color: inputText ? theme.colors.foreground : theme.colors.mutedForeground, children: inputText || placeholder })
+    ] })
+  ] });
+}
+
+// packages/components/src/data/List.tsx
+import { useState as useState13, useMemo as useMemo2 } from "react";
+import { Box as Box29, Text as Text23 } from "ink";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+function List({
+  items,
+  onSelect,
+  filterable = false,
+  height = 10,
+  cursor = "\u203A"
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState13(0);
+  const [filter, setFilter] = useState13("");
+  const filtered = useMemo2(() => {
+    if (!filter) return items;
+    const q = filter.toLowerCase();
+    return items.filter((item) => item.label.toLowerCase().includes(q));
+  }, [items, filter]);
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));
+    } else if (key.return) {
+      const item = filtered[activeIndex];
+      if (item) onSelect?.(item);
+    } else if (filterable && key.backspace) {
+      setFilter((f) => f.slice(0, -1));
+    } else if (filterable && !key.escape && !key.return && !key.upArrow && !key.downArrow) {
+      setFilter((f) => f + input);
+    }
+  });
+  const visible = filtered.slice(0, height);
+  return /* @__PURE__ */ jsxs19(Box29, { flexDirection: "column", children: [
+    filterable && /* @__PURE__ */ jsx30(Box29, { borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx30(Text23, { dimColor: !filter, children: filter || "Type to filter\u2026" }) }),
+    visible.map((item, idx) => {
+      const isActive = idx === activeIndex;
+      return /* @__PURE__ */ jsxs19(Box29, { gap: 1, children: [
+        /* @__PURE__ */ jsx30(Text23, { color: isActive ? theme.colors.primary : void 0, children: isActive ? cursor : " " }),
+        /* @__PURE__ */ jsx30(
+          Text23,
+          {
+            color: item.color ?? (isActive ? theme.colors.primary : theme.colors.foreground),
+            bold: isActive,
+            children: item.label
+          }
+        ),
+        item.description && /* @__PURE__ */ jsx30(Text23, { color: theme.colors.mutedForeground, dimColor: true, children: item.description })
+      ] }, item.key);
+    }),
+    filtered.length > height && /* @__PURE__ */ jsxs19(Text23, { color: theme.colors.mutedForeground, dimColor: true, children: [
+      filtered.length - height,
+      " more\u2026"
+    ] })
+  ] });
+}
+
+// packages/components/src/data/Table.tsx
+import { useState as useState14, useMemo as useMemo3 } from "react";
+import { Box as Box30, Text as Text24 } from "ink";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+function pad(str, width, align = "left") {
+  const s = String(str);
+  if (s.length >= width) return s.slice(0, width);
+  const diff = width - s.length;
+  if (align === "right") return " ".repeat(diff) + s;
+  if (align === "center") {
+    const left = Math.floor(diff / 2);
+    const right = diff - left;
+    return " ".repeat(left) + s + " ".repeat(right);
+  }
+  return s + " ".repeat(diff);
+}
+function Table({
+  data,
+  columns,
+  sortable = false,
+  selectable = false,
+  onSelect,
+  maxRows = 20,
+  borderColor
+}) {
+  const theme = useTheme();
+  const [sortKey, setSortKey] = useState14(null);
+  const [sortDir, setSortDir] = useState14("asc");
+  const [activeRow, setActiveRow] = useState14(0);
+  const [sortColIdx, setSortColIdx] = useState14(0);
+  const resolvedBorderColor = borderColor ?? theme.colors.border;
+  const sorted = useMemo3(() => {
+    if (!sortKey) return data;
+    return [...data].sort((a, b) => {
+      const av = a[sortKey];
+      const bv = b[sortKey];
+      const cmp = String(av).localeCompare(String(bv));
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir]);
+  const visible = sorted.slice(0, maxRows);
+  useInput((input, key) => {
+    if (key.upArrow) setActiveRow((r) => Math.max(0, r - 1));
+    else if (key.downArrow) setActiveRow((r) => Math.min(visible.length - 1, r + 1));
+    else if (key.return && selectable) onSelect?.(visible[activeRow]);
+    else if (sortable && key.leftArrow) setSortColIdx((i) => Math.max(0, i - 1));
+    else if (sortable && key.rightArrow) setSortColIdx((i) => Math.min(columns.length - 1, i + 1));
+    else if (sortable && input === "s") {
+      const col = columns[sortColIdx];
+      if (!col) return;
+      if (sortKey === col.key) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+      } else {
+        setSortKey(col.key);
+        setSortDir("asc");
+      }
+    }
+  });
+  const colWidths = columns.map((col) => {
+    const dataMax = data.reduce((max, row) => Math.max(max, String(row[col.key] ?? "").length), 0);
+    return col.width ?? Math.max(col.header.length, dataMax) + 2;
+  });
+  const headerRow = columns.map((col, i) => pad(col.header, colWidths[i] ?? col.header.length, col.align)).join(" \u2502 ");
+  const separator = colWidths.map((w) => "\u2500".repeat(w)).join("\u2500\u253C\u2500");
+  return /* @__PURE__ */ jsxs20(Box30, { flexDirection: "column", borderStyle: "round", borderColor: resolvedBorderColor, children: [
+    /* @__PURE__ */ jsx31(Box30, { paddingX: 1, children: /* @__PURE__ */ jsx31(Text24, { bold: true, color: theme.colors.primary, children: headerRow }) }),
+    /* @__PURE__ */ jsx31(Box30, { paddingX: 1, children: /* @__PURE__ */ jsx31(Text24, { color: resolvedBorderColor, children: separator }) }),
+    visible.map((row, rowIdx) => {
+      const isActive = rowIdx === activeRow && selectable;
+      const cells = columns.map((col, i) => pad(String(row[col.key] ?? ""), colWidths[i] ?? 8, col.align)).join(" \u2502 ");
+      return /* @__PURE__ */ jsx31(Box30, { paddingX: 1, children: /* @__PURE__ */ jsx31(
+        Text24,
+        {
+          color: isActive ? theme.colors.selectionForeground : theme.colors.foreground,
+          inverse: isActive,
+          children: cells
+        }
+      ) }, rowIdx);
+    }),
+    data.length > maxRows && /* @__PURE__ */ jsx31(Box30, { paddingX: 1, children: /* @__PURE__ */ jsxs20(Text24, { color: theme.colors.mutedForeground, dimColor: true, children: [
+      "\u2026 ",
+      data.length - maxRows,
+      " more rows"
+    ] }) })
+  ] });
+}
+
+// packages/components/src/data/Card.tsx
+import { Box as Box31, Text as Text25 } from "ink";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+function Card({ title, subtitle, children, footer, borderColor, width }) {
+  const theme = useTheme();
+  const resolvedBorderColor = borderColor ?? theme.colors.border;
+  return /* @__PURE__ */ jsxs21(
+    Box31,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: resolvedBorderColor,
+      width,
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs21(Box31, { flexDirection: "column", paddingBottom: 1, children: [
+          title && /* @__PURE__ */ jsx32(Text25, { bold: true, color: theme.colors.foreground, children: title }),
+          subtitle && /* @__PURE__ */ jsx32(Text25, { dimColor: true, color: theme.colors.mutedForeground, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx32(Box31, { flexDirection: "column", children }),
+        footer && /* @__PURE__ */ jsxs21(Box31, { flexDirection: "column", marginTop: 1, paddingTop: 1, children: [
+          /* @__PURE__ */ jsx32(Text25, { color: resolvedBorderColor, children: "\u2500".repeat(30) }),
+          /* @__PURE__ */ jsx32(Box31, { marginTop: 0, children: footer })
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/components/src/data/KeyValue.tsx
+import { useMemo as useMemo4 } from "react";
+import { Box as Box32, Text as Text26 } from "ink";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+function KeyValue({
+  items,
+  keyWidth,
+  separator = ":",
+  keyColor,
+  valueColor
+}) {
+  const theme = useTheme();
+  const resolvedKeyWidth = useMemo4(() => {
+    if (keyWidth !== void 0) return keyWidth;
+    return items.reduce((max, item) => Math.max(max, item.key.length), 0) + 1;
+  }, [items, keyWidth]);
+  const resolvedKeyColor = keyColor ?? theme.colors.mutedForeground;
+  const resolvedValueColor = valueColor ?? theme.colors.foreground;
+  return /* @__PURE__ */ jsx33(Box32, { flexDirection: "column", children: items.map((item, idx) => {
+    const paddedKey = item.key.padEnd(resolvedKeyWidth, " ");
+    return /* @__PURE__ */ jsxs22(Box32, { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx33(Text26, { color: resolvedKeyColor, children: paddedKey }),
+      /* @__PURE__ */ jsx33(Text26, { color: resolvedKeyColor, children: separator }),
+      /* @__PURE__ */ jsx33(Text26, { color: item.color ?? resolvedValueColor, children: item.value })
+    ] }, idx);
+  }) });
+}
+
+// packages/components/src/data/Definition.tsx
+import { Box as Box33, Text as Text27 } from "ink";
+import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+function Definition({ items, termColor }) {
+  const theme = useTheme();
+  const resolvedTermColor = termColor ?? theme.colors.primary;
+  return /* @__PURE__ */ jsx34(Box33, { flexDirection: "column", children: items.map((item, idx) => /* @__PURE__ */ jsxs23(Box33, { flexDirection: "column", marginBottom: idx < items.length - 1 ? 1 : 0, children: [
+    /* @__PURE__ */ jsx34(Text27, { bold: true, color: resolvedTermColor, children: item.term }),
+    /* @__PURE__ */ jsx34(Box33, { paddingLeft: 2, children: /* @__PURE__ */ jsx34(Text27, { color: theme.colors.foreground, children: item.description }) })
+  ] }, idx)) });
+}
+
+// packages/components/src/data/VirtualList.tsx
+import { useState as useState15, useMemo as useMemo5 } from "react";
+import { Box as Box34, Text as Text28 } from "ink";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+function VirtualList({
+  items,
+  renderItem,
+  height,
+  onSelect,
+  overscan = 2
+}) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState15(0);
+  const [windowStart, setWindowStart] = useState15(0);
+  useInput((_input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((prev) => {
+        const next = Math.max(0, prev - 1);
+        setWindowStart((ws) => Math.min(ws, next));
+        return next;
+      });
+    } else if (key.downArrow) {
+      setActiveIndex((prev) => {
+        const next = Math.min(items.length - 1, prev + 1);
+        setWindowStart((ws) => {
+          if (next >= ws + height) return next - height + 1;
+          return ws;
+        });
+        return next;
+      });
+    } else if (key.return) {
+      const item = items[activeIndex];
+      if (item !== void 0) onSelect?.(item, activeIndex);
+    }
+  });
+  const visibleStart = Math.max(0, windowStart - overscan);
+  const visibleEnd = Math.min(items.length, windowStart + height + overscan);
+  const visibleItems = useMemo5(
+    () => items.slice(visibleStart, visibleEnd),
+    [items, visibleStart, visibleEnd]
+  );
+  const thumbSize = Math.max(1, Math.floor(height * height / items.length));
+  const thumbPosition = items.length <= height ? 0 : Math.floor(activeIndex / (items.length - 1) * (height - thumbSize));
+  const scrollbar = useMemo5(() => {
+    return Array.from({ length: height }, (_, i) => {
+      if (i >= thumbPosition && i < thumbPosition + thumbSize) return "\u2588";
+      return "\u2502";
+    });
+  }, [height, thumbPosition, thumbSize]);
+  return /* @__PURE__ */ jsxs24(Box34, { flexDirection: "row", children: [
+    /* @__PURE__ */ jsx35(Box34, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, localIdx) => {
+      const globalIdx = visibleStart + localIdx;
+      const isVisible = globalIdx >= windowStart && globalIdx < windowStart + height;
+      if (!isVisible) return null;
+      const isActive = globalIdx === activeIndex;
+      return /* @__PURE__ */ jsx35(Box34, { children: renderItem(item, globalIdx, isActive) }, globalIdx);
+    }) }),
+    items.length > height && /* @__PURE__ */ jsx35(Box34, { flexDirection: "column", marginLeft: 1, children: scrollbar.map((char, i) => /* @__PURE__ */ jsx35(
+      Text28,
+      {
+        color: char === "\u2588" ? theme.colors.primary : theme.colors.mutedForeground,
+        children: char
+      },
+      i
+    )) })
+  ] });
+}
+
+// packages/components/src/data/Tree.tsx
+import { useState as useState16, useMemo as useMemo6 } from "react";
+import { Box as Box35, Text as Text29 } from "ink";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+function flattenTree(nodes, expandedKeys, depth = 0) {
+  const result = [];
+  for (const node of nodes) {
+    const hasChildren = Boolean(node.children && node.children.length > 0);
+    result.push({ node, depth, hasChildren });
+    if (hasChildren && expandedKeys.has(node.key)) {
+      const childFlat = flattenTree(node.children, expandedKeys, depth + 1);
+      result.push(...childFlat);
+    }
+  }
+  return result;
+}
+function Tree({ nodes, onSelect, defaultExpanded = [] }) {
+  const theme = useTheme();
+  const [expandedKeys, setExpandedKeys] = useState16(new Set(defaultExpanded));
+  const [activeIndex, setActiveIndex] = useState16(0);
+  const flatNodes = useMemo6(() => flattenTree(nodes, expandedKeys), [nodes, expandedKeys]);
+  useInput((_input, key) => {
+    const current = flatNodes[activeIndex];
+    if (key.upArrow) {
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setActiveIndex((i) => Math.min(flatNodes.length - 1, i + 1));
+    } else if (key.rightArrow || _input === " ") {
+      if (current?.hasChildren && !expandedKeys.has(current.node.key)) {
+        setExpandedKeys((prev) => {
+          const next = new Set(prev);
+          next.add(current.node.key);
+          return next;
+        });
+      }
+    } else if (key.leftArrow) {
+      if (current?.hasChildren && expandedKeys.has(current.node.key)) {
+        setExpandedKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(current.node.key);
+          return next;
+        });
+      }
+    } else if (key.return) {
+      if (current) onSelect?.(current.node);
+    }
+  });
+  return /* @__PURE__ */ jsx36(Box35, { flexDirection: "column", children: flatNodes.map(({ node, depth, hasChildren }, idx) => {
+    const isActive = idx === activeIndex;
+    const isExpanded = expandedKeys.has(node.key);
+    let prefix = "  ".repeat(depth);
+    let indicator;
+    if (hasChildren) {
+      indicator = isExpanded ? "\u25BC" : "\u25B6";
+    } else {
+      indicator = node.icon ?? "\u2022";
+    }
+    return /* @__PURE__ */ jsxs25(Box35, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsx36(Text29, { children: prefix }),
+      /* @__PURE__ */ jsxs25(Text29, { color: isActive ? theme.colors.primary : theme.colors.mutedForeground, children: [
+        indicator,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx36(Text29, { bold: isActive, color: isActive ? theme.colors.primary : theme.colors.foreground, children: node.label })
+    ] }, node.key);
+  }) });
+}
+
+// packages/components/src/feedback/Spinner.tsx
+import { Text as Text30 } from "ink";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+var FRAMES = {
+  dots: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
+  line: ["\u2014", "\\", "|", "/"],
+  star: ["\u2736", "\u2738", "\u2739", "\u273A", "\u2739", "\u2738"],
+  clock: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
+  bounce: ["\u2801", "\u2802", "\u2804", "\u2840", "\u2848", "\u2820", "\u2810", "\u2808"],
+  bar: ["\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588", "\u2589", "\u258A", "\u258B", "\u258C", "\u258D", "\u258E"],
+  arc: ["\u25DC", "\u25E0", "\u25DD", "\u25DE", "\u25E1", "\u25DF"],
+  arrow: ["\u2190", "\u2196", "\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199"],
+  toggle: ["\u22B6", "\u22B7"],
+  box: ["\u2596", "\u2598", "\u259D", "\u2597"],
+  pipe: ["\u2524", "\u2518", "\u2534", "\u2514", "\u251C", "\u250C", "\u252C", "\u2510"],
+  earth: ["\u{1F30D}", "\u{1F30E}", "\u{1F30F}"]
+};
+function Spinner({ style: spinnerStyle = "dots", label, color, fps = 12 }) {
+  const theme = useTheme();
+  const frame = useAnimation(fps);
+  const frames = FRAMES[spinnerStyle];
+  const icon = frames[frame % frames.length];
+  const resolvedColor = color ?? theme.colors.primary;
+  return /* @__PURE__ */ jsxs26(Text30, { children: [
+    /* @__PURE__ */ jsx37(Text30, { color: resolvedColor, children: icon }),
+    label && /* @__PURE__ */ jsxs26(Text30, { children: [
+      " ",
+      label
+    ] })
+  ] });
+}
+
+// packages/components/src/feedback/ProgressBar.tsx
+import { Box as Box36, Text as Text31 } from "ink";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+function ProgressBar({
+  value,
+  total,
+  width = 30,
+  showPercent = true,
+  showEta = false,
+  fillChar = "\u2588",
+  emptyChar = "\u2591",
+  color,
+  label
+}) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.primary;
+  const percent = total !== void 0 ? Math.min(100, Math.round(value / total * 100)) : Math.min(100, Math.round(value));
+  const filled = Math.round(percent / 100 * width);
+  const empty = width - filled;
+  const bar = fillChar.repeat(filled) + emptyChar.repeat(empty);
+  return /* @__PURE__ */ jsxs27(Box36, { flexDirection: "column", children: [
+    label && /* @__PURE__ */ jsx38(Text31, { children: label }),
+    /* @__PURE__ */ jsxs27(Box36, { gap: 1, children: [
+      /* @__PURE__ */ jsx38(Text31, { color: resolvedColor, children: bar }),
+      showPercent && /* @__PURE__ */ jsxs27(Text31, { color: theme.colors.mutedForeground, children: [
+        percent,
+        "%"
+      ] }),
+      total !== void 0 && /* @__PURE__ */ jsxs27(Text31, { color: theme.colors.mutedForeground, dimColor: true, children: [
+        value,
+        "/",
+        total
+      ] })
+    ] })
+  ] });
+}
+
+// packages/components/src/feedback/Alert.tsx
+import { Box as Box37, Text as Text32 } from "ink";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+var ICONS = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+function Alert({ variant = "info", title, children, icon }) {
+  const theme = useTheme();
+  const variantColor = (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.error;
+      case "warning":
+        return theme.colors.warning;
+      default:
+        return theme.colors.info;
+    }
+  })();
+  const resolvedIcon = icon ?? ICONS[variant];
+  return /* @__PURE__ */ jsxs28(
+    Box37,
+    {
+      borderStyle: "round",
+      borderColor: variantColor,
+      paddingX: 1,
+      paddingY: 0,
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ jsxs28(Box37, { gap: 1, children: [
+          /* @__PURE__ */ jsx39(Text32, { color: variantColor, bold: true, children: resolvedIcon }),
+          title && /* @__PURE__ */ jsx39(Text32, { bold: true, color: variantColor, children: title })
+        ] }),
+        children && /* @__PURE__ */ jsx39(Text32, { children })
+      ]
+    }
+  );
+}
+
+// packages/components/src/feedback/StatusMessage.tsx
+import { Box as Box38, Text as Text33 } from "ink";
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+var ICONS2 = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139",
+  pending: "\u25CB"
+};
+function StatusMessage({ variant = "info", children, icon }) {
+  const theme = useTheme();
+  const variantColor = (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.error;
+      case "warning":
+        return theme.colors.warning;
+      case "loading":
+        return theme.colors.primary;
+      case "pending":
+        return theme.colors.muted;
+      default:
+        return theme.colors.info;
+    }
+  })();
+  return /* @__PURE__ */ jsxs29(Box38, { gap: 1, flexDirection: "row", children: [
+    variant === "loading" ? /* @__PURE__ */ jsx40(Spinner, { style: "dots", color: variantColor }) : /* @__PURE__ */ jsx40(Text33, { color: variantColor, children: icon ?? ICONS2[variant] }),
+    /* @__PURE__ */ jsx40(Text33, { children })
+  ] });
+}
+
+// packages/components/src/feedback/Toast.tsx
+import { useState as useState17, useEffect } from "react";
+import { Box as Box39, Text as Text34 } from "ink";
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+var ICONS3 = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+var BAR_WIDTH = 20;
+var TICK_MS = 100;
+function Toast({ message, variant = "info", duration = 3e3, onDismiss, icon }) {
+  const theme = useTheme();
+  const [elapsed, setElapsed] = useState17(0);
+  const [dismissed, setDismissed] = useState17(false);
+  const variantColor = (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.error;
+      case "warning":
+        return theme.colors.warning;
+      default:
+        return theme.colors.info;
+    }
+  })();
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setDismissed(true);
+      onDismiss?.();
+    }, duration);
+    return () => clearTimeout(id);
+  }, [duration, onDismiss]);
+  useInterval(
+    () => {
+      setElapsed((e) => Math.min(e + TICK_MS, duration));
+    },
+    dismissed ? null : TICK_MS
+  );
+  if (dismissed) return null;
+  const remaining = Math.max(0, duration - elapsed);
+  const remainingSeconds = (remaining / 1e3).toFixed(1);
+  const progress = remaining / duration;
+  const filledChars = Math.round(progress * BAR_WIDTH);
+  const emptyChars = BAR_WIDTH - filledChars;
+  const bar = "\u2588".repeat(filledChars) + "\u2591".repeat(emptyChars);
+  const resolvedIcon = icon ?? ICONS3[variant];
+  return /* @__PURE__ */ jsxs30(
+    Box39,
+    {
+      borderStyle: "round",
+      borderColor: variantColor,
+      paddingX: 1,
+      paddingY: 0,
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ jsxs30(Box39, { gap: 1, children: [
+          /* @__PURE__ */ jsx41(Text34, { color: variantColor, bold: true, children: resolvedIcon }),
+          /* @__PURE__ */ jsx41(Text34, { children: message })
+        ] }),
+        /* @__PURE__ */ jsxs30(Box39, { gap: 1, children: [
+          /* @__PURE__ */ jsx41(Text34, { color: variantColor, children: bar }),
+          /* @__PURE__ */ jsxs30(Text34, { color: theme.colors.muted, children: [
+            remainingSeconds,
+            "s"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/components/src/feedback/Banner.tsx
+import { useState as useState18 } from "react";
+import { Box as Box40, Text as Text35, useInput as useInput2 } from "ink";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+var ICONS4 = {
+  info: "\u2139",
+  warning: "\u26A0",
+  error: "\u2717",
+  success: "\u2713",
+  neutral: "\xB7"
+};
+function Banner({
+  children,
+  variant = "info",
+  icon,
+  title,
+  dismissible = false,
+  onDismiss
+}) {
+  const theme = useTheme();
+  const [dismissed, setDismissed] = useState18(false);
+  const variantColor = (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.error;
+      case "warning":
+        return theme.colors.warning;
+      case "neutral":
+        return theme.colors.muted;
+      default:
+        return theme.colors.info;
+    }
+  })();
+  useInput2((_, key) => {
+    if (dismissible && key.escape) {
+      setDismissed(true);
+      onDismiss?.();
+    }
+  });
+  if (dismissed) return null;
+  const resolvedIcon = icon ?? ICONS4[variant];
+  return /* @__PURE__ */ jsx42(Box40, { flexDirection: "column", children: /* @__PURE__ */ jsxs31(Box40, { flexDirection: "row", gap: 1, children: [
+    /* @__PURE__ */ jsx42(Text35, { color: variantColor, children: "\u2503" }),
+    /* @__PURE__ */ jsxs31(Box40, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs31(Box40, { flexDirection: "row", gap: 1, children: [
+        /* @__PURE__ */ jsx42(Text35, { color: variantColor, children: resolvedIcon }),
+        title && /* @__PURE__ */ jsxs31(Text35, { bold: true, color: variantColor, children: [
+          title,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx42(Text35, { children })
+      ] }),
+      dismissible && /* @__PURE__ */ jsx42(Text35, { color: theme.colors.muted, dimColor: true, children: "press Esc to dismiss" })
+    ] })
+  ] }) });
+}
+
+// packages/components/src/feedback/Skeleton.tsx
+import { Box as Box41, Text as Text36 } from "ink";
+import { jsx as jsx43 } from "react/jsx-runtime";
+function Skeleton({ width = 20, height = 1, animated = true }) {
+  const theme = useTheme();
+  const frame = useAnimation(4);
+  const offset = animated ? frame % (width + 6) : -1;
+  const buildRow = () => {
+    let row = "";
+    for (let i = 0; i < width; i++) {
+      const inHighlight = i >= offset - 3 && i <= offset + 3;
+      row += inHighlight ? "\u2588" : "\u2591";
+    }
+    return row;
+  };
+  const rows = Array.from({ length: height }, (_, rowIndex) => {
+    const rowOffset = animated ? (frame + rowIndex * 2) % (width + 6) : -1;
+    let row = "";
+    for (let i = 0; i < width; i++) {
+      const inHighlight = i >= rowOffset - 3 && i <= rowOffset + 3;
+      row += inHighlight ? "\u2588" : "\u2591";
+    }
+    return row;
+  });
+  return /* @__PURE__ */ jsx43(Box41, { flexDirection: "column", children: rows.map((row, i) => /* @__PURE__ */ jsx43(Text36, { children: row.split("").map((char, j) => /* @__PURE__ */ jsx43(Text36, { color: char === "\u2588" ? theme.colors.mutedForeground : theme.colors.muted, children: char }, j)) }, i)) });
+}
+
+// packages/components/src/feedback/ProgressCircle.tsx
+import { Box as Box42, Text as Text37 } from "ink";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+var BRAILLE_CHARS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF", "\u25C9", "\u2B24", "\u25CF"];
+function getSmChar(value) {
+  const clamped = Math.max(0, Math.min(100, value));
+  const step = Math.floor(clamped / 100 * 7);
+  return BRAILLE_CHARS[step];
+}
+function ProgressCircle({
+  value,
+  size = "sm",
+  color,
+  label,
+  showPercent = false
+}) {
+  const theme = useTheme();
+  const clamped = Math.max(0, Math.min(100, value));
+  const resolvedColor = color ?? theme.colors.primary;
+  if (size === "sm") {
+    const char = getSmChar(clamped);
+    return /* @__PURE__ */ jsxs32(Box42, { flexDirection: "column", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsxs32(Box42, { flexDirection: "row", gap: 1, children: [
+        /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: char }),
+        showPercent && /* @__PURE__ */ jsxs32(Text37, { color: theme.colors.muted, children: [
+          Math.round(clamped),
+          "%"
+        ] })
+      ] }),
+      label && /* @__PURE__ */ jsx44(Text37, { color: theme.colors.muted, children: label })
+    ] });
+  }
+  const percentLabel = `${Math.round(clamped)}%`;
+  if (size === "md") {
+    return /* @__PURE__ */ jsxs32(Box42, { flexDirection: "column", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsxs32(Box42, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: "\u27E8" }),
+        /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, bold: true, children: percentLabel }),
+        /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: "\u27E9" })
+      ] }),
+      label && /* @__PURE__ */ jsx44(Text37, { color: theme.colors.muted, children: label })
+    ] });
+  }
+  const fillLevel = clamped / 100;
+  const topArc = " \u2584\u2588\u2584";
+  const midLeft = "\u2588";
+  const midRight = "\u2588";
+  const midInner = fillLevel >= 0.5 ? "\u2588\u2588\u2588" : "   ";
+  const botArc = " \u2580\u2588\u2580";
+  return /* @__PURE__ */ jsxs32(Box42, { flexDirection: "column", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: topArc }),
+    /* @__PURE__ */ jsxs32(Box42, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: midLeft }),
+      /* @__PURE__ */ jsx44(Text37, { color: fillLevel > 0 ? resolvedColor : theme.colors.muted, children: midInner }),
+      /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: midRight })
+    ] }),
+    /* @__PURE__ */ jsx44(Text37, { color: resolvedColor, children: botArc }),
+    showPercent && /* @__PURE__ */ jsx44(Text37, { color: theme.colors.muted, children: percentLabel }),
+    label && /* @__PURE__ */ jsx44(Text37, { color: theme.colors.muted, children: label })
+  ] });
+}
+
+// packages/components/src/navigation/Tabs.tsx
+import { useState as useState19 } from "react";
+import { Box as Box43, Text as Text38, useStdout } from "ink";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+function Tabs({
+  tabs,
+  defaultTab,
+  activeTab: controlledTab,
+  onTabChange,
+  borderColor
+}) {
+  const theme = useTheme();
+  const { stdout } = useStdout();
+  const [internalTab, setInternalTab] = useState19(defaultTab ?? tabs[0]?.key ?? "");
+  const activeKey = controlledTab ?? internalTab;
+  const activeIndex = tabs.findIndex((t) => t.key === activeKey);
+  const resolvedBorderColor = borderColor ?? theme.colors.border;
+  function switchTab(nextKey) {
+    if (!nextKey || nextKey === activeKey) return;
+    stdout.write("\x1B[2J\x1B[H");
+    onTabChange ? onTabChange(nextKey) : setInternalTab(nextKey);
+  }
+  useInput((input, key) => {
+    if (key.leftArrow || key.shift && key.tab) {
+      switchTab(tabs[Math.max(0, activeIndex - 1)]?.key);
+    } else if (key.rightArrow || key.tab) {
+      switchTab(tabs[Math.min(tabs.length - 1, activeIndex + 1)]?.key);
+    }
+  });
+  const activeTab = tabs.find((t) => t.key === activeKey);
+  return /* @__PURE__ */ jsxs33(Box43, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx45(Box43, { paddingX: 2, gap: 0, children: tabs.map((tab, idx) => {
+      const isActive = tab.key === activeKey;
+      return /* @__PURE__ */ jsxs33(Box43, { children: [
+        /* @__PURE__ */ jsx45(
+          Text38,
+          {
+            color: isActive ? theme.colors.primary : theme.colors.mutedForeground,
+            bold: isActive,
+            underline: isActive,
+            children: tab.label
+          }
+        ),
+        idx < tabs.length - 1 && /* @__PURE__ */ jsx45(Text38, { color: resolvedBorderColor, children: " \u2502 " })
+      ] }, tab.key);
+    }) }),
+    /* @__PURE__ */ jsx45(Box43, { borderStyle: "single", borderColor: resolvedBorderColor, paddingX: 1, paddingY: 0, children: activeTab?.content })
+  ] });
+}
+
+// packages/components/src/navigation/Breadcrumb.tsx
+import { Box as Box44, Text as Text39 } from "ink";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+function Breadcrumb({ items, separator = "\u203A", activeKey }) {
+  const theme = useTheme();
+  const activeIndex = activeKey !== void 0 ? items.findIndex((i) => i.key === activeKey) : items.length - 1;
+  useInput((_input, key) => {
+    if (key.leftArrow && activeIndex > 0) {
+      const prev = items[activeIndex - 1];
+      if (prev?.onSelect) prev.onSelect();
+    }
+  });
+  return /* @__PURE__ */ jsx46(Box44, { flexDirection: "row", alignItems: "center", children: items.map((item, idx) => {
+    const isActive = idx === activeIndex;
+    return /* @__PURE__ */ jsxs34(Box44, { flexDirection: "row", alignItems: "center", children: [
+      /* @__PURE__ */ jsx46(
+        Text39,
+        {
+          color: isActive ? theme.colors.primary : theme.colors.mutedForeground,
+          bold: isActive,
+          children: item.label
+        }
+      ),
+      idx < items.length - 1 && /* @__PURE__ */ jsxs34(Text39, { color: theme.colors.mutedForeground, children: [
+        " ",
+        separator,
+        " "
+      ] })
+    ] }, item.key);
+  }) });
+}
+
+// packages/components/src/navigation/Pagination.tsx
+import { useState as useState20 } from "react";
+import { Box as Box45, Text as Text40 } from "ink";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
+function buildPages(total, current, siblings) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  pages.push(1);
+  const leftSibling = Math.max(2, current - siblings);
+  const rightSibling = Math.min(total - 1, current + siblings);
+  if (leftSibling > 2) {
+    pages.push("...");
+  }
+  for (let i = leftSibling; i <= rightSibling; i++) {
+    pages.push(i);
+  }
+  if (rightSibling < total - 1) {
+    pages.push("...");
+  }
+  pages.push(total);
+  return pages;
+}
+function Pagination({
+  total,
+  current,
+  onChange,
+  showEdges = true,
+  siblings = 1
+}) {
+  const theme = useTheme();
+  const [internalPage, setInternalPage] = useState20(current);
+  const activePage = current ?? internalPage;
+  function goTo(page) {
+    const clamped = Math.min(Math.max(1, page), total);
+    if (clamped === activePage) return;
+    if (onChange) {
+      onChange(clamped);
+    } else {
+      setInternalPage(clamped);
+    }
+  }
+  useInput((_input, key) => {
+    if (key.leftArrow) goTo(activePage - 1);
+    if (key.rightArrow) goTo(activePage + 1);
+  });
+  const pages = buildPages(total, activePage, siblings);
+  return /* @__PURE__ */ jsxs35(Box45, { flexDirection: "row", alignItems: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx47(
+      Text40,
+      {
+        color: activePage === 1 ? theme.colors.mutedForeground : theme.colors.primary,
+        dimColor: activePage === 1,
+        children: "\u2039"
+      }
+    ),
+    showEdges && total > 7 ? null : null,
+    pages.map((p, idx) => {
+      if (p === "...") {
+        return /* @__PURE__ */ jsx47(Text40, { color: theme.colors.mutedForeground, children: "\u2026" }, `ellipsis-${idx}`);
+      }
+      const isActive = p === activePage;
+      return /* @__PURE__ */ jsx47(
+        Text40,
+        {
+          color: isActive ? theme.colors.primary : theme.colors.mutedForeground,
+          bold: isActive,
+          children: isActive ? `[${p}]` : `${p}`
+        },
+        p
+      );
+    }),
+    /* @__PURE__ */ jsx47(
+      Text40,
+      {
+        color: activePage === total ? theme.colors.mutedForeground : theme.colors.primary,
+        dimColor: activePage === total,
+        children: "\u203A"
+      }
+    )
+  ] });
+}
+
+// packages/components/src/navigation/Menu.tsx
+import { useState as useState21 } from "react";
+import { Box as Box46, Text as Text41 } from "ink";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+function Menu({ items, onSelect, title }) {
+  const theme = useTheme();
+  const [focusIndex, setFocusIndex] = useState21(0);
+  const [submenuStack, setSubmenuStack] = useState21([]);
+  const activeItems = submenuStack.length > 0 ? submenuStack[submenuStack.length - 1] : items;
+  const selectableIndices = activeItems.map((item, idx) => ({ item, idx })).filter(({ item }) => !item.separator && !item.disabled).map(({ idx }) => idx);
+  function moveFocus(direction) {
+    const currentPos = selectableIndices.indexOf(focusIndex);
+    const nextPos = currentPos + direction;
+    if (nextPos >= 0 && nextPos < selectableIndices.length) {
+      setFocusIndex(selectableIndices[nextPos]);
+    }
+  }
+  function openSubmenu(item) {
+    if (item.children && item.children.length > 0) {
+      setSubmenuStack((prev) => [...prev, item.children]);
+      setFocusIndex(0);
+    }
+  }
+  function closeSubmenu() {
+    if (submenuStack.length > 0) {
+      setSubmenuStack((prev) => prev.slice(0, -1));
+      setFocusIndex(0);
+    }
+  }
+  function activateItem(item) {
+    if (item.disabled || item.separator) return;
+    if (item.children && item.children.length > 0) {
+      openSubmenu(item);
+    } else {
+      onSelect?.(item);
+    }
+  }
+  useInput((_input, key) => {
+    if (key.upArrow) {
+      moveFocus(-1);
+    } else if (key.downArrow) {
+      moveFocus(1);
+    } else if (key.return) {
+      const item = activeItems[focusIndex];
+      if (item) activateItem(item);
+    } else if (key.rightArrow) {
+      const item = activeItems[focusIndex];
+      if (item?.children && item.children.length > 0) openSubmenu(item);
+    } else if (key.leftArrow) {
+      closeSubmenu();
+    } else if (key.escape) {
+      closeSubmenu();
+    }
+  });
+  const depth = submenuStack.length;
+  return /* @__PURE__ */ jsxs36(
+    Box46,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: theme.colors.border,
+      paddingX: 1,
+      paddingY: 0,
+      marginLeft: depth * 2,
+      children: [
+        title && /* @__PURE__ */ jsx48(Box46, { marginBottom: 1, children: /* @__PURE__ */ jsx48(Text41, { bold: true, color: theme.colors.primary, children: title }) }),
+        activeItems.map((item, idx) => {
+          if (item.separator) {
+            return /* @__PURE__ */ jsx48(Box46, { children: /* @__PURE__ */ jsx48(Text41, { color: theme.colors.mutedForeground, children: "\u2500".repeat(20) }) }, item.key);
+          }
+          const isFocused = idx === focusIndex;
+          return /* @__PURE__ */ jsxs36(Box46, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxs36(Box46, { flexDirection: "row", gap: 1, children: [
+              /* @__PURE__ */ jsx48(Text41, { color: isFocused ? theme.colors.primary : "transparent", children: isFocused ? "\u203A" : " " }),
+              item.icon && /* @__PURE__ */ jsx48(
+                Text41,
+                {
+                  color: item.disabled ? theme.colors.mutedForeground : theme.colors.foreground,
+                  children: item.icon
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Text41,
+                {
+                  color: item.disabled ? theme.colors.mutedForeground : isFocused ? theme.colors.primary : theme.colors.foreground,
+                  bold: isFocused && !item.disabled,
+                  dimColor: item.disabled,
+                  children: item.label
+                }
+              ),
+              item.children && item.children.length > 0 && /* @__PURE__ */ jsx48(Text41, { color: theme.colors.mutedForeground, children: "\u203A" })
+            ] }),
+            item.shortcut && /* @__PURE__ */ jsx48(Text41, { color: theme.colors.mutedForeground, children: item.shortcut })
+          ] }, item.key);
+        })
+      ]
+    }
+  );
+}
+
+// packages/components/src/navigation/Sidebar.tsx
+import { useState as useState22 } from "react";
+import { Box as Box47, Text as Text42 } from "ink";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+function flattenItems(items, expandedKeys, depth = 0) {
+  const result = [];
+  for (const item of items) {
+    result.push({ item, depth });
+    if (item.children && expandedKeys.has(item.key)) {
+      result.push(...flattenItems(item.children, expandedKeys, depth + 1));
+    }
+  }
+  return result;
+}
+function Sidebar({
+  items,
+  activeKey,
+  onSelect,
+  collapsed = false,
+  width = 20,
+  title
+}) {
+  const theme = useTheme();
+  const [focusIndex, setFocusIndex] = useState22(0);
+  const [expandedKeys, setExpandedKeys] = useState22(/* @__PURE__ */ new Set());
+  const effectiveWidth = collapsed ? 3 : width;
+  const flatItems = flattenItems(items, expandedKeys);
+  function toggleExpand(key) {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  useInput((_input, key) => {
+    if (key.upArrow) {
+      setFocusIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setFocusIndex((prev) => Math.min(flatItems.length - 1, prev + 1));
+    } else if (key.return) {
+      const entry = flatItems[focusIndex];
+      if (!entry) return;
+      if (entry.item.children && entry.item.children.length > 0) {
+        toggleExpand(entry.item.key);
+      } else {
+        onSelect?.(entry.item.key);
+      }
+    } else if (key.rightArrow) {
+      const entry = flatItems[focusIndex];
+      if (entry?.item.children && entry.item.children.length > 0) {
+        setExpandedKeys((prev) => /* @__PURE__ */ new Set([...prev, entry.item.key]));
+      }
+    } else if (key.leftArrow) {
+      const entry = flatItems[focusIndex];
+      if (entry?.item.children && expandedKeys.has(entry.item.key)) {
+        setExpandedKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(entry.item.key);
+          return next;
+        });
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs37(
+    Box47,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: theme.colors.border,
+      width: effectiveWidth,
+      paddingX: 0,
+      paddingY: 0,
+      children: [
+        title && !collapsed && /* @__PURE__ */ jsx49(Box47, { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx49(Text42, { bold: true, color: theme.colors.primary, children: title }) }),
+        flatItems.map(({ item, depth }, idx) => {
+          const isFocused = idx === focusIndex;
+          const isActive = item.key === activeKey;
+          const indent = collapsed ? 0 : depth * 2;
+          const hasChildren = item.children && item.children.length > 0;
+          const isExpanded = expandedKeys.has(item.key);
+          if (collapsed) {
+            return /* @__PURE__ */ jsx49(Box47, { paddingX: 0, children: /* @__PURE__ */ jsx49(
+              Text42,
+              {
+                color: isActive ? theme.colors.primary : isFocused ? theme.colors.foreground : theme.colors.mutedForeground,
+                bold: isActive,
+                children: item.icon ?? item.label.charAt(0)
+              }
+            ) }, item.key);
+          }
+          return /* @__PURE__ */ jsxs37(Box47, { flexDirection: "row", alignItems: "center", children: [
+            /* @__PURE__ */ jsx49(Text42, { color: isActive ? theme.colors.primary : "transparent", children: isActive ? "\u258C" : " " }),
+            indent > 0 && /* @__PURE__ */ jsx49(Text42, { children: " ".repeat(indent) }),
+            hasChildren ? /* @__PURE__ */ jsx49(Text42, { color: theme.colors.mutedForeground, children: isExpanded ? "\u25BE " : "\u25B8 " }) : /* @__PURE__ */ jsx49(Text42, { children: "  " }),
+            item.icon && /* @__PURE__ */ jsxs37(Text42, { color: isActive ? theme.colors.primary : theme.colors.mutedForeground, children: [
+              item.icon,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx49(
+              Text42,
+              {
+                color: isActive ? theme.colors.primary : isFocused ? theme.colors.foreground : theme.colors.mutedForeground,
+                bold: isActive || isFocused,
+                children: item.label
+              }
+            ),
+            item.badge !== void 0 && /* @__PURE__ */ jsx49(Box47, { marginLeft: 1, children: /* @__PURE__ */ jsx49(Text42, { color: theme.colors.primary, children: item.badge }) })
+          ] }, item.key);
+        })
+      ]
+    }
+  );
+}
+
+// packages/components/src/overlays/Modal.tsx
+import { Box as Box48, Text as Text43 } from "ink";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+function Modal({ open, onClose, title, width = 60, children }) {
+  const theme = useTheme();
+  useInput(
+    (input, key) => {
+      if (!open) return;
+      if (key.escape) onClose();
+    },
+    { isActive: open }
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs38(
+    Box48,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: theme.colors.primary,
+      width,
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        title && /* @__PURE__ */ jsx50(Box48, { marginBottom: 1, borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, children: /* @__PURE__ */ jsx50(Text43, { bold: true, color: theme.colors.primary, children: title }) }),
+        /* @__PURE__ */ jsx50(Box48, { flexDirection: "column", children }),
+        /* @__PURE__ */ jsx50(Box48, { marginTop: 1, children: /* @__PURE__ */ jsx50(Text43, { color: theme.colors.mutedForeground, dimColor: true, children: "Press Esc to close" }) })
+      ]
+    }
+  );
+}
+
+// packages/components/src/overlays/Dialog.tsx
+import { useState as useState23 } from "react";
+import { Box as Box49, Text as Text44 } from "ink";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+function Dialog({
+  title,
+  children,
+  confirmLabel = "OK",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  isOpen = false
+}) {
+  const theme = useTheme();
+  const [focusedButton, setFocusedButton] = useState23(0);
+  useInput(
+    (_input, key) => {
+      if (!isOpen) return;
+      if (key.tab || key.leftArrow || key.rightArrow) {
+        setFocusedButton((prev) => prev === 0 ? 1 : 0);
+      } else if (key.return) {
+        if (focusedButton === 1) {
+          onConfirm?.();
+        } else {
+          onCancel?.();
+        }
+      } else if (key.escape) {
+        onCancel?.();
+      }
+    },
+    { isActive: isOpen }
+  );
+  if (!isOpen) return null;
+  const confirmColor = variant === "danger" ? theme.colors.error ?? "red" : theme.colors.primary;
+  return /* @__PURE__ */ jsxs39(
+    Box49,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: variant === "danger" ? theme.colors.error ?? "red" : theme.colors.primary,
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        title && /* @__PURE__ */ jsx51(Box49, { marginBottom: 1, children: /* @__PURE__ */ jsx51(
+          Text44,
+          {
+            bold: true,
+            color: variant === "danger" ? theme.colors.error ?? "red" : theme.colors.primary,
+            children: title
+          }
+        ) }),
+        /* @__PURE__ */ jsx51(Box49, { marginBottom: 1, flexDirection: "column", children }),
+        /* @__PURE__ */ jsxs39(Box49, { flexDirection: "row", gap: 2, justifyContent: "flex-end", marginTop: 1, children: [
+          /* @__PURE__ */ jsxs39(
+            Text44,
+            {
+              color: focusedButton === 0 ? theme.colors.foreground : theme.colors.mutedForeground,
+              bold: focusedButton === 0,
+              inverse: focusedButton === 0,
+              children: [
+                " ",
+                cancelLabel,
+                " "
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs39(
+            Text44,
+            {
+              color: focusedButton === 1 ? confirmColor : theme.colors.mutedForeground,
+              bold: focusedButton === 1,
+              inverse: focusedButton === 1,
+              children: [
+                " ",
+                confirmLabel,
+                " "
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/components/src/overlays/Drawer.tsx
+import { Box as Box50, Text as Text45 } from "ink";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+function Drawer({
+  isOpen = false,
+  edge = "right",
+  title,
+  children,
+  onClose,
+  width = 40,
+  height = 10
+}) {
+  const theme = useTheme();
+  useInput(
+    (_input, key) => {
+      if (!isOpen) return;
+      if (key.escape) onClose?.();
+    },
+    { isActive: isOpen }
+  );
+  if (!isOpen) return null;
+  const isHorizontal = edge === "left" || edge === "right";
+  return /* @__PURE__ */ jsxs40(
+    Box50,
+    {
+      flexDirection: "column",
+      borderStyle: "single",
+      borderColor: theme.colors.border,
+      width: isHorizontal ? width : void 0,
+      height: !isHorizontal ? height : void 0,
+      paddingX: 1,
+      paddingY: 0,
+      children: [
+        /* @__PURE__ */ jsxs40(Box50, { justifyContent: "space-between", marginBottom: 1, children: [
+          title ? /* @__PURE__ */ jsx52(Text45, { bold: true, color: theme.colors.primary, children: title }) : /* @__PURE__ */ jsx52(Text45, { children: " " }),
+          /* @__PURE__ */ jsx52(Text45, { color: theme.colors.mutedForeground, dimColor: true, children: "Esc to close" })
+        ] }),
+        /* @__PURE__ */ jsx52(Box50, { flexDirection: "column", flexGrow: 1, children })
+      ]
+    }
+  );
+}
+
+// packages/components/src/overlays/Tooltip.tsx
+import { Box as Box51, Text as Text46 } from "ink";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+function Tooltip({ children, content, position = "top", isVisible = false }) {
+  const theme = useTheme();
+  const tooltipBox = /* @__PURE__ */ jsx53(Box51, { borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsx53(Text46, { color: theme.colors.foreground, children: content }) });
+  if (!isVisible) {
+    return /* @__PURE__ */ jsx53(Box51, { children });
+  }
+  if (position === "top") {
+    return /* @__PURE__ */ jsxs41(Box51, { flexDirection: "column", alignItems: "flex-start", children: [
+      tooltipBox,
+      /* @__PURE__ */ jsx53(Text46, { color: theme.colors.mutedForeground, children: "\u2193" }),
+      /* @__PURE__ */ jsx53(Box51, { children })
+    ] });
+  }
+  if (position === "bottom") {
+    return /* @__PURE__ */ jsxs41(Box51, { flexDirection: "column", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx53(Box51, { children }),
+      /* @__PURE__ */ jsx53(Text46, { color: theme.colors.mutedForeground, children: "\u2191" }),
+      tooltipBox
+    ] });
+  }
+  if (position === "left") {
+    return /* @__PURE__ */ jsxs41(Box51, { flexDirection: "row", alignItems: "center", gap: 1, children: [
+      tooltipBox,
+      /* @__PURE__ */ jsx53(Box51, { children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs41(Box51, { flexDirection: "row", alignItems: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx53(Box51, { children }),
+    tooltipBox
+  ] });
+}
+
+// packages/components/src/overlays/Popover.tsx
+import { Box as Box52, Text as Text47 } from "ink";
+import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+function Popover({ trigger, children, isOpen = false, onClose, title }) {
+  const theme = useTheme();
+  useInput(
+    (_input, key) => {
+      if (!isOpen) return;
+      if (key.escape) onClose?.();
+    },
+    { isActive: isOpen }
+  );
+  return /* @__PURE__ */ jsxs42(Box52, { flexDirection: "column", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx54(Box52, { children: trigger }),
+    isOpen && /* @__PURE__ */ jsxs42(
+      Box52,
+      {
+        flexDirection: "column",
+        borderStyle: "single",
+        borderColor: theme.colors.border,
+        paddingX: 1,
+        paddingY: 0,
+        marginTop: 0,
+        children: [
+          title && /* @__PURE__ */ jsx54(Box52, { marginBottom: 1, children: /* @__PURE__ */ jsx54(Text47, { bold: true, color: theme.colors.primary, children: title }) }),
+          /* @__PURE__ */ jsx54(Box52, { flexDirection: "column", children }),
+          /* @__PURE__ */ jsx54(Box52, { marginTop: 1, children: /* @__PURE__ */ jsx54(Text47, { color: theme.colors.mutedForeground, dimColor: true, children: "Press Esc to close" }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// packages/components/src/forms/Form.tsx
+import { useState as useState24, useCallback, createContext, useContext } from "react";
+import { Box as Box53, Text as Text48 } from "ink";
+import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+var FormContext = createContext({
+  values: {},
+  errors: {},
+  isDirty: false,
+  setFieldValue: () => {
+  },
+  setFieldError: () => {
+  }
+});
+function useFormContext() {
+  return useContext(FormContext);
+}
+function Form({ onSubmit, initialValues = {}, fields = [], children }) {
+  const theme = useTheme();
+  const [values, setValues] = useState24(initialValues);
+  const [errors, setErrors] = useState24({});
+  const [isDirty, setIsDirty] = useState24(false);
+  const setFieldValue = useCallback((name, value) => {
+    setValues((v) => ({ ...v, [name]: value }));
+    setIsDirty(true);
+  }, []);
+  const setFieldError = useCallback((name, error) => {
+    setErrors((e) => ({ ...e, [name]: error }));
+  }, []);
+  useInput((input, key) => {
+    if (key.ctrl && input === "s") {
+      const newErrors = {};
+      for (const field of fields) {
+        const err = field.validate ? field.validate(values[field.name]) : null;
+        if (err) newErrors[field.name] = err;
+      }
+      if (Object.keys(newErrors).length > 0) {
+        setErrors(newErrors);
+        return;
+      }
+      onSubmit(values);
+    }
+  });
+  return /* @__PURE__ */ jsx55(FormContext.Provider, { value: { values, errors, isDirty, setFieldValue, setFieldError }, children: /* @__PURE__ */ jsxs43(Box53, { flexDirection: "column", gap: 1, children: [
+    children,
+    /* @__PURE__ */ jsx55(Text48, { color: theme.colors.mutedForeground, dimColor: true, children: "Press Ctrl+S to submit" })
+  ] }) });
+}
+
+// packages/components/src/forms/FormField.tsx
+import { Box as Box54, Text as Text49 } from "ink";
+import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+function FormField({ label, children, error, hint, required }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs44(Box54, { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs44(Box54, { gap: 0, children: [
+      /* @__PURE__ */ jsx56(Text49, { bold: true, children: label }),
+      required && /* @__PURE__ */ jsx56(Text49, { color: theme.colors.error, children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx56(Box54, { children }),
+    hint && !error && /* @__PURE__ */ jsx56(Text49, { color: theme.colors.mutedForeground, dimColor: true, children: hint }),
+    error && /* @__PURE__ */ jsxs44(Text49, { color: theme.colors.error, children: [
+      "\u2717 ",
+      error
+    ] })
+  ] });
+}
+
+// packages/components/src/forms/Confirm.tsx
+import { useState as useState25 } from "react";
+import { Box as Box55, Text as Text50 } from "ink";
+import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+function Confirm({
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Yes",
+  cancelLabel = "No",
+  defaultValue = false,
+  variant = "default"
+}) {
+  const theme = useTheme();
+  const [selected, setSelected] = useState25(defaultValue);
+  useInput((input, key) => {
+    if (key.leftArrow || key.rightArrow) {
+      setSelected((s) => !s);
+    } else if (key.return) {
+      if (selected) {
+        onConfirm?.();
+      } else {
+        onCancel?.();
+      }
+    } else if (input === "y" || input === "Y") {
+      onConfirm?.();
+    } else if (input === "n" || input === "N") {
+      onCancel?.();
+    }
+  });
+  const yesColor = variant === "danger" ? theme.colors.error : theme.colors.primary;
+  return /* @__PURE__ */ jsxs45(Box55, { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ jsxs45(Text50, { children: [
+      /* @__PURE__ */ jsx57(Text50, { color: theme.colors.primary, children: "? " }),
+      message
+    ] }),
+    /* @__PURE__ */ jsxs45(Box55, { gap: 2, paddingLeft: 2, children: [
+      /* @__PURE__ */ jsx57(Box55, { gap: 1, children: selected ? /* @__PURE__ */ jsxs45(Text50, { color: yesColor, bold: true, children: [
+        "\u203A ",
+        confirmLabel
+      ] }) : /* @__PURE__ */ jsxs45(Text50, { color: theme.colors.mutedForeground, children: [
+        "  ",
+        confirmLabel
+      ] }) }),
+      /* @__PURE__ */ jsx57(Box55, { gap: 1, children: !selected ? /* @__PURE__ */ jsxs45(Text50, { bold: true, children: [
+        "\u203A ",
+        cancelLabel
+      ] }) : /* @__PURE__ */ jsxs45(Text50, { color: theme.colors.mutedForeground, children: [
+        "  ",
+        cancelLabel
+      ] }) })
+    ] })
+  ] });
+}
+
+// packages/components/src/forms/Wizard.tsx
+import { useState as useState26 } from "react";
+import { Box as Box56, Text as Text51 } from "ink";
+import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+function Wizard({ steps, onComplete, onCancel, showProgress = true }) {
+  const theme = useTheme();
+  const [currentStep, setCurrentStep] = useState26(0);
+  const [validationError, setValidationError] = useState26(null);
+  const isLast = currentStep === steps.length - 1;
+  const isFirst = currentStep === 0;
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    const goNext = key.tab && !key.shift || key.rightArrow;
+    const goBack = key.tab && key.shift || key.leftArrow;
+    if (goNext) {
+      const step = steps[currentStep];
+      if (step.validate) {
+        const result = step.validate();
+        if (result !== true) {
+          setValidationError(typeof result === "string" ? result : "Validation failed");
+          return;
+        }
+      }
+      setValidationError(null);
+      if (isLast) {
+        onComplete?.(steps.map((s) => s.key));
+      } else {
+        setCurrentStep((i) => i + 1);
+      }
+    } else if (goBack) {
+      setValidationError(null);
+      if (!isFirst) {
+        setCurrentStep((i) => i - 1);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs46(Box56, { flexDirection: "column", gap: 1, children: [
+    showProgress && /* @__PURE__ */ jsx58(Box56, { flexDirection: "row", alignItems: "center", children: steps.map((step, index) => {
+      const isCompleted = index < currentStep;
+      const isCurrent = index === currentStep;
+      let icon;
+      let iconColor;
+      if (isCompleted) {
+        icon = "\u25CF";
+        iconColor = theme.colors.success;
+      } else if (isCurrent) {
+        icon = "\u25C9";
+        iconColor = theme.colors.primary;
+      } else {
+        icon = "\u25CB";
+        iconColor = theme.colors.mutedForeground;
+      }
+      return /* @__PURE__ */ jsxs46(Box56, { flexDirection: "row", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs46(Text51, { color: iconColor, bold: isCurrent, children: [
+          icon,
+          " ",
+          step.title
+        ] }),
+        index < steps.length - 1 && /* @__PURE__ */ jsx58(Text51, { color: theme.colors.mutedForeground, children: " \u2500\u2500\u2500 " })
+      ] }, step.key);
+    }) }),
+    /* @__PURE__ */ jsx58(Box56, { flexDirection: "column", gap: 1, children: steps[currentStep]?.content }),
+    validationError && /* @__PURE__ */ jsxs46(Text51, { color: theme.colors.error, children: [
+      "\u2717 ",
+      validationError
+    ] }),
+    /* @__PURE__ */ jsxs46(Box56, { flexDirection: "row", gap: 2, children: [
+      !isFirst && /* @__PURE__ */ jsx58(Text51, { color: theme.colors.mutedForeground, children: "[\u2190 Back]" }),
+      isLast ? /* @__PURE__ */ jsx58(Text51, { color: theme.colors.primary, bold: true, children: "[Finish]" }) : /* @__PURE__ */ jsx58(Text51, { color: theme.colors.primary, bold: true, children: "[Next \u2192]" })
+    ] })
+  ] });
+}
+
+// packages/components/src/utility/Panel.tsx
+import { Box as Box57, Text as Text52 } from "ink";
+import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+function Panel({
+  title,
+  titleColor,
+  borderColor,
+  borderStyle,
+  width,
+  height,
+  paddingX = 1,
+  paddingY = 0,
+  children
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs47(
+    Box57,
+    {
+      flexDirection: "column",
+      borderStyle: borderStyle ?? theme.border.style,
+      borderColor: borderColor ?? theme.colors.border,
+      width,
+      height,
+      children: [
+        title && /* @__PURE__ */ jsx59(
+          Box57,
+          {
+            paddingX,
+            borderStyle: "single",
+            borderColor: borderColor ?? theme.colors.border,
+            children: /* @__PURE__ */ jsx59(Text52, { bold: true, color: titleColor ?? theme.colors.primary, children: title })
+          }
+        ),
+        /* @__PURE__ */ jsx59(Box57, { flexDirection: "column", paddingX, paddingY, children })
+      ]
+    }
+  );
+}
+
+// packages/components/src/utility/Toggle.tsx
+import { useState as useState27 } from "react";
+import { Box as Box58, Text as Text53 } from "ink";
+import { jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
+function Toggle({
+  checked: controlledChecked,
+  onChange,
+  label,
+  onLabel = "ON",
+  offLabel = "OFF",
+  id,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id });
+  const [internalChecked, setInternalChecked] = useState27(false);
+  const checked = controlledChecked ?? internalChecked;
+  useInput((input) => {
+    if (!isFocused || disabled) return;
+    if (input === " ") {
+      const next = !checked;
+      onChange ? onChange(next) : setInternalChecked(next);
+    }
+  });
+  const trackColor = checked ? theme.colors.success : theme.colors.mutedForeground;
+  const focusColor = isFocused ? theme.colors.focusRing : trackColor;
+  const stateLabel = checked ? onLabel : offLabel;
+  return /* @__PURE__ */ jsxs48(Box58, { gap: 1, alignItems: "center", children: [
+    /* @__PURE__ */ jsx60(Box58, { borderStyle: "round", borderColor: focusColor, paddingX: 1, children: /* @__PURE__ */ jsxs48(Text53, { color: focusColor, bold: checked, children: [
+      checked ? "\u25CF" : "\u25CB",
+      " ",
+      stateLabel
+    ] }) }),
+    label && /* @__PURE__ */ jsx60(Text53, { color: disabled ? theme.colors.mutedForeground : theme.colors.foreground, children: label })
+  ] });
+}
+
+export {
+  Box,
+  Stack,
+  Grid,
+  ScrollView,
+  Divider,
+  Spacer,
+  Columns,
+  Center,
+  AspectRatio,
+  Text3 as Text,
+  Badge,
+  Heading,
+  Code,
+  Link,
+  Tag,
+  gradientText,
+  Gradient,
+  BigText,
+  Digits,
+  TextInput,
+  TextArea,
+  PasswordInput,
+  NumberInput,
+  SearchInput,
+  Checkbox,
+  Select,
+  MultiSelect,
+  RadioGroup,
+  CheckboxGroup,
+  TagInput,
+  List,
+  Table,
+  Card,
+  KeyValue,
+  Definition,
+  VirtualList,
+  Tree,
+  Spinner,
+  ProgressBar,
+  Alert,
+  StatusMessage,
+  Toast,
+  Banner,
+  Skeleton,
+  ProgressCircle,
+  Tabs,
+  Breadcrumb,
+  Pagination,
+  Menu,
+  Sidebar,
+  Modal,
+  Dialog,
+  Drawer,
+  Tooltip,
+  Popover,
+  useFormContext,
+  Form,
+  FormField,
+  Confirm,
+  Wizard,
+  Panel,
+  Toggle
+};
+//# sourceMappingURL=chunk-B2VO7M2O.js.map