@alcyone-labs/arg-parser 2.13.4 → 2.13.5

package/dist/tui.cjs

@@ -1,1043 +1,968 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const solid = require("@opentui/solid");
-const solidJs = require("solid-js");
-const web = require("solid-js/web");
-const EXIT_GUARD_STATE_KEY = /* @__PURE__ */ Symbol.for("@alcyone-labs/arg-parser/tui/ExitGuardState");
+let __opentui_solid = require("@opentui/solid");
+let solid_js = require("solid-js");
+let solid_js_web = require("solid-js/web");
+var EXIT_GUARD_STATE_KEY = Symbol.for("@alcyone-labs/arg-parser/tui/ExitGuardState");
 function getExitGuardState() {
-  return process[EXIT_GUARD_STATE_KEY];
+	return process[EXIT_GUARD_STATE_KEY];
 }
 function setExitGuardState(state) {
-  if (state) {
-    process[EXIT_GUARD_STATE_KEY] = state;
-  } else {
-    delete process[EXIT_GUARD_STATE_KEY];
-  }
+	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 renderer = (0, __opentui_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);
+	(0, solid_js.onCleanup)(() => {
+		const state$1 = getExitGuardState();
+		if (!state$1) return;
+		state$1.renderers.delete(renderer);
+		state$1.activeCount = Math.max(0, state$1.activeCount - 1);
+		if (state$1.activeCount === 0) {
+			process.exit = state$1.originalExit;
+			setExitGuardState(void 0);
+		}
+	});
+	return props.children;
 }
-const ShortcutContext = solidJs.createContext();
+var ShortcutContext = (0, solid_js.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;
-    }
-  });
+	const [registeredBindings, setRegisteredBindings] = (0, solid_js.createSignal)(props.bindings ?? []);
+	const [pending, setPending] = (0, solid_js.createSignal)(null);
+	const register = (binding) => {
+		setRegisteredBindings((prev) => [...prev, binding]);
+		return () => {
+			setRegisteredBindings((prev) => prev.filter((b) => b !== binding));
+		};
+	};
+	const value = {
+		register,
+		pending,
+		bindings: registeredBindings
+	};
+	return (0, __opentui_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 context = (0, solid_js.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"
-    }
-  }
+	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",
+			muted: "#333333",
+			background: "#e8e8e8",
+			accent: "#0044aa",
+			success: "#005500",
+			warning: "#885500",
+			error: "#880000",
+			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"]
+	from: (base) => ({ extend: (overrides) => ({
+		name: overrides.name ?? `${base.name}-extended`,
+		colors: {
+			...base.colors,
+			...overrides.colors
+		}
+	}) }),
+	create: (theme) => theme,
+	names: () => Object.keys(TuiThemes),
+	get: (name) => TuiThemes[name] ?? TuiThemes["dark"]
 };
