@h-rig/cli 0.0.6-alpha.82 → 0.0.6-alpha.84

package/dist/src/app-opentui/render/native-host.d.ts

@@ -0,0 +1,37 @@
+import { BoxRenderable, CodeRenderable, DiffRenderable, ScrollBoxRenderable, TextRenderable, TextTableRenderable, type CliRenderer } from "@opentui/core";
+import type { StageLayout } from "../layout";
+export type NativeMountKind = "code" | "diff" | "markdown" | "table";
+/** A scene's request to render native content in a rectangle of its panel. */
+export type NativeMount = {
+    readonly kind: NativeMountKind;
+    /** Source/markdown/diff text. */
+    readonly content: string;
+    /** Rows for `kind: "table"` — first row is the header. */
+    readonly rows?: readonly (readonly string[])[];
+    /** Tree-sitter filetype for `kind: "code"` (e.g. "typescript", "json"). */
+    readonly filetype?: string;
+    /** Cell rectangle to occupy (defaults to the centered content area). */
+    readonly top?: number;
+    readonly left?: number;
+    readonly width?: number;
+    readonly height?: number;
+    /** Pin to the bottom (log/diff tails). */
+    readonly stickyBottom?: boolean;
+};
+export type NativeHost = {
+    readonly scrollBox: ScrollBoxRenderable;
+    code: CodeRenderable | null;
+    diff: DiffRenderable | null;
+    table: TextTableRenderable | null;
+    active: NativeMountKind | null;
+    lastKey: string;
+};
+export declare function createNativeHost(renderer: CliRenderer): NativeHost | null;
+export declare function hideNativeHost(host: NativeHost | null): void;
+/** Position + populate the native host for a scene's mount request. Returns true
+ * if it rendered natively; false means the caller should fall back to lines. */
+export declare function applyNativeHost(host: NativeHost | null, mount: NativeMount, layout: StageLayout): boolean;
+export declare function destroyNativeHost(host: NativeHost | null): void;
+/** A tiny title bar the scene can keep above the native host (line-rendered). */
+export declare function nativeTitleBar(renderer: CliRenderer, id: string): TextRenderable;
+export { BoxRenderable };

package/dist/src/app-opentui/render/native-host.js

