@opencode-ai/ui 1.18.2 → 1.18.4

package/dist/components/resize-handle.d.ts

@@ -7,6 +7,8 @@ export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElemen
     max: number;
     onResize: (size: number) => void;
     onCollapse?: () => void;
+    /** Called while dragging when size crosses `collapseThreshold`. */
+    onCollapseChange?: (collapsed: boolean) => void;
     collapseThreshold?: number;
 }
 export declare function ResizeHandle(props: ResizeHandleProps): JSX.Element;

package/dist/components/scroll-view.d.ts

@@ -1,9 +1,19 @@
-import { type ComponentProps } from "solid-js";
+import { type Accessor, type ComponentProps } from "solid-js";
 export type ScrollViewThumbVisibility = "hover" | "scroll";
 export interface ScrollViewProps extends ComponentProps<"div"> {
     viewportRef?: (el: HTMLDivElement) => void;
     orientation?: "vertical" | "horizontal";
+    /**
+     * `hover`: show while hovered or scrolling. `scroll`: show only while scrolling.
+     *
+     * In most cases, scrolling a container = hovering over it, so this change has no effect.
+     * This is a special case to account for the home page scroll, where scrolling a container != hovering over it
+     * */
     thumbVisibility?: ScrollViewThumbVisibility;
+    /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
+    thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>;
+    /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
+    thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>;
 }
 export declare const scrollKey: (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => "end" | "home" | "page-down" | "page-up" | "up" | "down" | undefined;
 export declare function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;
@@ -16,5 +26,7 @@ export declare function scrollTopFromThumbPointer(input: {
     clientHeight: number;
     scrollHeight: number;
     thumbHeight: number;
+    /** Viewport height used for max scroll. Defaults to `clientHeight` (track == viewport). */
+    scrollClientHeight?: number;
 }): number;
 export declare function ScrollView(props: ScrollViewProps): import("solid-js").JSX.Element;

package/dist/v2/components/button-v2.d.ts

@@ -4,7 +4,7 @@ import { type IconProps } from "./icon";
 import "./button-v2.css";
 export interface ButtonV2Props extends ComponentProps<typeof Kobalte>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
     size?: "small" | "normal" | "large";
-    variant?: "neutral" | "danger" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading";
+    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading";
     icon?: IconProps["name"];
 }
 export declare function ButtonV2(props: ButtonV2Props): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.18.2",
+  "version": "1.18.4",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/dock-surface.css

@@ -7,6 +7,20 @@
   overflow: clip;
 }
 
+[data-dock-border-underlay] {
+  /* Later shadows paint underneath, so this solid ring masks overlapping surfaces without changing border geometry. */
+  box-shadow:
+    var(--dock-shell-visual-shadow, var(--shadow-xs-border)),
+    0 0 0 var(--dock-shell-border-underlay-width, 1px)
+      var(--dock-shell-border-underlay-background, var(--surface-raised-stronger-non-alpha));
+}
+
+[data-dock-border-underlay="v2"] {
+  --dock-shell-visual-shadow: var(--v2-elevation-raised);
+  --dock-shell-border-underlay-width: 0.5px;
+  --dock-shell-border-underlay-background: var(--v2-background-bg-base);
+}
+
 [data-dock-surface="tray"] {
   background-color: var(--background-base);
   border: 1px solid var(--border-weak-base);

package/src/components/resize-handle.tsx

@@ -8,6 +8,8 @@ export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElemen
   max: number
   onResize: (size: number) => void
   onCollapse?: () => void
+  /** Called while dragging when size crosses `collapseThreshold`. */
+  onCollapseChange?: (collapsed: boolean) => void
   collapseThreshold?: number
 }
 
