@gridland/demo 0.2.51 → 0.2.53

package/dist/run.js

@@ -1,8 +1,8 @@
 // src/run.tsx
-import { createCliRenderer, createRoot, useKeyboard as useKeyboard19 } from "@gridland/bun";
+import { createCliRenderer, createRoot, useKeyboard as useKeyboard22 } from "@gridland/bun";
 
 // demos/index.tsx
-import { useKeyboard as useKeyboard18 } from "@gridland/utils";
+import { useKeyboard as useKeyboard21 } from "@gridland/utils";
 
 // demos/gradient.tsx
 import { useState as useState8 } from "react";
@@ -160,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 useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard23 = useKeyboardContext(useKeyboardProp);
   const [selected, setSelected] = useState3(0);
-  useKeyboard20?.((event) => {
+  useKeyboard23?.((event) => {
     if (event.name === "left") {
       setSelected((s) => s > 0 ? s - 1 : VARIANT_NAMES.length - 1);
     } else if (event.name === "right") {
@@ -291,7 +291,7 @@ function SelectInput({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard23 = useKeyboardContext(useKeyboardProp);
   const resolvedHighlight = highlightColor ?? theme.primary;
   const isControlled = controlledValue !== void 0;
   const controlledRef = useRef2(isControlled);
@@ -334,7 +334,7 @@ function SelectInput({
   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;
-  useKeyboard20?.((event) => {
+  useKeyboard23?.((event) => {
     if (state.submitted || disabled) return;
     if (event.name === "up" || event.name === "k") {
       const direction = -1;
@@ -498,7 +498,7 @@ function MultiSelect({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard23 = useKeyboardContext(useKeyboardProp);
   const resolvedHighlight = highlightColor ?? theme.primary;
   const resolvedCheckbox = checkboxColor ?? theme.accent;
   const isControlled = controlledSelected !== void 0;
@@ -554,7 +554,7 @@ function MultiSelect({
     }
   };
   const diamondColor = invalid ? theme.error : disabled ? theme.muted : theme.accent;
-  useKeyboard20?.((event) => {
+  useKeyboard23?.((event) => {
     if (state.submitted || disabled) return;
     const move = (direction) => {
       let next = cursorRef.current + direction;
@@ -1004,9 +1004,9 @@ function Modal({
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
-  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard23 = useKeyboardContext(useKeyboardProp);
   const resolvedBorderColor = borderColor ?? theme.muted;
-  useKeyboard20?.((event) => {
+  useKeyboard23?.((event) => {
     if (event.name === "escape" && onClose) {
       onClose();
     }
@@ -1037,7 +1037,7 @@ import {
   createContext as createContext5,
   useContext as useContext5
 } from "react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var PromptInputControllerCtx = createContext5(null);
 var useOptionalController = () => useContext5(PromptInputControllerCtx);
 var PromptInputContext = createContext5(null);
@@ -1064,10 +1064,11 @@ 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", marginLeft: -1, marginRight: -1, children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: DIVIDER_LINE }) });
+  const { dividerColor, dividerDashed, theme } = usePromptInput();
+  const color = dividerColor ?? theme.muted;
+  const char = dividerDashed ? "\u254C" : "\u2500";
+  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", marginLeft: -1, marginRight: -1, children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: !dividerColor, fg: color }), children: char.repeat(500) }) });
 }
 function PromptInputSuggestions() {
   const { suggestions, sugIdx, maxSuggestions, theme } = usePromptInput();
@@ -1082,18 +1083,25 @@ function PromptInputSuggestions() {
     ] }, sug.text);
   }) });
 }
-var CURSOR_CHAR = "\u258D";
 function PromptInputTextarea() {
-  const { value, disabled, statusHintText, placeholder, prompt, promptColor, theme } = usePromptInput();
-  return /* @__PURE__ */ jsxs10("text", { children: [
-    /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: promptColor }), children: prompt }),
-    value.length === 0 ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
-      !disabled && /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.muted }), children: CURSOR_CHAR }),
-      /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: disabled ? statusHintText : " " + placeholder })
-    ] }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
-      /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.foreground }), children: value }),
-      !disabled && /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: theme.muted }), children: CURSOR_CHAR })
-    ] })
+  const { value, isFocused, disabled, statusHintText, placeholder, prompt, promptColor, theme, handleInput, handleInputSubmit, handleInputKeyDown } = usePromptInput();
+  return /* @__PURE__ */ jsxs10("box", { flexDirection: "row", children: [
+    /* @__PURE__ */ jsx16("text", { children: /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: promptColor }), children: prompt }) }),
+    isFocused ? /* @__PURE__ */ jsx16(
+      "input",
+      {
+        value,
+        placeholder,
+        focused: true,
+        onInput: handleInput,
+        onSubmit: handleInputSubmit,
+        onKeyDown: handleInputKeyDown,
+        cursorColor: theme.muted,
+        cursorStyle: { style: "line", blinking: !value },
+        placeholderColor: theme.placeholder,
+        textColor: theme.foreground
+      }
+    ) : disabled && value.length === 0 ? /* @__PURE__ */ jsx16("text", { children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: statusHintText }) }) : /* @__PURE__ */ jsx16("text", { children: /* @__PURE__ */ jsx16("span", { style: textStyle({ fg: value ? theme.foreground : theme.placeholder, dim: !value }), children: value || placeholder }) })
   ] });
 }
 function PromptInputSubmit(props) {
@@ -1140,13 +1148,16 @@ function PromptInput({
   maxSuggestions = 5,
   enableHistory = true,
   model,
+  focus = true,
   showDividers = true,
   autoFocus = false,
+  dividerColor,
+  dividerDashed,
   useKeyboard: useKeyboardProp,
   children
 }) {
   const theme = useTheme();
-  const useKeyboard20 = useKeyboardContext(useKeyboardProp);
+  const useKeyboard23 = useKeyboardContext(useKeyboardProp);
   useEffect2(() => {
     if (!autoFocus) return;
     if (typeof document === "undefined") return;
@@ -1157,6 +1168,7 @@ function PromptInput({
   }, [autoFocus]);
   const resolvedPromptColor = promptColor ?? theme.muted;
   const disabled = status ? status === "submitted" || status === "streaming" : disabledProp;
+  const isFocused = focus && !disabled;
   const statusHintText = resolveStatusHintText(status, submittedText, streamingLabel, errorText, disabledText);
   const controller = useOptionalController();
   const usingProvider = !!controller;
@@ -1247,18 +1259,86 @@ function PromptInput({
       clearInput();
     }
   }, [onSubmit, clearInput]);
-  useKeyboard20?.((event) => {
+  const handleInputSubmit = (text) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    if (enableHistory) {
+      setHist([trimmed, ...historyRef.current]);
+    }
+    updateValue("");
+    setHistI(-1);
+    handleSubmit(trimmed);
+  };
+  const handleInputKeyDown = (key) => {
+    if (key.name === "return" && suggestionsRef.current.length > 0) {
+      const sel = suggestionsRef.current[sugIdxRef.current];
+      if (sel) {
+        if (valueRef.current.startsWith("/")) {
+          updateValue("");
+          if (enableHistory) {
+            setHist([sel.text, ...historyRef.current]);
+          }
+          setHistI(-1);
+          handleSubmit(sel.text);
+        } else {
+          const base = valueRef.current.slice(0, valueRef.current.lastIndexOf("@"));
+          updateValue(base + sel.text + " ");
+          setSug([]);
+        }
+      }
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "tab" && suggestionsRef.current.length > 0) {
+      setSugI((sugIdxRef.current + 1) % suggestionsRef.current.length);
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "up") {
+      if (suggestionsRef.current.length > 0) {
+        setSugI(Math.max(0, sugIdxRef.current - 1));
+      } else if (enableHistory && historyRef.current.length > 0) {
+        const idx = Math.min(historyRef.current.length - 1, histIdxRef.current + 1);
+        setHistI(idx);
+        updateValue(historyRef.current[idx]);
+      }
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "down") {
+      if (suggestionsRef.current.length > 0) {
+        setSugI(Math.min(suggestionsRef.current.length - 1, sugIdxRef.current + 1));
+      } else if (enableHistory && histIdxRef.current > 0) {
+        const nextIdx = histIdxRef.current - 1;
+        setHistI(nextIdx);
+        updateValue(historyRef.current[nextIdx]);
+      } else if (enableHistory && histIdxRef.current === 0) {
+        setHistI(-1);
+        updateValue("");
+      }
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "escape") {
+      if (suggestionsRef.current.length > 0) {
+        setSug([]);
+        key.preventDefault();
+      }
+      return;
+    }
+  };
+  useKeyboard23?.((event) => {
     if (event.name === "escape" && (status === "streaming" || status === "submitted") && onStop) {
       onStop();
       return;
     }
+    if (isFocused) return;
     if (disabled) return;
     if (event.name === "return") {
       if (suggestionsRef.current.length > 0) {
         const sel = suggestionsRef.current[sugIdxRef.current];
         if (sel) {
           if (valueRef.current.startsWith("/")) {
-            setSug([]);
             updateValue("");
             if (enableHistory) {
               setHist([sel.text, ...historyRef.current]);
@@ -1279,7 +1359,6 @@ function PromptInput({
         }
         updateValue("");
         setHistI(-1);
-        setSug([]);
         handleSubmit(trimmed);
       }
       return;
@@ -1333,6 +1412,7 @@ function PromptInput({
   const visibleSuggestions = suggestions.slice(0, maxSuggestions);
   const ctxValue = {
     value,
+    isFocused,
     disabled,
     status,
     onStop,
@@ -1345,7 +1425,12 @@ function PromptInput({
     maxSuggestions,
     errorText,
     model,
-    theme
+    dividerColor,
+    dividerDashed,
+    theme,
+    handleInput: updateValue,
+    handleInputSubmit,
+    handleInputKeyDown
   };
   if (children) {
     return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", flexShrink: 0, children }) });
@@ -1438,6 +1523,7 @@ function ChatPanel({
   userColor,
   assistantColor,
   loadingText = "Thinking...",
+  focus,
   useKeyboard: useKeyboardProp
 }) {
   const theme = useTheme();
@@ -1483,6 +1569,7 @@ function ChatPanel({
         promptColor: resolvedPromptColor,
         foregroundColor: theme.foreground,
         submittedText: loadingText,
+        focus,
         useKeyboard: useKeyboardProp
       }
     ) })
@@ -1491,7 +1578,7 @@ function ChatPanel({
 
 // ../ui/components/chain-of-thought/chain-of-thought.tsx
 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";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
 var SPINNER_INTERVAL = 150;
 var ChainOfThoughtContext = createContext6(null);
@@ -1550,7 +1637,7 @@ var ChainOfThoughtHeader = memo(({
 var ChainOfThoughtContent = memo(({ children }) => {
   const { isOpen } = useChainOfThought();
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx18(Fragment6, { children });
+  return /* @__PURE__ */ jsx18(Fragment5, { children });
 });
 var ChainOfThoughtStep = memo(({
   label,
@@ -1765,6 +1852,7 @@ function useBreakpoints() {
 // 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";
 figlet.parseFont("ANSI Shadow", ansiShadow);
 var art = figlet.textSync("gridland", { font: "ANSI Shadow" });
 var lines = art.split("\n").filter((l) => l.trimEnd().length > 0);
@@ -1777,13 +1865,16 @@ function GradientApp() {
     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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1 }, /* @__PURE__ */ React.createElement(Gradient, { name: name2 }, lines.join("\n"))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
-    StatusBar,
-    {
-      items: [{ key: "\u2190\u2192", label: "gradient" }],
-      extra: /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.accent, bold: true }) }, name2.padEnd(11))
-    }
-  )));
+  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) })
+      }
+    ) })
+  ] });
 }
 
 // demos/ascii.tsx
@@ -1798,6 +1889,7 @@ 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";
 var fonts = [
   { name: "ANSI Shadow", data: ansiShadow2 },
   { name: "Standard", data: standard },
@@ -1824,34 +1916,40 @@ function AsciiApp() {
     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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { padding: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1 }, lines2.map((line, i) => /* @__PURE__ */ React.createElement("text", { key: i, fg: theme.accent, bold: true }, line))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
-    StatusBar,
-    {
-      items: [{ key: "\u2190\u2192", label: "change font" }],
-      extra: /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.accent, bold: true }) }, font.name.padEnd(11))
-    }
-  )));
+  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) })
+      }
+    ) })
+  ] });
 }
 
 // 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__ */ React.createElement("box", { padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement(Table, { data: data2, headerColor: "cyan", borderColor: "#5e81ac" }));
