@gridland/demo 0.2.50 → 0.2.52

package/dist/run.js

@@ -1,8 +1,11 @@
 // src/run.tsx
-import { createCliRenderer, createRoot, useKeyboard as useKeyboard2 } from "@gridland/bun";
+import { createCliRenderer, createRoot, useKeyboard as useKeyboard19 } from "@gridland/bun";
 
-// ../ui/scripts/demo-apps.tsx
-import { useState as useState11, useCallback as useCallback4, useRef as useRef8, useEffect as useEffect5 } from "react";
+// demos/index.tsx
+import { useKeyboard as useKeyboard18 } from "@gridland/utils";
+
+// demos/gradient.tsx
+import { useState as useState8 } from "react";
 import { useKeyboard } from "@gridland/utils";
 
 // ../ui/components/theme/themes.ts
@@ -33,19 +36,6 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var UNDERLINE = 1 << 3;
 var UNDERLINE_DASHED = 1 << 4;
 var UNDERLINE_DOTTED = 1 << 6;
-function Link({ children, url, underline = "solid", color }) {
-  const theme = useTheme();
-  const resolvedColor = color ?? theme.accent;
-  let attributes = 0;
-  if (underline === "solid") {
-    attributes = UNDERLINE;
-  } else if (underline === "dashed") {
-    attributes = UNDERLINE | UNDERLINE_DASHED;
-  } else if (underline === "dotted") {
-    attributes = UNDERLINE | UNDERLINE_DOTTED;
-  }
-  return /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("a", { href: url, style: { attributes, fg: resolvedColor }, children }) });
-}
 
 // ../ui/components/link/link-demo.tsx
 import { useState } from "react";
