gloomberb 0.7.5 → 0.8.0

package/src/renderers/electrobun/view/host/scroll-box.tsx

@@ -0,0 +1,276 @@
+/// <reference lib="dom" />
+/** @jsxImportSource react */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type WheelEvent as ReactWheelEvent,
+} from "react";
+import type { ScrollBoxRenderable } from "../../../../ui/host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
+import { callMouseHandler, hasDirectMouseHandler } from "./mouse";
+import { cleanDomProps, commonStyle } from "./style";
+import { useScrollbarActivity } from "../scrollbar-activity";
+
+export const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & { children?: ReactNode }>(
+  function WebScrollBox({ children, ...props }, ref) {
+    const elementRef = useRef<HTMLDivElement | null>(null);
+    const isHeaderLikeScroller = props.scrollX === true && props.scrollY !== true && props.height === 1;
+    const [horizontalScrollBarVisible, setHorizontalScrollBarVisible] = useState(
+      () => props.scrollX === true && !isHeaderLikeScroller,
+    );
+    const [verticalScrollBarVisible, setVerticalScrollBarVisible] = useState(
+      () => props.scrollY === true,
+    );
+    const horizontalScrollBarVisibleRef = useRef(horizontalScrollBarVisible);
+    const verticalScrollBarVisibleRef = useRef(verticalScrollBarVisible);
+    const horizontalScrollChangeHandlersRef = useRef(new Set<() => void>());
+    const verticalScrollChangeHandlersRef = useRef(new Set<() => void>());
+    const scrollFrameRef = useRef<number | null>(null);
+    const lastWheelAtRef = useRef(0);
+    const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
+
+    const getElement = useCallback(() => elementRef.current, []);
+    const toCellY = (pixels: number) => Math.max(0, Math.round(pixels / WEB_CELL_HEIGHT));
+    const toCellX = (pixels: number) => Math.max(0, Math.round(pixels / WEB_CELL_WIDTH));
+    const emitHorizontalScrollChange = useCallback(() => {
+      for (const handler of horizontalScrollChangeHandlersRef.current) {
+        handler();
+      }
+    }, []);
+    const emitVerticalScrollChange = useCallback(() => {
+      for (const handler of verticalScrollChangeHandlersRef.current) {
+        handler();
+      }
+    }, []);
+    const emitScrollPositionChanges = useCallback(() => {
+      emitVerticalScrollChange();
+      emitHorizontalScrollChange();
+    }, [emitHorizontalScrollChange, emitVerticalScrollChange]);
+    const horizontalScrollBar = useMemo(() => ({
+      get visible() {
+        return horizontalScrollBarVisibleRef.current;
+      },
+      set visible(nextVisible: boolean) {
+        const normalized = nextVisible === true;
+        horizontalScrollBarVisibleRef.current = normalized;
+        setHorizontalScrollBarVisible(normalized);
+      },
+      on(event: "change", handler: () => void) {
+        if (event === "change") horizontalScrollChangeHandlersRef.current.add(handler);
+      },
+      off(event: "change", handler: () => void) {
+        if (event === "change") horizontalScrollChangeHandlersRef.current.delete(handler);
+      },
+    }), []);
+    const verticalScrollBar = useMemo(() => ({
+      get visible() {
+        return verticalScrollBarVisibleRef.current;
+      },
+      set visible(nextVisible: boolean) {
+        const normalized = nextVisible === true;
+        verticalScrollBarVisibleRef.current = normalized;
+        setVerticalScrollBarVisible(normalized);
+      },
+      on(event: "change", handler: () => void) {
+        if (event === "change") verticalScrollChangeHandlersRef.current.add(handler);
+      },
+      off(event: "change", handler: () => void) {
+        if (event === "change") verticalScrollChangeHandlersRef.current.delete(handler);
+      },
+    }), []);
+
+    useEffect(() => {
+      if (props.scrollX !== true) {
+        horizontalScrollBar.visible = false;
+      }
+    }, [horizontalScrollBar, props.scrollX]);
+
+    useEffect(() => {
+      if (props.scrollY !== true) {
+        verticalScrollBar.visible = false;
+      }
+    }, [props.scrollY, verticalScrollBar]);
+
+    useEffect(() => () => {
+      if (scrollFrameRef.current != null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      get scrollTop() {
+        return toCellY(getElement()?.scrollTop ?? 0);
+      },
+      set scrollTop(value: number) {
+        const element = getElement();
+        if (element) {
+          element.scrollTop = Math.max(0, value) * WEB_CELL_HEIGHT;
+          emitVerticalScrollChange();
+        }
+      },
+      get scrollTopPx() {
+        return Math.max(0, getElement()?.scrollTop ?? 0);
+      },
+      set scrollTopPx(value: number) {
+        const element = getElement();
+        if (element) {
+          element.scrollTop = Math.max(0, value);
+          emitVerticalScrollChange();
+        }
+      },
+      get scrollLeft() {
+        return toCellX(getElement()?.scrollLeft ?? 0);
+      },
+      set scrollLeft(value: number) {
+        const element = getElement();
+        if (element) {
+          element.scrollLeft = Math.max(0, value) * WEB_CELL_WIDTH;
+          emitHorizontalScrollChange();
+        }
+      },
+      get scrollLeftPx() {
+        return Math.max(0, getElement()?.scrollLeft ?? 0);
+      },
+      set scrollLeftPx(value: number) {
+        const element = getElement();
+        if (element) {
+          element.scrollLeft = Math.max(0, value);
+          emitHorizontalScrollChange();
+        }
+      },
+      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 {
+          width: toCellX(element?.clientWidth ?? 0),
+          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 {
+          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) {
+        const element = getElement();
+        if (!element) return;
+        if (typeof target === "number") {
+          element.scrollTop = Math.max(0, target) * WEB_CELL_HEIGHT;
+          emitVerticalScrollChange();
+          if (typeof y === "number") {
+            element.scrollLeft = Math.max(0, y) * WEB_CELL_WIDTH;
+            emitHorizontalScrollChange();
+          }
+          return;
+        }
+        element.scrollTo({
+          left: Math.max(0, target.x ?? toCellX(element.scrollLeft)) * WEB_CELL_WIDTH,
+          top: Math.max(0, target.y ?? toCellY(element.scrollTop)) * WEB_CELL_HEIGHT,
+        });
+        emitScrollPositionChanges();
+      },
+      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);
+          emitVerticalScrollChange();
+          if (typeof y === "number") {
+            element.scrollLeft = Math.max(0, y);
+            emitHorizontalScrollChange();
+          }
+          return;
+        }
+        element.scrollTo({
+          left: Math.max(0, target.x ?? element.scrollLeft),
+          top: Math.max(0, target.y ?? element.scrollTop),
+        });
+        emitScrollPositionChanges();
+      },
+    }), [
+      emitHorizontalScrollChange,
+      emitScrollPositionChanges,
+      emitVerticalScrollChange,
+      getElement,
+      horizontalScrollBar,
+      verticalScrollBar,
+    ]);
+
+    const scrollable = props.scrollX === true || props.scrollY === true;
+    const overflowX = props.scrollX === true ? "auto" : "hidden";
+    const overflowY = props.scrollY === true ? "auto" : "hidden";
+    const handleScroll = useCallback(() => {
+      emitScrollPositionChanges();
+      markScrollbarActive();
+      if (typeof props.onMouseScroll !== "function") return;
+      if (Date.now() - lastWheelAtRef.current < 32) return;
+      if (scrollFrameRef.current != null) return;
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        scrollFrameRef.current = null;
+        (props.onMouseScroll as () => void)();
+      });
+    }, [emitScrollPositionChanges, markScrollbarActive, props.onMouseScroll]);
+    const handleWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {
+      markScrollbarActive();
+      lastWheelAtRef.current = Date.now();
+      callMouseHandler(props.onMouseScroll, event, "scroll");
+    }, [markScrollbarActive, props.onMouseScroll]);
+
+    return (
+      <div
+        {...cleanDomProps(props)}
+        ref={elementRef}
+        data-gloom-scrollbar-x={props.scrollX === true ? (horizontalScrollBarVisible ? "visible" : "hidden") : undefined}
+        data-gloom-scrollbar-y={props.scrollY === true ? (verticalScrollBarVisible ? "visible" : "hidden") : undefined}
+        data-gloom-scrollbar-active={scrollbarActive ? "true" : undefined}
+        data-gloom-interactive={hasDirectMouseHandler(props) ? "true" : undefined}
+        onMouseDown={(event) => callMouseHandler(props.onMouseDown, event, "down")}
+        onMouseMove={(event) => callMouseHandler(props.onMouseMove, event, "move")}
+        onMouseUp={(event) => callMouseHandler(props.onMouseUp, event, "up")}
+        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),
+          ...(props.visible === false ? { display: "none" } : undefined),
+        }}
+      >
+        {children as ReactNode}
+      </div>
+    );
+  },
+);