+  return /* @__PURE__ */ jsx23("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsx23(Table, { data: data2, headerColor: "cyan", borderColor: "#5e81ac" }) });
 }
 
 // demos/spinner.tsx
 import { useKeyboard as useKeyboard3 } from "@gridland/utils";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function SpinnerApp() {
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { flexGrow: 1 }, /* @__PURE__ */ React.createElement(SpinnerPicker, { useKeyboard: useKeyboard3 })), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [{ key: "\u2190\u2192", label: "change variant" }] })));
+  return /* @__PURE__ */ jsx24("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx24(SpinnerPicker, { useKeyboard: useKeyboard3 }) });
 }
 
 // demos/select-input.tsx
 import { useState as useState10 } from "react";
 import { useKeyboard as useKeyboard4 } from "@gridland/utils";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var items = [
   { label: "TypeScript", value: "ts" },
   { label: "JavaScript", value: "js" },
@@ -1867,24 +1965,28 @@ function SelectInputApp() {
       setResetKey((k) => k + 1);
     }
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement(
-    SelectInput,
-    {
-      key: resetKey,
-      items,
-      title: "Choose a language",
-      useKeyboard: useKeyboard4,
-      onSubmit: () => setSubmitted(true)
-    }
-  )), /* @__PURE__ */ React.createElement(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
-    { key: "\u2191\u2193", label: "select" },
-    { key: "enter", label: "submit" }
-  ] }));
+  return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx25("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx25(
+      SelectInput,
+      {
+        items,
+        title: "Choose a language",
+        useKeyboard: useKeyboard4,
+        onSubmit: () => setSubmitted(true)
+      },
+      resetKey
+    ) }),
+    /* @__PURE__ */ jsx25(StatusBar, { items: submitted ? [{ key: "r", label: "reset demo" }] : [
+      { key: "\u2191\u2193", label: "select" },
+      { key: "enter", label: "submit" }
+    ] })
+  ] });
 }
 
 // demos/multi-select.tsx
 import { useState as useState11 } from "react";
 import { useKeyboard as useKeyboard5 } from "@gridland/utils";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var items2 = [
   { label: "TypeScript", value: "ts" },
   { label: "JavaScript", value: "js" },
@@ -1900,26 +2002,30 @@ function MultiSelectApp() {
       setResetKey((k) => k + 1);
     }
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement(
-    MultiSelect,
-    {
-      key: resetKey,
-      items: items2,
-      title: "Select languages",
-      useKeyboard: useKeyboard5,
-      onSubmit: () => setSubmitted(true)
-    }
-  )), /* @__PURE__ */ React.createElement(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" }
-  ] }));
+  return /* @__PURE__ */ jsxs18("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" }
+    ] })
+  ] });
 }
 
 // demos/prompt-input.tsx
 import { useState as useState12 } from "react";
 import { useKeyboard as useKeyboard6 } from "@gridland/utils";
+import { jsx as jsx27, jsxs as jsxs19 } 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 = [
@@ -1942,7 +2048,7 @@ function PromptInputApp() {
     setLastMessage(msg.text);
   };
   if (showModelPicker) {
-    return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement(Modal, { title: "Select Model", useKeyboard: useKeyboard6, onClose: () => setShowModelPicker(false) }, /* @__PURE__ */ React.createElement("box", { paddingX: 1 }, /* @__PURE__ */ React.createElement(
+    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,
       {
         items: models,
@@ -1953,29 +2059,39 @@ function PromptInputApp() {
           setShowModelPicker(false);
         }
       }
-    ))));
+    ) }) }) });
   }
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, lastMessage ? /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.muted }) }, "Sent: "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground }) }, lastMessage)) : /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", null, " "))), /* @__PURE__ */ React.createElement(
-    PromptInput,
-    {
-      key: resetKey,
-      commands,
-      files,
-      placeholder: "Message Claude...",
-      showDividers: true,
-      useKeyboard: useKeyboard6,
-      onSubmit: handleSubmit
-    }
-  ), /* @__PURE__ */ React.createElement("box", null, /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true }) }, "model: " + model))), /* @__PURE__ */ React.createElement("box", { paddingTop: 1, paddingLeft: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [
-    { key: "\u23CE enter", label: "send" },
-    { key: "/model", label: "change model" },
-    { key: "\u2191", label: "history" }
-  ] })));
+  return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx27("box", { flexDirection: "column", flexGrow: 1, children: lastMessage ? /* @__PURE__ */ jsxs19("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,
+        autoFocus: true,
+        useKeyboard: useKeyboard6,
+        onSubmit: handleSubmit
+      },
+      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" }
+    ] }) })
+  ] });
 }
 
 // demos/text-input.tsx
 import { useState as useState13 } from "react";
 import { useKeyboard as useKeyboard7 } from "@gridland/utils";
+import { jsx as jsx28, jsxs as jsxs20 } 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" },
@@ -1989,26 +2105,30 @@ function TextInputApp() {
     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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1 }, FIELDS.map((field, i) => /* @__PURE__ */ React.createElement("box", { key: field.label, marginBottom: 1 }, /* @__PURE__ */ React.createElement(
-    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
-    }
-  )))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [{ key: "\u2191\u2193", label: "field" }] })));
+  return /* @__PURE__ */ jsxs20("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 jsxs21 } from "react/jsx-runtime";
 var MODES = ["solid", "dashed", "dotted", "none"];
 function LinkApp() {
   const theme = useTheme();
@@ -2018,18 +2138,28 @@ function LinkApp() {
     if (event.name === "right") setModeIndex((i) => (i + 1) % MODES.length);
     if (event.name === "left") setModeIndex((i) => (i - 1 + MODES.length) % MODES.length);
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: theme.foreground }) }, "Made by ", /* @__PURE__ */ React.createElement("a", { href: "https://cjroth.com", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent } }, "Chris Roth"), " and ", /* @__PURE__ */ React.createElement("a", { href: "https://jessicacheng.studio", style: { attributes: mode === "solid" ? 8 : mode === "dashed" ? 24 : mode === "dotted" ? 72 : 0, fg: theme.accent } }, "Jessica Cheng"), ".")), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
-    StatusBar,
-    {
-      extra: /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true, fg: theme.foreground }) }, mode.padEnd(6)),
-      items: [{ key: "\u2190\u2192", label: "underline style" }]
-    }
-  )));
+  return /* @__PURE__ */ jsxs21("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx29("box", { padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs21("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" }]
+      }
+    ) })
+  ] });
 }
 
 // demos/tabs.tsx
 import { useState as useState15 } from "react";
 import { useKeyboard as useKeyboard9 } from "@gridland/utils";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var tabs = ["Files", "Search", "Git", "Debug"];
 function TabBarApp() {
   const [selectedIndex, setSelectedIndex] = useState15(0);
@@ -2037,12 +2167,17 @@ function TabBarApp() {
     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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { padding: 1 }, /* @__PURE__ */ React.createElement(TabBar, { options: tabs, selectedIndex })), /* @__PURE__ */ React.createElement("box", { flexGrow: 1 }), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [{ key: "\u2190\u2192", label: "switch tab" }] })));
+  return /* @__PURE__ */ jsxs22("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" }] }) })
+  ] });
 }
 
 // demos/status-bar.tsx
 import { useState as useState16 } from "react";
 import { useKeyboard as useKeyboard10 } from "@gridland/utils";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var shortcuts = [
   { key: "Tab", label: "switch focus" },
   { key: "\u2190\u2192", label: "cycle" },
@@ -2059,18 +2194,25 @@ function StatusBarApp() {
     else if (event.name === "b") setLastKey("back (b)");
     else if (event.name === "z") setLastKey("reset (z)");
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", gap: 1, padding: 1 }, lastKey ? /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", null, "Pressed: "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true, fg: theme.accent }) }, lastKey)) : /* @__PURE__ */ React.createElement("text", { style: textStyle({ dim: true }) }, "Press a key to trigger an action"), /* @__PURE__ */ React.createElement(
-    StatusBar,
-    {
-      items: shortcuts,
-      extra: /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.success }) }, "\u25CF Ready")
-    }
-  ));
+  return /* @__PURE__ */ jsxs23("box", { flexDirection: "column", gap: 1, padding: 1, children: [
+    lastKey ? /* @__PURE__ */ jsxs23("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: shortcuts,
+        extra: /* @__PURE__ */ jsx31("span", { style: textStyle({ fg: theme.success }), children: "\u25CF Ready" })
+      }
+    )
+  ] });
 }
 
 // demos/modal.tsx
 import { useState as useState17 } from "react";
 import { useKeyboard as useKeyboard11 } from "@gridland/utils";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 function ModalApp() {
   const theme = useTheme();
   const [isOpen, setIsOpen] = useState17(false);
@@ -2079,30 +2221,50 @@ function ModalApp() {
     if (isOpen && (event.name === "q" || event.name === "escape")) setIsOpen(false);
   });
   if (isOpen) {
-    return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement(Modal, { title: "Example Modal", useKeyboard: useKeyboard11, onClose: () => setIsOpen(false) }, /* @__PURE__ */ React.createElement("box", { paddingX: 1, flexDirection: "column" }, /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: theme.foreground }) }, "This is a modal overlay component."), /* @__PURE__ */ React.createElement("text", null, " "), /* @__PURE__ */ React.createElement("text", { style: textStyle({ dim: true, fg: theme.muted }) }, "It stretches to fill the full terminal height."))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [{ key: "q", label: "close" }] })));
+    return /* @__PURE__ */ jsxs24("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx32(Modal, { title: "Example Modal", useKeyboard: useKeyboard11, onClose: () => setIsOpen(false), children: /* @__PURE__ */ jsxs24("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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true, fg: theme.muted }) }, "Press "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true, fg: theme.background, bg: theme.muted }) }, " m "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true, fg: theme.muted }) }, " to open modal")));
+  return /* @__PURE__ */ jsx32("box", { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs24("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 jsxs25 } from "react/jsx-runtime";
 function PrimitivesApp() {
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(
-    "box",
-    {
-      border: true,
-      borderStyle: "rounded",
-      borderColor: "#75715e",
-      title: "Layout",
-      titleAlignment: "center",
-      padding: 1
-    },
-    /* @__PURE__ */ React.createElement("box", { flexDirection: "row", gap: 2 }, /* @__PURE__ */ React.createElement("box", { border: true, borderStyle: "single", borderColor: "#a6e22e", padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement("text", { fg: "#a6e22e", bold: true }, "Box 1")), /* @__PURE__ */ React.createElement("box", { border: true, borderStyle: "single", borderColor: "#f92672", padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement("text", { fg: "#f92672", bold: true }, "Box 2")), /* @__PURE__ */ React.createElement("box", { border: true, borderStyle: "single", borderColor: "#66d9ef", padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement("text", { fg: "#66d9ef", bold: true }, "Box 3")))
-  ), /* @__PURE__ */ React.createElement("text", { dim: true, fg: "#75715e" }, "  Nested boxes with borders, colors & flexbox layout"));
+  return /* @__PURE__ */ jsxs25("box", { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsx33(
+      "box",
+      {
+        border: true,
+        borderStyle: "rounded",
+        borderColor: "#75715e",
+        title: "Layout",
+        titleAlignment: "center",
+        padding: 1,
+        children: /* @__PURE__ */ jsxs25("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" })
+  ] });
 }
 
 // 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:" },
@@ -2153,7 +2315,7 @@ function ChatApp() {
     setStreamingText("");
     setActiveToolCalls([]);
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx34(
     ChatPanel,
     {
       messages,
@@ -2171,6 +2333,7 @@ function ChatApp() {
 // 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 jsxs26 } 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 },
@@ -2220,25 +2383,32 @@ function ChainOfThoughtApp() {
   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__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement(ChainOfThought, { open: expanded, onOpenChange: setExpanded }, /* @__PURE__ */ React.createElement(ChainOfThoughtHeader, { duration: durationStr }), /* @__PURE__ */ React.createElement(ChainOfThoughtContent, null, steps.map((step, i) => /* @__PURE__ */ React.createElement(
-    ChainOfThoughtStep,
-    {
-      key: i,
-      label: step.label,
-      description: step.description,
-      status: step.status,
-      isLast: i === steps.length - 1
-    },
-    step.output
-  ))))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [
-    { key: "ctrl+shift+e", label: "toggle" },
-    { key: "r", label: "restart" }
-  ] })));
+  return /* @__PURE__ */ jsxs26("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx35("box", { flexDirection: "column", padding: 1, flexGrow: 1, children: /* @__PURE__ */ jsxs26(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" }
+    ] }) })
+  ] });
 }
 
 // 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 jsxs27 } 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");