@@ -20,17 +22,26 @@ export function ResizeHandle(props: ResizeHandleProps) {
     "max",
     "onResize",
     "onCollapse",
+    "onCollapseChange",
     "collapseThreshold",
     "class",
     "classList",
   ])
 
   const handleMouseDown = (e: MouseEvent) => {
+    if (e.detail > 1) return
     e.preventDefault()
     const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
     const start = local.direction === "horizontal" ? e.clientX : e.clientY
     const startSize = local.size
+    const min = local.min
+    const max = local.max
+    const threshold = local.collapseThreshold ?? 0
+    const onResize = local.onResize
+    const onCollapse = local.onCollapse
+    const onCollapseChange = local.onCollapseChange
     let current = startSize
+    let collapsed = false
 
     document.body.style.userSelect = "none"
     document.body.style.overflow = "hidden"
@@ -46,8 +57,12 @@ export function ResizeHandle(props: ResizeHandleProps) {
             ? start - pos
             : pos - start
       current = startSize + delta
-      const clamped = Math.min(local.max, Math.max(local.min, current))
-      local.onResize(clamped)
+      const nextCollapsed = threshold > 0 && current < threshold
+      if (nextCollapsed !== collapsed) {
+        collapsed = nextCollapsed
+        onCollapseChange?.(collapsed)
+      }
+      onResize(Math.min(max, Math.max(min, current)))
     }
 
     const onMouseUp = () => {
@@ -56,10 +71,11 @@ export function ResizeHandle(props: ResizeHandleProps) {
       document.removeEventListener("mousemove", onMouseMove)
       document.removeEventListener("mouseup", onMouseUp)
 
-      const threshold = local.collapseThreshold ?? 0
-      if (local.onCollapse && threshold > 0 && current < threshold) {
-        local.onCollapse()
+      if (collapsed) {
+        onCollapse?.()
+        return
       }
+      onCollapseChange?.(false)
     }
 
     document.addEventListener("mousemove", onMouseMove)

package/src/components/scroll-view.css

@@ -27,6 +27,7 @@
   transition: opacity 200ms ease;
   cursor: default;
   user-select: none;
+  pointer-events: auto;
   opacity: 0;
 }
 

package/src/components/scroll-view.tsx

@@ -1,4 +1,15 @@
-import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import {
+  createEffect,
+  createMemo,
+  mergeProps,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Accessor,
+  type ComponentProps,
+} from "solid-js"
+import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
@@ -8,7 +19,17 @@ export type ScrollViewThumbVisibility = "hover" | "scroll"
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
   orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
+  /**
+   * `hover`: show while hovered or scrolling. `scroll`: show only while scrolling.
+   *
+   * In most cases, scrolling a container = hovering over it, so this change has no effect.
+   * This is a special case to account for the home page scroll, where scrolling a container != hovering over it
+   * */
   thumbVisibility?: ScrollViewThumbVisibility
+  /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
+  thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>
+  /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
+  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -65,12 +86,14 @@ export function scrollTopFromThumbPointer(input: {
   clientHeight: number
   scrollHeight: number
   thumbHeight: number
+  /** Viewport height used for max scroll. Defaults to `clientHeight` (track == viewport). */
+  scrollClientHeight?: number
 }) {
   const padding = 8
   const maxThumbTop = input.clientHeight - padding * 2 - input.thumbHeight
   if (maxThumbTop <= 0) return 0
   const thumbTop = Math.max(0, Math.min(input.pointer - input.viewportTop - padding - input.grabOffset, maxThumbTop))
-  return (thumbTop / maxThumbTop) * Math.max(0, input.scrollHeight - input.clientHeight)
+  return (thumbTop / maxThumbTop) * Math.max(0, input.scrollHeight - (input.scrollClientHeight ?? input.clientHeight))
 }
 
 export function ScrollView(props: ScrollViewProps) {
@@ -78,7 +101,16 @@ export function ScrollView(props: ScrollViewProps) {
   const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
   const [local, events, rest] = splitProps(
     merged,
-    ["class", "children", "viewportRef", "orientation", "thumbVisibility", "style"],
+    [
+      "class",
+      "children",
+      "viewportRef",
+      "orientation",
+      "thumbVisibility",
+      "thumbContainer",
+      "thumbHoverTarget",
+      "style",
+    ],
     [
       "onScroll",
       "onWheel",
@@ -96,6 +128,15 @@ export function ScrollView(props: ScrollViewProps) {
   let viewportRef!: HTMLDivElement
   let thumbRef!: HTMLDivElement
 
+  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
+    if (typeof value === "function") return value()
+    return value
+  }
+
+  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
+  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
+  const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
+
   const [state, setState] = createStore({
     isHovered: false,
     isDragging: false,
@@ -114,7 +155,6 @@ export function ScrollView(props: ScrollViewProps) {
   let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
 
   const markScrolling = () => {
-    if (local.thumbVisibility !== "scroll") return
     setState("isScrolling", true)
     if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
     scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
@@ -122,8 +162,8 @@ export function ScrollView(props: ScrollViewProps) {
 
   const thumbVisible = () => {
     if (isDragging()) return true
-    if (local.thumbVisibility === "scroll") return isScrolling()
-    return isHovered()
+    if (isScrolling()) return true
+    return local.thumbVisibility === "hover" && isHovered()
   }
 
   onCleanup(() => {
@@ -141,7 +181,8 @@ export function ScrollView(props: ScrollViewProps) {
 
     setState("showThumb", true)
     const trackPadding = 8
-    const trackHeight = clientHeight - trackPadding * 2
+    const trackClientHeight = thumbMount()?.clientHeight || clientHeight
+    const trackHeight = trackClientHeight - trackPadding * 2
 
     const minThumbHeight = 32
     // Calculate raw thumb height based on ratio
@@ -165,16 +206,40 @@ export function ScrollView(props: ScrollViewProps) {
       local.viewportRef(viewportRef)
     }
 
-    createResizeObserver([viewportRef, viewportRef.firstElementChild], updateThumb)
+    createResizeObserver(
+      () => [viewportRef, viewportRef.firstElementChild, thumbMount()].filter(Boolean) as HTMLElement[],
+      updateThumb,
+    )
 
     updateThumb()
   })
 
+  createEffect(() => {
+    thumbMount()
+    updateThumb()
+  })
+
+  createEffect(() => {
+    const target = thumbHover()
+    if (!target) return
+
+    const enter = () => setState("isHovered", true)
+    const leave = () => setState("isHovered", false)
+    target.addEventListener("pointerenter", enter)
+    target.addEventListener("pointerleave", leave)
+    onCleanup(() => {
+      target.removeEventListener("pointerenter", enter)
+      target.removeEventListener("pointerleave", leave)
+      setState("isHovered", false)
+    })
+  })
+
   const onThumbPointerDown = (e: PointerEvent) => {
     e.preventDefault()
     e.stopPropagation()
     setState("isDragging", true)
     const grabOffset = e.clientY - thumbRef.getBoundingClientRect().top
+    const track = thumbMount() ?? viewportRef
 
     thumbRef.setPointerCapture(e.pointerId)
 
@@ -182,9 +247,10 @@ export function ScrollView(props: ScrollViewProps) {
       const { scrollHeight, clientHeight } = viewportRef
       viewportRef.scrollTop = scrollTopFromThumbPointer({
         pointer: e.clientY,
-        viewportTop: viewportRef.getBoundingClientRect().top,
+        viewportTop: track.getBoundingClientRect().top,
         grabOffset,
-        clientHeight,
+        clientHeight: track.clientHeight,
+        scrollClientHeight: clientHeight,
         scrollHeight,
         thumbHeight: thumbHeight(),
       })
@@ -203,6 +269,23 @@ export function ScrollView(props: ScrollViewProps) {
     thumbRef.addEventListener("pointercancel", done)
   }
 
+  const renderThumb = () => (
+    <div
+      ref={(el) => {
+        thumbRef = el
+      }}
+      onPointerDown={onThumbPointerDown}
+      class="scroll-view__thumb"
+      data-visible={thumbVisible()}
+      data-dragging={isDragging()}
+      style={{
+        height: `${thumbHeight()}px`,
+        transform: `translateY(${thumbTop()}px)`,
+        "z-index": 100, // ensure it displays over content
+      }}
+    />
+  )
+
   // Keybinds implementation
   // We ensure the viewport has a tabindex so it can receive focus
   // We can also explicitly catch PageUp/Down if we want smooth scroll or specific behavior,
@@ -253,8 +336,12 @@ export function ScrollView(props: ScrollViewProps) {
       ref={rootRef}
       class={`scroll-view ${local.class || ""}`}
       style={local.style}
-      onPointerEnter={() => setState("isHovered", true)}
-      onPointerLeave={() => setState("isHovered", false)}
+      onPointerEnter={() => {
+        if (hoverRoot()) setState("isHovered", true)
+      }}
+      onPointerLeave={() => {
+        if (hoverRoot()) setState("isHovered", false)
+      }}
       {...rest}
     >
       {/* Viewport */}
@@ -290,20 +377,11 @@ export function ScrollView(props: ScrollViewProps) {
         {local.children}
       </div>
 
-      {/* Thumb Overlay */}
+      {/* Thumb Overlay — optionally portaled into an external track */}
       <Show when={showThumb()}>
-        <div
-          ref={thumbRef}
-          onPointerDown={onThumbPointerDown}
-          class="scroll-view__thumb"
-          data-visible={thumbVisible()}
-          data-dragging={isDragging()}
-          style={{
-            height: `${thumbHeight()}px`,
-            transform: `translateY(${thumbTop()}px)`,
-            "z-index": 100, // ensure it displays over content
-          }}
-        />
+        <Show when={thumbMount()} fallback={renderThumb()}>
+          {(mount) => <Portal mount={mount()}>{renderThumb()}</Portal>}
+        </Show>
       </Show>
     </div>
   )

package/src/components/tabs.css

@@ -723,7 +723,11 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     }
 
     &:has([data-slot="tabs-trigger-close-button"]) {
-      padding-right: 10px;
+      padding-right: 8px;
+
+      [data-slot="tabs-trigger-close-button"] {
+        margin-left: 2px;
+      }
     }
 
     &:has([data-selected]) {
@@ -789,6 +793,62 @@ body[data-new-layout]
   [data-slot="tabs-list"]
   > .sticky {
   padding-right: 0;
+
+  [data-component="icon-button-v2"] {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 28px;
+      background-color: var(--v2-background-bg-base);
+      pointer-events: none;
+    }
+  }
+}
+
+body[data-new-layout]
+  #review-panel
+  [data-component="tabs"]
+  .session-review-v2-tabs-bar
+  [data-slot="tabs-list"]
+  > .session-review-v2-sidebar-toggle-slot.sticky {
+  padding-right: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    right: 100%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 28px;
+    background-color: var(--v2-background-bg-base);
+    background-image: none;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 28px;
+    pointer-events: none;
+    background: linear-gradient(90deg, var(--v2-background-bg-base), transparent);
+  }
+
+  [data-component="icon-button-v2"]::after {
+    display: none;
+  }
 }
 
 body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {

package/src/v2/components/button-v2.css

@@ -113,6 +113,29 @@
   cursor: not-allowed;
 }
 
+[data-component="button-v2"][data-variant="warning"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-state-fg-warning);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Outline */
 [data-component="button-v2"][data-variant="outline"] {
   background-color: transparent;

package/src/v2/components/button-v2.tsx

@@ -7,7 +7,7 @@ export interface ButtonV2Props
   extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
+  variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 

package/src/v2/components/dialog-v2.tsx

@@ -101,7 +101,7 @@ export function Dialog(props: DialogProps) {
             const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
             if (autofocusEl) {
               e.preventDefault()
-              autofocusEl.focus()
+              autofocusEl.focus({ preventScroll: true })
             }
           }}
         >

package/src/v2/components/divider-v2.css

@@ -1,8 +1,8 @@
 [data-component="divider-v2"] {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5px;
-  margin-block: 0.25px;
+  height: 1px;
+  transform: scaleY(0.5);
   border: none;
   background: var(--v2-border-border-strong);
   flex: none;

package/src/v2/components/inline-input-v2.css

@@ -67,9 +67,14 @@
   gap: 4px;
   background: var(--v2-background-bg-layer-01);
   border-radius: 4px 0 0 4px;
+  cursor: default;
   transition: background 85ms ease-out;
 }
 
+[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-prefix"] {
+  cursor: not-allowed;
+}
+
 [data-component="inline-input-v2"][data-label-width] [data-slot="inline-input-v2-prefix"] {
   width: var(--inline-input-v2-label-width);
   min-width: var(--inline-input-v2-label-width);
@@ -89,6 +94,7 @@
   letter-spacing: -0.04px;
   color: var(--v2-text-text-muted);
   font-variation-settings: "slnt" 0;
+  user-select: none;
 }
 
 [data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-prefix-text"] {
@@ -149,6 +155,7 @@
 
 [data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
   color: var(--v2-text-text-faint);
+  user-select: none;
 }
 
 [data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {

package/src/v2/components/inline-input-v2.tsx

@@ -37,6 +37,8 @@ export function InlineInputV2(props: InlineInputV2Props) {
     "style",
   ])
 
+  let input: HTMLInputElement | undefined
+
   return (
     <div
       data-component="inline-input-v2"
@@ -59,7 +61,15 @@ export function InlineInputV2(props: InlineInputV2Props) {
           : {}),
       }}
     >
-      <div data-slot="inline-input-v2-prefix">
+      <div
+        data-slot="inline-input-v2-prefix"
+        onMouseDown={(event) => {
+          if (local.disabled || event.button !== 0) return
+          // Keep focus on the input without using a native <label>, so external labels still work.
+          event.preventDefault()
+          input?.focus()
+        }}
+      >
         <span data-slot="inline-input-v2-prefix-text">{local.prefix}</span>
       </div>
       <div data-slot="inline-input-v2-divider" aria-hidden="true" />
@@ -67,6 +77,11 @@ export function InlineInputV2(props: InlineInputV2Props) {
         <div data-slot="inline-input-v2-value">
           <input
             {...inputProps}
+            ref={(el) => {
+              input = el
+              const ref = inputProps.ref
+              if (typeof ref === "function") ref(el)
+            }}
             type={inputProps.type ?? "text"}
             disabled={local.disabled}
             aria-invalid={local.invalid ? true : undefined}

package/src/v2/components/text-input-v2.css

@@ -98,6 +98,7 @@
 
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
   color: var(--v2-text-text-faint);
+  user-select: none;
 }
 
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {