// @bun import { theme2 } from "./chunk-p6jvscj3.js"; // src/components/Modal.tsx import { insertNode as _$insertNode } from "@opentui/solid"; import { effect as _$effect } from "@opentui/solid"; import { insert as _$insert } from "@opentui/solid"; import { use as _$use } from "@opentui/solid"; import { setProp as _$setProp } from "@opentui/solid"; import { createElement as _$createElement } from "@opentui/solid"; import { createComponent as _$createComponent } from "@opentui/solid"; import { RGBA } from "@opentui/core"; import { useBindings } from "@opentui/keymap/solid"; import { Portal, useRenderer, useTerminalDimensions } from "@opentui/solid"; import { createSignal, onCleanup, onMount, Show } from "solid-js"; function Modal2(props) { return _$createComponent(Portal, { get children() { return _$createComponent(Show, { get when() { return props.open; }, get children() { return _$createComponent(ModalPanel, props); } }); } }); } function ModalPanel(props) { const renderer = useRenderer(); const dimensions = useTerminalDimensions(); const [panel, setPanel] = createSignal(); const screenCap = () => Math.max(5, dimensions().height - 4); const maxPanelHeight = () => Math.min(props.maxHeight ?? screenCap(), screenCap()); const maxContentHeight = () => Math.max(1, maxPanelHeight() - 4); const maxPanelWidth = () => Math.max(10, dimensions().width - 4); const panelWidth = () => Math.min(props.width ?? 50, maxPanelWidth()); let previousFocus = null; onMount(() => { previousFocus = renderer.currentFocusedRenderable; props.onOpen?.(previousFocus); panel()?.focus(); }); onCleanup(() => { if (previousFocus && !previousFocus.isDestroyed) previousFocus.focus(); }); const dismissKey = props.dismissKey ?? "escape"; if (dismissKey !== false || props.commands || props.bindings) { useBindings(() => ({ target: panel, commands: [...dismissKey !== false ? [{ name: "modal_dismiss", desc: "close", shortHelp: true, run: () => props.onDismiss?.() }] : [], ...props.commands ?? []], bindings: [...dismissKey !== false ? [{ key: dismissKey, cmd: "modal_dismiss" }] : [], ...props.bindings ?? []] })); } return (() => { var _el$ = _$createElement("box"), _el$2 = _$createElement("box"); _$insertNode(_el$, _el$2); _$setProp(_el$, "position", "absolute"); _$setProp(_el$, "top", 0); _$setProp(_el$, "left", 0); _$setProp(_el$, "alignItems", "center"); _$setProp(_el$, "justifyContent", "center"); _$setProp(_el$, "zIndex", 2000); _$use(setPanel, _el$2); _$setProp(_el$2, "focusable", true); _$setProp(_el$2, "border", true); _$setProp(_el$2, "flexDirection", "column"); _$setProp(_el$2, "paddingLeft", 2); _$setProp(_el$2, "paddingRight", 2); _$setProp(_el$2, "paddingTop", 1); _$setProp(_el$2, "paddingBottom", 1); _$insert(_el$2, _$createComponent(Show, { get when() { return props.scrollable; }, get fallback() { return (() => { var _el$4 = _$createElement("box"); _$setProp(_el$4, "flexDirection", "column"); _$setProp(_el$4, "overflow", "hidden"); _$insert(_el$4, () => props.children); _$effect((_$p) => _$setProp(_el$4, "maxHeight", maxContentHeight(), _$p)); return _el$4; })(); }, get children() { var _el$3 = _$createElement("scrollbox"); _$setProp(_el$3, "flexShrink", 1); _$setProp(_el$3, "scrollY", true); _$setProp(_el$3, "scrollX", false); _$setProp(_el$3, "focusable", false); _$insert(_el$3, () => props.children); _$effect((_$p) => _$setProp(_el$3, "maxHeight", maxContentHeight(), _$p)); return _el$3; } })); _$effect((_p$) => { var _v$ = dimensions().width, _v$2 = dimensions().height, _v$3 = props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150), _v$4 = theme2.mouse ? props.onDismiss : undefined, _v$5 = panelWidth(), _v$6 = maxPanelHeight(), _v$7 = theme2.borderStyle, _v$8 = props.accentColor ?? theme2.primary, _v$9 = props.accentColor ?? theme2.primary, _v$0 = props.backgroundColor ?? theme2.background, _v$1 = theme2.mouse ? (event) => event.stopPropagation() : undefined; _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$, _p$.e)); _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "height", _v$2, _p$.t)); _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "backgroundColor", _v$3, _p$.a)); _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "onMouseDown", _v$4, _p$.o)); _v$5 !== _p$.i && (_p$.i = _$setProp(_el$2, "width", _v$5, _p$.i)); _v$6 !== _p$.n && (_p$.n = _$setProp(_el$2, "maxHeight", _v$6, _p$.n)); _v$7 !== _p$.s && (_p$.s = _$setProp(_el$2, "borderStyle", _v$7, _p$.s)); _v$8 !== _p$.h && (_p$.h = _$setProp(_el$2, "borderColor", _v$8, _p$.h)); _v$9 !== _p$.r && (_p$.r = _$setProp(_el$2, "focusedBorderColor", _v$9, _p$.r)); _v$0 !== _p$.d && (_p$.d = _$setProp(_el$2, "backgroundColor", _v$0, _p$.d)); _v$1 !== _p$.l && (_p$.l = _$setProp(_el$2, "onMouseDown", _v$1, _p$.l)); return _p$; }, { e: undefined, t: undefined, a: undefined, o: undefined, i: undefined, n: undefined, s: undefined, h: undefined, r: undefined, d: undefined, l: undefined }); return _el$; })(); } export { Modal2 };