@@ -0,0 +1,179 @@
+// @bun
+// packages/cli/src/app-opentui/render/native-host.ts
+import {
+  BoxRenderable,
+  CodeRenderable,
+  DiffRenderable,
+  RGBA,
+  ScrollBoxRenderable,
+  SyntaxStyle,
+  TextRenderable,
+  TextTableRenderable
+} from "@opentui/core";
+
+// packages/cli/src/app-opentui/theme.ts
+import {
+  bold as otuiBold,
+  dim as otuiDim,
+  fg as otuiFg,
+  t,
+  TextAttributes
+} from "@opentui/core";
+var RIG_UI = {
+  bg: "#070809",
+  bg2: "#0b0c0e",
+  panel: "#101115",
+  panel2: "#14161b",
+  glass: "#1e2230",
+  border: "#2a2e3a",
+  ink: "#f4f5f8",
+  ink2: "#c7c9d3",
+  ink3: "#9aa0ae",
+  ink4: "#787b86",
+  lime: "#ccff4d",
+  limeDim: "#a9d63f",
+  cyan: "#56d8ff",
+  cyanDim: "#3f9fbd",
+  red: "#ff5d5d",
+  yellow: "#ffd24d",
+  magenta: "#ff79b0"
+};
+var styles = {
+  ink: otuiFg(RIG_UI.ink),
+  ink2: otuiFg(RIG_UI.ink2),
+  ink3: otuiFg(RIG_UI.ink3),
+  ink4: otuiFg(RIG_UI.ink4),
+  lime: otuiFg(RIG_UI.lime),
+  limeDim: otuiFg(RIG_UI.limeDim),
+  cyan: otuiFg(RIG_UI.cyan),
+  red: otuiFg(RIG_UI.red),
+  yellow: otuiFg(RIG_UI.yellow),
+  magenta: otuiFg(RIG_UI.magenta)
+};
+
+// packages/cli/src/app-opentui/render/native-host.ts
+var syntaxStyle = null;
+function rigSyntaxStyle() {
+  if (syntaxStyle)
+    return syntaxStyle;
+  syntaxStyle = SyntaxStyle.fromStyles({
+    keyword: { fg: RGBA.fromHex(RIG_UI.magenta), bold: true },
+    string: { fg: RGBA.fromHex(RIG_UI.lime) },
+    number: { fg: RGBA.fromHex(RIG_UI.cyan) },
+    comment: { fg: RGBA.fromHex(RIG_UI.ink4), italic: true },
+    function: { fg: RGBA.fromHex(RIG_UI.cyan) },
+    type: { fg: RGBA.fromHex(RIG_UI.limeDim) },
+    constant: { fg: RGBA.fromHex(RIG_UI.yellow) },
+    default: { fg: RGBA.fromHex(RIG_UI.ink2) }
+  });
+  return syntaxStyle;
+}
+function tableContent(rows) {
+  return rows.map((row, rowIndex) => row.map((cell) => [{ __isChunk: true, text: cell, fg: RGBA.fromHex(rowIndex === 0 ? RIG_UI.ink3 : RIG_UI.ink2) }]));
+}
+function createNativeHost(renderer) {
+  try {
+    const scrollBox = new ScrollBoxRenderable(renderer, {
+      id: "rig-native-scrollbox",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: 1,
+      height: 1,
+      scrollY: true,
+      zIndex: 9,
+      visible: false
+    });
+    renderer.root.add(scrollBox);
+    return { scrollBox, code: null, diff: null, table: null, active: null, lastKey: "" };
+  } catch {
+    return null;
+  }
+}
+function hideAllChildren(host) {
+  if (host.code)
+    host.code.visible = false;
+  if (host.diff)
+    host.diff.visible = false;
+  if (host.table)
+    host.table.visible = false;
+}
+function hideNativeHost(host) {
+  if (!host)
+    return;
+  host.scrollBox.visible = false;
+  hideAllChildren(host);
+  host.active = null;
+}
+function applyNativeHost(host, mount, layout) {
+  if (!host)
+    return false;
+  try {
+    const left = mount.left ?? layout.centerLeft;
+    const top = mount.top ?? layout.centerTop;
+    const width = Math.max(8, mount.width ?? layout.centerWidth);
+    const height = Math.max(3, mount.height ?? layout.centerHeight);
+    host.scrollBox.left = left;
+    host.scrollBox.top = top;
+    host.scrollBox.width = width;
+    host.scrollBox.height = height;
+    host.scrollBox.visible = true;
+    hideAllChildren(host);
+    const rowCount = mount.rows?.length ?? 0;
+    const key = `${mount.kind}:${width}x${height}:${mount.content.length}:${mount.filetype ?? ""}:${rowCount}`;
+    if (mount.kind === "table") {
+      if (!host.table) {
+        host.table = new TextTableRenderable(host.scrollBox.ctx, { id: "rig-native-table", content: [], width: "100%", showBorders: true, columnWidthMode: "full", borderColor: RIG_UI.ink4 });
+        host.scrollBox.add(host.table);
+      }
+      if (host.lastKey !== key)
+        host.table.content = tableContent(mount.rows ?? []);
+      host.table.visible = true;
+    } else if (mount.kind === "diff") {
+      if (!host.diff) {
+        host.diff = new DiffRenderable(host.scrollBox.ctx, { id: "rig-native-diff", diff: "", width: "100%" });
+        host.scrollBox.add(host.diff);
+      }
+      if (host.lastKey !== key)
+        host.diff.diff = mount.content;
+      host.diff.visible = true;
+    } else {
+      const filetype = mount.kind === "markdown" ? "markdown" : mount.filetype ?? "text";
+      if (!host.code) {
+        host.code = new CodeRenderable(host.scrollBox.ctx, { id: "rig-native-code", content: "", filetype, syntaxStyle: rigSyntaxStyle(), width: "100%" });
+        host.scrollBox.add(host.code);
+      }
+      if (host.lastKey !== key) {
+        host.code.filetype = filetype;
+        host.code.content = mount.content;
+      }
+      host.code.visible = true;
+    }
+    host.active = mount.kind;
+    host.lastKey = key;
+    if (mount.stickyBottom)
+      host.scrollBox.scrollTo?.({ x: 0, y: Number.MAX_SAFE_INTEGER });
+    return true;
+  } catch {
+    hideNativeHost(host);
+    return false;
+  }
+}
+function destroyNativeHost(host) {
+  if (!host)
+    return;
+  try {
+    host.scrollBox.destroy?.();
+  } catch {}
+}
+function nativeTitleBar(renderer, id) {
+  return new TextRenderable(renderer, { id, content: "", position: "absolute", left: 0, top: 0, fg: RIG_UI.ink3, zIndex: 10, visible: false });
+}
+export {
+  nativeTitleBar,
+  hideNativeHost,
+  destroyNativeHost,
+  createNativeHost,
+  applyNativeHost,
+  BoxRenderable
+};