-const ThemeContext = solidJs.createContext();
+var ThemeContext = (0, solid_js.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;
-    }
-  });
+	const themes = { ...TuiThemes };
+	const [current, setCurrent] = (0, solid_js.createSignal)(themes[props.initial ?? "dark"] ?? themes["dark"]);
+	const setTheme = (name) => {
+		if (themes[name]) setCurrent(themes[name]);
+	};
+	const cycle = () => {
+		const currentName = current().name;
+		const names$1 = Object.keys(themes);
+		setCurrent(themes[names$1[(names$1.indexOf(currentName) + 1) % names$1.length]]);
+	};
+	const register = (theme) => {
+		themes[theme.name] = theme;
+	};
+	const names = () => Object.keys(themes);
+	const value = {
+		current,
+		setTheme,
+		cycle,
+		register,
+		names
+	};
+	return (0, __opentui_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 context = (0, solid_js.useContext)(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
 }
-const ToastContext = solidJs.createContext();
-const DEFAULT_DURATION = 3e3;
+var ToastContext = (0, solid_js.createContext)();
+var 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;
-    }
-  });
+	const [state, setState] = (0, solid_js.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 (0, __opentui_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;
+	const context = (0, solid_js.useContext)(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+}
+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 switchToAlternateScreen() {
+	process.stdout.write("\x1B[?1049h");
+}
+function switchToMainScreen() {
+	process.stdout.write("\x1B[?1049l");
+}
+function cleanupTerminal() {
+	switchToMainScreen();
+	disableMouseReporting();
+	clearScreen();
+	resetAttributes();
+	restoreStdin();
+}
+function parseMouseScroll(data) {
+	const sgrMatch = data.toString().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 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 { theme = "dark", shortcuts = [], onDestroy } = config;
+	switchToAlternateScreen();
+	enableMouseReporting();
+	return (0, __opentui_solid.render)(() => (0, __opentui_solid.createComponent)(ExitGuard, { get children() {
+		return (0, __opentui_solid.createComponent)(ThemeProvider, {
+			get initial() {
+				return theme;
+			},
+			get children() {
+				return (0, __opentui_solid.createComponent)(ShortcutProvider, {
+					get bindings() {
+						return shortcuts;
+					},
+					get children() {
+						return (0, __opentui_solid.createComponent)(ToastProvider, { get children() {
+							return (0, __opentui_solid.createComponent)(App, {});
+						} });
+					}
+				});
+			}
+		});
+	} }), { onDestroy: () => {
+		cleanupTerminal();
+		onDestroy?.();
+	} });
 }
-var _tmpl$$4 = ['<box width="100%" height="100%">', "</box>"];
-const TuiContext = solidJs.createContext();
+var _tmpl$$4 = ["<box width=\"100%\" height=\"100%\">", "</box>"];
+var TuiContext = (0, solid_js.createContext)();
 function useTui() {
-  const context = solidJs.useContext(TuiContext);
-  if (!context) {
-    throw new Error("useTui must be used within a TuiProvider");
-  }
-  return context;
+	const context = (0, solid_js.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;
-  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);
-  };
-  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 web.ssr(_tmpl$$4, web.escape(props.children));
-                    }
-                  });
-                }
-              });
-            }
-          });
-        }
-      });
-    }
-  });
+	const renderer = (0, __opentui_solid.useRenderer)();
+	const reservedRows = props.reservedRows ?? 8;
+	props.scrollSpeed;
+	const [viewportHeight, setViewportHeight] = (0, solid_js.createSignal)(Math.max(10, renderer.height - reservedRows));
+	const [viewportWidth, setViewportWidth] = (0, solid_js.createSignal)(renderer.width);
+	const exit = (code = 0) => {
+		process.exitCode = code;
+		renderer.destroy();
+	};
+	const handleResize = (width, height) => {
+		setViewportHeight(Math.max(10, height - reservedRows));
+		setViewportWidth(width);
+	};
+	(0, solid_js.onMount)(() => {
+		switchToAlternateScreen();
+		enableMouseReporting();
+		renderer.on("resize", handleResize);
+	});
+	(0, solid_js.onCleanup)(() => {
+		renderer.off("resize", handleResize);
+		cleanupTerminal();
+	});
+	const contextValue = {
+		viewportHeight,
+		viewportWidth,
+		exit
+	};
+	const themeName = typeof props.theme === "string" ? props.theme : props.theme?.name ?? "dark";
+	return (0, __opentui_solid.createComponent)(ExitGuard, { get children() {
+		return (0, __opentui_solid.createComponent)(TuiContext.Provider, {
+			value: contextValue,
+			get children() {
+				return (0, __opentui_solid.createComponent)(ThemeProvider, {
+					initial: themeName,
+					get children() {
+						return (0, __opentui_solid.createComponent)(ShortcutProvider, {
+							get bindings() {
+								return props.shortcuts ?? [];
+							},
+							get children() {
+								return (0, __opentui_solid.createComponent)(ToastProvider, { get children() {
+									return (0, solid_js_web.ssr)(_tmpl$$4, (0, solid_js_web.escape)(props.children));
+								} });
+							}
+						});
+					}
+				});
+			}
+		});
+	} });
 }
