@gridland/demo 0.2.49 → 0.2.51

package/dist/landing.js

@@ -52,33 +52,6 @@ function textStyle(opts) {
 
 // ../ui/components/status-bar/status-bar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function StatusBar({ items, extra }) {
-  const theme = useTheme();
-  const parts = [];
-  if (extra !== void 0) {
-    parts.push(
-      /* @__PURE__ */ jsx3("span", { children: extra }, "extra")
-    );
-    parts.push(
-      /* @__PURE__ */ jsx3("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: "  \u2502  " }, "pipe")
-    );
-  }
-  items.forEach((item, i) => {
-    if (i > 0) {
-      parts.push(/* @__PURE__ */ jsx3("span", { children: " " }, `gap-${i}`));
-    }
-    parts.push(
-      /* @__PURE__ */ jsx3("span", { style: textStyle({ bold: true, fg: theme.background, bg: theme.muted }), children: ` ${item.key} ` }, `key-${i}`)
-    );
-    parts.push(
-      /* @__PURE__ */ jsx3("span", { style: textStyle({ dim: true, fg: theme.placeholder }), children: ` ${item.label}` }, `label-${i}`)
-    );
-  });
-  if (parts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx3("text", { children: parts });
-}
 
 // ../ui/components/provider/provider.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -99,7 +72,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 import { useEffect, useState as useState2 } from "react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var VARIANTS = {
-  dots: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 83 },
+  dots: { frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"], interval: 80 },
   pulse: { frames: ["\xB7", "\u2219", "\u25CF", "\u2219", "\xB7", "\xB7", "\xB7"], interval: 180 },
   meter: { frames: ["\u25B1\u25B1\u25B1", "\u25B0\u25B1\u25B1", "\u25B0\u25B0\u25B1", "\u25B0\u25B0\u25B0", "\u25B0\u25B0\u25B1", "\u25B0\u25B1\u25B1", "\u25B1\u25B1\u25B1"], interval: 143 },
   bloom: { frames: ["\xB7", "\u2726", "\u2727", "\u2739", "\u273A", "\u274B", "\u2738", "\u2735", "\u2738", "\u274B", "\u273A", "\u2739", "\u2727", "\u2726", "\xB7", "\xB7"], interval: 100 },
@@ -124,8 +97,9 @@ import { useReducer as useReducer2, useMemo as useMemo2, useRef as useRef3 } fro
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 
 // ../ui/components/table/table.tsx
-import { Fragment } from "react";
+import { createContext as createContext3, useContext as useContext3, Children, isValidElement, Fragment } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var TableContext = createContext3(null);
 
 // ../ui/components/gradient/gradient.tsx
 import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
@@ -194,59 +168,29 @@ function Gradient({ children, name, colors }) {
 }
 
 // ../ui/components/tab-bar/tab-bar.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState5, Children, isValidElement } from "react";
+import { createContext as createContext4, useContext as useContext4, useState as useState5, Children as Children2, isValidElement as isValidElement2 } from "react";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var TabsContext = createContext3(null);
+var TabsContext = createContext4(null);
 
 // ../ui/components/modal/modal.tsx
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function Modal({
-  children,
-  title,
-  borderColor,
-  borderStyle = "rounded",
-  onClose,
-  useKeyboard: useKeyboardProp
-}) {
-  const theme = useTheme();
-  const useKeyboard = useKeyboardContext(useKeyboardProp);
-  const resolvedBorderColor = borderColor ?? theme.muted;
-  useKeyboard?.((event) => {
-    if (event.name === "escape" && onClose) {
-      onClose();
-    }
-  });
-  return /* @__PURE__ */ jsx15("box", { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx15(
-    "box",
-    {
-      flexDirection: "column",
-      flexGrow: 1,
-      border: true,
-      borderStyle,
-      borderColor: resolvedBorderColor,
-      children: title ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsx15("box", { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx15("text", { style: textStyle({ bold: true, fg: theme.primary }), children: title }) }),
-        children
-      ] }) : children
-    }
-  ) });
-}
 
 // ../ui/components/prompt-input/prompt-input.tsx
 import {
   useState as useState6,
   useRef as useRef4,
   useCallback as useCallback2,
+  useEffect as useEffect2,
   useMemo as useMemo3,
-  createContext as createContext4,
-  useContext as useContext4
+  createContext as createContext5,
+  useContext as useContext5
 } from "react";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var PromptInputControllerCtx = createContext4(null);
