@gridland/demo 0.2.13 → 0.2.15

package/dist/run.js

@@ -1,1589 +1,32 @@
+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 as useState9, useCallback as useCallback2, useRef as useRef6 } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import { useKeyboard } from "@opentui/react";
-
-// ../ui/components/link/link.tsx
-import { jsx } from "react/jsx-runtime";
-var UNDERLINE = 1 << 3;
-var UNDERLINE_DASHED = 1 << 4;
-var UNDERLINE_DOTTED = 1 << 6;
-function Link({ children, url, underline = "solid" }) {
-  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__ */ jsx("text", { children: /* @__PURE__ */ jsx("a", { href: url, style: { attributes }, 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;
-  return {
-    ...opts.fg ? { fg: opts.fg } : {},
-    ...opts.bg ? { bg: opts.bg } : {},
-    ...attributes ? { attributes } : {}
-  };
-}
-
-// ../ui/components/status-bar/status-bar.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function StatusBar({ items, extra }) {
-  const parts = [];
-  if (extra !== void 0) {
-    parts.push(
-      /* @__PURE__ */ jsx2("span", { children: extra }, "extra")
-    );
-    parts.push(
-      /* @__PURE__ */ jsx2("span", { style: textStyle({ dim: true }), children: "  \u2502  " }, "pipe")
-    );
-  }
-  items.forEach((item, i) => {
-    if (i > 0) {
-      parts.push(/* @__PURE__ */ jsx2("span", { children: " " }, `gap-${i}`));
-    }
-    parts.push(
-      /* @__PURE__ */ jsx2("span", { style: textStyle({ inverse: true, bold: true }), children: ` ${item.key} ` }, `key-${i}`)
-    );
-    parts.push(
-      /* @__PURE__ */ jsx2("span", { style: textStyle({ dim: true }), children: ` ${item.label}` }, `label-${i}`)
-    );
-  });
-  if (parts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx2("text", { children: parts });
-}
-
-// ../ui/components/link/link-demo.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var MODES = ["solid", "dashed", "dotted", "none"];
-function LinkDemo({
-  url = "https://opentui.com",
-  label = "Visit opentui.com",
-  useKeyboard: useKeyboard3
-}) {
-  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__ */ jsx3(Link, { url, underline: mode, children: label }),
-    /* @__PURE__ */ jsx3(
-      StatusBar,
-      {
-        extra: /* @__PURE__ */ jsx3("span", { style: textStyle({ bold: true }), children: mode.padEnd(6) }),
-        items: [
-          { key: "\u2190\u2192", label: "underline style" }
-        ]
-      }
-    )
-  ] });
-}
-
-// ../ui/components/ascii/ascii.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-
-// ../ui/components/spinner/spinner.tsx
-import { useEffect, useState as useState2 } from "react";
-
-// ../ui/components/theme/themes.ts
-var darkTheme = {
-  primary: "#FF71CE",
-  accent: "#01CDFE",
-  secondary: "#B967FF",
-  muted: "#7B6F8E",
-  border: "#B967FF",
-  text: "#F0E6FF",
-  success: "#05FFA1",
-  error: "#FF6B6B",
-  warning: "#FFC164"
-};
-
-// ../ui/components/theme/theme-context.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ThemeContext = createContext(null);
-function useTheme() {
-  return useContext(ThemeContext) ?? darkTheme;
-}
-
-// ../ui/components/spinner/spinner.tsx
-import { jsx as jsx6, 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__ */ jsx6("span", { style: { fg: resolvedColor }, children: frames[frame] }),
-    text ? /* @__PURE__ */ jsxs2("span", { children: [
-      " ",
-      text
-    ] }) : null
-  ] });
-}
-
-// ../ui/components/spinner/spinner-showcase.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function SpinnerPicker({ useKeyboard: useKeyboard3 }) {
-  const theme = useTheme();
-  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__ */ jsx7("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx7(Spinner, { variant: selectedName, color: theme.accent }) }),
-    /* @__PURE__ */ jsx7(
-      StatusBar,
-      {
-        items: [{ key: "\u2190\u2192", label: "change spinner type" }],
-        extra: /* @__PURE__ */ jsx7("span", { style: textStyle({ fg: theme.accent, bold: true }), children: selectedName.padEnd(8) })
-      }
-    )
-  ] });
-}
-
-// ../ui/components/text-input/text-input.tsx
-import { useState as useState4, useCallback } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-function TextInput({
-  value: controlledValue,
-  onChange,
-  onSubmit,
-  placeholder = "",
-  prompt = "> ",
-  promptColor,
-  focus = true,
-  maxLength
-}) {
-  const theme = useTheme();
-  const resolvedPromptColor = promptColor ?? theme.accent;
-  const [internalValue, setInternalValue] = useState4("");
-  const isControlled = controlledValue !== void 0;
-  const displayValue = isControlled ? controlledValue : internalValue;
-  const handleInput = useCallback(
-    (newValue) => {
-      if (!isControlled) setInternalValue(newValue);
-      onChange?.(newValue);
-    },
-    [isControlled, onChange]
-  );
-  const handleSubmit = useCallback(
-    (value) => {
-      onSubmit?.(value);
-      if (!isControlled) setInternalValue("");
-    },
-    [isControlled, onSubmit]
-  );
-  return /* @__PURE__ */ jsxs4("box", { children: [
-    prompt && /* @__PURE__ */ jsx8("text", { style: { fg: resolvedPromptColor }, children: prompt }),
-    /* @__PURE__ */ jsx8(
-      "input",
-      {
-        value: displayValue,
-        placeholder,
-        maxLength,
-        focused: focus,
-        onInput: handleInput,
-        onSubmit: handleSubmit
-      }
-    )
-  ] });
-}
-
-// ../ui/components/select-input/select-input.tsx
-import { useReducer, useMemo, useRef } from "react";
-import { jsx as jsx9, 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: useKeyboard3
-}) {
-  const theme = useTheme();
-  const resolvedHighlight = highlightColor ?? theme.primary;
-  const isControlled = controlledValue !== void 0;
-  const controlledRef = useRef(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__ */ jsx9("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
-        /* @__PURE__ */ jsx9("span", { style: textStyle({ bold: true }), children: title })
-      ] }),
-      selectedItem && /* @__PURE__ */ jsxs5("text", { children: [
-        /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.success }), children: [
-          BAR,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx9("span", { children: "  " }),
-        /* @__PURE__ */ jsx9("span", { style: textStyle({ fg: theme.success }), children: "\u25CF " }),
-        /* @__PURE__ */ jsx9("span", { children: selectedItem.label })
-      ] }),
-      /* @__PURE__ */ jsx9("text", { children: " " }),
-      /* @__PURE__ */ jsx9("text", { children: /* @__PURE__ */ jsx9("span", { style: textStyle({ dim: true }), children: submittedStatus }) })
-    ] });
-  }
-  const hasItems = selectableItems.length > 0;
-  return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs5("text", { children: [
-      /* @__PURE__ */ jsx9("span", { style: textStyle({ fg: diamondColor, dim: disabled }), children: "\u25C6 " }),
-      /* @__PURE__ */ jsx9("span", { style: textStyle({ bold: true, dim: disabled }), children: title }),
-      required && /* @__PURE__ */ jsx9("span", { style: textStyle({ fg: theme.error }), children: " *" })
-    ] }),
-    invalid && /* @__PURE__ */ jsxs5("text", { children: [
-      /* @__PURE__ */ jsxs5("span", { style: textStyle({ fg: theme.muted }), children: [
-        BAR,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx9("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 }), 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__ */ jsx9("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 : void 0;
-      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__ */ jsx9("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 useRef2 } from "react";
-import { jsx as jsx10, 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: useKeyboard3
-}) {
-  const theme = useTheme();
-  const resolvedHighlight = highlightColor ?? theme.primary;
-  const resolvedCheckbox = checkboxColor ?? theme.accent;
-  const isControlled = controlledSelected !== void 0;
-  const controlledRef = useRef2(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 = useRef2(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__ */ jsx10("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
-        /* @__PURE__ */ jsx10("span", { style: textStyle({ bold: true }), children: title })
-      ] }),
-      selectedItems.map((item) => /* @__PURE__ */ jsxs6("text", { children: [
-        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.success }), children: [
-          BAR2,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx10("span", { children: "  " }),
-        /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.success }), children: [
-          CHECKED,
-          " "
-        ] }),
-        /* @__PURE__ */ jsx10("span", { children: item.label })
-      ] }, item.key ?? String(item.value))),
-      /* @__PURE__ */ jsx10("text", { children: " " }),
-      /* @__PURE__ */ jsx10("text", { children: /* @__PURE__ */ jsxs6("span", { style: textStyle({ dim: true }), children: [
-        selectedItems.length,
-        " selected \u2014 ",
-        submittedStatus
-      ] }) })
-    ] });
-  }
-  const hasItems = selectableItems.length > 0;
-  return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs6("text", { children: [
-      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: diamondColor, dim: disabled }), children: "\u25C6 " }),
-      /* @__PURE__ */ jsx10("span", { style: textStyle({ bold: true, dim: disabled }), children: title }),
-      required && /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.error }), children: " *" }),
-      maxCount !== void 0 && /* @__PURE__ */ jsx10("span", { style: textStyle({ dim: true }), children: ` (${currentSelected.size}/${maxCount})` })
-    ] }),
-    invalid && /* @__PURE__ */ jsxs6("text", { children: [
-      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
-        BAR2,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx10("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 }), 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__ */ 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 isSelected = currentSelected.has(item.value);
-      const isItemDisabled = disabled || !!item.disabled;
-      const itemColor = isItemDisabled ? theme.muted : isHighlighted ? resolvedHighlight : isSelected ? resolvedCheckbox : void 0;
-      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__ */ jsx10("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__ */ jsx10("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.muted }), children: "\u21B3 " }),
-      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.text }), children: "Submit" })
-    ] })
-  ] });
-}
-
-// ../ui/components/table/table.tsx
-import { Fragment } from "react";
-import { jsx as jsx11, 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__ */ jsx11("text", { children: /* @__PURE__ */ jsxs7("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: [
-      left,
-      inner,
-      right
-    ] }) });
-  };
-  const contentRow = (rowData, isHeader) => {
-    const parts = [];
-    parts.push(
-      /* @__PURE__ */ jsx11("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__ */ jsx11("span", { style: textStyle({ fg: resolvedHeaderColor, bold: true }), children: padded }, `cell-${i}`)
-        );
-      } else {
-        parts.push(/* @__PURE__ */ jsx11("span", { children: padded }, `cell-${i}`));
-      }
-      if (i < colInfo.length - 1) {
-        parts.push(
-          /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, `sep-${i}`)
-        );
-      }
-    });
-    parts.push(
-      /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, "right-border")
-    );
-    return /* @__PURE__ */ jsx11("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 jsx12 } 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__ */ jsx12("text", { children });
-  const hexColors = generateGradient(gradientColors, maxLength);
-  return /* @__PURE__ */ jsx12(Fragment2, { children: lines.map((line, lineIndex) => /* @__PURE__ */ jsx12("text", { children: line.split("").map((char, charIndex) => /* @__PURE__ */ jsx12("span", { style: { fg: hexColors[charIndex] }, children: char }, charIndex)) }, lineIndex)) });
-}
-
-// ../ui/components/tab-bar/tab-bar.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-function TabBar({
-  label,
-  options,
-  selectedIndex,
-  focused = true,
-  activeColor
-}) {
-  const theme = useTheme();
-  const resolvedActiveColor = activeColor ?? theme.accent;
-  const parts = [];
-  if (label !== void 0) {
-    parts.push(
-      /* @__PURE__ */ jsx13(
-        "span",
-        {
-          style: focused ? textStyle({ bold: true }) : textStyle({ dim: true }),
-          children: label
-        },
-        "label"
-      )
-    );
-  }
-  parts.push(/* @__PURE__ */ jsx13("span", { children: " " }, "sep"));
-  options.forEach((option, i) => {
-    const isSelected = i === selectedIndex;
-    const padded = ` ${option} `;
-    if (isSelected && focused) {
-      parts.push(
-        /* @__PURE__ */ jsx13(
-          "span",
-          {
-            style: textStyle({ inverse: true, bold: true, fg: resolvedActiveColor }),
-            children: padded
-          },
-          `opt-${i}`
-        )
-      );
-    } else if (isSelected && !focused) {
-      parts.push(
-        /* @__PURE__ */ jsx13(
-          "span",
-          {
-            style: textStyle({ inverse: true, bold: true, dim: true }),
-            children: padded
-          },
-          `opt-${i}`
-        )
-      );
-    } else if (!focused) {
-      parts.push(
-        /* @__PURE__ */ jsx13("span", { style: textStyle({ dim: true }), children: padded }, `opt-${i}`)
-      );
-    } else {
-      parts.push(/* @__PURE__ */ jsx13("span", { children: padded }, `opt-${i}`));
-    }
-  });
-  return /* @__PURE__ */ jsx13("text", { children: parts });
-}
-
-// ../ui/components/modal/modal.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-function Modal({
-  children,
-  title,
-  borderColor,
-  borderStyle = "rounded",
-  onClose,
-  useKeyboard: useKeyboard3
-}) {
-  const theme = useTheme();
-  const resolvedBorderColor = borderColor ?? theme.border;
-  useKeyboard3?.((event) => {
-    if (event.name === "escape" && onClose) {
-      onClose();
-    }
-  });
-  return /* @__PURE__ */ jsx14("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx14(
-    "box",
-    {
-      flexDirection: "column",
-      flexGrow: 1,
-      border: true,
-      borderStyle,
-      borderColor: resolvedBorderColor,
-      children: title ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx14("box", { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx14("text", { style: textStyle({ bold: true, fg: resolvedBorderColor }), children: title }) }),
-        children
-      ] }) : children
-    }
-  ) });
-}
-
-// ../ui/components/chat/chat.tsx
-import { useState as useState5, useRef as useRef3 } from "react";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } 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
-}) {
-  const isUser = message.role === "user";
-  const prefix = isUser ? "> " : "< ";
-  const color = isUser ? userColor : assistantColor;
-  return /* @__PURE__ */ jsxs9("text", { wrapMode: "word", children: [
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ bold: true, fg: color }), children: prefix }),
-    /* @__PURE__ */ jsx15("span", { children: message.content })
-  ] });
-}
-function StreamingTextDisplay({
-  text,
-  assistantColor,
-  cursorChar = "_"
-}) {
-  if (!text) return null;
-  return /* @__PURE__ */ jsxs9("text", { wrapMode: "word", children: [
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ bold: true, fg: assistantColor }), children: "< " }),
-    /* @__PURE__ */ jsx15("span", { children: text }),
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ dim: true }), 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__ */ jsxs9("text", { children: [
-    /* @__PURE__ */ jsx15("span", { children: "  " }),
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ fg: color }), children: icon }),
-    /* @__PURE__ */ jsx15("span", { children: " " }),
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ fg: color }), children: toolCall.title }),
-    showEllipsis && /* @__PURE__ */ jsx15("span", { style: textStyle({ dim: true }), children: " ..." })
-  ] });
-}
-function ChatInput({
-  onSubmit,
-  placeholder = "Type a message...",
-  prompt = "> ",
-  promptColor,
-  disabled = false,
-  useKeyboard: useKeyboard3
-}) {
-  const [value, setValue] = useState5("");
-  const valueRef = useRef3("");
-  const updateValue = (newValue) => {
-    valueRef.current = newValue;
-    setValue(newValue);
-  };
-  useKeyboard3?.((event) => {
-    if (disabled) return;
-    if (event.name === "return") {
-      const trimmed = valueRef.current.trim();
-      if (trimmed) {
-        onSubmit(trimmed);
-        updateValue("");
-      }
-      return;
-    }
-    if (event.name === "backspace" || event.name === "delete") {
-      updateValue(valueRef.current.slice(0, -1));
-      return;
-    }
-    if (event.ctrl || event.meta) return;
-    if (event.name && event.name.length === 1) {
-      updateValue(valueRef.current + event.name);
-      return;
-    }
-    if (event.name === "space") {
-      updateValue(valueRef.current + " ");
-      return;
-    }
-  });
-  const showPlaceholder = value.length === 0;
-  return /* @__PURE__ */ jsxs9("text", { children: [
-    /* @__PURE__ */ jsx15("span", { style: textStyle({ fg: promptColor }), children: prompt }),
-    showPlaceholder ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      /* @__PURE__ */ jsx15("span", { style: textStyle({ dim: true }), children: placeholder }),
-      !disabled && /* @__PURE__ */ jsx15("span", { style: textStyle({ inverse: true }), children: " " })
-    ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      /* @__PURE__ */ jsx15("span", { children: value }),
-      !disabled && /* @__PURE__ */ jsx15("span", { style: textStyle({ inverse: true }), children: " " })
-    ] })
-  ] });
-}
-function ChatPanel({
-  messages,
-  streamingText = "",
-  isLoading = false,
-  activeToolCalls = [],
-  onSendMessage,
-  onCancel,
-  placeholder = "Type a message...",
-  promptChar = "> ",
-  promptColor,
-  userColor,
-  assistantColor,
-  loadingText = "Thinking...",
-  useKeyboard: useKeyboard3
-}) {
-  const theme = useTheme();
-  const resolvedUserColor = userColor ?? theme.secondary;
-  const resolvedAssistantColor = assistantColor ?? theme.primary;
-  const resolvedPromptColor = promptColor ?? theme.secondary;
-  const statusColors = getStatusColors(theme);
-  const inputDisabled = isLoading || !!streamingText;
-  const wrappedUseKeyboard = useKeyboard3 ? (handler) => {
-    useKeyboard3((event) => {
-      if (event.name === "escape" && inputDisabled && onCancel) {
-        onCancel();
-        return;
-      }
-      handler(event);
-    });
-  } : void 0;
-  return /* @__PURE__ */ jsxs9("box", { flexDirection: "column", paddingX: 1, children: [
-    messages.map((msg) => /* @__PURE__ */ jsx15(
-      MessageBubble,
-      {
-        message: msg,
-        userColor: resolvedUserColor,
-        assistantColor: resolvedAssistantColor
-      },
-      msg.id
-    )),
-    activeToolCalls.map((tc) => /* @__PURE__ */ jsx15(ToolCallCard, { toolCall: tc, statusColors }, tc.id)),
-    streamingText ? /* @__PURE__ */ jsx15(
-      StreamingTextDisplay,
-      {
-        text: streamingText,
-        assistantColor: resolvedAssistantColor
-      }
-    ) : isLoading ? /* @__PURE__ */ jsxs9("text", { style: textStyle({ dim: true }), children: [
-      "  ",
-      loadingText
-    ] }) : null,
-    /* @__PURE__ */ jsx15("box", { marginTop: 1, children: /* @__PURE__ */ jsx15(
-      ChatInput,
-      {
-        onSubmit: onSendMessage,
-        placeholder,
-        prompt: promptChar,
-        promptColor: resolvedPromptColor,
-        disabled: inputDisabled,
-        useKeyboard: wrappedUseKeyboard
-      }
-    ) })
-  ] });
-}
-
-// ../ui/components/terminal-window/terminal-window.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-
-// ../ui/components/made-with-opentui/made-with-opentui.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-
-// ../ui/components/made-with-gridland/made-with-gridland.tsx
-import { jsx as jsx18, jsxs as jsxs12 } 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 useState8 } from "react";
-
-// ../docs/components/landing/logo.tsx
-import { useState as useState6, useEffect as useEffect2, useRef as useRef4, useMemo as useMemo3 } from "react";
 import figlet from "figlet";
 import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs13 } 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] = useState6(isBrowser ? 0 : 1);