@@ -72,7 +62,7 @@ function textStyle(opts) {
 
 // ../ui/components/status-bar/status-bar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function StatusBar({ items, extra }) {
+function StatusBar({ items: items3, extra }) {
   const theme = useTheme();
   const parts = [];
   if (extra !== void 0) {
@@ -83,7 +73,7 @@ function StatusBar({ items, extra }) {
       /* @__PURE__ */ jsx3("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: "  \u2502  " }, "pipe")
     );
   }
-  items.forEach((item, i) => {
+  items3.forEach((item, i) => {
     if (i > 0) {
       parts.push(/* @__PURE__ */ jsx3("span", { children: " " }, `gap-${i}`));
     }
@@ -111,35 +101,6 @@ function useKeyboardContext(propOverride) {
 
 // ../ui/components/link/link-demo.tsx
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var MODES = ["solid", "dashed", "dotted", "none"];
-function LinkDemo({
-  url = "https://opentui.com",
-  label = "Visit opentui.com",
-  useKeyboard: useKeyboardProp
-}) {
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
-  const [modeIndex, setModeIndex] = useState(0);
-  const mode = MODES[modeIndex];
-  useKeyboard3?.((event) => {
-    if (event.name === "right") {
-      setModeIndex((i) => (i + 1) % MODES.length);
-    } else if (event.name === "left") {
-      setModeIndex((i) => (i - 1 + MODES.length) % MODES.length);
-    }
-  });
-  return /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx5(Link, { url, underline: mode, children: label }),
-    /* @__PURE__ */ jsx5(
-      StatusBar,
-      {
-        extra: /* @__PURE__ */ jsx5("span", { style: textStyle({ bold: true }), children: mode.padEnd(6) }),
-        items: [
-          { key: "\u2190\u2192", label: "underline style" }
-        ]
-      }
-    )
-  ] });
-}
 
 // ../ui/components/ascii/ascii.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -148,25 +109,43 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 import { useEffect, useState as useState2 } from "react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var VARIANTS = {
-  dots: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 83 },
+  dots: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 80 },
   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 }) {
+var STATUS_SYMBOLS = {
+  success: "\u2714",
+  error: "\u2716",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+function Spinner({ variant = "dots", text, color, status = "spinning" }) {
   const theme = useTheme();
-  const resolvedColor = color ?? theme.accent;
   const { frames, interval } = VARIANTS[variant];
   const [frame, setFrame] = useState2(0);
   useEffect(() => {
+    if (status !== "spinning") return;
     setFrame(0);
     const timer = setInterval(() => {
       setFrame((prev) => (prev + 1) % frames.length);
     }, interval);
     return () => clearInterval(timer);
-  }, [variant]);
+  }, [variant, status]);
+  if (status !== "spinning") {
+    const symbol = STATUS_SYMBOLS[status];
+    const statusColor = status === "success" ? theme.success : status === "error" ? theme.error : status === "warning" ? theme.warning : theme.accent;
+    return /* @__PURE__ */ jsxs2("text", { children: [
+      /* @__PURE__ */ jsx7("span", { style: { fg: statusColor }, children: symbol }),
+      text ? /* @__PURE__ */ jsxs2("span", { style: { fg: theme.foreground }, children: [
+        " ",
+        text
+      ] }) : null
+    ] });
+  }
+  const resolvedColor = color ?? theme.accent;
   return /* @__PURE__ */ jsxs2("text", { children: [
     /* @__PURE__ */ jsx7("span", { style: { fg: resolvedColor }, children: frames[frame] }),
     text ? /* @__PURE__ */ jsxs2("span", { style: { fg: theme.foreground }, children: [
@@ -181,9 +160,9 @@ import { useState as useState3 } from "react";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function SpinnerPicker({ useKeyboard: useKeyboardProp }) {
   const theme = useTheme();
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
   const [selected, setSelected] = useState3(0);
-  useKeyboard3?.((event) => {
+  useKeyboard20?.((event) => {
     if (event.name === "left") {
       setSelected((s) => s > 0 ? s - 1 : VARIANT_NAMES.length - 1);
     } else if (event.name === "right") {
@@ -296,7 +275,7 @@ var RADIO = "\u25CB";
 var CURSOR = "\u25B8";
 var SEPARATOR = "\u2500";
 function SelectInput({
-  items = [],
+  items: items3 = [],
   defaultValue,
   value: controlledValue,
   onChange,
@@ -312,14 +291,14 @@ function SelectInput({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
   const resolvedHighlight = highlightColor ?? theme.primary;
   const isControlled = controlledValue !== void 0;
   const controlledRef = useRef2(isControlled);
   if (controlledRef.current !== isControlled) {
     console.warn("SelectInput: switching between controlled and uncontrolled is not supported.");
   }
-  const initialIndex = items.findIndex((i) => i.value === (isControlled ? controlledValue : defaultValue));
+  const initialIndex = items3.findIndex((i) => i.value === (isControlled ? controlledValue : defaultValue));
   const [state, dispatch] = useReducer(reducer, {
     cursor: Math.max(0, initialIndex),
     submitted: false
@@ -329,7 +308,7 @@ function SelectInput({
     const selectable = [];
     let index = 0;
     const grouped = /* @__PURE__ */ new Map();
-    for (const item of items) {
+    for (const item of items3) {
       const group = item.group ?? "";
       const list = grouped.get(group) ?? [];
       list.push(item);
@@ -349,13 +328,13 @@ function SelectInput({
       }
     }
     return { flatRows: rows, selectableItems: selectable };
-  }, [items]);
+  }, [items3]);
   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) => {
+  useKeyboard20?.((event) => {
     if (state.submitted || disabled) return;
     if (event.name === "up" || event.name === "k") {
       const direction = -1;
@@ -384,7 +363,7 @@ function SelectInput({
     }
   });
   if (state.submitted) {
-    const selectedItem = isControlled ? items.find((i) => i.value === controlledValue) : selectableItems[state.cursor]?.item;
+    const selectedItem = isControlled ? items3.find((i) => i.value === controlledValue) : selectableItems[state.cursor]?.item;
     return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs5("text", { children: [
         /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
@@ -498,7 +477,7 @@ var UNCHECKED = "\u25CB";
 var CURSOR2 = "\u25B8";
 var SEPARATOR2 = "\u2500";
 function MultiSelect({
-  items = [],
+  items: items3 = [],
   defaultSelected = [],
   selected: controlledSelected,
   onChange,
@@ -519,7 +498,7 @@ function MultiSelect({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
   const resolvedHighlight = highlightColor ?? theme.primary;
   const resolvedCheckbox = checkboxColor ?? theme.accent;
   const isControlled = controlledSelected !== void 0;
@@ -539,7 +518,7 @@ function MultiSelect({
     const selectable = [];
     let index = 0;
     const grouped = /* @__PURE__ */ new Map();
-    for (const item of items) {
+    for (const item of items3) {
       const group = item.group ?? "";
       const list = grouped.get(group) ?? [];
       list.push(item);
@@ -559,7 +538,7 @@ function MultiSelect({
       }
     }
     return { flatRows: rows, selectableItems: selectable };
-  }, [items]);
+  }, [items3]);
   const hasSubmitRow = allowEmpty || currentSelected.size > 0;
   const totalPositions = selectableItems.length + (hasSubmitRow ? 1 : 0);
   const isOnSubmit = hasSubmitRow && state.cursor === selectableItems.length;
@@ -575,7 +554,7 @@ function MultiSelect({
     }
   };
   const diamondColor = invalid ? theme.error : disabled ? theme.muted : theme.accent;
-  useKeyboard3?.((event) => {
+  useKeyboard20?.((event) => {
     if (state.submitted || disabled) return;
     const move = (direction) => {
       let next = cursorRef.current + direction;
@@ -605,14 +584,14 @@ function MultiSelect({
         }
       }
     } else if (event.name === "a" && enableSelectAll) {
-      const enabledValues = items.filter((i) => !i.disabled).map((i) => i.value);
+      const enabledValues = items3.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));
+    const selectedItems = items3.filter((i) => currentSelected.has(i.value));
     return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs6("text", { children: [
         /* @__PURE__ */ jsx11("span", { style: textStyle({ fg: theme.success }), children: "\u25C6 " }),
@@ -722,91 +701,145 @@ function MultiSelect({
 }
 
 // ../ui/components/table/table.tsx
-import { Fragment } from "react";
+import { createContext as createContext3, useContext as useContext3, Children, isValidElement, Fragment } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-function getColumns(data, columnsProp) {
+var TableContext = createContext3(null);
+function useTableContext() {
+  const ctx = useContext3(TableContext);
+  if (!ctx) throw new Error("Table compound components must be used within <TableRoot>");
+  return ctx;
+}
+function getColumns(data2, columnsProp) {
   if (columnsProp) return columnsProp;
   const keys = /* @__PURE__ */ new Set();
-  for (const row of data) {
+  for (const row of data2) {
     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 extractCellText(node) {
+  if (node == null) return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number" || typeof node === "boolean") return String(node);
+  if (Array.isArray(node)) return node.map(extractCellText).join("");
+  return "";
+}
+function collectColumnWidths(children, padding) {
+  const columnMaxWidths = [];
+  Children.forEach(children, (section) => {
+    if (!isValidElement(section)) return;
+    if (section.type === TableCaption) return;
+    Children.forEach(section.props.children, (row) => {
+      if (!isValidElement(row)) return;
+      let colIdx = 0;
+      Children.forEach(row.props.children, (cell) => {
+        if (!isValidElement(cell)) return;
+        const text = extractCellText(cell.props.children);
+        const width = text.length + padding * 2;
+        if (colIdx >= columnMaxWidths.length) {
+          columnMaxWidths.push(width);
+        } else {
+          columnMaxWidths[colIdx] = Math.max(columnMaxWidths[colIdx], width);
+        }
+        colIdx++;
+      });
+    });
+  });
+  return columnMaxWidths;
+}
+function getTotalWidth(columnWidths) {
+  if (columnWidths.length === 0) return 0;
+  return columnWidths.reduce((sum, w) => sum + w, 0) + (columnWidths.length - 1);
+}
+function TableRoot({ children, padding = 1, headerColor, borderColor }) {
+  const theme = useTheme();
+  const resolvedHeaderColor = headerColor ?? theme.foreground;
+  const resolvedBorderColor = borderColor ?? theme.muted;
+  const columnWidths = collectColumnWidths(children, padding);
+  return /* @__PURE__ */ jsx12(
+    TableContext.Provider,
+    {
+      value: {
+        columnWidths,
+        padding,
+        headerColor: resolvedHeaderColor,
+        borderColor: resolvedBorderColor,
+        foregroundColor: theme.foreground
+      },
+      children: /* @__PURE__ */ jsx12("box", { children })
+    }
+  );
+}
+function TableHeader({ children }) {
+  const ctx = useTableContext();
+  const totalWidth = getTotalWidth(ctx.columnWidths);
+  return /* @__PURE__ */ jsxs7("box", { children: [
+    children,
+    /* @__PURE__ */ jsx12("text", { children: /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.borderColor }), children: "\u2500".repeat(totalWidth) }) })
+  ] });
+}
+function TableBody({ children }) {
+  const ctx = useTableContext();
+  const totalWidth = getTotalWidth(ctx.columnWidths);
+  const rows = Children.toArray(children);
+  return /* @__PURE__ */ jsx12("box", { children: rows.map((row, index) => /* @__PURE__ */ jsxs7(Fragment, { children: [
+    row,
+    index < rows.length - 1 && /* @__PURE__ */ jsx12("text", { children: /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.borderColor, dim: true }), children: "\u2500".repeat(totalWidth) }) })
+  ] }, index)) });
+}
+function TableRow({ children }) {
+  const ctx = useTableContext();
+  const parts = [];
+  let colIdx = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const text = extractCellText(child.props.children);
+    const width = ctx.columnWidths[colIdx] ?? text.length + ctx.padding * 2;
+    const padded = padCell(text, width, ctx.padding);
+    const isHead = child.type === TableHead;
+    if (colIdx > 0) {
+      parts.push(
+        /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.borderColor, dim: true }), children: " " }, `sep-${colIdx}`)
+      );
+    }
+    if (isHead) {
+      parts.push(
+        /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.headerColor }), children: padded }, `cell-${colIdx}`)
+      );
+    } else {
+      parts.push(
+        /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.foregroundColor, dim: true }), children: padded }, `cell-${colIdx}`)
+      );
+    }
+    colIdx++;
+  });
+  return /* @__PURE__ */ jsx12("text", { children: parts });
+}
+function TableHead(_props) {
+  return null;
+}
+function TableCell(_props) {
+  return null;
+}
+function TableCaption({ children }) {
+  const ctx = useTableContext();
+  return /* @__PURE__ */ jsx12("text", { children: /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: ctx.borderColor, dim: true }), children: extractCellText(children) }) });
+}
 function Table({
-  data,
+  data: data2,
   columns: columnsProp,
   padding = 1,
   headerColor,
   borderColor
 }) {
-  const theme = useTheme();
-  const resolvedHeaderColor = headerColor ?? theme.primary;
-  const resolvedBorderColor = borderColor ?? theme.border;
-  const columns = getColumns(data, columnsProp);
-  const colInfo = calculateColumnWidths(columns, data, padding);
-  const borderLine = (left, mid, right) => {
-    const inner = colInfo.map((c) => "\u2500".repeat(c.width)).join(mid);
-    return /* @__PURE__ */ jsx12("text", { children: /* @__PURE__ */ jsxs7("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: [
-      left,
-      inner,
-      right
-    ] }) });
-  };
-  const contentRow = (rowData, isHeader) => {
-    const parts = [];
-    parts.push(
-      /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, "left-border")
-    );
-    colInfo.forEach((col, i) => {
-      const val = rowData[col.field];
-      const str = val == null ? "" : String(val);
-      const padded = padCell(str, col.width, padding);
-      if (isHeader) {
-        parts.push(
-          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedHeaderColor, bold: true }), children: padded }, `cell-${i}`)
-        );
-      } else {
-        parts.push(
-          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: theme.foreground }), children: padded }, `cell-${i}`)
-        );
-      }
-      if (i < colInfo.length - 1) {
-        parts.push(
-          /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, `sep-${i}`)
-        );
-      }
-    });
-    parts.push(
-      /* @__PURE__ */ jsx12("span", { style: textStyle({ fg: resolvedBorderColor, bold: true }), children: "\u2502" }, "right-border")
-    );
-    return /* @__PURE__ */ jsx12("text", { children: parts });
-  };
-  const headerData = columns.reduce(
-    (acc, col) => ({ ...acc, [col]: col }),
-    {}
-  );
-  return /* @__PURE__ */ jsxs7("box", { children: [
-    borderLine("\u250C", "\u252C", "\u2510"),
-    contentRow(headerData, true),
-    data.map((row, index) => /* @__PURE__ */ jsxs7(Fragment, { children: [
-      borderLine("\u251C", "\u253C", "\u2524"),
-      contentRow(row, false)
-    ] }, index)),
-    borderLine("\u2514", "\u2534", "\u2518")
+  const cols = getColumns(data2, columnsProp);
+  return /* @__PURE__ */ jsxs7(TableRoot, { padding, headerColor, borderColor, children: [
+    /* @__PURE__ */ jsx12(TableHeader, { children: /* @__PURE__ */ jsx12(TableRow, { children: cols.map((col) => /* @__PURE__ */ jsx12(TableHead, { children: String(col) }, String(col))) }) }),
+    /* @__PURE__ */ jsx12(TableBody, { children: data2.map((row, index) => /* @__PURE__ */ jsx12(TableRow, { children: cols.map((col) => /* @__PURE__ */ jsx12(TableCell, { children: row[col] == null ? "" : String(row[col]) }, String(col))) }, index)) })
   ] });
 }
 
@@ -865,23 +898,23 @@ function generateGradient(colors, steps) {
   }
   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));
+function Gradient({ children, name: name2, colors }) {
+  if (name2 && colors) throw new Error("The `name` and `colors` props are mutually exclusive");
+  if (!name2 && !colors) throw new Error("Either `name` or `colors` prop must be provided");
+  const gradientColors = name2 ? GRADIENTS[name2] : colors;
+  const lines2 = children.split("\n");
+  const maxLength = Math.max(...lines2.map((l) => l.length));
   if (maxLength === 0) return /* @__PURE__ */ jsx13("text", { children });
   const hexColors = generateGradient(gradientColors, maxLength);
-  return /* @__PURE__ */ jsx13(Fragment2, { children: lines.map((line, lineIndex) => /* @__PURE__ */ jsx13("text", { children: line.split("").map((char, charIndex) => /* @__PURE__ */ jsx13("span", { style: { fg: hexColors[charIndex] }, children: char }, charIndex)) }, lineIndex)) });
+  return /* @__PURE__ */ jsx13(Fragment2, { children: lines2.map((line, lineIndex) => /* @__PURE__ */ jsx13("text", { children: line.split("").map((char, charIndex) => /* @__PURE__ */ jsx13("span", { style: { fg: hexColors[charIndex] }, children: char }, charIndex)) }, lineIndex)) });
 }
 
 // ../ui/components/tab-bar/tab-bar.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState5, Children, isValidElement } from "react";
+import { createContext as createContext4, useContext as useContext4, useState as useState5, Children as Children2, isValidElement as isValidElement2 } from "react";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var TabsContext = createContext3(null);
+var TabsContext = createContext4(null);
 function useTabsContext() {
-  const ctx = useContext3(TabsContext);
+  const ctx = useContext4(TabsContext);
   if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
   return ctx;
 }
@@ -907,8 +940,8 @@ function TabsList({
   const { value } = useTabsContext();
   const color = activeColor ?? theme.accent;
   const triggers = [];
-  Children.forEach(children, (child) => {
-    if (isValidElement(child) && "value" in child.props) {
+  Children2.forEach(children, (child) => {
+    if (isValidElement2(child) && "value" in child.props) {
       triggers.push({ value: child.props.value, label: child.props.children });
     }
   });
@@ -971,9 +1004,9 @@ function Modal({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
   const resolvedBorderColor = borderColor ?? theme.muted;
-  useKeyboard3?.((event) => {
+  useKeyboard20?.((event) => {
     if (event.name === "escape" && onClose) {
       onClose();
     }
@@ -999,28 +1032,29 @@ import {
   useState as useState6,
   useRef as useRef4,
   useCallback as useCallback2,
+  useEffect as useEffect2,
   useMemo as useMemo3,
-  createContext as createContext4,
-  useContext as useContext4
+  createContext as createContext5,
+  useContext as useContext5
 } from "react";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var PromptInputControllerCtx = createContext4(null);
-var useOptionalController = () => useContext4(PromptInputControllerCtx);
-var PromptInputContext = createContext4(null);
+var PromptInputControllerCtx = createContext5(null);
+var useOptionalController = () => useContext5(PromptInputControllerCtx);
+var PromptInputContext = createContext5(null);
 function usePromptInput() {
-  const ctx = useContext4(PromptInputContext);
+  const ctx = useContext5(PromptInputContext);
   if (!ctx) {
     throw new Error("usePromptInput must be used within a <PromptInput> component");
   }
   return ctx;
 }
-function computeDefaultSuggestions(input, commands, files) {
-  if (input.startsWith("/") && commands.length > 0) {
-    return commands.filter((c) => c.cmd.startsWith(input)).map((c) => ({ text: c.cmd, desc: c.desc }));
+function computeDefaultSuggestions(input, commands2, files2) {
+  if (input.startsWith("/") && commands2.length > 0) {
+    return commands2.filter((c) => c.cmd.startsWith(input)).map((c) => ({ text: c.cmd, desc: c.desc }));
   }
-  if (input.includes("@") && files.length > 0) {
+  if (input.includes("@") && files2.length > 0) {
     const query = input.split("@").pop() ?? "";
-    return files.filter((f) => f.toLowerCase().includes(query.toLowerCase())).map((f) => ({ text: "@" + f }));
+    return files2.filter((f) => f.toLowerCase().includes(query.toLowerCase())).map((f) => ({ text: "@" + f }));
   }
   return [];
 }
@@ -1030,9 +1064,10 @@ function resolveStatusHintText(status, submittedText, streamingText, errorText,
   if (status === "error") return errorText;
   return disabledText;
 }
+var DIVIDER_LINE = "\u2500".repeat(500);
 function PromptInputDivider() {
   const { theme } = usePromptInput();
-  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "\u2500".repeat(500) }) });
+  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", marginLeft: -1, marginRight: -1, children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: DIVIDER_LINE }) });
 }
 function PromptInputSuggestions() {
   const { suggestions, sugIdx, maxSuggestions, theme } = usePromptInput();
@@ -1099,18 +1134,27 @@ function PromptInput({
   errorText = "An error occurred. Try again.",
   disabled: disabledProp = false,
   disabledText = "Generating...",
-  commands = [],
-  files = [],
+  commands: commands2 = [],
+  files: files2 = [],
   getSuggestions: customGetSuggestions,
   maxSuggestions = 5,
   enableHistory = true,
   model,
   showDividers = true,
+  autoFocus = false,
   useKeyboard: useKeyboardProp,
   children
 }) {
   const theme = useTheme();
-  const useKeyboard3 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  useEffect2(() => {
+    if (!autoFocus) return;
+    if (typeof document === "undefined") return;
+    const canvas = document.querySelector("canvas");
+    if (canvas && document.activeElement !== canvas) {
+      canvas.focus();
+    }
+  }, [autoFocus]);
   const resolvedPromptColor = promptColor ?? theme.muted;
   const disabled = status ? status === "submitted" || status === "streaming" : disabledProp;
   const statusHintText = resolveStatusHintText(status, submittedText, streamingLabel, errorText, disabledText);
@@ -1167,8 +1211,8 @@ function PromptInput({
   }, []);
   const computeSuggestions = useCallback2((input) => {
     if (customGetSuggestions) return customGetSuggestions(input);
-    return computeDefaultSuggestions(input, commands, files);
-  }, [customGetSuggestions, commands, files]);
+    return computeDefaultSuggestions(input, commands2, files2);
+  }, [customGetSuggestions, commands2, files2]);
   const updateValue = useCallback2((next) => {
     valueRef.current = next;
     if (isControlled) {
@@ -1203,7 +1247,7 @@ function PromptInput({
       clearInput();
     }
   }, [onSubmit, clearInput]);
-  useKeyboard3?.((event) => {
+  useKeyboard20?.((event) => {
     if (event.name === "escape" && (status === "streaming" || status === "submitted") && onStop) {
       onStop();
       return;
@@ -1304,14 +1348,16 @@ function PromptInput({
     theme
   };
   if (children) {
-    return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", children }) });
+    return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", flexShrink: 0, children }) });
   }
-  return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs10("box", { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs10("box", { flexDirection: "column", flexShrink: 0, children: [
     showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {}),
-    /* @__PURE__ */ jsx16(PromptInputSuggestions, {}),
-    /* @__PURE__ */ jsx16(PromptInputTextarea, {}),
-    /* @__PURE__ */ jsx16(PromptInputStatusText, {}),
-    /* @__PURE__ */ jsx16(PromptInputModel, {}),
+    /* @__PURE__ */ jsxs10("box", { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx16(PromptInputSuggestions, {}),
+      /* @__PURE__ */ jsx16(PromptInputTextarea, {}),
+      /* @__PURE__ */ jsx16(PromptInputStatusText, {}),
+      /* @__PURE__ */ jsx16(PromptInputModel, {})
+    ] }),
     showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {})
   ] }) });
 }
@@ -1444,13 +1490,13 @@ function ChatPanel({
 }
 
 // ../ui/components/chain-of-thought/chain-of-thought.tsx
-import { createContext as createContext5, memo, useContext as useContext5, useEffect as useEffect2, useMemo as useMemo4, useState as useState7 } from "react";
+import { createContext as createContext6, memo, useContext as useContext6, useEffect as useEffect3, useMemo as useMemo4, useState as useState7 } from "react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
 var SPINNER_INTERVAL = 150;
-var ChainOfThoughtContext = createContext5(null);
+var ChainOfThoughtContext = createContext6(null);
 var useChainOfThought = () => {
-  const context = useContext5(ChainOfThoughtContext);
+  const context = useContext6(ChainOfThoughtContext);
   if (!context) {
     throw new Error("ChainOfThought components must be used within <ChainOfThought>");
   }
@@ -1519,7 +1565,7 @@ var ChainOfThoughtStep = memo(({
   const color = getStepColor(status, theme);
   const pipe = "\u2502";
   const [frame, setFrame] = useState7(0);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isActive) {
       setFrame(0);
       return;
@@ -1548,11 +1594,11 @@ ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
 ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
 
 // ../ui/components/message/message.tsx
-import { createContext as createContext6, useContext as useContext6 } from "react";
+import { createContext as createContext7, useContext as useContext7 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var MessageContext = createContext6(null);
+var MessageContext = createContext7(null);
 function useMessage() {
-  const ctx = useContext6(MessageContext);
+  const ctx = useContext7(MessageContext);
   if (!ctx) throw new Error("useMessage must be used within <Message>");
   return ctx;
 }
@@ -1561,23 +1607,25 @@ function getBubbleColors(theme) {
   return isDark ? { assistantBg: "#2a2a4a", userBg: "#2a3a3a" } : { assistantBg: "#F1F5F9", userBg: "#E2E8F0" };
 }
 var TOOL_STATE_ICONS = {
-  "partial-call": "\u2022",
+  pending: "\u2022",
   // •
-  "call": "\u280B",
+  running: "\u280B",
   // ⠋
-  "result": "\u2713"
+  completed: "\u2713",
   // ✓
+  error: "\u2715"
+  // ✕
 };
 function getToolStateColor(state, theme) {
   switch (state) {
-    case "partial-call":
+    case "pending":
       return theme.muted;
-    case "call":
+    case "running":
       return theme.warning;
-    case "result":
+    case "completed":
       return theme.success;
-    default:
-      return theme.muted;
+    case "error":
+      return theme.error;
   }
 }
 function MessageContent({ children }) {
@@ -1602,51 +1650,57 @@ function MessageText({ children, isLast = false }) {
     isLast && isStreaming && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: streamingCursor })
   ] });
 }
-function MessageReasoning({ part }) {
-  return /* @__PURE__ */ jsxs13(ChainOfThought, { defaultOpen: part.collapsed === false, children: [
-    /* @__PURE__ */ jsx19(ChainOfThoughtHeader, { duration: part.duration }),
-    /* @__PURE__ */ jsx19(ChainOfThoughtContent, { children: part.steps?.map((step, i) => /* @__PURE__ */ jsx19(
-      ChainOfThoughtStep,
-      {
-        label: step.label,
-        description: step.description,
-        status: step.status,
-        isLast: i === (part.steps?.length ?? 0) - 1,
-        children: step.output
-      },
-      i
-    )) })
+function MessageReasoning({ duration, steps, collapsed = true, children }) {
+  return /* @__PURE__ */ jsxs13(ChainOfThought, { defaultOpen: !collapsed, children: [
+    /* @__PURE__ */ jsx19(ChainOfThoughtHeader, { duration }),
+    /* @__PURE__ */ jsxs13(ChainOfThoughtContent, { children: [
+      steps?.map((step, i) => /* @__PURE__ */ jsx19(
+        ChainOfThoughtStep,
+        {
+          label: step.label,
+          description: step.description,
+          status: step.status,
+          isLast: i === (steps?.length ?? 0) - 1,
+          children: step.output
+        },
+        i
+      )),
+      children
+    ] })
   ] });
 }
-function MessageToolInvocation({ part, toolColors }) {
+function MessageToolCall({ name: name2, state = "pending", result, color }) {
   const theme = useTheme();
   const { backgroundColor, textColor } = useMessage();
-  const { toolName, state, result } = part.toolInvocation;
-  const icon = TOOL_STATE_ICONS[state] || "\u2022";
-  const stateColor = toolColors?.[toolName] ?? getToolStateColor(state, theme);
-  const isActive = state === "partial-call" || state === "call";
+  const icon = TOOL_STATE_ICONS[state];
+  const stateColor = color ?? getToolStateColor(state, theme);
+  const isActive = state === "pending" || state === "running";
   return /* @__PURE__ */ jsxs13("box", { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs13("text", { children: [
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bg: backgroundColor }), children: icon }),
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, bg: backgroundColor }), children: " " }),
-      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bold: isActive, bg: backgroundColor }), children: toolName }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bold: isActive, bg: backgroundColor }), children: name2 }),
       isActive && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: " ..." })
     ] }),
-    state === "result" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
+    state === "completed" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "  \u2514\u2500 " }),
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: String(result).slice(0, 120) })
+    ] }),
+    state === "error" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.error, dim: true, bg: backgroundColor }), children: "  \u2514\u2500 " }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.error, dim: true, bg: backgroundColor }), children: String(result).slice(0, 120) })
     ] })
   ] });
 }