-var useOptionalController = () => useContext4(PromptInputControllerCtx);
-var PromptInputContext = createContext4(null);
+var PromptInputControllerCtx = createContext5(null);
+var useOptionalController = () => useContext5(PromptInputControllerCtx);
+var PromptInputContext = createContext5(null);
 function usePromptInput() {
-  const ctx = useContext4(PromptInputContext);
+  const ctx = useContext5(PromptInputContext);
   if (!ctx) {
     throw new Error("usePromptInput must be used within a <PromptInput> component");
   }
@@ -268,9 +212,10 @@ function resolveStatusHintText(status, submittedText, streamingText, errorText,
   if (status === "error") return errorText;
   return disabledText;
 }
+var DIVIDER_LINE = "\u2500".repeat(500);
 function PromptInputDivider() {
   const { theme } = usePromptInput();
-  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: "\u2500".repeat(500) }) });
+  return /* @__PURE__ */ jsx16("text", { wrapMode: "none", marginLeft: -1, marginRight: -1, children: /* @__PURE__ */ jsx16("span", { style: textStyle({ dim: true, fg: theme.muted }), children: DIVIDER_LINE }) });
 }
 function PromptInputSuggestions() {
   const { suggestions, sugIdx, maxSuggestions, theme } = usePromptInput();
@@ -344,11 +289,20 @@ function PromptInput({
   enableHistory = true,
   model,
   showDividers = true,
+  autoFocus = false,
   useKeyboard: useKeyboardProp,
   children
 }) {
   const theme = useTheme();
   const useKeyboard = useKeyboardContext(useKeyboardProp);
+  useEffect2(() => {
+    if (!autoFocus) return;
+    if (typeof document === "undefined") return;
+    const canvas = document.querySelector("canvas");
+    if (canvas && document.activeElement !== canvas) {
+      canvas.focus();
+    }
+  }, [autoFocus]);
   const resolvedPromptColor = promptColor ?? theme.muted;
   const disabled = status ? status === "submitted" || status === "streaming" : disabledProp;
   const statusHintText = resolveStatusHintText(status, submittedText, streamingLabel, errorText, disabledText);
@@ -542,14 +496,16 @@ function PromptInput({
     theme
   };
   if (children) {
-    return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", children }) });
+    return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx16("box", { flexDirection: "column", flexShrink: 0, children }) });
   }
-  return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs10("box", { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsx16(PromptInputContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs10("box", { flexDirection: "column", flexShrink: 0, children: [
     showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {}),
-    /* @__PURE__ */ jsx16(PromptInputSuggestions, {}),
-    /* @__PURE__ */ jsx16(PromptInputTextarea, {}),
-    /* @__PURE__ */ jsx16(PromptInputStatusText, {}),
-    /* @__PURE__ */ jsx16(PromptInputModel, {}),
+    /* @__PURE__ */ jsxs10("box", { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx16(PromptInputSuggestions, {}),
+      /* @__PURE__ */ jsx16(PromptInputTextarea, {}),
+      /* @__PURE__ */ jsx16(PromptInputStatusText, {}),
+      /* @__PURE__ */ jsx16(PromptInputModel, {})
+    ] }),
     showDividers && /* @__PURE__ */ jsx16(PromptInputDivider, {})
   ] }) });
 }
@@ -563,13 +519,19 @@ PromptInput.Model = PromptInputModel;
 // ../ui/components/chat/chat.tsx
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 
-// ../ui/components/timeline/timeline.tsx
-import { useState as useState7, useEffect as useEffect2, useRef as useRef5 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+// ../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";
 var DOTS = ["\u25CB", "\u25D4", "\u25D1", "\u25D5", "\u25CF"];
-function getStepDot(status) {
-  return status === "pending" ? "\u25CB" : "\u25CF";
-}
+var SPINNER_INTERVAL = 150;
+var ChainOfThoughtContext = createContext6(null);
+var useChainOfThought = () => {
+  const context = useContext6(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error("ChainOfThought components must be used within <ChainOfThought>");
+  }
+  return context;
+};
 function getStepColor(status, theme) {
   switch (status) {
     case "done":
@@ -584,78 +546,89 @@ function getStepColor(status, theme) {
       return theme.muted;
   }
 }
-function StepRow({ step, isLast, theme, frame }) {
-  const color = getStepColor(step.status, theme);
-  const isActive = step.status === "running";
-  const isPending = step.status === "pending";
+var ChainOfThought = memo(({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const [internalOpen, setInternalOpen] = useState7(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
+  const context = useMemo4(
+    () => ({ isOpen, setIsOpen }),
+    [isOpen, setIsOpen]
+  );
+  return /* @__PURE__ */ jsx18(ChainOfThoughtContext.Provider, { value: context, children: /* @__PURE__ */ jsx18("box", { flexDirection: "column", children }) });
+});
+var ChainOfThoughtHeader = memo(({
+  duration,
+  children = "Thought for"
+}) => {
+  const theme = useTheme();
+  const { isOpen } = useChainOfThought();
+  const arrow = isOpen ? "\u25BC" : "\u25B6";
+  return /* @__PURE__ */ jsxs12("text", { children: [
+    /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
+    /* @__PURE__ */ jsxs12("span", { style: textStyle({ dim: true, fg: theme.muted }), children: [
+      " ",
+      children,
+      duration ? " " + duration : ""
+    ] })
+  ] });
+});
+var ChainOfThoughtContent = memo(({ children }) => {
+  const { isOpen } = useChainOfThought();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx18(Fragment6, { children });
+});
+var ChainOfThoughtStep = memo(({
+  label,
+  description,
+  status = "done",
+  isLast = false,
+  children
+}) => {
+  const theme = useTheme();
+  const isActive = status === "running";
+  const isPending = status === "pending";
+  const color = getStepColor(status, theme);
   const pipe = "\u2502";
-  const dot = isActive ? DOTS[frame % DOTS.length] : getStepDot(step.status);
-  const dashIdx = step.label.indexOf(" \u2014 ");
-  const mainLabel = dashIdx >= 0 ? step.label.slice(0, dashIdx) : step.label;
-  const detail = dashIdx >= 0 ? step.label.slice(dashIdx) : "";
+  const [frame, setFrame] = useState7(0);
+  useEffect3(() => {
+    if (!isActive) {
+      setFrame(0);
+      return;
+    }
+    const id = setInterval(() => setFrame((f) => f + 1), SPINNER_INTERVAL);
+    return () => clearInterval(id);
+  }, [isActive]);
+  const dot = isActive ? DOTS[frame % DOTS.length] : isPending ? "\u25CB" : "\u25CF";
   return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", marginLeft: 1, children: [
     /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color }), children: dot }),
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.foreground }), children: " " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: mainLabel }),
-      detail && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: detail })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: isPending ? theme.muted : color, dim: isPending, bold: isActive }), children: label }),
+      description && /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " \u2014 " + description })
     ] }),