package/dist/src/app-opentui/render/panel-layout.d.ts

@@ -0,0 +1,38 @@
+import type { StageLayout } from "../layout";
+import type { AppScenePanel } from "../types";
+export type PanelCellRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly headerHeight: number;
+    readonly dividerY: number;
+};
+export type PanelContentRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly paddingX: number;
+    readonly paddingY: number;
+    readonly contentWidth: number;
+};
+export type PanelPixelSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export type PanelPixelPlacement = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly leftCells: number;
+    readonly topCells: number;
+    readonly widthCells: number;
+    readonly heightCells: number;
+};
+export declare function panelCellRect(layout: StageLayout, panel: AppScenePanel): PanelCellRect | null;
+export declare function panelContentRect(layout: StageLayout, panel: AppScenePanel): PanelContentRect | null;
+export declare function panelPixelPlacement(layout: StageLayout, panel: AppScenePanel, size: PanelPixelSize, minPixels?: number): PanelPixelPlacement | null;

package/dist/src/app-opentui/render/panel-layout.js

@@ -0,0 +1,48 @@
+// @bun
+// packages/cli/src/app-opentui/render/panel-layout.ts
+function panelCellRect(layout, panel) {
+  const left = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
+  const desiredWidth = panel.width ?? layout.centerWidth;
+  const width = Math.max(1, Math.min(layout.width - left, desiredWidth));
+  const top = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
+  const height = Math.max(1, Math.min(layout.height - top, panel.height));
+  if (width <= 3 || height <= 3)
+    return null;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3)) : 0;
+  const dividerY = headerHeight ? Math.min(bottom - 1, top + headerHeight) : top;
+  return { left, top, width, height, right, bottom, headerHeight, dividerY };
+}
+function panelContentRect(layout, panel) {
+  const rect = panelCellRect(layout, panel);
+  if (!rect)
+    return null;
+  const chromeInset = panel.chrome === "ad-terminal" ? 1 : 0;
+  const left = rect.left + chromeInset;
+  const top = rect.top + rect.headerHeight + chromeInset;
+  const width = Math.max(1, Math.min(layout.width - left, rect.width - chromeInset * 2));
+  const height = Math.max(1, Math.min(layout.height - top, rect.height - rect.headerHeight - chromeInset * 2));
+  const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
+  const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
+  const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+  return { left, top, width, height, paddingX, paddingY, contentWidth };
+}
+function panelPixelPlacement(layout, panel, size, minPixels = 8) {
+  const cellW = size.width / layout.width;
+  const cellH = size.height / layout.height;
+  const leftCells = layout.centerLeft + (panel.left ?? 0);
+  const topCells = layout.centerTop + panel.top;
+  const widthCells = panel.width ?? layout.centerWidth;
+  const heightCells = panel.height;
+  const left = Math.round(leftCells * cellW);
+  const top = Math.round(topCells * cellH);
+  const width = Math.round(widthCells * cellW);
+  const height = Math.round(heightCells * cellH);
+  return width > minPixels && height > minPixels ? { left, top, width, height, leftCells, topCells, widthCells, heightCells } : null;
+}
+export {
+  panelPixelPlacement,
+  panelContentRect,
+  panelCellRect
+};

