gloomberb 0.6.0 → 0.6.1

package/src/renderers/opentui/image-loader.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { Jimp } from "jimp";
+import { resizeImageToBitmap, type JimpImageLike } from "./image-loader";
+
+describe("resizeImageToBitmap", () => {
+  test("preserves aspect ratio for contained images", () => {
+    const source = new Jimp({ width: 4, height: 2, color: 0xff0000ff }) as unknown as JimpImageLike;
+    const bitmap = resizeImageToBitmap(source, { width: 4, height: 4, objectFit: "contain" });
+
+    expect(bitmap.width).toBe(4);
+    expect(bitmap.height).toBe(4);
+    expect([...bitmap.pixels.slice(0, 4)]).toEqual([0, 0, 0, 0]);
+    expect([...bitmap.pixels.slice(4 * 4, 4 * 4 + 4)]).toEqual([255, 0, 0, 255]);
+  });
+
+  test("fills the target for covered images", () => {
+    const source = new Jimp({ width: 4, height: 2, color: 0xff0000ff }) as unknown as JimpImageLike;
+    const bitmap = resizeImageToBitmap(source, { width: 4, height: 4, objectFit: "cover" });
+
+    expect(bitmap.width).toBe(4);
+    expect(bitmap.height).toBe(4);
+    expect([...bitmap.pixels.slice(0, 4)]).toEqual([255, 0, 0, 255]);
+    expect([...bitmap.pixels.slice((bitmap.pixels.length - 4), bitmap.pixels.length)]).toEqual([255, 0, 0, 255]);
+  });
+});

package/src/renderers/opentui/image-loader.ts

@@ -0,0 +1,105 @@
+import { Jimp } from "jimp";
+import type { NativeChartBitmap } from "../../components/chart/native/chart-rasterizer";
+
+type ImageObjectFit = "contain" | "cover";
+
+export interface JimpImageLike {
+  bitmap: {
+    width: number;
+    height: number;
+    data: Uint8Array;
+  };
+  clone(): JimpImageLike;
+  contain(options: { w: number; h: number }): JimpImageLike;
+  cover(options: { w: number; h: number }): JimpImageLike;
+}
+
+interface ImageBitmapOptions {
+  width: number;
+  height: number;
+  objectFit: ImageObjectFit;
+}
+
+const MAX_REMOTE_IMAGE_BYTES = 12 * 1024 * 1024;
+const IMAGE_CACHE_LIMIT = 48;
+
+const sourceImageCache = new Map<string, Promise<JimpImageLike>>();
+const bitmapCache = new Map<string, Promise<NativeChartBitmap>>();
+
+function remember<K, V>(cache: Map<K, V>, key: K, value: V) {
+  cache.set(key, value);
+  while (cache.size > IMAGE_CACHE_LIMIT) {
+    const firstKey = cache.keys().next().value as K | undefined;
+    if (firstKey === undefined) break;
+    cache.delete(firstKey);
+  }
+}
+
+async function fetchImageBytes(src: string): Promise<Buffer> {
+  const response = await fetch(src, {
+    headers: {
+      "User-Agent": "Gloomberb/0.6 image renderer",
+    },
+  });
+  if (!response.ok) {
+    throw new Error(`Image request failed with HTTP ${response.status}`);
+  }
+
+  const data = await response.arrayBuffer();
+  if (data.byteLength > MAX_REMOTE_IMAGE_BYTES) {
+    throw new Error("Image is too large to render inline");
+  }
+
+  return Buffer.from(data);
+}
+
+function loadSourceImage(src: string): Promise<JimpImageLike> {
+  const cached = sourceImageCache.get(src);
+  if (cached) return cached;
+
+  const promise = fetchImageBytes(src)
+    .then((bytes) => Jimp.read(bytes) as Promise<JimpImageLike>)
+    .catch((error) => {
+      sourceImageCache.delete(src);
+      throw error;
+    });
+
+  remember(sourceImageCache, src, promise);
+  return promise;
+}
+
+export function resizeImageToBitmap(source: JimpImageLike, options: ImageBitmapOptions): NativeChartBitmap {
+  const width = Math.max(1, Math.round(options.width));
+  const height = Math.max(1, Math.round(options.height));
+  const image = source.clone();
+
+  if (options.objectFit === "cover") {
+    image.cover({ w: width, h: height });
+  } else {
+    image.contain({ w: width, h: height });
+  }
+
+  return {
+    width: image.bitmap.width,
+    height: image.bitmap.height,
+    pixels: new Uint8Array(image.bitmap.data),
+  };
+}
+
+export function loadOpenTuiImageBitmap(src: string, options: ImageBitmapOptions): Promise<NativeChartBitmap> {
+  const width = Math.max(1, Math.round(options.width));
+  const height = Math.max(1, Math.round(options.height));
+  const key = `${src}\n${options.objectFit}\n${width}x${height}`;
+  const cached = bitmapCache.get(key);
+  if (cached) return cached;
+
+  const promise = loadSourceImage(src)
+    .then((image) => resizeImageToBitmap(image, { width, height, objectFit: options.objectFit }))
+    .catch((error) => {
+      bitmapCache.delete(key);
+      throw error;
+    });
+
+  remember(bitmapCache, key, promise);
+  return promise;
+}