-    step.output && /* @__PURE__ */ jsxs12("text", { children: [
+    children && /* @__PURE__ */ jsxs12("text", { children: [
       /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe + "  " }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: step.status === "error" ? theme.error : theme.accent }), children: step.output })
+      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: status === "error" ? theme.error : theme.accent }), children })
     ] }),
     !isLast && /* @__PURE__ */ jsx18("text", { children: /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: color, dim: true }), children: pipe }) })
   ] });
-}
-function Timeline({
-  steps,
-  duration,
-  collapsed = true,
-  headerLabel = "Thought for"
-}) {
-  const theme = useTheme();
-  const arrow = collapsed ? "\u25B6" : "\u25BC";
-  const durationStr = duration ?? "0ms";
-  const hasRunning = steps?.some((s) => s.status === "running") ?? false;
-  const [frame, setFrame] = useState7(0);
-  const alive = useRef5(true);
-  useEffect2(() => {
-    alive.current = true;
-    return () => {
-      alive.current = false;
-    };
-  }, []);
-  useEffect2(() => {
-    if (!hasRunning) return;
-    const id = setInterval(() => {
-      if (alive.current) setFrame((f) => f + 1);
-    }, 150);
-    return () => clearInterval(id);
-  }, [hasRunning]);
-  return /* @__PURE__ */ jsxs12("box", { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs12("text", { children: [
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ fg: theme.muted }), children: arrow }),
-      /* @__PURE__ */ jsx18("span", { style: textStyle({ dim: true, fg: theme.muted }), children: " " + headerLabel + " " + durationStr })
-    ] }),
-    !collapsed && steps && steps.map((step, i) => /* @__PURE__ */ jsx18(
-      StepRow,
-      {
-        step,
-        isLast: i === steps.length - 1,
-        theme,
-        frame
-      },
-      `step-${i}`
-    ))
-  ] });
-}
+});
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
 
 // ../ui/components/message/message.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext7, useContext as useContext7 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var MessageContext = createContext5(null);
+var MessageContext = createContext7(null);
 function useMessage() {
-  const ctx = useContext5(MessageContext);
+  const ctx = useContext7(MessageContext);
   if (!ctx) throw new Error("useMessage must be used within <Message>");
   return ctx;
 }
@@ -664,23 +637,25 @@ function getBubbleColors(theme) {
   return isDark ? { assistantBg: "#2a2a4a", userBg: "#2a3a3a" } : { assistantBg: "#F1F5F9", userBg: "#E2E8F0" };
 }
 var TOOL_STATE_ICONS = {
-  "partial-call": "\u2022",
+  pending: "\u2022",
   // •
-  "call": "\u280B",
+  running: "\u280B",
   // ⠋
-  "result": "\u2713"
+  completed: "\u2713",
   // ✓
+  error: "\u2715"
+  // ✕
 };
 function getToolStateColor(state, theme) {
   switch (state) {
-    case "partial-call":
+    case "pending":
       return theme.muted;
-    case "call":
+    case "running":
       return theme.warning;
-    case "result":
+    case "completed":
       return theme.success;
-    default:
-      return theme.muted;
+    case "error":
+      return theme.error;
   }
 }
 function MessageContent({ children }) {
@@ -705,45 +680,57 @@ function MessageText({ children, isLast = false }) {
     isLast && isStreaming && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: streamingCursor })
   ] });
 }