-  const startTime = useRef4(null);
-  useEffect2(() => {
-    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__ */ jsx19("text", { children });
-  const hexColors = useMemo3(() => generateGradient(gradientColors, maxLength), [maxLength]);
-  return /* @__PURE__ */ jsx19("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__ */ jsx19(
-      "box",
-      {
-        position: "absolute",
-        top: lineIndex,
-        left: run.start,
-        shouldFill: false,
-        children: /* @__PURE__ */ jsx19("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx19(
-          "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__ */ jsxs13(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("text", { children: " " }),
-    /* @__PURE__ */ jsx19("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs13("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__ */ jsx19("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__ */ jsxs13("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", children: [
-      /* @__PURE__ */ jsx19(Gradient, { name: "instagram", children: art }),
-      /* @__PURE__ */ jsx19("text", { children: " " }),
-      /* @__PURE__ */ jsx19("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs13("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__ */ jsxs13("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx19("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx19("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx19(RevealGradient, { revealCol, children: "gridland" }) }) }),
-      subtitle
-    ] });
-  }
-  if (narrow) {
-    return /* @__PURE__ */ jsxs13("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx19("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs13("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
-        /* @__PURE__ */ jsx19(RevealGradient, { revealCol, children: gridArt }),
-        /* @__PURE__ */ jsx19(RevealGradient, { revealCol, children: landArt })
-      ] }) }),
-      subtitle
-    ] });
-  }
-  return /* @__PURE__ */ jsxs13("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-    /* @__PURE__ */ jsx19("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx19("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx19(RevealGradient, { revealCol, children: fullArt }) }) }),
-    subtitle
-  ] });
-}
-
-// ../docs/components/landing/install-box.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-function InstallBox() {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx20(
-    "box",
-    {
-      border: true,
-      borderStyle: "rounded",
-      borderColor: theme.border,
-      paddingX: 1,
-      flexDirection: "column",
-      flexShrink: 0,
-      children: /* @__PURE__ */ jsxs14("text", { children: [
-        /* @__PURE__ */ jsx20("span", { style: textStyle({ dim: true }), children: "$ " }),
-        /* @__PURE__ */ jsx20("span", { style: textStyle({ bold: true }), children: "bun create " }),
-        /* @__PURE__ */ jsx20("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
-      ] })
-    }
-  );
-}
-
-// ../docs/components/landing/links-box.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-var UNDERLINE3 = 1 << 3;
-function LinksBox() {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx21(
-    "box",
-    {
-      border: true,
-      borderStyle: "rounded",
-      borderColor: theme.border,
-      paddingX: 1,
-      flexDirection: "column",
-      flexShrink: 0,
-      children: /* @__PURE__ */ jsxs15("text", { children: [
-        /* @__PURE__ */ jsx21("span", { children: "\u{1F431}" }),
-        /* @__PURE__ */ jsx21("a", { href: "https://github.com/cjroth/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
-        /* @__PURE__ */ jsx21("span", { children: "  " }),
-        /* @__PURE__ */ jsx21("span", { children: "\u{1F4D6}" }),
-        /* @__PURE__ */ jsx21("a", { href: "/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
-      ] })
-    }
-  );
-}
-
-// ../docs/components/landing/matrix-background.tsx
-import { useMemo as useMemo4 } from "react";
-
-// ../docs/components/landing/use-matrix.ts
-import { useState as useState7, useEffect as useEffect3, useRef as useRef5 } 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 = useRef5([]);
-  const [state, setState] = useState7(() => {
-    const columns = Array.from(
-      { length: width },
-      () => Math.random() < 0.5 ? createDrop(height, true) : null
-    );
-    columnsRef.current = columns;
-    return buildGrid(columns, width, height);
-  });
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    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 jsx22 } 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 = useMemo4(
-    () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
-    [width, theme.accent, theme.secondary, theme.primary]
-  );
-  const columnMutedColors = useMemo4(
-    () => columnColors.map(buildMutedColors),
-    [columnColors]
-  );
-  return /* @__PURE__ */ jsx22("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx22("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__ */ jsx22("span", { children: " " }, x);
-    }
-    return /* @__PURE__ */ jsx22(
-      "span",
-      {
-        style: {
-          fg: colorForCell(mutedColors, brightness[y][x])
-        },
-        children: cell
-      },
-      x
-    );
-  }) }, y)) });
-}
-
-// ../docs/components/landing/about-modal.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-function AboutModal({ onClose, useKeyboard: useKeyboard3 }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx23(Modal, { title: "About Gridland", useKeyboard: useKeyboard3, onClose, children: /* @__PURE__ */ jsxs16("box", { paddingX: 1, flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx23("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "What is Gridland?" }),
-    /* @__PURE__ */ jsx23("text", { children: "Gridland renders terminal UIs to HTML5 Canvas with React." }),
-    /* @__PURE__ */ jsx23("text", { children: "No xterm.js. No terminal emulator. Just pixels." }),
-    /* @__PURE__ */ jsx23("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Features" }),
-    /* @__PURE__ */ jsxs16("text", { children: [
-      /* @__PURE__ */ jsxs16("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Canvas-rendered TUI components"
-    ] }),
-    /* @__PURE__ */ jsxs16("text", { children: [
-      /* @__PURE__ */ jsxs16("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "React reconciler with JSX"
-    ] }),
-    /* @__PURE__ */ jsxs16("text", { children: [
-      /* @__PURE__ */ jsxs16("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Yoga flexbox layout engine"
-    ] }),
-    /* @__PURE__ */ jsxs16("text", { children: [
-      /* @__PURE__ */ jsxs16("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Keyboard, mouse, and clipboard support"
-    ] }),
-    /* @__PURE__ */ jsxs16("text", { children: [
-      /* @__PURE__ */ jsxs16("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Next.js and Vite plugins"
-    ] }),
-    /* @__PURE__ */ jsx23("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Tech Stack" }),
-    /* @__PURE__ */ jsx23("text", { children: "React + opentui engine + yoga-layout + HTML5 Canvas" }),
-    /* @__PURE__ */ jsx23("text", { style: textStyle({ dim: true }), children: "Press q to close" })
-  ] }) });
-}
-
-// ../docs/components/landing/landing-app.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-function LandingApp({ useKeyboard: useKeyboard3 }) {
-  const theme = useTheme();
-  const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
-  const [showAbout, setShowAbout] = useState8(false);
-  useKeyboard3((event) => {
-    if (event.name === "a" && !showAbout) {
-      setShowAbout(true);
-    }
-    if (event.name === "q" && showAbout) {
-      setShowAbout(false);
-    }
-  });
-  if (showAbout) {
-    return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", width: "100%", height: "100%", children: [
-      /* @__PURE__ */ jsx24("box", { flexGrow: 1, children: /* @__PURE__ */ jsx24(AboutModal, { onClose: () => setShowAbout(false), useKeyboard: useKeyboard3 }) }),
-      /* @__PURE__ */ jsx24(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__ */ jsxs17("box", { width: "100%", height: "100%", position: "relative", children: [
-    /* @__PURE__ */ jsx24(MatrixBackground, { width, height, clearRect, clearRects: [installLinksClearRect] }),
-    /* @__PURE__ */ jsxs17(
-      "box",
-      {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width,
-        height,
-        zIndex: 1,
-        flexDirection: "column",
-        shouldFill: false,
-        children: [
-          /* @__PURE__ */ jsxs17("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
-            /* @__PURE__ */ jsx24("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx24(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
-            /* @__PURE__ */ jsxs17("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
-              /* @__PURE__ */ jsx24(
-                "box",
-                {
-                  border: true,
-                  borderStyle: "rounded",
-                  borderColor: theme.border,
-                  paddingX: 1,
-                  flexDirection: "column",
-                  flexShrink: 0,
-                  children: /* @__PURE__ */ jsxs17("text", { children: [
-                    /* @__PURE__ */ jsx24("span", { style: textStyle({ dim: true }), children: "$ " }),
-                    /* @__PURE__ */ jsx24("span", { style: textStyle({ bold: true }), children: "bunx " }),
-                    /* @__PURE__ */ jsx24("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx24(InstallBox, {}),
-              /* @__PURE__ */ jsx24(LinksBox, {})
-            ] }),
-            /* @__PURE__ */ jsx24(
-              "box",
-              {
-                flexGrow: 1,
-                border: true,
-                borderStyle: "rounded",
-                borderColor: theme.border
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx24(
-            StatusBar,
-            {
-              items: [
-                { key: "a", label: "about" }
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// ../docs/components/landing/matrix-rain.tsx
-import { jsx as jsx25 } 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";
@@ -1591,9 +34,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 as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var fonts = [
-  { name: "ANSI Shadow", data: ansiShadow2 },
+  { name: "ANSI Shadow", data: ansiShadow },
   { name: "Standard", data: standard },
   { name: "Big", data: big },
   { name: "Doom", data: doom },
@@ -1603,49 +46,49 @@ var fonts = [
   { name: "Colossal", data: colossal }
 ];
 for (const f of fonts) {
-  figlet2.parseFont(f.name, f.data);
+  figlet.parseFont(f.name, f.data);
 }
 function getFigletLines(fontName, text = "gridland") {
-  const art = figlet2.textSync(text, { font: fontName });
+  const art = figlet.textSync(text, { font: fontName });
   return art.split("\n").filter((l) => l.trimEnd().length > 0);
 }
 var gradientNames = Object.keys(GRADIENTS);
 function GradientApp() {
-  const [index, setIndex] = useState9(0);
+  const [index, setIndex] = useState(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__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx26(Gradient, { name, children: lines.join("\n") }) }),
-    /* @__PURE__ */ jsx26(
+  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(
       StatusBar,
       {
         items: [{ key: "\u2190\u2192", label: "gradient" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: "cyan", bold: true }), children: name.padEnd(11) })
+        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "cyan", bold: true }), children: name.padEnd(11) })
       }
-    )
+    ) })
   ] });
 }
 function AsciiApp() {
-  const [fontIndex, setFontIndex] = useState9(0);
+  const [fontIndex, setFontIndex] = useState(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__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines.map((line, i) => /* @__PURE__ */ jsx26("text", { fg: "#88c0d0", bold: true, children: line }, i)) }),
-    /* @__PURE__ */ jsx26(
+  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(
       StatusBar,
       {
         items: [{ key: "\u2190\u2192", label: "change font" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: "cyan", bold: true }), children: font.name.padEnd(11) })
+        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "cyan", bold: true }), children: font.name.padEnd(11) })
       }
-    )
+    ) })
   ] });
 }
 function TableApp() {
@@ -1654,81 +97,201 @@ function TableApp() {
     { name: "Bob", role: "Designer", status: "Active" },
     { name: "Charlie", role: "PM", status: "Away" }
   ];
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx26(Table, { data, headerColor: "cyan", borderColor: "#5e81ac" }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+  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" }] }) })
   ] });
 }
 function SpinnerApp() {
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { flexGrow: 1, children: /* @__PURE__ */ jsx26(SpinnerPicker, { useKeyboard }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }, { key: "q", label: "quit" }] })
+  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" }] }) })
   ] });
 }
 function SelectInputApp() {
-  const [submitted, setSubmitted] = useState9(false);
+  const [submitted, setSubmitted] = useState(false);
   const items = [
     { label: "TypeScript", value: "ts" },
     { label: "JavaScript", value: "js" },
     { label: "Python", value: "py" },
     { label: "Rust", value: "rs" }
   ];
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx26(SelectInput, { items, title: "Choose a language", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
+  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" }] : [
       { key: "\u2191\u2193", label: "select" },
       { key: "enter", label: "submit" },
       { key: "q", label: "quit" }
-    ] })
+    ] }) })
   ] });
 }
 function MultiSelectApp() {
-  const [submitted, setSubmitted] = useState9(false);
+  const [submitted, setSubmitted] = useState(false);
   const items = [
     { label: "TypeScript", value: "ts" },
     { label: "JavaScript", value: "js" },
     { label: "Python", value: "py" },
     { label: "Rust", value: "rs" }
   ];
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx26(MultiSelect, { items, title: "Select languages", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
+  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" }] : [
       { key: "\u2191\u2193", label: "move" },
       { key: "enter", label: "select" },
       { key: "a", label: "all" },
       { key: "x", label: "clear" },
       { key: "q", label: "quit" }
-    ] })
+    ] }) })
+  ] });
+}
+function PromptInputApp() {
+  const [lastMessage, setLastMessage] = useState("");
+  const [model, setModel] = useState("opus");
+  const [showModelPicker, setShowModelPicker] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+  const commands = [
+    { cmd: "/help", desc: "Show commands" },
+    { cmd: "/model", desc: "Switch model" },
+    { cmd: "/clear", desc: "Clear conversation" }
+  ];
+  const files = ["src/index.ts", "src/routes.ts", "src/auth.ts", "package.json"];
+  const models = [
+    { label: "Claude Opus", value: "opus" },
+    { label: "Claude Sonnet", value: "sonnet" },
+    { label: "Claude Haiku", value: "haiku" }
+  ];
+  const handleSubmit = (msg) => {
+    if (msg.text === "/model") {
+      setShowModelPicker(true);
+      setResetKey((k) => k + 1);
+      return;
+    }
+    if (msg.text === "/clear") {
+      setLastMessage("");
+      setResetKey((k) => k + 1);
+      return;
+    }
+    setLastMessage(msg.text);
+  };
+  if (showModelPicker) {
+    return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx(
+        Modal,
+        {
+          title: "Select Model",
+          useKeyboard,
+          onClose: () => setShowModelPicker(false),
+          children: /* @__PURE__ */ jsx("box", { paddingX: 1, children: /* @__PURE__ */ jsx(
+            SelectInput,
+            {
+              items: models,
+              defaultValue: model,
+              useKeyboard,
+              onSubmit: (value) => {
+                setModel(value);
+                setShowModelPicker(false);
+              }
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(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(
+      PromptInput,
+      {
+        commands,
+        files,
+        placeholder: "Message Claude...",
+        showDividers: true,
+        useKeyboard,
+        onSubmit: handleSubmit
+      },
+      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__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+      { key: "\u23CE", label: "send" },
+      { key: "/", label: "commands" },
+      { key: "@", label: "files" },
+      { key: "\u2191", label: "history" },
+      { key: "q", label: "quit" }
+    ] }) })
   ] });
 }
+var TEXT_INPUT_FIELDS = [
+  { label: "Username", placeholder: "enter your name", maxLength: 30, required: true },
+  { label: "Email", placeholder: "user@example.com", maxLength: 50, required: true, description: "We'll never share your email" },
+  { label: "Password", placeholder: "enter password", maxLength: 40 },
+  { label: "API Key", placeholder: "sk-...", maxLength: 60, disabled: true }
+];
 function TextInputApp() {
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs18("box", { padding: 1, flexDirection: "column", gap: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx26("text", { fg: "#d8dee9", bold: true, children: "Enter your name:" }),
-      /* @__PURE__ */ jsx26(TextInput, { placeholder: "Type something...", prompt: "> " })
-    ] }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+  const [activeField, setActiveField] = useState(0);
+  const [values, setValues] = useState(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" })
+    ] }) }),
+    /* @__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(
+      TextInput,
+      {
+        label: field.label,
+        placeholder: field.placeholder,
+        prompt: "> ",
+        focus: i === activeField,
+        maxLength: field.maxLength,
+        value: values[i],
+        onChange: (v) => setValues((prev) => prev.map((old, j) => j === i ? v : old)),
+        required: field.required,
+        disabled: field.disabled,
+        description: field.description
+      }
+    ) }, field.label)) }),
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+      { key: "\u2191\u2193", label: "field" },
+      { key: "\u2190\u2192", label: "cursor" },
+      { key: "tab", label: "complete" },
+      { key: "^k/^u", label: "kill" }
+    ] }) })
   ] });
 }
 function LinkApp() {
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx26(LinkDemo, { useKeyboard }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+  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" }] }) })
   ] });
 }
 function TabBarApp() {
   const tabs = ["Files", "Search", "Git", "Debug"];
-  const [selectedIndex, setSelectedIndex] = useState9(0);
+  const [selectedIndex, setSelectedIndex] = useState(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__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs18("box", { flexDirection: "column", gap: 1, padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx26(TabBar, { label: "View", options: tabs, selectedIndex }),
-      /* @__PURE__ */ jsx26("text", { style: textStyle({ dim: true }), children: "Use \u2190/\u2192 arrow keys to switch tabs" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }, { key: "q", label: "quit" }] })
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 function StatusBarApp() {
@@ -1738,7 +301,7 @@ function StatusBarApp() {
     { key: "b", label: "back" },
     { key: "z", label: "reset" }
   ];
-  const [lastKey, setLastKey] = useState9(null);
+  const [lastKey, setLastKey] = useState(null);
   useKeyboard((event) => {
     if (event.name === "tab") setLastKey("switch focus (Tab)");
     else if (event.name === "left") setLastKey("cycle (\u2190)");
@@ -1746,66 +309,224 @@ function StatusBarApp() {
     else if (event.name === "b") setLastKey("back (b)");
     else if (event.name === "z") setLastKey("reset (z)");
   });
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", gap: 1, padding: 1, children: [
-    lastKey ? /* @__PURE__ */ jsxs18("text", { children: [
-      /* @__PURE__ */ jsx26("span", { children: "Pressed: " }),
-      /* @__PURE__ */ jsx26("span", { style: textStyle({ bold: true, fg: "cyan" }), children: lastKey })
-    ] }) : /* @__PURE__ */ jsx26("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
-    /* @__PURE__ */ jsx26(
+  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(
       StatusBar,
       {
         items: [...shortcuts, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: "green" }), children: "\u25CF Ready" })
+        extra: /* @__PURE__ */ jsx("span", { style: textStyle({ fg: "green" }), children: "\u25CF Ready" })
       }
     )
   ] });
 }
 function ModalApp() {
-  const [isOpen, setIsOpen] = useState9(false);
+  const [isOpen, setIsOpen] = useState(false);
   useKeyboard((event) => {
     if (!isOpen && event.name === "m") setIsOpen(true);
     if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
   });
   if (isOpen) {
-    return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx26(Modal, { title: "Example Modal", borderColor: "blue", useKeyboard, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs18("box", { paddingX: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx26("text", { children: "This is a modal overlay component." }),
-        /* @__PURE__ */ jsx26("text", { children: " " }),
-        /* @__PURE__ */ jsx26("text", { style: textStyle({ dim: true }), children: "It stretches to fill the full terminal height." })
+    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." })
       ] }) }),
-      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "close" }, { key: "Esc", label: "quit" }] })
+      /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "close" }, { key: "Esc", label: "quit" }] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs18("text", { children: [
-      /* @__PURE__ */ jsx26("span", { style: textStyle({ dim: true }), children: "Press " }),
-      /* @__PURE__ */ jsx26("span", { style: textStyle({ inverse: true, bold: true }), children: " m " }),
-      /* @__PURE__ */ jsx26("span", { style: textStyle({ dim: true }), children: " to open modal" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "m", label: "open modal" }, { key: "q", label: "quit" }] })
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "m", label: "open modal" }, { key: "q", label: "quit" }] }) })
   ] });
 }
 function PrimitivesApp() {
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs18("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "rounded", borderColor: "#5e81ac", title: "Layout", titleAlignment: "center", padding: 1, children: /* @__PURE__ */ jsxs18("box", { flexDirection: "row", gap: 2, children: [
-        /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "single", borderColor: "#a3be8c", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx26("text", { fg: "#a3be8c", bold: true, children: "Box 1" }) }),
-        /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "single", borderColor: "#ebcb8b", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx26("text", { fg: "#ebcb8b", bold: true, children: "Box 2" }) }),
-        /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "single", borderColor: "#b48ead", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx26("text", { fg: "#b48ead", bold: true, children: "Box 3" }) })
+  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" }) })
       ] }) }),
