gloomberb 0.6.0 → 0.7.0

package/src/renderers/electrobun/view/styles.css

@@ -0,0 +1,331 @@
+@keyframes gloom-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+html, body, #root { width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: #000; }
+body {
+  --cell-w: 8px;
+  --cell-h: 18px;
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: var(--cell-h);
+  color: #d8dde3;
+  cursor: default;
+  user-select: none;
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: geometricPrecision;
+}
+* { box-sizing: border-box; }
+#root > * { height: 100%; min-height: 100%; }
+input, textarea, button { font: inherit; }
+input, textarea { cursor: text; user-select: text; }
+button, [data-gloom-interactive="true"] { cursor: pointer; }
+[data-gloom-role="pane-window"] {
+  background-clip: padding-box;
+  isolation: isolate;
+}
+[data-gloom-role="detached-pane-window"] {
+  border: 0;
+  box-shadow: none;
+  background-clip: padding-box;
+}
+[data-gloom-role="app-header"][data-titlebar-overlay="true"],
+.electrobun-webkit-app-region-drag {
+  cursor: default;
+  -webkit-app-region: drag;
+  app-region: drag;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.electrobun-webkit-app-region-no-drag {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+[data-titlebar-overlay="true"] {
+  min-height: __TITLEBAR_OVERLAY_HEIGHT_PX__px;
+  max-height: __TITLEBAR_OVERLAY_HEIGHT_PX__px;
+  align-items: center;
+}
+[data-titlebar-overlay="true"] * {
+  cursor: inherit;
+}
+[data-titlebar-overlay="true"] button,
+[data-titlebar-overlay="true"] input,
+[data-titlebar-overlay="true"] textarea,
+[data-titlebar-overlay="true"] a,
+[data-titlebar-overlay="true"] .electrobun-webkit-app-region-no-drag,
+[data-titlebar-overlay="true"] [data-gloom-interactive="true"] {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+[data-gloom-role="pane-window"][data-floating="true"] {
+  border: 0;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 18px 38px rgba(0, 0, 0, .46);
+}
+[data-gloom-role="pane-window"][data-floating="true"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--pane-border-color, #3a4148);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 100;
+}
+[data-gloom-role="pane-window"][data-floating="true"][data-focused="true"] {
+  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
+}
+[data-gloom-role="pane-window"][data-floating="false"] {
+  border: 0;
+  border-radius: 0;
+}
+[data-gloom-role="pane-window"][data-floating="false"][data-focused="true"] {
+  box-shadow: inset 0 0 0 1px var(--pane-border-color, #54c99f);
+}
+[data-gloom-role="pane-header"] {
+  align-items: center;
+  padding-inline: 7px;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+[data-gloom-role="pane-header"] * {
+  cursor: inherit;
+}
+[data-gloom-role="pane-action"],
+[data-gloom-role="pane-close"] {
+  cursor: pointer;
+}
+body.gloom-dragging [data-gloom-role="pane-header"] {
+  cursor: grabbing;
+}
+body.gloom-dragging {
+  cursor: grabbing;
+}
+[data-gloom-role="pane-title"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-gloom-role="chat-message"]:hover [data-gloom-role="chat-message-row"][data-selected="false"] {
+  background-color: var(--chat-hover-bg);
+}
+[data-gloom-role="chat-message-reply-action"] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-gloom-role="chat-message"]:hover [data-gloom-role="chat-message-reply-action"],
+[data-gloom-role="chat-message"][data-selected="true"] [data-gloom-role="chat-message-reply-action"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+[data-gloom-role="status-bar"] {
+  min-height: var(--cell-h);
+  max-height: var(--cell-h);
+  align-items: center;
+  border-top: 1px solid color-mix(in srgb, #3a4148 72%, transparent);
+  font-size: 11.5px;
+}
+[data-gloom-role="status-bar"] span {
+  line-height: var(--cell-h);
+}
+[data-gloom-role="pane-footer"] {
+  min-height: var(--cell-h);
+  max-height: var(--cell-h);
+  align-items: center;
+  border-top: 1px solid color-mix(in srgb, var(--pane-footer-border-color, #3a4148) 72%, transparent);
+  font-size: 11.5px;
+  overflow: hidden;
+}
+[data-gloom-role="pane-footer"][data-empty="true"] {
+  border-top-color: transparent;
+}
+[data-gloom-role="pane-footer"] span,
+[data-gloom-role="pane-hint"] span {
+  line-height: var(--cell-h);
+}
+[data-gloom-role="pane-hint"] {
+  cursor: pointer;
+  border-radius: 4px;
+}
+[data-gloom-role="pane-hint"]:hover {
+  background: rgba(255,255,255,.08);
+}
+[data-gloom-role="pane-action"],
+[data-gloom-role="pane-close"] {
+  border-radius: 4px;
+  padding-inline: 2px;
+}
+[data-gloom-role="pane-action"]:hover,
+[data-gloom-role="pane-close"]:hover {
+  background: rgba(255,255,255,.08);
+}
+[data-gloom-role="resize-handle"] {
+  cursor: nwse-resize;
+}
+[data-gloom-role="chart-surface"] {
+  cursor: crosshair;
+}
+[data-gloom-role="tab-list"] {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+[data-gloom-role="tab-list"]::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+[data-gloom-role="tab-button"] {
+  all: unset;
+  box-sizing: border-box;
+}
+[data-gloom-role="tab-button"]:focus-visible {
+  outline: 1px solid var(--tab-hover-underline);
+  outline-offset: -1px;
+}
+[data-gloom-role="tab-close"] {
+  cursor: pointer;
+}
+[data-gloom-role="tab-close"]:hover {
+  background: rgba(255,255,255,.1);
+}
+[data-gloom-scrollbar-x],
+[data-gloom-scrollbar-y] {
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+}
+[data-gloom-scrollbar-active="true"] {
+  scrollbar-color: rgba(216,221,227,.26) transparent;
+}
+[data-gloom-scrollbar-x]::-webkit-scrollbar,
+[data-gloom-scrollbar-y]::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+[data-gloom-scrollbar-x]::-webkit-scrollbar-track,
+[data-gloom-scrollbar-y]::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-gloom-scrollbar-x]::-webkit-scrollbar-thumb,
+[data-gloom-scrollbar-y]::-webkit-scrollbar-thumb {
+  min-width: 24px;
+  min-height: 24px;
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  background-clip: content-box;
+}
+[data-gloom-scrollbar-x]::-webkit-scrollbar-thumb:hover,
+[data-gloom-scrollbar-y]::-webkit-scrollbar-thumb:hover {
+  background: transparent;
+  background-clip: content-box;
+}
+[data-gloom-scrollbar-active="true"]::-webkit-scrollbar-thumb,
+[data-gloom-scrollbar-active="true"]::-webkit-scrollbar-thumb:hover {
+  background: rgba(216,221,227,.24);
+  background-clip: content-box;
+}
+[data-gloom-scrollbar-x]::-webkit-scrollbar-corner,
+[data-gloom-scrollbar-y]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+[data-gloom-scrollbar-x="hidden"]:not([data-gloom-scrollbar-y="visible"]),
+[data-gloom-scrollbar-y="hidden"]:not([data-gloom-scrollbar-x="visible"]) {
+  scrollbar-width: none;
+}
+[data-gloom-scrollbar-x="hidden"]::-webkit-scrollbar:horizontal {
+  height: 0;
+  display: none;
+}
+[data-gloom-scrollbar-y="hidden"]::-webkit-scrollbar:vertical {
+  width: 0;
+  display: none;
+}
+[data-gloom-role="resize-handle"]::after {
+  content: "";
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  width: 9px;
+  height: 9px;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  opacity: .7;
+}
+[data-gloom-role="dock-divider"] {
+  background: transparent !important;
+}
+[data-gloom-role="dock-divider"]::before {
+  content: "";
+  position: absolute;
+  background: var(--divider-color);
+  opacity: .9;
+}
+[data-gloom-role="dock-divider"][data-axis="horizontal"] {
+  cursor: col-resize;
+}
+[data-gloom-role="dock-divider"][data-axis="horizontal"]::before {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+}
+[data-gloom-role="dock-divider"][data-axis="vertical"] {
+  cursor: row-resize;
+}
+[data-gloom-role="dock-divider"][data-axis="vertical"]::before {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+}
+.gloom-loading, .gloom-fatal { padding: 24px; color: #d8dde3; }
+.gloom-fatal pre { white-space: pre-wrap; color: #ffb4a8; }
+.gloom-toast-viewport {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 10000;
+}
+.gloom-toast {
+  min-width: 260px;
+  max-width: 420px;
+  padding: 10px 12px;
+  border: 1px solid #3a4148;
+  background: #151b20;
+  color: #d8dde3;
+  box-shadow: 0 12px 24px rgba(0,0,0,.28);
+}
+.gloom-toast-success { border-color: #54c99f; }
+.gloom-toast-error { border-color: #ff6b5f; }
+.gloom-toast-action {
+  margin-top: 8px;
+  color: #101417;
+  background: #d8dde3;
+  border: 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.gloom-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,.64);
+  z-index: 9999;
+}
+.gloom-dialog {
+  max-width: min(920px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  border: 1px solid #3a4148;
+  border-radius: 6px;
+  background: #101417;
+  color: #d8dde3;
+  padding: 0;
+  box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
+}

package/src/renderers/electrobun/view/ui-host.tsx

@@ -176,7 +176,7 @@ function cleanDomProps(props: Record<string, unknown>): Record<string, unknown>
     "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom",
     "bold", "underline", "inverse", "dim", "italic", "strikethrough", "attributes", "content", "position", "left", "right", "top", "bottom",
     "zIndex", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap",
-    "border", "borderStyle", "borderColor", "overflow", "selectable", "name", "color",
+    "border", "borderStyle", "borderColor", "overflow", "selectable", "visible", "name", "color",
     "focused", "focusedBackgroundColor", "textColor", "focusedTextColor", "placeholderColor",
     "cursorColor", "selectionBg", "selectionFg", "showCursor", "keyBindings", "wrapText", "wrapMode",
     "initialValue", "value", "onInput", "onChange", "onSubmit", "onCursorChange", "onMouse",
@@ -445,7 +445,11 @@ const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { children?:
         onMouseUp={(event) => callMouseHandler(propsRef.current.onMouseUp, event, "up")}
         onMouseOut={handleMouseOut}
         onWheel={typeof props.onMouseScroll === "function" ? handleWheel : undefined}
-        style={{ ...commonStyle(props), ...(props.style as CSSProperties | undefined) }}
+        style={{
+          ...commonStyle(props),
+          ...(props.style as CSSProperties | undefined),
+          ...(props.visible === false ? { display: "none" } : undefined),
+        }}
       >
         {children as ReactNode}
       </div>
@@ -956,6 +960,15 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           height: toCellY(element?.clientHeight ?? 0),
         };
       },
+      getBoundingClientRect() {
+        const rect = getElement()?.getBoundingClientRect();
+        return {
+          x: rect?.x ?? 0,
+          y: rect?.y ?? 0,
+          width: rect?.width ?? 0,
+          height: rect?.height ?? 0,
+        };
+      },
       horizontalScrollBar,
       verticalScrollBar,
       scrollTo(target: number | { x?: number; y?: number }, y?: number) {
@@ -1008,7 +1021,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         onMouseOut={(event) => callMouseHandler(props.onMouseOut, event, "out")}
         onScroll={scrollable ? handleScroll : undefined}
         onWheel={scrollable ? handleWheel : undefined}
-        style={{ ...commonStyle(props), overflowX, overflowY, ...(props.style as CSSProperties | undefined) }}
+        style={{
+          ...commonStyle(props),
+          overflowX,
+          overflowY,
+          ...(props.style as CSSProperties | undefined),
+          ...(props.visible === false ? { display: "none" } : undefined),
+        }}
       >
         {children as ReactNode}
       </div>

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

@@ -0,0 +1,179 @@
+import { createElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, type ForwardedRef, type ReactNode } 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 ChartSurfaceProps } from "../../ui";
+
+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;
+  bitmapKey: string;
+}
+
+let nextChartSurfaceId = 1;
+
+function assignRef(ref: ForwardedRef<unknown>, value: unknown) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    (ref as { current: unknown }).current = value;
+  }
+}
+
+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
+    && sameRect(left.rect, right.rect)
+    && sameRect(left.visibleRect, right.visibleRect);
+}
+
+function hashBitmap(bitmap: NativeChartBitmap): string {
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < bitmap.pixels.length; index += 1) {
+    hash ^= bitmap.pixels[index]!;
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(16);
+}
+
+function bitmapKey(bitmap: NativeChartBitmap): string {
+  return `${bitmap.width}x${bitmap.height}:${hashBitmap(bitmap)}`;
+}
+
+export const OpenTuiChartSurface = forwardRef<unknown, ChartSurfaceProps>(function OpenTuiChartSurface(
+  { children, bitmap, bitmaps, crosshair: _crosshair, ...props },
+  forwardedRef,
+) {
+  const renderer = useNativeRenderer();
+  const paneId = useOptionalPaneInstanceId();
+  const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
+  const surfaceId = useRef(`opentui-chart:${nextChartSurfaceId++}`).current;
+  const renderableRef = useRef<NativeRenderableNode | null>(null);
+  const [kittySupport, setKittySupport] = useState<boolean | null>(() => getCachedKittySupport(renderer));
+  const [target, setTarget] = useState<SurfaceTarget | null>(null);
+  const nativeBitmap = (bitmaps?.[0] ?? bitmap ?? null) as NativeChartBitmap | null;
+  const nativeBitmapKey = useMemo(() => (nativeBitmap ? bitmapKey(nativeBitmap) : null), [nativeBitmap]);
+
+  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(() => {
+    const renderable = renderableRef.current;
+    if (!renderable || !nativeBitmap || !nativeBitmapKey || kittySupport !== true) {
+      setTarget(null);
+      return;
+    }
+
+    let mountTimer: Timer | null = null;
+    const previousLifecyclePass = renderable.onLifecyclePass;
+    const syncTarget = () => {
+      const rect = getRenderableCellRect(renderable);
+      if (!renderer.resolution || renderer.terminalWidth <= 0 || renderer.terminalHeight <= 0) {
+        setTarget((current) => (current === null ? current : null));
+        return;
+      }
+
+      const visibleRect = resolveNativeSurfaceVisibleRect(renderable, renderer.terminalWidth, renderer.terminalHeight);
+      const clippedVisibleRect = visibleRect ? intersectCellRects(rect, visibleRect) : null;
+      const expectedSize = computeBitmapSize(rect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
+      const nextTarget: SurfaceTarget = {
+        rect,
+        visibleRect: clippedVisibleRect,
+        bitmapKey: `${nativeBitmapKey}:${expectedSize.pixelWidth}x${expectedSize.pixelHeight}`,
+      };
+      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);
+    };
+  }, [kittySupport, nativeBitmap, nativeBitmapKey, renderer]);
+
+  useEffect(() => {
+    return () => {
+      nativeSurfaceManager.removeSurface(surfaceId);
+    };
+  }, [nativeSurfaceManager, surfaceId]);
+
+  useEffect(() => {
+    if (kittySupport !== true || !target?.visibleRect || !nativeBitmap) {
+      nativeSurfaceManager.removeSurface(surfaceId);
+      return;
+    }
+
+    nativeSurfaceManager.upsertSurface({
+      id: surfaceId,
+      paneId: paneId ?? "__global__",
+      rect: target.rect,
+      visibleRect: target.visibleRect,
+      bitmap: nativeBitmap,
+      bitmapKey: target.bitmapKey,
+    });
+    renderer.requestRender();
+  }, [kittySupport, nativeBitmap, nativeSurfaceManager, paneId, renderer, surfaceId, target]);
+
+  const showFallback = kittySupport !== true || !target || !nativeBitmap;
+  return createElement("box" as any, { ...props, ref: setRenderableRef }, showFallback ? children as ReactNode : null);
+});

package/src/renderers/opentui/host.tsx

@@ -38,6 +38,12 @@ export function toKeyEventLike(event: {
     alt: event.alt ?? false,
     meta: event.meta ?? event.super ?? false,
     super: event.super ?? event.meta ?? false,
+    get defaultPrevented() {
+      return event.defaultPrevented ?? false;
+    },
+    get propagationStopped() {
+      return event.propagationStopped ?? false;
+    },
     preventDefault: () => event.preventDefault?.(),
     stopPropagation: () => event.stopPropagation?.(),
   };

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;
+}