fix modal & rebuild

Signed-off-by: Hadi <[email protected]>

dist/chunk-5my64v78.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Badge.tsx
 import { insert as _$insert } from "@opentui/solid";

dist/chunk-5q9en54m.js

@@ -1,11 +1,11 @@
 // @bun
-import {
-  theme
-} from "./chunk-x7m82z3z.js";
 import {
   dismiss,
   notifications
 } from "./chunk-y6txxzxk.js";
+import {
+  theme
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/NotificationHost.tsx
 import { effect as _$effect } from "@opentui/solid";

dist/chunk-6g54ffq0.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Modal.tsx
 import { createComponent as _$createComponent } from "@opentui/solid";
@@ -15,6 +15,8 @@ import { Portal, useTerminalDimensions } from "@opentui/solid";
 import { Show } from "solid-js";
 function Modal(props) {
   const dimensions = useTerminalDimensions();
+  const maxPanelHeight = () => Math.max(5, dimensions().height - 4);
+  const maxContentHeight = () => Math.max(1, maxPanelHeight() - 4);
   return _$createComponent(Portal, {
     get children() {
       return _$createComponent(Show, {
@@ -22,32 +24,38 @@ function Modal(props) {
           return props.open;
         },
         get children() {
-          var _el$ = _$createElement("box"), _el$2 = _$createElement("box");
+          var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("scrollbox");
           _$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);
+          _$insertNode(_el$2, _el$3);
           _$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, () => props.children);
+          _$setProp(_el$3, "flexShrink", 1);
+          _$setProp(_el$3, "scrollY", true);
+          _$setProp(_el$3, "scrollX", false);
+          _$insert(_el$3, () => props.children);
           _$effect((_p$) => {
-            var _v$ = dimensions().width, _v$2 = dimensions().height, _v$3 = Math.floor(dimensions().height / 4), _v$4 = props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150), _v$5 = theme.mouse ? props.onDismiss : undefined, _v$6 = props.width ?? 50, _v$7 = theme.borderStyle, _v$8 = props.accentColor ?? theme.primary, _v$9 = props.backgroundColor ?? theme.background, _v$0 = theme.mouse ? (event) => event.stopPropagation() : undefined;
+            var _v$ = dimensions().width, _v$2 = dimensions().height, _v$3 = props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150), _v$4 = theme.mouse ? props.onDismiss : undefined, _v$5 = props.width ?? 50, _v$6 = maxPanelHeight(), _v$7 = theme.borderStyle, _v$8 = props.accentColor ?? theme.primary, _v$9 = props.backgroundColor ?? theme.background, _v$0 = theme.mouse ? (event) => event.stopPropagation() : undefined, _v$1 = maxContentHeight();
             _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$, "paddingTop", _v$3, _p$.a));
+            _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "backgroundColor", _v$3, _p$.a));
-            _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "backgroundColor", _v$4, _p$.o));
+            _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "onMouseDown", _v$4, _p$.o));
-            _v$5 !== _p$.i && (_p$.i = _$setProp(_el$, "onMouseDown", _v$5, _p$.i));
+            _v$5 !== _p$.i && (_p$.i = _$setProp(_el$2, "width", _v$5, _p$.i));
-            _v$6 !== _p$.n && (_p$.n = _$setProp(_el$2, "width", _v$6, _p$.n));
+            _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, "backgroundColor", _v$9, _p$.r));
             _v$0 !== _p$.d && (_p$.d = _$setProp(_el$2, "onMouseDown", _v$0, _p$.d));
+            _v$1 !== _p$.l && (_p$.l = _$setProp(_el$3, "maxHeight", _v$1, _p$.l));
             return _p$;
           }, {
             e: undefined,
@@ -59,7 +67,8 @@ function Modal(props) {
             s: undefined,
             h: undefined,
             r: undefined,
-            d: undefined
+            d: undefined,
+            l: undefined
           });
           return _el$;
         }

dist/chunk-9cbm4zqz.js

@@ -1,8 +1,4 @@
 // @bun