-      /* @__PURE__ */ jsx26("text", { fg: "#d8dee9", dim: true, children: "  Nested boxes with borders, colors & flexbox layout" })
+      /* @__PURE__ */ jsx("text", { fg: "#d8dee9", dim: true, children: "  Nested boxes with borders, colors & flexbox layout" })
     ] }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 function TerminalWindowApp() {
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs18("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx26("text", { style: textStyle({ fg: "green" }), children: '$ echo "Hello from OpenTUI"' }),
-      /* @__PURE__ */ jsx26("text", { children: "Hello from OpenTUI" }),
-      /* @__PURE__ */ jsx26("text", { style: textStyle({ fg: "green" }), children: "$ _" })
+  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: "$ _" })
     ] }),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+  ] });
+}
+var TIMELINE_STEPS = [
+  { tool: "Read", label: "Reading codebase \u2014 src/", status: "done", delay: 1800 },
+  { tool: "Think", label: "Planning changes \u2014 auth module", status: "done", delay: 2500 },
+  { tool: "Edit", label: "Editing files \u2014 4 files", status: "done", delay: 3200 },
+  { tool: "Bash", label: "Running tests \u2014 vitest", status: "done", delay: 2e3 },
+  { 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);
+  useKeyboard((event) => {
+    if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
+    if (event.name === "r") timelineRestart();
+  });
+  function timelineRestart() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setPhase("running");
+    setStepIndex(0);
+  }
+  useEffect(() => {
+    if (phase !== "running") return;
+    if (stepIndex < TIMELINE_STEPS.length) {
+      const delay = TIMELINE_STEPS[stepIndex].delay;
+      timerRef.current = setTimeout(() => setStepIndex((i) => i + 1), delay);
+    } else {
+      timerRef.current = setTimeout(() => setPhase("done"), 500);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase, stepIndex]);
+  useEffect(() => {
+    if (phase === "done") {
+      timerRef.current = setTimeout(() => timelineRestart(), 3e3);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  const steps = TIMELINE_STEPS.map((s, i) => {
+    if (i < stepIndex) return { ...s, status: "done" };
+    if (i === stepIndex && phase === "running") return { ...s, status: "running" };
+    return { ...s, status: phase === "done" ? "done" : "pending" };
+  });
+  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(
+      Timeline,
+      {
+        steps,
+        duration: phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`,
+        collapsed: !expanded
+      }
+    ) }),
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [
+      { key: "ctrl+shift+e", label: "toggle" },
+      { key: "r", label: "restart" },
+      { key: "q", label: "quit" }
+    ] }) })
+  ] });
+}
+var BUBBLE_STEPS = [
+  { tool: "Read", label: "Reading codebase \u2014 src/", status: "done", delay: 1800 },
+  { tool: "Think", label: "Planning changes \u2014 auth module", status: "done", delay: 2500 },
+  { tool: "Edit", label: "Editing files \u2014 4 files", status: "done", delay: 3200 },
+  { tool: "Bash", label: "Running tests \u2014 vitest", status: "done", delay: 2e3 },
+  { tool: "Edit", label: "Fixing test \u2014 routes.test.ts", status: "done", delay: 1500 }
+];
+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);
+  useKeyboard((event) => {
+    if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
+    if (event.name === "r") bubbleRestart();
+  });
+  function bubbleRestart() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setPhase("idle");
+    setStepIndex(0);
+    setStreamedText("");
+  }
+  useEffect(() => {
+    if (phase === "idle") {
+      timerRef.current = setTimeout(() => setPhase("thinking"), 800);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  useEffect(() => {
+    if (phase !== "thinking") return;
+    if (stepIndex < BUBBLE_STEPS.length) {
+      const delay = BUBBLE_STEPS[stepIndex].delay;
+      timerRef.current = setTimeout(() => setStepIndex((i) => i + 1), delay);
+    } else {
+      timerRef.current = setTimeout(() => setPhase("streaming"), 500);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase, stepIndex]);
+  useEffect(() => {
+    if (phase !== "streaming") return;
+    if (streamedText.length < BUBBLE_RESPONSE.length) {
+      timerRef.current = setTimeout(() => {
+        setStreamedText(BUBBLE_RESPONSE.slice(0, streamedText.length + 2));
+      }, 25);
+    } else {
+      timerRef.current = setTimeout(() => setPhase("done"), 500);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase, streamedText]);
+  useEffect(() => {
+    if (phase === "done") {
+      timerRef.current = setTimeout(() => bubbleRestart(), 3e3);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  const steps = BUBBLE_STEPS.map((s, i) => {
+    if (i < stepIndex) return { ...s, status: "done" };
+    if (i === stepIndex) return { ...s, status: "running" };
+    return { ...s, status: "pending" };
+  });
+  const isThinking = phase === "thinking";
+  const isStreaming = phase === "streaming";
+  const isDone = phase === "done";
+  const showAssistant = phase !== "idle";
+  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: {
+          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 }) })
+      ] })
+    ] }),
+    /* @__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" }] }) })
   ] });
 }
 var initialChatMessages = [
@@ -1816,12 +537,12 @@ var initialChatMessages = [
 ];
 var chatNextId = 5;
 function ChatApp() {
-  const [messages, setMessages] = useState9(initialChatMessages);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [streamingText, setStreamingText] = useState9("");
-  const [activeToolCalls, setActiveToolCalls] = useState9([]);
-  const intervalRef = useRef6(null);
-  const handleSend = useCallback2((text) => {
+  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 userMsg = { id: String(chatNextId++), role: "user", content: text };
     setMessages((prev) => [...prev, userMsg]);
     setIsLoading(true);
@@ -1852,14 +573,14 @@ function ChatApp() {
       }, 50);
     }, 1400);
   }, []);
-  const handleCancel = useCallback2(() => {
+  const handleCancel = useCallback(() => {
     if (intervalRef.current) clearInterval(intervalRef.current);
     setIsLoading(false);
     setStreamingText("");
     setActiveToolCalls([]);
   }, []);
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx(
       ChatPanel,
       {
         messages,
@@ -1872,29 +593,32 @@ function ChatApp() {
         useKeyboard
       }
     ),
-    /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "quit" }] })
+    /* @__PURE__ */ jsx("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
   ] });
 }
 var demos = [
-  { name: "gradient", app: () => /* @__PURE__ */ jsx26(GradientApp, {}) },
-  { name: "ascii", app: () => /* @__PURE__ */ jsx26(AsciiApp, {}) },
-  { name: "table", app: () => /* @__PURE__ */ jsx26(TableApp, {}) },
-  { name: "spinner", app: () => /* @__PURE__ */ jsx26(SpinnerApp, {}) },
-  { name: "select-input", app: () => /* @__PURE__ */ jsx26(SelectInputApp, {}) },
-  { name: "multi-select", app: () => /* @__PURE__ */ jsx26(MultiSelectApp, {}) },
-  { name: "text-input", app: () => /* @__PURE__ */ jsx26(TextInputApp, {}) },
-  { name: "link", app: () => /* @__PURE__ */ jsx26(LinkApp, {}) },
-  { name: "tab-bar", app: () => /* @__PURE__ */ jsx26(TabBarApp, {}) },
-  { name: "status-bar", app: () => /* @__PURE__ */ jsx26(StatusBarApp, {}) },
-  { name: "modal", app: () => /* @__PURE__ */ jsx26(ModalApp, {}) },
-  { name: "primitives", app: () => /* @__PURE__ */ jsx26(PrimitivesApp, {}) },
-  { name: "chat", app: () => /* @__PURE__ */ jsx26(ChatApp, {}) },
-  { name: "terminal", app: () => /* @__PURE__ */ jsx26(TerminalWindowApp, {}) },
-  { name: "landing", app: () => /* @__PURE__ */ jsx26(LandingApp, { useKeyboard }) }
+  { 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 }) }
 ];
 
 // src/run.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var _renderer;
 function DemoShell({ children }) {
   useKeyboard2((event) => {
@@ -1902,7 +626,7 @@ function DemoShell({ children }) {
       _renderer.destroy();
     }
   });
-  return /* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, children });
+  return /* @__PURE__ */ jsx2("box", { flexDirection: "column", flexGrow: 1, children });
 }
 async function runDemo(name) {
   const demo = demos.find((d) => d.name === name);
@@ -1912,7 +636,7 @@ async function runDemo(name) {
     process.exit(1);
   }
   _renderer = await createCliRenderer({ exitOnCtrlC: true });
-  createRoot(_renderer).render(/* @__PURE__ */ jsx27(DemoShell, { children: demo.app() }));
+  createRoot(_renderer).render(/* @__PURE__ */ jsx2(DemoShell, { children: demo.app() }));
 }
 export {
   demos,