@gridland/demo 0.2.18 → 0.2.19

package/dist/run.js

@@ -1,32 +1,2135 @@
-import {
-  ChatPanel,
-  GRADIENTS,
-  Gradient,
-  LandingApp,
-  LinkDemo,
-  Message,
-  Modal,
-  MultiSelect,
-  PromptInput,
-  SelectInput,
-  SpinnerPicker,
-  StatusBar,
-  TabBar,
-  Table,
-  TextInput,
-  Timeline,
-  textStyle
-} from "./chunk-R3ENBVV6.js";
-
 // src/run.tsx
 import { createCliRenderer } from "@opentui/core";
 import { createRoot, useKeyboard as useKeyboard2 } from "@opentui/react";
 
 // ../ui/scripts/demo-apps.tsx
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState as useState11, useCallback as useCallback3, useRef as useRef8, useEffect as useEffect5 } from "react";
 import { useKeyboard } from "@opentui/react";
+
+// ../ui/components/theme/themes.ts
+var darkTheme = {
+  primary: "#FF71CE",
+  accent: "#01CDFE",
+  secondary: "#B967FF",
+  muted: "#A69CBD",
+  placeholder: "#CEC7DE",
+  border: "#B967FF",
+  foreground: "#F0E6FF",
+  background: "#0D0B10",
+  success: "#05FFA1",
+  error: "#FF6B6B",
+  warning: "#FFC164"
+};
+
+// ../ui/components/theme/theme-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(darkTheme);
+function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// ../ui/components/link/link.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var UNDERLINE = 1 << 3;
+var UNDERLINE_DASHED = 1 << 4;
+var UNDERLINE_DOTTED = 1 << 6;
+function Link({ children, url, underline = "solid", color }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.accent;
+  let attributes = 0;
+  if (underline === "solid") {
+    attributes = UNDERLINE;
+  } else if (underline === "dashed") {
+    attributes = UNDERLINE | UNDERLINE_DASHED;
+  } else if (underline === "dotted") {
+    attributes = UNDERLINE | UNDERLINE_DOTTED;
+  }
+  return /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("a", { href: url, style: { attributes, fg: resolvedColor }, children }) });
+}
+
+// ../ui/components/link/link-demo.tsx
+import { useState } from "react";
+
+// ../ui/components/text-style.ts
+var BOLD = 1 << 0;
+var DIM = 1 << 1;
+var ITALIC = 1 << 2;
+var UNDERLINE2 = 1 << 3;
+var INVERSE = 1 << 5;
+function textStyle(opts) {
+  let attributes = 0;
+  if (opts.bold) attributes |= BOLD;
+  if (opts.dim) attributes |= DIM;
+  if (opts.italic) attributes |= ITALIC;
+  if (opts.underline) attributes |= UNDERLINE2;
+  if (opts.inverse) attributes |= INVERSE;
+  const result = {};
+  if (opts.fg) result.fg = opts.fg;
+  if (opts.bg) result.bg = opts.bg;
+  if (attributes) result.attributes = attributes;
+  return result;
+}
+
+// ../ui/components/status-bar/status-bar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StatusBar({ items, extra }) {
+  const theme = useTheme();
+  const parts = [];
+  if (extra !== void 0) {
+    parts.push(
+      /* @__PURE__ */ jsx3("span", { children: extra }, "extra")
+    );
+    parts.push(
+      /* @__PURE__ */ jsx3("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: "  \u2502  " }, "pipe")
+    );
+  }
+  items.forEach((item, i) => {
+    if (i > 0) {
+      parts.push(/* @__PURE__ */ jsx3("span", { children: " " }, `gap-${i}`));
+    }
+    parts.push(
+      /* @__PURE__ */ jsx3("span", { style: textStyle({ bold: true, fg: theme.background, bg: theme.muted }), children: ` ${item.key} ` }, `key-${i}`)
+    );
+    parts.push(
+      /* @__PURE__ */ jsx3("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: ` ${item.label}` }, `label-${i}`)
+    );
+  });
+  if (parts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3("text", { children: parts });
+}
+
+// ../ui/components/provider/provider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var KeyboardContext = createContext2(null);
+function useKeyboardContext(propOverride) {
+  const fromContext = useContext2(KeyboardContext);
+  return propOverride ?? fromContext ?? void 0;
+}
+
+// ../ui/components/link/link-demo.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var MODES = ["solid", "dashed", "dotted", "none"];
+function LinkDemo({
+  url = "https://opentui.com",
+  label = "Visit opentui.com",
+  useKeyboard: useKeyboardProp
+}) {
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const [modeIndex, setModeIndex] = useState(0);
+  const mode = MODES[modeIndex];
+  useKeyboard3?.((event) => {
+    if (event.name === "right") {
+      setModeIndex((i) => (i + 1) % MODES.length);
+    } else if (event.name === "left") {
+      setModeIndex((i) => (i - 1 + MODES.length) % MODES.length);
+    }
+  });
+  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx5(Link, { url, underline: mode, children: label }),
+    /* @__PURE__ */ jsx5(
+      StatusBar,
+      {
+        extra: /* @__PURE__ */ jsx5("span", { style: textStyle({ bold: true }), children: mode.padEnd(6) }),
+        items: [
+          { key: "\u2190\u2192", label: "underline style" }
+        ]
+      }
+    )
+  ] });
+}
+
+// ../ui/components/ascii/ascii.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../ui/components/spinner/spinner.tsx
+import { useEffect, useState as useState2 } from "react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANTS = {
+  dots: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 83 },
+  pulse: { frames: ["\xB7", "\u2219", "\u25CF", "\u2219", "\xB7", "\xB7", "\xB7"], interval: 180 },
+  meter: { frames: ["\u25B1\u25B1\u25B1", "\u25B0\u25B1\u25B1", "\u25B0\u25B0\u25B1", "\u25B0\u25B0\u25B0", "\u25B0\u25B0\u25B1", "\u25B0\u25B1\u25B1", "\u25B1\u25B1\u25B1"], interval: 143 },
+  bloom: { frames: ["\xB7", "\u2726", "\u2727", "\u2739", "\u273A", "\u274B", "\u2738", "\u2735", "\u2738", "\u274B", "\u273A", "\u2739", "\u2727", "\u2726", "\xB7", "\xB7"], interval: 100 },
+  ellipsis: { frames: ["   ", ".  ", ".. ", "..."], interval: 333 }
+};
+var VARIANT_NAMES = Object.keys(VARIANTS);
+function Spinner({ variant = "dots", text, color }) {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.accent;
+  const { frames, interval } = VARIANTS[variant];
+  const [frame, setFrame] = useState2(0);
+  useEffect(() => {
+    setFrame(0);
+    const timer = setInterval(() => {
+      setFrame((prev) => (prev + 1) % frames.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [variant]);
+  return /* @__PURE__ */ jsxs2("text", { children: [
+    /* @__PURE__ */ jsx7("span", { style: { fg: resolvedColor }, children: frames[frame] }),
+    text ? /* @__PURE__ */ jsxs2("span", { style: { fg: theme.foreground }, children: [
+      " ",
+      text
+    ] }) : null
+  ] });
+}
+
+// ../ui/components/spinner/spinner-showcase.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function SpinnerPicker({ useKeyboard: useKeyboardProp }) {
+  const theme = useTheme();
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const [selected, setSelected] = useState3(0);
+  useKeyboard3?.((event) => {
+    if (event.name === "left") {
+      setSelected((s) => s > 0 ? s - 1 : VARIANT_NAMES.length - 1);
+    } else if (event.name === "right") {
+      setSelected((s) => s < VARIANT_NAMES.length - 1 ? s + 1 : 0);
+    }
+  });
+  const selectedName = VARIANT_NAMES[selected];
+  return /* @__PURE__ */ jsxs3("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx8("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx8(Spinner, { variant: selectedName, color: theme.accent }) }),
+    /* @__PURE__ */ jsx8(
+      StatusBar,
+      {
+        items: [{ key: "\u2190\u2192", label: "change spinner type" }],
+        extra: /* @__PURE__ */ jsx8("span", { style: textStyle({ fg: theme.accent, bold: true }), children: selectedName.padEnd(8) })
+      }
+    )
+  ] });
+}
+
+// ../ui/components/text-input/text-input.tsx
+import { useCallback, useRef, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function TextInput({ label, description, error, required = false, disabled = false, value: controlledValue, onChange, onSubmit, placeholder, prompt, focus = true, maxLength }) {
+  const theme = useTheme();
+  const [internalValue, setInternalValue] = useState4("");
+  const isControlled = controlledValue !== void 0;
+  const controlledRef = useRef(isControlled);
+  if (controlledRef.current !== isControlled) {
+    console.warn("TextInput: switching between controlled and uncontrolled is not supported.");
+    controlledRef.current = isControlled;
+  }
+  const current = isControlled ? controlledValue : internalValue;
+  const isFocused = focus && !disabled;
+  const handleInput = useCallback(
+    (v) => {
+      if (!isControlled) setInternalValue(v);
+      onChange?.(v);
+    },
+    [isControlled, onChange]
+  );
+  const handleSubmit = useCallback(
+    (v) => {
+      onSubmit?.(v);
+      if (!isControlled) setInternalValue("");
+    },
+    [isControlled, onSubmit]
+  );
+  const empty = !current;
+  const showLabel = label != null;
+  const message = error ?? description;
+  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", children: [
+    showLabel && /* @__PURE__ */ jsxs4("text", { children: [
+      /* @__PURE__ */ jsxs4("span", { style: textStyle({ fg: error ? theme.error : isFocused ? theme.primary : disabled ? theme.muted : theme.foreground, bold: !disabled, dim: disabled }), children: [
+        isFocused ? "\u25B8 " : "  ",
+        label
+      ] }),
+      required && /* @__PURE__ */ jsx9("span", { style: textStyle({ fg: theme.error }), children: " *" }),
+      current && maxLength != null && /* @__PURE__ */ jsxs4("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+        " ",
+        current.length,
+        "/",
+        maxLength
+      ] }),
+      message != null && /* @__PURE__ */ jsxs4("span", { style: textStyle({ fg: error ? theme.error : theme.muted, dim: !error }), children: [
+        " | ",
+        message
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("box", { flexDirection: "row", marginLeft: showLabel ? 2 : 0, children: [
+      prompt != null && /* @__PURE__ */ jsx9("text", { style: { fg: isFocused ? theme.primary : theme.muted }, children: prompt }),
+      isFocused ? /* @__PURE__ */ jsx9(
+        "input",
+        {
+          value: current,
+          placeholder,
+          maxLength,
+          focused: true,
+          onInput: handleInput,
+          onSubmit: handleSubmit,
+          cursorColor: theme.muted,
+          cursorStyle: { style: "line", blinking: empty },
+          placeholderColor: theme.placeholder,
+          textColor: theme.foreground
+        }
+      ) : /* @__PURE__ */ jsx9("text", { style: { fg: empty ? theme.placeholder : disabled ? theme.muted : theme.foreground, dim: disabled }, children: empty ? placeholder : current })
+    ] })
+  ] });
+}
+
+// ../ui/components/select-input/select-input.tsx
+import { useReducer, useMemo, useRef as useRef2 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function reducer(state, action) {
+  switch (action.type) {
+    case "MOVE": {
+      let next = state.cursor + action.direction;
+      if (next < 0) next = action.max - 1;
+      if (next >= action.max) next = 0;
+      return { ...state, cursor: next };
+    }
+    case "SUBMIT":
+      return { ...state, submitted: true };
+    default:
+      return state;
+  }
+}
+var VISIBLE = 12;
+var BAR = "\u2502";
+var RADIO = "\u25CB";
+var CURSOR = "\u25B8";
+var SEPARATOR = "\u2500";
+function SelectInput({
+  items = [],
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  disabled = false,
+  invalid = false,
+  required = false,
+  placeholder,
+  title = "Select",
+  submittedStatus = "submitted",
+  limit,
+  highlightColor,
+  onSubmit,
+  useKeyboard: useKeyboardProp
+}) {
+  const theme = useTheme();
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const resolvedHighlight = highlightColor ?? theme.primary;
+  const isControlled = controlledValue !== void 0;
+  const controlledRef = useRef2(isControlled);
+  if (controlledRef.current !== isControlled) {
+    console.warn("SelectInput: switching between controlled and uncontrolled is not supported.");
+  }
+  const initialIndex = items.findIndex((i) => i.value === (isControlled ? controlledValue : defaultValue));
+  const [state, dispatch] = useReducer(reducer, {
+    cursor: Math.max(0, initialIndex),
+    submitted: false
+  });
+  const { flatRows, selectableItems } = useMemo(() => {
+    const rows = [];
+    const selectable = [];
+    let index = 0;
+    const grouped = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const group = item.group ?? "";
+      const list = grouped.get(group) ?? [];
+      list.push(item);
+      grouped.set(group, list);
+    }
+    let first = true;
+    for (const [group, groupItems] of grouped) {
+      if (!first) rows.push({ type: "separator" });
+      first = false;
+      if (group) {
+        rows.push({ type: "group", label: group });
+      }
+      for (const item of groupItems) {
+        rows.push({ type: "item", item, index });
+        selectable.push({ item, index });
+        index++;
+      }
+    }
+    return { flatRows: rows, selectableItems: selectable };
+  }, [items]);
+  const visibleCount = limit ?? VISIBLE;
+  const cursorRowIndex = flatRows.findIndex((r) => r.type === "item" && r.index === state.cursor);
+  const scrollOffset = Math.max(0, Math.min(cursorRowIndex - Math.floor(visibleCount / 2), flatRows.length - visibleCount));
+  const visibleRows = flatRows.slice(scrollOffset, scrollOffset + visibleCount);
+  const diamondColor = invalid ? theme.error : disabled ? theme.muted : theme.accent;
+  useKeyboard3?.((event) => {
+    if (state.submitted || disabled) return;
+    if (event.name === "up" || event.name === "k") {
+      const direction = -1;
+      let next = state.cursor + direction;
+      if (next < 0) next = selectableItems.length - 1;
+      dispatch({ type: "MOVE", direction, max: selectableItems.length });
+      const nextItem = selectableItems[next];
+      if (nextItem && !nextItem.item.disabled) {
+        onChange?.(nextItem.item.value);
+      }
+    } else if (event.name === "down" || event.name === "j") {
+      const direction = 1;
+      let next = state.cursor + direction;
+      if (next >= selectableItems.length) next = 0;
+      dispatch({ type: "MOVE", direction, max: selectableItems.length });
+      const nextItem = selectableItems[next];
+      if (nextItem && !nextItem.item.disabled) {
+        onChange?.(nextItem.item.value);
+      }
+    } else if (event.name === "return") {
+      const current = selectableItems[state.cursor];
+      if (current && !current.item.disabled) {
+        dispatch({ type: "SUBMIT" });
+        onSubmit?.(isControlled ? controlledValue : current.item.value);
+      }
+    }
+  });
+  if (state.submitted) {
+    const selectedItem = isControlled ? items.find((i) => i.value === controlledValue) : selectableItems[state.cursor]?.item;
+    return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs5("text", { children: [
+        /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
+        /* @__PURE__ */ jsx10("span", { style: textStyle({ bold: true, fg: theme.foreground }), children: title })
+      ] }),
+      selectedItem && /* @__PURE__ */ jsxs5("text", { children: [
+        /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.success }), children: [
+          BAR,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx10("span", { children: "  " }),
+        /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.success }), children: "\u25CF " }),
+        /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.foreground }), children: selectedItem.label })
+      ] }),
+      /* @__PURE__ */ jsx10("text", { children: " " }),
+      /* @__PURE__ */ jsx10("text", { children: /* @__PURE__ */ jsx10("span", { style: textStyle({ dim: true, fg: theme.muted }), children: submittedStatus }) })
+    ] });
+  }
+  const hasItems = selectableItems.length > 0;
+  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5("text", { children: [
+      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: diamondColor, dim: disabled }), children: "\u25C6 " }),
+      /* @__PURE__ */ jsx10("span", { style: textStyle({ bold: true, dim: disabled, fg: theme.foreground }), children: title }),
+      required && /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.error }), children: " *" })
+    ] }),
+    invalid && /* @__PURE__ */ jsxs5("text", { children: [
+      /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+        BAR,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.error }), children: "  Please select an option" })
+    ] }),
+    !hasItems && placeholder && /* @__PURE__ */ jsxs5("text", { children: [
+      /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+        BAR,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+        "  ",
+        placeholder
+      ] })
+    ] }),
+    visibleRows.map((row, i) => {
+      if (row.type === "separator") {
+        return /* @__PURE__ */ jsxs5("text", { children: [
+          /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+            BAR,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+            "  ",
+            SEPARATOR.repeat(20)
+          ] })
+        ] }, `sep-${i}`);
+      }
+      if (row.type === "group") {
+        return /* @__PURE__ */ jsxs5("text", { children: [
+          /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+            BAR,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx10("span", { style: textStyle({ bold: true, fg: theme.muted }), children: ` ${row.label}` })
+        ] }, `group-${row.label}`);
+      }
+      const { item, index: itemIndex } = row;
+      const isHighlighted = !disabled && itemIndex === state.cursor;
+      const isItemDisabled = disabled || !!item.disabled;
+      const itemColor = isItemDisabled ? theme.muted : isHighlighted ? resolvedHighlight : theme.foreground;
+      return /* @__PURE__ */ jsxs5("text", { children: [
+        /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
+          BAR,
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: isHighlighted ? resolvedHighlight : void 0 }), children: [
+          isHighlighted ? CURSOR : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted, dim: isItemDisabled }), children: [
+          RADIO,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: itemColor, dim: isItemDisabled }), children: item.label })
+      ] }, item.key ?? String(item.value));
+    })
+  ] });
+}
+
+// ../ui/components/multi-select/multi-select.tsx
+import { useReducer as useReducer2, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function reducer2(state, action) {
+  switch (action.type) {
+    case "MOVE": {
+      let next = state.cursor + action.direction;
+      if (next < 0) next = action.max - 1;
+      if (next >= action.max) next = 0;
+      return { ...state, cursor: next };
+    }
+    case "SET_SELECTED":
+      return { ...state, selected: new Set(action.values) };
+    case "SUBMIT":
+      return { ...state, submitted: true };
+    default:
+      return state;
+  }
+}
+var VISIBLE2 = 12;
+var BAR2 = "\u2502";
+var CHECKED = "\u25CF";
+var UNCHECKED = "\u25CB";
+var CURSOR2 = "\u25B8";
+var SEPARATOR2 = "\u2500";
+function MultiSelect({
+  items = [],
+  defaultSelected = [],
+  selected: controlledSelected,
+  onChange,
+  disabled = false,
+  invalid = false,
+  required = false,
+  placeholder,
+  maxCount,
+  title = "Select",
+  submittedStatus = "submitted",
+  limit,
+  enableSelectAll = true,
+  enableClear = true,
+  highlightColor,
+  checkboxColor,
+  allowEmpty = false,
+  onSubmit,
+  useKeyboard: useKeyboardProp
+}) {
+  const theme = useTheme();
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const resolvedHighlight = highlightColor ?? theme.primary;
+  const resolvedCheckbox = checkboxColor ?? theme.accent;
+  const isControlled = controlledSelected !== void 0;
+  const controlledRef = useRef3(isControlled);
+  if (controlledRef.current !== isControlled) {
+    console.warn("MultiSelect: switching between controlled and uncontrolled is not supported.");
+  }
+  const [state, dispatch] = useReducer2(reducer2, {
+    cursor: 0,
+    selected: new Set(isControlled ? controlledSelected : defaultSelected),
+    submitted: false
+  });
+  const cursorRef = useRef3(0);
+  const currentSelected = isControlled ? new Set(controlledSelected) : state.selected;
+  const { flatRows, selectableItems } = useMemo2(() => {
+    const rows = [];
+    const selectable = [];
+    let index = 0;
+    const grouped = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const group = item.group ?? "";
+      const list = grouped.get(group) ?? [];
+      list.push(item);
+      grouped.set(group, list);
+    }
+    let first = true;
+    for (const [group, groupItems] of grouped) {
+      if (!first) rows.push({ type: "separator" });
+      first = false;
+      if (group) {
+        rows.push({ type: "group", label: group });
+      }
+      for (const item of groupItems) {
+        rows.push({ type: "item", item, index });
+        selectable.push({ item, index });
+        index++;
+      }
+    }
+    return { flatRows: rows, selectableItems: selectable };
+  }, [items]);
+  const hasSubmitRow = allowEmpty || currentSelected.size > 0;
+  const totalPositions = selectableItems.length + (hasSubmitRow ? 1 : 0);
+  const isOnSubmit = hasSubmitRow && state.cursor === selectableItems.length;
+  const visibleCount = limit ?? VISIBLE2;
+  const cursorRowIndex = flatRows.findIndex((r) => r.type === "item" && r.index === state.cursor);
+  const scrollOffset = Math.max(0, Math.min(cursorRowIndex - Math.floor(visibleCount / 2), flatRows.length - visibleCount));
+  const visibleRows = flatRows.slice(scrollOffset, scrollOffset + visibleCount);
+  const setSelected = (values) => {
+    if (isControlled) {
+      onChange?.(values);
+    } else {
+      dispatch({ type: "SET_SELECTED", values });
+    }
+  };
+  const diamondColor = invalid ? theme.error : disabled ? theme.muted : theme.accent;
+  useKeyboard3?.((event) => {
+    if (state.submitted || disabled) return;
+    const move = (direction) => {
+      let next = cursorRef.current + direction;
+      if (next < 0) next = totalPositions - 1;
+      if (next >= totalPositions) next = 0;
+      cursorRef.current = next;
+      dispatch({ type: "MOVE", direction, max: totalPositions });
+    };
+    if (event.name === "up" || event.name === "k") {
+      move(-1);
+    } else if (event.name === "down" || event.name === "j") {
+      move(1);
+    } else if (event.name === "return") {
+      const onSubmitRow = hasSubmitRow && cursorRef.current === selectableItems.length;
+      if (onSubmitRow) {
+        dispatch({ type: "SUBMIT" });
+        onSubmit?.(Array.from(currentSelected));
+      } else {
+        const current = selectableItems[cursorRef.current];
+        if (current && !current.item.disabled) {
+          const isDeselecting = currentSelected.has(current.item.value);
+          if (!isDeselecting && maxCount !== void 0 && currentSelected.size >= maxCount) return;
+          const next = new Set(currentSelected);
+          if (isDeselecting) next.delete(current.item.value);
+          else next.add(current.item.value);
+          setSelected(Array.from(next));
+        }
+      }
+    } else if (event.name === "a" && enableSelectAll) {
+      const enabledValues = items.filter((i) => !i.disabled).map((i) => i.value);
+      setSelected(maxCount !== void 0 ? enabledValues.slice(0, maxCount) : enabledValues);
+    } else if (event.name === "x" && enableClear) {
+      setSelected([]);
+    }
+  });
+  if (state.submitted) {
+    const selectedItems = items.filter((i) => currentSelected.has(i.value));
+    return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs6("text", { children: [
+        /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
+        /* @__PURE__ */ jsx11("span", { style: textStyle({ bold: true, fg: theme.foreground }), children: title })
+      ] }),
+      selectedItems.map((item) => /* @__PURE__ */ jsxs6("text", { children: [
+        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.success }), children: [
+          BAR2,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx11("span", { children: "  " }),
+        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.success }), children: [
+          CHECKED,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: theme.foreground }), children: item.label })
+      ] }, item.key ?? String(item.value))),
+      /* @__PURE__ */ jsx11("text", { children: " " }),
+      /* @__PURE__ */ jsx11("text", { children: /* @__PURE__ */ jsxs6("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+        selectedItems.length,
+        " selected \u2014 ",
+        submittedStatus
+      ] }) })
+    ] });
+  }
+  const hasItems = selectableItems.length > 0;
+  return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs6("text", { children: [
+      /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: diamondColor, dim: disabled }), children: "\u25C6 " }),
+      /* @__PURE__ */ jsx11("span", { style: textStyle({ bold: true, dim: disabled, fg: theme.foreground }), children: title }),
+      required && /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: theme.error }), children: " *" }),
+      maxCount !== void 0 && /* @__PURE__ */ jsx11("span", { style: textStyle({ dim: true, fg: theme.muted }), children: ` (${currentSelected.size}/${maxCount})` })
+    ] }),
+    invalid && /* @__PURE__ */ jsxs6("text", { children: [
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+        BAR2,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: theme.error }), children: "  Please select at least one option" })
+    ] }),
+    !hasItems && placeholder && /* @__PURE__ */ jsxs6("text", { children: [
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+        BAR2,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+        "  ",
+        placeholder
+      ] })
+    ] }),
+    visibleRows.map((row, i) => {
+      if (row.type === "separator") {
+        return /* @__PURE__ */ jsxs6("text", { children: [
+          /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+            BAR2,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+            "  ",
+            SEPARATOR2.repeat(20)
+          ] })
+        ] }, `sep-${i}`);
+      }
+      if (row.type === "group") {
+        return /* @__PURE__ */ jsxs6("text", { children: [
+          /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+            BAR2,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx11("span", { style: textStyle({ bold: true, fg: theme.muted }), children: ` ${row.label}` })
+        ] }, `group-${row.label}`);
+      }
+      const { item, index: itemIndex } = row;
+      const isHighlighted = !disabled && itemIndex === state.cursor;
+      const isSelected = currentSelected.has(item.value);
+      const isItemDisabled = disabled || !!item.disabled;
+      const itemColor = isItemDisabled ? theme.muted : isHighlighted ? resolvedHighlight : isSelected ? resolvedCheckbox : theme.foreground;
+      return /* @__PURE__ */ jsxs6("text", { children: [
+        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+          BAR2,
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: isHighlighted ? resolvedHighlight : void 0 }), children: [
+          isHighlighted ? CURSOR2 : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: isSelected && !isItemDisabled ? resolvedCheckbox : theme.muted, dim: isItemDisabled }), children: [
+          isSelected ? CHECKED : UNCHECKED,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: itemColor, dim: isItemDisabled }), children: item.label })
+      ] }, item.key ?? String(item.value));
+    }),
+    hasSubmitRow && /* @__PURE__ */ jsxs6("text", { children: [
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
+        BAR2,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : void 0 }), children: [
+        isOnSubmit ? CURSOR2 : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.muted }), children: "\u21B3 " }),
+      /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.foreground }), children: "Submit" })
+    ] })
+  ] });
+}
+
+// ../ui/components/table/table.tsx
+import { Fragment } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function getColumns(data, columnsProp) {
+  if (columnsProp) return columnsProp;
+  const keys = /* @__PURE__ */ new Set();
+  for (const row of data) {
+    for (const key in row) keys.add(key);
+  }
+  return Array.from(keys);
+}
+function calculateColumnWidths(columns, data, padding) {
+  return columns.map((field) => {
+    const headerWidth = String(field).length;
+    const maxDataWidth = data.reduce((max, row) => {
+      const val = row[field];
+      return Math.max(max, val == null ? 0 : String(val).length);
+    }, 0);
+    return { field, width: Math.max(headerWidth, maxDataWidth) + padding * 2 };
+  });
+}
+function padCell(value, width, padding) {
+  const rightPad = width - value.length - padding;
+  return " ".repeat(padding) + value + " ".repeat(Math.max(0, rightPad));
+}
+function Table({
+  data,
+  columns: columnsProp,
+  padding = 1,
+  headerColor,
+  borderColor
+}) {
+  const theme = useTheme();
+  const resolvedHeaderColor = headerColor ?? theme.primary;
+  const resolvedBorderColor = borderColor ?? theme.border;
+  const columns = getColumns(data, columnsProp);
+  const colInfo = calculateColumnWidths(columns, data, padding);
+  const borderLine = (left, mid, right) => {
+    const inner = colInfo.map((c) => "\u2500".repeat(c.width)).join(mid);
+    return /* @__PURE__ */ jsx12("text", { children: /* @__PURE__ */ jsxs7("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: [
+      left,
+      inner,
+      right
+    ] }) });
+  };
+  const contentRow = (rowData, isHeader) => {
+    const parts = [];
+    parts.push(
+      /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, "left-border")
+    );
+    colInfo.forEach((col, i) => {
+      const val = rowData[col.field];
+      const str = val == null ? "" : String(val);
+      const padded = padCell(str, col.width, padding);
+      if (isHeader) {
+        parts.push(
+          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedHeaderColor, bold: true }), children: padded }, `cell-${i}`)
+        );
+      } else {
+        parts.push(
+          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: theme.foreground }), children: padded }, `cell-${i}`)
+        );
+      }
+      if (i < colInfo.length - 1) {
+        parts.push(
+          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, `sep-${i}`)
+        );
+      }
+    });
+    parts.push(
+      /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, "right-border")
+    );
+    return /* @__PURE__ */ jsx12("text", { children: parts });
+  };
+  const headerData = columns.reduce(
+    (acc, col) => ({ ...acc, [col]: col }),
+    {}
+  );
+  return /* @__PURE__ */ jsxs7("box", { children: [
+    borderLine("\u250C", "\u252C", "\u2510"),
+    contentRow(headerData, true),
+    data.map((row, index) => /* @__PURE__ */ jsxs7(Fragment, { children: [
+      borderLine("\u251C", "\u253C", "\u2524"),
+      contentRow(row, false)
+    ] }, index)),
+    borderLine("\u2514", "\u2534", "\u2518")
+  ] });
+}
+
+// ../ui/components/gradient/gradient.tsx
+import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
+var GRADIENTS = {
+  cristal: ["#bdfff3", "#4ac29a"],
+  teen: ["#77a1d3", "#79cbca", "#e684ae"],
+  mind: ["#473b7b", "#3584a7", "#30d2be"],
+  morning: ["#ff5f6d", "#ffc371"],
+  vice: ["#5ee7df", "#b490ca"],
+  passion: ["#f43b47", "#453a94"],
+  fruit: ["#ff4e50", "#f9d423"],
+  instagram: ["#833ab4", "#fd1d1d", "#fcb045"],
+  atlas: ["#feac5e", "#c779d0", "#4bc0c8"],
+  retro: ["#3f51b1", "#5a55ae", "#7b5fac", "#8f6aae", "#a86aa4", "#cc6b8e", "#f18271", "#f3a469", "#f7c978"],
+  summer: ["#fdbb2d", "#22c1c3"],
+  rainbow: ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"],
+  pastel: ["#74ebd5", "#ACB6E5"]
+};
+function hexToRgb(hex) {
+  const normalized = hex.replace("#", "");
+  return {
+    r: parseInt(normalized.substring(0, 2), 16),
+    g: parseInt(normalized.substring(2, 4), 16),
+    b: parseInt(normalized.substring(4, 6), 16)
+  };
+}
+function rgbToHex(rgb) {
+  const r = rgb.r.toString(16).padStart(2, "0");
+  const g = rgb.g.toString(16).padStart(2, "0");
+  const b = rgb.b.toString(16).padStart(2, "0");
+  return `#${r}${g}${b}`;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function interpolateColor(color1, color2, t) {
+  return {
+    r: Math.round(lerp(color1.r, color2.r, t)),
+    g: Math.round(lerp(color1.g, color2.g, t)),
+    b: Math.round(lerp(color1.b, color2.b, t))
+  };
+}
+function generateGradient(colors, steps) {
+  if (colors.length === 0) throw new Error("At least one color is required");
+  if (colors.length === 1 || steps <= 1) return Array(steps).fill(colors[0]);
+  const rgbColors = colors.map(hexToRgb);
+  const result = [];
+  const segmentLength = (steps - 1) / (rgbColors.length - 1);
+  for (let i = 0; i < steps; i++) {
+    const segmentIndex = Math.min(Math.floor(i / segmentLength), rgbColors.length - 2);
+    const segmentProgress = segmentLength > 0 ? (i - segmentIndex * segmentLength) / segmentLength : 0;
+    const color = interpolateColor(rgbColors[segmentIndex], rgbColors[segmentIndex + 1], Math.min(segmentProgress, 1));
+    result.push(rgbToHex(color));
+  }
+  return result;
+}
+function Gradient({ children, name, colors }) {
+  if (name && colors) throw new Error("The `name` and `colors` props are mutually exclusive");
+  if (!name && !colors) throw new Error("Either `name` or `colors` prop must be provided");
+  const gradientColors = name ? GRADIENTS[name] : colors;
+  const lines = children.split("\n");
+  const maxLength = Math.max(...lines.map((l) => l.length));
+  if (maxLength === 0) return /* @__PURE__ */ jsx13("text", { children });
+  const hexColors = generateGradient(gradientColors, maxLength);
+  return /* @__PURE__ */ jsx13(Fragment2, { children: lines.map((line, lineIndex) => /* @__PURE__ */ jsx13("text", { children: line.split("").map((char, charIndex) => /* @__PURE__ */ jsx13("span", { style: { fg: hexColors[charIndex] }, children: char }, charIndex)) }, lineIndex)) });
+}
+
+// ../ui/components/tab-bar/tab-bar.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState5, Children, isValidElement } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var TabsContext = createContext3(null);
+function useTabsContext() {
+  const ctx = useContext3(TabsContext);
+  if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
+  return ctx;
+}
+function Tabs({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  children
+}) {
+  const [internalValue, setInternalValue] = useState5(defaultValue);
+  const value = controlledValue ?? internalValue;
+  const handleChange = onValueChange ?? setInternalValue;
+  return /* @__PURE__ */ jsx14(TabsContext.Provider, { value: { value, onValueChange: handleChange }, children: /* @__PURE__ */ jsx14("box", { flexDirection: "column", children }) });
+}
+function TabsList({
+  label,
+  focused = true,
+  activeColor,
+  separator = true,
+  children
+}) {
+  const theme = useTheme();
+  const { value } = useTabsContext();
+  const color = activeColor ?? theme.accent;
+  const triggers = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && "value" in child.props) {
+      triggers.push({ value: child.props.value, label: child.props.children });
+    }
+  });
+  const parts = [];
+  if (label !== void 0) {
+    parts.push(
+      /* @__PURE__ */ jsxs8(
+        "span",
+        {
+          style: focused ? textStyle({ bold: true, fg: theme.foreground }) : textStyle({ dim: true, fg: theme.muted }),
+          children: [
+            label,
+            " "
+          ]
+        },
+        "label"
+      )
+    );
+  }
+  triggers.forEach((trigger, i) => {
+    const isSelected = trigger.value === value;
+    const padded = ` ${trigger.label} `;
+    const style = isSelected ? focused ? textStyle({ bold: true, fg: theme.background, bg: color }) : textStyle({ bold: true, fg: theme.background, bg: theme.muted, dim: true }) : focused ? textStyle({ fg: theme.foreground }) : textStyle({ dim: true, fg: theme.muted });
+    if (i > 0) {
+      parts.push(
+        /* @__PURE__ */ jsx14("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "\u2502" }, `div-${i}`)
+      );
+    }
+    parts.push(
+      /* @__PURE__ */ jsx14("span", { style, children: padded }, `opt-${i}`)
+    );
+  });
+  return /* @__PURE__ */ jsxs8("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx14("text", { children: parts }),
+    separator && /* @__PURE__ */ jsx14("text", { wrapMode: "none", style: textStyle({ dim: true, fg: theme.muted }), children: "\u2500".repeat(200) })
+  ] });
+}
+function TabsTrigger(_props) {
+  return null;
+}
+function TabBar({
+  label,
+  options,
+  selectedIndex,
+  focused = true,
+  activeColor,
+  separator = true
+}) {
+  return /* @__PURE__ */ jsx14(Tabs, { value: options[selectedIndex], children: /* @__PURE__ */ jsx14(TabsList, { label, focused, activeColor, separator, children: options.map((option) => /* @__PURE__ */ jsx14(TabsTrigger, { value: option, children: option }, option)) }) });
+}
+
+// ../ui/components/modal/modal.tsx
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function Modal({
+  children,
+  title,
+  borderColor,
+  borderStyle = "rounded",
+  onClose,
+  useKeyboard: useKeyboardProp
+}) {
+  const theme = useTheme();
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const resolvedBorderColor = borderColor ?? theme.muted;
+  useKeyboard3?.((event) => {
+    if (event.name === "escape" && onClose) {
+      onClose();
+    }
+  });
+  return /* @__PURE__ */ jsx15("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx15(
+    "box",
+    {
+      flexDirection: "column",
+      flexGrow: 1,
+      border: true,
+      borderStyle,
+      borderColor: resolvedBorderColor,
+      children: title ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsx15("box", { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx15("text", { style: textStyle({ bold: true, fg: theme.primary }), children: title }) }),
+        children
+      ] }) : children
+    }
+  ) });
+}
+
+// ../ui/components/prompt-input/prompt-input.tsx
+import {
+  useState as useState6,
+  useRef as useRef4,
+  useCallback as useCallback2,
+  useMemo as useMemo3,
+  createContext as createContext4,
+  useContext as useContext4
+} from "react";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var PromptInputControllerCtx = createContext4(null);
+var useOptionalController = () => useContext4(PromptInputControllerCtx);
+var PromptInputContext = createContext4(null);
+function usePromptInput() {
+  const ctx = useContext4(PromptInputContext);
+  if (!ctx) {
+    throw new Error("usePromptInput must be used within a <PromptInput> component");
+  }
+  return ctx;
+}
+function computeDefaultSuggestions(input, commands, files) {
+  if (input.startsWith("/") && commands.length > 0) {
+    return commands.filter((c) => c.cmd.startsWith(input)).map((c) => ({ text: c.cmd, desc: c.desc }));
+  }
+  if (input.includes("@") && files.length > 0) {
+    const query = input.split("@").pop() ?? "";
+    return files.filter((f) => f.toLowerCase().includes(query.toLowerCase())).map((f) => ({ text: "@" + f }));
+  }
+  return [];
+}
+function resolveStatusHintText(status, submittedText, streamingText, errorText, disabledText) {
+  if (status === "submitted") return submittedText;
+  if (status === "streaming") return streamingText;
+  if (status === "error") return errorText;
+  return disabledText;
+}
+function PromptInputDivider() {
+  const { theme } = usePromptInput();
+  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "\u2500".repeat(500) }) });
+}
+function PromptInputSuggestions() {
+  const { suggestions, sugIdx, maxSuggestions, theme } = usePromptInput();
+  const visible = suggestions.slice(0, maxSuggestions);
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsx16("box", { flexDirection: "column", marginLeft: 2, children: visible.map((sug, i) => {
+    const active = i === sugIdx;
+    return /* @__PURE__ */ jsxs10("text", { children: [
+      /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: active ? theme.primary : theme.muted }), children: active ? "\u25B8 " : "  " }),
+      /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: active ? theme.primary : theme.muted, bold: active }), children: sug.text }),
+      sug.desc && /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: " " + sug.desc })
+    ] }, sug.text);
+  }) });
+}
+var CURSOR_CHAR = "\u258D";
+function PromptInputTextarea() {
+  const { value, disabled, statusHintText, placeholder, prompt, promptColor, theme } = usePromptInput();
+  return /* @__PURE__ */ jsxs10("text", { children: [
+    /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: promptColor }), children: prompt }),
+    value.length === 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+      !disabled && /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.muted }), children: CURSOR_CHAR }),
+      /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: disabled ? statusHintText : " " + placeholder })
+    ] }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+      /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.foreground }), children: value }),
+      !disabled && /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.muted }), children: CURSOR_CHAR })
+    ] })
+  ] });
+}
+function PromptInputSubmit(props) {
+  const ctx = usePromptInput();
+  const status = props.status ?? ctx.status;
+  const onStop = props.onStop ?? ctx.onStop;
+  const { disabled, theme } = ctx;
+  const isGenerating = status === "submitted" || status === "streaming";
+  const icon = status === "submitted" ? "\u25D0" : status === "streaming" ? onStop ? "\u25A0" : "\u25D0" : status === "error" ? "\u2715" : "\u23CE";
+  const color = status === "error" ? theme.error : isGenerating ? theme.muted : disabled ? theme.muted : theme.primary;
+  return /* @__PURE__ */ jsx16("text", { children: /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: color }), children: " " + icon }) });
+}
+function PromptInputStatusText() {
+  const { status, errorText, theme } = usePromptInput();
+  if (status !== "error") return null;
+  return /* @__PURE__ */ jsx16("text", { children: /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.error }), children: errorText }) });
+}
+function PromptInput({
+  value: controlledValue,
+  defaultValue = "",
+  onSubmit,
+  onChange,
+  placeholder = "Type a message...",
+  prompt = "\u276F ",
+  promptColor,
+  status,
+  onStop,
+  submittedText = "Thinking...",
+  streamingText: streamingLabel = "Generating...",
+  errorText = "An error occurred. Try again.",
+  disabled: disabledProp = false,
+  disabledText = "Generating...",
+  commands = [],
+  files = [],
+  getSuggestions: customGetSuggestions,
+  maxSuggestions = 5,
+  enableHistory = true,
+  showDividers = false,
+  useKeyboard: useKeyboardProp,
+  children
+}) {
+  const theme = useTheme();
+  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const resolvedPromptColor = promptColor ?? theme.muted;
+  const disabled = status ? status === "submitted" || status === "streaming" : disabledProp;
+  const statusHintText = resolveStatusHintText(status, submittedText, streamingLabel, errorText, disabledText);
+  const controller = useOptionalController();
+  const usingProvider = !!controller;
+  const isControlled = controlledValue !== void 0;
+  const controlledRef = useRef4(isControlled);
+  if (controlledRef.current !== isControlled) {
+    console.warn("PromptInput: switching between controlled and uncontrolled is not supported.");
+  }
+  const [localValue, setLocalValue] = useState6(defaultValue);
+  const [localSuggestions, setLocalSuggestions] = useState6([]);
+  const [localSugIdx, setLocalSugIdx] = useState6(0);
+  const [history, setHistory] = useState6([]);
+  const [histIdx, setHistIdx] = useState6(-1);
+  const value = isControlled ? controlledValue : usingProvider ? controller.textInput.value : localValue;
+  const suggestions = usingProvider ? controller.suggestions.suggestions : localSuggestions;
+  const sugIdx = usingProvider ? controller.suggestions.selectedIndex : localSugIdx;
+  const valueRef = useRef4(defaultValue);
+  if (isControlled) valueRef.current = controlledValue;
+  else if (usingProvider) valueRef.current = controller.textInput.value;
+  else valueRef.current = localValue;
+  const suggestionsRef = useRef4([]);
+  suggestionsRef.current = suggestions;
+  const sugIdxRef = useRef4(0);
+  sugIdxRef.current = sugIdx;
+  const historyRef = useRef4([]);
+  historyRef.current = history;
+  const histIdxRef = useRef4(-1);
+  histIdxRef.current = histIdx;
+  const setSug = useCallback2((next) => {
+    suggestionsRef.current = next;
+    if (usingProvider) {
+      controller.suggestions.setSuggestions(next);
+    } else {
+      setLocalSuggestions(next);
+    }
+  }, [usingProvider, controller]);
+  const setSugI = useCallback2((next) => {
+    sugIdxRef.current = next;
+    if (usingProvider) {
+      controller.suggestions.setSelectedIndex(next);
+    } else {
+      setLocalSugIdx(next);
+    }
+  }, [usingProvider, controller]);
+  const setHist = useCallback2((next) => {
+    historyRef.current = next;
+    setHistory(next);
+  }, []);
+  const setHistI = useCallback2((next) => {
+    histIdxRef.current = next;
+    setHistIdx(next);
+  }, []);
+  const computeSuggestions = useCallback2((input) => {
+    if (customGetSuggestions) return customGetSuggestions(input);
+    return computeDefaultSuggestions(input, commands, files);
+  }, [customGetSuggestions, commands, files]);
+  const updateValue = useCallback2((next) => {
+    valueRef.current = next;
+    if (isControlled) {
+    } else if (usingProvider) {
+      controller.textInput.setValue(next);
+    } else {
+      setLocalValue(next);
+    }
+    onChange?.(next);
+    const sug = computeSuggestions(next);
+    setSug(sug);
+    setSugI(0);
+  }, [isControlled, usingProvider, controller, onChange, computeSuggestions, setSug, setSugI]);
+  const clearInput = useCallback2(() => {
+    if (usingProvider) {
+      controller.textInput.clear();
+    } else if (!isControlled) {
+      setLocalValue("");
+    }
+    onChange?.("");
+  }, [usingProvider, controller, isControlled, onChange]);
+  const handleSubmit = useCallback2((text) => {
+    if (!onSubmit) return;
+    const result = onSubmit({ text });
+    if (result instanceof Promise) {
+      result.then(
+        () => clearInput(),
+        () => {
+        }
+      );
+    } else {
+      clearInput();
+    }
+  }, [onSubmit, clearInput]);
+  useKeyboard3?.((event) => {
+    if (event.name === "escape" && (status === "streaming" || status === "submitted") && onStop) {
+      onStop();
+      return;
+    }
+    if (disabled) return;
+    if (event.name === "return") {
+      if (suggestionsRef.current.length > 0) {
+        const sel = suggestionsRef.current[sugIdxRef.current];
+        if (sel) {
+          if (valueRef.current.startsWith("/")) {
+            setSug([]);
+            updateValue("");
+            if (enableHistory) {
+              setHist([sel.text, ...historyRef.current]);
+            }
+            setHistI(-1);
+            handleSubmit(sel.text);
+          } else {
+            const base = valueRef.current.slice(0, valueRef.current.lastIndexOf("@"));
+            updateValue(base + sel.text + " ");
+            setSug([]);
+          }
+        }
+      } else {
+        const trimmed = valueRef.current.trim();
+        if (!trimmed) return;
+        if (enableHistory) {
+          setHist([trimmed, ...historyRef.current]);
+        }
+        updateValue("");
+        setHistI(-1);
+        setSug([]);
+        handleSubmit(trimmed);
+      }
+      return;
+    }
+    if (event.name === "tab" && suggestionsRef.current.length > 0) {
+      setSugI((sugIdxRef.current + 1) % suggestionsRef.current.length);
+      return;
+    }
+    if (event.name === "up") {
+      if (suggestionsRef.current.length > 0) {
+        setSugI(Math.max(0, sugIdxRef.current - 1));
+      } else if (enableHistory && historyRef.current.length > 0) {
+        const idx = Math.min(historyRef.current.length - 1, histIdxRef.current + 1);
+        setHistI(idx);
+        updateValue(historyRef.current[idx]);
+      }
+      return;
+    }
+    if (event.name === "down") {
+      if (suggestionsRef.current.length > 0) {
+        setSugI(Math.min(suggestionsRef.current.length - 1, sugIdxRef.current + 1));
+      } else if (enableHistory && histIdxRef.current > 0) {
+        const nextIdx = histIdxRef.current - 1;
+        setHistI(nextIdx);
+        updateValue(historyRef.current[nextIdx]);
+      } else if (enableHistory && histIdxRef.current === 0) {
+        setHistI(-1);
+        updateValue("");
+      }
+      return;
+    }
+    if (event.name === "escape") {
+      if (suggestionsRef.current.length > 0) {
+        setSug([]);
+      }
+      return;
+    }
+    if (event.name === "backspace" || event.name === "delete") {
+      updateValue(valueRef.current.slice(0, -1));
+      return;
+    }
+    if (event.ctrl || event.meta) return;
+    if (event.name === "space") {
+      updateValue(valueRef.current + " ");
+      return;
+    }
+    if (event.name && event.name.length === 1) {
+      updateValue(valueRef.current + event.name);
+    }
+  });
+  const visibleSuggestions = suggestions.slice(0, maxSuggestions);
+  const ctxValue = {
+    value,
+    disabled,
+    status,
+    onStop,
+    statusHintText,
+    placeholder,
+    prompt,
+    promptColor: resolvedPromptColor,
+    suggestions: visibleSuggestions,
+    sugIdx,
+    maxSuggestions,
+    errorText,
+    theme
+  };
+  if (children) {
+    return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", children }) });
+  }
+  return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs10("box", { flexDirection: "column", children: [
+    showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {}),
+    /* @__PURE__ */ jsx16(PromptInputSuggestions, {}),
+    /* @__PURE__ */ jsx16(PromptInputTextarea, {}),
+    /* @__PURE__ */ jsx16(PromptInputStatusText, {}),
+    showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {})
+  ] }) });
+}
+PromptInput.Textarea = PromptInputTextarea;
+PromptInput.Suggestions = PromptInputSuggestions;
+PromptInput.Submit = PromptInputSubmit;
+PromptInput.Divider = PromptInputDivider;
+PromptInput.StatusText = PromptInputStatusText;
+
+// ../ui/components/chat/chat.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var STATUS_ICONS = {
+  pending: "\u2022",
+  in_progress: "\u280B",
+  completed: "\u2713",
+  failed: "\u2717"
+};
+function getStatusColors(theme) {
+  return {
+    pending: theme.muted,
+    in_progress: theme.warning,
+    completed: theme.success,
+    failed: theme.error
+  };
+}
+function MessageBubble({
+  message,
+  userColor,
+  assistantColor,
+  foregroundColor
+}) {
+  const isUser = message.role === "user";
+  const prefix = isUser ? "> " : "< ";
+  const color = isUser ? userColor : assistantColor;
+  return /* @__PURE__ */ jsxs11("text", { wrapMode: "word", children: [
+    /* @__PURE__ */ jsx17("span", { style: textStyle({ bold: true, fg: color }), children: prefix }),
+    /* @__PURE__ */ jsx17("span", { style: { fg: foregroundColor }, children: message.content })
+  ] });
+}
+function StreamingTextDisplay({
+  text,
+  assistantColor,
+  foregroundColor,
+  cursorChar = "_"
+}) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs11("text", { wrapMode: "word", children: [
+    /* @__PURE__ */ jsx17("span", { style: textStyle({ bold: true, fg: assistantColor }), children: "< " }),
+    /* @__PURE__ */ jsx17("span", { style: { fg: foregroundColor }, children: text }),
+    /* @__PURE__ */ jsx17("span", { style: textStyle({ dim: true, fg: foregroundColor }), children: cursorChar })
+  ] });
+}
+function ToolCallCard({ toolCall, statusColors }) {
+  const icon = STATUS_ICONS[toolCall.status] || "\u2022";
+  const color = statusColors[toolCall.status] || "gray";
+  const showEllipsis = toolCall.status === "pending" || toolCall.status === "in_progress";
+  return /* @__PURE__ */ jsxs11("text", { children: [
+    /* @__PURE__ */ jsx17("span", { children: "  " }),
+    /* @__PURE__ */ jsx17("span", { style: textStyle({ fg: color }), children: icon }),
+    /* @__PURE__ */ jsx17("span", { children: " " }),
+    /* @__PURE__ */ jsx17("span", { style: textStyle({ fg: color }), children: toolCall.title }),
+    showEllipsis && /* @__PURE__ */ jsx17("span", { style: textStyle({ dim: true, fg: color }), children: " ..." })
+  ] });
+}
+function ChatPanel({
+  messages,
+  streamingText = "",
+  status,
+  isLoading = false,
+  activeToolCalls = [],
+  onSendMessage,
+  onStop,
+  onCancel,
+  placeholder = "Type a message...",
+  promptChar = "> ",
+  promptColor,
+  userColor,
+  assistantColor,
+  loadingText = "Thinking...",
+  useKeyboard: useKeyboardProp
+}) {
+  const theme = useTheme();
+  const resolvedUserColor = userColor ?? theme.secondary;
+  const resolvedAssistantColor = assistantColor ?? theme.primary;
+  const resolvedPromptColor = promptColor ?? theme.secondary;
+  const statusColors = getStatusColors(theme);
+  const chatStatus = status ? status : isLoading && !streamingText ? "submitted" : streamingText ? "streaming" : void 0;
+  const isSubmitted = chatStatus === "submitted";
+  const isStreaming = chatStatus === "streaming";
+  const stopHandler = onStop ?? onCancel;
+  return /* @__PURE__ */ jsxs11("box", { flexDirection: "column", paddingX: 1, children: [
+    messages.map((msg) => /* @__PURE__ */ jsx17(
+      MessageBubble,
+      {
+        message: msg,
+        userColor: resolvedUserColor,
+        assistantColor: resolvedAssistantColor,
+        foregroundColor: theme.foreground
+      },
+      msg.id
+    )),
+    activeToolCalls.map((tc) => /* @__PURE__ */ jsx17(ToolCallCard, { toolCall: tc, statusColors }, tc.id)),
+    isStreaming && streamingText ? /* @__PURE__ */ jsx17(
+      StreamingTextDisplay,
+      {
+        text: streamingText,
+        assistantColor: resolvedAssistantColor,
+        foregroundColor: theme.foreground
+      }
+    ) : isSubmitted ? /* @__PURE__ */ jsxs11("text", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+      "  ",
+      loadingText
+    ] }) : null,
+    /* @__PURE__ */ jsx17("box", { marginTop: 1, children: /* @__PURE__ */ jsx17(
+      PromptInput,
+      {
+        onSubmit: (msg) => onSendMessage(msg.text),
+        onStop: stopHandler,
+        status: chatStatus,
+        placeholder,
+        prompt: promptChar,
+        promptColor: resolvedPromptColor,
+        foregroundColor: theme.foreground,
+        submittedText: loadingText,
+        useKeyboard: useKeyboardProp
+      }
+    ) })
+  ] });
+}
+
+// ../ui/components/timeline/timeline.tsx
+import { useState as useState7, useEffect as useEffect2, useRef as useRef5 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
+function getStepDot(status) {
+  return status === "pending" ? "\u25CB" : "\u25CF";
+}
+function getStepColor(status, theme) {
+  switch (status) {
+    case "done":
+      return theme.success;
+    case "running":
+      return theme.primary;
+    case "pending":
+      return theme.muted;
+    case "error":
+      return theme.error;
+    default:
+      return theme.muted;
+  }
+}
+function StepRow({ step, isLast, theme, frame }) {
+  const color = getStepColor(step.status, theme);
+  const isActive = step.status === "running";
+  const isPending = step.status === "pending";
+  const pipe = "\u2502";
+  const dot = isActive ? DOTS[frame % DOTS.length] : getStepDot(step.status);
+  const dashIdx = step.label.indexOf(" \u2014 ");
+  const mainLabel = dashIdx >= 0 ? step.label.slice(0, dashIdx) : step.label;
+  const detail = dashIdx >= 0 ? step.label.slice(dashIdx) : "";
+  return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", marginLeft: 1, children: [
+    /* @__PURE__ */ jsxs12("text", { children: [
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color }), children: dot }),
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.foreground }), children: " " }),
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: mainLabel }),
+      detail && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: detail })
+    ] }),
+    step.output && /* @__PURE__ */ jsxs12("text", { children: [
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe + "  " }),
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: step.status === "error" ? theme.error : theme.accent }), children: step.output })
+    ] }),
+    !isLast && /* @__PURE__ */ jsx18("text", { children: /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe }) })
+  ] });
+}
+function Timeline({
+  steps,
+  duration,
+  collapsed = true,
+  headerLabel = "Thought for"
+}) {
+  const theme = useTheme();
+  const arrow = collapsed ? "\u25B6" : "\u25BC";
+  const durationStr = duration ?? "0ms";
+  const hasRunning = steps?.some((s) => s.status === "running") ?? false;
+  const [frame, setFrame] = useState7(0);
+  const alive = useRef5(true);
+  useEffect2(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  useEffect2(() => {
+    if (!hasRunning) return;
+    const id = setInterval(() => {
+      if (alive.current) setFrame((f) => f + 1);
+    }, 150);
+    return () => clearInterval(id);
+  }, [hasRunning]);
+  return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs12("text", { children: [
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " " + headerLabel + " " + durationStr })
+    ] }),
+    !collapsed && steps && steps.map((step, i) => /* @__PURE__ */ jsx18(
+      StepRow,
+      {
+        step,
+        isLast: i === steps.length - 1,
+        theme,
+        frame
+      },
+      `step-${i}`
+    ))
+  ] });
+}
+
+// ../ui/components/message/message.tsx
+import { createContext as createContext5, useContext as useContext5 } from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var MessageContext = createContext5(null);
+function useMessage() {
+  const ctx = useContext5(MessageContext);
+  if (!ctx) throw new Error("useMessage must be used within <Message>");
+  return ctx;
+}
+function getBubbleColors(theme) {
+  const isDark = theme.background !== "#FFFFFF";
+  return isDark ? { assistantBg: "#2a2a4a", userBg: "#2a3a3a" } : { assistantBg: "#F1F5F9", userBg: "#E2E8F0" };
+}
+var TOOL_STATE_ICONS = {
+  "partial-call": "\u2022",
+  // •
+  "call": "\u280B",
+  // ⠋
+  "result": "\u2713"
+  // ✓
+};
+function getToolStateColor(state, theme) {
+  switch (state) {
+    case "partial-call":
+      return theme.muted;
+    case "call":
+      return theme.warning;
+    case "result":
+      return theme.success;
+    default:
+      return theme.muted;
+  }
+}
+function MessageContent({ children }) {
+  const { role, backgroundColor } = useMessage();
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsx19(
+    "box",
+    {
+      flexDirection: "column",
+      backgroundColor,
+      paddingX: 2,
+      paddingY: 1,
+      ...isUser ? { maxWidth: "85%" } : { width: "85%" },
+      children
+    }
+  );
+}
+function MessageText({ children, isLast = false }) {
+  const { isStreaming, streamingCursor, backgroundColor, textColor } = useMessage();
+  return /* @__PURE__ */ jsxs13("text", { wrapMode: "word", children: [
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, bg: backgroundColor }), children }),
+    isLast && isStreaming && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: streamingCursor })
+  ] });
+}
+function MessageReasoning({ part }) {
+  return /* @__PURE__ */ jsx19(
+    Timeline,
+    {
+      steps: part.steps,
+      duration: part.duration,
+      collapsed: part.collapsed
+    }
+  );
+}
+function MessageToolInvocation({ part, toolColors }) {
+  const theme = useTheme();
+  const { backgroundColor, textColor } = useMessage();
+  const { toolName, state, result } = part.toolInvocation;
+  const icon = TOOL_STATE_ICONS[state] || "\u2022";
+  const stateColor = toolColors?.[toolName] ?? getToolStateColor(state, theme);
+  const isActive = state === "partial-call" || state === "call";
+  return /* @__PURE__ */ jsxs13("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs13("text", { children: [
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bg: backgroundColor }), children: icon }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, bg: backgroundColor }), children: " " }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bold: isActive, bg: backgroundColor }), children: toolName }),
+      isActive && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: " ..." })
+    ] }),
+    state === "result" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "  \u2514\u2500 " }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: String(result).slice(0, 120) })
+    ] })
+  ] });
+}
+function MessageSource({ part, index }) {
+  const theme = useTheme();
+  const { backgroundColor, textColor } = useMessage();
+  const title = part.source.title || part.source.url || "source";
+  return /* @__PURE__ */ jsxs13("text", { children: [
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "[" }),
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: String(index + 1) }),
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "] " }),
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: title })
+  ] });
+}
+function MessageFooter({ model, timestamp }) {
+  const theme = useTheme();
+  if (!model && !timestamp) return null;
+  return /* @__PURE__ */ jsxs13("text", { children: [
+    model && /* @__PURE__ */ jsx19("span", { style: textStyle({ dim: true, fg: theme.muted }), children: model }),
+    model && timestamp && /* @__PURE__ */ jsx19("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " \xB7 " }),
+    timestamp && /* @__PURE__ */ jsx19("span", { style: textStyle({ dim: true, fg: theme.muted }), children: timestamp })
+  ] });
+}
+function Message({
+  role,
+  isStreaming = false,
+  streamingCursor = "\u258E",
+  backgroundColor,
+  children
+}) {
+  const theme = useTheme();
+  const { assistantBg, userBg } = getBubbleColors(theme);
+  const isUser = role === "user";
+  const bg = backgroundColor ?? (isUser ? userBg : assistantBg);
+  return /* @__PURE__ */ jsx19(MessageContext.Provider, { value: { role, isStreaming, streamingCursor, backgroundColor: bg, textColor: theme.foreground }, children: /* @__PURE__ */ jsx19(
+    "box",
+    {
+      flexDirection: "column",
+      flexShrink: 0,
+      alignItems: isUser ? "flex-end" : "flex-start",
+      children
+    }
+  ) });
+}
+Message.Content = MessageContent;
+Message.Text = MessageText;
+Message.Reasoning = MessageReasoning;
+Message.ToolInvocation = MessageToolInvocation;
+Message.Source = MessageSource;
+Message.Footer = MessageFooter;
+
+// ../ui/components/terminal-window/terminal-window.tsx
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../ui/components/breakpoints/use-breakpoints.ts
+import { useTerminalDimensions } from "@opentui/react";
+var BREAKPOINTS = {
+  tiny: 40,
+  narrow: 60,
+  mobile: 70
+};
+function useBreakpoints() {
+  const { width, height } = useTerminalDimensions();
+  return {
+    isTiny: width < BREAKPOINTS.tiny,
+    isNarrow: width < BREAKPOINTS.narrow,
+    isMobile: width < BREAKPOINTS.mobile,
+    isDesktop: width >= BREAKPOINTS.mobile,
+    width,
+    height
+  };
+}
+
+// ../docs/components/landing/landing-app.tsx
+import { useState as useState10 } from "react";
+
+// ../docs/components/landing/logo.tsx
+import { useState as useState8, useEffect as useEffect3, useRef as useRef6, useMemo as useMemo4 } from "react";
 import figlet from "figlet";
 import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+figlet.parseFont("ANSI Shadow", ansiShadow);
+function makeArt(text) {
+  return figlet.textSync(text, { font: "ANSI Shadow" }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
+}
+var fullArt = makeArt("gridland");
+var gridArt = makeArt("grid");
+var landArt = makeArt("land");
+var ART_HEIGHT = 6;
+function useAnimation(duration = 1e3) {
+  const isBrowser = typeof document !== "undefined";
+  const [progress, setProgress] = useState8(isBrowser ? 0 : 1);
+  const startTime = useRef6(null);
+  useEffect3(() => {
+    if (!isBrowser) return;
+    let raf;
+    const tick = (time) => {
+      if (startTime.current === null) startTime.current = time;
+      const elapsed = time - startTime.current;
+      const t = Math.min(1, elapsed / duration);
+      const eased = 1 - Math.pow(1 - t, 3);
+      setProgress(eased);
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  return progress;
+}
+function RevealGradient({ children, revealCol }) {
+  const gradientColors = GRADIENTS.instagram;
+  const lines = children.split("\n");
+  const maxLength = Math.max(...lines.map((l) => l.length));
+  if (maxLength === 0) return /* @__PURE__ */ jsx21("text", { children });
+  const hexColors = useMemo4(() => generateGradient(gradientColors, maxLength), [maxLength]);
+  return /* @__PURE__ */ jsx21("box", { position: "relative", width: maxLength, height: lines.length, shouldFill: false, children: lines.map((line, lineIndex) => {
+    const runs = [];
+    let current = null;
+    for (let i = 0; i < line.length; i++) {
+      const revealed = i <= revealCol;
+      const char = line[i];
+      const isVisible = revealed && char !== " ";
+      if (isVisible) {
+        if (!current) {
+          current = { start: i, chars: [] };
+        }
+        current.chars.push(char);
+      } else {
+        if (current) {
+          runs.push(current);
+          current = null;
+        }
+      }
+    }
+    if (current) runs.push(current);
+    return runs.map((run, runIndex) => /* @__PURE__ */ jsx21(
+      "box",
+      {
+        position: "absolute",
+        top: lineIndex,
+        left: run.start,
+        shouldFill: false,
+        children: /* @__PURE__ */ jsx21("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx21(
+          "span",
+          {
+            style: { fg: hexColors[run.start + ci] },
+            children: char
+          },
+          ci
+        )) })
+      },
+      `${lineIndex}-${runIndex}`
+    ));
+  }) });
+}
+function Logo({ compact, narrow, mobile }) {
+  const isBrowser = typeof document !== "undefined";
+  const progress = useAnimation(900);
+  const artHeight = compact ? 1 : narrow ? ART_HEIGHT * 2 : ART_HEIGHT;
+  const dropOffset = Math.round((1 - progress) * -artHeight);
+  const revealProgress = Math.max(0, Math.min(1, (progress - 0.1) / 0.7));
+  const maxWidth = compact ? 8 : narrow ? 40 : 62;
+  const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
+  const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
+  const subtitle = /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsx21("text", { children: " " }),
+    /* @__PURE__ */ jsx21("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs15("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
+      "A framework for building terminal apps, built on ",
+      /* @__PURE__ */ jsx21("a", { href: "https://opentui.com", style: { attributes: 72, fg: "#d4b0e8" }, children: "OpenTUI" }),
+      " + React." + (mobile ? " " : "\n") + "(Gridland apps, like this website, work in the browser and terminal.)"
+    ] }) })
+  ] });
+  if (!isBrowser) {
+    const art = compact ? "gridland" : narrow ? gridArt + "\n" + landArt : fullArt;
+    return /* @__PURE__ */ jsxs15("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", children: [
+      /* @__PURE__ */ jsx21(Gradient, { name: "instagram", children: art }),
+      /* @__PURE__ */ jsx21("text", { children: " " }),
+      /* @__PURE__ */ jsx21("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs15("text", { style: textStyle({ fg: "#d4b0e8" }), shouldFill: false, children: [
+        "A framework for building terminal apps, built on OpenTUI + React.",
+        "\n",
+        "(Gridland apps, like this website, work in the browser and terminal.)"
+      ] }) })
+    ] });
+  }
+  if (compact) {
+    return /* @__PURE__ */ jsxs15("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx21("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx21("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx21(RevealGradient, { revealCol, children: "gridland" }) }) }),
+      subtitle
+    ] });
+  }
+  if (narrow) {
+    return /* @__PURE__ */ jsxs15("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx21("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs15("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
+        /* @__PURE__ */ jsx21(RevealGradient, { revealCol, children: gridArt }),
+        /* @__PURE__ */ jsx21(RevealGradient, { revealCol, children: landArt })
+      ] }) }),
+      subtitle
+    ] });
+  }
+  return /* @__PURE__ */ jsxs15("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+    /* @__PURE__ */ jsx21("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx21("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx21(RevealGradient, { revealCol, children: fullArt }) }) }),
+    subtitle
+  ] });
+}
+
+// ../docs/components/landing/install-box.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function InstallBox() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx22(
+    "box",
+    {
+      border: true,
+      borderStyle: "rounded",
+      borderColor: theme.border,
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs16("text", { children: [
+        /* @__PURE__ */ jsx22("span", { style: textStyle({ dim: true }), children: "$ " }),
+        /* @__PURE__ */ jsx22("span", { style: textStyle({ bold: true }), children: "bun create " }),
+        /* @__PURE__ */ jsx22("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
+      ] })
+    }
+  );
+}
+
+// ../docs/components/landing/links-box.tsx
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var UNDERLINE3 = 1 << 3;
+function LinksBox() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx23(
+    "box",
+    {
+      border: true,
+      borderStyle: "rounded",
+      borderColor: theme.border,
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs17("text", { children: [
+        /* @__PURE__ */ jsx23("span", { children: "\u{1F431}" }),
+        /* @__PURE__ */ jsx23("a", { href: "https://github.com/cjroth/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
+        /* @__PURE__ */ jsx23("span", { children: "  " }),
+        /* @__PURE__ */ jsx23("span", { children: "\u{1F4D6}" }),
+        /* @__PURE__ */ jsx23("a", { href: "/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
+      ] })
+    }
+  );
+}
+
+// ../docs/components/landing/matrix-background.tsx
+import { useMemo as useMemo5 } from "react";
+
+// ../docs/components/landing/use-matrix.ts
+import { useState as useState9, useEffect as useEffect4, useRef as useRef7 } from "react";
+var CHARS = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*(){}[]|;:<>,.?/~`";
+function randomChar() {
+  return CHARS[Math.floor(Math.random() * CHARS.length)];
+}
+function createDrop(height, seeded = false) {
+  const length = Math.floor(Math.random() * Math.floor(height * 0.6)) + 4;
+  return {
+    y: seeded ? Math.floor(Math.random() * (height + length)) : -Math.floor(Math.random() * height),
+    speed: 1,
+    length,
+    chars: Array.from({ length }, randomChar)
+  };
+}
+function buildGrid(columns, width, height) {
+  const grid = Array.from({ length: height }, () => Array(width).fill(" "));
+  const brightness = Array.from({ length: height }, () => Array(width).fill(0));
+  for (let x = 0; x < width; x++) {
+    const drop = columns[x];
+    if (!drop) continue;
+    for (let i = 0; i < drop.length; i++) {
+      const row = Math.floor(drop.y) - i;
+      if (row < 0 || row >= height) continue;
+      grid[row][x] = drop.chars[i];
+      if (i === 0) {
+        brightness[row][x] = 1;
+      } else {
+        brightness[row][x] = Math.max(0.15, 1 - i / drop.length);
+      }
+    }
+  }
+  return { grid, brightness };
+}
+function useMatrix(width, height) {
+  const columnsRef = useRef7([]);
+  const [state, setState] = useState9(() => {
+    const columns = Array.from(
+      { length: width },
+      () => Math.random() < 0.5 ? createDrop(height, true) : null
+    );
+    columnsRef.current = columns;
+    return buildGrid(columns, width, height);
+  });
+  useEffect4(() => {
+    if (width < 2 || height < 2) return;
+    const id = setInterval(() => {
+      const columns = columnsRef.current;
+      for (let x = 0; x < width; x++) {
+        if (columns[x] === null || columns[x] === void 0) {
+          if (Math.random() < 0.03) {
+            columns[x] = createDrop(height);
+          }
+          continue;
+        }
+        const drop = columns[x];
+        drop.y += drop.speed;
+        if (Math.random() < 0.1) {
+          const idx = Math.floor(Math.random() * drop.chars.length);
+          drop.chars[idx] = randomChar();
+        }
+        if (drop.y - drop.length > height) {
+          columns[x] = null;
+        }
+      }
+      setState(buildGrid(columns, width, height));
+    }, 80);
+    return () => clearInterval(id);
+  }, [width, height]);
+  useEffect4(() => {
+    columnsRef.current = Array.from(
+      { length: width },
+      () => Math.random() < 0.5 ? createDrop(height, true) : null
+    );
+    setState(buildGrid(columnsRef.current, width, height));
+  }, [width, height]);
+  return state;
+}
+
+// ../docs/components/landing/matrix-background.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var MUTE_LEVELS = [0.12, 0.18, 0.24, 0.3, 0.38];
+var BG = hexToRgb("#1a1a2e");
+function buildMutedColors(baseHex) {
+  const fg = hexToRgb(baseHex);
+  return MUTE_LEVELS.map((factor) => rgbToHex({
+    r: Math.round(BG.r + (fg.r - BG.r) * factor),
+    g: Math.round(BG.g + (fg.g - BG.g) * factor),
+    b: Math.round(BG.b + (fg.b - BG.b) * factor)
+  }));
+}
+function colorForCell(mutedColors, b) {
+  if (b >= 1) return mutedColors[4];
+  const idx = Math.min(Math.floor(b * (MUTE_LEVELS.length - 1)), MUTE_LEVELS.length - 2);
+  return mutedColors[idx];
+}
+function MatrixBackground({ width, height, clearRect, clearRects }) {
+  const { grid, brightness } = useMatrix(width, height);
+  const theme = useTheme();
+  const columnColors = useMemo5(
+    () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
+    [width, theme.accent, theme.secondary, theme.primary]
+  );
+  const columnMutedColors = useMemo5(
+    () => columnColors.map(buildMutedColors),
+    [columnColors]
+  );
+  return /* @__PURE__ */ jsx24("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx24("text", { children: row.map((cell, x) => {
+    const inClearRect = clearRect && y >= clearRect.top && y < clearRect.top + clearRect.height && x >= clearRect.left && x < clearRect.left + clearRect.width || clearRects && clearRects.some(
+      (r) => y >= r.top && y < r.top + r.height && x >= r.left && x < r.left + r.width
+    );
+    const mutedColors = columnMutedColors[x];
+    if (cell === " " || inClearRect || !mutedColors) {
+      return /* @__PURE__ */ jsx24("span", { children: " " }, x);
+    }
+    return /* @__PURE__ */ jsx24(
+      "span",
+      {
+        style: {
+          fg: colorForCell(mutedColors, brightness[y][x])
+        },
+        children: cell
+      },
+      x
+    );
+  }) }, y)) });
+}
+
+// ../docs/components/landing/about-modal.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function AboutModal({ onClose, useKeyboard: useKeyboard3 }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx25(Modal, { title: "About Gridland", useKeyboard: useKeyboard3, onClose, children: /* @__PURE__ */ jsxs18("box", { paddingX: 1, flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx25("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "What is Gridland?" }),
+    /* @__PURE__ */ jsx25("text", { children: "Gridland renders terminal UIs to HTML5 Canvas with React." }),
+    /* @__PURE__ */ jsx25("text", { children: "No xterm.js. No terminal emulator. Just pixels." }),
+    /* @__PURE__ */ jsx25("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Features" }),
+    /* @__PURE__ */ jsxs18("text", { children: [
+      /* @__PURE__ */ jsxs18("span", { style: textStyle({ dim: true }), children: [
+        "\u2022",
+        " "
+      ] }),
+      "Canvas-rendered TUI components"
+    ] }),
+    /* @__PURE__ */ jsxs18("text", { children: [
+      /* @__PURE__ */ jsxs18("span", { style: textStyle({ dim: true }), children: [
+        "\u2022",
+        " "
+      ] }),
+      "React reconciler with JSX"
+    ] }),
+    /* @__PURE__ */ jsxs18("text", { children: [
+      /* @__PURE__ */ jsxs18("span", { style: textStyle({ dim: true }), children: [
+        "\u2022",
+        " "
+      ] }),
+      "Yoga flexbox layout engine"
+    ] }),
+    /* @__PURE__ */ jsxs18("text", { children: [
+      /* @__PURE__ */ jsxs18("span", { style: textStyle({ dim: true }), children: [
+        "\u2022",
+        " "
+      ] }),
+      "Keyboard, mouse, and clipboard support"
+    ] }),
+    /* @__PURE__ */ jsxs18("text", { children: [
+      /* @__PURE__ */ jsxs18("span", { style: textStyle({ dim: true }), children: [
+        "\u2022",
+        " "
+      ] }),
+      "Next.js and Vite plugins"
+    ] }),
+    /* @__PURE__ */ jsx25("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Tech Stack" }),
+    /* @__PURE__ */ jsx25("text", { children: "React + opentui engine + yoga-layout + HTML5 Canvas" }),
+    /* @__PURE__ */ jsx25("text", { style: textStyle({ dim: true }), children: "Press q to close" })
+  ] }) });
+}
+
+// ../docs/components/landing/landing-app.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function LandingApp({ useKeyboard: useKeyboard3 }) {
+  const theme = useTheme();
+  const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
+  const [showAbout, setShowAbout] = useState10(false);
+  useKeyboard3((event) => {
+    if (event.name === "a" && !showAbout) {
+      setShowAbout(true);
+    }
+    if (event.name === "q" && showAbout) {
+      setShowAbout(false);
+    }
+  });
+  if (showAbout) {
+    return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", width: "100%", height: "100%", children: [
+      /* @__PURE__ */ jsx26("box", { flexGrow: 1, children: /* @__PURE__ */ jsx26(AboutModal, { onClose: () => setShowAbout(false), useKeyboard: useKeyboard3 }) }),
+      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "close" }] })
+    ] });
+  }
+  const isBrowser = typeof document !== "undefined";
+  const logoHeight = isTiny ? 2 : isNarrow ? 13 : 7;
+  const logoExtra = isBrowser ? 1 : 0;
+  const gap = isMobile ? 0 : 1;
+  const installLinksTop = 3 + logoHeight + logoExtra + gap;
+  const installLinksHeight = 3;
+  const boxTop = installLinksTop + installLinksHeight + gap + 1;
+  const boxHeight = height - boxTop - 1 - 1;
+  const clearRect = { top: boxTop, left: 1, width: width - 2, height: boxHeight };
+  const installLinksClearRect = { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight };
+  return /* @__PURE__ */ jsxs19("box", { width: "100%", height: "100%", position: "relative", children: [
+    /* @__PURE__ */ jsx26(MatrixBackground, { width, height, clearRect, clearRects: [installLinksClearRect] }),
+    /* @__PURE__ */ jsxs19(
+      "box",
+      {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height,
+        zIndex: 1,
+        flexDirection: "column",
+        shouldFill: false,
+        children: [
+          /* @__PURE__ */ jsxs19("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
+            /* @__PURE__ */ jsx26("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx26(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
+            /* @__PURE__ */ jsxs19("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
+              /* @__PURE__ */ jsx26(
+                "box",
+                {
+                  border: true,
+                  borderStyle: "rounded",
+                  borderColor: theme.border,
+                  paddingX: 1,
+                  flexDirection: "column",
+                  flexShrink: 0,
+                  children: /* @__PURE__ */ jsxs19("text", { children: [
+                    /* @__PURE__ */ jsx26("span", { style: textStyle({ dim: true }), children: "$ " }),
+                    /* @__PURE__ */ jsx26("span", { style: textStyle({ bold: true }), children: "bunx " }),
+                    /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx26(InstallBox, {}),
+              /* @__PURE__ */ jsx26(LinksBox, {})
+            ] }),
+            /* @__PURE__ */ jsx26(
+              "box",
+              {
+                flexGrow: 1,
+                border: true,
+                borderStyle: "rounded",
+                borderColor: theme.border
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx26(
+            StatusBar,
+            {
+              items: [
+                { key: "a", label: "about" }
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// ../docs/components/landing/matrix-rain.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// ../ui/scripts/demo-apps.tsx
+import figlet2 from "figlet";
+import ansiShadow2 from "figlet/importable-fonts/ANSI Shadow.js";
 import big from "figlet/importable-fonts/Big.js";
 import doom from "figlet/importable-fonts/Doom.js";
 import slant from "figlet/importable-fonts/Slant.js";
@@ -34,9 +2137,9 @@ import speed from "figlet/importable-fonts/Speed.js";
 import standard from "figlet/importable-fonts/Standard.js";
 import block from "figlet/importable-fonts/Block.js";
 import colossal from "figlet/importable-fonts/Colossal.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 var fonts = [
-  { name: "ANSI Shadow", data: ansiShadow },
+  { name: "ANSI Shadow", data: ansiShadow2 },
   { name: "Standard", data: standard },
   { name: "Big", data: big },
   { name: "Doom", data: doom },
@@ -46,47 +2149,47 @@ var fonts = [
   { name: "Colossal", data: colossal }
 ];
 for (const f of fonts) {
-  figlet.parseFont(f.name, f.data);
+  figlet2.parseFont(f.name, f.data);
 }
 function getFigletLines(fontName, text = "gridland") {
-  const art = figlet.textSync(text, { font: fontName });
+  const art = figlet2.textSync(text, { font: fontName });
   return art.split("\n").filter((l) => l.trimEnd().length > 0);
 }
 var gradientNames = Object.keys(GRADIENTS);
 function GradientApp() {
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState11(0);
   const name = gradientNames[index];
   const lines = getFigletLines("ANSI Shadow");
   useKeyboard((event) => {
     if (event.name === "left") setIndex((i) => i > 0 ? i - 1 : gradientNames.length - 1);
     if (event.name === "right") setIndex((i) => i < gradientNames.length - 1 ? i + 1 : 0);
   });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx(Gradient, { name, children: lines.join("\n") }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx28(Gradient, { name, children: lines.join("\n") }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(
       StatusBar,
       {
         items: [{ key: "\u2190\u2192", label: "gradient" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "cyan", bold: true }), children: name.padEnd(11) })
+        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "cyan", bold: true }), children: name.padEnd(11) })
       }
     ) })
   ] });
 }
 function AsciiApp() {
-  const [fontIndex, setFontIndex] = useState(0);
+  const [fontIndex, setFontIndex] = useState11(0);
   const font = fonts[fontIndex];
   const lines = getFigletLines(font.name);
   useKeyboard((event) => {
     if (event.name === "left") setFontIndex((i) => i > 0 ? i - 1 : fonts.length - 1);
     if (event.name === "right") setFontIndex((i) => i < fonts.length - 1 ? i + 1 : 0);
   });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines.map((line, i) => /* @__PURE__ */ jsx("text", { fg: "#88c0d0", bold: true, children: line }, i)) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines.map((line, i) => /* @__PURE__ */ jsx28("text", { fg: "#88c0d0", bold: true, children: line }, i)) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(
       StatusBar,
       {
         items: [{ key: "\u2190\u2192", label: "change font" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "cyan", bold: true }), children: font.name.padEnd(11) })
+        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "cyan", bold: true }), children: font.name.padEnd(11) })
       }
     ) })
   ] });
@@ -97,28 +2200,28 @@ function TableApp() {
     { name: "Bob", role: "Designer", status: "Active" },
     { name: "Charlie", role: "PM", status: "Away" }
   ];
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx(Table, { data, headerColor: "cyan", borderColor: "#5e81ac" }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(Table, { data, headerColor: "cyan", borderColor: "#5e81ac" }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 function SpinnerApp() {
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { flexGrow: 1, children: /* @__PURE__ */ jsx(SpinnerPicker, { useKeyboard }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }, { key: "q", label: "quit" }] }) })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { flexGrow: 1, children: /* @__PURE__ */ jsx28(SpinnerPicker, { useKeyboard }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 function SelectInputApp() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState11(false);
   const items = [
     { label: "TypeScript", value: "ts" },
     { label: "JavaScript", value: "js" },
     { label: "Python", value: "py" },
     { label: "Rust", value: "rs" }
   ];
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(SelectInput, { items, title: "Choose a language", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx28(SelectInput, { items, title: "Choose a language", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
       { key: "\u2191\u2193", label: "select" },
       { key: "enter", label: "submit" },
       { key: "q", label: "quit" }
@@ -126,16 +2229,16 @@ function SelectInputApp() {
   ] });
 }
 function MultiSelectApp() {
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState11(false);
   const items = [
     { label: "TypeScript", value: "ts" },
     { label: "JavaScript", value: "js" },
     { label: "Python", value: "py" },
     { label: "Rust", value: "rs" }
   ];
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(MultiSelect, { items, title: "Select languages", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx28(MultiSelect, { items, title: "Select languages", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
       { key: "\u2191\u2193", label: "move" },
       { key: "enter", label: "select" },
       { key: "a", label: "all" },
@@ -145,10 +2248,10 @@ function MultiSelectApp() {
   ] });
 }
 function PromptInputApp() {
-  const [lastMessage, setLastMessage] = useState("");
-  const [model, setModel] = useState("opus");
-  const [showModelPicker, setShowModelPicker] = useState(false);
-  const [resetKey, setResetKey] = useState(0);
+  const [lastMessage, setLastMessage] = useState11("");
+  const [model, setModel] = useState11("opus");
+  const [showModelPicker, setShowModelPicker] = useState11(false);
+  const [resetKey, setResetKey] = useState11(0);
   const commands = [
     { cmd: "/help", desc: "Show commands" },
     { cmd: "/model", desc: "Switch model" },
@@ -174,14 +2277,14 @@ function PromptInputApp() {
     setLastMessage(msg.text);
   };
   if (showModelPicker) {
-    return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28(
         Modal,
         {
           title: "Select Model",
           useKeyboard,
           onClose: () => setShowModelPicker(false),
-          children: /* @__PURE__ */ jsx("box", { paddingX: 1, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsx28(
             SelectInput,
             {
               items: models,
@@ -195,19 +2298,19 @@ function PromptInputApp() {
           ) })
         }
       ),
-      /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+      /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
         { key: "\u23CE", label: "select" },
         { key: "esc", label: "cancel" },
         { key: "q", label: "quit" }
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs("text", { children: [
-      /* @__PURE__ */ jsx("span", { children: "Sent: " }),
-      /* @__PURE__ */ jsx("span", { children: lastMessage })
-    ] }) : /* @__PURE__ */ jsx("text", { style: textStyle({ dim: true }), children: "Type a message and press enter" }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx28("span", { children: "Sent: " }),
+      /* @__PURE__ */ jsx28("span", { children: lastMessage })
+    ] }) : /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Type a message and press enter" }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsx28(
       PromptInput,
       {
         commands,
@@ -219,11 +2322,11 @@ function PromptInputApp() {
       },
       resetKey
     ) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, children: /* @__PURE__ */ jsxs("text", { children: [
-      /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "#C4A8FF" }), children: "[\u22A1_\u22A1]" }),
-      /* @__PURE__ */ jsx("span", { style: textStyle({ dim: true }), children: " " + model })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "#C4A8FF" }), children: "[\u22A1_\u22A1]" }),
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: " " + model })
     ] }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
       { key: "\u23CE", label: "send" },
       { key: "/", label: "commands" },
       { key: "@", label: "files" },
@@ -239,18 +2342,18 @@ var TEXT_INPUT_FIELDS = [
   { label: "API Key", placeholder: "sk-...", maxLength: 60, disabled: true }
 ];
 function TextInputApp() {
-  const [activeField, setActiveField] = useState(0);
-  const [values, setValues] = useState(TEXT_INPUT_FIELDS.map(() => ""));
+  const [activeField, setActiveField] = useState11(0);
+  const [values, setValues] = useState11(TEXT_INPUT_FIELDS.map(() => ""));
   useKeyboard((event) => {
     if (event.name === "up") setActiveField((i) => Math.max(0, i - 1));
     if (event.name === "down" || event.name === "tab") setActiveField((i) => Math.min(TEXT_INPUT_FIELDS.length - 1, i + 1));
   });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingTop: 1, children: /* @__PURE__ */ jsxs("text", { children: [
-      /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "#FF71CE", bold: true }), children: "TextInput" }),
-      /* @__PURE__ */ jsx("span", { style: textStyle({ dim: true }), children: "  Form with multiple input types" })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingTop: 1, children: /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "#FF71CE", bold: true }), children: "TextInput" }),
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: "  Form with multiple input types" })
     ] }) }),
-    /* @__PURE__ */ jsx("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: TEXT_INPUT_FIELDS.map((field, i) => /* @__PURE__ */ jsx("box", { marginBottom: 1, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx28("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: TEXT_INPUT_FIELDS.map((field, i) => /* @__PURE__ */ jsx28("box", { marginBottom: 1, children: /* @__PURE__ */ jsx28(
       TextInput,
       {
         label: field.label,
@@ -265,7 +2368,7 @@ function TextInputApp() {
         description: field.description
       }
     ) }, field.label)) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
       { key: "\u2191\u2193", label: "field" },
       { key: "\u2190\u2192", label: "cursor" },
       { key: "tab", label: "complete" },
@@ -274,24 +2377,24 @@ function TextInputApp() {
   ] });
 }
 function LinkApp() {
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx(LinkDemo, { useKeyboard }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(LinkDemo, { useKeyboard }) }),
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 function TabBarApp() {
   const tabs = ["Files", "Search", "Git", "Debug"];
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState11(0);
   useKeyboard((event) => {
     if (event.name === "left") setSelectedIndex((i) => i > 0 ? i - 1 : tabs.length - 1);
     if (event.name === "right") setSelectedIndex((i) => i < tabs.length - 1 ? i + 1 : 0);
   });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 1, padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx(TabBar, { label: "View", options: tabs, selectedIndex }),
-      /* @__PURE__ */ jsx("text", { style: textStyle({ dim: true }), children: "Use \u2190/\u2192 arrow keys to switch tabs" })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", gap: 1, padding: 1, flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28(TabBar, { label: "View", options: tabs, selectedIndex }),
+      /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Use \u2190/\u2192 arrow keys to switch tabs" })
     ] }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }, { key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 function StatusBarApp() {
@@ -301,7 +2404,7 @@ function StatusBarApp() {
     { key: "b", label: "back" },
     { key: "z", label: "reset" }
   ];
-  const [lastKey, setLastKey] = useState(null);
+  const [lastKey, setLastKey] = useState11(null);
   useKeyboard((event) => {
     if (event.name === "tab") setLastKey("switch focus (Tab)");
     else if (event.name === "left") setLastKey("cycle (\u2190)");
@@ -309,66 +2412,66 @@ function StatusBarApp() {
     else if (event.name === "b") setLastKey("back (b)");
     else if (event.name === "z") setLastKey("reset (z)");
   });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 1, padding: 1, children: [
-    lastKey ? /* @__PURE__ */ jsxs("text", { children: [
-      /* @__PURE__ */ jsx("span", { children: "Pressed: " }),
-      /* @__PURE__ */ jsx("span", { style: textStyle({ bold: true, fg: "cyan" }), children: lastKey })
-    ] }) : /* @__PURE__ */ jsx("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", gap: 1, padding: 1, children: [
+    lastKey ? /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx28("span", { children: "Pressed: " }),
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ bold: true, fg: "cyan" }), children: lastKey })
+    ] }) : /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
+    /* @__PURE__ */ jsx28(
       StatusBar,
       {
         items: [...shortcuts, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "green" }), children: "\u25CF Ready" })
+        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "green" }), children: "\u25CF Ready" })
       }
     )
   ] });
 }
 function ModalApp() {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState11(false);
   useKeyboard((event) => {
     if (!isOpen && event.name === "m") setIsOpen(true);
     if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
   });
   if (isOpen) {
-    return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx(Modal, { title: "Example Modal", borderColor: "blue", useKeyboard, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs("box", { paddingX: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx("text", { children: "This is a modal overlay component." }),
-        /* @__PURE__ */ jsx("text", { children: " " }),
-        /* @__PURE__ */ jsx("text", { style: textStyle({ dim: true }), children: "It stretches to fill the full terminal height." })
+    return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28(Modal, { title: "Example Modal", borderColor: "blue", useKeyboard, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs20("box", { paddingX: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx28("text", { children: "This is a modal overlay component." }),
+        /* @__PURE__ */ jsx28("text", { children: " " }),
+        /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "It stretches to fill the full terminal height." })
       ] }) }),
-      /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "close" }, { key: "Esc", label: "quit" }] }) })
+      /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "close" }, { key: "Esc", label: "quit" }] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs("text", { children: [
-      /* @__PURE__ */ jsx("span", { style: textStyle({ dim: true }), children: "Press " }),
-      /* @__PURE__ */ jsx("span", { style: textStyle({ inverse: true, bold: true }), children: " m " }),
-      /* @__PURE__ */ jsx("span", { style: textStyle({ dim: true }), children: " to open modal" })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: "Press " }),
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ inverse: true, bold: true }), children: " m " }),
+      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: " to open modal" })
     ] }) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "m", label: "open modal" }, { key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "m", label: "open modal" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 function PrimitivesApp() {
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx("box", { border: true, borderStyle: "rounded", borderColor: "#5e81ac", title: "Layout", titleAlignment: "center", padding: 1, children: /* @__PURE__ */ jsxs("box", { flexDirection: "row", gap: 2, children: [
-        /* @__PURE__ */ jsx("box", { border: true, borderStyle: "single", borderColor: "#a3be8c", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx("text", { fg: "#a3be8c", bold: true, children: "Box 1" }) }),
-        /* @__PURE__ */ jsx("box", { border: true, borderStyle: "single", borderColor: "#ebcb8b", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx("text", { fg: "#ebcb8b", bold: true, children: "Box 2" }) }),
-        /* @__PURE__ */ jsx("box", { border: true, borderStyle: "single", borderColor: "#b48ead", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx("text", { fg: "#b48ead", bold: true, children: "Box 3" }) })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "rounded", borderColor: "#5e81ac", title: "Layout", titleAlignment: "center", padding: 1, children: /* @__PURE__ */ jsxs20("box", { flexDirection: "row", gap: 2, children: [
+        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#a3be8c", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#a3be8c", bold: true, children: "Box 1" }) }),
+        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#ebcb8b", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#ebcb8b", bold: true, children: "Box 2" }) }),
+        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#b48ead", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#b48ead", bold: true, children: "Box 3" }) })
       ] }) }),
-      /* @__PURE__ */ jsx("text", { fg: "#d8dee9", dim: true, children: "  Nested boxes with borders, colors & flexbox layout" })
+      /* @__PURE__ */ jsx28("text", { fg: "#d8dee9", dim: true, children: "  Nested boxes with borders, colors & flexbox layout" })
     ] }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 function TerminalWindowApp() {
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx("text", { style: textStyle({ fg: "green" }), children: '$ echo "Hello from OpenTUI"' }),
-      /* @__PURE__ */ jsx("text", { children: "Hello from OpenTUI" }),
-      /* @__PURE__ */ jsx("text", { style: textStyle({ fg: "green" }), children: "$ _" })
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28("text", { style: textStyle({ fg: "green" }), children: '$ echo "Hello from OpenTUI"' }),
+      /* @__PURE__ */ jsx28("text", { children: "Hello from OpenTUI" }),
+      /* @__PURE__ */ jsx28("text", { style: textStyle({ fg: "green" }), children: "$ _" })
     ] }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 var TIMELINE_STEPS = [
@@ -379,10 +2482,10 @@ var TIMELINE_STEPS = [
   { tool: "Edit", label: "Fixing test \u2014 routes.test.ts", status: "done", delay: 1500 }
 ];
 function TimelineApp() {
-  const [expanded, setExpanded] = useState(true);
-  const [phase, setPhase] = useState("running");
-  const [stepIndex, setStepIndex] = useState(0);
-  const timerRef = useRef(null);
+  const [expanded, setExpanded] = useState11(true);
+  const [phase, setPhase] = useState11("running");
+  const [stepIndex, setStepIndex] = useState11(0);
+  const timerRef = useRef8(null);
   useKeyboard((event) => {
     if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
     if (event.name === "r") timelineRestart();
@@ -392,7 +2495,7 @@ function TimelineApp() {
     setPhase("running");
     setStepIndex(0);
   }
-  useEffect(() => {
+  useEffect5(() => {
     if (phase !== "running") return;
     if (stepIndex < TIMELINE_STEPS.length) {
       const delay = TIMELINE_STEPS[stepIndex].delay;
@@ -404,7 +2507,7 @@ function TimelineApp() {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [phase, stepIndex]);
-  useEffect(() => {
+  useEffect5(() => {
     if (phase === "done") {
       timerRef.current = setTimeout(() => timelineRestart(), 3e3);
     }
@@ -419,8 +2522,8 @@ function TimelineApp() {
   });
   const elapsedMs = TIMELINE_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
   const totalMs = TIMELINE_STEPS.reduce((sum, s) => sum + s.delay, 0);
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(
       Timeline,
       {
         steps,
@@ -428,7 +2531,7 @@ function TimelineApp() {
         collapsed: !expanded
       }
     ) }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
       { key: "ctrl+shift+e", label: "toggle" },
       { key: "r", label: "restart" },
       { key: "q", label: "quit" }
@@ -445,11 +2548,11 @@ var BUBBLE_STEPS = [
 var BUBBLE_RESPONSE = "I've refactored the auth module. The changes include extracting the token validation into a shared helper, consolidating the middleware chain, and updating the test suite to match.";
 var BUBBLE_TOTAL_MS = BUBBLE_STEPS.reduce((sum, s) => sum + s.delay, 0);
 function MessageApp() {
-  const [expanded, setExpanded] = useState(true);
-  const [phase, setPhase] = useState("idle");
-  const [stepIndex, setStepIndex] = useState(0);
-  const [streamedText, setStreamedText] = useState("");
-  const timerRef = useRef(null);
+  const [expanded, setExpanded] = useState11(true);
+  const [phase, setPhase] = useState11("idle");
+  const [stepIndex, setStepIndex] = useState11(0);
+  const [streamedText, setStreamedText] = useState11("");
+  const timerRef = useRef8(null);
   useKeyboard((event) => {
     if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
     if (event.name === "r") bubbleRestart();
@@ -460,7 +2563,7 @@ function MessageApp() {
     setStepIndex(0);
     setStreamedText("");
   }
-  useEffect(() => {
+  useEffect5(() => {
     if (phase === "idle") {
       timerRef.current = setTimeout(() => setPhase("thinking"), 800);
     }
@@ -468,7 +2571,7 @@ function MessageApp() {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [phase]);
-  useEffect(() => {
+  useEffect5(() => {
     if (phase !== "thinking") return;
     if (stepIndex < BUBBLE_STEPS.length) {
       const delay = BUBBLE_STEPS[stepIndex].delay;
@@ -480,7 +2583,7 @@ function MessageApp() {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [phase, stepIndex]);
-  useEffect(() => {
+  useEffect5(() => {
     if (phase !== "streaming") return;
     if (streamedText.length < BUBBLE_RESPONSE.length) {
       timerRef.current = setTimeout(() => {
@@ -493,7 +2596,7 @@ function MessageApp() {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [phase, streamedText]);
-  useEffect(() => {
+  useEffect5(() => {
     if (phase === "done") {
       timerRef.current = setTimeout(() => bubbleRestart(), 3e3);
     }
@@ -513,20 +2616,20 @@ function MessageApp() {
   const elapsedMs = BUBBLE_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
   const reasoningDuration = isThinking ? `${(elapsedMs / 1e3).toFixed(1)}s` : `${(BUBBLE_TOTAL_MS / 1e3).toFixed(1)}s`;
   const reasoningSteps = isThinking ? steps : BUBBLE_STEPS.map((s) => ({ ...s, status: "done" }));
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx(Message, { role: "user", children: /* @__PURE__ */ jsx(Message.Content, { children: /* @__PURE__ */ jsx(Message.Text, { children: "Can you refactor the auth module?" }) }) }),
-      showAssistant && /* @__PURE__ */ jsxs(Message, { role: "assistant", isStreaming, children: [
-        /* @__PURE__ */ jsx(Message.Reasoning, { part: {
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
+      /* @__PURE__ */ jsx28(Message, { role: "user", children: /* @__PURE__ */ jsx28(Message.Content, { children: /* @__PURE__ */ jsx28(Message.Text, { children: "Can you refactor the auth module?" }) }) }),
+      showAssistant && /* @__PURE__ */ jsxs20(Message, { role: "assistant", isStreaming, children: [
+        /* @__PURE__ */ jsx28(Message.Reasoning, { part: {
           type: "reasoning",
           duration: reasoningDuration,
           collapsed: !expanded,
           steps: reasoningSteps
         } }),
-        (isStreaming || isDone) && /* @__PURE__ */ jsx(Message.Content, { children: /* @__PURE__ */ jsx(Message.Text, { isLast: true, children: isDone ? BUBBLE_RESPONSE : streamedText }) })
+        (isStreaming || isDone) && /* @__PURE__ */ jsx28(Message.Content, { children: /* @__PURE__ */ jsx28(Message.Text, { isLast: true, children: isDone ? BUBBLE_RESPONSE : streamedText }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "ctrl+shift+e", label: "toggle timeline" }, { key: "r", label: "restart" }, { key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "ctrl+shift+e", label: "toggle timeline" }, { key: "r", label: "restart" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 var initialChatMessages = [
@@ -537,12 +2640,12 @@ var initialChatMessages = [
 ];
 var chatNextId = 5;
 function ChatApp() {
-  const [messages, setMessages] = useState(initialChatMessages);
-  const [isLoading, setIsLoading] = useState(false);
-  const [streamingText, setStreamingText] = useState("");
-  const [activeToolCalls, setActiveToolCalls] = useState([]);
-  const intervalRef = useRef(null);
-  const handleSend = useCallback((text) => {
+  const [messages, setMessages] = useState11(initialChatMessages);
+  const [isLoading, setIsLoading] = useState11(false);
+  const [streamingText, setStreamingText] = useState11("");
+  const [activeToolCalls, setActiveToolCalls] = useState11([]);
+  const intervalRef = useRef8(null);
+  const handleSend = useCallback3((text) => {
     const userMsg = { id: String(chatNextId++), role: "user", content: text };
     setMessages((prev) => [...prev, userMsg]);
     setIsLoading(true);
@@ -573,14 +2676,14 @@ function ChatApp() {
       }, 50);
     }, 1400);
   }, []);
-  const handleCancel = useCallback(() => {
+  const handleCancel = useCallback3(() => {
     if (intervalRef.current) clearInterval(intervalRef.current);
     setIsLoading(false);
     setStreamingText("");
     setActiveToolCalls([]);
   }, []);
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28(
       ChatPanel,
       {
         messages,
@@ -593,32 +2696,32 @@ function ChatApp() {
         useKeyboard
       }
     ),
-    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 var demos = [
-  { name: "gradient", app: () => /* @__PURE__ */ jsx(GradientApp, {}) },
-  { name: "ascii", app: () => /* @__PURE__ */ jsx(AsciiApp, {}) },
-  { name: "table", app: () => /* @__PURE__ */ jsx(TableApp, {}) },
-  { name: "spinner", app: () => /* @__PURE__ */ jsx(SpinnerApp, {}) },
-  { name: "select-input", app: () => /* @__PURE__ */ jsx(SelectInputApp, {}) },
-  { name: "multi-select", app: () => /* @__PURE__ */ jsx(MultiSelectApp, {}) },
-  { name: "prompt-input", app: () => /* @__PURE__ */ jsx(PromptInputApp, {}) },
-  { name: "text-input", app: () => /* @__PURE__ */ jsx(TextInputApp, {}) },
-  { name: "link", app: () => /* @__PURE__ */ jsx(LinkApp, {}) },
-  { name: "tabs", app: () => /* @__PURE__ */ jsx(TabBarApp, {}) },
-  { name: "status-bar", app: () => /* @__PURE__ */ jsx(StatusBarApp, {}) },
-  { name: "modal", app: () => /* @__PURE__ */ jsx(ModalApp, {}) },
-  { name: "primitives", app: () => /* @__PURE__ */ jsx(PrimitivesApp, {}) },
-  { name: "chat", app: () => /* @__PURE__ */ jsx(ChatApp, {}) },
-  { name: "timeline", app: () => /* @__PURE__ */ jsx(TimelineApp, {}) },
-  { name: "message", app: () => /* @__PURE__ */ jsx(MessageApp, {}) },
-  { name: "terminal-window", app: () => /* @__PURE__ */ jsx(TerminalWindowApp, {}) },
-  { name: "landing", app: () => /* @__PURE__ */ jsx(LandingApp, { useKeyboard }) }
+  { name: "gradient", app: () => /* @__PURE__ */ jsx28(GradientApp, {}) },
+  { name: "ascii", app: () => /* @__PURE__ */ jsx28(AsciiApp, {}) },
+  { name: "table", app: () => /* @__PURE__ */ jsx28(TableApp, {}) },
+  { name: "spinner", app: () => /* @__PURE__ */ jsx28(SpinnerApp, {}) },
+  { name: "select-input", app: () => /* @__PURE__ */ jsx28(SelectInputApp, {}) },
+  { name: "multi-select", app: () => /* @__PURE__ */ jsx28(MultiSelectApp, {}) },
+  { name: "prompt-input", app: () => /* @__PURE__ */ jsx28(PromptInputApp, {}) },
+  { name: "text-input", app: () => /* @__PURE__ */ jsx28(TextInputApp, {}) },
+  { name: "link", app: () => /* @__PURE__ */ jsx28(LinkApp, {}) },
+  { name: "tabs", app: () => /* @__PURE__ */ jsx28(TabBarApp, {}) },
+  { name: "status-bar", app: () => /* @__PURE__ */ jsx28(StatusBarApp, {}) },
+  { name: "modal", app: () => /* @__PURE__ */ jsx28(ModalApp, {}) },
+  { name: "primitives", app: () => /* @__PURE__ */ jsx28(PrimitivesApp, {}) },
+  { name: "chat", app: () => /* @__PURE__ */ jsx28(ChatApp, {}) },
+  { name: "timeline", app: () => /* @__PURE__ */ jsx28(TimelineApp, {}) },
+  { name: "message", app: () => /* @__PURE__ */ jsx28(MessageApp, {}) },
+  { name: "terminal-window", app: () => /* @__PURE__ */ jsx28(TerminalWindowApp, {}) },
+  { name: "landing", app: () => /* @__PURE__ */ jsx28(LandingApp, { useKeyboard }) }
 ];
 
 // src/run.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var _renderer;
 function DemoShell({ children }) {
   useKeyboard2((event) => {
@@ -626,7 +2729,7 @@ function DemoShell({ children }) {
       _renderer.destroy();
     }
   });
-  return /* @__PURE__ */ jsx2("box", { flexDirection: "column", flexGrow: 1, children });
+  return /* @__PURE__ */ jsx29("box", { flexDirection: "column", flexGrow: 1, children });
 }
 async function runDemo(name) {
   const demo = demos.find((d) => d.name === name);
@@ -636,7 +2739,7 @@ async function runDemo(name) {
     process.exit(1);
   }
   _renderer = await createCliRenderer({ exitOnCtrlC: true });
-  createRoot(_renderer).render(/* @__PURE__ */ jsx2(DemoShell, { children: demo.app() }));
+  createRoot(_renderer).render(/* @__PURE__ */ jsx29(DemoShell, { children: demo.app() }));
 }
 export {
   demos,