-function MessageSource({ part, index }) {
+function MessageSource({ title, url, index }) {
   const theme = useTheme();
   const { backgroundColor, textColor } = useMessage();
-  const title = part.source.title || part.source.url || "source";
+  const displayTitle = title || url || "source";
   return /* @__PURE__ */ jsxs13("text", { children: [
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "[" }),
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: String(index + 1) }),
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "] " }),
-    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: title })
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: displayTitle })
   ] });
 }
 function MessageFooter({ model, timestamp }) {
@@ -1682,7 +1736,7 @@ function Message({
 Message.Content = MessageContent;
 Message.Text = MessageText;
 Message.Reasoning = MessageReasoning;
-Message.ToolInvocation = MessageToolInvocation;
+Message.ToolCall = MessageToolCall;
 Message.Source = MessageSource;
 Message.Footer = MessageFooter;
 
@@ -1708,1065 +1762,1418 @@ function useBreakpoints() {
   };
 }
 
-// ../docs/components/landing/landing-app.tsx
-import { useCallback as useCallback3, useRef as useRef7, useState as useState10 } from "react";
-
-// ../docs/components/landing/about-modal.tsx
+// demos/gradient.tsx
+import figlet from "figlet";
+import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-function AboutModal({ onClose, useKeyboard: useKeyboard3 }) {
+figlet.parseFont("ANSI Shadow", ansiShadow);
+var art = figlet.textSync("gridland", { font: "ANSI Shadow" });
+var lines = art.split("\n").filter((l) => l.trimEnd().length > 0);
+var gradientNames = Object.keys(GRADIENTS);
+function GradientApp() {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx21(Modal, { title: "About Gridland", useKeyboard: useKeyboard3, onClose, children: /* @__PURE__ */ jsxs15("box", { paddingX: 1, flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "What is Gridland?" }),
-    /* @__PURE__ */ jsx21("text", { children: "Gridland renders terminal UIs to HTML5 Canvas with React." }),
-    /* @__PURE__ */ jsx21("text", { children: "No xterm.js. No terminal emulator. Just pixels." }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Features" }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Canvas-rendered TUI components"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "React reconciler with JSX"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Yoga flexbox layout engine"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Keyboard, mouse, and clipboard support"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Next.js and Vite plugins"
-    ] }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Tech Stack" }),
-    /* @__PURE__ */ jsx21("text", { children: "React + opentui engine + yoga-layout + HTML5 Canvas" }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ dim: true }), children: "Press q to close" })
-  ] }) });
+  const [index, setIndex] = useState8(gradientNames.indexOf("instagram"));
+  const name2 = gradientNames[index];
+  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__ */ jsxs15("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx21("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx21(Gradient, { name: name2, children: lines.join("\n") }) }),
+    /* @__PURE__ */ jsx21("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx21(
+      StatusBar,
+      {
+        items: [{ key: "\u2190\u2192", label: "gradient" }],
+        extra: /* @__PURE__ */ jsx21("span", { style: textStyle({ fg: theme.accent, bold: true }), children: name2.padEnd(11) })
+      }
+    ) })
+  ] });
 }
 
-// ../docs/components/landing/install-box.tsx
+// demos/ascii.tsx
+import { useState as useState9 } from "react";
+import { useKeyboard as useKeyboard2 } from "@gridland/utils";
+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";
+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 jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-function InstallBox() {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx22(
-    "box",
-    {
-      border: true,
-      borderStyle: "rounded",
-      borderColor: theme.border,
-      paddingX: 1,
-      flexDirection: "column",
-      flexShrink: 0,
-      children: /* @__PURE__ */ jsxs16("text", { children: [
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ dim: true }), children: "$ " }),
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ bold: true }), children: "bun create " }),
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
-      ] })
-    }
-  );
+var fonts = [
+  { name: "ANSI Shadow", data: ansiShadow2 },
+  { name: "Standard", data: standard },
+  { name: "Big", data: big },
+  { name: "Doom", data: doom },
+  { name: "Slant", data: slant },
+  { name: "Speed", data: speed },
+  { name: "Block", data: block },
+  { name: "Colossal", data: colossal }
+];
+for (const f of fonts) {
+  figlet2.parseFont(f.name, f.data);
 }
-
-// ../docs/components/landing/links-box.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
-var UNDERLINE3 = 1 << 3;
-function LinksBox() {
+function getLines(fontName) {
+  const art2 = figlet2.textSync("gridland", { font: fontName });
+  return art2.split("\n").filter((l) => l.trimEnd().length > 0);
+}
+function AsciiApp() {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx23(
-    "box",
-    {
-      border: true,
-      borderStyle: "rounded",
-      borderColor: theme.border,
-      paddingX: 1,
-      flexDirection: "column",
-      flexShrink: 0,
-      children: /* @__PURE__ */ jsxs17("text", { children: [
-        /* @__PURE__ */ jsx23("span", { children: "\u{1F431}" }),
-        /* @__PURE__ */ jsx23("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
-        /* @__PURE__ */ jsx23("span", { children: "  " }),
-        /* @__PURE__ */ jsx23("span", { children: "\u{1F4D6}" }),
-        /* @__PURE__ */ jsx23("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
-      ] })
-    }
-  );
+  const [fontIndex, setFontIndex] = useState9(fonts.findIndex((f) => f.name === "Colossal"));
+  const font = fonts[fontIndex];
+  const lines2 = getLines(font.name);
+  useKeyboard2((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__ */ jsxs16("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx22("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines2.map((line, i) => /* @__PURE__ */ jsx22("text", { fg: theme.accent, bold: true, children: line }, i)) }),
+    /* @__PURE__ */ jsx22("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx22(
+      StatusBar,
+      {
+        items: [{ key: "\u2190\u2192", label: "change font" }],
+        extra: /* @__PURE__ */ jsx22("span", { style: textStyle({ fg: theme.accent, bold: true }), children: font.name.padEnd(11) })
+      }
+    ) })
+  ] });
 }
 
-// ../docs/components/landing/logo.tsx
-import { useState as useState8, useEffect as useEffect3, useRef as useRef5, useMemo as useMemo5 } from "react";
-import figlet from "figlet";
-import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs18 } 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");
+// demos/table.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function TableApp() {
+  const data2 = [
+    { name: "Alice", role: "Engineer", status: "Active" },
+    { name: "Bob", role: "Designer", status: "Active" },
+    { name: "Charlie", role: "PM", status: "Away" }
+  ];
+  return /* @__PURE__ */ jsx23("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx23(Table, { data: data2, headerColor: "cyan", borderColor: "#5e81ac" }) });
 }
