gloomberb 0.6.1 → 0.7.1

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 ["before", "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/main.tsx

@@ -6,7 +6,7 @@ import { UiHostProvider } from "../../../ui/host";
 import { debugLog } from "../../../utils/debug-log";
 import { measurePerfAsync } from "../../../utils/perf-marks";
 import { startMainThreadMonitor } from "../../../utils/main-thread-monitor";
-import { initElectrobunBackend } from "./backend-rpc";
+import { backendRequest, initElectrobunBackend } from "./backend-rpc";
 import { installElectrobunAiHost } from "./ai-host";
 import { installElectrobunBrokerRemoteClient } from "./broker-remote-client";
 import { installElectrobunConfigStoreHost } from "./config-host";
@@ -45,9 +45,24 @@ debugLog.mirrorToConsole({
 });
 const stopMainThreadMonitor = startMainThreadMonitor("electrobun.web", { mirrorToConsole: true });
 
+rootElement.tabIndex = -1;
 root.render(<div className="gloom-loading">Starting Gloomberb...</div>);
 bootLog.warn("diagnostic console mirror enabled", { sources: ELECTROBUN_WEB_CONSOLE_LOG_SOURCES });
 
+function focusWebSurface(): void {
+  window.focus();
+  rootElement.focus({ preventScroll: true });
+}
+
+function requestStartupFocus(): void {
+  focusWebSurface();
+  requestAnimationFrame(() => {
+    void backendRequest("host.focusWindow")
+      .catch(() => null)
+      .then(() => focusWebSurface());
+  });
+}
+
 async function boot() {
   bootLog.info("boot started");
   const backendInitPromise = initElectrobunBackend();
@@ -78,6 +93,7 @@ async function boot() {
                 desktopWindowBridge={desktopWindowBridge}
                 desktopApplicationMenuBridge={desktopApplicationMenuBridge}
                 desktopSnapshot={desktopSnapshot}
+                desktopThemePreview={init.desktopThemePreview}
               />
             </WebDialogHostProvider>
           </WebToastHostProvider>
@@ -85,6 +101,7 @@ async function boot() {
       </UiHostProvider>,
     );
   });
+  requestStartupFocus();
   bootLog.info("root render scheduled", {
     layoutPanes: config.layout.instances.length,
     floatingPanes: config.layout.floating.length,

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

@@ -0,0 +1,329 @@
+@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; }
+#root:focus { outline: none; }
+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"] {
+  flex: 0 0 var(--cell-h);
+  height: var(--cell-h);
+  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"] {
+  flex: 0 0 var(--cell-h);
+  height: var(--cell-h);
+  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;
+  box-shadow: 0 12px 24px rgba(0,0,0,.28);
+}
+.gloom-toast-action {
+  margin-top: 8px;
+  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/toast-host.tsx

@@ -1,17 +1,42 @@
 /// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { colors } from "../../../theme/colors";
 import { ToastHostProvider, type ToastHost, type ToastOptions } from "../../../ui/toast";
 
+type WebToastType = "info" | "success" | "error";
+
 interface ToastEntry {
   id: number;
   body: string;
-  type: "info" | "success" | "error";
+  type: WebToastType;
   action?: ToastOptions["action"];
 }
 
 let nextToastId = 1;
 
+function webToastBorderColor(type: WebToastType): string {
+  if (type === "success") return colors.positive;
+  if (type === "error") return colors.negative;
+  return colors.borderFocused;
+}
+
+function getToastStyle(type: WebToastType): CSSProperties {
+  return {
+    background: colors.panel,
+    borderColor: webToastBorderColor(type),
+    color: colors.text,
+  };
+}
+
+function getToastActionStyle(): CSSProperties {
+  return {
+    background: colors.selected,
+    border: `1px solid ${colors.borderFocused}`,
+    color: colors.selectedText,
+  };
+}
+
 export function WebToastHostProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
 
@@ -33,11 +58,12 @@ export function WebToastHostProvider({ children }: { children: ReactNode }) {
       return (
         <div className="gloom-toast-viewport">
           {toasts.map((toast) => (
-            <div key={toast.id} className={`gloom-toast gloom-toast-${toast.type}`}>
+            <div key={toast.id} className="gloom-toast" style={getToastStyle(toast.type)}>
               <div>{toast.body}</div>
               {toast.action && (
                 <button
                   className="gloom-toast-action"
+                  style={getToastActionStyle()}
                   onClick={() => {
                     toast.action?.onClick();
                     dismiss(toast.id);

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

@@ -940,6 +940,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         const element = getElement();
         if (element) element.scrollTop = Math.max(0, value) * WEB_CELL_HEIGHT;
       },
+      get scrollTopPx() {
+        return Math.max(0, getElement()?.scrollTop ?? 0);
+      },
+      set scrollTopPx(value: number) {
+        const element = getElement();
+        if (element) element.scrollTop = Math.max(0, value);
+      },
       get scrollLeft() {
         return toCellX(getElement()?.scrollLeft ?? 0);
       },
@@ -947,12 +954,25 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         const element = getElement();
         if (element) element.scrollLeft = Math.max(0, value) * WEB_CELL_WIDTH;
       },
+      get scrollLeftPx() {
+        return Math.max(0, getElement()?.scrollLeft ?? 0);
+      },
+      set scrollLeftPx(value: number) {
+        const element = getElement();
+        if (element) element.scrollLeft = Math.max(0, value);
+      },
       get scrollHeight() {
         return toCellY(getElement()?.scrollHeight ?? 0);
       },
       get scrollWidth() {
         return toCellX(getElement()?.scrollWidth ?? 0);
       },
+      get scrollHeightPx() {
+        return Math.max(0, getElement()?.scrollHeight ?? 0);
+      },
+      get scrollWidthPx() {
+        return Math.max(0, getElement()?.scrollWidth ?? 0);
+      },
       get viewport() {
         const element = getElement();
         return {
@@ -960,6 +980,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           height: toCellY(element?.clientHeight ?? 0),
         };
       },
+      get viewportPx() {
+        const element = getElement();
+        return {
+          width: Math.max(0, element?.clientWidth ?? 0),
+          height: Math.max(0, element?.clientHeight ?? 0),
+        };
+      },
       getBoundingClientRect() {
         const rect = getElement()?.getBoundingClientRect();
         return {
@@ -986,6 +1013,21 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           top: Math.max(0, target.y ?? toCellY(element.scrollTop)) * WEB_CELL_HEIGHT,
         });
       },
+      scrollToPixels(target: number | { x?: number; y?: number }, y?: number) {
+        const element = getElement();
+        if (!element) return;
+        if (typeof target === "number") {
+          element.scrollTop = Math.max(0, target);
+          if (typeof y === "number") {
+            element.scrollLeft = Math.max(0, y);
+          }
+          return;
+        }
+        element.scrollTo({
+          left: Math.max(0, target.x ?? element.scrollLeft),
+          top: Math.max(0, target.y ?? element.scrollTop),
+        });
+      },
     }), [horizontalScrollBar, verticalScrollBar]);
 
     const scrollable = props.scrollX === true || props.scrollY === true;