@@ -2284,37 +2454,54 @@ function MessageApp() {
   const isStreaming = phase === "streaming";
   const isDone = phase === "done";
   const showAssistant = phase !== "idle";
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement(Message, { role: "user" }, /* @__PURE__ */ React.createElement(Message.Content, null, /* @__PURE__ */ React.createElement(Message.Text, null, "Can you refactor the auth module?"))), showAssistant && /* @__PURE__ */ React.createElement(Message, { role: "assistant", isStreaming }, /* @__PURE__ */ React.createElement(Message.Content, null, /* @__PURE__ */ React.createElement(Message.Text, { isLast: true }, isDone ? RESPONSE : streamedText)))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [{ key: "r", label: "restart" }] })));
+  return /* @__PURE__ */ jsxs27("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs27("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" }] }) })
+  ] });
 }
 
 // demos/terminal-window.tsx
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function TerminalWindowApp() {
   const theme = useTheme();
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: theme.secondary }) }, '$ echo "Hello from TerminalWindow"'), /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: theme.foreground }) }, "Hello from TerminalWindow"), /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: theme.secondary }) }, "$ _"));
+  return /* @__PURE__ */ jsxs28("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: "$ _" })
+  ] });
 }
 
 // demos/focus.tsx
-import { useState as useState21, useRef as useRef8 } from "react";
-import { useKeyboard as useKeyboard15 } from "@gridland/utils";
-var focusPanels = [
+import { useRef as useRef8, useCallback as useCallback4 } from "react";
+import { useKeyboard as useKeyboard15, useFocus, FocusProvider, useShortcuts, useFocusedShortcuts } from "@gridland/utils";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+var focusMultiSelects = [
   {
-    label: "Language",
+    id: "language",
+    title: "Language",
     items: [
       { label: "TypeScript", value: "ts" },
       { label: "JavaScript", value: "js" },
-      { label: "Python", value: "py" }
+      { label: "Python", value: "py" },
+      { label: "Rust", value: "rs" }
     ]
   },
   {
-    label: "Framework",
+    id: "framework",
+    title: "Framework",
     items: [
       { label: "React", value: "react" },
       { label: "Vue", value: "vue" },
-      { label: "Svelte", value: "svelte" }
+      { label: "Svelte", value: "svelte" },
+      { label: "Solid", value: "solid" }
     ]
   },
   {
-    label: "Runtime",
+    id: "runtime",
+    title: "Runtime",
     items: [
       { label: "Bun", value: "bun" },
       { label: "Node", value: "node" },
@@ -2322,101 +2509,168 @@ var focusPanels = [
     ]
   }
 ];
-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;
+function FocusMultiSelectPanel({ id, title, items: items3, autoFocus }) {
+  const { isFocused, isSelected, isAnySelected, focusId, focusRef } = useFocus({ id, autoFocus });
+  const multiSelectHandlerRef = useRef8(null);
+  const captureKeyboard = useCallback4((handler) => {
+    multiSelectHandlerRef.current = handler;
+  }, []);
   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);
-      }
+    multiSelectHandlerRef.current?.(event);
+  }, { focusId, selectedOnly: true });
+  useShortcuts(
+    isSelected ? [{ key: "\u2191\u2193", label: "move" }, { key: "enter", label: "toggle" }, { key: "esc", label: "back" }] : [{ key: "\u2190\u2192", label: "navigate" }, { key: "tab", label: "cycle" }, { key: "enter", label: "select" }],
+    focusId
+  );
+  const borderStyle = isSelected ? "rounded" : isFocused ? "dashed" : "rounded";
+  const borderColor = isSelected ? "#818cf8" : isAnySelected ? "transparent" : isFocused ? "#6366f1" : "#3b3466";
+  return /* @__PURE__ */ jsx38("box", { ref: focusRef, border: true, borderStyle, borderColor, flexGrow: 1, children: /* @__PURE__ */ jsx38("box", { flexDirection: "column", paddingX: 1, children: /* @__PURE__ */ jsx38(
+    MultiSelect,
+    {
+      items: items3,
+      title,
+      allowEmpty: true,
+      enableSelectAll: false,
+      enableClear: false,
+      highlightColor: isSelected ? "#a5b4fc" : "#6366f1",
+      checkboxColor: "#818cf8",
+      useKeyboard: captureKeyboard
     }
-    event.preventDefault();
-  });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "row", gap: 1, padding: 1, flexGrow: 1 }, focusPanels.map((panel, i) => {
-    const focused = i === panelIndex;
-    const active = focused && entered;
-    const selected = selections[i];
-    return /* @__PURE__ */ React.createElement(
-      "box",
+  ) }) });
+}
+function FocusNavStatusBar() {
+  const shortcuts2 = useFocusedShortcuts();
+  return /* @__PURE__ */ jsx38("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx38(StatusBar, { items: shortcuts2 }) });
+}
+function FocusApp() {
+  return /* @__PURE__ */ jsx38(FocusProvider, { selectable: true, children: /* @__PURE__ */ jsxs29("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx38("box", { flexDirection: "row", gap: 1, padding: 1, flexGrow: 1, children: focusMultiSelects.map((panel, i) => /* @__PURE__ */ jsx38(
+      FocusMultiSelectPanel,
       {
-        key: panel.label,
-        border: true,
-        borderStyle: "rounded",
-        borderColor: active ? "#22c55e" : focused ? "#3b82f6" : "#555",
-        flexGrow: 1
+        id: panel.id,
+        title: panel.title,
+        items: panel.items,
+        autoFocus: i === 0
       },
-      /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement("text", { style: {
-        fg: active ? "#22c55e" : focused ? "#3b82f6" : "#888",
-        bold: focused
-      } }, focused ? "\u25B8 " : "  ", panel.label, selected ? `: ${selected}` : ""), (active || !entered && focused) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("box", { height: 1 }), /* @__PURE__ */ React.createElement("box", { flexDirection: "column" }, panel.items.map((item, j) => {
-        const highlighted = active && j === cursors[i];
-        return /* @__PURE__ */ React.createElement("text", { key: item.value, style: {
-          fg: highlighted ? "#22c55e" : active ? "#ccc" : "#666",
-          bold: highlighted
-        } }, highlighted ? " \u25B8 " : "   ", item.label);
-      }))))
-    );
-  })), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
-    StatusBar,
+      panel.id
+    )) }),
+    /* @__PURE__ */ jsx38(FocusNavStatusBar, {})
+  ] }) });
+}
+
+// demos/focus-grid.tsx
+import { useFocus as useFocus2, FocusProvider as FocusProvider2, useShortcuts as useShortcuts2, useFocusedShortcuts as useFocusedShortcuts2 } from "@gridland/utils";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+var gridItems = [
+  { id: "cell-1" },
+  { id: "cell-2" },
+  { id: "cell-3" },
+  { id: "cell-4" },
+  { id: "cell-5" },
+  { id: "cell-6" }
+];
+function GridCell({ id, autoFocus }) {
+  const { isFocused, isSelected, isAnySelected, focusId, focusRef } = useFocus2({ id, autoFocus });
+  useShortcuts2(
+    isSelected ? [{ key: "esc", label: "back" }] : [{ key: "\u2191\u2193\u2190\u2192", label: "navigate" }, { key: "enter", label: "select" }, { key: "tab", label: "cycle" }],
+    focusId
+  );
+  const borderStyle = isSelected ? "rounded" : isFocused ? "dashed" : "rounded";
+  const borderColor = isSelected ? "#818cf8" : isAnySelected ? "transparent" : isFocused ? "#6366f1" : "#3b3466";
+  const fg = isSelected ? "#a5b4fc" : isFocused ? "#a5b4fc" : "#888";
+  return /* @__PURE__ */ jsx39("box", { ref: focusRef, border: true, borderStyle, borderColor, width: 16, height: 5, children: /* @__PURE__ */ jsx39("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: /* @__PURE__ */ jsx39("text", { style: { fg, bold: isFocused || isSelected }, children: isSelected ? "selected" : "not selected" }) }) });
+}
+function FocusGridStatusBar() {
+  const shortcuts2 = useFocusedShortcuts2();
+  return /* @__PURE__ */ jsx39("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx39(StatusBar, { items: shortcuts2 }) });
+}
+function FocusGridApp() {
+  return /* @__PURE__ */ jsx39(FocusProvider2, { selectable: true, children: /* @__PURE__ */ jsxs30("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs30("box", { flexDirection: "column", gap: 1, padding: 1, flexGrow: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsx39("box", { flexDirection: "row", gap: 1, children: gridItems.slice(0, 3).map((item, i) => /* @__PURE__ */ jsx39(GridCell, { ...item, autoFocus: i === 0 }, item.id)) }),
+      /* @__PURE__ */ jsx39("box", { flexDirection: "row", gap: 1, children: gridItems.slice(3, 6).map((item) => /* @__PURE__ */ jsx39(GridCell, { ...item }, item.id)) })
+    ] }),
+    /* @__PURE__ */ jsx39(FocusGridStatusBar, {})
+  ] }) });
+}
+
+// demos/focus-chat.tsx
+import { useState as useState22, useRef as useRef9, useCallback as useCallback5 } from "react";
+import { useKeyboard as useKeyboard16, useFocus as useFocus3, FocusProvider as FocusProvider3, useShortcuts as useShortcuts3, useFocusedShortcuts as useFocusedShortcuts3 } from "@gridland/utils";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+function CotSection() {
+  const { isFocused, isSelected, isAnySelected, focusId, focusRef } = useFocus3({ id: "cot", autoFocus: true });
+  const [cotOpen, setCotOpen] = useState22(false);
+  useKeyboard16((event) => {
+    if (event.name === "return") {
+      setCotOpen((v) => !v);
+      event.preventDefault();
+    }
+  }, { focusId, selectedOnly: true });
+  useShortcuts3(
+    isSelected ? [{ key: "enter", label: "expand/collapse" }, { key: "esc", label: "back" }] : [{ key: "\u2191\u2193", label: "navigate" }, { key: "tab", label: "cycle" }, { key: "enter", label: "select" }],
+    focusId
+  );
+  const borderStyle = isSelected ? "rounded" : isFocused ? "dashed" : "rounded";
+  const borderColor = isSelected ? "#818cf8" : isAnySelected ? "transparent" : isFocused ? "#6366f1" : "#3b3466";
+  return /* @__PURE__ */ jsx40("box", { ref: focusRef, marginTop: 1, border: true, borderStyle, borderColor, children: /* @__PURE__ */ jsxs31(ChainOfThought, { open: cotOpen, onOpenChange: setCotOpen, children: [
+    /* @__PURE__ */ jsx40(ChainOfThoughtHeader, { duration: "1.2s" }),
+    /* @__PURE__ */ jsx40(ChainOfThoughtContent, { children: /* @__PURE__ */ jsx40(ChainOfThoughtStep, { label: "Searched docs", status: "done", isLast: true }) })
+  ] }) });
+}
+function PromptSection() {
+  const { isFocused, isSelected, isAnySelected, focusId, focusRef } = useFocus3({ id: "prompt" });
+  const promptHandlerRef = useRef9(null);
+  const captureKeyboard = useCallback5((handler) => {
+    promptHandlerRef.current = handler;
+  }, []);
+  useKeyboard16((event) => {
+    promptHandlerRef.current?.(event);
+  }, { focusId, selectedOnly: true });
+  useShortcuts3(
+    isSelected ? [{ key: "\u23CE", label: "send" }, { key: "esc", label: "back" }] : [{ key: "\u2191\u2193", label: "navigate" }, { key: "tab", label: "cycle" }, { key: "enter", label: "select" }],
+    focusId
+  );
+  const dividerColor = isSelected ? "#818cf8" : isAnySelected ? void 0 : isFocused ? "#6366f1" : "#3b3466";
+  const dividerDashed = isFocused && !isSelected && !isAnySelected;
+  return /* @__PURE__ */ jsx40("box", { ref: focusRef, children: /* @__PURE__ */ jsx40(
+    PromptInput,
     {
-      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" }]
+      placeholder: "Type a message...",
+      status: "ready",
+      dividerColor,
+      dividerDashed,
+      useKeyboard: captureKeyboard
     }
-  )));
+  ) });
+}
+function FocusChatStatusBar() {
+  const shortcuts2 = useFocusedShortcuts3();
+  return /* @__PURE__ */ jsx40("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx40(StatusBar, { items: shortcuts2 }) });
+}
+function FocusChatApp() {
+  return /* @__PURE__ */ jsx40(FocusProvider3, { selectable: true, children: /* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs31("box", { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsxs31("box", { flexDirection: "column", paddingX: 1, paddingTop: 1, flexGrow: 1, children: [
+        /* @__PURE__ */ jsx40(Message, { role: "user", children: /* @__PURE__ */ jsx40(Message.Content, { children: /* @__PURE__ */ jsx40(Message.Text, { children: "How do I set up keyboard navigation?" }) }) }),
+        /* @__PURE__ */ jsx40(CotSection, {}),
+        /* @__PURE__ */ jsx40(Message, { role: "assistant", children: /* @__PURE__ */ jsx40(Message.Content, { children: /* @__PURE__ */ jsx40(Message.Text, { children: "Use the useKeyboard hook to listen for key events. Wrap your app in a FocusProvider to enable tab navigation between focusable components." }) }) })
+      ] }),
+      /* @__PURE__ */ jsx40(PromptSection, {})
+    ] }),
+    /* @__PURE__ */ jsx40(FocusChatStatusBar, {})
+  ] }) });
 }
 
 // demos/pointer.tsx