-var fullArt = makeArt("gridland");
-var gridArt = makeArt("grid");
-var landArt = makeArt("land");
-var ART_HEIGHT = 6;
-function useAnimation(duration = 1e3) {
-  const isBrowser = typeof document !== "undefined";
-  const [progress, setProgress] = useState8(isBrowser ? 0 : 1);
-  const startTime = useRef5(null);
-  useEffect3(() => {
-    if (!isBrowser) return;
-    let raf;
-    const tick = (time) => {
-      if (startTime.current === null) startTime.current = time;
-      const elapsed = time - startTime.current;
-      const t = Math.min(1, elapsed / duration);
-      const eased = 1 - Math.pow(1 - t, 3);
-      setProgress(eased);
-      if (t < 1) raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  return progress;
+
+// demos/spinner.tsx
+import { useKeyboard as useKeyboard3 } from "@gridland/utils";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function SpinnerApp() {
+  return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx24("box", { flexGrow: 1, children: /* @__PURE__ */ jsx24(SpinnerPicker, { useKeyboard: useKeyboard3 }) }),
+    /* @__PURE__ */ jsx24("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx24(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }] }) })
+  ] });
 }
-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__ */ jsx24("text", { children });
-  const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
-  return /* @__PURE__ */ jsx24("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;
-        }
-      }
+
+// demos/select-input.tsx
+import { useState as useState10 } from "react";
+import { useKeyboard as useKeyboard4 } from "@gridland/utils";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var items = [
+  { label: "TypeScript", value: "ts" },
+  { label: "JavaScript", value: "js" },
+  { label: "Python", value: "py" },
+  { label: "Rust", value: "rs" }
+];
+function SelectInputApp() {
+  const [submitted, setSubmitted] = useState10(false);
+  const [resetKey, setResetKey] = useState10(0);
+  useKeyboard4((event) => {
+    if (submitted && event.name === "r") {
+      setSubmitted(false);
+      setResetKey((k) => k + 1);
     }
-    if (current) runs.push(current);
-    return runs.map((run, runIndex) => /* @__PURE__ */ jsx24(
-      "box",
+  });
+  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx25("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx25(
+      SelectInput,
       {
-        position: "absolute",
-        top: lineIndex,
-        left: run.start,
-        shouldFill: false,
-        children: /* @__PURE__ */ jsx24("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx24(
-          "span",
-          {
-            style: { fg: hexColors[run.start + ci] },
-            children: char
-          },
-          ci
-        )) })
+        items,
+        title: "Choose a language",
+        useKeyboard: useKeyboard4,
+        onSubmit: () => setSubmitted(true)
       },
-      `${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__ */ jsxs18(Fragment7, { children: [
-    /* @__PURE__ */ jsx24("text", { children: " " }),
-    /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("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__ */ jsx24("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__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", children: [
-      /* @__PURE__ */ jsx24(Gradient, { name: "instagram", children: art }),
-      /* @__PURE__ */ jsx24("text", { children: " " }),
-      /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("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__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx24("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: "gridland" }) }) }),
-      subtitle
-    ] });
-  }
-  if (narrow) {
-    return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs18("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
-        /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: gridArt }),
-        /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: landArt })
-      ] }) }),
-      subtitle
-    ] });
-  }
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-    /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx24("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: fullArt }) }) }),
-    subtitle
+      resetKey
+    ) }),
+    /* @__PURE__ */ jsx25(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
+      { key: "\u2191\u2193", label: "select" },
+      { key: "enter", label: "submit" }
+    ] })
   ] });
 }
 
-// ../docs/components/landing/matrix-background.tsx
-import { useMemo as useMemo6 } from "react";
-
-// ../docs/components/landing/use-matrix.ts
-import { useState as useState9, useEffect as useEffect4, useRef as useRef6 } 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);
-      }
+// demos/multi-select.tsx
+import { useState as useState11 } from "react";
+import { useKeyboard as useKeyboard5 } from "@gridland/utils";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var items2 = [
+  { label: "TypeScript", value: "ts" },
+  { label: "JavaScript", value: "js" },
+  { label: "Python", value: "py" },
+  { label: "Rust", value: "rs" }
+];
+function MultiSelectApp() {
+  const [submitted, setSubmitted] = useState11(false);
+  const [resetKey, setResetKey] = useState11(0);
+  useKeyboard5((event) => {
+    if (submitted && event.name === "r") {
+      setSubmitted(false);
+      setResetKey((k) => k + 1);
     }
-  }
-  return { grid, brightness };
-}
-function useMatrix(width, height) {
-  const columnsRef = useRef6([]);
-  const [state, setState] = useState9(() => {
-    const columns = Array.from(
-      { length: width },
-      () => Math.random() < 0.5 ? createDrop(height, true) : null
-    );
-    columnsRef.current = columns;
-    return buildGrid(columns, width, height);
   });
-  useEffect4(() => {
-    if (width < 2 || height < 2) return;
-    const id = setInterval(() => {
-      const columns = columnsRef.current;
-      for (let x = 0; x < width; x++) {
-        if (columns[x] === null || columns[x] === void 0) {
-          if (Math.random() < 0.03) {
-            columns[x] = createDrop(height);
-          }
-          continue;
-        }
-        const drop = columns[x];
-        drop.y += drop.speed;
-        if (Math.random() < 0.1) {
-          const idx = Math.floor(Math.random() * drop.chars.length);
-          drop.chars[idx] = randomChar();
-        }
-        if (drop.y - drop.length > height) {
-          columns[x] = null;
-        }
-      }
-      setState(buildGrid(columns, width, height));
-    }, 80);
-    return () => clearInterval(id);
-  }, [width, height]);
-  useEffect4(() => {
-    columnsRef.current = Array.from(
-      { length: width },
-      () => Math.random() < 0.5 ? createDrop(height, true) : null
-    );
-    setState(buildGrid(columnsRef.current, width, height));
-  }, [width, height]);
-  return state;
+  return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx26("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx26(
+      MultiSelect,
+      {
+        items: items2,
+        title: "Select languages",
+        useKeyboard: useKeyboard5,
+        onSubmit: () => setSubmitted(true)
+      },
+      resetKey
+    ) }),
+    /* @__PURE__ */ jsx26(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
+      { key: "\u2191\u2193", label: "move" },
+      { key: "enter", label: "select" },
+      { key: "a", label: "all" },
+      { key: "x", label: "clear" }
+    ] })
+  ] });
 }
 
-// ../docs/components/landing/matrix-background.tsx
-import { jsx as jsx25 } 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);
+// demos/prompt-input.tsx
+import { useState as useState12 } from "react";
+import { useKeyboard as useKeyboard6 } from "@gridland/utils";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var commands = [{ cmd: "/model", desc: "Switch model" }];
+var files = ["src/index.ts", "src/routes.ts", "src/auth.ts", "package.json"];
+var models = [
+  { label: "Claude Opus", value: "opus" },
+  { label: "Claude Sonnet", value: "sonnet" },
+  { label: "Claude Haiku", value: "haiku" }
+];
+function PromptInputApp() {
   const theme = useTheme();
-  const columnColors = useMemo6(
-    () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
-    [width, theme.accent, theme.secondary, theme.primary]
-  );
-  const columnMutedColors = useMemo6(
-    () => columnColors.map(buildMutedColors),
-    [columnColors]
-  );
-  return /* @__PURE__ */ jsx25("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx25("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__ */ jsx25("span", { children: " " }, x);
+  const [lastMessage, setLastMessage] = useState12("");
+  const [model, setModel] = useState12("opus");
+  const [showModelPicker, setShowModelPicker] = useState12(false);
+  const [resetKey, setResetKey] = useState12(0);
+  const handleSubmit = (msg) => {
+    if (msg.text === "/model") {
+      setShowModelPicker(true);
+      setResetKey((k) => k + 1);
+      return;
     }
-    return /* @__PURE__ */ jsx25(
-      "span",
+    setLastMessage(msg.text);
+  };
+  if (showModelPicker) {
+    return /* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: /* @__PURE__ */ jsx27(Modal, { title: "Select Model", useKeyboard: useKeyboard6, onClose: () => setShowModelPicker(false), children: /* @__PURE__ */ jsx27("box", { paddingX: 1, children: /* @__PURE__ */ jsx27(
+      SelectInput,
       {
-        style: {
-          fg: colorForCell(mutedColors, brightness[y][x])
-        },
-        children: cell
+        items: models,
+        defaultValue: model,
+        useKeyboard: useKeyboard6,
+        onSubmit: (value) => {
+          setModel(value);
+          setShowModelPicker(false);
+        }
+      }
+    ) }) }) });
+  }
+  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs20("text", { children: [
+      /* @__PURE__ */ jsx27("span", { style: textStyle({ fg: theme.muted }), children: "Sent: " }),
+      /* @__PURE__ */ jsx27("span", { style: textStyle({ fg: theme.foreground }), children: lastMessage })
+    ] }) : /* @__PURE__ */ jsx27("text", { children: /* @__PURE__ */ jsx27("span", { children: " " }) }) }),
+    /* @__PURE__ */ jsx27(
+      PromptInput,
+      {
+        commands,
+        files,
+        placeholder: "Message Claude...",
+        showDividers: true,
+        useKeyboard: useKeyboard6,
+        onSubmit: handleSubmit
       },
-      x
-    );
-  }) }, y)) });
+      resetKey
+    ),
+    /* @__PURE__ */ jsx27("box", { children: /* @__PURE__ */ jsx27("text", { children: /* @__PURE__ */ jsx27("span", { style: textStyle({ dim: true }), children: "model: " + model }) }) }),
+    /* @__PURE__ */ jsx27("box", { paddingTop: 1, paddingLeft: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx27(StatusBar, { items: [
+      { key: "\u23CE enter", label: "send" },
+      { key: "/model", label: "change model" },
+      { key: "\u2191", label: "history" }
+    ] }) })
+  ] });
 }
 
-// ../docs/components/landing/landing-app.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var DEMO_RESPONSES = [
-  "Gridland is a framework for building terminal apps with React. It works in both the browser and terminal!",
-  "You can get started with `bun create gridland` to scaffold a new project.",
-  "OpenTUI provides the layout primitives \u2014 flexbox, borders, text styling \u2014 while React handles the component model.",
-  "Yes! Gridland apps are universal \u2014 the same code renders in a terminal emulator and in the browser.",
-  "Check out the docs for examples of interactive components like inputs, selects, and tables."
+// demos/text-input.tsx
+import { useState as useState13 } from "react";
+import { useKeyboard as useKeyboard7 } from "@gridland/utils";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var 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 LandingApp({ useKeyboard: useKeyboard3 }) {
+function TextInputApp() {
+  const [activeField, setActiveField] = useState13(0);
+  const [values, setValues] = useState13(FIELDS.map(() => ""));
+  useKeyboard7((event) => {
+    if (event.name === "up") setActiveField((i) => Math.max(0, i - 1));
+    if (event.name === "down") setActiveField((i) => Math.min(FIELDS.length - 1, i + 1));
+  });
+  return /* @__PURE__ */ jsxs21("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx28("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: FIELDS.map((field, i) => /* @__PURE__ */ jsx28("box", { marginBottom: 1, children: /* @__PURE__ */ jsx28(
+      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__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2191\u2193", label: "field" }] }) })
+  ] });
+}
+
+// demos/link.tsx
+import { useState as useState14 } from "react";
+import { useKeyboard as useKeyboard8 } from "@gridland/utils";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var MODES = ["solid", "dashed", "dotted", "none"];
+function LinkApp() {
   const theme = useTheme();
-  const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
-  const [showAbout, setShowAbout] = useState10(false);
-  const [messages, setMessages] = useState10([]);
-  const [chatStatus, setChatStatus] = useState10("ready");
-  const responseIdx = useRef7(0);
-  const handleChatSubmit = useCallback3(({ text }) => {
-    const userMsg = { id: `u-${Date.now()}`, role: "user", content: text };
-    setMessages((prev) => [...prev, userMsg]);
-    setChatStatus("streaming");
-    setTimeout(() => {
-      const response = DEMO_RESPONSES[responseIdx.current % DEMO_RESPONSES.length];
-      responseIdx.current += 1;
-      const assistantMsg = { id: `a-${Date.now()}`, role: "assistant", content: response };
-      setMessages((prev) => [...prev, assistantMsg]);
-      setChatStatus("ready");
-    }, 1200);
-  }, []);
-  useKeyboard3((event) => {
-    if (event.name === "a" && !showAbout) {
-      setShowAbout(true);
-    }
-    if (event.name === "q" && showAbout) {
-      setShowAbout(false);
-    }
+  const [modeIndex, setModeIndex] = useState14(0);
+  const mode = MODES[modeIndex];
+  useKeyboard8((event) => {
+    if (event.name === "right") setModeIndex((i) => (i + 1) % MODES.length);
+    if (event.name === "left") setModeIndex((i) => (i - 1 + MODES.length) % MODES.length);
   });
-  if (showAbout) {
-    return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", width: "100%", height: "100%", children: [
-      /* @__PURE__ */ jsx26("box", { flexGrow: 1, children: /* @__PURE__ */ jsx26(AboutModal, { onClose: () => setShowAbout(false), useKeyboard: useKeyboard3 }) }),
-      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "close" }] })
-    ] });
-  }
-  const isBrowser = typeof document !== "undefined";
-  const logoHeight = isTiny ? 2 : isNarrow ? 13 : 7;
-  const logoExtra = isBrowser ? 1 : 0;
-  const gap = isMobile ? 0 : 1;
-  const installLinksTop = 3 + logoHeight + logoExtra + gap;
-  const installLinksHeight = 3;
-  const boxTop = installLinksTop + installLinksHeight + gap + 1;
-  const boxHeight = height - boxTop - 1 - 1;
-  const clearRect = { top: boxTop, left: 1, width: width - 2, height: boxHeight };
-  const installLinksClearRect = { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight };
-  return /* @__PURE__ */ jsxs19("box", { width: "100%", height: "100%", position: "relative", children: [
-    /* @__PURE__ */ jsx26(MatrixBackground, { width, height, clearRect, clearRects: [installLinksClearRect] }),
-    /* @__PURE__ */ jsxs19("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false, children: [
-      /* @__PURE__ */ jsxs19("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
-        /* @__PURE__ */ jsx26("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx26(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
-        /* @__PURE__ */ jsxs19("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
-          /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs19("text", { children: [
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ dim: true }), children: "$ " }),
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ bold: true }), children: "bunx " }),
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
-          ] }) }),
-          /* @__PURE__ */ jsx26(InstallBox, {}),
-          /* @__PURE__ */ jsx26(LinksBox, {})
-        ] }),
-        /* @__PURE__ */ jsxs19("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden", children: [
-          /* @__PURE__ */ jsx26("box", { flexGrow: 1, flexDirection: "column", paddingX: 1, overflow: "hidden", children: messages.map((msg) => /* @__PURE__ */ jsx26(Message, { role: msg.role, children: /* @__PURE__ */ jsx26(Message.Content, { children: /* @__PURE__ */ jsx26(Message.Text, { children: msg.content }) }) }, msg.id)) }),
-          /* @__PURE__ */ jsx26("box", { flexShrink: 0, paddingX: 1, paddingBottom: 0, children: /* @__PURE__ */ jsx26(PromptInput, { splaceholder: "Ask about Gridland...", status: chatStatus, onSubmit: handleChatSubmit, useKeyboard: useKeyboard3 }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "a", label: "about" }] })
-    ] })
+  return /* @__PURE__ */ jsxs22("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx29("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs22("text", { style: textStyle({ fg: theme.foreground }), children: [
+      "Made by ",
+      /* @__PURE__ */ jsx29("a", { href: "https://cjroth.com", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent }, children: "Chris Roth" }),
+      " and ",
+      /* @__PURE__ */ jsx29("a", { href: "https://jessicacheng.studio", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent }, children: "Jessica Cheng" }),
+      "."
+    ] }) }),
+    /* @__PURE__ */ jsx29("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx29(
+      StatusBar,
+      {
+        extra: /* @__PURE__ */ jsx29("span", { style: textStyle({ bold: true, fg: theme.foreground }), children: mode.padEnd(6) }),
+        items: [{ key: "\u2190\u2192", label: "underline style" }]
+      }
+    ) })
   ] });
 }
 
-// ../docs/components/landing/matrix-rain.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+// demos/tabs.tsx
+import { useState as useState15 } from "react";
+import { useKeyboard as useKeyboard9 } from "@gridland/utils";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var tabs = ["Files", "Search", "Git", "Debug"];
+function TabBarApp() {
+  const [selectedIndex, setSelectedIndex] = useState15(0);
+  useKeyboard9((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__ */ jsxs23("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx30("box", { padding: 1, children: /* @__PURE__ */ jsx30(TabBar, { options: tabs, selectedIndex }) }),
+    /* @__PURE__ */ jsx30("box", { flexGrow: 1 }),
+    /* @__PURE__ */ jsx30("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx30(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }] }) })
+  ] });
+}
 
-// ../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";
-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 jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-var fonts = [
-  { name: "ANSI Shadow", data: ansiShadow2 },
-  { name: "Standard", data: standard },
-  { name: "Big", data: big },
-  { name: "Doom", data: doom },
-  { name: "Slant", data: slant },
-  { name: "Speed", data: speed },
-  { name: "Block", data: block },
-  { name: "Colossal", data: colossal }
+// demos/status-bar.tsx
+import { useState as useState16 } from "react";
+import { useKeyboard as useKeyboard10 } from "@gridland/utils";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var shortcuts = [
+  { key: "Tab", label: "switch focus" },
+  { key: "\u2190\u2192", label: "cycle" },
+  { key: "b", label: "back" },
+  { key: "z", label: "reset" }
 ];
-for (const f of fonts) {
-  figlet2.parseFont(f.name, f.data);
-}
-function getFigletLines(fontName, text = "gridland") {
-  const art = figlet2.textSync(text, { font: fontName });
-  return art.split("\n").filter((l) => l.trimEnd().length > 0);
-}
-var gradientNames = Object.keys(GRADIENTS);
-function GradientApp() {
-  const [index, setIndex] = useState11(0);
-  const name = gradientNames[index];
-  const lines = getFigletLines("ANSI Shadow");
-  useKeyboard((event) => {
-    if (event.name === "left") setIndex((i) => i > 0 ? i - 1 : gradientNames.length - 1);
-    if (event.name === "right") setIndex((i) => i < gradientNames.length - 1 ? i + 1 : 0);
+function StatusBarApp() {
+  const theme = useTheme();
+  const [lastKey, setLastKey] = useState16(null);
+  useKeyboard10((event) => {
+    if (event.name === "tab") setLastKey("switch focus (Tab)");
+    else if (event.name === "left") setLastKey("cycle (\u2190)");
+    else if (event.name === "right") setLastKey("cycle (\u2192)");
+    else if (event.name === "b") setLastKey("back (b)");
+    else if (event.name === "z") setLastKey("reset (z)");
   });
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx28(Gradient, { name, children: lines.join("\n") }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs24("box", { flexDirection: "column", gap: 1, padding: 1, children: [
+    lastKey ? /* @__PURE__ */ jsxs24("text", { children: [
+      /* @__PURE__ */ jsx31("span", { children: "Pressed: " }),
+      /* @__PURE__ */ jsx31("span", { style: textStyle({ bold: true, fg: theme.accent }), children: lastKey })
+    ] }) : /* @__PURE__ */ jsx31("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
+    /* @__PURE__ */ jsx31(
       StatusBar,
       {
-        items: [{ key: "\u2190\u2192", label: "gradient" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "cyan", bold: true }), children: name.padEnd(11) })
+        items: shortcuts,
+        extra: /* @__PURE__ */ jsx31("span", { style: textStyle({ fg: theme.success }), children: "\u25CF Ready" })
       }
-    ) })
+    )
   ] });
 }
-function AsciiApp() {
-  const [fontIndex, setFontIndex] = useState11(0);
-  const font = fonts[fontIndex];
-  const lines = getFigletLines(font.name);
-  useKeyboard((event) => {
-    if (event.name === "left") setFontIndex((i) => i > 0 ? i - 1 : fonts.length - 1);
-    if (event.name === "right") setFontIndex((i) => i < fonts.length - 1 ? i + 1 : 0);
+
+// demos/modal.tsx
+import { useState as useState17 } from "react";
+import { useKeyboard as useKeyboard11 } from "@gridland/utils";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+function ModalApp() {
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = useState17(false);
+  useKeyboard11((event) => {
+    if (!isOpen && event.name === "m") setIsOpen(true);
+    if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
   });
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: lines.map((line, i) => /* @__PURE__ */ jsx28("text", { fg: "#88c0d0", bold: true, children: line }, i)) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(
-      StatusBar,
+  if (isOpen) {
+    return /* @__PURE__ */ jsxs25("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx32(Modal, { title: "Example Modal", useKeyboard: useKeyboard11, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs25("box", { paddingX: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx32("text", { style: textStyle({ fg: theme.foreground }), children: "This is a modal overlay component." }),
+        /* @__PURE__ */ jsx32("text", { children: " " }),
+        /* @__PURE__ */ jsx32("text", { style: textStyle({ dim: true, fg: theme.muted }), children: "It stretches to fill the full terminal height." })
+      ] }) }),
+      /* @__PURE__ */ jsx32("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx32(StatusBar, { items: [{ key: "q", label: "close" }] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx32("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs25("text", { children: [
+    /* @__PURE__ */ jsx32("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "Press " }),
+    /* @__PURE__ */ jsx32("span", { style: textStyle({ bold: true, fg: theme.background, bg: theme.muted }), children: " m " }),
+    /* @__PURE__ */ jsx32("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " to open modal" })
+  ] }) });
+}
+
+// demos/primitives.tsx
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+function PrimitivesApp() {
+  return /* @__PURE__ */ jsxs26("box", { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsx33(
+      "box",
       {
-        items: [{ key: "\u2190\u2192", label: "change font" }, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "cyan", bold: true }), children: font.name.padEnd(11) })
+        border: true,
+        borderStyle: "rounded",
+        borderColor: "#75715e",
+        title: "Layout",
+        titleAlignment: "center",
+        padding: 1,
+        children: /* @__PURE__ */ jsxs26("box", { flexDirection: "row", gap: 2, children: [
+          /* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#a6e22e", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#a6e22e", bold: true, children: "Box 1" }) }),
+          /* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#f92672", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#f92672", bold: true, children: "Box 2" }) }),
+          /* @__PURE__ */ jsx33("box", { border: true, borderStyle: "single", borderColor: "#66d9ef", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx33("text", { fg: "#66d9ef", bold: true, children: "Box 3" }) })
+        ] })
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsx33("text", { dim: true, fg: "#75715e", children: "  Nested boxes with borders, colors & flexbox layout" })
   ] });
 }
-function TableApp() {
-  const data = [
-    { name: "Alice", role: "Engineer", status: "Active" },
-    { name: "Bob", role: "Designer", status: "Active" },
-    { name: "Charlie", role: "PM", status: "Away" }
-  ];
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(Table, { data, headerColor: "cyan", borderColor: "#5e81ac" }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
-  ] });
+
+// demos/chat.tsx
+import { useState as useState18, useCallback as useCallback3, useRef as useRef5 } from "react";
+import { useKeyboard as useKeyboard12 } from "@gridland/utils";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var initialMessages = [
+  { id: "1", role: "user", content: "Show me my portfolio" },
+  { id: "2", role: "assistant", content: "Here's your current portfolio allocation:" },
+  { id: "3", role: "user", content: "Calculate rebalancing trades" },
+  { id: "4", role: "assistant", content: "I've calculated the optimal trades to rebalance your portfolio." }
+];
+var nextId = 5;
+function ChatApp() {
+  const [messages, setMessages] = useState18(initialMessages);
+  const [isLoading, setIsLoading] = useState18(false);
+  const [streamingText, setStreamingText] = useState18("");
+  const [activeToolCalls, setActiveToolCalls] = useState18([]);
+  const intervalRef = useRef5(null);
+  const handleSend = useCallback3((text) => {
+    const userMsg = { id: String(nextId++), role: "user", content: text };
+    setMessages((prev) => [...prev, userMsg]);
+    setIsLoading(true);
+    const toolCallId = `tc-${nextId}`;
+    setTimeout(() => {
+      setIsLoading(false);
+      setActiveToolCalls([{ id: toolCallId, title: "process_request", status: "in_progress" }]);
+    }, 500);
+    setTimeout(() => {
+      setActiveToolCalls([{ id: toolCallId, title: "process_request", status: "completed" }]);
+    }, 1200);
+    const response = `You said: "${text}". This is a demo response.`;
+    let charIndex = 0;
+    setTimeout(() => {
+      intervalRef.current = setInterval(() => {
+        charIndex = Math.min(charIndex + 3, response.length);
+        if (charIndex < response.length) {
+          setStreamingText(response.slice(0, charIndex));
+        } else {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          setStreamingText("");
+          setActiveToolCalls([]);
+          setMessages((prev) => [
+            ...prev,
+            { id: String(nextId++), role: "assistant", content: response }
+          ]);
+        }
+      }, 50);
+    }, 1400);
+  }, []);
+  const handleCancel = useCallback3(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setIsLoading(false);
+    setStreamingText("");
+    setActiveToolCalls([]);
+  }, []);
+  return /* @__PURE__ */ jsx34(
+    ChatPanel,
+    {
+      messages,
+      streamingText,
+      isLoading,
+      activeToolCalls,
+      onSendMessage: handleSend,
+      onCancel: handleCancel,
+      placeholder: "Ask about your portfolio...",
+      useKeyboard: useKeyboard12
+    }
+  );
 }
-function SpinnerApp() {
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { flexGrow: 1, children: /* @__PURE__ */ jsx28(SpinnerPicker, { useKeyboard }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }, { key: "q", label: "quit" }] }) })
+
+// demos/chain-of-thought.tsx
+import { useState as useState19, useEffect as useEffect4, useRef as useRef6 } from "react";
+import { useKeyboard as useKeyboard13 } from "@gridland/utils";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var ALL_STEPS = [
+  { tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
+  { tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
+  { tool: "Edit", label: "Editing files", description: "4 files", status: "done", delay: 3200 },
+  { tool: "Bash", label: "Running tests", description: "vitest", status: "done", delay: 2e3 },
+  { tool: "Edit", label: "Fixing test", description: "routes.test.ts", status: "done", delay: 1500 }
+];
+function ChainOfThoughtApp() {
+  const [expanded, setExpanded] = useState19(true);
+  const [phase, setPhase] = useState19("running");
+  const [stepIndex, setStepIndex] = useState19(0);
+  const timerRef = useRef6(null);
+  useKeyboard13((event) => {
+    if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
+    if (event.name === "r") restart();
+  });
+  function restart() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setPhase("running");
+    setStepIndex(0);
+  }
+  useEffect4(() => {
+    if (phase !== "running") return;
+    if (stepIndex < ALL_STEPS.length) {
+      const delay = ALL_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]);
+  useEffect4(() => {
+    if (phase === "done") {
+      timerRef.current = setTimeout(() => restart(), 3e3);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  const steps = ALL_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 = ALL_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
+  const totalMs = ALL_STEPS.reduce((sum, s) => sum + s.delay, 0);
+  const durationStr = phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`;
+  return /* @__PURE__ */ jsxs27("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx35("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs27(ChainOfThought, { open: expanded, onOpenChange: setExpanded, children: [
+      /* @__PURE__ */ jsx35(ChainOfThoughtHeader, { duration: durationStr }),
+      /* @__PURE__ */ jsx35(ChainOfThoughtContent, { children: steps.map((step, i) => /* @__PURE__ */ jsx35(
+        ChainOfThoughtStep,
+        {
+          label: step.label,
+          description: step.description,
+          status: step.status,
+          isLast: i === steps.length - 1,
+          children: step.output
+        },
+        i
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsx35("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx35(StatusBar, { items: [
+      { key: "ctrl+shift+e", label: "toggle" },
+      { key: "r", label: "restart" }
+    ] }) })
   ] });
 }
-function SelectInputApp() {
-  const [submitted, setSubmitted] = useState11(false);
-  const items = [
-    { label: "TypeScript", value: "ts" },
-    { label: "JavaScript", value: "js" },
-    { label: "Python", value: "py" },
-    { label: "Rust", value: "rs" }
-  ];
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx28(SelectInput, { items, title: "Choose a language", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
-      { key: "\u2191\u2193", label: "select" },
-      { key: "enter", label: "submit" },
-      { key: "q", label: "quit" }
-    ] }) })
+
+// demos/message.tsx
+import { useState as useState20, useEffect as useEffect5, useRef as useRef7 } from "react";
+import { useKeyboard as useKeyboard14 } from "@gridland/utils";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var 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.";
+function MessageApp() {
+  const [phase, setPhase] = useState20("idle");
+  const [streamedText, setStreamedText] = useState20("");
+  const timerRef = useRef7(null);
+  useKeyboard14((event) => {
+    if (event.name === "r") restart();
+  });
+  function restart() {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setPhase("idle");
+    setStreamedText("");
+  }
+  useEffect5(() => {
+    if (phase === "idle") {
+      timerRef.current = setTimeout(() => setPhase("streaming"), 800);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  useEffect5(() => {
+    if (phase !== "streaming") return;
+    if (streamedText.length < RESPONSE.length) {
+      timerRef.current = setTimeout(() => {
+        setStreamedText(RESPONSE.slice(0, streamedText.length + 2));
+      }, 25);
+    } else {
+      timerRef.current = setTimeout(() => setPhase("done"), 500);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase, streamedText]);
+  useEffect5(() => {
+    if (phase === "done") {
+      timerRef.current = setTimeout(() => restart(), 3e3);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [phase]);
+  const isStreaming = phase === "streaming";
+  const isDone = phase === "done";
+  const showAssistant = phase !== "idle";
+  return /* @__PURE__ */ jsxs28("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs28("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
+      /* @__PURE__ */ jsx36(Message, { role: "user", children: /* @__PURE__ */ jsx36(Message.Content, { children: /* @__PURE__ */ jsx36(Message.Text, { children: "Can you refactor the auth module?" }) }) }),
+      showAssistant && /* @__PURE__ */ jsx36(Message, { role: "assistant", isStreaming, children: /* @__PURE__ */ jsx36(Message.Content, { children: /* @__PURE__ */ jsx36(Message.Text, { isLast: true, children: isDone ? RESPONSE : streamedText }) }) })
+    ] }),
+    /* @__PURE__ */ jsx36("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx36(StatusBar, { items: [{ key: "r", label: "restart" }] }) })
   ] });
 }
-function MultiSelectApp() {
-  const [submitted, setSubmitted] = useState11(false);
-  const items = [
-    { label: "TypeScript", value: "ts" },
-    { label: "JavaScript", value: "js" },
-    { label: "Python", value: "py" },
-    { label: "Rust", value: "rs" }
-  ];
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx28(MultiSelect, { items, title: "Select languages", useKeyboard, onSubmit: () => setSubmitted(true) }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: submitted ? [{ key: "q", label: "quit" }] : [
-      { key: "\u2191\u2193", label: "move" },
-      { key: "enter", label: "select" },
-      { key: "a", label: "all" },
-      { key: "x", label: "clear" },
-      { key: "q", label: "quit" }
-    ] }) })
+
+// demos/terminal-window.tsx
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+function TerminalWindowApp() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs29("box", { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.secondary }), children: '$ echo "Hello from TerminalWindow"' }),
+    /* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.foreground }), children: "Hello from TerminalWindow" }),
+    /* @__PURE__ */ jsx37("text", { style: textStyle({ fg: theme.secondary }), children: "$ _" })
   ] });
 }