package/src/renderers/electrobun/view/host/style.ts

@@ -0,0 +1,124 @@
+import type { CSSProperties } from "react";
+import { TextAttributes, type TextProps } from "../../../../ui/host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
+
+export function cellWidth(value: unknown): CSSProperties["width"] {
+  if (typeof value === "number") return `${value * WEB_CELL_WIDTH}px`;
+  return value as CSSProperties["width"];
+}
+
+export function cellHeight(value: unknown): CSSProperties["height"] {
+  if (typeof value === "number") return `${value * WEB_CELL_HEIGHT}px`;
+  return value as CSSProperties["height"];
+}
+
+function cellInset(value: unknown, axis: "x" | "y"): CSSProperties["paddingLeft"] {
+  if (typeof value === "number") return `${value * (axis === "x" ? WEB_CELL_WIDTH : WEB_CELL_HEIGHT)}px`;
+  return value as CSSProperties["paddingLeft"];
+}
+
+export function commonStyle(props: Record<string, unknown>): CSSProperties {
+  const hasFixedInlineSize = props.width != null || props.flexBasis != null;
+  const hasFixedBlockSize = props.height != null;
+  const gapUnit = props.flexDirection === "row" ? WEB_CELL_WIDTH : WEB_CELL_HEIGHT;
+  const zeroMinInlineSize = props.minWidth == null && allowsZeroMinSize(props, "inline");
+  const zeroMinBlockSize = props.minHeight == null && allowsZeroMinSize(props, "block");
+  return {
+    color: typeof props.fg === "string" ? props.fg : undefined,
+    backgroundColor: typeof props.bg === "string" ? props.bg : typeof props.backgroundColor === "string" ? props.backgroundColor : undefined,
+    display: "flex",
+    flexDirection: props.flexDirection === "row" ? "row" : "column",
+    flexGrow: typeof props.flexGrow === "number" ? props.flexGrow : undefined,
+    flexShrink: typeof props.flexShrink === "number" ? props.flexShrink : hasFixedInlineSize || hasFixedBlockSize ? 0 : undefined,
+    flexBasis: cellWidth(props.flexBasis),
+    flexWrap: props.flexWrap === "wrap" ? "wrap" : undefined,
+    alignItems: props.alignItems as CSSProperties["alignItems"],
+    justifyContent: props.justifyContent as CSSProperties["justifyContent"],
+    position: props.position as CSSProperties["position"],
+    left: cellWidth(props.left),
+    right: cellWidth(props.right),
+    top: cellHeight(props.top),
+    bottom: cellHeight(props.bottom),
+    zIndex: typeof props.zIndex === "number" ? props.zIndex : undefined,
+    width: cellWidth(props.width),
+    height: cellHeight(props.height),
+    minWidth: cellWidth(props.minWidth),
+    minHeight: cellHeight(props.minHeight),
+    maxWidth: cellWidth(props.maxWidth),
+    maxHeight: cellHeight(props.maxHeight),
+    paddingLeft: cellInset(props.paddingLeft ?? props.paddingX ?? props.padding, "x"),
+    paddingRight: cellInset(props.paddingRight ?? props.paddingX ?? props.padding, "x"),
+    paddingTop: cellInset(props.paddingTop ?? props.paddingY ?? props.padding, "y"),
+    paddingBottom: cellInset(props.paddingBottom ?? props.paddingY ?? props.padding, "y"),
+    marginLeft: cellInset(props.marginLeft ?? props.marginX ?? props.margin, "x"),
+    marginRight: cellInset(props.marginRight ?? props.marginX ?? props.margin, "x"),
+    marginTop: cellInset(props.marginTop ?? props.marginY ?? props.margin, "y"),
+    marginBottom: cellInset(props.marginBottom ?? props.marginY ?? props.margin, "y"),
+    gap: typeof props.gap === "number" ? `${props.gap * gapUnit}px` : props.gap as CSSProperties["gap"],
+    overflow: props.overflow as CSSProperties["overflow"],
+    border: props.border ? `1px solid ${typeof props.borderColor === "string" ? props.borderColor : "var(--gloom-border)"}` : undefined,
+    boxSizing: "border-box",
+    minInlineSize: zeroMinInlineSize ? 0 : undefined,
+    minBlockSize: zeroMinBlockSize ? 0 : undefined,
+  };
+}
+
+export function textStyle(props: TextProps): CSSProperties {
+  const attributes = props.attributes;
+  const shouldWrap = props.wrapText || props.wrapMode === "word" || props.wrapMode === "char";
+  return {
+    color: props.fg,
+    backgroundColor: props.bg,
+    display: "inline-block",
+    lineHeight: "var(--cell-h)",
+    fontWeight: props.bold || hasAttribute(attributes, TextAttributes.BOLD) ? 700 : undefined,
+    fontStyle: props.italic || hasAttribute(attributes, TextAttributes.ITALIC) ? "italic" : undefined,
+    textDecoration: [
+      props.underline || hasAttribute(attributes, TextAttributes.UNDERLINE) ? "underline" : "",
+      props.strikethrough || hasAttribute(attributes, TextAttributes.STRIKETHROUGH) ? "line-through" : "",
+    ].filter(Boolean).join(" ") || undefined,
+    opacity: props.dim || hasAttribute(attributes, TextAttributes.DIM) ? 0.65 : undefined,
+    filter: props.inverse || hasAttribute(attributes, TextAttributes.INVERSE) ? "invert(1)" : undefined,
+    whiteSpace: shouldWrap ? "pre-wrap" : "pre",
+    overflowWrap: shouldWrap ? "break-word" : undefined,
+    overflow: "visible",
+    textOverflow: "clip",
+    width: cellWidth(props.width),
+    maxWidth: cellWidth(props.maxWidth),
+    minWidth: cellWidth(props.minWidth) ?? 0,
+    flexShrink: shouldWrap ? 1 : 0,
+  };
+}
+
+export function cleanDomProps(props: Record<string, unknown>): Record<string, unknown> {
+  const next = { ...props };
+  for (const key of [
+    "fg", "bg", "backgroundColor", "flexDirection", "flexGrow", "flexShrink", "flexBasis", "flexWrap",
+    "alignItems", "justifyContent",
+    "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
+    "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", "visible", "name", "color",
+    "focused", "focusedBackgroundColor", "textColor", "focusedTextColor", "placeholderColor",
+    "cursorColor", "selectionBg", "selectionFg", "showCursor", "keyBindings", "wrapText", "wrapMode",
+    "initialValue", "value", "onInput", "onChange", "onSubmit", "onCursorChange", "onMouse",
+    "scrollX", "scrollY", "focusable", "bitmap", "bitmaps", "crosshair", "text", "font",
+  ]) {
+    delete next[key];
+  }
+  for (const key of Object.keys(next)) {
+    if (key.startsWith("onMouse")) delete next[key];
+  }
+  return next;
+}
+
+function allowsZeroMinSize(props: Record<string, unknown>, axis: "inline" | "block"): boolean {
+  if (props.overflow === "hidden" || props.overflow === "clip") return true;
+  if (typeof props.flexShrink === "number" && props.flexShrink > 0) return true;
+  return axis === "inline" ? props.scrollX === true : props.scrollY === true;
+}
+
+function hasAttribute(attributes: unknown, flag: number): boolean {
+  return typeof attributes === "number" && (attributes & flag) !== 0;
+}