-import { useState as useState22, useRef as useRef9 } from "react";
-import { useKeyboard as useKeyboard16 } from "@gridland/utils";
+import { useState as useState23, useRef as useRef10 } from "react";
+import { useKeyboard as useKeyboard17 } from "@gridland/utils";
+import { jsx as jsx41, jsxs as jsxs32 } 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__ */ React.createElement(
+  const [hovering, setHovering] = useState23(false);
+  return /* @__PURE__ */ jsx41(
     "box",
     {
       border: true,
@@ -2425,20 +2679,20 @@ function HoverBox() {
       width: 20,
       height: 5,
       onMouseOver: () => setHovering(true),
-      onMouseOut: () => setHovering(false)
-    },
-    /* @__PURE__ */ React.createElement("box", { padding: 1 }, /* @__PURE__ */ React.createElement("text", { style: { fg: hovering ? "#22c55e" : "#888", bold: hovering } }, hovering ? "Mouse inside!" : "Hover me"))
+      onMouseOut: () => setHovering(false),
+      children: /* @__PURE__ */ jsx41("box", { padding: 1, children: /* @__PURE__ */ jsx41("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);
+  const [selected, setSelected] = useState23(null);
+  const [clickCount, setClickCount] = useState23(0);
+  const [mousePos, setMousePos] = useState23(null);
+  const selectedRef = useRef10(null);
+  const clickCountRef = useRef10(0);
   selectedRef.current = selected;
   clickCountRef.current = clickCount;
-  useKeyboard16((event) => {
+  useKeyboard17((event) => {
     const cur = selectedRef.current ?? -1;
     if (event.name === "right" || event.name === "tab") {
       const next = (cur + 1) % pointerColors.length;
@@ -2451,79 +2705,192 @@ function PointerApp() {
     }
     event.preventDefault();
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement("box", { flexDirection: "row", gap: 1 }, pointerColors.map((color, i) => /* @__PURE__ */ React.createElement(
-    "box",
-    {
-      key: color,
-      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 });
-      }
-    },
-    /* @__PURE__ */ React.createElement("text", { style: { fg: color, bold: i === selected } }, i === selected ? `\u25B8 ${pointerColorNames[i]}` : ` ${pointerColorNames[i]}`)
-  ))), /* @__PURE__ */ React.createElement("box", { height: 1 }), /* @__PURE__ */ React.createElement("box", { flexDirection: "row", gap: 2 }, /* @__PURE__ */ React.createElement(HoverBox, null), /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, paddingTop: 1 }, /* @__PURE__ */ React.createElement("text", { style: { fg: selected !== null ? pointerColors[selected] : "#888" } }, selected !== null ? `Clicked ${pointerColorNames[selected]}` : "Click a color", clickCount > 0 ? `  (${clickCount} clicks)` : ""), /* @__PURE__ */ React.createElement("text", { style: { dim: true, fg: "#888" } }, mousePos ? `mouse: ${mousePos.x}, ${mousePos.y}` : ""))), /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(StatusBar, { items: [
-    { key: "click", label: "select" },
-    { key: "\u2190\u2192", label: "keyboard nav" }
-  ] })));
+  return /* @__PURE__ */ jsxs32("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+    /* @__PURE__ */ jsx41("box", { flexDirection: "row", gap: 1, children: pointerColors.map((color, i) => /* @__PURE__ */ jsx41(
+      "box",
+      {
+        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__ */ jsx41("text", { style: { fg: color, bold: i === selected }, children: i === selected ? `\u25B8 ${pointerColorNames[i]}` : ` ${pointerColorNames[i]}` })
+      },
+      color
+    )) }),
+    /* @__PURE__ */ jsx41("box", { height: 1 }),
+    /* @__PURE__ */ jsxs32("box", { flexDirection: "row", gap: 2, children: [
+      /* @__PURE__ */ jsx41(HoverBox, {}),
+      /* @__PURE__ */ jsxs32("box", { flexDirection: "column", flexGrow: 1, paddingTop: 1, children: [
+        /* @__PURE__ */ jsxs32("text", { style: { fg: selected !== null ? pointerColors[selected] : "#888" }, children: [
+          selected !== null ? `Clicked ${pointerColorNames[selected]}` : "Click a color",
+          clickCount > 0 ? `  (${clickCount} clicks)` : ""
+        ] }),
+        /* @__PURE__ */ jsx41("text", { style: { dim: true, fg: "#888" }, children: mousePos ? `mouse: ${mousePos.x}, ${mousePos.y}` : "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx41("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx41(StatusBar, { items: [
+      { key: "click", label: "select" },
+      { key: "\u2190\u2192", label: "keyboard nav" }
+    ] }) })
+  ] });
 }
 
 // demos/cursor-highlight.tsx
-import { useState as useState23 } from "react";
+import { useState as useState24 } from "react";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 function CursorHighlightApp() {
-  const [pos, setPos] = useState23(null);
-  return /* @__PURE__ */ React.createElement(
+  const [pos, setPos] = useState24(null);
+  return /* @__PURE__ */ jsxs33(
     "box",
     {
       flexDirection: "column",
       flexGrow: 1,
       onMouseMove: (e) => {
         setPos({ x: e.x, y: e.y });
-      }
-    },
-    /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1, padding: 1 }, /* @__PURE__ */ React.createElement("text", { style: { bold: true, fg: "#fff" } }, "Cursor Highlight"), /* @__PURE__ */ React.createElement("text", { style: { dim: true, fg: "#888" } }, "Move your mouse over the grid"), /* @__PURE__ */ React.createElement("box", { height: 1 }), /* @__PURE__ */ React.createElement("box", { flexDirection: "column" }, Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ React.createElement("text", { key: row }, Array.from({ length: 40 }, (_2, col) => {
-      const isEven = (row + col) % 2 === 0;
-      return /* @__PURE__ */ React.createElement("span", { key: col, style: {
-        fg: isEven ? "#3b82f6" : "#8b5cf6",
-        dim: !isEven
-      } }, isEven ? "\u2591\u2591" : "\u2593\u2593");
-    }))))),
-    /* @__PURE__ */ React.createElement("box", { paddingX: 1, paddingBottom: 1 }, /* @__PURE__ */ React.createElement(
-      StatusBar,
-      {
-        items: [],
-        extra: /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }) }, " x "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true, fg: "#888" }) }, ` ${pos ? String(pos.x).padStart(3) : "  -"} `), /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }) }, " y "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true, fg: "#888" }) }, ` ${pos ? String(pos.y).padStart(3) : "  -"}`))
-      }
-    ))
+      },
+      children: [
+        /* @__PURE__ */ jsxs33("box", { flexDirection: "column", flexGrow: 1, padding: 1, children: [
+          /* @__PURE__ */ jsx42("text", { style: { bold: true, fg: "#fff" }, children: "Cursor Highlight" }),
+          /* @__PURE__ */ jsx42("text", { style: { dim: true, fg: "#888" }, children: "Move your mouse over the grid" }),
+          /* @__PURE__ */ jsx42("box", { height: 1 }),
+          /* @__PURE__ */ jsx42("box", { flexDirection: "column", children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx42("text", { children: Array.from({ length: 40 }, (_2, col) => {
+            const isEven = (row + col) % 2 === 0;
+            return /* @__PURE__ */ jsx42("span", { style: {
+              fg: isEven ? "#3b82f6" : "#8b5cf6",
+              dim: !isEven
+            }, children: isEven ? "\u2591\u2591" : "\u2593\u2593" }, col);
+          }) }, row)) })
+        ] }),
+        /* @__PURE__ */ jsx42("box", { paddingX: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx42(
+          StatusBar,
+          {
+            items: [],
+            extra: /* @__PURE__ */ jsxs33("span", { children: [
+              /* @__PURE__ */ jsx42("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " x " }),
+              /* @__PURE__ */ jsx42("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.x).padStart(3) : "  -"} ` }),
+              /* @__PURE__ */ jsx42("span", { style: textStyle({ bold: true, fg: "#1e1e2e", bg: "#888" }), children: " y " }),
+              /* @__PURE__ */ jsx42("span", { style: textStyle({ dim: true, fg: "#888" }), children: ` ${pos ? String(pos.y).padStart(3) : "  -"}` })
+            ] })
+          }
+        ) })
+      ]
+    }
   );
 }
 
 // demos/text-style.tsx
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function TextStyleApp() {
   const theme = useTheme();
   const desc = textStyle({ fg: theme.muted });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1, gap: 0 }, /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground, bold: true }) }, "bold          "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " bold: true ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground, dim: true }) }, "dim           "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " dim: true ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground, italic: true }) }, "italic        "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " italic: true ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground, underline: true }) }, "underline     "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " underline: true ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ inverse: true }) }, "inverse       "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " inverse: true ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, " "), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.primary }) }, "fg color      "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " fg: theme.primary ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.foreground, bg: theme.secondary }) }, "bg color      "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " fg: theme.foreground, bg: theme.secondary ", "}", ")")), /* @__PURE__ */ React.createElement("text", null, " "), /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.accent, bold: true, underline: true }) }, "combined      "), /* @__PURE__ */ React.createElement("span", { style: desc }, "textStyle(", "{", " fg: theme.accent, bold: true, underline: true ", "}", ")")));