-function PromptInputApp() {
-  const [lastMessage, setLastMessage] = useState11("");
-  const [model, setModel] = useState11("opus");
-  const [showModelPicker, setShowModelPicker] = useState11(false);
-  const [resetKey, setResetKey] = useState11(0);
-  const commands = [
-    { cmd: "/help", desc: "Show commands" },
-    { cmd: "/model", desc: "Switch model" },
-    { 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;
+
+// demos/focus.tsx
+import { useState as useState21, useRef as useRef8 } from "react";
+import { useKeyboard as useKeyboard15 } from "@gridland/utils";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+var focusPanels = [
+  {
+    label: "Language",
+    items: [
+      { label: "TypeScript", value: "ts" },
+      { label: "JavaScript", value: "js" },
+      { label: "Python", value: "py" }
+    ]
+  },
+  {
+    label: "Framework",
+    items: [
+      { label: "React", value: "react" },
+      { label: "Vue", value: "vue" },
+      { label: "Svelte", value: "svelte" }
+    ]
+  },
+  {
+    label: "Runtime",
+    items: [
+      { label: "Bun", value: "bun" },
+      { label: "Node", value: "node" },
+      { label: "Deno", value: "deno" }
+    ]
+  }
+];
+function FocusApp() {
+  const [panelIndex, setPanelIndex] = useState21(0);
+  const [entered, setEntered] = useState21(false);
+  const [cursors, setCursors] = useState21([0, 0, 0]);
+  const [selections, setSelections] = useState21([null, null, null]);
+  const panelRef = useRef8(0);
+  const enteredRef = useRef8(false);
+  const cursorsRef = useRef8([0, 0, 0]);
+  panelRef.current = panelIndex;
+  enteredRef.current = entered;
+  cursorsRef.current = cursors;
+  useKeyboard15((event) => {
+    const pi = panelRef.current;
+    if (enteredRef.current) {
+      const items3 = focusPanels[pi].items;
+      const cur = cursorsRef.current[pi];
+      if (event.name === "down" || event.name === "j") {
+        const next = (cur + 1) % items3.length;
+        cursorsRef.current = [...cursorsRef.current];
+        cursorsRef.current[pi] = next;
+        setCursors([...cursorsRef.current]);
+      } else if (event.name === "up" || event.name === "k") {
+        const next = (cur - 1 + items3.length) % items3.length;
+        cursorsRef.current = [...cursorsRef.current];
+        cursorsRef.current[pi] = next;
+        setCursors([...cursorsRef.current]);
+      } else if (event.name === "return") {
+        const selected = items3[cursorsRef.current[pi]].label;
+        setSelections((s) => {
+          const n = [...s];
+          n[pi] = selected;
+          return n;
+        });
+        enteredRef.current = false;
+        setEntered(false);
+      } else if (event.name === "escape") {
+        enteredRef.current = false;
+        setEntered(false);
+      }
+    } else {
+      if (event.name === "right" || event.name === "tab") {
+        const next = (pi + 1) % focusPanels.length;
+        panelRef.current = next;
+        setPanelIndex(next);
+      } else if (event.name === "left") {
+        const next = (pi - 1 + focusPanels.length) % focusPanels.length;
+        panelRef.current = next;
+        setPanelIndex(next);
+      } else if (event.name === "return") {
+        enteredRef.current = true;
+        setEntered(true);
+      }
     }
-    setLastMessage(msg.text);
-  };
-  if (showModelPicker) {
-    return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28(
-        Modal,
+    event.preventDefault();
+  });
+  return /* @__PURE__ */ jsxs30("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx38("box", { flexDirection: "row", gap: 1, padding: 1, flexGrow: 1, children: focusPanels.map((panel, i) => {
+      const focused = i === panelIndex;
+      const active = focused && entered;
+      const selected = selections[i];
+      return /* @__PURE__ */ jsx38(
+        "box",
         {
-          title: "Select Model",
-          useKeyboard,
-          onClose: () => setShowModelPicker(false),
-          children: /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsx28(
-            SelectInput,
-            {
-              items: models,
-              defaultValue: model,
-              useKeyboard,
-              onSubmit: (value) => {
-                setModel(value);
-                setShowModelPicker(false);
-              }
-            }
-          ) })
-        }
-      ),
-      /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
-        { key: "\u23CE", label: "select" },
-        { key: "esc", label: "cancel" },
-        { key: "q", label: "quit" }
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs20("text", { children: [
-      /* @__PURE__ */ jsx28("span", { children: "Sent: " }),
-      /* @__PURE__ */ jsx28("span", { children: lastMessage })
-    ] }) : /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Type a message and press enter" }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsx28(
-      PromptInput,
+          border: true,
+          borderStyle: "rounded",
+          borderColor: active ? "#22c55e" : focused ? "#3b82f6" : "#555",
+          flexGrow: 1,
+          children: /* @__PURE__ */ jsxs30("box", { flexDirection: "column", padding: 1, children: [
+            /* @__PURE__ */ jsxs30("text", { style: {
+              fg: active ? "#22c55e" : focused ? "#3b82f6" : "#888",
+              bold: focused
+            }, children: [
+              focused ? "\u25B8 " : "  ",
+              panel.label,
+              selected ? `: ${selected}` : ""
+            ] }),
+            (active || !entered && focused) && /* @__PURE__ */ jsxs30(Fragment7, { children: [
+              /* @__PURE__ */ jsx38("box", { height: 1 }),
+              /* @__PURE__ */ jsx38("box", { flexDirection: "column", children: panel.items.map((item, j) => {
+                const highlighted = active && j === cursors[i];
+                return /* @__PURE__ */ jsxs30("text", { style: {
+                  fg: highlighted ? "#22c55e" : active ? "#ccc" : "#666",
+                  bold: highlighted
+                }, children: [
+                  highlighted ? " \u25B8 " : "   ",
+                  item.label
+                ] }, item.value);
+              }) })
+            ] })
+          ] })
+        },
+        panel.label
+      );
+    }) }),
+    /* @__PURE__ */ jsx38("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx38(
+      StatusBar,
       {
-        commands,
-        files,
-        placeholder: "Message Claude...",
-        showDividers: true,
-        useKeyboard,
-        onSubmit: handleSubmit
-      },
-      resetKey
-    ) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, children: /* @__PURE__ */ jsxs20("text", { children: [
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "#C4A8FF" }), children: "[\u22A1_\u22A1]" }),
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: " " + model })
-    ] }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
-      { key: "\u23CE", label: "send" },
-      { key: "/", label: "commands" },
-      { key: "@", label: "files" },
-      { key: "\u2191", label: "history" },
-      { key: "q", label: "quit" }
-    ] }) })
+        items: entered ? [{ key: "\u2191\u2193", label: "select" }, { key: "enter", label: "confirm" }, { key: "esc", label: "back" }] : [{ key: "\u2190\u2192", label: "navigate" }, { key: "enter", label: "select" }, { key: "tab", label: "next" }]
+      }
+    ) })
   ] });
 }