-function MessageReasoning({ part }) {
-  return /* @__PURE__ */ jsx19(
-    Timeline,
-    {
-      steps: part.steps,
-      duration: part.duration,
-      collapsed: part.collapsed
-    }
-  );
+function MessageReasoning({ duration, steps, collapsed = true, children }) {
+  return /* @__PURE__ */ jsxs13(ChainOfThought, { defaultOpen: !collapsed, children: [
+    /* @__PURE__ */ jsx19(ChainOfThoughtHeader, { duration }),
+    /* @__PURE__ */ jsxs13(ChainOfThoughtContent, { children: [
+      steps?.map((step, i) => /* @__PURE__ */ jsx19(
+        ChainOfThoughtStep,
+        {
+          label: step.label,
+          description: step.description,
+          status: step.status,
+          isLast: i === (steps?.length ?? 0) - 1,
+          children: step.output
+        },
+        i
+      )),
+      children
+    ] })
+  ] });
 }
-function MessageToolInvocation({ part, toolColors }) {
+function MessageToolCall({ name, state = "pending", result, color }) {
   const theme = useTheme();
   const { backgroundColor, textColor } = useMessage();
-  const { toolName, state, result } = part.toolInvocation;
-  const icon = TOOL_STATE_ICONS[state] || "\u2022";
-  const stateColor = toolColors?.[toolName] ?? getToolStateColor(state, theme);
-  const isActive = state === "partial-call" || state === "call";
+  const icon = TOOL_STATE_ICONS[state];
+  const stateColor = color ?? getToolStateColor(state, theme);
+  const isActive = state === "pending" || state === "running";
   return /* @__PURE__ */ jsxs13("box", { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs13("text", { children: [
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bg: backgroundColor }), children: icon }),
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, bg: backgroundColor }), children: " " }),
-      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bold: isActive, bg: backgroundColor }), children: toolName }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: stateColor, bold: isActive, bg: backgroundColor }), children: name }),
       isActive && /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: " ..." })
     ] }),
-    state === "result" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
+    state === "completed" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "  \u2514\u2500 " }),
       /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: String(result).slice(0, 120) })
+    ] }),
+    state === "error" && result !== void 0 && /* @__PURE__ */ jsxs13("text", { children: [
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.error, dim: true, bg: backgroundColor }), children: "  \u2514\u2500 " }),
+      /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.error, dim: true, bg: backgroundColor }), children: String(result).slice(0, 120) })
     ] })
   ] });
 }
-function MessageSource({ part, index }) {
+function MessageSource({ title, url, index }) {
   const theme = useTheme();
   const { backgroundColor, textColor } = useMessage();
-  const title = part.source.title || part.source.url || "source";
+  const displayTitle = title || url || "source";
   return /* @__PURE__ */ jsxs13("text", { children: [
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "[" }),
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: String(index + 1) }),
     /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: textColor, dim: true, bg: backgroundColor }), children: "] " }),
-    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: title })
+    /* @__PURE__ */ jsx19("span", { style: textStyle({ fg: theme.accent, bg: backgroundColor }), children: displayTitle })
   ] });
 }
 function MessageFooter({ model, timestamp }) {
@@ -779,7 +766,7 @@ function Message({
 Message.Content = MessageContent;
 Message.Text = MessageText;
 Message.Reasoning = MessageReasoning;
-Message.ToolInvocation = MessageToolInvocation;
+Message.ToolCall = MessageToolCall;
 Message.Source = MessageSource;
 Message.Footer = MessageFooter;
 
@@ -805,64 +792,14 @@ function useBreakpoints() {
   };
 }
 
-// ../docs/components/landing/landing-app.tsx
-import { useCallback as useCallback3, useRef as useRef8, useState as useState10 } from "react";
+// src/landing/landing-app.tsx
+import { useMemo as useMemo7 } from "react";
 
-// ../docs/components/landing/about-modal.tsx
+// src/landing/install-box.tsx
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
-function AboutModal({ onClose, useKeyboard }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx21(Modal, { title: "About Gridland", useKeyboard, onClose, children: /* @__PURE__ */ jsxs15("box", { paddingX: 1, flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "What is Gridland?" }),
-    /* @__PURE__ */ jsx21("text", { children: "Gridland renders terminal UIs to HTML5 Canvas with React." }),
-    /* @__PURE__ */ jsx21("text", { children: "No xterm.js. No terminal emulator. Just pixels." }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Features" }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Canvas-rendered TUI components"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "React reconciler with JSX"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Yoga flexbox layout engine"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Keyboard, mouse, and clipboard support"
-    ] }),
-    /* @__PURE__ */ jsxs15("text", { children: [
-      /* @__PURE__ */ jsxs15("span", { style: textStyle({ dim: true }), children: [
-        "\u2022",
-        " "
-      ] }),
-      "Next.js and Vite plugins"
-    ] }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ bold: true, fg: theme.accent }), children: "Tech Stack" }),
-    /* @__PURE__ */ jsx21("text", { children: "React + opentui engine + yoga-layout + HTML5 Canvas" }),
-    /* @__PURE__ */ jsx21("text", { style: textStyle({ dim: true }), children: "Press q to close" })
-  ] }) });
-}
-
-// ../docs/components/landing/install-box.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function InstallBox() {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "box",
     {
       border: true,
@@ -871,21 +808,21 @@ function InstallBox() {
       paddingX: 1,
       flexDirection: "column",
       flexShrink: 0,
-      children: /* @__PURE__ */ jsxs16("text", { children: [
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ dim: true }), children: "$ " }),
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ bold: true }), children: "bun create " }),
-        /* @__PURE__ */ jsx22("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
+      children: /* @__PURE__ */ jsxs15("text", { children: [
+        /* @__PURE__ */ jsx21("span", { style: textStyle({ dim: true }), children: "$ " }),
+        /* @__PURE__ */ jsx21("span", { style: textStyle({ bold: true }), children: "bun create " }),
+        /* @__PURE__ */ jsx21("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
       ] })
     }
   );
 }
 