+  return /* @__PURE__ */ jsxs34("box", { flexDirection: "column", padding: 1, gap: 0, children: [
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.foreground, bold: true }), children: "bold          " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " bold: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.foreground, dim: true }), children: "dim           " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " dim: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.foreground, italic: true }), children: "italic        " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " italic: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.foreground, underline: true }), children: "underline     " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " underline: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ inverse: true }), children: "inverse       " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " inverse: true ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx43("text", { children: " " }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.primary }), children: "fg color      " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.primary ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.foreground, bg: theme.secondary }), children: "bg color      " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.foreground, bg: theme.secondary ",
+        "}",
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx43("text", { children: " " }),
+    /* @__PURE__ */ jsxs34("text", { children: [
+      /* @__PURE__ */ jsx43("span", { style: textStyle({ fg: theme.accent, bold: true, underline: true }), children: "combined      " }),
+      /* @__PURE__ */ jsxs34("span", { style: desc, children: [
+        "textStyle(",
+        "{",
+        " fg: theme.accent, bold: true, underline: true ",
+        "}",
+        ")"
+      ] })
+    ] })
+  ] });
 }
 
 // demos/headless.tsx
+import { jsx as jsx44 } 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__ */ React.createElement("box", { padding: 1 }, /* @__PURE__ */ React.createElement(Table, { data }));
+  return /* @__PURE__ */ jsx44("box", { padding: 1, children: /* @__PURE__ */ jsx44(Table, { data }) });
 }
 
 // demos/theming.tsx
-import { useKeyboard as useKeyboard17 } from "@gridland/utils";
+import { useKeyboard as useKeyboard18 } from "@gridland/utils";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var tableData = [
   { name: "Alice", role: "Engineer", status: "Active" },
   { name: "Bob", role: "Designer", status: "Away" }
@@ -2534,16 +2901,21 @@ var selectItems = [
   { label: "Python", value: "py" }
 ];
 function ThemingApp() {
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1 }, /* @__PURE__ */ React.createElement(Spinner, { text: "Loading data..." }), /* @__PURE__ */ React.createElement(Table, { data: tableData }), /* @__PURE__ */ React.createElement(MultiSelect, { items: selectItems, useKeyboard: useKeyboard17 }));
+  return /* @__PURE__ */ jsxs35("box", { flexDirection: "column", padding: 1, gap: 1, flexGrow: 1, children: [
+    /* @__PURE__ */ jsx45(Spinner, { text: "Loading data..." }),
+    /* @__PURE__ */ jsx45(Table, { data: tableData }),
+    /* @__PURE__ */ jsx45(MultiSelect, { items: selectItems, useKeyboard: useKeyboard18 })
+  ] });
 }
 
 // src/landing/landing-app.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8, useRef as useRef15, useState as useState29 } from "react";
 
 // src/landing/install-box.tsx
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 function InstallBox() {
   const theme = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx46(
     "box",
     {
       border: true,
@@ -2551,17 +2923,24 @@ function InstallBox() {
       borderColor: theme.border,
       paddingX: 1,
       flexDirection: "column",
-      flexShrink: 0
-    },
-    /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true }) }, "$ "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true }) }, "bun create "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.accent }) }, "gridland"))
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs36("text", { children: [
+        /* @__PURE__ */ jsx46("span", { style: textStyle({ dim: true }), children: "$ " }),
+        /* @__PURE__ */ jsx46("span", { style: textStyle({ bold: true }), children: "bun create " }),
+        /* @__PURE__ */ jsx46("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
+      ] })
+    }
   );
 }
 
 // src/landing/links-box.tsx