-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() {
-  const [activeField, setActiveField] = useState11(0);
-  const [values, setValues] = useState11(TEXT_INPUT_FIELDS.map(() => ""));
-  useKeyboard((event) => {
-    if (event.name === "up") setActiveField((i) => Math.max(0, i - 1));
-    if (event.name === "down" || event.name === "tab") setActiveField((i) => Math.min(TEXT_INPUT_FIELDS.length - 1, i + 1));
+
+// demos/pointer.tsx
+import { useState as useState22, useRef as useRef9 } from "react";
+import { useKeyboard as useKeyboard16 } from "@gridland/utils";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+var pointerColors = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"];
+var pointerColorNames = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"];
+function HoverBox() {
+  const [hovering, setHovering] = useState22(false);
+  return /* @__PURE__ */ jsx39(
+    "box",
+    {
+      border: true,
+      borderStyle: "rounded",
+      borderColor: hovering ? "#22c55e" : "#555",
+      width: 20,
+      height: 5,
+      onMouseOver: () => setHovering(true),
+      onMouseOut: () => setHovering(false),
+      children: /* @__PURE__ */ jsx39("box", { padding: 1, children: /* @__PURE__ */ jsx39("text", { style: { fg: hovering ? "#22c55e" : "#888", bold: hovering }, children: hovering ? "Mouse inside!" : "Hover me" }) })
+    }
+  );
+}
+function PointerApp() {
+  const [selected, setSelected] = useState22(null);
+  const [clickCount, setClickCount] = useState22(0);
+  const [mousePos, setMousePos] = useState22(null);
+  const selectedRef = useRef9(null);
+  const clickCountRef = useRef9(0);
+  selectedRef.current = selected;
+  clickCountRef.current = clickCount;
+  useKeyboard16((event) => {
+    const cur = selectedRef.current ?? -1;
+    if (event.name === "right" || event.name === "tab") {
+      const next = (cur + 1) % pointerColors.length;
+      selectedRef.current = next;
+      setSelected(next);
+    } else if (event.name === "left") {
+      const next = (cur - 1 + pointerColors.length) % pointerColors.length;
+      selectedRef.current = next;
+      setSelected(next);
+    }
+    event.preventDefault();
   });
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingTop: 1, children: /* @__PURE__ */ jsxs20("text", { children: [
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "#FF71CE", bold: true }), children: "TextInput" }),
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: "  Form with multiple input types" })
-    ] }) }),
-    /* @__PURE__ */ jsx28("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: TEXT_INPUT_FIELDS.map((field, i) => /* @__PURE__ */ jsx28("box", { marginBottom: 1, children: /* @__PURE__ */ jsx28(
-      TextInput,
+  return /* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx39("box", { flexDirection: "row", gap: 1, children: pointerColors.map((color, i) => /* @__PURE__ */ jsx39(
+      "box",
       {
-        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__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
-      { key: "\u2191\u2193", label: "field" },
-      { key: "\u2190\u2192", label: "cursor" },
-      { key: "tab", label: "complete" },
-      { key: "^k/^u", label: "kill" }
+        flexGrow: 1,
+        height: 3,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: i === selected ? color : "#555",
+        onMouseDown: (e) => {
+          clickCountRef.current++;
+          setClickCount(clickCountRef.current);
+          selectedRef.current = i;
+          setSelected(i);
+          setMousePos({ x: e.x, y: e.y });
+        },
+        children: /* @__PURE__ */ jsx39("text", { style: { fg: color, bold: i === selected }, children: i === selected ? `\u25B8 ${pointerColorNames[i]}` : ` ${pointerColorNames[i]}` })
+      },
+      color
+    )) }),
+    /* @__PURE__ */ jsx39("box", { height: 1 }),
+    /* @__PURE__ */ jsxs31("box", { flexDirection: "row", gap: 2, children: [
+      /* @__PURE__ */ jsx39(HoverBox, {}),
+      /* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, paddingTop: 1, children: [
+        /* @__PURE__ */ jsxs31("text", { style: { fg: selected !== null ? pointerColors[selected] : "#888" }, children: [
+          selected !== null ? `Clicked ${pointerColorNames[selected]}` : "Click a color",
+          clickCount > 0 ? `  (${clickCount} clicks)` : ""
+        ] }),
+        /* @__PURE__ */ jsx39("text", { style: { dim: true, fg: "#888" }, children: mousePos ? `mouse: ${mousePos.x}, ${mousePos.y}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx39("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx39(StatusBar, { items: [
+      { key: "click", label: "select" },
+      { key: "\u2190\u2192", label: "keyboard nav" }
     ] }) })
   ] });
 }
-function LinkApp() {
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28(LinkDemo, { useKeyboard }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
-  ] });
+
+// demos/cursor-highlight.tsx
+import { useState as useState23 } from "react";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+function CursorHighlightApp() {
+  const [pos, setPos] = useState23(null);
+  return /* @__PURE__ */ jsxs32(
+    "box",
+    {
+      flexDirection: "column",
+      flexGrow: 1,
+      onMouseMove: (e) => {
+        setPos({ x: e.x, y: e.y });
+      },
+      children: [
+        /* @__PURE__ */ jsxs32("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+          /* @__PURE__ */ jsx40("text", { style: { bold: true, fg: "#fff" }, children: "Cursor Highlight" }),
+          /* @__PURE__ */ jsx40("text", { style: { dim: true, fg: "#888" }, children: "Move your mouse over the grid" }),
+          /* @__PURE__ */ jsx40("box", { height: 1 }),
+          /* @__PURE__ */ jsx40("box", { flexDirection: "column", children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx40("text", { children: Array.from({ length: 40 }, (_2, col) => {
+            const isEven = (row + col) % 2 === 0;
+            return /* @__PURE__ */ jsx40("span", { style: {
+              fg: isEven ? "#3b82f6" : "#8b5cf6",
+              dim: !isEven
+            }, children: isEven ? "\u2591\u2591" : "\u2593\u2593" }, col);
+          }) }, row)) })
+        ] }),
+        /* @__PURE__ */ jsx40("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx40(
+          StatusBar,
+          {
+            items: [],
+            extra: /* @__PURE__ */ jsxs32("span", { children: [
+              /* @__PURE__ */ jsx40("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " x " }),
+              /* @__PURE__ */ jsx40("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.x).padStart(3) : "  -"} ` }),
+              /* @__PURE__ */ jsx40("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " y " }),
+              /* @__PURE__ */ jsx40("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.y).padStart(3) : "  -"}` })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
 }
-function TabBarApp() {
-  const tabs = ["Files", "Search", "Git", "Debug"];
-  const [selectedIndex, setSelectedIndex] = useState11(0);
-  useKeyboard((event) => {
-    if (event.name === "left") setSelectedIndex((i) => i > 0 ? i - 1 : tabs.length - 1);
-    if (event.name === "right") setSelectedIndex((i) => i < tabs.length - 1 ? i + 1 : 0);
-  });
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", gap: 1, padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28(TabBar, { label: "View", options: tabs, selectedIndex }),
-      /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Use \u2190/\u2192 arrow keys to switch tabs" })
+
+// demos/text-style.tsx
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+function TextStyleApp() {
+  const theme = useTheme();
+  const desc = textStyle({ fg: theme.muted });
+  return /* @__PURE__ */ jsxs33("box", { flexDirection: "column", padding: 1, gap: 0, children: [
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, bold: true }), children: "bold          " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " bold: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, dim: true }), children: "dim           " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " dim: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, italic: true }), children: "italic        " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " italic: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, underline: true }), children: "underline     " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " underline: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ inverse: true }), children: "inverse       " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " inverse: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx41("text", { children: " " }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.primary }), children: "fg color      " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.primary ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.foreground, bg: theme.secondary }), children: "bg color      " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.foreground, bg: theme.secondary ",
+        "}",
+        ")"
+      ] })
     ] }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }, { key: "q", label: "quit" }] }) })