-import {
-  configPath,
-  readYamlFile
-} from "./chunk-7f8jagy5.js";
 import {
   mergeConfig,
   normalizeColors,
@@ -11,6 +7,10 @@ import {
 import {
   buildPresets
 } from "./chunk-cnhhssmz.js";
+import {
+  configPath,
+  readYamlFile
+} from "./chunk-7f8jagy5.js";
 
 // src/index.ts
 import { join } from "path";

dist/chunk-gc6m7gbw.js

@@ -1,10 +1,10 @@
 // @bun
 import {
   Badge
-} from "./chunk-bscbaa87.js";
+} from "./chunk-5my64v78.js";
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Toggle.tsx
 import { setProp as _$setProp } from "@opentui/solid";

dist/chunk-hq5k1y0s.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/ProgressBar.tsx
 import { effect as _$effect } from "@opentui/solid";

dist/chunk-mj1hhxzy.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/HelpBar.tsx
 import { createTextNode as _$createTextNode } from "@opentui/solid";

dist/chunk-qeqbg1rs.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/SignalBars.tsx
 import { effect as _$effect } from "@opentui/solid";

dist/chunk-qpd35mce.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   Modal
-} from "./chunk-3t6nhsa8.js";
+} from "./chunk-6g54ffq0.js";
 import {
   helpOpen,
   toggleHelp

dist/chunk-wc3fqqt2.js

@@ -2,7 +2,7 @@
 import {
   presets,
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Sidebar.tsx
 import { use as _$use } from "@opentui/solid";

dist/chunk-xd40rew1.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/MinSizeGuard.tsx
 import { createComponent as _$createComponent } from "@opentui/solid";

dist/chunk-yvprfbxx.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Tabs.tsx
 import { effect as _$effect } from "@opentui/solid";

dist/chunk-zvmj6cvs.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
 
 // src/components/Box.tsx
 import { spread as _$spread } from "@opentui/solid";

dist/components/Badge.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   Badge
-} from "../chunk-bscbaa87.js";
+} from "../chunk-5my64v78.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   Badge
 };

dist/components/Box.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   Box
-} from "../chunk-ynqvwj4d.js";
+} from "../chunk-zvmj6cvs.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   Box
 };

dist/components/HelpBar.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   HelpBar
-} from "../chunk-rvq53a2a.js";
+} from "../chunk-mj1hhxzy.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   HelpBar
 };

dist/components/HelpModal.js

@@ -1,12 +1,12 @@
 // @bun
 import {
   HelpModal
-} from "../chunk-c7bjgk8c.js";
+} from "../chunk-qpd35mce.js";
-import"../chunk-3t6nhsa8.js";
+import"../chunk-6g54ffq0.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 import"../chunk-cyvpvpws.js";
 export {
   HelpModal

dist/components/MinSizeGuard.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   MinSizeGuard
-} from "../chunk-eta27h3c.js";
+} from "../chunk-xd40rew1.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   MinSizeGuard
 };

dist/components/Modal.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   Modal
-} from "../chunk-3t6nhsa8.js";
+} from "../chunk-6g54ffq0.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   Modal
 };

dist/components/NotificationHost.js

@@ -1,12 +1,12 @@
 // @bun
 import {
   NotificationHost
-} from "../chunk-b0h95a6q.js";
+} from "../chunk-5q9en54m.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-y6txxzxk.js";
-import"../chunk-7f8jagy5.js";
+import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
-import"../chunk-y6txxzxk.js";
+import"../chunk-7f8jagy5.js";
 export {
   NotificationHost
 };

dist/components/ProgressBar.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   ProgressBar
-} from "../chunk-5m64a9kb.js";
+} from "../chunk-hq5k1y0s.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   ProgressBar
 };

dist/components/Sidebar.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   Sidebar
-} from "../chunk-hj94kpbg.js";
+} from "../chunk-wc3fqqt2.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   Sidebar
 };

dist/components/SignalBars.js

@@ -1,11 +1,11 @@
 // @bun
 import {
   SignalBars
-} from "../chunk-dctn29v0.js";
+} from "../chunk-qeqbg1rs.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   SignalBars
 };

dist/components/Spinner.js

@@ -1,10 +1,10 @@
 // @bun
 import {
   theme
-} from "../chunk-x7m82z3z.js";
+} from "../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 
 // src/components/Spinner.tsx
 import { setProp as _$setProp } from "@opentui/solid";

dist/components/Tabs.js

@@ -2,11 +2,11 @@
 import {
   Tabs,
   stepTabValue
-} from "../chunk-ev4wvhd2.js";
+} from "../chunk-yvprfbxx.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   stepTabValue,
   Tabs

dist/components/Toggle.js

@@ -1,12 +1,12 @@
 // @bun
 import {
   Toggle
-} from "../chunk-mezyz219.js";
+} from "../chunk-gc6m7gbw.js";
-import"../chunk-bscbaa87.js";
+import"../chunk-5my64v78.js";
-import"../chunk-x7m82z3z.js";
+import"../chunk-9cbm4zqz.js";
-import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 export {
   Toggle
 };

dist/components/help.js

@@ -1,15 +1,15 @@
 // @bun