package/dist/src/app-opentui/render/panels.d.ts

@@ -4,6 +4,8 @@ import type { AppSceneLine, AppScenePanel } from "../types";
 import { type TextLineRenderable } from "./text";
 export type ScrollPanelRenderable = ScrollBoxRenderable & {
     __rigTextLines: TextLineRenderable[];
+    __rigRenderer: CliRenderer;
+    __rigOnLineMouseDown?: (line: AppSceneLine, event: MouseEvent) => void;
     __rigPanelId?: string;
 };
 export declare function createScrollPanelLayer(renderer: CliRenderer, id: string, onLineMouseDown?: (line: AppSceneLine, event: MouseEvent) => void): ScrollPanelRenderable;

package/dist/src/app-opentui/render/panels.js

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/render/panels.ts
-import { RGBA, ScrollBoxRenderable } from "@opentui/core";
+import { RGBA as RGBA2, ScrollBoxRenderable } from "@opentui/core";
 
 // packages/cli/src/app-opentui/theme.ts
 import {
@@ -14,15 +14,17 @@ var RIG_UI = {
   bg: "#070809",
   bg2: "#0b0c0e",
   panel: "#101115",
-  panel2: "#101115",
-  glass: "#14161b",
-  ink: "#f2f3f6",
-  ink2: "#aeb0ba",
-  ink3: "#6c6e79",
-  ink4: "#44464f",
+  panel2: "#14161b",
+  glass: "#1e2230",
+  border: "#2a2e3a",
+  ink: "#f4f5f8",
+  ink2: "#c7c9d3",
+  ink3: "#9aa0ae",
+  ink4: "#787b86",
   lime: "#ccff4d",
   limeDim: "#a9d63f",
   cyan: "#56d8ff",
+  cyanDim: "#3f9fbd",
   red: "#ff5d5d",
   yellow: "#ffd24d",
   magenta: "#ff79b0"
@@ -40,8 +42,39 @@ var styles = {
   magenta: otuiFg(RIG_UI.magenta)
 };
 
+// packages/cli/src/app-opentui/render/panel-layout.ts
+function panelCellRect(layout, panel) {
+  const left = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
+  const desiredWidth = panel.width ?? layout.centerWidth;
+  const width = Math.max(1, Math.min(layout.width - left, desiredWidth));
+  const top = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
+  const height = Math.max(1, Math.min(layout.height - top, panel.height));
+  if (width <= 3 || height <= 3)
+    return null;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3)) : 0;
+  const dividerY = headerHeight ? Math.min(bottom - 1, top + headerHeight) : top;
+  return { left, top, width, height, right, bottom, headerHeight, dividerY };
+}
+function panelContentRect(layout, panel) {
+  const rect = panelCellRect(layout, panel);
+  if (!rect)
+    return null;
+  const chromeInset = panel.chrome === "ad-terminal" ? 1 : 0;
+  const left = rect.left + chromeInset;
+  const top = rect.top + rect.headerHeight + chromeInset;
+  const width = Math.max(1, Math.min(layout.width - left, rect.width - chromeInset * 2));
+  const height = Math.max(1, Math.min(layout.height - top, rect.height - rect.headerHeight - chromeInset * 2));
+  const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
+  const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
+  const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+  return { left, top, width, height, paddingX, paddingY, contentWidth };
+}
+
 // packages/cli/src/app-opentui/render/text.ts