package/src/renderers/electrobun/view/host/tabs.tsx

@@ -0,0 +1,255 @@
+/// <reference lib="dom" />
+/** @jsxImportSource react */
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type WheelEvent as ReactWheelEvent,
+} from "react";
+import type { HostTabsProps } from "../../../../ui/host";
+import { WEB_CELL_HEIGHT } from "../input-host";
+
+type CssVars = CSSProperties & Record<`--${string}`, string>;
+
+export function WebTabs({
+  tabs,
+  activeValue,
+  onSelect,
+  compact = false,
+  variant = "underline",
+  closeMode = "always",
+  addLabel = "+",
+  onAdd,
+  palette,
+}: HostTabsProps) {
+  const activeTabRef = useRef<HTMLButtonElement | null>(null);
+  const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+  const showUnderline = variant === "underline" && !compact;
+  const listHeight = showUnderline ? 28 : compact ? WEB_CELL_HEIGHT : "100%";
+  const tabFontSize = compact || showUnderline ? 12 : 13;
+  const tabPaddingInline = showUnderline ? 10 : 8;
+  const tabPaddingBlock = variant === "bare" || variant === "pill" ? 2 : 0;
+
+  useEffect(() => {
+    activeTabRef.current?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+    });
+  }, [activeValue, tabs]);
+
+  const handleWheel = (event: ReactWheelEvent<HTMLDivElement>) => {
+    const element = event.currentTarget;
+    if (element.scrollWidth <= element.clientWidth) return;
+    if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) return;
+
+    element.scrollLeft += event.deltaY;
+    event.preventDefault();
+  };
+
+  const resolveTabBackground = (active: boolean, hovered: boolean) => {
+    if (active && variant === "pill") {
+      return hovered
+        ? `color-mix(in srgb, ${palette.activeBg} 76%, ${palette.hoverBg})`
+        : palette.activeBg;
+    }
+    return hovered ? palette.hoverBg : "transparent";
+  };
+
+  const resolveTabColor = (disabled: boolean, active: boolean, hovered: boolean) => {
+    if (disabled) return palette.disabledFg;
+    if (active && variant === "pill") return palette.activePillFg;
+    if (active) return palette.activeFg;
+    if (hovered) return palette.hoverFg;
+    return palette.inactiveFg;
+  };
+
+  return (
+    <div
+      data-gloom-role="tab-list"
+      role="tablist"
+      onWheel={handleWheel}
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        gap: 4,
+        width: "100%",
+        height: listHeight,
+        minInlineSize: 0,
+        flexShrink: 0,
+        overflowX: "auto",
+        overflowY: "hidden",
+        paddingInline: variant === "underline" ? 0 : 4,
+        paddingBlock: tabPaddingBlock,
+        marginBottom: showUnderline ? 4 : 0,
+        boxSizing: "border-box",
+      }}
+    >
+      {tabs.map((tab) => {
+        const active = tab.value === activeValue;
+        const disabled = tab.disabled === true;
+        const hovered = hoveredValue === tab.value && !disabled;
+        const closeVisible = !!tab.onClose && (closeMode === "always" || active);
+        const tabStyle = {
+          "--tab-fg": resolveTabColor(disabled, active, hovered),
+          "--tab-hover-fg": palette.hoverFg,
+          "--tab-underline": active ? palette.activeUnderline : palette.inactiveUnderline,
+          "--tab-hover-underline": palette.hoverUnderline,
+          "--tab-hover-bg": palette.hoverBg,
+          "--tab-close-fg": active && variant === "pill" ? palette.activePillFg : palette.closeFg,
+          color: "var(--tab-fg)",
+          flex: "0 0 auto",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          position: "relative",
+          minWidth: 0,
+          height: "100%",
+          paddingInline: tabPaddingInline,
+          paddingBlock: 0,
+          paddingBottom: showUnderline ? 2 : 0,
+          margin: 0,
+          border: 0,
+          borderRadius: variant === "underline" ? 5 : 6,
+          background: resolveTabBackground(active, hovered),
+          font: "inherit",
+          fontSize: tabFontSize,
+          fontWeight: active ? 700 : 500,
+          lineHeight: 1,
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          transition: "background-color 110ms ease, color 110ms ease, box-shadow 110ms ease",
+          cursor: disabled ? "default" : "pointer",
+        } satisfies CssVars;
+
+        return (
+          <button
+            key={tab.value}
+            ref={active ? activeTabRef : undefined}
+            data-gloom-role="tab-button"
+            data-active={active ? "true" : undefined}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            aria-disabled={disabled || undefined}
+            disabled={disabled}
+            style={tabStyle}
+            onMouseEnter={() => setHoveredValue(tab.value)}
+            onMouseLeave={() => setHoveredValue((current) => (current === tab.value ? null : current))}
+            onClick={() => {
+              if (!disabled) onSelect(tab.value);
+            }}
+            onDoubleClick={() => {
+              if (!disabled) tab.onDoubleClick?.(tab.value);
+            }}
+            onContextMenu={tab.onContextMenu ? (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              tab.onContextMenu?.(tab.value, event);
+            } : undefined}
+          >
+            <span
+              data-gloom-role="tab-label"
+              style={{
+                display: "block",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {tab.label}
+            </span>
+            {closeVisible && (
+              <span
+                data-gloom-role="tab-close"
+                aria-label={`Close ${tab.label}`}
+                role="button"
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 16,
+                  height: 16,
+                  marginRight: -4,
+                  borderRadius: 4,
+                  color: "var(--tab-close-fg)",
+                  fontSize: 12,
+                  lineHeight: 1,
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  tab.onClose?.(tab.value);
+                }}
+              >
+                {"x"}
+              </span>
+            )}
+            {showUnderline && (
+              <span
+                data-gloom-role="tab-underline"
+                aria-hidden="true"
+                style={{
+                  position: "absolute",
+                  left: 10,
+                  right: 10,
+                  bottom: 1,
+                  height: 2,
+                  borderRadius: 999,
+                  background: "var(--tab-underline)",
+                  opacity: active ? 1 : hovered ? 0.7 : 0,
+                }}
+              />
+            )}
+          </button>
+        );
+      })}
+      {onAdd && (
+        <button
+          data-gloom-role="tab-button"
+          type="button"
+          style={{
+            "--tab-fg": palette.addFg,
+            "--tab-hover-fg": palette.hoverFg,
+            "--tab-underline": palette.inactiveUnderline,
+            "--tab-hover-underline": palette.hoverUnderline,
+            "--tab-hover-bg": palette.hoverBg,
+            color: hoveredValue === "__add__" ? palette.hoverFg : "var(--tab-fg)",
+            flex: "0 0 auto",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            paddingInline: tabPaddingInline,
+            paddingBlock: 0,
+            margin: 0,
+            border: 0,
+            borderRadius: variant === "underline" ? 5 : 6,
+            background: hoveredValue === "__add__" ? palette.hoverBg : "transparent",
+            font: "inherit",
+            fontSize: tabFontSize,
+            fontWeight: 500,
+            lineHeight: 1,
+            whiteSpace: "nowrap",
+            transition: "background-color 110ms ease, color 110ms ease",
+            cursor: "pointer",
+          } as CssVars}
+          onMouseEnter={() => setHoveredValue("__add__")}
+          onMouseLeave={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
+          onClick={onAdd}
+        >
+          <span
+            data-gloom-role="tab-label"
+            style={{
+              display: "block",
+            }}
+          >
+            {addLabel}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}