-var _tmpl$$3 = ['<box height="1" paddingleft="2">', "</box>"], _tmpl$2$3 = ["<text", " bold>", "</text>"], _tmpl$3$2 = ["<text", "> ", " </text>"];
+var _tmpl$$3 = ["<box height=\"1\" paddingleft=\"2\">", "</box>"], _tmpl$2$3 = [
+	"<text",
+	" bold>",
+	"</text>"
+], _tmpl$3$2 = [
+	"<text",
+	"> ",
+	" </text>"
+];
 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 web.ssr(_tmpl$$3, web.escape(web.createComponent(solidJs.For, {
-    get each() {
-      return props.segments;
-    },
-    children: (segment, idx) => [idx() > 0 && web.ssr(_tmpl$3$2, web.ssrAttribute("color", web.escape(mutedColor(), true), false), web.escape(separator)), web.ssr(_tmpl$2$3, web.ssrAttribute("color", web.escape(accentColor(), true), false), web.escape(segment))]
-  })));
+	const { current: theme } = useTheme();
+	const separator = props.separator ?? "›";
+	const accentColor = () => props.accentColor ?? theme().colors.accent;
+	const mutedColor = () => props.mutedColor ?? theme().colors.muted;
+	return (0, solid_js_web.ssr)(_tmpl$$3, (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.For, {
+		get each() {
+			return props.segments;
+		},
+		children: (segment, idx) => [idx() > 0 && (0, solid_js_web.ssr)(_tmpl$3$2, (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(mutedColor(), true), false), (0, solid_js_web.escape)(separator)), (0, solid_js_web.ssr)(_tmpl$2$3, (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(accentColor(), true), false), (0, solid_js_web.escape)(segment))]
+	})));
 }