-import { TextAttributes as TextAttributes2, TextRenderable } from "@opentui/core";
+import { RGBA, TextAttributes as TextAttributes2, TextRenderable } from "@opentui/core";
+var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
 function selectableMouseHandler(currentLineRef, onLineMouseDown) {
   return (event) => {
     const currentLine = currentLineRef();
@@ -74,25 +107,30 @@ function applyFlowTextLine(renderable, line, width) {
   renderable.width = Math.max(1, width);
   renderable.content = line?.styledText ?? line?.text ?? "";
   renderable.fg = line?.fg ?? RIG_UI.ink2;
+  renderable.bg = line?.bg ?? TRANSPARENT;
   renderable.attributes = line?.bold ? TextAttributes2.BOLD : line?.dim ? TextAttributes2.DIM : 0;
 }
 
 // packages/cli/src/app-opentui/render/panels.ts
-var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
+var TRANSPARENT2 = RGBA2.fromInts(0, 0, 0, 0);
 var MAX_PANEL_LINES = 420;
+var PANEL_OPAQUE_ALPHA = 255;
+var PANEL_BORDER = hexToRgba(RIG_UI.border, 255);
 function hexToRgba(hex, alpha) {
   const clean = hex.replace(/^#/, "");
   const full = clean.length === 3 ? clean.split("").map((part) => `${part}${part}`).join("") : clean;
   const value = Number.parseInt(full, 16);
   if (!Number.isFinite(value))
-    return RGBA.fromInts(14, 15, 17, alpha);
-  return RGBA.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
+    return RGBA2.fromInts(14, 15, 17, alpha);
+  return RGBA2.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
 }
 function panelBackground(panel) {
-  return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, panel.backgroundAlpha ?? 184);
+  return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, PANEL_OPAQUE_ALPHA);
 }
 function panelBorder(panel) {
-  return panel.borderColor ? hexToRgba(panel.borderColor, panel.borderAlpha ?? 54) : TRANSPARENT;
+  if (panel.borderColor)
+    return hexToRgba(panel.borderColor, panel.borderAlpha ?? 255);
+  return PANEL_BORDER;
 }
 function createScrollPanelLayer(renderer, id, onLineMouseDown) {
   const panel = new ScrollBoxRenderable(renderer, {
@@ -102,7 +140,7 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
     top: -2,
     width: 1,
     height: 1,
-    backgroundColor: TRANSPARENT,
+    backgroundColor: TRANSPARENT2,
     border: false,
     shouldFill: true,
     opacity: 1,
@@ -118,7 +156,7 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
       visible: false,
       width: 1,
       trackOptions: {
-        backgroundColor: TRANSPARENT,
+        backgroundColor: TRANSPARENT2,
         foregroundColor: hexToRgba(RIG_UI.ink4, 84)
       }
     },
@@ -126,18 +164,24 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
       height: 0,
       visible: false,
       trackOptions: {
-        backgroundColor: TRANSPARENT,
-        foregroundColor: TRANSPARENT
+        backgroundColor: TRANSPARENT2,
+        foregroundColor: TRANSPARENT2
       }
     }
   });
   panel.__rigTextLines = [];