+import { isBrowser } from "@gridland/utils";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var UNDERLINE3 = 1 << 3;
 function LinksBox() {
   const theme = useTheme();
-  return /* @__PURE__ */ React.createElement(
+  const docsHref = isBrowser() ? `${window.location.origin}/docs` : "https://gridland.io/docs";
+  return /* @__PURE__ */ jsx47(
     "box",
     {
       border: true,
@@ -2569,30 +2948,37 @@ function LinksBox() {
       borderColor: theme.border,
       paddingX: 1,
       flexDirection: "column",
-      flexShrink: 0
-    },
-    /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", null, "\u{1F431}"), /* @__PURE__ */ React.createElement("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent } }, " GitHub"), /* @__PURE__ */ React.createElement("span", null, "  "), /* @__PURE__ */ React.createElement("span", null, "\u{1F4D6}"), /* @__PURE__ */ React.createElement("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent } }, " Docs"))
+      flexShrink: 0,
+      children: /* @__PURE__ */ jsxs37("text", { children: [
+        /* @__PURE__ */ jsx47("span", { children: "\u{1F431}" }),
+        /* @__PURE__ */ jsx47("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
+        /* @__PURE__ */ jsx47("span", { children: "  " }),
+        /* @__PURE__ */ jsx47("span", { children: "\u{1F4D6}" }),
+        /* @__PURE__ */ jsx47("a", { href: docsHref, 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 { useState as useState25, useEffect as useEffect6, useRef as useRef11, useMemo as useMemo5 } from "react";
 import figlet3 from "figlet";
-import ansiShadow3 from "figlet/importable-fonts/ANSI Shadow.js";
-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;
+import blockFont from "figlet/importable-fonts/Block.js";
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+figlet3.parseFont("Block", blockFont);
+function makeArt(text, font = "Block") {
+  return figlet3.textSync(text, { font }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
+}
+var fullArt = makeArt("gridland", "Block");
+var gridArt = makeArt("grid", "Block");
+var landArt = makeArt("land", "Block");
+var ART_HEIGHT = fullArt.split("\n").length;
 function useAnimation(duration = 1e3) {
-  const isBrowser = typeof document !== "undefined";
-  const [progress, setProgress] = useState24(isBrowser ? 0 : 1);
-  const startTime = useRef10(null);
+  const isBrowser2 = typeof document !== "undefined";
+  const [progress, setProgress] = useState25(isBrowser2 ? 0 : 1);
+  const startTime = useRef11(null);
   useEffect6(() => {
-    if (!isBrowser) return;
+    if (!isBrowser2) return;
     let raf;
     const tick = (time) => {
       if (startTime.current === null) startTime.current = time;
@@ -2607,13 +2993,20 @@ function useAnimation(duration = 1e3) {
   }, []);
   return progress;
 }
+function darkenHex(hex, factor = 0.4) {
+  const r = Math.round(parseInt(hex.slice(1, 3), 16) * factor);
+  const g = Math.round(parseInt(hex.slice(3, 5), 16) * factor);
+  const b = Math.round(parseInt(hex.slice(5, 7), 16) * factor);
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
 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__ */ React.createElement("text", null, children);
+  if (maxLength === 0) return /* @__PURE__ */ jsx48("text", { children });
   const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
-  return /* @__PURE__ */ React.createElement("box", { position: "relative", width: maxLength, height: lines2.length, shouldFill: false }, lines2.map((line, lineIndex) => {
+  const bgColors = useMemo5(() => hexColors.map((c) => darkenHex(c)), [hexColors]);
+  return /* @__PURE__ */ jsx48("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++) {
@@ -2633,54 +3026,81 @@ function RevealGradient({ children, revealCol }) {
       }
     }
     if (current) runs.push(current);
-    return runs.map((run, runIndex) => /* @__PURE__ */ React.createElement(
+    return runs.map((run, runIndex) => /* @__PURE__ */ jsx48(
       "box",
       {
-        key: `${lineIndex}-${runIndex}`,
         position: "absolute",
         top: lineIndex,
         left: run.start,
-        shouldFill: false
+        shouldFill: false,
+        children: /* @__PURE__ */ jsx48("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx48(
+          "span",
+          {
+            style: { fg: hexColors[run.start + ci], bg: bgColors[run.start + ci] },
+            children: char
+          },
+          ci
+        )) })
       },
-      /* @__PURE__ */ React.createElement("text", { shouldFill: false }, run.chars.map((char, ci) => /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: ci,
-          style: { fg: hexColors[run.start + ci] }
-        },
-        char
-      )))
+      `${lineIndex}-${runIndex}`
     ));
-  }));
+  }) });
 }
 function Logo({ compact, narrow, mobile }) {
-  const isBrowser = typeof document !== "undefined";
+  const isBrowser2 = typeof document !== "undefined";
   const progress = useAnimation(900);
-  const artHeight = compact ? 1 : narrow ? ART_HEIGHT * 2 : ART_HEIGHT;
+  const artHeight = compact ? 1 : narrow && !mobile ? 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 maxWidth = compact ? 8 : narrow ? 35 : 69;
   const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
   const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
-  const subtitle = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("text", null, " "), /* @__PURE__ */ React.createElement("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false }, /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false }, "A framework for building terminal apps, built on ", /* @__PURE__ */ React.createElement("a", { href: "https://opentui.com", style: { attributes: 72, fg: "#d4b0e8" } }, "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__ */ React.createElement("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", shouldFill: false }, /* @__PURE__ */ React.createElement(Gradient, { name: "instagram" }, art2), /* @__PURE__ */ React.createElement("text", null, " "), /* @__PURE__ */ React.createElement("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false }, /* @__PURE__ */ React.createElement("text", { style: textStyle({ fg: "#d4b0e8" }), shouldFill: false }, "A framework for building terminal apps, built on OpenTUI + React.", "\n", "(Gridland apps, like this website, work in the browser and terminal.)")));
+  const subtitle = /* @__PURE__ */ jsxs38(Fragment6, { children: [
+    /* @__PURE__ */ jsx48("text", { children: " " }),
+    /* @__PURE__ */ jsx48("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs38("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__ */ jsx48("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 (!isBrowser2) {
+    const art2 = compact ? "gridland" : narrow && !mobile ? gridArt + "\n" + landArt : fullArt;
+    return /* @__PURE__ */ jsxs38("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", shouldFill: false, children: [
+      /* @__PURE__ */ jsx48(Gradient, { name: "instagram", children: art2 }),
+      /* @__PURE__ */ jsx48("text", { children: " " }),
+      /* @__PURE__ */ jsx48("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs38("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__ */ React.createElement("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false }, /* @__PURE__ */ React.createElement("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false }, /* @__PURE__ */ React.createElement("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false }, /* @__PURE__ */ React.createElement(RevealGradient, { revealCol }, "gridland"))), subtitle);
+    return /* @__PURE__ */ jsxs38("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx48("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx48("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx48(RevealGradient, { revealCol, children: "gridland" }) }) }),
+      subtitle
+    ] });
   }
-  if (narrow) {
-    return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false }, /* @__PURE__ */ React.createElement("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false }, /* @__PURE__ */ React.createElement("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false }, /* @__PURE__ */ React.createElement(RevealGradient, { revealCol }, gridArt), /* @__PURE__ */ React.createElement(RevealGradient, { revealCol }, landArt))), subtitle);
+  if (narrow && !mobile) {
+    return /* @__PURE__ */ jsxs38("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx48("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs38("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
+        /* @__PURE__ */ jsx48(RevealGradient, { revealCol, children: gridArt }),
+        /* @__PURE__ */ jsx48(RevealGradient, { revealCol, children: landArt })
+      ] }) }),
+      subtitle
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false }, /* @__PURE__ */ React.createElement("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false }, /* @__PURE__ */ React.createElement("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false }, /* @__PURE__ */ React.createElement(RevealGradient, { revealCol }, fullArt))), subtitle);
+  return /* @__PURE__ */ jsxs38("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+    /* @__PURE__ */ jsx48("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx48("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx48(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";
+import { useState as useState26, useEffect as useEffect7, useLayoutEffect, useRef as useRef12 } from "react";
 var CHARS = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*(){}[]|;:<>,.?/~`";
 function randomChar() {
   return CHARS[Math.floor(Math.random() * CHARS.length)];
@@ -2694,7 +3114,11 @@ function createDrop(height, seeded = false) {
     chars: Array.from({ length }, randomChar)
   };
 }
-function buildGrid(columns, width, height) {
+var PULL_RADIUS = 18;
+var PULL_STRENGTH = 7;
+var RIPPLE_DURATION_MS = 3200;
+var RIPPLE_SPEED = 8e-3;
+function buildGrid(columns, width, height, mousePos, ripples, now = Date.now()) {
   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++) {
@@ -2703,30 +3127,67 @@ function buildGrid(columns, width, height) {
     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);
+      let renderX = x;
+      if (mousePos) {
+        const dx = mousePos.x - x;
+        const dy = mousePos.y - row;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < PULL_RADIUS && dist > 0.5) {
+          const t = 1 - dist / PULL_RADIUS;
+          const strength = t * t * PULL_STRENGTH;
+          renderX = Math.round(x + dx / dist * strength);
+          renderX = Math.max(0, Math.min(width - 1, renderX));
+        }
+      }
+      const b = i === 0 ? 1 : Math.max(0.15, 1 - i / drop.length);
+      if (brightness[row][renderX] < b) {
+        grid[row][renderX] = drop.chars[i];
+        brightness[row][renderX] = b;
+      }
+    }
+  }
+  for (const ripple of ripples) {
+    const elapsed = now - ripple.createdAt;
+    if (elapsed > RIPPLE_DURATION_MS || elapsed < 0) continue;
+    const radius = elapsed * RIPPLE_SPEED;
+    const fade = 1 - elapsed / RIPPLE_DURATION_MS;
+    const maxR = Math.ceil(radius) + 2;
+    const rx = Math.round(ripple.x);
+    const ry = Math.round(ripple.y);
+    for (let dy = -maxR; dy <= maxR; dy++) {
+      for (let dx = -maxR; dx <= maxR; dx++) {
+        const cy = ry + dy;
+        const cx = rx + dx;
+        if (cy < 0 || cy >= height || cx < 0 || cx >= width) continue;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const ringDist = Math.abs(dist - radius);
+        if (ringDist < 2) {
+          const boost = (1 - ringDist / 2) * fade * 0.7;
+          brightness[cy][cx] = Math.min(1, brightness[cy][cx] + boost);
+          if (grid[cy][cx] === " " && boost > 0.2) {
+            grid[cy][cx] = randomChar();
+          }
+        }
       }
     }
   }
   return { grid, brightness };
 }
-function useMatrix(width, height) {
-  const columnsRef = useRef11([]);
-  const [state, setState] = useState25(() => {
+function useMatrix(width, height, mousePosRef, ripplesRef) {
+  const columnsRef = useRef12([]);
+  const [state, setState] = useState26(() => {
     const columns = Array.from(
       { length: width },
       () => Math.random() < 0.5 ? createDrop(height, true) : null
     );
     columnsRef.current = columns;
-    return buildGrid(columns, width, height);
+    return buildGrid(columns, width, height, null, []);
   });
   useEffect7(() => {
     if (width < 2 || height < 2) return;
     const id = setInterval(() => {
       const columns = columnsRef.current;
+      const now = Date.now();
       for (let x = 0; x < width; x++) {
         if (columns[x] === null || columns[x] === void 0) {
           if (Math.random() < 0.03) {
@@ -2744,21 +3205,29 @@ function useMatrix(width, height) {
           columns[x] = null;
         }
       }
-      setState(buildGrid(columns, width, height));
+      if (ripplesRef?.current) {
+        ripplesRef.current = ripplesRef.current.filter(
+          (r) => now - r.createdAt < RIPPLE_DURATION_MS
+        );
+      }
+      const mousePos = mousePosRef?.current ?? null;
+      const ripples = ripplesRef?.current ?? [];
+      setState(buildGrid(columns, width, height, mousePos, ripples, now));
     }, 80);
     return () => clearInterval(id);
   }, [width, height]);
-  useEffect7(() => {
+  useLayoutEffect(() => {
     columnsRef.current = Array.from(
       { length: width },
       () => Math.random() < 0.5 ? createDrop(height, true) : null
     );
-    setState(buildGrid(columnsRef.current, width, height));
+    setState(buildGrid(columnsRef.current, width, height, null, []));
   }, [width, height]);
   return state;
 }
 
 // src/landing/matrix-background.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
 var MUTE_LEVELS = [0.12, 0.18, 0.24, 0.3, 0.38];
 var BG = hexToRgb("#1a1a2e");
 function buildMutedColors(baseHex) {
@@ -2774,8 +3243,8 @@ function colorForCell(mutedColors, b) {
   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);
+function MatrixBackground({ width, height, clearRect, clearRects, mousePosRef, ripplesRef }) {
+  const { grid, brightness } = useMatrix(width, height, mousePosRef, ripplesRef);
   const theme = useTheme();
   const columnColors = useMemo6(
     () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
@@ -2785,85 +3254,561 @@ function MatrixBackground({ width, height, clearRect, clearRects }) {
     () => columnColors.map(buildMutedColors),
     [columnColors]
   );
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column" }, grid.map((row, y) => /* @__PURE__ */ React.createElement("text", { key: y }, row.map((cell, x) => {
+  return /* @__PURE__ */ jsx49("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx49("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__ */ React.createElement("span", { key: x }, " ");
+      return /* @__PURE__ */ jsx49("span", { children: " " }, x);
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx49(
       "span",
       {
-        key: x,
         style: {
           fg: colorForCell(mutedColors, brightness[y][x])
-        }
+        },
+        children: cell
       },
-      cell
+      x
+    );
+  }) }, y)) });
+}
+
+// demos/ripple.tsx
+import { useState as useState27, useEffect as useEffect8, useRef as useRef13, useCallback as useCallback6 } from "react";
+import { useKeyboard as useKeyboard19 } from "@gridland/utils";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+var DEFAULT_COLS = 40;
+var DEFAULT_ROWS = 10;
+var CHARS2 = ["\xB7", "\u2591", "\u2592", "\u2593", "\u2588"];
+function hexToRgb2(hex) {
+  const h = hex.replace("#", "");
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16)
+  ];
+}
+function rgbToHex2(r, g, b) {
+  const clamp = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return "#" + clamp(r).toString(16).padStart(2, "0") + clamp(g).toString(16).padStart(2, "0") + clamp(b).toString(16).padStart(2, "0");
+}
+function lerp2(a, b, t) {
+  return a + (b - a) * t;
+}
+function RippleApp({ mouseOffset = { x: 0, y: 0 }, containerWidth, containerHeight } = {}) {
+  const theme = useTheme();
+  const [, setTick] = useState27(0);
+  const COLS2 = containerWidth ? containerWidth - 2 : DEFAULT_COLS;
+  const ROWS2 = containerHeight ? Math.max(3, containerHeight - 2 - 2) : DEFAULT_ROWS;
+  const cursorRef = useRef13({ x: Math.floor(COLS2 / 2), y: Math.floor(ROWS2 / 2) });
+  const ripplesRef = useRef13([]);
+  const frameRef = useRef13(0);
+  const mousePosRef = useRef13(null);
+  const accentRgb = hexToRgb2(theme.accent);
+  const dimRgb = [40, 40, 50];
+  const baseRgb = [60, 60, 70];
+  const addRipple = useCallback6((x, y) => {
+    ripplesRef.current = [
+      ...ripplesRef.current,
+      { x, y, time: frameRef.current }
+    ];
+  }, []);
+  useEffect8(() => {
+    const interval = setInterval(() => {
+      frameRef.current++;
+      ripplesRef.current = ripplesRef.current.filter(
+        (r) => frameRef.current - r.time < 30
+      );
+      setTick((t) => t + 1);
+    }, 60);
+    return () => clearInterval(interval);
+  }, []);
+  useKeyboard19((event) => {
+    const cursor2 = cursorRef.current;
+    if (event.name === "up") {
+      cursorRef.current = { ...cursor2, y: Math.max(0, cursor2.y - 1) };
+    } else if (event.name === "down") {
+      cursorRef.current = { ...cursor2, y: Math.min(ROWS2 - 1, cursor2.y + 1) };
+    } else if (event.name === "left") {
+      cursorRef.current = { ...cursor2, x: Math.max(0, cursor2.x - 1) };
+    } else if (event.name === "right") {
+      cursorRef.current = { ...cursor2, x: Math.min(COLS2 - 1, cursor2.x + 1) };
+    } else if (event.name === "return") {
+      addRipple(cursorRef.current.x, cursorRef.current.y);
+    }
+    event.preventDefault();
+  });
+  const cursor = cursorRef.current;
+  const frame = frameRef.current;
+  const ripples = ripplesRef.current;
+  const grid = Array.from({ length: ROWS2 }, (_, row) => /* @__PURE__ */ jsx50("text", { children: Array.from({ length: COLS2 }, (_2, col) => {
+    const isCursor = col === cursor.x && row === cursor.y;
+    const baseWave = Math.sin(frame * 0.08 + col * 0.3 + row * 0.5) * 0.5 + 0.5;
+    let intensity = baseWave * 0.15;
+    for (const ripple of ripples) {
+      const dx = col - ripple.x;
+      const dy = row - ripple.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const age = frame - ripple.time;
+      const radius = age * 0.5;
+      const fade = 1 - age / 30;
+      const ringDist = Math.abs(dist - radius);
+      if (ringDist < 1.5) {
+        const ringIntensity = (1 - ringDist / 1.5) * fade;
+        intensity = Math.max(intensity, ringIntensity);
+      } else if (dist < radius) {
+        const innerIntensity = fade * 0.3 * (1 - dist / radius);
+        intensity = Math.max(intensity, innerIntensity);
+      }
+    }
+    intensity = Math.max(0, Math.min(1, intensity));
+    const charIndex = Math.min(
+      CHARS2.length - 1,
+      Math.floor(intensity * CHARS2.length)
     );
-  }))));
+    const char = isCursor ? "\u25C6" : CHARS2[charIndex];
+    let fg;
+    if (isCursor) {
+      fg = theme.primary;
+    } else {
+      const r = lerp2(dimRgb[0], accentRgb[0], intensity);
+      const g = lerp2(dimRgb[1], accentRgb[1], intensity);
+      const b = lerp2(dimRgb[2], accentRgb[2], intensity);
+      fg = rgbToHex2(r, g, b);
+    }
+    return /* @__PURE__ */ jsx50("span", { style: { fg, bold: isCursor || intensity > 0.7 }, children: char }, col);
+  }) }, row));
+  return /* @__PURE__ */ jsxs39("box", { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs39(
+      "box",
+      {
+        flexDirection: "column",
+        flexGrow: 1,
+        paddingX: 1,
+        onMouseMove: (e) => {
+          const gx = e.x - mouseOffset.x - 1;
+          const gy = e.y - mouseOffset.y - 2;
+          if (gx >= 0 && gx < COLS2 && gy >= 0 && gy < ROWS2) {
+            mousePosRef.current = { x: gx, y: gy };
+            cursorRef.current = { x: gx, y: gy };
+          }
+        },
+        onMouseDown: (e) => {
+          const gx = e.x - mouseOffset.x - 1;
+          const gy = e.y - mouseOffset.y - 2;
+          if (gx >= 0 && gx < COLS2 && gy >= 0 && gy < ROWS2) {
+            addRipple(gx, gy);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx50("text", { style: { dim: true, fg: theme.muted }, children: "Click or press Enter to create ripples" }),
+          /* @__PURE__ */ jsx50("box", { flexDirection: "column", children: grid })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx50("box", { flexGrow: 1 }),
+    /* @__PURE__ */ jsx50("box", { paddingX: 1, children: /* @__PURE__ */ jsx50(
+      StatusBar,
+      {
+        items: [
+          { key: "\u2191\u2193\u2190\u2192", label: "move" },
+          { key: "enter/click", label: "ripple" }
+        ]
+      }
+    ) })
+  ] });
+}
+
+// demos/puzzle.tsx
+import { useState as useState28, useEffect as useEffect9, useRef as useRef14, useMemo as useMemo7 } from "react";
+import { useKeyboard as useKeyboard20 } from "@gridland/utils";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+var COLS = 4;
+var ROWS = 3;
+var TILE_COUNT = COLS * ROWS;
+var DEFAULT_TILE_WIDTH = 8;
+var DEFAULT_TILE_HEIGHT = 3;
+var SOLVED = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0];
+var tileColors = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#f43f5e",
+  "#6366f1",
+  "#84cc16"
+];
+function isSolved(board) {
+  for (let i = 0; i < TILE_COUNT; i++) {
+    if (board[i] !== SOLVED[i]) return false;
+  }
+  return true;
+}
+function getEmptyIndex(board) {
+  return board.indexOf(0);
+}
+function getNeighbor(emptyIdx, direction) {
+  const row = Math.floor(emptyIdx / COLS);
+  const col = emptyIdx % COLS;
+  switch (direction) {
+    case "up":
+      return row > 0 ? emptyIdx - COLS : null;
+    case "down":
+      return row < ROWS - 1 ? emptyIdx + COLS : null;
+    case "left":
+      return col > 0 ? emptyIdx - 1 : null;
+    case "right":
+      return col < COLS - 1 ? emptyIdx + 1 : null;
+    default:
+      return null;
+  }
+}
+function swap(board, a, b) {
+  const next = [...board];
+  next[a] = board[b];
+  next[b] = board[a];
+  return next;
+}
+function shuffle(board, count) {
+  let current = [...board];
+  const directions = ["up", "down", "left", "right"];
+  let lastDir = "";
+  for (let i = 0; i < count; i++) {
+    const emptyIdx = getEmptyIndex(current);
+    const validMoves = directions.filter((d) => {
+      if (d === lastDir) return false;
+      return getNeighbor(emptyIdx, d) !== null;
+    });
+    const dir = validMoves[Math.floor(Math.random() * validMoves.length)];
+    const neighbor = getNeighbor(emptyIdx, dir);
+    current = swap(current, emptyIdx, neighbor);
+    const opposites = { up: "down", down: "up", left: "right", right: "left" };
+    lastDir = opposites[dir];
+  }
+  return current;
+}
+function isAdjacentToEmpty(board, tileIdx) {
+  const emptyIdx = getEmptyIndex(board);
+  const eRow = Math.floor(emptyIdx / COLS);
+  const eCol = emptyIdx % COLS;
+  const tRow = Math.floor(tileIdx / COLS);
+  const tCol = tileIdx % COLS;
+  return Math.abs(eRow - tRow) === 1 && eCol === tCol || Math.abs(eCol - tCol) === 1 && eRow === tRow;
+}
+function PuzzleApp({ containerWidth, containerHeight } = {}) {
+  const theme = useTheme();
+  const TILE_WIDTH = containerWidth ? Math.floor((containerWidth - 2) / COLS) : DEFAULT_TILE_WIDTH;
+  const TILE_HEIGHT = containerHeight ? Math.max(3, Math.floor((containerHeight - 2 - 4) / ROWS)) : DEFAULT_TILE_HEIGHT;
+  const [board, setBoard] = useState28(SOLVED);
+  const [moves, setMoves] = useState28(0);
+  const [solved, setSolved] = useState28(false);
+  const boardRef = useRef14(board);
+  const movesRef = useRef14(moves);
+  boardRef.current = board;
+  movesRef.current = moves;
+  const doMove = (direction) => {
+    const current = boardRef.current;
+    if (isSolved(current) && movesRef.current > 0) return;
+    const emptyIdx = getEmptyIndex(current);
+    const neighbor = getNeighbor(emptyIdx, direction);
+    if (neighbor === null) return;
+    const next = swap(current, emptyIdx, neighbor);
+    boardRef.current = next;
+    movesRef.current++;
+    setBoard(next);
+    setMoves(movesRef.current);
+    setSolved(isSolved(next));
+  };
+  const doShuffle = () => {
+    const shuffled = shuffle(SOLVED, 30);
+    boardRef.current = shuffled;
+    movesRef.current = 0;
+    setBoard(shuffled);
+    setMoves(0);
+    setSolved(false);
+  };
+  useEffect9(() => {
+    doShuffle();
+  }, []);
+  useKeyboard20((event) => {
+    if (event.name === "up") {
+      doMove("down");
+      event.preventDefault();
+    } else if (event.name === "down") {
+      doMove("up");
+      event.preventDefault();
+    } else if (event.name === "left") {
+      doMove("right");
+      event.preventDefault();
+    } else if (event.name === "right") {
+      doMove("left");
+      event.preventDefault();
+    } else if (event.key === "r") {
+      doShuffle();
+      event.preventDefault();
+    }
+  });
+  const rows = useMemo7(() => {
+    const result = [];
+    for (let r = 0; r < ROWS; r++) {
+      result.push(board.slice(r * COLS, r * COLS + COLS));
+    }
+    return result;
+  }, [board]);
+  return /* @__PURE__ */ jsxs40("box", { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [
+    /* @__PURE__ */ jsx51("text", { style: textStyle({ dim: true, fg: theme.muted }), children: "Slide tiles to solve the puzzle" }),
+    /* @__PURE__ */ jsx51("box", { flexDirection: "column", children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx51("box", { flexDirection: "row", children: row.map((tile, colIdx) => {
+      const idx = rowIdx * COLS + colIdx;
+      if (tile === 0) {
+        return /* @__PURE__ */ jsx51("box", { width: TILE_WIDTH, height: TILE_HEIGHT }, idx);
+      }
+      const color = tileColors[tile - 1];
+      return /* @__PURE__ */ jsx51(
+        "box",
+        {
+          width: TILE_WIDTH,
+          height: TILE_HEIGHT,
+          border: true,
+          borderStyle: "rounded",
+          borderColor: solved ? theme.success : color,
+          onMouseDown: () => {
+            if (isAdjacentToEmpty(boardRef.current, idx)) {
+              const emptyIdx = getEmptyIndex(boardRef.current);
+              const next = swap(boardRef.current, emptyIdx, idx);
+              boardRef.current = next;
+              movesRef.current++;
+              setBoard(next);
+              setMoves(movesRef.current);
+              setSolved(isSolved(next));
+            }
+          },
+          children: /* @__PURE__ */ jsx51("text", { style: textStyle({
+            fg: solved ? theme.success : color,
+            bold: true
+          }), children: String(tile).padStart(2) })
+        },
+        idx
+      );
+    }) }, rowIdx)) }),
+    /* @__PURE__ */ jsx51("box", { height: 1 }),
+    /* @__PURE__ */ jsxs40("box", { flexDirection: "row", gap: 2, children: [
+      /* @__PURE__ */ jsxs40("text", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+        "Moves: ",
+        moves
+      ] }),
+      solved && moves > 0 && /* @__PURE__ */ jsx51("text", { style: textStyle({ fg: theme.success, bold: true }), children: "Solved!" })
+    ] }),
+    /* @__PURE__ */ jsx51("box", { flexGrow: 1 }),
+    /* @__PURE__ */ jsx51("box", { paddingX: 1, children: /* @__PURE__ */ jsx51(StatusBar, { items: [
+      { key: "\u2191\u2193\u2190\u2192", label: "slide" },
+      { key: "click", label: "slide tile" },
+      { key: "r", label: "shuffle" }
+    ] }) })
+  ] });
 }
 
 // src/landing/landing-app.tsx
-function LandingApp({ useKeyboard: useKeyboard20 }) {
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+var DEMOS = ["ripple", "puzzle"];
+var TAB_HEIGHT = 2;
+var TAB_WIDTHS = DEMOS.map((n) => n.length + 4);
+var TAB_POSITIONS = [];
+var _pos = 0;
+for (const w of TAB_WIDTHS) {
+  TAB_POSITIONS.push(_pos);
+  _pos += w;
+}
+function LandingApp({ useKeyboard: useKeyboard23 }) {
   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 [activeIndex, setActiveIndex] = useState29(0);
+  const mousePosRef = useRef15(null);
+  const matrixRipplesRef = useRef15([]);
+  useKeyboard23((event) => {
+    if (event.name === "tab") {
+      setActiveIndex((prev) => (prev + 1) % DEMOS.length);
+      event.preventDefault();
+    }
+  });
+  const isBrowser2 = typeof document !== "undefined";
+  const { clearRect, installLinksClearRect, boxTop } = useMemo8(() => {
+    const logoHeight = isTiny ? 2 : isMobile ? 7 : isNarrow ? 13 : 7;
+    const logoExtra = isBrowser2 ? 1 : 0;
     const gap = isMobile ? 0 : 1;
-    const installLinksTop = 3 + logoHeight + logoExtra + gap;
+    const paddingTop = isMobile ? 1 : 3;
+    const installLinksTop = paddingTop + logoHeight + logoExtra + gap;
     const installLinksHeight = 3;
-    const boxTop = installLinksTop + installLinksHeight + gap + 1;
-    const bh = height - boxTop - 1;
+    const boxTop2 = installLinksTop + installLinksHeight + gap + 1;
+    const bh = height - boxTop2 - 1;
+    const bw = Math.min(82, width - 2);
+    const bl = Math.floor((width - bw) / 2);
     return {
-      clearRect: { top: boxTop, left: 1, width: width - 2, height: bh },
-      installLinksClearRect: { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight }
+      clearRect: { top: boxTop2, left: bl, width: bw, height: bh },
+      installLinksClearRect: { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight },
+      boxTop: boxTop2
     };
-  }, [width, height, isTiny, isNarrow, isMobile, isBrowser]);
-  return /* @__PURE__ */ React.createElement("box", { width: "100%", height: "100%", position: "relative" }, /* @__PURE__ */ React.createElement(MatrixBackground, { width, height, clearRect, clearRects: isBrowser ? void 0 : [installLinksClearRect] }), /* @__PURE__ */ React.createElement("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false }, /* @__PURE__ */ React.createElement("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false }, /* @__PURE__ */ React.createElement("box", { flexShrink: 0, shouldFill: false }, /* @__PURE__ */ React.createElement(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile })), /* @__PURE__ */ React.createElement("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false }, /* @__PURE__ */ React.createElement("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0 }, /* @__PURE__ */ React.createElement("text", null, /* @__PURE__ */ React.createElement("span", { style: textStyle({ dim: true }) }, "$ "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ bold: true }) }, "bunx "), /* @__PURE__ */ React.createElement("span", { style: textStyle({ fg: theme.accent }) }, "@gridland/demo landing"))), /* @__PURE__ */ React.createElement(InstallBox, null), /* @__PURE__ */ React.createElement(LinksBox, null)), /* @__PURE__ */ React.createElement("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden" }))));
+  }, [width, height, isTiny, isNarrow, isMobile, isBrowser2]);
+  const MAX_BOX_WIDTH = 82;
+  const availableWidth = width - 2;
+  const boxWidth = Math.min(MAX_BOX_WIDTH, availableWidth);
+  const boxLeft = Math.floor((width - boxWidth) / 2);
+  const mouseOffset = useMemo8(() => ({
+    x: boxLeft + 1,
+    // box left edge + border(1)
+    y: boxTop + TAB_HEIGHT + 1
+    // boxTop + tab rows + box top border(1)
+  }), [boxTop, boxLeft]);
+  const containerWidth = boxWidth - 2;
+  const maxBoxHeight = 20;
+  const containerHeight = Math.min(height - boxTop - 1 - TAB_HEIGHT, maxBoxHeight - TAB_HEIGHT);
+  const activeStart = TAB_POSITIONS[activeIndex];
+  const activeWidth = TAB_WIDTHS[activeIndex];
+  const activeEnd = activeStart + activeWidth;
+  const connectParts = [];
+  if (activeStart === 0) {
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2502" }, "cl"));
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: " ".repeat(activeWidth - 2) }, "gap"));
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2570" }, "cr"));
+  } else {
+    connectParts.push(
+      /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u256D" + "\u2500".repeat(activeStart - 1) }, "left")
+    );
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u256F" }, "cl"));
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: " ".repeat(activeWidth - 2) }, "gap"));
+    connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2570" }, "cr"));
+  }
+  const rightFill = boxWidth - activeEnd - 1;
+  if (rightFill > 0) {
+    connectParts.push(
+      /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2500".repeat(rightFill) }, "right")
+    );
+  }
+  connectParts.push(/* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u256E" }, "corner-r"));
+  return /* @__PURE__ */ jsxs41("box", { width: "100%", height: "100%", position: "relative", children: [
+    /* @__PURE__ */ jsx52(MatrixBackground, { width, height, clearRect, clearRects: isBrowser2 ? void 0 : [installLinksClearRect], mousePosRef, ripplesRef: matrixRipplesRef }),
+    /* @__PURE__ */ jsx52(
+      "box",
+      {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height,
+        zIndex: 1,
+        flexDirection: "column",
+        shouldFill: false,
+        onMouseMove: (e) => {
+          mousePosRef.current = { x: e.x, y: e.y };
+        },
+        onMouseDown: (e) => {
+          matrixRipplesRef.current = [
+            ...matrixRipplesRef.current,
+            { x: e.x, y: e.y, createdAt: Date.now() }
+          ];
+        },
+        children: /* @__PURE__ */ jsxs41("box", { flexGrow: 1, flexDirection: "column", paddingTop: isMobile ? 1 : 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
+          /* @__PURE__ */ jsx52("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx52(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
+          /* @__PURE__ */ jsxs41("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
+            !isMobile && /* @__PURE__ */ jsx52("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs41("text", { children: [
+              /* @__PURE__ */ jsx52("span", { style: textStyle({ dim: true }), children: "$ " }),
+              /* @__PURE__ */ jsx52("span", { style: textStyle({ bold: true }), children: "bunx " }),
+              /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
+            ] }) }),
+            !isMobile && /* @__PURE__ */ jsx52(InstallBox, {}),
+            /* @__PURE__ */ jsx52(LinksBox, {})
+          ] }),
+          /* @__PURE__ */ jsxs41("box", { flexDirection: "column", width: boxWidth, maxWidth: MAX_BOX_WIDTH, maxHeight: 20, alignSelf: "center", flexGrow: 1, children: [
+            /* @__PURE__ */ jsx52("box", { height: 1, flexShrink: 0, flexDirection: "row", shouldFill: false, children: DEMOS.map((name2, i) => {
+              const isActive = i === activeIndex;
+              const w = TAB_WIDTHS[i];
+              return /* @__PURE__ */ jsx52("box", { width: w, onMouseDown: () => setActiveIndex(i), children: /* @__PURE__ */ jsx52("text", { style: textStyle({ fg: theme.border }), children: isActive ? "\u256D" + "\u2500".repeat(w - 2) + "\u256E" : " ".repeat(w) }) }, name2);
+            }) }),
+            /* @__PURE__ */ jsx52("box", { height: 1, flexShrink: 0, flexDirection: "row", shouldFill: false, children: DEMOS.map((name2, i) => {
+              const isActive = i === activeIndex;
+              const w = TAB_WIDTHS[i];
+              return /* @__PURE__ */ jsx52("box", { width: w, onMouseDown: () => setActiveIndex(i), children: /* @__PURE__ */ jsx52("text", { children: isActive ? /* @__PURE__ */ jsxs41(Fragment7, { children: [
+                /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2502" }),
+                /* @__PURE__ */ jsx52("span", { style: textStyle({ bold: true, fg: theme.foreground }), children: ` ${name2} ` }),
+                /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.border }), children: "\u2502" })
+              ] }) : /* @__PURE__ */ jsx52("span", { style: textStyle({ fg: theme.muted }), children: ` ${name2} ` }) }) }, name2);
+            }) }),
+            /* @__PURE__ */ jsxs41("box", { position: "relative", flexGrow: 1, children: [
+              /* @__PURE__ */ jsx52("box", { position: "absolute", top: 0, left: 0, width: boxWidth, height: 1, zIndex: 2, children: /* @__PURE__ */ jsx52("text", { children: connectParts }) }),
+              /* @__PURE__ */ jsxs41("box", { border: true, borderStyle: "rounded", borderColor: theme.border, flexGrow: 1, flexDirection: "column", overflow: "hidden", children: [
+                activeIndex === 0 && /* @__PURE__ */ jsx52(RippleApp, { mouseOffset, containerWidth, containerHeight }),
+                activeIndex === 1 && /* @__PURE__ */ jsx52(PuzzleApp, { containerWidth, containerHeight })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx52("box", { height: 1 }),
+            /* @__PURE__ */ jsx52("box", { width: "100%", alignItems: "center", flexDirection: "column", shouldFill: false, children: /* @__PURE__ */ jsxs41("text", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+              "Made with \u2764\uFE0F by ",
+              /* @__PURE__ */ jsx52("a", { href: "https://cjroth.com", style: { attributes: 1 << 3, fg: theme.muted }, children: "Chris Roth" }),
+              " + ",
+              /* @__PURE__ */ jsx52("a", { href: "https://jessicacheng.studio", style: { attributes: 1 << 3, fg: theme.muted }, children: "Jessica Cheng" })
+            ] }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 
+// src/landing/matrix-rain.tsx
+import { jsx as jsx53 } from "react/jsx-runtime";
+
+// src/landing/about-modal.tsx
+import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+
 // demos/index.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
 var demos = [
-  { name: "gradient", app: () => /* @__PURE__ */ React.createElement(GradientApp, null) },
-  { name: "ascii", app: () => /* @__PURE__ */ React.createElement(AsciiApp, null) },
-  { name: "table", app: () => /* @__PURE__ */ React.createElement(TableApp, null) },
-  { name: "spinner", app: () => /* @__PURE__ */ React.createElement(SpinnerApp, null) },
-  { name: "select-input", app: () => /* @__PURE__ */ React.createElement(SelectInputApp, null) },
-  { name: "multi-select", app: () => /* @__PURE__ */ React.createElement(MultiSelectApp, null) },
-  { name: "prompt-input", app: () => /* @__PURE__ */ React.createElement(PromptInputApp, null) },
-  { name: "text-input", app: () => /* @__PURE__ */ React.createElement(TextInputApp, null) },
-  { name: "link", app: () => /* @__PURE__ */ React.createElement(LinkApp, null) },
-  { name: "tabs", app: () => /* @__PURE__ */ React.createElement(TabBarApp, null) },
-  { name: "status-bar", app: () => /* @__PURE__ */ React.createElement(StatusBarApp, null) },
-  { name: "modal", app: () => /* @__PURE__ */ React.createElement(ModalApp, null) },
-  { name: "primitives", app: () => /* @__PURE__ */ React.createElement(PrimitivesApp, null) },
-  { name: "chat", app: () => /* @__PURE__ */ React.createElement(ChatApp, null) },
-  { name: "chain-of-thought", app: () => /* @__PURE__ */ React.createElement(ChainOfThoughtApp, null) },
-  { name: "message", app: () => /* @__PURE__ */ React.createElement(MessageApp, null) },
-  { name: "terminal-window", app: () => /* @__PURE__ */ React.createElement(TerminalWindowApp, null) },
-  { name: "focus", app: () => /* @__PURE__ */ React.createElement(FocusApp, null) },
-  { name: "pointer", app: () => /* @__PURE__ */ React.createElement(PointerApp, null) },
-  { name: "cursor-highlight", app: () => /* @__PURE__ */ React.createElement(CursorHighlightApp, null) },
-  { name: "text-style", app: () => /* @__PURE__ */ React.createElement(TextStyleApp, null) },
-  { name: "headless", app: () => /* @__PURE__ */ React.createElement(HeadlessApp, null) },
-  { name: "theming", app: () => /* @__PURE__ */ React.createElement(ThemingApp, null) },
-  { name: "landing", app: () => /* @__PURE__ */ React.createElement(LandingApp, { useKeyboard: useKeyboard18 }) }
+  { name: "gradient", app: () => /* @__PURE__ */ jsx55(GradientApp, {}) },
+  { name: "ascii", app: () => /* @__PURE__ */ jsx55(AsciiApp, {}) },
+  { name: "table", app: () => /* @__PURE__ */ jsx55(TableApp, {}) },
+  { name: "spinner", app: () => /* @__PURE__ */ jsx55(SpinnerApp, {}) },
+  { name: "select-input", app: () => /* @__PURE__ */ jsx55(SelectInputApp, {}) },
+  { name: "multi-select", app: () => /* @__PURE__ */ jsx55(MultiSelectApp, {}) },
+  { name: "prompt-input", app: () => /* @__PURE__ */ jsx55(PromptInputApp, {}) },
+  { name: "text-input", app: () => /* @__PURE__ */ jsx55(TextInputApp, {}) },
+  { name: "link", app: () => /* @__PURE__ */ jsx55(LinkApp, {}) },
+  { name: "tabs", app: () => /* @__PURE__ */ jsx55(TabBarApp, {}) },
+  { name: "status-bar", app: () => /* @__PURE__ */ jsx55(StatusBarApp, {}) },
+  { name: "modal", app: () => /* @__PURE__ */ jsx55(ModalApp, {}) },
+  { name: "primitives", app: () => /* @__PURE__ */ jsx55(PrimitivesApp, {}) },
+  { name: "chat", app: () => /* @__PURE__ */ jsx55(ChatApp, {}) },
+  { name: "chain-of-thought", app: () => /* @__PURE__ */ jsx55(ChainOfThoughtApp, {}) },
+  { name: "message", app: () => /* @__PURE__ */ jsx55(MessageApp, {}) },
+  { name: "terminal-window", app: () => /* @__PURE__ */ jsx55(TerminalWindowApp, {}) },
+  { name: "focus-grid", app: () => /* @__PURE__ */ jsx55(FocusGridApp, {}) },
+  { name: "focus-chat", app: () => /* @__PURE__ */ jsx55(FocusChatApp, {}) },
+  { name: "focus", app: () => /* @__PURE__ */ jsx55(FocusApp, {}) },
+  { name: "pointer", app: () => /* @__PURE__ */ jsx55(PointerApp, {}) },
+  { name: "cursor-highlight", app: () => /* @__PURE__ */ jsx55(CursorHighlightApp, {}) },
+  { name: "text-style", app: () => /* @__PURE__ */ jsx55(TextStyleApp, {}) },
+  { name: "headless", app: () => /* @__PURE__ */ jsx55(HeadlessApp, {}) },
+  { name: "theming", app: () => /* @__PURE__ */ jsx55(ThemingApp, {}) },
+  { name: "landing", app: () => /* @__PURE__ */ jsx55(LandingApp, { useKeyboard: useKeyboard21 }) },
+  { name: "ripple", app: () => /* @__PURE__ */ jsx55(RippleApp, {}) },
+  { name: "puzzle", app: () => /* @__PURE__ */ jsx55(PuzzleApp, {}) }
 ];
 
 // src/run.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
 var _renderer;
 function DemoShell({ children }) {
-  useKeyboard19((event) => {
-    if (event.name === "q" || event.name === "escape") {
+  useKeyboard22((event) => {
+    if (event.defaultPrevented) return;
+    if (event.name === "escape") {
       _renderer.destroy();
     }
   });
-  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, children);
+  return /* @__PURE__ */ jsx56("box", { flexDirection: "column", flexGrow: 1, children });
 }
 async function runDemo(name2) {
   const demo = demos.find((d) => d.name === name2);
@@ -2873,7 +3818,7 @@ async function runDemo(name2) {
     process.exit(1);
   }
   _renderer = await createCliRenderer({ exitOnCtrlC: true });
-  createRoot(_renderer).render(/* @__PURE__ */ React.createElement(DemoShell, null, demo.app()));
+  createRoot(_renderer).render(/* @__PURE__ */ jsx56(DemoShell, { children: demo.app() }));
 }
 var name = process.argv[2];
 if (name) {