@alcyone-labs/arg-parser 2.13.1 → 2.13.3

package/dist/tui.cjs

@@ -0,0 +1,1137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const solid = require("@opentui/solid");
+const solidJs = require("solid-js");
+const EXIT_GUARD_STATE_KEY = /* @__PURE__ */ Symbol.for(
+  "@alcyone-labs/arg-parser/tui/ExitGuardState"
+);
+function getExitGuardState() {
+  return process[EXIT_GUARD_STATE_KEY];
+}
+function setExitGuardState(state) {
+  if (state) {
+    process[EXIT_GUARD_STATE_KEY] = state;
+  } else {
+    delete process[EXIT_GUARD_STATE_KEY];
+  }
+}
+function ExitGuard(props) {
+  const renderer = solid.useRenderer();
+  let state = getExitGuardState();
+  if (!state) {
+    const originalExit = process.exit.bind(process);
+    state = {
+      originalExit,
+      renderers: /* @__PURE__ */ new Set(),
+      activeCount: 0,
+      isExiting: false
+    };
+    setExitGuardState(state);
+    const guardedExit = ((code) => {
+      const currentState = getExitGuardState();
+      if (!currentState) {
+        return originalExit(code);
+      }
+      if (currentState.isExiting) {
+        return currentState.originalExit(code);
+      }
+      currentState.isExiting = true;
+      try {
+        if (typeof code === "number") {
+          process.exitCode = code;
+        }
+        for (const r of currentState.renderers) {
+          try {
+            r.destroy();
+          } catch {
+          }
+        }
+      } finally {
+        return currentState.originalExit(code);
+      }
+    });
+    process.exit = guardedExit;
+  }
+  state.activeCount++;
+  state.renderers.add(renderer);
+  solidJs.onCleanup(() => {
+    const state2 = getExitGuardState();
+    if (!state2) {
+      return;
+    }
+    state2.renderers.delete(renderer);
+    state2.activeCount = Math.max(0, state2.activeCount - 1);
+    if (state2.activeCount === 0) {
+      process.exit = state2.originalExit;
+      setExitGuardState(void 0);
+    }
+  });
+  return props.children;
+}
+const ShortcutContext = solidJs.createContext();
+function ShortcutProvider(props) {
+  const [registeredBindings, setRegisteredBindings] = solidJs.createSignal(props.bindings ?? []);
+  const [pending, setPending] = solidJs.createSignal(null);
+  const register = (binding) => {
+    setRegisteredBindings((prev) => [...prev, binding]);
+    return () => {
+      setRegisteredBindings((prev) => prev.filter((b) => b !== binding));
+    };
+  };
+  const value = {
+    register,
+    pending,
+    bindings: registeredBindings
+  };
+  return solid.createComponent(ShortcutContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useShortcuts() {
+  const context = solidJs.useContext(ShortcutContext);
+  if (!context) {
+    throw new Error("useShortcuts must be used within a ShortcutProvider");
+  }
+  return context;
+}
+const TuiThemes = {
+  dark: {
+    name: "dark",
+    colors: {
+      text: "#ffffff",
+      muted: "#888888",
+      background: "#1a1a1a",
+      accent: "#00d4ff",
+      success: "#00ff88",
+      warning: "#ffaa00",
+      error: "#ff4444",
+      border: "#444444",
+      selection: "#0066cc"
+    }
+  },
+  light: {
+    name: "light",
+    colors: {
+      text: "#000000",
+      // Black text for readability
+      muted: "#333333",
+      // Dark gray muted
+      background: "#e8e8e8",
+      // Light gray background
+      accent: "#0044aa",
+      // Deep blue accent
+      success: "#005500",
+      // Dark green
+      warning: "#885500",
+      // Dark orange
+      error: "#880000",
+      // Dark red
+      border: "#888888",
+      selection: "#0044aa"
+    }
+  },
+  monokai: {
+    name: "monokai",
+    colors: {
+      text: "#f8f8f2",
+      muted: "#75715e",
+      background: "#272822",
+      accent: "#ae81ff",
+      success: "#a6e22e",
+      warning: "#e6db74",
+      error: "#f92672",
+      border: "#49483e",
+      selection: "#49483e"
+    }
+  },
+  dracula: {
+    name: "dracula",
+    colors: {
+      text: "#f8f8f2",
+      muted: "#6272a4",
+      background: "#282a36",
+      accent: "#bd93f9",
+      success: "#50fa7b",
+      warning: "#f1fa8c",
+      error: "#ff5555",
+      border: "#44475a",
+      selection: "#44475a"
+    }
+  },
+  nord: {
+    name: "nord",
+    colors: {
+      text: "#eceff4",
+      muted: "#4c566a",
+      background: "#2e3440",
+      accent: "#88c0d0",
+      success: "#a3be8c",
+      warning: "#ebcb8b",
+      error: "#bf616a",
+      border: "#3b4252",
+      selection: "#4c566a"
+    }
+  },
+  solarized: {
+    name: "solarized",
+    colors: {
+      text: "#839496",
+      muted: "#586e75",
+      background: "#002b36",
+      accent: "#268bd2",
+      success: "#859900",
+      warning: "#b58900",
+      error: "#dc322f",
+      border: "#073642",
+      selection: "#073642"
+    }
+  }
+};
+const THEMES = TuiThemes;
+const Theme = {
+  /**
+   * Start building a theme from an existing base theme.
+   */
+  from: (base) => ({
+    /**
+     * Extend the base theme with overrides.
+     * Color overrides are shallow-merged with the base colors.
+     */
+    extend: (overrides) => ({
+      name: overrides.name ?? `${base.name}-extended`,
+      colors: { ...base.colors, ...overrides.colors }
+    })
+  }),
+  /**
+   * Create a new theme from scratch.
+   */
+  create: (theme) => theme,
+  /**
+   * Get all available theme names.
+   */
+  names: () => Object.keys(TuiThemes),
+  /**
+   * Get a theme by name, with fallback to dark theme.
+   */
+  get: (name) => TuiThemes[name] ?? TuiThemes["dark"]
+};
+const ThemeContext = solidJs.createContext();
+function ThemeProvider(props) {
+  const themes = { ...TuiThemes };
+  const initialTheme = themes[props.initial ?? "dark"] ?? themes["dark"];
+  const [current, setCurrent] = solidJs.createSignal(initialTheme);
+  const setTheme = (name) => {
+    if (themes[name]) {
+      setCurrent(themes[name]);
+    }
+  };
+  const cycle = () => {
+    const currentName = current().name;
+    const names2 = Object.keys(themes);
+    const currentIndex = names2.indexOf(currentName);
+    const nextIndex = (currentIndex + 1) % names2.length;
+    setCurrent(themes[names2[nextIndex]]);
+  };
+  const register = (theme) => {
+    themes[theme.name] = theme;
+  };
+  const names = () => Object.keys(themes);
+  const value = {
+    current,
+    setTheme,
+    cycle,
+    register,
+    names
+  };
+  return solid.createComponent(ThemeContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useTheme() {
+  const context = solidJs.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+const ToastContext = solidJs.createContext();
+const DEFAULT_DURATION = 3e3;
+function ToastProvider(props) {
+  const [state, setState] = solidJs.createSignal({
+    message: "",
+    type: "info",
+    visible: false
+  });
+  let hideTimeout = null;
+  const show = (message, type, duration) => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    setState({ message, type, visible: true });
+    hideTimeout = setTimeout(() => {
+      setState((prev) => ({ ...prev, visible: false }));
+    }, duration);
+  };
+  const hide = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+      hideTimeout = null;
+    }
+    setState((prev) => ({ ...prev, visible: false }));
+  };
+  const value = {
+    info: (message, duration = DEFAULT_DURATION) => show(message, "info", duration),
+    success: (message, duration = DEFAULT_DURATION) => show(message, "success", duration),
+    error: (message, duration = DEFAULT_DURATION) => show(message, "error", duration),
+    warning: (message, duration = DEFAULT_DURATION) => show(message, "warning", duration),
+    state,
+    hide
+  };
+  return solid.createComponent(ToastContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useToast() {
+  const context = solidJs.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+function createTuiApp(App, config = {}) {
+  const { theme = "dark", shortcuts = [], onDestroy } = config;
+  return solid.render(
+    () => solid.createComponent(ExitGuard, {
+      get children() {
+        return solid.createComponent(ThemeProvider, {
+          get initial() {
+            return theme;
+          },
+          get children() {
+            return solid.createComponent(ShortcutProvider, {
+              get bindings() {
+                return shortcuts;
+              },
+              get children() {
+                return solid.createComponent(ToastProvider, {
+                  get children() {
+                    return solid.createComponent(App, {});
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    }),
+    { onDestroy }
+  );
+}
+const TuiContext = solidJs.createContext();
+function useTui() {
+  const context = solidJs.useContext(TuiContext);
+  if (!context) {
+    throw new Error("useTui must be used within a TuiProvider");
+  }
+  return context;
+}
+function TuiProvider(props) {
+  const renderer = solid.useRenderer();
+  const reservedRows = props.reservedRows ?? 8;
+  const scrollSpeed = props.scrollSpeed ?? 3;
+  const [viewportHeight, setViewportHeight] = solidJs.createSignal(
+    Math.max(10, renderer.height - reservedRows)
+  );
+  const [viewportWidth, setViewportWidth] = solidJs.createSignal(renderer.width);
+  const exit = (code = 0) => {
+    process.exitCode = code;
+    renderer.destroy();
+  };
+  const handleResize = (width, height) => {
+    setViewportHeight(Math.max(10, height - reservedRows));
+    setViewportWidth(width);
+  };
+  const handleMouseScroll = (event) => {
+    if (!props.onScroll || !event.scroll) {
+      return;
+    }
+    const sign = event.scroll.direction === "up" ? -1 : event.scroll.direction === "down" ? 1 : 0;
+    if (sign === 0) {
+      return;
+    }
+    const delta = event.scroll.delta || 1;
+    props.onScroll(sign * delta * scrollSpeed);
+  };
+  solidJs.onMount(() => {
+    renderer.on("resize", handleResize);
+  });
+  solidJs.onCleanup(() => {
+    renderer.off("resize", handleResize);
+  });
+  const contextValue = {
+    viewportHeight,
+    viewportWidth,
+    exit
+  };
+  const themeName = typeof props.theme === "string" ? props.theme : props.theme?.name ?? "dark";
+  return solid.createComponent(ExitGuard, {
+    get children() {
+      return solid.createComponent(TuiContext.Provider, {
+        value: contextValue,
+        get children() {
+          return solid.createComponent(ThemeProvider, {
+            initial: themeName,
+            get children() {
+              return solid.createComponent(ShortcutProvider, {
+                get bindings() {
+                  return props.shortcuts ?? [];
+                },
+                get children() {
+                  return solid.createComponent(ToastProvider, {
+                    get children() {
+                      return /* @__PURE__ */ React.createElement(
+                        "box",
+                        {
+                          width: "100%",
+                          height: "100%",
+                          onMouseScroll: handleMouseScroll
+                        },
+                        props.children
+                      );
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function Breadcrumb(props) {
+  const { current: theme } = useTheme();
+  const separator = props.separator ?? "›";
+  const accentColor = () => props.accentColor ?? theme().colors.accent;
+  const mutedColor = () => props.mutedColor ?? theme().colors.muted;
+  return /* @__PURE__ */ React.createElement("box", { height: 1, paddingLeft: 2 }, /* @__PURE__ */ React.createElement(solidJs.For, { each: props.segments }, (segment, idx) => /* @__PURE__ */ React.createElement(React.Fragment, null, idx() > 0 && /* @__PURE__ */ React.createElement("text", { color: mutedColor() }, " ", separator, " "), /* @__PURE__ */ React.createElement("text", { color: accentColor(), bold: true }, segment))));
+}
+function unwrap(value) {
+  return typeof value === "function" ? value() : value;
+}
+function VirtualList(props) {
+  const { current: theme } = useTheme();
+  const [scrollOffset, setScrollOffset] = solidJs.createSignal(0);
+  const items = () => unwrap(props.items);
+  const selectedIndex = () => unwrap(props.selectedIndex);
+  const viewportHeight = () => unwrap(props.viewportHeight ?? 20);
+  const showIndicator = props.showIndicator ?? true;
+  const visibleItems = solidJs.createMemo(() => {
+    const allItems = items();
+    const vh = viewportHeight();
+    const start = scrollOffset();
+    const end = Math.min(start + vh, allItems.length);
+    return allItems.slice(start, end).map((item, localIdx) => ({
+      item,
+      globalIndex: start + localIdx
+    }));
+  });
+  const defaultRenderItem = (item, index, selected) => {
+    const label = props.getLabel ? props.getLabel(item) : String(item);
+    const t = theme();
+    return /* @__PURE__ */ React.createElement(
+      "box",
+      {
+        height: 1,
+        backgroundColor: selected ? t.colors.selection : void 0
+      },
+      /* @__PURE__ */ React.createElement("text", { color: selected ? t.colors.background : t.colors.text }, showIndicator ? selected ? "› " : "  " : "", label)
+    );
+  };
+  const renderItem = props.renderItem ?? defaultRenderItem;
+  return /* @__PURE__ */ React.createElement("box", { flexDirection: "column", flexGrow: 1 }, /* @__PURE__ */ React.createElement(solidJs.Show, { when: props.title }, /* @__PURE__ */ React.createElement("text", { bold: true, color: theme().colors.text, marginBottom: 1 }, props.title, " (", selectedIndex() + 1, "/", items().length, ")")), /* @__PURE__ */ React.createElement(solidJs.For, { each: visibleItems() }, ({ item, globalIndex }) => renderItem(item, globalIndex, globalIndex === selectedIndex())));
+}
+function createVirtualListController(items, selectedIndex, setSelectedIndex, viewportHeight) {
+  const [scrollOffset, setScrollOffset] = solidJs.createSignal(0);
+  const adjustScroll = (newIdx) => {
+    const vh = viewportHeight();
+    const currentOffset = scrollOffset();
+    if (newIdx < currentOffset) {
+      setScrollOffset(newIdx);
+    } else if (newIdx >= currentOffset + vh) {
+      setScrollOffset(newIdx - vh + 1);
+    }
+  };
+  const scrollBy = (delta) => {
+    const maxOffset = Math.max(0, items().length - viewportHeight());
+    setScrollOffset((o) => Math.max(0, Math.min(maxOffset, o + delta)));
+  };
+  const selectPrevious = () => {
+    const newIdx = Math.max(0, selectedIndex() - 1);
+    setSelectedIndex(newIdx);
+    adjustScroll(newIdx);
+  };
+  const selectNext = () => {
+    const newIdx = Math.min(items().length - 1, selectedIndex() + 1);
+    setSelectedIndex(newIdx);
+    adjustScroll(newIdx);
+  };
+  return { scrollOffset, adjustScroll, scrollBy, selectPrevious, selectNext };
+}
+function MasterDetail(props) {
+  const { current: theme } = useTheme();
+  const masterWidth = props.masterWidth ?? "35%";
+  return /* @__PURE__ */ React.createElement(
+    "box",
+    {
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: theme().colors.background
+    },
+    /* @__PURE__ */ React.createElement(
+      "box",
+      {
+        height: 3,
+        borderStyle: "single",
+        borderColor: theme().colors.accent,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement("text", { bold: true, color: theme().colors.accent }, props.headerIcon ? ` ${props.headerIcon} ` : " ", props.header, " ")
+    ),
+    /* @__PURE__ */ React.createElement(solidJs.Show, { when: props.breadcrumb && props.breadcrumb.length > 0 }, /* @__PURE__ */ React.createElement(Breadcrumb, { segments: props.breadcrumb })),
+    /* @__PURE__ */ React.createElement("box", { flexGrow: 1, flexDirection: "row" }, /* @__PURE__ */ React.createElement(
+      "box",
+      {
+        width: masterWidth,
+        borderStyle: "single",
+        borderColor: theme().colors.border,
+        flexDirection: "column",
+        padding: 1
+      },
+      props.master
+    ), /* @__PURE__ */ React.createElement(
+      "box",
+      {
+        flexGrow: 1,
+        borderStyle: "single",
+        borderColor: theme().colors.border,
+        flexDirection: "column",
+        padding: 2
+      },
+      props.detail
+    )),
+    /* @__PURE__ */ React.createElement(solidJs.Show, { when: props.footer }, /* @__PURE__ */ React.createElement("box", { height: 1, backgroundColor: theme().colors.background }, /* @__PURE__ */ React.createElement("text", { color: theme().colors.muted }, " ", props.footer)))
+  );
+}
+function parseWidth(width) {
+  if (width === void 0) return "30%";
+  if (typeof width === "number") return width;
+  if (width.endsWith("%")) {
+    const percent = parseInt(width.replace("%", ""), 10);
+    return `${percent}%`;
+  }
+  return width;
+}
+function MasterDetailLayout$1(props) {
+  const masterWidth = parseWidth(props.masterWidth);
+  const gap = props.gap ?? 1;
+  const showDivider = props.showDivider ?? true;
+  return {
+    type: "box",
+    props: {
+      flexDirection: "row",
+      width: "100%",
+      height: "100%"
+    },
+    children: [
+      // Master panel
+      {
+        type: "box",
+        props: {
+          flexBasis: masterWidth,
+          flexShrink: 0,
+          overflow: "scroll"
+        },
+        children: props.master
+      },
+      // Divider (optional)
+      ...showDivider ? [
+        {
+          type: "box",
+          props: {
+            width: 1,
+            marginLeft: Math.floor(gap / 2),
+            marginRight: Math.ceil(gap / 2)
+          },
+          children: {
+            type: "text",
+            props: {
+              style: { fg: "#444444" }
+            },
+            children: "│".repeat(100)
+            // Repeating for height
+          }
+        }
+      ] : [],
+      // Detail panel
+      {
+        type: "box",
+        props: {
+          flexGrow: 1,
+          overflow: "scroll"
+        },
+        children: props.detail
+      }
+    ]
+  };
+}
+function DrillDownNavigator(props) {
+  const [stack, setStack] = solidJs.createSignal([]);
+  const push = (view) => {
+    setStack((prev) => [...prev, view]);
+    props.onNavigate?.(stack().length + 1);
+  };
+  const pop = () => {
+    if (stack().length > 0) {
+      setStack((prev) => prev.slice(0, -1));
+      props.onNavigate?.(stack().length - 1);
+    }
+  };
+  const replace = (view) => {
+    if (stack().length > 0) {
+      setStack((prev) => [...prev.slice(0, -1), view]);
+    } else {
+      push(view);
+    }
+  };
+  const reset = () => {
+    setStack([]);
+    props.onNavigate?.(0);
+  };
+  const depth = () => stack().length;
+  const canGoBack = () => stack().length > 0;
+  const api = {
+    push,
+    pop,
+    replace,
+    reset,
+    depth,
+    canGoBack
+  };
+  const currentView = () => {
+    const currentStack = stack();
+    if (currentStack.length > 0) {
+      return currentStack[currentStack.length - 1]();
+    }
+    return props.children(api);
+  };
+  return {
+    type: "box",
+    props: {
+      width: "100%",
+      height: "100%",
+      onKeyDown: (event) => {
+        if (event.defaultPrevented) return;
+        if ((event.key === "Escape" || event.key === "ArrowLeft") && canGoBack()) {
+          pop();
+        }
+      }
+    },
+    children: currentView()
+  };
+}
+function Card(props) {
+  const borderStyle = props.borderStyle ?? "single";
+  const padding = props.padding ?? 1;
+  let borderColor = props.borderColor;
+  if (!borderColor) {
+    try {
+      const { current } = useTheme();
+      borderColor = current().colors.border;
+    } catch {
+      borderColor = "#444444";
+    }
+  }
+  return {
+    type: "box",
+    props: {
+      flexDirection: "column",
+      width: props.width,
+      height: props.height,
+      ...props.onClick && { onMouseDown: props.onClick },
+      style: {
+        border: borderStyle !== "none" ? borderStyle : void 0,
+        borderColor,
+        padding
+      }
+    },
+    children: [
+      // Title row (if provided)
+      ...props.title ? [
+        {
+          type: "text",
+          props: {
+            style: { bold: true }
+          },
+          children: ` ${props.title} `
+        }
+      ] : [],
+      // Content
+      props.children
+    ]
+  };
+}
+function formatValue(value, format, currency) {
+  if (typeof value === "string") return value;
+  switch (format) {
+    case "compact":
+      if (value >= 1e9)
+        return `${(value / 1e9).toFixed(1)}B`;
+      if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+      if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+      return value.toString();
+    case "percent":
+      return `${(value * 100).toFixed(1)}%`;
+    case "currency":
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: currency ?? "USD",
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2
+      }).format(value);
+    case "number":
+    default:
+      return new Intl.NumberFormat("en-US").format(value);
+  }
+}
+function getTrendIndicator(trend) {
+  switch (trend) {
+    case "up":
+      return { symbol: "▲", color: "#00ff88" };
+    case "down":
+      return { symbol: "▼", color: "#ff4444" };
+    case "neutral":
+    default:
+      return { symbol: "─", color: "#888888" };
+  }
+}
+function StatCard(props) {
+  const formattedValue = formatValue(
+    props.value,
+    props.format ?? "number",
+    props.currency
+  );
+  const trendIndicator = props.trend ? getTrendIndicator(props.trend) : null;
+  return {
+    type: "box",
+    props: {
+      flexDirection: "column",
+      width: props.width,
+      padding: 1,
+      style: {
+        border: "single"
+      },
+      ...props.onClick && { onMouseDown: props.onClick }
+    },
+    children: [
+      // Label
+      {
+        type: "text",
+        props: {
+          style: { fg: "#888888" }
+        },
+        children: props.label
+      },
+      // Value with optional trend
+      {
+        type: "box",
+        props: {
+          flexDirection: "row",
+          gap: 1
+        },
+        children: [
+          {
+            type: "text",
+            props: {
+              style: { bold: true, fg: "#ffffff" }
+            },
+            children: formattedValue
+          },
+          ...trendIndicator ? [
+            {
+              type: "text",
+              props: {
+                style: { fg: trendIndicator.color }
+              },
+              children: trendIndicator.symbol
+            }
+          ] : []
+        ]
+      }
+    ]
+  };
+}
+function MarkdownBlock(props) {
+  const { current } = useTheme();
+  return {
+    type: "box",
+    props: {
+      flexDirection: "column",
+      width: props.width ?? "100%",
+      height: props.height,
+      padding: props.padding ?? 0,
+      overflow: "scroll"
+    },
+    children: [
+      {
+        type: "text",
+        props: {
+          style: {
+            fg: current().colors.text
+          },
+          text: props.content
+        }
+      }
+    ]
+  };
+}
+function Button(props) {
+  const { current } = useTheme();
+  const [isHovered, setIsHovered] = solidJs.createSignal(false);
+  const [isPressed, setIsPressed] = solidJs.createSignal(false);
+  const getBackgroundColor = () => {
+    if (props.disabled) return current().colors.muted;
+    switch (props.variant) {
+      case "danger":
+        return isPressed() ? "#bd2c00" : isHovered() ? "#c82829" : current().colors.error;
+      case "primary":
+      default:
+        return isPressed() ? current().colors.selection : isHovered() ? current().colors.accent : current().colors.accent;
+    }
+  };
+  const getTextColor = () => {
+    if (props.disabled) return current().colors.background;
+    return props.variant === "primary" || props.variant === "danger" ? "#ffffff" : current().colors.text;
+  };
+  return {
+    type: "box",
+    props: {
+      width: props.width,
+      height: 3,
+      // Standard button height with border
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      style: {
+        border: "single",
+        borderColor: isHovered() && !props.disabled ? current().colors.text : current().colors.border,
+        bg: getBackgroundColor()
+      },
+      // Event handlers
+      onMouseOver: () => !props.disabled && setIsHovered(true),
+      onMouseOut: () => {
+        setIsHovered(false);
+        setIsPressed(false);
+      },
+      onMouseDown: () => !props.disabled && setIsPressed(true),
+      onMouseUp: () => {
+        if (!props.disabled && isPressed()) {
+          setIsPressed(false);
+          props.onClick?.();
+        }
+      }
+    },
+    children: [
+      {
+        type: "text",
+        props: {
+          style: {
+            fg: getTextColor(),
+            bold: true
+          },
+          text: ` ${props.label} `
+        }
+      }
+    ]
+  };
+}
+const LAYOUT_THEMES = {
+  dark: {
+    bg: "#0d0d0d",
+    fg: "#f5f5f5",
+    accent: "#00d4ff",
+    muted: "#999999",
+    error: "#ff4444",
+    success: "#44ff44",
+    border: "#444444",
+    selection: "#00d4ff",
+    selectionFg: "#000000"
+  },
+  light: {
+    bg: "#e8e8e8",
+    fg: "#000000",
+    accent: "#0044aa",
+    muted: "#333333",
+    error: "#880000",
+    success: "#005500",
+    border: "#888888",
+    selection: "#0044aa",
+    selectionFg: "#ffffff"
+  },
+  monokai: {
+    bg: "#272822",
+    fg: "#f8f8f2",
+    accent: "#a6e22e",
+    muted: "#75715e",
+    error: "#f92672",
+    success: "#a6e22e",
+    border: "#49483e",
+    selection: "#a6e22e",
+    selectionFg: "#272822"
+  }
+};
+function resolveTheme(theme) {
+  if (!theme) return LAYOUT_THEMES.dark;
+  if (typeof theme === "string")
+    return LAYOUT_THEMES[theme] ?? LAYOUT_THEMES.dark;
+  return theme;
+}
+function MasterDetailLayout(props) {
+  const t = resolveTheme(props.theme);
+  props.masterWidth ?? "35%";
+  return /* @__PURE__ */ React.createElement(
+    "box",
+    {
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: t.bg
+    },
+    /* @__PURE__ */ React.createElement(
+      "box",
+      {
+        height: 3,
+        borderStyle: "single",
+        borderColor: t.accent,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React.createElement("text", { bold: true, color: t.accent }, " ", props.header, " ")
+    ),
+    props.breadcrumb && props.breadcrumb.length > 0 && /* @__PURE__ */ React.createElement("box", { height: 1, paddingLeft: 2, backgroundColor: t.bg }, props.breadcrumb.map((segment, idx) => /* @__PURE__ */ React.createElement(React.Fragment, null, idx > 0 && /* @__PURE__ */ React.createElement("text", { color: t.muted }, " › "), /* @__PURE__ */ React.createElement("text", { color: t.accent, bold: true }, segment)))),
+    /* @__PURE__ */ React.createElement("box", { flexGrow: 1, flexDirection: "row" }, props.children),
+    props.footer && /* @__PURE__ */ React.createElement("box", { height: 1, backgroundColor: t.bg }, /* @__PURE__ */ React.createElement("text", { color: t.muted }, " ", props.footer))
+  );
+}
+function MasterPanel(props) {
+  const t = resolveTheme(props.theme);
+  return /* @__PURE__ */ React.createElement(
+    "box",
+    {
+      width: props.width ?? "35%",
+      borderStyle: "single",
+      borderColor: t.border,
+      flexDirection: "column",
+      padding: 1
+    },
+    props.children
+  );
+}
+function DetailPanel(props) {
+  const t = resolveTheme(props.theme);
+  return /* @__PURE__ */ React.createElement(
+    "box",
+    {
+      flexGrow: 1,
+      borderStyle: "single",
+      borderColor: t.border,
+      flexDirection: "column",
+      padding: 2
+    },
+    props.children
+  );
+}
+function ListItem(props) {
+  const t = resolveTheme(props.theme);
+  return /* @__PURE__ */ React.createElement("box", { height: 1, backgroundColor: props.selected ? t.selection : void 0 }, /* @__PURE__ */ React.createElement("text", { color: props.selected ? t.selectionFg : t.fg }, props.selected ? "› " : "  ", props.label));
+}
+function useVirtualScroll(items, _selectedIdx, viewportHeight) {
+  const [scrollOffset, setScrollOffset] = solidJs.createSignal(0);
+  const adjustScroll = (newIdx) => {
+    const vh = viewportHeight();
+    const currentOffset = scrollOffset();
+    if (newIdx < currentOffset) {
+      setScrollOffset(newIdx);
+    } else if (newIdx >= currentOffset + vh) {
+      setScrollOffset(newIdx - vh + 1);
+    }
+  };
+  const visibleItems = solidJs.createMemo(() => {
+    const allItems = items();
+    const vh = viewportHeight();
+    const start = scrollOffset();
+    const end = Math.min(start + vh, allItems.length);
+    return allItems.slice(start, end).map((item, localIdx) => ({
+      item,
+      globalIndex: start + localIdx
+    }));
+  });
+  const scrollBy = (delta) => {
+    const maxOffset = Math.max(0, items().length - viewportHeight());
+    setScrollOffset((o) => Math.max(0, Math.min(maxOffset, o + delta)));
+  };
+  return { visibleItems, adjustScroll, scrollOffset, scrollBy };
+}
+function getViewportHeight(reservedRows = 8, minHeight = 10) {
+  return Math.max(minHeight, (process.stdout.rows || 24) - reservedRows);
+}
+function enableMouseReporting() {
+  process.stdout.write("\x1B[?1000h");
+  process.stdout.write("\x1B[?1006h");
+}
+function disableMouseReporting() {
+  process.stdout.write("\x1B[?1000l");
+  process.stdout.write("\x1B[?1002l");
+  process.stdout.write("\x1B[?1003l");
+  process.stdout.write("\x1B[?1006l");
+  process.stdout.write("\x1B[?1015l");
+}
+function clearScreen() {
+  process.stdout.write("\x1B[2J\x1B[3J\x1B[H");
+}
+function resetAttributes() {
+  process.stdout.write("\x1B[0m");
+}
+function restoreStdin() {
+  if (process.stdin.isTTY && process.stdin.setRawMode) {
+    try {
+      process.stdin.setRawMode(false);
+    } catch {
+    }
+  }
+}
+function switchToMainScreen() {
+  process.stdout.write("\x1B[?1049l");
+}
+function cleanupTerminal() {
+  switchToMainScreen();
+  disableMouseReporting();
+  clearScreen();
+  resetAttributes();
+  restoreStdin();
+}
+function parseMouseScroll(data) {
+  const str = data.toString();
+  const sgrMatch = str.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+  if (sgrMatch) {
+    const button = parseInt(sgrMatch[1], 10);
+    if (button === 64) return -1;
+    if (button === 65) return 1;
+  }
+  return 0;
+}
+function useMouse(options = {}) {
+  const { onScroll, scrollSpeed = 3 } = options;
+  const handleInput = (data) => {
+    const scrollDir = parseMouseScroll(data);
+    if (scrollDir !== 0 && onScroll) {
+      onScroll(scrollDir * scrollSpeed);
+    }
+  };
+  solidJs.onMount(() => {
+    enableMouseReporting();
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+    }
+    process.stdin.on("data", handleInput);
+  });
+  solidJs.onCleanup(() => {
+    disableMouseReporting();
+    process.stdin.off("data", handleInput);
+  });
+}
+Object.defineProperty(exports, "createComponent", {
+  enumerable: true,
+  get: () => solid.createComponent
+});
+Object.defineProperty(exports, "effect", {
+  enumerable: true,
+  get: () => solid.effect
+});
+Object.defineProperty(exports, "insert", {
+  enumerable: true,
+  get: () => solid.insert
+});
+Object.defineProperty(exports, "memo", {
+  enumerable: true,
+  get: () => solid.memo
+});
+Object.defineProperty(exports, "mergeProps", {
+  enumerable: true,
+  get: () => solid.mergeProps
+});
+Object.defineProperty(exports, "render", {
+  enumerable: true,
+  get: () => solid.render
+});
+Object.defineProperty(exports, "spread", {
+  enumerable: true,
+  get: () => solid.spread
+});
+Object.defineProperty(exports, "useKeyboard", {
+  enumerable: true,
+  get: () => solid.useKeyboard
+});
+Object.defineProperty(exports, "useRenderer", {
+  enumerable: true,
+  get: () => solid.useRenderer
+});
+exports.Breadcrumb = Breadcrumb;
+exports.Button = Button;
+exports.Card = Card;
+exports.DetailPanel = DetailPanel;
+exports.DrillDownNavigator = DrillDownNavigator;
+exports.LAYOUT_THEMES = LAYOUT_THEMES;
+exports.ListItem = ListItem;
+exports.MarkdownBlock = MarkdownBlock;
+exports.MasterDetail = MasterDetail;
+exports.MasterDetailLayout = MasterDetailLayout$1;
+exports.MasterDetailTemplate = MasterDetailLayout;
+exports.MasterPanel = MasterPanel;
+exports.ShortcutProvider = ShortcutProvider;
+exports.StatCard = StatCard;
+exports.THEMES = THEMES;
+exports.Theme = Theme;
+exports.ThemeProvider = ThemeProvider;
+exports.ToastProvider = ToastProvider;
+exports.TuiProvider = TuiProvider;
+exports.TuiThemes = TuiThemes;
+exports.VirtualList = VirtualList;
+exports.cleanupTerminal = cleanupTerminal;
+exports.clearScreen = clearScreen;
+exports.createTuiApp = createTuiApp;
+exports.createVirtualListController = createVirtualListController;
+exports.disableMouseReporting = disableMouseReporting;
+exports.enableMouseReporting = enableMouseReporting;
+exports.getViewportHeight = getViewportHeight;
+exports.parseMouseScroll = parseMouseScroll;
+exports.resetAttributes = resetAttributes;
+exports.restoreStdin = restoreStdin;
+exports.useMouse = useMouse;
+exports.useShortcuts = useShortcuts;
+exports.useTheme = useTheme;
+exports.useToast = useToast;
+exports.useTui = useTui;
+exports.useVirtualScroll = useVirtualScroll;
+//# sourceMappingURL=tui.cjs.map