package/src/renderers/opentui/image-surface.tsx

@@ -0,0 +1,266 @@
+import { createElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, type ForwardedRef } from "react";
+import {
+  computeBitmapSize,
+  intersectCellRects,
+  type CellRect,
+  type NativeChartBitmap,
+} from "../../components/chart/native/chart-rasterizer";
+import { getCachedKittySupport, ensureKittySupport } from "../../components/chart/native/kitty-support";
+import { getNativeSurfaceManager } from "../../components/chart/native/surface-manager";
+import {
+  getRenderableCellRect,
+  resolveNativeSurfaceVisibleRect,
+  type NativeSurfaceRenderableNode,
+} from "../../components/chart/native/surface-visibility";
+import { useOptionalPaneInstanceId } from "../../state/app-context";
+import { useNativeRenderer, type BoxRenderable, type ImageSurfaceProps } from "../../ui";
+import { loadOpenTuiImageBitmap } from "./image-loader";
+
+interface NativeRenderableNode extends BoxRenderable, NativeSurfaceRenderableNode {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  parent: NativeRenderableNode | null;
+  onLifecyclePass: (() => void) | null;
+}
+
+interface SurfaceTarget {
+  rect: CellRect;
+  visibleRect: CellRect | null;
+  pixelWidth: number;
+  pixelHeight: number;
+  bitmapKey: string;
+}
+
+interface CellInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+let nextImageSurfaceId = 1;
+
+function assignRef(ref: ForwardedRef<unknown>, value: unknown) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    (ref as { current: unknown }).current = value;
+  }
+}
+
+function readInset(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+}
+
+function resolveInsets(props: Record<string, unknown>): CellInsets {
+  const border = props.border ? 1 : 0;
+  const padding = readInset(props.padding);
+  const paddingX = readInset(props.paddingX ?? padding);
+  const paddingY = readInset(props.paddingY ?? padding);
+  return {
+    top: border + readInset(props.paddingTop ?? paddingY),
+    right: border + readInset(props.paddingRight ?? paddingX),
+    bottom: border + readInset(props.paddingBottom ?? paddingY),
+    left: border + readInset(props.paddingLeft ?? paddingX),
+  };
+}
+
+function sameRect(left: CellRect | null, right: CellRect | null): boolean {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.x === right.x
+    && left.y === right.y
+    && left.width === right.width
+    && left.height === right.height;
+}
+
+function sameTarget(left: SurfaceTarget | null, right: SurfaceTarget | null): boolean {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.bitmapKey === right.bitmapKey
+    && left.pixelWidth === right.pixelWidth
+    && left.pixelHeight === right.pixelHeight
+    && sameRect(left.rect, right.rect)
+    && sameRect(left.visibleRect, right.visibleRect);
+}
+
+function insetRect(rect: CellRect, insets: CellInsets): CellRect | null {
+  const width = rect.width - insets.left - insets.right;
+  const height = rect.height - insets.top - insets.bottom;
+  if (width <= 0 || height <= 0) return null;
+  return {
+    x: rect.x + insets.left,
+    y: rect.y + insets.top,
+    width,
+    height,
+  };
+}
+
+export const OpenTuiImageSurface = forwardRef<unknown, ImageSurfaceProps>(function OpenTuiImageSurface(
+  { children, src, alt: _alt, objectFit = "contain", ...props },
+  forwardedRef,
+) {
+  const renderer = useNativeRenderer();
+  const paneId = useOptionalPaneInstanceId();
+  const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
+  const surfaceId = useRef(`opentui-image:${nextImageSurfaceId++}`).current;
+  const renderableRef = useRef<NativeRenderableNode | null>(null);
+  const [kittySupport, setKittySupport] = useState<boolean | null>(() => getCachedKittySupport(renderer));
+  const [target, setTarget] = useState<SurfaceTarget | null>(null);
+  const [bitmapState, setBitmapState] = useState<{ key: string; bitmap: NativeChartBitmap } | null>(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const imageSrc = typeof src === "string" ? src.trim() : "";
+  const resolvedObjectFit = objectFit === "cover" ? "cover" : "contain";
+  const insets = useMemo(() => resolveInsets(props), [
+    props.border,
+    props.padding,
+    props.paddingX,
+    props.paddingY,
+    props.paddingTop,
+    props.paddingRight,
+    props.paddingBottom,
+    props.paddingLeft,
+  ]);
+
+  const setRenderableRef = useCallback((node: unknown) => {
+    renderableRef.current = node as NativeRenderableNode | null;
+    assignRef(forwardedRef, node);
+  }, [forwardedRef]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setKittySupport(getCachedKittySupport(renderer));
+    ensureKittySupport(renderer).then((supported) => {
+      if (!cancelled) setKittySupport(supported);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [renderer]);
+
+  useEffect(() => {
+    setLoadFailed(false);
+    setBitmapState(null);
+  }, [imageSrc]);
+
+  useEffect(() => {
+    const renderable = renderableRef.current;
+    if (!renderable || !imageSrc || kittySupport !== true) {
+      setTarget(null);
+      return;
+    }
+
+    let mountTimer: Timer | null = null;
+    const previousLifecyclePass = renderable.onLifecyclePass;
+    const syncTarget = () => {
+      const outerRect = getRenderableCellRect(renderable);
+      const rect = insetRect(outerRect, insets);
+      if (!rect || !renderer.resolution || renderer.terminalWidth <= 0 || renderer.terminalHeight <= 0) {
+        setTarget((current) => (current === null ? current : null));
+        return;
+      }
+
+      const outerVisibleRect = resolveNativeSurfaceVisibleRect(renderable, renderer.terminalWidth, renderer.terminalHeight);
+      const visibleRect = outerVisibleRect ? intersectCellRects(rect, outerVisibleRect) : null;
+      const bitmapSize = computeBitmapSize(rect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
+      const bitmapKey = `${imageSrc}\n${resolvedObjectFit}\n${bitmapSize.pixelWidth}x${bitmapSize.pixelHeight}`;
+      const nextTarget: SurfaceTarget = {
+        rect,
+        visibleRect,
+        pixelWidth: bitmapSize.pixelWidth,
+        pixelHeight: bitmapSize.pixelHeight,
+        bitmapKey,
+      };
+      setTarget((current) => (sameTarget(current, nextTarget) ? current : nextTarget));
+    };
+    const lifecyclePass = () => {
+      previousLifecyclePass?.();
+      syncTarget();
+    };
+
+    renderable.onLifecyclePass = lifecyclePass;
+    renderer.registerLifecyclePass(renderable);
+    syncTarget();
+    mountTimer = setTimeout(() => {
+      syncTarget();
+      renderer.requestRender();
+    }, 0);
+
+    return () => {
+      if (mountTimer) clearTimeout(mountTimer);
+      if (renderable.onLifecyclePass === lifecyclePass) {
+        renderable.onLifecyclePass = previousLifecyclePass;
+      }
+      renderer.unregisterLifecyclePass(renderable);
+      setTarget(null);
+    };
+  }, [imageSrc, insets, kittySupport, renderer, resolvedObjectFit]);
+
+  useEffect(() => {
+    if (!target || !imageSrc || kittySupport !== true) {
+      setBitmapState(null);
+      return;
+    }
+
+    let cancelled = false;
+    setBitmapState((current) => (current?.key === target.bitmapKey ? current : null));
+    loadOpenTuiImageBitmap(imageSrc, {
+      width: target.pixelWidth,
+      height: target.pixelHeight,
+      objectFit: resolvedObjectFit,
+    }).then((bitmap) => {
+      if (!cancelled) {
+        setLoadFailed(false);
+        setBitmapState({ key: target.bitmapKey, bitmap });
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setLoadFailed(true);
+        setBitmapState(null);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [imageSrc, kittySupport, resolvedObjectFit, target]);
+
+  useEffect(() => {
+    return () => {
+      nativeSurfaceManager.removeSurface(surfaceId);
+    };
+  }, [nativeSurfaceManager, surfaceId]);
+
+  useEffect(() => {
+    if (kittySupport !== true
+      || loadFailed
+      || !target?.visibleRect
+      || !bitmapState
+      || bitmapState.key !== target.bitmapKey) {
+      nativeSurfaceManager.removeSurface(surfaceId);
+      return;
+    }
+
+    nativeSurfaceManager.upsertSurface({
+      id: surfaceId,
+      paneId: paneId ?? "__global__",
+      rect: target.rect,
+      visibleRect: target.visibleRect,
+      bitmap: bitmapState.bitmap,
+      bitmapKey: bitmapState.key,
+    });
+    renderer.requestRender();
+  }, [bitmapState, kittySupport, loadFailed, nativeSurfaceManager, paneId, renderer, surfaceId, target]);
+
+  const showFallback = kittySupport !== true
+    || loadFailed
+    || !target
+    || !bitmapState
+    || bitmapState.key !== target.bitmapKey;
+
+  return (createElement as any)("box", { ...props, ref: setRenderableRef }, showFallback ? children : null);
+});

package/src/renderers/opentui/input-host.tsx

@@ -1,14 +1,53 @@
-import { useMemo, type ReactNode } from "react";
-import { InputHostProvider, type InputHost } from "../../react/input";
+import { useLayoutEffect, useMemo, useRef, type ReactNode } from "react";
+import { InputHostProvider, type InputHost, type KeyEventLike, type ShortcutOptions } from "../../react/input";
 import { toKeyEventLike, useKeyboard, useTerminalDimensions } from "./host";
 
+interface ShortcutEntry {
+  handlerRef: { current: (event: KeyEventLike) => void };
+  enabledRef: { current: boolean };
+  phase: NonNullable<ShortcutOptions["phase"]>;
+  order: number;
+}
+
+let nextShortcutOrder = 1;
+
 export function OpenTuiInputHostProvider({ children }: { children: ReactNode }) {
+  const shortcutsRef = useRef<ShortcutEntry[]>([]);
+  const dispatchShortcut = (event: KeyEventLike) => {
+    const shortcuts = shortcutsRef.current;
+    for (const phase of ["normal", "after"] as const) {
+      if (phase === "after" && (event.defaultPrevented || event.propagationStopped)) return;
+      for (const entry of shortcuts) {
+        if (entry.phase !== phase || !entry.enabledRef.current) continue;
+        entry.handlerRef.current(event);
+        if (event.propagationStopped) return;
+      }
+    }
+  };
+
+  useKeyboard((event) => {
+    dispatchShortcut(toKeyEventLike(event));
+  });
+
   const host = useMemo<InputHost>(() => ({
     useShortcut(handler, options) {
-      useKeyboard((event) => {
-        if (options?.enabled === false) return;
-        handler(toKeyEventLike(event));
-      });
+      const handlerRef = useRef(handler);
+      const enabledRef = useRef(options?.enabled !== false);
+      handlerRef.current = handler;
+      enabledRef.current = options?.enabled !== false;
+
+      useLayoutEffect(() => {
+        const entry: ShortcutEntry = {
+          handlerRef,
+          enabledRef,
+          phase: options?.phase ?? "normal",
+          order: nextShortcutOrder++,
+        };
+        shortcutsRef.current = [...shortcutsRef.current, entry].sort((a, b) => a.order - b.order);
+        return () => {
+          shortcutsRef.current = shortcutsRef.current.filter((current) => current !== entry);
+        };
+      }, [options?.phase, options?.scope]);
     },
     useViewport() {
       const dimensions = useTerminalDimensions();

package/src/renderers/opentui/ui-host.tsx

@@ -3,6 +3,7 @@ import { createElement } from "react";
 import "opentui-spinner/react";
 import { TextAttributes, type UiHost, type TextProps } from "../../ui/host";
 import { renderAsciiText } from "../../ui/ascii-font";
+import { OpenTuiImageSurface } from "./image-surface";
 
 function mapTextAttributes(appAttributes: number | undefined, props?: TextProps): number | undefined {
   const flags = typeof appAttributes === "number" ? appAttributes : 0;
@@ -66,7 +67,7 @@ export const openTuiUiHost: UiHost = {
   Input: ({ children, ...props }) => createElement("input" as any, props, children),
   Textarea: ({ children, ...props }) => createElement("textarea" as any, props, children),
   ChartSurface: ({ children, bitmap: _bitmap, bitmaps: _bitmaps, crosshair: _crosshair, ...props }) => <box {...props}>{children}</box>,
-  ImageSurface: ({ children, src: _src, alt: _alt, objectFit: _objectFit, ...props }) => <box {...props}>{children}</box>,
+  ImageSurface: OpenTuiImageSurface,
   SpinnerMark: ({ children, ...props }) => createElement("spinner" as any, props, children),
   AsciiText: ({ text, font = "tiny", color, fg, bg, backgroundColor, selectable = false, ...props }) => {
     const resolvedColor = color ?? fg;

package/src/state/app-context.tsx

@@ -183,6 +183,10 @@ export function usePaneInstanceId(): string {
   return paneId;
 }
 
+export function useOptionalPaneInstanceId(): string | null {
+  return useContext(PaneContext);
+}
+
 export function usePaneInstance(): PaneInstanceConfig | null {
   const paneId = useContext(PaneContext);
   return useAppSelector((state) => (paneId ? findPaneInstance(state.config.layout, paneId) ?? null : null));