@h-rig/cli 0.0.6-alpha.83 → 0.0.6-alpha.85

package/dist/src/app-opentui/react/SceneFrameView.d.ts

@@ -0,0 +1,7 @@
+import type { StageLayout } from "../layout";
+import type { AppSceneFrame, AppSceneLine } from "../types";
+export declare function SceneFrameView(props: {
+    frame: AppSceneFrame;
+    layout: StageLayout;
+    onLineClick?: (line: AppSceneLine) => void;
+}): React.ReactNode;

package/dist/src/app-opentui/react/SceneFrameView.js

@@ -0,0 +1,529 @@
+// @bun
+// packages/cli/src/app-opentui/react/SceneFrameView.tsx
+import { useEffect, useRef } from "react";
+import { useRenderer } from "@opentui/react";
+import { TextAttributes as TextAttributes4 } 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/layout.ts
+function visibleWidth(text) {
+  return [...text].length;
+}
+function alignText(text, width, align = "left") {
+  const length = visibleWidth(text);
+  if (length >= width)
+    return text;
+  const pad = width - length;
+  if (align === "right")
+    return `${" ".repeat(pad)}${text}`;
+  if (align === "center") {
+    const left = Math.floor(pad / 2);
+    return `${" ".repeat(left)}${text}${" ".repeat(pad - left)}`;
+  }
+  return text;
+}
+function truncateText(text, width) {
+  if (visibleWidth(text) <= width)
+    return text;
+  if (width <= 1)
+    return "\u2026";
+  return `${[...text].slice(0, Math.max(0, width - 1)).join("")}\u2026`;
+}
+
+// packages/cli/src/app-opentui/drone.ts
+import { RGBA, StyledText, TextAttributes as TextAttributes2 } from "@opentui/core";
+var COLOR = {
+  body: RGBA.fromHex(RIG_UI.lime),
+  mini: RGBA.fromHex(RIG_UI.limeDim),
+  rotor: RGBA.fromHex(RIG_UI.cyan),
+  path: RGBA.fromHex(RIG_UI.cyan),
+  eye: RGBA.fromHex(RIG_UI.ink),
+  dim: RGBA.fromHex(RIG_UI.ink4),
+  ink: RGBA.fromHex(RIG_UI.ink2)
+};
+
+// packages/cli/src/app-opentui/render/scene.ts
+function fitSceneLine(input, layout) {
+  const fitted = truncateText(input.text, layout.centerWidth);
+  return {
+    ...input,
+    text: alignText(fitted, layout.centerWidth, input.align ?? "left")
+  };
+}
+function fitSceneLines(lines, layout) {
+  return lines.slice(0, layout.centerHeight).map((entry) => fitSceneLine(entry, layout));
+}
+
+// packages/cli/src/app-opentui/render/text.ts
+import { RGBA as RGBA2, TextAttributes as TextAttributes3, TextRenderable } from "@opentui/core";
+var TRANSPARENT = RGBA2.fromInts(0, 0, 0, 0);
+function selectableMouseHandler(currentLineRef, onLineMouseDown) {
+  return (event) => {
+    const currentLine = currentLineRef();
+    if (currentLine?.selectableIndex === undefined)
+      return;
+    onLineMouseDown?.(currentLine, event);
+  };
+}
+function createFlowTextLine(renderer, id, onLineMouseDown) {
+  let currentLine;
+  const renderable = new TextRenderable(renderer, {
+    id,
+    content: "",
+    width: "100%",
+    height: 1,
+    flexShrink: 0,
+    fg: RIG_UI.ink2,
+    selectable: true,
+    onMouseDown: selectableMouseHandler(() => currentLine, onLineMouseDown)
+  });
+  renderable.setRigSceneLine = (line) => {
+    currentLine = line;
+  };
+  return renderable;
+}
+function applyFlowTextLine(renderable, line, width) {
+  renderable.setRigSceneLine?.(line);
+  renderable.visible = Boolean(line);
+  renderable.height = line ? 1 : 0;
+  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 ? TextAttributes3.BOLD : line?.dim ? TextAttributes3.DIM : 0;
+}
+
+// packages/cli/src/app-opentui/render/panels.ts
+import { RGBA as RGBA3, ScrollBoxRenderable } from "@opentui/core";
+
+// 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/panels.ts
+var TRANSPARENT2 = RGBA3.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 RGBA3.fromInts(14, 15, 17, alpha);
+  return RGBA3.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
+}
+function panelBackground(panel) {
+  return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, PANEL_OPAQUE_ALPHA);
+}
+function panelBorder(panel) {
+  if (panel.borderColor)
+    return hexToRgba(panel.borderColor, panel.borderAlpha ?? 255);
+  return PANEL_BORDER;
+}
+function createScrollPanelLayer(renderer, id, onLineMouseDown) {
+  const panel = new ScrollBoxRenderable(renderer, {
+    id,
+    position: "absolute",
+    left: 0,
+    top: -2,
+    width: 1,
+    height: 1,
+    backgroundColor: TRANSPARENT2,
+    border: false,
+    shouldFill: true,
+    opacity: 1,
+    zIndex: 6,
+    scrollY: true,
+    scrollX: false,
+    stickyScroll: false,
+    viewportCulling: true,
+    paddingX: 2,
+    paddingY: 1,
+    verticalScrollbarOptions: {
+      showArrows: false,
+      visible: false,
+      width: 1,
+      trackOptions: {
+        backgroundColor: TRANSPARENT2,
+        foregroundColor: hexToRgba(RIG_UI.ink4, 84)
+      }
+    },
+    horizontalScrollbarOptions: {
+      height: 0,
+      visible: false,
+      trackOptions: {
+        backgroundColor: TRANSPARENT2,
+        foregroundColor: TRANSPARENT2
+      }
+    }
+  });
+  panel.__rigTextLines = [];
+  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);
+  }
+}
+function hidePanel(panel) {
+  panel.visible = false;
+  panel.top = -2;
+  panel.left = 0;
+  panel.width = 1;
+  panel.height = 1;
+  panel.backgroundColor = TRANSPARENT2;
+  panel.border = false;
+  panel.__rigPanelId = undefined;
+  panel.__rigTextLines.forEach((line) => applyFlowTextLine(line, undefined, 1));
+}
+function applyScrollPanels(panels, layout, scenePanels) {
+  panels.forEach((renderable, index) => {
+    const panel = scenePanels[index];
+    if (!panel || panel.height <= 0) {
+      hidePanel(renderable);
+      return;
+    }
+    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;
+    renderable.width = width;
+    renderable.height = height;
+    renderable.zIndex = panel.zIndex ?? 6;
+    renderable.opacity = panel.opacity ?? 1;
+    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;
+    renderable.stickyStart = panel.stickyStart;
+    renderable.verticalScrollBar.visible = false;
+    renderable.horizontalScrollBar.visible = false;
+    if (renderable.__rigPanelId !== panel.id) {
+      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, lineIndex < lineCount ? panel.lines[lineIndex] : undefined, contentWidth);
+    });
+  });
+}
+
+// packages/cli/src/app-opentui/render/native-host.ts
+import {
+  BoxRenderable,
+  CodeRenderable,
+  DiffRenderable,
+  RGBA as RGBA4,
+  ScrollBoxRenderable as ScrollBoxRenderable2,
+  SyntaxStyle,
+  TextRenderable as TextRenderable2,
+  TextTableRenderable
+} from "@opentui/core";
+var syntaxStyle = null;
+function rigSyntaxStyle() {
+  if (syntaxStyle)
+    return syntaxStyle;
+  syntaxStyle = SyntaxStyle.fromStyles({
+    keyword: { fg: RGBA4.fromHex(RIG_UI.magenta), bold: true },
+    string: { fg: RGBA4.fromHex(RIG_UI.lime) },
+    number: { fg: RGBA4.fromHex(RIG_UI.cyan) },
+    comment: { fg: RGBA4.fromHex(RIG_UI.ink4), italic: true },
+    function: { fg: RGBA4.fromHex(RIG_UI.cyan) },
+    type: { fg: RGBA4.fromHex(RIG_UI.limeDim) },
+    constant: { fg: RGBA4.fromHex(RIG_UI.yellow) },
+    default: { fg: RGBA4.fromHex(RIG_UI.ink2) }
+  });
+  return syntaxStyle;
+}
+function tableContent(rows) {
+  return rows.map((row, rowIndex) => row.map((cell) => [{ __isChunk: true, text: cell, fg: RGBA4.fromHex(rowIndex === 0 ? RIG_UI.ink3 : RIG_UI.ink2) }]));
+}
+function createNativeHost(renderer) {
+  try {
+    const scrollBox = new ScrollBoxRenderable2(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 {}
+}
+
+// packages/cli/src/app-opentui/react/scroll.ts
+var registries = new Set;
+function registerScrollables(provider) {
+  registries.add(provider);
+  return () => {
+    registries.delete(provider);
+  };
+}
+
+// packages/cli/src/app-opentui/react/SceneFrameView.tsx
+import { jsxDEV, Fragment } from "@opentui/react/jsx-dev-runtime";
+function lineAttributes(line) {
+  return line?.bold ? TextAttributes4.BOLD : line?.dim ? TextAttributes4.DIM : 0;
+}
+function lineContent(line) {
+  return line.styledText ?? line.text ?? "";
+}
+function LineView(props) {
+  const { line, onLineClick } = props;
+  return /* @__PURE__ */ jsxDEV("text", {
+    style: { position: "absolute", left: props.left, top: props.top, width: props.width, zIndex: 5 },
+    fg: line.fg ?? RIG_UI.ink2,
+    bg: line.bg ?? TRANSPARENT,
+    attributes: lineAttributes(line),
+    content: lineContent(line),
+    onMouseDown: onLineClick ? () => onLineClick(line) : undefined
+  }, undefined, false, undefined, this);
+}
+function PanelHost(props) {
+  const renderer = useRenderer();
+  const poolRef = useRef([]);
+  const clickRef = useRef(props.onLineClick);
+  clickRef.current = props.onLineClick;
+  useEffect(() => {
+    const unregister = registerScrollables(() => poolRef.current);
+    return () => {
+      unregister();
+      for (const panel of poolRef.current) {
+        try {
+          renderer.root.remove(panel.id);
+        } catch {}
+      }
+      poolRef.current = [];
+    };
+  }, [renderer]);
+  useEffect(() => {
+    const pool = poolRef.current;
+    while (pool.length < props.panels.length) {
+      const panel = createScrollPanelLayer(renderer, `react-scroll-panel-${pool.length}`, (line) => clickRef.current?.(line));
+      renderer.root.add(panel);
+      pool.push(panel);
+    }
+    applyScrollPanels(pool, props.layout, props.panels);
+  });
+  return null;
+}
+function NativeHostView(props) {
+  const renderer = useRenderer();
+  const hostRef = useRef(null);
+  useEffect(() => {
+    const host = createNativeHost(renderer);
+    hostRef.current = host;
+    const unregister = registerScrollables(() => host ? [host.scrollBox] : []);
+    return () => {
+      unregister();
+      destroyNativeHost(hostRef.current);
+      hostRef.current = null;
+    };
+  }, [renderer]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host)
+      return;
+    if (props.native) {
+      if (!applyNativeHost(host, props.native, props.layout))
+        hideNativeHost(host);
+    } else {
+      hideNativeHost(host);
+    }
+  });
+  return null;
+}
+function SceneFrameView(props) {
+  const { frame, layout } = props;
+  const contentLayout = frame.fullScreen ? { ...layout, centerWidth: layout.width, centerLeft: 0, centerTop: 0 } : layout;
+  const lines = fitSceneLines(frame.lines ?? [], contentLayout);
+  const nativeActive = frame.native && !frame.terminalActive;
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      lines.map((line, index) => /* @__PURE__ */ jsxDEV(LineView, {
+        line,
+        top: contentLayout.centerTop + index,
+        left: contentLayout.centerLeft,
+        width: contentLayout.centerWidth,
+        onLineClick: props.onLineClick
+      }, `line-${index}`, false, undefined, this)),
+      /* @__PURE__ */ jsxDEV(PanelHost, {
+        panels: frame.panels ?? [],
+        layout: contentLayout,
+        onLineClick: props.onLineClick
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(NativeHostView, {
+        native: nativeActive ? frame.native : undefined,
+        layout: contentLayout
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  SceneFrameView
+};

package/dist/src/app-opentui/react/context.d.ts

@@ -0,0 +1,17 @@
+import type { AppRuntime, AppState, AppStore } from "../types";
+type RigAppContextValue = {
+    readonly store: AppStore;
+    readonly runtime: AppRuntime;
+    readonly runAppAction: (label: string, action: () => Promise<unknown>) => void;
+};
+export declare function RigAppProvider(props: {
+    value: RigAppContextValue;
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare function useAppState(): AppState;
+export declare function useRuntime(): AppRuntime;
+/** The raw store — needed by the reused legacy selection helpers
+ * (moveSelection/selectIndex/selectById) which operate on the store directly. */
+export declare function useStore(): AppStore;
+export declare function useRunAppAction(): RigAppContextValue["runAppAction"];
+export type { RigAppContextValue };

package/dist/src/app-opentui/react/context.js

@@ -0,0 +1,37 @@
+// @bun
+// packages/cli/src/app-opentui/react/context.tsx
+import { createContext, useContext, useSyncExternalStore } from "react";
+import { jsxDEV } from "@opentui/react/jsx-dev-runtime";
+var RigAppContext = createContext(null);
+function RigAppProvider(props) {
+  return /* @__PURE__ */ jsxDEV(RigAppContext.Provider, {
+    value: props.value,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function useCtx() {
+  const value = useContext(RigAppContext);
+  if (!value)
+    throw new Error("Rig react components must render inside <RigAppProvider>.");
+  return value;
+}
+function useAppState() {
+  const { store } = useCtx();
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+function useRuntime() {
+  return useCtx().runtime;
+}
+function useStore() {
+  return useCtx().store;
+}
+function useRunAppAction() {
+  return useCtx().runAppAction;
+}
+export {
+  useStore,
+  useRuntime,
+  useRunAppAction,
+  useAppState,
+  RigAppProvider
+};

package/dist/src/app-opentui/react/launch.d.ts

@@ -0,0 +1,2 @@
+import type { AppLaunchOptions } from "../types";
+export declare function launchRigReactApp(options: AppLaunchOptions): Promise<void>;