gloomberb 0.6.1 → 0.7.0

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

@@ -2,7 +2,17 @@
 /** @jsxImportSource react */
 import { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
 import { InputHostProvider, type InputHost, type KeyEventLike, type ShortcutOptions } from "../../../react/input";
-import { hasWebCtrlModifier, normalizeWebKeyName, shouldConsumeWebAppKeyDown, webKeySequence } from "./key-event";
+import {
+  isMouseBackNavigationButton,
+  MOUSE_BACK_NAVIGATION_EVENT_NAME,
+} from "../../../utils/back-navigation";
+import {
+  hasWebCtrlModifier,
+  isEditableKeyboardTarget,
+  normalizeWebKeyName,
+  shouldConsumeWebAppKeyDown,
+  webKeySequence,
+} from "./key-event";
 
 export const WEB_CELL_WIDTH = 8;
 export const WEB_CELL_HEIGHT = 18;
@@ -19,6 +29,33 @@ function toKeyEventLike(event: KeyboardEvent): KeyEventLike {
     alt: event.altKey,
     meta: event.metaKey,
     super: event.metaKey,
+    targetEditable: isEditableKeyboardTarget(event.target),
+    get defaultPrevented() {
+      return event.defaultPrevented;
+    },
+    get propagationStopped() {
+      return propagationStopped;
+    },
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => {
+      propagationStopped = true;
+      event.stopPropagation();
+    },
+  };
+}
+
+function toMouseBackKeyEventLike(event: MouseEvent): KeyEventLike {
+  let propagationStopped = false;
+  return {
+    key: MOUSE_BACK_NAVIGATION_EVENT_NAME,
+    name: MOUSE_BACK_NAVIGATION_EVENT_NAME,
+    sequence: "",
+    ctrl: event.ctrlKey,
+    shift: event.shiftKey,
+    alt: event.altKey,
+    meta: event.metaKey,
+    super: event.metaKey,
+    targetEditable: isEditableKeyboardTarget(event.target),
     get defaultPrevented() {
       return event.defaultPrevented;
     },
@@ -61,24 +98,51 @@ function getViewport() {
 export function WebInputHostProvider({ children }: { children: ReactNode }) {
   const shortcutsRef = useRef<ShortcutEntry[]>([]);
 
+  const dispatchShortcut = (shortcutEvent: KeyEventLike) => {
+    for (const phase of ["normal", "after"] as const) {
+      if (phase === "after" && (shortcutEvent.defaultPrevented || shortcutEvent.propagationStopped)) break;
+      for (const entry of shortcutsRef.current) {
+        if (entry.phase !== phase || !entry.enabledRef.current) continue;
+        entry.handlerRef.current(shortcutEvent);
+        if (shortcutEvent.propagationStopped) break;
+      }
+      if (shortcutEvent.propagationStopped) break;
+    }
+  };
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const shortcutEvent = toKeyEventLike(event);
-      for (const phase of ["normal", "after"] as const) {
-        if (phase === "after" && (shortcutEvent.defaultPrevented || shortcutEvent.propagationStopped)) break;
-        for (const entry of shortcutsRef.current) {
-          if (entry.phase !== phase || !entry.enabledRef.current) continue;
-          entry.handlerRef.current(shortcutEvent);
-          if (shortcutEvent.propagationStopped) break;
-        }
-        if (shortcutEvent.propagationStopped) break;
-      }
+      dispatchShortcut(shortcutEvent);
       if (shouldConsumeWebAppKeyDown(event)) event.preventDefault();
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
 
+  useEffect(() => {
+    const preventBrowserBack = (event: MouseEvent) => {
+      if (!isMouseBackNavigationButton(event.button)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const onMouseUp = (event: MouseEvent) => {
+      if (!isMouseBackNavigationButton(event.button)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dispatchShortcut(toMouseBackKeyEventLike(event));
+    };
+
+    window.addEventListener("mousedown", preventBrowserBack, true);
+    window.addEventListener("auxclick", preventBrowserBack, true);
+    window.addEventListener("mouseup", onMouseUp, true);
+    return () => {
+      window.removeEventListener("mousedown", preventBrowserBack, true);
+      window.removeEventListener("auxclick", preventBrowserBack, true);
+      window.removeEventListener("mouseup", onMouseUp, true);
+    };
+  }, []);
+
   const host = useMemo<InputHost>(() => ({
     useShortcut(handler, options) {
       const handlerRef = useRef(handler);

package/src/renderers/electrobun/view/key-event.ts

@@ -38,7 +38,7 @@ function targetHasClosest(target: KeyboardTargetLike, selector: string): boolean
   }
 }
 
-function isEditableKeyboardTarget(target: EventTarget | null): boolean {
+export function isEditableKeyboardTarget(target: EventTarget | null): boolean {
   const element = getKeyboardTarget(target);
   if (!element) return false;
 

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