-  for (let index = 0;index < MAX_PANEL_LINES; index += 1) {
-    const line = createFlowTextLine(renderer, `${id}-line-${index}`, onLineMouseDown);
+  panel.__rigRenderer = renderer;
+  panel.__rigOnLineMouseDown = onLineMouseDown;
+  return panel;
+}
+function ensurePanelLineCount(panel, desiredCount) {
+  const target = Math.min(MAX_PANEL_LINES, Math.max(0, desiredCount));
+  while (panel.__rigTextLines.length < target) {
+    const index = panel.__rigTextLines.length;
+    const line = createFlowTextLine(panel.__rigRenderer, `${panel.id}-line-${index}`, panel.__rigOnLineMouseDown);
     panel.__rigTextLines.push(line);
     panel.add(line);
   }
-  return panel;
 }
 function hidePanel(panel) {
   panel.visible = false;
@@ -145,7 +189,7 @@ function hidePanel(panel) {
   panel.left = 0;
   panel.width = 1;
   panel.height = 1;
-  panel.backgroundColor = TRANSPARENT;
+  panel.backgroundColor = TRANSPARENT2;
   panel.border = false;
   panel.__rigPanelId = undefined;
   panel.__rigTextLines.forEach((line) => applyFlowTextLine(line, undefined, 1));
@@ -157,19 +201,12 @@ function applyScrollPanels(panels, layout, scenePanels) {
       hidePanel(renderable);
       return;
     }
-    const cardLeft = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
-    const desiredWidth = panel.width ?? layout.centerWidth;
-    const cardWidth = Math.max(1, Math.min(layout.width - cardLeft, desiredWidth));
-    const cardTop = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
-    const cardHeight = Math.max(1, Math.min(layout.height - cardTop, panel.height));
-    const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(cardHeight - 2, panel.headerHeight ?? 3)) : 0;
-    const left = cardLeft + (panel.chrome === "ad-terminal" ? 1 : 0);
-    const top = cardTop + headerHeight + (panel.chrome === "ad-terminal" ? 1 : 0);
-    const width = Math.max(1, Math.min(layout.width - left, cardWidth - (panel.chrome === "ad-terminal" ? 2 : 0)));
-    const height = Math.max(1, Math.min(layout.height - top, cardHeight - headerHeight - (panel.chrome === "ad-terminal" ? 2 : 0)));
-    const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
-    const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
-    const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+    const contentRect = panelContentRect(layout, panel);
+    if (!contentRect) {
+      hidePanel(renderable);
+      return;
+    }
+    const { left, top, width, height, paddingX, paddingY, contentWidth } = contentRect;
     renderable.visible = true;
     renderable.left = left;
     renderable.top = top;
@@ -177,9 +214,10 @@ function applyScrollPanels(panels, layout, scenePanels) {
     renderable.height = height;
     renderable.zIndex = panel.zIndex ?? 6;
     renderable.opacity = panel.opacity ?? 1;
-    renderable.backgroundColor = panel.chrome === "ad-terminal" ? TRANSPARENT : panelBackground(panel);
-    renderable.border = panel.chrome === "ad-terminal" ? false : panel.border ?? false;
-    renderable.borderColor = panelBorder(panel);
+    const adTerminal = panel.chrome === "ad-terminal";
+    renderable.backgroundColor = adTerminal ? TRANSPARENT2 : panelBackground(panel);
+    renderable.border = adTerminal ? false : true;
+    renderable.borderColor = adTerminal ? TRANSPARENT2 : panelBorder(panel);
     renderable.paddingX = paddingX;
     renderable.paddingY = paddingY;
     renderable.stickyScroll = panel.stickyScroll ?? false;
@@ -190,8 +228,10 @@ function applyScrollPanels(panels, layout, scenePanels) {
       renderable.__rigPanelId = panel.id;
       renderable.scrollTo(0);
     }
+    const lineCount = Math.min(panel.lines.length, MAX_PANEL_LINES);
+    ensurePanelLineCount(renderable, lineCount);
     renderable.__rigTextLines.forEach((line, lineIndex) => {
-      applyFlowTextLine(line, panel.lines[lineIndex], contentWidth);
+      applyFlowTextLine(line, lineIndex < lineCount ? panel.lines[lineIndex] : undefined, contentWidth);
     });
   });
 }

package/dist/src/app-opentui/render/preloader.d.ts

@@ -0,0 +1,10 @@
+import type { StageLayout } from "../layout";
+import type { AppSceneFrame, AppSceneId } from "../types";
+export type PreloaderTransitionState = {
+    scene: AppSceneId | null;
+    startedAtMs: number;
+    minUntilMs: number;
+};
+export declare function maybeStartPreloaderTransition(transition: PreloaderTransitionState, scene: AppSceneId, now?: number): void;
+export declare function isPreloaderActive(transition: PreloaderTransitionState, targetReady: boolean, now?: number): boolean;
+export declare function renderAsciiPreloaderFrame(scene: AppSceneId, layout: StageLayout, tick: number): AppSceneFrame;