+    /* @__PURE__ */ jsx41("text", { children: " " }),
+    /* @__PURE__ */ jsxs33("text", { children: [
+      /* @__PURE__ */ jsx41("span", { style: textStyle({ fg: theme.accent, bold: true, underline: true }), children: "combined      " }),
+      /* @__PURE__ */ jsxs33("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.accent, bold: true, underline: true ",
+        "}",
+        ")"
+      ] })
+    ] })
   ] });
 }
-function StatusBarApp() {
-  const shortcuts = [
-    { key: "Tab", label: "switch focus" },
-    { key: "\u2190\u2192", label: "cycle" },
-    { key: "b", label: "back" },
-    { key: "z", label: "reset" }
-  ];
-  const [lastKey, setLastKey] = useState11(null);
-  useKeyboard((event) => {
-    if (event.name === "tab") setLastKey("switch focus (Tab)");
-    else if (event.name === "left") setLastKey("cycle (\u2190)");
-    else if (event.name === "right") setLastKey("cycle (\u2192)");
-    else if (event.name === "b") setLastKey("back (b)");
-    else if (event.name === "z") setLastKey("reset (z)");
-  });
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", gap: 1, padding: 1, children: [
-    lastKey ? /* @__PURE__ */ jsxs20("text", { children: [
-      /* @__PURE__ */ jsx28("span", { children: "Pressed: " }),
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ bold: true, fg: "cyan" }), children: lastKey })
-    ] }) : /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "Press a key to trigger an action" }),
-    /* @__PURE__ */ jsx28(
-      StatusBar,
+
+// demos/headless.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var data = [
+  { name: "Alice", role: "Engineer", status: "Active" },
+  { name: "Bob", role: "Designer", status: "Active" },
+  { name: "Charlie", role: "PM", status: "Away" }
+];
+function HeadlessApp() {
+  return /* @__PURE__ */ jsx42("box", { padding: 1, children: /* @__PURE__ */ jsx42(Table, { data }) });
+}
+
+// demos/theming.tsx
+import { useKeyboard as useKeyboard17 } from "@gridland/utils";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+var tableData = [
+  { name: "Alice", role: "Engineer", status: "Active" },
+  { name: "Bob", role: "Designer", status: "Away" }
+];
+var selectItems = [
+  { label: "TypeScript", value: "ts" },
+  { label: "JavaScript", value: "js" },
+  { label: "Python", value: "py" }
+];
+function ThemingApp() {
+  return /* @__PURE__ */ jsxs34("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
+    /* @__PURE__ */ jsx43(Spinner, { text: "Loading data..." }),
+    /* @__PURE__ */ jsx43(Table, { data: tableData }),
+    /* @__PURE__ */ jsx43(MultiSelect, { items: selectItems, useKeyboard: useKeyboard17 })
+  ] });
+}
+
+// src/landing/landing-app.tsx
+import { useMemo as useMemo7 } from "react";
+
+// src/landing/install-box.tsx
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+function InstallBox() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx44(
+    "box",
+    {
+      border: true,
+      borderStyle: "rounded",
+      borderColor: theme.border,
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs35("text", { children: [
+        /* @__PURE__ */ jsx44("span", { style: textStyle({ dim: true }), children: "$ " }),
+        /* @__PURE__ */ jsx44("span", { style: textStyle({ bold: true }), children: "bun create " }),
+        /* @__PURE__ */ jsx44("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
+      ] })
+    }
+  );
+}
+
+// src/landing/links-box.tsx
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+var UNDERLINE3 = 1 << 3;
+function LinksBox() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx45(
+    "box",
+    {
+      border: true,
+      borderStyle: "rounded",
+      borderColor: theme.border,
+      paddingX: 1,
+      flexDirection: "column",
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs36("text", { children: [
+        /* @__PURE__ */ jsx45("span", { children: "\u{1F431}" }),
+        /* @__PURE__ */ jsx45("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
+        /* @__PURE__ */ jsx45("span", { children: "  " }),
+        /* @__PURE__ */ jsx45("span", { children: "\u{1F4D6}" }),
+        /* @__PURE__ */ jsx45("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
+      ] })
+    }
+  );
+}
+
+// src/landing/logo.tsx
+import { useState as useState24, useEffect as useEffect6, useRef as useRef10, useMemo as useMemo5 } from "react";
+import figlet3 from "figlet";
+import ansiShadow3 from "figlet/importable-fonts/ANSI Shadow.js";
+import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+figlet3.parseFont("ANSI Shadow", ansiShadow3);
+function makeArt(text) {
+  return figlet3.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] = useState24(isBrowser ? 0 : 1);
+  const startTime = useRef10(null);
+  useEffect6(() => {
+    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 lines2 = children.split("\n");
+  const maxLength = Math.max(...lines2.map((l) => l.length));
+  if (maxLength === 0) return /* @__PURE__ */ jsx46("text", { children });
+  const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
+  return /* @__PURE__ */ jsx46("box", { position: "relative", width: maxLength, height: lines2.length, shouldFill: false, children: lines2.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__ */ jsx46(
+      "box",
       {
-        items: [...shortcuts, { key: "q", label: "quit" }],
-        extra: /* @__PURE__ */ jsx28("span", { style: textStyle({ fg: "green" }), children: "\u25CF Ready" })
+        position: "absolute",
+        top: lineIndex,
+        left: run.start,
+        shouldFill: false,
+        children: /* @__PURE__ */ jsx46("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx46(
+          "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__ */ jsxs37(Fragment8, { children: [
+    /* @__PURE__ */ jsx46("text", { children: " " }),
+    /* @__PURE__ */ jsx46("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs37("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__ */ jsx46("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 art2 = compact ? "gridland" : narrow ? gridArt + "\n" + landArt : fullArt;
+    return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", shouldFill: false, children: [
+      /* @__PURE__ */ jsx46(Gradient, { name: "instagram", children: art2 }),
+      /* @__PURE__ */ jsx46("text", { children: " " }),
+      /* @__PURE__ */ jsx46("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs37("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__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx46("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: "gridland" }) }) }),
+      subtitle
+    ] });
+  }
+  if (narrow) {
+    return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs37("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
+        /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: gridArt }),
+        /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: landArt })
+      ] }) }),
+      subtitle
+    ] });
+  }
+  return /* @__PURE__ */ jsxs37("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+    /* @__PURE__ */ jsx46("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx46("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx46(RevealGradient, { revealCol, children: fullArt }) }) }),
+    subtitle
+  ] });
+}
+
+// src/landing/matrix-background.tsx
+import { useMemo as useMemo6 } from "react";
+
+// src/landing/use-matrix.ts
+import { useState as useState25, useEffect as useEffect7, useRef as useRef11 } 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 ModalApp() {
-  const [isOpen, setIsOpen] = useState11(false);
-  useKeyboard((event) => {
-    if (!isOpen && event.name === "m") setIsOpen(true);
-    if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
+function useMatrix(width, height) {
+  const columnsRef = useRef11([]);
+  const [state, setState] = useState25(() => {
+    const columns = Array.from(
+      { length: width },
+      () => Math.random() < 0.5 ? createDrop(height, true) : null
+    );
+    columnsRef.current = columns;
+    return buildGrid(columns, width, height);
   });
-  if (isOpen) {
-    return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28(Modal, { title: "Example Modal", borderColor: "blue", useKeyboard, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs20("box", { paddingX: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx28("text", { children: "This is a modal overlay component." }),
-        /* @__PURE__ */ jsx28("text", { children: " " }),
-        /* @__PURE__ */ jsx28("text", { style: textStyle({ dim: true }), children: "It stretches to fill the full terminal height." })
-      ] }) }),
-      /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "close" }, { key: "Esc", label: "quit" }] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs20("text", { children: [
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: "Press " }),
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ inverse: true, bold: true }), children: " m " }),
-      /* @__PURE__ */ jsx28("span", { style: textStyle({ dim: true }), children: " to open modal" })
-    ] }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "m", label: "open modal" }, { key: "q", label: "quit" }] }) })
-  ] });
+  useEffect7(() => {
+    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]);
+  useEffect7(() => {
+    columnsRef.current = Array.from(
+      { length: width },
+      () => Math.random() < 0.5 ? createDrop(height, true) : null
+    );
+    setState(buildGrid(columnsRef.current, width, height));
+  }, [width, height]);
+  return state;
 }
-function PrimitivesApp() {
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "rounded", borderColor: "#5e81ac", title: "Layout", titleAlignment: "center", padding: 1, children: /* @__PURE__ */ jsxs20("box", { flexDirection: "row", gap: 2, children: [
-        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#a3be8c", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#a3be8c", bold: true, children: "Box 1" }) }),
-        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#ebcb8b", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#ebcb8b", bold: true, children: "Box 2" }) }),
-        /* @__PURE__ */ jsx28("box", { border: true, borderStyle: "single", borderColor: "#b48ead", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx28("text", { fg: "#b48ead", bold: true, children: "Box 3" }) })
-      ] }) }),
-      /* @__PURE__ */ jsx28("text", { fg: "#d8dee9", dim: true, children: "  Nested boxes with borders, colors & flexbox layout" })
-    ] }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
-  ] });
+
+// src/landing/matrix-background.tsx
+import { jsx as jsx47 } 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 TerminalWindowApp() {
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28("text", { style: textStyle({ fg: "green" }), children: '$ echo "Hello from OpenTUI"' }),
-      /* @__PURE__ */ jsx28("text", { children: "Hello from OpenTUI" }),
-      /* @__PURE__ */ jsx28("text", { style: textStyle({ fg: "green" }), children: "$ _" })
-    ] }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
-  ] });
+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];
 }
-var COT_STEPS = [
-  { tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
-  { tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
-  { tool: "Edit", label: "Editing files", description: "4 files", status: "done", delay: 3200 },
-  { tool: "Bash", label: "Running tests", description: "vitest", status: "done", delay: 2e3 },
-  { tool: "Edit", label: "Fixing test", description: "routes.test.ts", status: "done", delay: 1500 }
-];
-function ChainOfThoughtApp() {
-  const [expanded, setExpanded] = useState11(true);
-  const [phase, setPhase] = useState11("running");
-  const [stepIndex, setStepIndex] = useState11(0);
-  const timerRef = useRef8(null);
-  useKeyboard((event) => {
-    if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
-    if (event.name === "r") cotRestart();
-  });
-  function cotRestart() {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    setPhase("running");
-    setStepIndex(0);
-  }
-  useEffect5(() => {
-    if (phase !== "running") return;
-    if (stepIndex < COT_STEPS.length) {
-      const delay = COT_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]);
-  useEffect5(() => {
-    if (phase === "done") {
-      timerRef.current = setTimeout(() => cotRestart(), 3e3);
+function MatrixBackground({ width, height, clearRect, clearRects }) {
+  const { grid, brightness } = useMatrix(width, height);
+  const theme = useTheme();
+  const columnColors = useMemo6(
+    () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
+    [width, theme.accent, theme.secondary, theme.primary]
+  );
+  const columnMutedColors = useMemo6(
+    () => columnColors.map(buildMutedColors),
+    [columnColors]
+  );
+  return /* @__PURE__ */ jsx47("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx47("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__ */ jsx47("span", { children: " " }, x);
     }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [phase]);
-  const steps = COT_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 = COT_STEPS.slice(0, stepIndex).reduce((sum, s) => sum + s.delay, 0);
-  const totalMs = COT_STEPS.reduce((sum, s) => sum + s.delay, 0);
-  const durationStr = phase === "done" ? `${(totalMs / 1e3).toFixed(1)}s` : `${(elapsedMs / 1e3).toFixed(1)}s`;
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs20(ChainOfThought, { open: expanded, onOpenChange: setExpanded, children: [
-      /* @__PURE__ */ jsx28(ChainOfThoughtHeader, { duration: durationStr }),
-      /* @__PURE__ */ jsx28(ChainOfThoughtContent, { children: steps.map((step, i) => /* @__PURE__ */ jsx28(
-        ChainOfThoughtStep,
-        {
-          label: step.label,
-          description: step.description,
-          status: step.status,
-          isLast: i === steps.length - 1,
-          children: step.output
+    return /* @__PURE__ */ jsx47(
+      "span",
+      {
+        style: {
+          fg: colorForCell(mutedColors, brightness[y][x])
         },
-        i
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [
-      { key: "ctrl+shift+e", label: "toggle" },
-      { key: "r", label: "restart" },
-      { key: "q", label: "quit" }
-    ] }) })
-  ] });
+        children: cell
+      },
+      x
+    );
+  }) }, y)) });
 }