-var _tmpl$$2 = ['<box height="1"', "><text", ">", "", "</text></box>"], _tmpl$2$2 = ["<text bold", ' marginBottom="1">', " (", "/", ")</text>"], _tmpl$3$1 = ['<box flexdirection="column" flexgrow="1">', "", "</box>"];
+var _tmpl$$2 = [
+	"<box height=\"1\"",
+	"><text",
+	">",
+	"",
+	"</text></box>"
+], _tmpl$2$2 = [
+	"<text bold",
+	" marginBottom=\"1\">",
+	" (",
+	"/",
+	")</text>"
+], _tmpl$3$1 = [
+	"<box flexdirection=\"column\" flexgrow=\"1\">",
+	"",
+	"</box>"
+];
 function unwrap(value) {
-  return typeof value === "function" ? value() : 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 web.ssr(_tmpl$$2, web.ssrAttribute("backgroundcolor", selected ? web.escape(t.colors.selection, true) : web.escape(void 0, true), false), web.ssrAttribute("color", selected ? web.escape(t.colors.background, true) : web.escape(t.colors.text, true), false), showIndicator ? selected ? "› " : "  " : "", web.escape(label));
-  };
-  const renderItem = props.renderItem ?? defaultRenderItem;
-  return web.ssr(_tmpl$3$1, web.escape(web.createComponent(solidJs.Show, {
-    get when() {
-      return props.title;
-    },
-    get children() {
-      return web.ssr(_tmpl$2$2, web.ssrAttribute("color", web.escape(theme().colors.text, true), false), web.escape(props.title), web.escape(selectedIndex()) + 1, web.escape(items().length));
-    }
-  })), web.escape(web.createComponent(solidJs.For, {
-    get each() {
-      return visibleItems();
-    },
-    children: ({
-      item,
-      globalIndex
-    }) => renderItem(item, globalIndex, globalIndex === selectedIndex())
-  })));
+	const { current: theme } = useTheme();
+	const [scrollOffset, setScrollOffset] = (0, solid_js.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 = (0, solid_js.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 (0, solid_js_web.ssr)(_tmpl$$2, (0, solid_js_web.ssrAttribute)("backgroundcolor", selected ? (0, solid_js_web.escape)(t.colors.selection, true) : (0, solid_js_web.escape)(void 0, true), false), (0, solid_js_web.ssrAttribute)("color", selected ? (0, solid_js_web.escape)(t.colors.background, true) : (0, solid_js_web.escape)(t.colors.text, true), false), showIndicator ? selected ? "› " : "  " : "", (0, solid_js_web.escape)(label));
+	};
+	const renderItem = props.renderItem ?? defaultRenderItem;
+	return (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+		get when() {
+			return props.title;
+		},
+		get children() {
+			return (0, solid_js_web.ssr)(_tmpl$2$2, (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(theme().colors.text, true), false), (0, solid_js_web.escape)(props.title), (0, solid_js_web.escape)(selectedIndex()) + 1, (0, solid_js_web.escape)(items().length));
+		}
+	})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.For, {
+		get each() {
+			return visibleItems();
+		},
+		children: ({ 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
-  };
+	const [scrollOffset, setScrollOffset] = (0, solid_js.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
+	};
 }
-var _tmpl$$1 = ['<box height="1"', "><text", "> ", "</text></box>"], _tmpl$2$1 = ['<box width="100%" height="100%" flexdirection="column"', '><box height="3" borderstyle="single"', ' justifycontent="center" alignitems="center"><text bold', ">", "", " </text></box>", '<box flexgrow="1" flexdirection="row"><box', ' borderstyle="single"', ' flexdirection="column" padding="1">', '</box><box flexgrow="1" borderstyle="single"', ' flexdirection="column" padding="2">', "</box></box>", "</box>"];
+var _tmpl$$1 = [
+	"<box height=\"1\"",
+	"><text",
+	"> ",
+	"</text></box>"
+], _tmpl$2$1 = [
+	"<box width=\"100%\" height=\"100%\" flexdirection=\"column\"",
+	"><box height=\"3\" borderstyle=\"single\"",
+	" justifycontent=\"center\" alignitems=\"center\"><text bold",
+	">",
+	"",
+	" </text></box>",
+	"<box flexgrow=\"1\" flexdirection=\"row\"><box",
+	" borderstyle=\"single\"",
+	" flexdirection=\"column\" padding=\"1\">",
+	"</box><box flexgrow=\"1\" borderstyle=\"single\"",
+	" flexdirection=\"column\" padding=\"2\">",
+	"</box></box>",
+	"</box>"
+];
 function MasterDetail(props) {
-  const {
-    current: theme
-  } = useTheme();
-  const masterWidth = props.masterWidth ?? "35%";
-  return web.ssr(_tmpl$2$1, web.ssrAttribute("backgroundcolor", web.escape(theme().colors.background, true), false), web.ssrAttribute("bordercolor", web.escape(theme().colors.accent, true), false), web.ssrAttribute("color", web.escape(theme().colors.accent, true), false), props.headerIcon ? ` ${web.escape(props.headerIcon)} ` : " ", web.escape(props.header), web.escape(web.createComponent(solidJs.Show, {
-    get when() {
-      return props.breadcrumb && props.breadcrumb.length > 0;
-    },
-    get children() {
-      return web.createComponent(Breadcrumb, {
-        get segments() {
-          return props.breadcrumb;
-        }
-      });
-    }
-  })), web.ssrAttribute("width", web.escape(masterWidth, true), false), web.ssrAttribute("bordercolor", web.escape(theme().colors.border, true), false), web.escape(props.master), web.ssrAttribute("bordercolor", web.escape(theme().colors.border, true), false), web.escape(props.detail), web.escape(web.createComponent(solidJs.Show, {
-    get when() {
-      return props.footer;
-    },
-    get children() {
-      return web.ssr(_tmpl$$1, web.ssrAttribute("backgroundcolor", web.escape(theme().colors.background, true), false), web.ssrAttribute("color", web.escape(theme().colors.muted, true), false), web.escape(props.footer));
-    }
-  })));
+	const { current: theme } = useTheme();
+	const masterWidth = props.masterWidth ?? "35%";
+	return (0, solid_js_web.ssr)(_tmpl$2$1, (0, solid_js_web.ssrAttribute)("backgroundcolor", (0, solid_js_web.escape)(theme().colors.background, true), false), (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(theme().colors.accent, true), false), (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(theme().colors.accent, true), false), props.headerIcon ? ` ${(0, solid_js_web.escape)(props.headerIcon)} ` : " ", (0, solid_js_web.escape)(props.header), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+		get when() {
+			return props.breadcrumb && props.breadcrumb.length > 0;
+		},
+		get children() {
+			return (0, solid_js_web.createComponent)(Breadcrumb, { get segments() {
+				return props.breadcrumb;
+			} });
+		}
+	})), (0, solid_js_web.ssrAttribute)("width", (0, solid_js_web.escape)(masterWidth, true), false), (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(theme().colors.border, true), false), (0, solid_js_web.escape)(props.master), (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(theme().colors.border, true), false), (0, solid_js_web.escape)(props.detail), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+		get when() {
+			return props.footer;
+		},
+		get children() {
+			return (0, solid_js_web.ssr)(_tmpl$$1, (0, solid_js_web.ssrAttribute)("backgroundcolor", (0, solid_js_web.escape)(theme().colors.background, true), false), (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(theme().colors.muted, true), false), (0, solid_js_web.escape)(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;
+	if (width === void 0) return "30%";
+	if (typeof width === "number") return width;
+	if (width.endsWith("%")) return `${parseInt(width.replace("%", ""), 10)}%`;
+	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 MasterDetailLayout(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: [
+			{
+				type: "box",
+				props: {
+					flexBasis: masterWidth,
+					flexShrink: 0,
+					overflow: "scroll"
+				},
+				children: props.master
+			},
+			...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)
+				}
+			}] : [],
+			{
+				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()
-  };
+	const [stack, setStack] = (0, solid_js.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
-    ]
-  };
+	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: [...props.title ? [{
+			type: "text",
+			props: { style: { bold: true } },
+			children: ` ${props.title} `
+		}] : [], 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);
-  }
+	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" };
-  }
+	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
-            }
-          ] : []
-        ]
-      }
-    ]
-  };
+	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: [{
+			type: "text",
+			props: { style: { fg: "#888888" } },
+			children: props.label
+		}, {
+			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
-        }
-      }
-    ]
-  };
+	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 { current } = useTheme();
+	const [isHovered, setIsHovered] = (0, solid_js.createSignal)(false);
+	const [isPressed, setIsPressed] = (0, solid_js.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,
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "center",
+			style: {
+				border: "single",
+				borderColor: isHovered() && !props.disabled ? current().colors.text : current().colors.border,
+				bg: getBackgroundColor()
+			},
+			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} `
+			}
+		}]
+	};
 }
-var _tmpl$ = ['<box width="100%" height="100%" flexdirection="column"', '><box height="3" borderstyle="single"', ' justifycontent="center" alignitems="center"><text bold', "> ", " </text></box>", '<box flexgrow="1" flexdirection="row">', "</box>", "</box>"], _tmpl$2 = ['<box height="1" paddingleft="2"', ">", "</box>"], _tmpl$3 = ["<text", " bold>", "</text>"], _tmpl$4 = ["<text", "> › </text>"], _tmpl$5 = ['<box height="1"', "><text", "> ", "</text></box>"], _tmpl$6 = ["<box", ' borderstyle="single"', ' flexdirection="column" padding="1">', "</box>"], _tmpl$7 = ['<box flexgrow="1" borderstyle="single"', ' flexdirection="column" padding="2">', "</box>"], _tmpl$8 = ['<box height="1"', "><text", ">", "", "</text></box>"];
+var _tmpl$ = [
+	"<box width=\"100%\" height=\"100%\" flexdirection=\"column\"",
+	"><box height=\"3\" borderstyle=\"single\"",
+	" justifycontent=\"center\" alignitems=\"center\"><text bold",
+	"> ",
+	" </text></box>",
+	"<box flexgrow=\"1\" flexdirection=\"row\">",
+	"</box>",
+	"</box>"
+], _tmpl$2 = [
+	"<box height=\"1\" paddingleft=\"2\"",
+	">",
+	"</box>"
+], _tmpl$3 = [
+	"<text",
+	" bold>",
+	"</text>"
+], _tmpl$4 = ["<text", "> › </text>"], _tmpl$5 = [
+	"<box height=\"1\"",
+	"><text",
+	"> ",
+	"</text></box>"
+], _tmpl$6 = [
+	"<box",
+	" borderstyle=\"single\"",
+	" flexdirection=\"column\" padding=\"1\">",
+	"</box>"
+], _tmpl$7 = [
+	"<box flexgrow=\"1\" borderstyle=\"single\"",
+	" flexdirection=\"column\" padding=\"2\">",
+	"</box>"
+], _tmpl$8 = [
+	"<box height=\"1\"",
+	"><text",
+	">",
+	"",
+	"</text></box>"
+];
 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"
-  }
+	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;
+	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 web.ssr(_tmpl$, web.ssrAttribute("backgroundcolor", web.escape(t.bg, true), false), web.ssrAttribute("bordercolor", web.escape(t.accent, true), false), web.ssrAttribute("color", web.escape(t.accent, true), false), web.escape(props.header), props.breadcrumb && props.breadcrumb.length > 0 && web.ssr(_tmpl$2, web.ssrAttribute("backgroundcolor", web.escape(t.bg, true), false), web.escape(props.breadcrumb.map((segment, idx) => [idx > 0 && web.ssr(_tmpl$4, web.ssrAttribute("color", web.escape(t.muted, true), false)), web.ssr(_tmpl$3, web.ssrAttribute("color", web.escape(t.accent, true), false), web.escape(segment))]))), web.escape(props.children), props.footer && web.ssr(_tmpl$5, web.ssrAttribute("backgroundcolor", web.escape(t.bg, true), false), web.ssrAttribute("color", web.escape(t.muted, true), false), web.escape(props.footer)));
+function MasterDetailLayout$1(props) {
+	const t = resolveTheme(props.theme);
+	props.masterWidth;
+	return (0, solid_js_web.ssr)(_tmpl$, (0, solid_js_web.ssrAttribute)("backgroundcolor", (0, solid_js_web.escape)(t.bg, true), false), (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(t.accent, true), false), (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(t.accent, true), false), (0, solid_js_web.escape)(props.header), props.breadcrumb && props.breadcrumb.length > 0 && (0, solid_js_web.ssr)(_tmpl$2, (0, solid_js_web.ssrAttribute)("backgroundcolor", (0, solid_js_web.escape)(t.bg, true), false), (0, solid_js_web.escape)(props.breadcrumb.map((segment, idx) => [idx > 0 && (0, solid_js_web.ssr)(_tmpl$4, (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(t.muted, true), false)), (0, solid_js_web.ssr)(_tmpl$3, (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(t.accent, true), false), (0, solid_js_web.escape)(segment))]))), (0, solid_js_web.escape)(props.children), props.footer && (0, solid_js_web.ssr)(_tmpl$5, (0, solid_js_web.ssrAttribute)("backgroundcolor", (0, solid_js_web.escape)(t.bg, true), false), (0, solid_js_web.ssrAttribute)("color", (0, solid_js_web.escape)(t.muted, true), false), (0, solid_js_web.escape)(props.footer)));
 }
 function MasterPanel(props) {
-  const t = resolveTheme(props.theme);
-  return web.ssr(_tmpl$6, web.ssrAttribute("width", web.escape(props.width, true) ?? "35%", false), web.ssrAttribute("bordercolor", web.escape(t.border, true), false), web.escape(props.children));
+	const t = resolveTheme(props.theme);
+	return (0, solid_js_web.ssr)(_tmpl$6, (0, solid_js_web.ssrAttribute)("width", (0, solid_js_web.escape)(props.width, true) ?? "35%", false), (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(t.border, true), false), (0, solid_js_web.escape)(props.children));
 }
 function DetailPanel(props) {
-  const t = resolveTheme(props.theme);
-  return web.ssr(_tmpl$7, web.ssrAttribute("bordercolor", web.escape(t.border, true), false), web.escape(props.children));
+	return (0, solid_js_web.ssr)(_tmpl$7, (0, solid_js_web.ssrAttribute)("bordercolor", (0, solid_js_web.escape)(resolveTheme(props.theme).border, true), false), (0, solid_js_web.escape)(props.children));
 }
 function ListItem(props) {
-  const t = resolveTheme(props.theme);
-  return web.ssr(_tmpl$8, web.ssrAttribute("backgroundcolor", props.selected ? web.escape(t.selection, true) : web.escape(void 0, true), false), web.ssrAttribute("color", props.selected ? web.escape(t.selectionFg, true) : web.escape(t.fg, true), false), props.selected ? "› " : "  ", web.escape(props.label));
+	const t = resolveTheme(props.theme);
+	return (0, solid_js_web.ssr)(_tmpl$8, (0, solid_js_web.ssrAttribute)("backgroundcolor", props.selected ? (0, solid_js_web.escape)(t.selection, true) : (0, solid_js_web.escape)(void 0, true), false), (0, solid_js_web.ssrAttribute)("color", props.selected ? (0, solid_js_web.escape)(t.selectionFg, true) : (0, solid_js_web.escape)(t.fg, true), false), props.selected ? "› " : "  ", (0, solid_js_web.escape)(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 };
+	const [scrollOffset, setScrollOffset] = (0, solid_js.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 = (0, solid_js.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;
+	return Math.max(minHeight, (process.stdout.rows || 24) - reservedRows);
 }
 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);
-  });
+	const { onScroll, scrollSpeed = 3 } = options;
+	const handleInput = (data) => {
+		const scrollDir = parseMouseScroll(data);
+		if (scrollDir !== 0 && onScroll) onScroll(scrollDir * scrollSpeed);
+	};
+	(0, solid_js.onMount)(() => {
+		enableMouseReporting();
+		if (process.stdin.isTTY) process.stdin.setRawMode(true);
+		process.stdin.on("data", handleInput);
+	});
+	(0, solid_js.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;
@@ -1047,8 +972,8 @@ exports.LAYOUT_THEMES = LAYOUT_THEMES;
 exports.ListItem = ListItem;
 exports.MarkdownBlock = MarkdownBlock;
 exports.MasterDetail = MasterDetail;
-exports.MasterDetailLayout = MasterDetailLayout$1;
-exports.MasterDetailTemplate = MasterDetailLayout;
+exports.MasterDetailLayout = MasterDetailLayout;
+exports.MasterDetailTemplate = MasterDetailLayout$1;
 exports.MasterPanel = MasterPanel;
 exports.ShortcutProvider = ShortcutProvider;
 exports.StatCard = StatCard;
@@ -1061,18 +986,75 @@ exports.TuiThemes = TuiThemes;
 exports.VirtualList = VirtualList;
 exports.cleanupTerminal = cleanupTerminal;
 exports.clearScreen = clearScreen;
+Object.defineProperty(exports, "createComponent", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.createComponent;
+	}
+});
 exports.createTuiApp = createTuiApp;
 exports.createVirtualListController = createVirtualListController;
 exports.disableMouseReporting = disableMouseReporting;
+Object.defineProperty(exports, "effect", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.effect;
+	}
+});
 exports.enableMouseReporting = enableMouseReporting;
 exports.getViewportHeight = getViewportHeight;
+Object.defineProperty(exports, "insert", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.insert;
+	}
+});
+Object.defineProperty(exports, "memo", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.memo;
+	}
+});
+Object.defineProperty(exports, "mergeProps", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.mergeProps;
+	}
+});
 exports.parseMouseScroll = parseMouseScroll;
+Object.defineProperty(exports, "render", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.render;
+	}
+});
 exports.resetAttributes = resetAttributes;
 exports.restoreStdin = restoreStdin;
+Object.defineProperty(exports, "spread", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.spread;
+	}
+});
+exports.switchToAlternateScreen = switchToAlternateScreen;
+exports.switchToMainScreen = switchToMainScreen;
+Object.defineProperty(exports, "useKeyboard", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.useKeyboard;
+	}
+});
 exports.useMouse = useMouse;
+Object.defineProperty(exports, "useRenderer", {
+	enumerable: true,
+	get: function() {
+		return __opentui_solid.useRenderer;
+	}
+});
 exports.useShortcuts = useShortcuts;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
 exports.useTui = useTui;
 exports.useVirtualScroll = useVirtualScroll;
-//# sourceMappingURL=tui.cjs.map
+
+//# sourceMappingURL=tui.cjs.map