-import {
-  HelpModal
-} from "../chunk-c7bjgk8c.js";
-import"../chunk-3t6nhsa8.js";
 import {
   HelpBar
-} from "../chunk-rvq53a2a.js";
+} from "../chunk-mj1hhxzy.js";
-import"../chunk-x7m82z3z.js";
+import {
-import"../chunk-7f8jagy5.js";
+  HelpModal
+} from "../chunk-qpd35mce.js";
+import"../chunk-6g54ffq0.js";
+import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
+import"../chunk-7f8jagy5.js";
 import"../chunk-cyvpvpws.js";
 export {
   HelpModal,

dist/components/index.js

@@ -1,40 +1,40 @@
 // @bun
-import {
-  Box
-} from "../chunk-ynqvwj4d.js";
 import {
   NotificationHost
-} from "../chunk-b0h95a6q.js";
+} from "../chunk-5q9en54m.js";
 import {
-  Toggle
+  ProgressBar
-} from "../chunk-mezyz219.js";
+} from "../chunk-hq5k1y0s.js";
-import {
-  MinSizeGuard
-} from "../chunk-eta27h3c.js";
 import {
   Sidebar
-} from "../chunk-hj94kpbg.js";
+} from "../chunk-wc3fqqt2.js";
+import {
+  SignalBars
+} from "../chunk-qeqbg1rs.js";
 import {
   Tabs,
   stepTabValue
-} from "../chunk-ev4wvhd2.js";
+} from "../chunk-yvprfbxx.js";
 import {
-  Modal
+  Toggle
-} from "../chunk-3t6nhsa8.js";
+} from "../chunk-gc6m7gbw.js";
 import {
   Badge
-} from "../chunk-bscbaa87.js";
+} from "../chunk-5my64v78.js";
 import {
-  ProgressBar
+  Box
-} from "../chunk-5m64a9kb.js";
+} from "../chunk-zvmj6cvs.js";
 import {
-  SignalBars
+  Modal
-} from "../chunk-dctn29v0.js";
+} from "../chunk-6g54ffq0.js";
-import"../chunk-x7m82z3z.js";
+import {
-import"../chunk-7f8jagy5.js";
+  MinSizeGuard
+} from "../chunk-xd40rew1.js";
+import"../chunk-y6txxzxk.js";
+import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";
-import"../chunk-y6txxzxk.js";
+import"../chunk-7f8jagy5.js";
 export {
   stepTabValue,
   Toggle,

dist/context/index.js

@@ -2,15 +2,15 @@
 import {
   createSimpleContext
 } from "../chunk-2px9e43p.js";
-import {
-  helpOpen,
-  toggleHelp
-} from "../chunk-cyvpvpws.js";
 import {
   dismiss,
   notifications,
   notify
 } from "../chunk-y6txxzxk.js";
+import {
+  helpOpen,
+  toggleHelp
+} from "../chunk-cyvpvpws.js";
 export {
   toggleHelp,
   notify,

dist/index.js

@@ -2,12 +2,12 @@
 import {
   presets,
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
+import"./chunk-hcq62p48.js";
+import"./chunk-cnhhssmz.js";
 import {
   configPath
 } from "./chunk-7f8jagy5.js";
-import"./chunk-hcq62p48.js";
-import"./chunk-cnhhssmz.js";
 export {
   theme,
   presets,

dist/solid.js

@@ -2,10 +2,10 @@
 import {
   presets,
   theme
-} from "./chunk-x7m82z3z.js";
+} from "./chunk-9cbm4zqz.js";
-import"./chunk-7f8jagy5.js";
 import"./chunk-hcq62p48.js";
 import"./chunk-cnhhssmz.js";
+import"./chunk-7f8jagy5.js";
 
 // src/solid.ts
 import { extend } from "@opentui/solid";

src/components/Modal.tsx

@@ -14,6 +14,14 @@ export interface ModalProps extends ParentProps {
 
 export function Modal(props: ModalProps) {
   const dimensions = useTerminalDimensions();
+  // Leave a margin of screen rows above/below so the panel never touches the
+  // terminal edges, then reserve the border + vertical padding from that
+  // budget for the scrollable content itself. On a short terminal (or with
+  // a lot of content, e.g. HelpModal's keybinding list) this keeps the panel
+  // fully on-screen — with a scrollbar — instead of spilling past the bottom
+  // edge with no way to see or reach the rest of it.
+  const maxPanelHeight = () => Math.max(5, dimensions().height - 4);
+  const maxContentHeight = () => Math.max(1, maxPanelHeight() - 4);
 
   return (
     <Portal>
@@ -25,13 +33,14 @@ export function Modal(props: ModalProps) {
           top={0}
           left={0}
           alignItems="center"
-          paddingTop={Math.floor(dimensions().height / 4)}
+          justifyContent="center"
           backgroundColor={props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150)}
           zIndex={2000}
           onMouseDown={theme.mouse ? props.onDismiss : undefined}
         >
           <box
             width={props.width ?? 50}
+            maxHeight={maxPanelHeight()}
             border
             borderStyle={theme.borderStyle}
             borderColor={props.accentColor ?? theme.primary}
@@ -43,7 +52,9 @@ export function Modal(props: ModalProps) {
             paddingBottom={1}
             onMouseDown={theme.mouse ? (event: MouseEvent) => event.stopPropagation() : undefined}
           >
+            <scrollbox maxHeight={maxContentHeight()} flexShrink={1} scrollY scrollX={false}>
               {props.children}
+            </scrollbox>
           </box>
         </box>
       </Show>