-var BUBBLE_STEPS = [
-  { tool: "Read", label: "Reading codebase", description: "src/", status: "done", delay: 1800 },
-  { tool: "Think", label: "Planning changes", description: "auth module", status: "done", delay: 2500 },
-  { tool: "Edit", label: "Editing files", description: "4 files", status: "done", delay: 3200 },
-  { tool: "Bash", label: "Running tests", description: "vitest", status: "done", delay: 2e3 },
-  { tool: "Edit", label: "Fixing test", description: "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] = useState11(true);
-  const [phase, setPhase] = useState11("idle");
-  const [stepIndex, setStepIndex] = useState11(0);
-  const [streamedText, setStreamedText] = useState11("");
-  const timerRef = useRef8(null);
-  useKeyboard((event) => {
-    if (event.name === "E" && event.ctrl && event.shift) setExpanded((v) => !v);
-    if (event.name === "r") bubbleRestart();
-  });
-  function bubbleRestart() {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    setPhase("idle");
-    setStepIndex(0);
-    setStreamedText("");
-  }
-  useEffect5(() => {
-    if (phase === "idle") {
-      timerRef.current = setTimeout(() => setPhase("thinking"), 800);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [phase]);
-  useEffect5(() => {
-    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]);
-  useEffect5(() => {
-    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]);
-  useEffect5(() => {
-    if (phase === "done") {
-      timerRef.current = setTimeout(() => bubbleRestart(), 3e3);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
+
+// src/landing/landing-app.tsx
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function LandingApp({ useKeyboard: useKeyboard20 }) {
+  const theme = useTheme();
+  const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
+  const isBrowser = typeof document !== "undefined";
+  const { clearRect, installLinksClearRect } = useMemo7(() => {
+    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 bh = height - boxTop - 1;
+    return {
+      clearRect: { top: boxTop, left: 1, width: width - 2, height: bh },
+      installLinksClearRect: { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight }
     };
-  }, [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__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs20("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
-      /* @__PURE__ */ jsx28(Message, { role: "user", children: /* @__PURE__ */ jsx28(Message.Content, { children: /* @__PURE__ */ jsx28(Message.Text, { children: "Can you refactor the auth module?" }) }) }),
-      showAssistant && /* @__PURE__ */ jsxs20(Message, { role: "assistant", isStreaming, children: [
-        /* @__PURE__ */ jsx28(Message.Reasoning, { part: {
-          type: "reasoning",
-          duration: reasoningDuration,
-          collapsed: !expanded,
-          steps: reasoningSteps
-        } }),
-        (isStreaming || isDone) && /* @__PURE__ */ jsx28(Message.Content, { children: /* @__PURE__ */ jsx28(Message.Text, { isLast: true, children: isDone ? BUBBLE_RESPONSE : streamedText }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "ctrl+shift+e", label: "toggle chain of thought" }, { key: "r", label: "restart" }, { key: "q", label: "quit" }] }) })
-  ] });
-}
-var initialChatMessages = [
-  { id: "1", role: "user", content: "Show me my portfolio" },
-  { id: "2", role: "assistant", content: "Here's your current portfolio allocation:" },
-  { id: "3", role: "user", content: "Calculate rebalancing trades" },
-  { id: "4", role: "assistant", content: "I've calculated the optimal trades to rebalance your portfolio." }
-];
-var chatNextId = 5;
-function ChatApp() {
-  const [messages, setMessages] = useState11(initialChatMessages);
-  const [isLoading, setIsLoading] = useState11(false);
-  const [streamingText, setStreamingText] = useState11("");
-  const [activeToolCalls, setActiveToolCalls] = useState11([]);
-  const intervalRef = useRef8(null);
-  const handleSend = useCallback4((text) => {
-    const userMsg = { id: String(chatNextId++), role: "user", content: text };
-    setMessages((prev) => [...prev, userMsg]);
-    setIsLoading(true);
-    const toolCallId = `tc-${chatNextId}`;
-    setTimeout(() => {
-      setIsLoading(false);
-      setActiveToolCalls([{ id: toolCallId, title: "process_request", status: "in_progress" }]);
-    }, 500);
-    setTimeout(() => {
-      setActiveToolCalls([{ id: toolCallId, title: "process_request", status: "completed" }]);
-    }, 1200);
-    const response = `You said: "${text}". This is a demo response.`;
-    let charIndex = 0;
-    setTimeout(() => {
-      intervalRef.current = setInterval(() => {
-        charIndex = Math.min(charIndex + 3, response.length);
-        if (charIndex < response.length) {
-          setStreamingText(response.slice(0, charIndex));
-        } else {
-          if (intervalRef.current) clearInterval(intervalRef.current);
-          setStreamingText("");
-          setActiveToolCalls([]);
-          setMessages((prev) => [
-            ...prev,
-            { id: String(chatNextId++), role: "assistant", content: response }
-          ]);
-        }
-      }, 50);
-    }, 1400);
-  }, []);
-  const handleCancel = useCallback4(() => {
-    if (intervalRef.current) clearInterval(intervalRef.current);
-    setIsLoading(false);
-    setStreamingText("");
-    setActiveToolCalls([]);
-  }, []);
-  return /* @__PURE__ */ jsxs20("box", { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx28(
-      ChatPanel,
-      {
-        messages,
-        streamingText,
-        isLoading,
-        activeToolCalls,
-        onSendMessage: handleSend,
-        onCancel: handleCancel,
-        placeholder: "Ask about your portfolio...",
-        useKeyboard
-      }
-    ),
-    /* @__PURE__ */ jsx28("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx28(StatusBar, { items: [{ key: "q", label: "quit" }] }) })
+  }, [width, height, isTiny, isNarrow, isMobile, isBrowser]);
+  return /* @__PURE__ */ jsxs38("box", { width: "100%", height: "100%", position: "relative", children: [
+    /* @__PURE__ */ jsx48(MatrixBackground, { width, height, clearRect, clearRects: isBrowser ? void 0 : [installLinksClearRect] }),
+    /* @__PURE__ */ jsx48("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false, children: /* @__PURE__ */ jsxs38("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
+      /* @__PURE__ */ jsx48("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx48(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
+      /* @__PURE__ */ jsxs38("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
+        /* @__PURE__ */ jsx48("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs38("text", { children: [
+          /* @__PURE__ */ jsx48("span", { style: textStyle({ dim: true }), children: "$ " }),
+          /* @__PURE__ */ jsx48("span", { style: textStyle({ bold: true }), children: "bunx " }),
+          /* @__PURE__ */ jsx48("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
+        ] }) }),
+        /* @__PURE__ */ jsx48(InstallBox, {}),
+        /* @__PURE__ */ jsx48(LinksBox, {})
+      ] }),
+      /* @__PURE__ */ jsx48("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden" })
+    ] }) })
   ] });
 }
+
+// src/landing/matrix-rain.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// src/landing/about-modal.tsx
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+
+// demos/index.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
 var demos = [
-  { name: "gradient", app: () => /* @__PURE__ */ jsx28(GradientApp, {}) },
-  { name: "ascii", app: () => /* @__PURE__ */ jsx28(AsciiApp, {}) },
-  { name: "table", app: () => /* @__PURE__ */ jsx28(TableApp, {}) },
-  { name: "spinner", app: () => /* @__PURE__ */ jsx28(SpinnerApp, {}) },
-  { name: "select-input", app: () => /* @__PURE__ */ jsx28(SelectInputApp, {}) },
-  { name: "multi-select", app: () => /* @__PURE__ */ jsx28(MultiSelectApp, {}) },
-  { name: "prompt-input", app: () => /* @__PURE__ */ jsx28(PromptInputApp, {}) },
-  { name: "text-input", app: () => /* @__PURE__ */ jsx28(TextInputApp, {}) },
-  { name: "link", app: () => /* @__PURE__ */ jsx28(LinkApp, {}) },
-  { name: "tabs", app: () => /* @__PURE__ */ jsx28(TabBarApp, {}) },
-  { name: "status-bar", app: () => /* @__PURE__ */ jsx28(StatusBarApp, {}) },
-  { name: "modal", app: () => /* @__PURE__ */ jsx28(ModalApp, {}) },
-  { name: "primitives", app: () => /* @__PURE__ */ jsx28(PrimitivesApp, {}) },
-  { name: "chat", app: () => /* @__PURE__ */ jsx28(ChatApp, {}) },
-  { name: "chain-of-thought", app: () => /* @__PURE__ */ jsx28(ChainOfThoughtApp, {}) },
-  { name: "message", app: () => /* @__PURE__ */ jsx28(MessageApp, {}) },
-  { name: "terminal-window", app: () => /* @__PURE__ */ jsx28(TerminalWindowApp, {}) },
-  { name: "landing", app: () => /* @__PURE__ */ jsx28(LandingApp, { useKeyboard }) }
+  { name: "gradient", app: () => /* @__PURE__ */ jsx51(GradientApp, {}) },
+  { name: "ascii", app: () => /* @__PURE__ */ jsx51(AsciiApp, {}) },
+  { name: "table", app: () => /* @__PURE__ */ jsx51(TableApp, {}) },
+  { name: "spinner", app: () => /* @__PURE__ */ jsx51(SpinnerApp, {}) },
+  { name: "select-input", app: () => /* @__PURE__ */ jsx51(SelectInputApp, {}) },
+  { name: "multi-select", app: () => /* @__PURE__ */ jsx51(MultiSelectApp, {}) },
+  { name: "prompt-input", app: () => /* @__PURE__ */ jsx51(PromptInputApp, {}) },
+  { name: "text-input", app: () => /* @__PURE__ */ jsx51(TextInputApp, {}) },
+  { name: "link", app: () => /* @__PURE__ */ jsx51(LinkApp, {}) },
+  { name: "tabs", app: () => /* @__PURE__ */ jsx51(TabBarApp, {}) },
+  { name: "status-bar", app: () => /* @__PURE__ */ jsx51(StatusBarApp, {}) },
+  { name: "modal", app: () => /* @__PURE__ */ jsx51(ModalApp, {}) },
+  { name: "primitives", app: () => /* @__PURE__ */ jsx51(PrimitivesApp, {}) },
+  { name: "chat", app: () => /* @__PURE__ */ jsx51(ChatApp, {}) },
+  { name: "chain-of-thought", app: () => /* @__PURE__ */ jsx51(ChainOfThoughtApp, {}) },
+  { name: "message", app: () => /* @__PURE__ */ jsx51(MessageApp, {}) },
+  { name: "terminal-window", app: () => /* @__PURE__ */ jsx51(TerminalWindowApp, {}) },
+  { name: "focus", app: () => /* @__PURE__ */ jsx51(FocusApp, {}) },
+  { name: "pointer", app: () => /* @__PURE__ */ jsx51(PointerApp, {}) },
+  { name: "cursor-highlight", app: () => /* @__PURE__ */ jsx51(CursorHighlightApp, {}) },
+  { name: "text-style", app: () => /* @__PURE__ */ jsx51(TextStyleApp, {}) },
+  { name: "headless", app: () => /* @__PURE__ */ jsx51(HeadlessApp, {}) },
+  { name: "theming", app: () => /* @__PURE__ */ jsx51(ThemingApp, {}) },
+  { name: "landing", app: () => /* @__PURE__ */ jsx51(LandingApp, { useKeyboard: useKeyboard18 }) }
 ];
 
 // src/run.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var _renderer;
 function DemoShell({ children }) {
-  useKeyboard2((event) => {
+  useKeyboard19((event) => {
     if (event.name === "q" || event.name === "escape") {
       _renderer.destroy();
     }
   });
-  return /* @__PURE__ */ jsx29("box", { flexDirection: "column", flexGrow: 1, children });
+  return /* @__PURE__ */ jsx52("box", { flexDirection: "column", flexGrow: 1, children });
 }
-async function runDemo(name) {
-  const demo = demos.find((d) => d.name === name);
+async function runDemo(name2) {
+  const demo = demos.find((d) => d.name === name2);
   if (!demo) {
-    console.error(`Unknown demo: "${name}"`);
+    console.error(`Unknown demo: "${name2}"`);
     console.error(`Available: ${demos.map((d) => d.name).join(", ")}`);
     process.exit(1);
   }
   _renderer = await createCliRenderer({ exitOnCtrlC: true });
-  createRoot(_renderer).render(/* @__PURE__ */ jsx29(DemoShell, { children: demo.app() }));
+  createRoot(_renderer).render(/* @__PURE__ */ jsx52(DemoShell, { children: demo.app() }));
+}
+var name = process.argv[2];
+if (name) {
+  runDemo(name);
 }
 export {
   demos,