-// ../docs/components/landing/links-box.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+// src/landing/links-box.tsx
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var UNDERLINE3 = 1 << 3;
 function LinksBox() {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx22(
     "box",
     {
       border: true,
@@ -894,22 +831,22 @@ function LinksBox() {
       paddingX: 1,
       flexDirection: "column",
       flexShrink: 0,
-      children: /* @__PURE__ */ jsxs17("text", { children: [
-        /* @__PURE__ */ jsx23("span", { children: "\u{1F431}" }),
-        /* @__PURE__ */ jsx23("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
-        /* @__PURE__ */ jsx23("span", { children: "  " }),
-        /* @__PURE__ */ jsx23("span", { children: "\u{1F4D6}" }),
-        /* @__PURE__ */ jsx23("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
+      children: /* @__PURE__ */ jsxs16("text", { children: [
+        /* @__PURE__ */ jsx22("span", { children: "\u{1F431}" }),
+        /* @__PURE__ */ jsx22("a", { href: "https://github.com/thoughtfulllc/gridland", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " GitHub" }),
+        /* @__PURE__ */ jsx22("span", { children: "  " }),
+        /* @__PURE__ */ jsx22("span", { children: "\u{1F4D6}" }),
+        /* @__PURE__ */ jsx22("a", { href: "https://gridland.io/docs", style: { attributes: UNDERLINE3, fg: theme.accent }, children: " Docs" })
       ] })
     }
   );
 }
 
-// ../docs/components/landing/logo.tsx
-import { useState as useState8, useEffect as useEffect3, useRef as useRef6, useMemo as useMemo4 } from "react";
+// src/landing/logo.tsx
+import { useState as useState8, useEffect as useEffect4, useRef as useRef5, useMemo as useMemo5 } from "react";
 import figlet from "figlet";
 import ansiShadow from "figlet/importable-fonts/ANSI Shadow.js";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 figlet.parseFont("ANSI Shadow", ansiShadow);
 function makeArt(text) {
   return figlet.textSync(text, { font: "ANSI Shadow" }).split("\n").filter((l) => l.trimEnd().length > 0).join("\n");
@@ -921,8 +858,8 @@ var ART_HEIGHT = 6;
 function useAnimation(duration = 1e3) {
   const isBrowser = typeof document !== "undefined";
   const [progress, setProgress] = useState8(isBrowser ? 0 : 1);
-  const startTime = useRef6(null);
-  useEffect3(() => {
+  const startTime = useRef5(null);
+  useEffect4(() => {
     if (!isBrowser) return;
     let raf;
     const tick = (time) => {
@@ -942,9 +879,9 @@ function RevealGradient({ children, revealCol }) {
   const gradientColors = GRADIENTS.instagram;
   const lines = children.split("\n");
   const maxLength = Math.max(...lines.map((l) => l.length));
-  if (maxLength === 0) return /* @__PURE__ */ jsx24("text", { children });
-  const hexColors = useMemo4(() => generateGradient(gradientColors, maxLength), [maxLength]);
-  return /* @__PURE__ */ jsx24("box", { position: "relative", width: maxLength, height: lines.length, shouldFill: false, children: lines.map((line, lineIndex) => {
+  if (maxLength === 0) return /* @__PURE__ */ jsx23("text", { children });
+  const hexColors = useMemo5(() => generateGradient(gradientColors, maxLength), [maxLength]);
+  return /* @__PURE__ */ jsx23("box", { position: "relative", width: maxLength, height: lines.length, shouldFill: false, children: lines.map((line, lineIndex) => {
     const runs = [];
     let current = null;
     for (let i = 0; i < line.length; i++) {
@@ -964,14 +901,14 @@ function RevealGradient({ children, revealCol }) {
       }
     }
     if (current) runs.push(current);
-    return runs.map((run, runIndex) => /* @__PURE__ */ jsx24(
+    return runs.map((run, runIndex) => /* @__PURE__ */ jsx23(
       "box",
       {
         position: "absolute",
         top: lineIndex,
         left: run.start,
         shouldFill: false,
-        children: /* @__PURE__ */ jsx24("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx23("text", { shouldFill: false, children: run.chars.map((char, ci) => /* @__PURE__ */ jsx23(
           "span",
           {
             style: { fg: hexColors[run.start + ci] },
@@ -993,20 +930,20 @@ function Logo({ compact, narrow, mobile }) {
   const maxWidth = compact ? 8 : narrow ? 40 : 62;
   const revealCol = Math.round(revealProgress * (maxWidth + 4)) - 2;
   const taglineOpacity = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));
-  const subtitle = /* @__PURE__ */ jsxs18(Fragment6, { children: [
-    /* @__PURE__ */ jsx24("text", { children: " " }),
-    /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
+  const subtitle = /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsx23("text", { children: " " }),
+    /* @__PURE__ */ jsx23("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs17("text", { style: textStyle({ fg: "#d4b0e8" }), opacity: taglineOpacity, wrapMode: "word", textAlign: "center", width: "100%", shouldFill: false, children: [
       "A framework for building terminal apps, built on ",
-      /* @__PURE__ */ jsx24("a", { href: "https://opentui.com", style: { attributes: 72, fg: "#d4b0e8" }, children: "OpenTUI" }),
+      /* @__PURE__ */ jsx23("a", { href: "https://opentui.com", style: { attributes: 72, fg: "#d4b0e8" }, children: "OpenTUI" }),
       " + React." + (mobile ? " " : "\n") + "(Gridland apps, like this website, work in the browser and terminal.)"
     ] }) })
   ] });
   if (!isBrowser) {
     const art = compact ? "gridland" : narrow ? gridArt + "\n" + landArt : fullArt;
-    return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", children: [
-      /* @__PURE__ */ jsx24(Gradient, { name: "instagram", children: art }),
-      /* @__PURE__ */ jsx24("text", { children: " " }),
-      /* @__PURE__ */ jsx24("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs18("text", { style: textStyle({ fg: "#d4b0e8" }), shouldFill: false, children: [
+    return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexShrink: 0, width: "100%", alignItems: "center", shouldFill: false, children: [
+      /* @__PURE__ */ jsx23(Gradient, { name: "instagram", children: art }),
+      /* @__PURE__ */ jsx23("text", { children: " " }),
+      /* @__PURE__ */ jsx23("box", { flexDirection: "column", alignItems: "center", width: "100%", shouldFill: false, children: /* @__PURE__ */ jsxs17("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.)"
@@ -1014,31 +951,31 @@ function Logo({ compact, narrow, mobile }) {
     ] });
   }
   if (compact) {
-    return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx24("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: "gridland" }) }) }),
+    return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx23("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx23("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx23(RevealGradient, { revealCol, children: "gridland" }) }) }),
       subtitle
     ] });
   }
   if (narrow) {
-    return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-      /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs18("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
-        /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: gridArt }),
-        /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: landArt })
+    return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+      /* @__PURE__ */ jsx23("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsxs17("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: [
+        /* @__PURE__ */ jsx23(RevealGradient, { revealCol, children: gridArt }),
+        /* @__PURE__ */ jsx23(RevealGradient, { revealCol, children: landArt })
       ] }) }),
       subtitle
     ] });
   }
-  return /* @__PURE__ */ jsxs18("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
-    /* @__PURE__ */ jsx24("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx24("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx24(RevealGradient, { revealCol, children: fullArt }) }) }),
+  return /* @__PURE__ */ jsxs17("box", { flexDirection: "column", flexShrink: 0, width: "100%", shouldFill: false, children: [
+    /* @__PURE__ */ jsx23("box", { height: artHeight, overflow: "hidden", position: "relative", width: "100%", flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx23("box", { position: "absolute", top: dropOffset, width: "100%", flexDirection: "column", alignItems: "center", shouldFill: false, children: /* @__PURE__ */ jsx23(RevealGradient, { revealCol, children: fullArt }) }) }),
     subtitle
   ] });
 }
 
-// ../docs/components/landing/matrix-background.tsx
-import { useMemo as useMemo5 } from "react";
+// src/landing/matrix-background.tsx
+import { useMemo as useMemo6 } from "react";
 
-// ../docs/components/landing/use-matrix.ts
-import { useState as useState9, useEffect as useEffect4, useRef as useRef7 } from "react";
+// src/landing/use-matrix.ts
+import { useState as useState9, useEffect as useEffect5, useRef as useRef6 } from "react";
 var CHARS = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*(){}[]|;:<>,.?/~`";
 function randomChar() {
   return CHARS[Math.floor(Math.random() * CHARS.length)];
@@ -1072,7 +1009,7 @@ function buildGrid(columns, width, height) {
   return { grid, brightness };
 }
 function useMatrix(width, height) {
-  const columnsRef = useRef7([]);
+  const columnsRef = useRef6([]);
   const [state, setState] = useState9(() => {
     const columns = Array.from(
       { length: width },
@@ -1081,7 +1018,7 @@ function useMatrix(width, height) {
     columnsRef.current = columns;
     return buildGrid(columns, width, height);
   });
-  useEffect4(() => {
+  useEffect5(() => {
     if (width < 2 || height < 2) return;
     const id = setInterval(() => {
       const columns = columnsRef.current;
@@ -1106,7 +1043,7 @@ function useMatrix(width, height) {
     }, 80);
     return () => clearInterval(id);
   }, [width, height]);
-  useEffect4(() => {
+  useEffect5(() => {
     columnsRef.current = Array.from(
       { length: width },
       () => Math.random() < 0.5 ? createDrop(height, true) : null
@@ -1116,8 +1053,8 @@ function useMatrix(width, height) {
   return state;
 }
 
-// ../docs/components/landing/matrix-background.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+// src/landing/matrix-background.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
 var MUTE_LEVELS = [0.12, 0.18, 0.24, 0.3, 0.38];
 var BG = hexToRgb("#1a1a2e");
 function buildMutedColors(baseHex) {
@@ -1136,23 +1073,23 @@ function colorForCell(mutedColors, b) {
 function MatrixBackground({ width, height, clearRect, clearRects }) {
   const { grid, brightness } = useMatrix(width, height);
   const theme = useTheme();
-  const columnColors = useMemo5(
+  const columnColors = useMemo6(
     () => width > 0 ? generateGradient([theme.accent, theme.secondary, theme.primary], width) : [],
     [width, theme.accent, theme.secondary, theme.primary]
   );
-  const columnMutedColors = useMemo5(
+  const columnMutedColors = useMemo6(
     () => columnColors.map(buildMutedColors),
     [columnColors]
   );
-  return /* @__PURE__ */ jsx25("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx25("text", { children: row.map((cell, x) => {
+  return /* @__PURE__ */ jsx24("box", { flexDirection: "column", children: grid.map((row, y) => /* @__PURE__ */ jsx24("text", { children: row.map((cell, x) => {
     const inClearRect = clearRect && y >= clearRect.top && y < clearRect.top + clearRect.height && x >= clearRect.left && x < clearRect.left + clearRect.width || clearRects && clearRects.some(
       (r) => y >= r.top && y < r.top + r.height && x >= r.left && x < r.left + r.width
     );
     const mutedColors = columnMutedColors[x];
     if (cell === " " || inClearRect || !mutedColors) {
-      return /* @__PURE__ */ jsx25("span", { children: " " }, x);
+      return /* @__PURE__ */ jsx24("span", { children: " " }, x);
     }
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx24(
       "span",
       {
         style: {
@@ -1165,84 +1102,48 @@ function MatrixBackground({ width, height, clearRect, clearRects }) {
   }) }, y)) });
 }
 
-// ../docs/components/landing/landing-app.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var DEMO_RESPONSES = [
-  "Gridland is a framework for building terminal apps with React. It works in both the browser and terminal!",
-  "You can get started with `bun create gridland` to scaffold a new project.",
-  "OpenTUI provides the layout primitives \u2014 flexbox, borders, text styling \u2014 while React handles the component model.",
-  "Yes! Gridland apps are universal \u2014 the same code renders in a terminal emulator and in the browser.",
-  "Check out the docs for examples of interactive components like inputs, selects, and tables."
-];
+// src/landing/landing-app.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function LandingApp({ useKeyboard }) {
   const theme = useTheme();
   const { width, height, isNarrow, isTiny, isMobile } = useBreakpoints();
-  const [showAbout, setShowAbout] = useState10(false);
-  const [messages, setMessages] = useState10([]);
-  const [chatStatus, setChatStatus] = useState10("ready");
-  const responseIdx = useRef8(0);
-  const handleChatSubmit = useCallback3(({ text }) => {
-    const userMsg = { id: `u-${Date.now()}`, role: "user", content: text };
-    setMessages((prev) => [...prev, userMsg]);
-    setChatStatus("streaming");
-    setTimeout(() => {
-      const response = DEMO_RESPONSES[responseIdx.current % DEMO_RESPONSES.length];
-      responseIdx.current += 1;
-      const assistantMsg = { id: `a-${Date.now()}`, role: "assistant", content: response };
-      setMessages((prev) => [...prev, assistantMsg]);
-      setChatStatus("ready");
-    }, 1200);
-  }, []);
-  useKeyboard((event) => {
-    if (event.name === "a" && !showAbout) {
-      setShowAbout(true);
-    }
-    if (event.name === "q" && showAbout) {
-      setShowAbout(false);
-    }
-  });
-  if (showAbout) {
-    return /* @__PURE__ */ jsxs19("box", { flexDirection: "column", width: "100%", height: "100%", children: [
-      /* @__PURE__ */ jsx26("box", { flexGrow: 1, children: /* @__PURE__ */ jsx26(AboutModal, { onClose: () => setShowAbout(false), useKeyboard }) }),
-      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "q", label: "close" }] })
-    ] });
-  }
   const isBrowser = typeof document !== "undefined";
-  const logoHeight = isTiny ? 2 : isNarrow ? 13 : 7;
-  const logoExtra = isBrowser ? 1 : 0;
-  const gap = isMobile ? 0 : 1;
-  const installLinksTop = 3 + logoHeight + logoExtra + gap;
-  const installLinksHeight = 3;
-  const boxTop = installLinksTop + installLinksHeight + gap + 1;
-  const boxHeight = height - boxTop - 1 - 1;
-  const clearRect = { top: boxTop, left: 1, width: width - 2, height: boxHeight };
-  const installLinksClearRect = { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight };
-  return /* @__PURE__ */ jsxs19("box", { width: "100%", height: "100%", position: "relative", children: [
-    /* @__PURE__ */ jsx26(MatrixBackground, { width, height, clearRect, clearRects: [installLinksClearRect] }),
-    /* @__PURE__ */ jsxs19("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false, children: [
-      /* @__PURE__ */ jsxs19("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
-        /* @__PURE__ */ jsx26("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx26(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
-        /* @__PURE__ */ jsxs19("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
-          /* @__PURE__ */ jsx26("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs19("text", { children: [
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ dim: true }), children: "$ " }),
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ bold: true }), children: "bunx " }),
-            /* @__PURE__ */ jsx26("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
-          ] }) }),
-          /* @__PURE__ */ jsx26(InstallBox, {}),
-          /* @__PURE__ */ jsx26(LinksBox, {})
-        ] }),
-        /* @__PURE__ */ jsxs19("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden", children: [
-          /* @__PURE__ */ jsx26("box", { flexGrow: 1, flexDirection: "column", paddingX: 1, overflow: "hidden", children: messages.map((msg) => /* @__PURE__ */ jsx26(Message, { role: msg.role, children: /* @__PURE__ */ jsx26(Message.Content, { children: /* @__PURE__ */ jsx26(Message.Text, { children: msg.content }) }) }, msg.id)) }),
-          /* @__PURE__ */ jsx26("box", { flexShrink: 0, paddingX: 1, paddingBottom: 0, children: /* @__PURE__ */ jsx26(PromptInput, { splaceholder: "Ask about Gridland...", status: chatStatus, onSubmit: handleChatSubmit, useKeyboard }) })
-        ] })
+  const { clearRect, installLinksClearRect } = useMemo7(() => {
+    const logoHeight = isTiny ? 2 : isNarrow ? 13 : 7;
+    const logoExtra = isBrowser ? 1 : 0;
+    const gap = isMobile ? 0 : 1;
+    const installLinksTop = 3 + logoHeight + logoExtra + gap;
+    const installLinksHeight = 3;
+    const boxTop = installLinksTop + installLinksHeight + gap + 1;
+    const bh = height - boxTop - 1;
+    return {
+      clearRect: { top: boxTop, left: 1, width: width - 2, height: bh },
+      installLinksClearRect: { top: installLinksTop, left: 1, width: width - 2, height: installLinksHeight }
+    };
+  }, [width, height, isTiny, isNarrow, isMobile, isBrowser]);
+  return /* @__PURE__ */ jsxs18("box", { width: "100%", height: "100%", position: "relative", children: [
+    /* @__PURE__ */ jsx25(MatrixBackground, { width, height, clearRect, clearRects: isBrowser ? void 0 : [installLinksClearRect] }),
+    /* @__PURE__ */ jsx25("box", { position: "absolute", top: 0, left: 0, width, height, zIndex: 1, flexDirection: "column", shouldFill: false, children: /* @__PURE__ */ jsxs18("box", { flexGrow: 1, flexDirection: "column", paddingTop: 3, paddingLeft: 1, paddingRight: 1, paddingBottom: 1, gap: isMobile ? 0 : 1, shouldFill: false, children: [
+      /* @__PURE__ */ jsx25("box", { flexShrink: 0, shouldFill: false, children: /* @__PURE__ */ jsx25(Logo, { compact: isTiny, narrow: isNarrow, mobile: isMobile }) }),
+      /* @__PURE__ */ jsxs18("box", { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: isMobile ? 0 : 1, flexShrink: 0, shouldFill: false, children: [
+        /* @__PURE__ */ jsx25("box", { border: true, borderStyle: "rounded", borderColor: theme.border, paddingX: 1, flexDirection: "column", flexShrink: 0, children: /* @__PURE__ */ jsxs18("text", { children: [
+          /* @__PURE__ */ jsx25("span", { style: textStyle({ dim: true }), children: "$ " }),
+          /* @__PURE__ */ jsx25("span", { style: textStyle({ bold: true }), children: "bunx " }),
+          /* @__PURE__ */ jsx25("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
+        ] }) }),
+        /* @__PURE__ */ jsx25(InstallBox, {}),
+        /* @__PURE__ */ jsx25(LinksBox, {})
       ] }),
-      /* @__PURE__ */ jsx26(StatusBar, { items: [{ key: "a", label: "about" }] })
-    ] })
+      /* @__PURE__ */ jsx25("box", { flexGrow: 1, border: true, borderStyle: "rounded", borderColor: theme.border, flexDirection: "column", overflow: "hidden" })
+    ] }) })
   ] });
 }
 
-// ../docs/components/landing/matrix-rain.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+// src/landing/matrix-rain.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+
+// src/landing/about-modal.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 export {
   LandingApp
 };