@opencode/ui 2.0.23 → 2.0.25

package/src/navigation/menu/menu.tsx

@@ -47,7 +47,9 @@ const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearanc
 
 function useMenuContext() {
   const ctx = useContext(MenuAppearanceContext)
+
   if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+
   return ctx
 }
 
@@ -76,6 +78,7 @@ export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item>
 function MenuItem(props: ParentProps<MenuItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.Item
       {...r}
@@ -98,6 +101,7 @@ export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMen
 function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.CheckboxItem
       {...r}
@@ -128,6 +132,7 @@ export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.R
 function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.RadioItem
       {...r}
@@ -178,6 +183,7 @@ function MenuSub(props: MenuSubProps) {
 function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+
   return (
     <DropdownMenu.SubTrigger
       {...r}
@@ -195,6 +201,7 @@ function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
 function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.SubContent
       {...r}
@@ -208,6 +215,7 @@ function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
 function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.GroupLabel
       {...r}
@@ -221,6 +229,7 @@ function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
 function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Separator
       {...r}
@@ -234,6 +243,7 @@ function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
 function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <DropdownMenu.Content
       {...r}
@@ -251,6 +261,7 @@ export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
 function MenuRoot(props: MenuProps) {
   const [local, rest] = splitProps(props, ["appearance", "children"])
   const appearance = () => local.appearance ?? "compact"
+
   return (
     <MenuAppearanceContext.Provider value={{ appearance }}>
       <DropdownMenu {...rest}>{local.children}</DropdownMenu>
@@ -265,6 +276,7 @@ export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
 function MenuContextRoot(props: MenuContextProps) {
   const [local, rest] = splitProps(props, ["appearance", "children"])
   const appearance = () => local.appearance ?? "compact"
+
   return (
     <MenuAppearanceContext.Provider value={{ appearance }}>
       <ContextMenu {...rest}>{local.children}</ContextMenu>
@@ -275,6 +287,7 @@ function MenuContextRoot(props: MenuContextProps) {
 function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
   const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
+
   return (
     <ContextMenu.Content
       {...r}

package/src/navigation/segmented-control/segmented-control.css

@@ -3,6 +3,8 @@
 }
 
 [data-slot="segmented-control-v2"] {
+  position: relative;
+  isolation: isolate;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -16,9 +18,28 @@
   border-radius: 6px;
   box-shadow: 0 0 0 0.5px var(--v2-border-border-base);
   flex: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-slot="segmented-control-v2-indicator"] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 6px;
+  background: var(--v2-background-bg-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  z-index: 0;
+  will-change: transform, width;
 }
 
 [data-slot="segmented-control-v2-item"] {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -34,20 +55,26 @@
   background: transparent;
   box-shadow: none;
   cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: var(--line-height-compact);
+  line-height: 100%;
   letter-spacing: -0.04px;
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;
   color: var(--v2-text-text-muted);
   transition:
+    color 0.15s ease,
     background-color 0.12s ease,
-    color 0.12s ease,
     box-shadow 0.12s ease;
 }
 
+[data-slot="segmented-control-v2-item"]:where(:hover:not(:disabled):not([data-pressed])) {
+  color: var(--v2-text-text-base);
+}
+
 [data-slot="segmented-control-v2-item"]:where(:disabled) {
   cursor: not-allowed;
   opacity: 0.45;
@@ -60,12 +87,15 @@
 }
 
 [data-slot="segmented-control-v2-item"]:where([data-pressed]) {
-  background: var(--v2-background-bg-base);
   color: var(--v2-text-text-base);
-  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
   z-index: 1;
 }
 
+[data-slot="segmented-control-v2"]:not([data-ready]) [data-slot="segmented-control-v2-item"]:where([data-pressed]) {
+  background: var(--v2-background-bg-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+}
+
 [data-slot="segmented-control-v2-item-label"] {
   display: flex;
   flex-direction: row;
@@ -77,4 +107,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
 }

package/src/navigation/segmented-control/segmented-control.tsx

@@ -1,35 +1,76 @@
+import { animate, motion, useMotionValue, type Transition } from "@kitlangton/solid-motion"
 import {
   createContext,
+  createEffect,
   createMemo,
   createSignal,
   mergeProps,
+  onCleanup,
+  onMount,
+  Show,
   splitProps,
   useContext,
   type Accessor,
+  type ComponentProps,
   type JSX,
   type ParentProps,
 } from "solid-js"
-import type { ComponentProps } from "solid-js"
 import "./segmented-control.css"
 
 type OnChange = (value: string | null) => void
 
+export const SEGMENTED_CONTROL_SPRING: Transition = {
+  type: "spring",
+  visualDuration: 0.15,
+  bounce: 0,
+}
+
 type SegmentedControlContextValue = {
   selected: Accessor<string | null>
   groupDisabled: Accessor<boolean>
   select: (value: string) => void
   clearIfAllowed: (value: string) => void
   focusNext: (from: HTMLButtonElement, direction: 1 | -1) => void
+  registerItem: (value: string, el: HTMLButtonElement) => () => void
 }
 
 const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
+
   if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
+
   return ctx
 }
 
+export type OffsetElement = {
+  offsetLeft: number
+  offsetWidth: number
+  offsetParent: Element | OffsetElement | null
+  getBoundingClientRect: () => { left: number }
+}
+
+function isOffsetElement(node: Element | OffsetElement | null): node is OffsetElement {
+  return node !== null && "offsetLeft" in node && "offsetParent" in node
+}
+
+export function measureOffset(root: OffsetElement, button: OffsetElement) {
+  let offset = 0
+  let node: OffsetElement | null = button
+
+  while (node && node !== root) {
+    offset += node.offsetLeft
+    node = isOffsetElement(node.offsetParent) ? node.offsetParent : null
+  }
+
+  if (node !== root) {
+    offset = button.getBoundingClientRect().left - root.getBoundingClientRect().left
+  }
+
+  return { x: offset, width: button.offsetWidth }
+}
+
 export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
   ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
@@ -40,11 +81,14 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
     /** When true, clicking the active segment clears selection (`onChange(null)`). Default false. */
     allowDeselect?: boolean
     disabled?: boolean
+    /** Motion transition for the active indicator pill. */
+    transition?: Transition
   }>
 
 export function SegmentedControl(props: SegmentedControlProps) {
-  const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
+  const isControlled = createMemo(() => Object.hasOwn(props, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -54,13 +98,88 @@ export function SegmentedControl(props: SegmentedControlProps) {
     "onChange",
     "allowDeselect",
     "disabled",
+    "transition",
     "ref",
   ])
 
   const [internal, setInternal] = createSignal<string | null>(local.defaultValue ?? null)
+  const [layoutVersion, setLayoutVersion] = createSignal(0)
+  const [ready, setReady] = createSignal(false)
 
   const selected = createMemo(() => (isControlled() ? (local.value ?? null) : internal()))
 
+  const reducedMotion = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true
+
+  const x = useMotionValue(0)
+  const width = useMotionValue(0)
+
+  let rootEl: HTMLDivElement | undefined
+  let observer: ResizeObserver | undefined
+  const items = new Map<string, HTMLButtonElement>()
+  let target = { x: 0, width: 0 }
+  let lastSelected: string | null = null
+
+  const syncIndicator = (shouldAnimate: boolean) => {
+    const current = selected()
+    const button = current !== null ? items.get(current) : undefined
+
+    if (!rootEl || !button) {
+      setReady(false)
+
+      return
+    }
+
+    const next = measureOffset(rootEl, button)
+
+    if (next.width === 0) return
+
+    target = next
+
+    if (!ready() || !shouldAnimate || reducedMotion()) {
+      x.jump(next.x)
+      width.jump(next.width)
+      setReady(true)
+
+      return
+    }
+
+    const transition = local.transition ?? SEGMENTED_CONTROL_SPRING
+    animate(x, next.x, transition)
+    animate(width, next.width, transition)
+  }
+
+  onMount(() => {
+    if (!("ResizeObserver" in globalThis)) return
+
+    observer = new ResizeObserver(() => {
+      const current = selected()
+      const button = current !== null ? items.get(current) : undefined
+
+      if (!rootEl || !button) return
+
+      const next = measureOffset(rootEl, button)
+
+      if (next.width === 0) return
+
+      if (ready() && next.x === target.x && next.width === target.width) return
+
+      syncIndicator(false)
+    })
+
+    if (rootEl) observer.observe(rootEl)
+
+    items.forEach((button) => observer?.observe(button))
+    onCleanup(() => observer?.disconnect())
+  })
+
+  createEffect(() => {
+    const current = selected()
+    layoutVersion()
+    const shouldAnimate = ready() && lastSelected !== null && current !== null && current !== lastSelected
+    lastSelected = current
+    syncIndicator(shouldAnimate)
+  })
+
   const setSelected = (next: string | null) => {
     if (!isControlled()) setInternal(next)
     local.onChange?.(next)
@@ -77,27 +196,44 @@ export function SegmentedControl(props: SegmentedControlProps) {
 
   const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
     const root = from.closest(`[data-slot="segmented-control-v2"]`)
+
     if (!root) return
+
     const buttons = Array.from(
       root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
     ).filter((b) => !b.disabled)
+
     const i = buttons.indexOf(from)
     const next = buttons[i + direction]
     next?.focus()
   }
 
+  const registerItem = (value: string, el: HTMLButtonElement) => {
+    items.set(value, el)
+    observer?.observe(el)
+    setLayoutVersion((v) => v + 1)
+
+    return () => {
+      if (items.get(value) === el) items.delete(value)
+      observer?.unobserve(el)
+      setLayoutVersion((v) => v + 1)
+    }
+  }
+
   const ctx: SegmentedControlContextValue = {
     selected,
     groupDisabled: () => !!local.disabled,
     select,
     clearIfAllowed,
     focusNext,
+    registerItem,
   }
 
-  const assignRef = (el: HTMLDivElement | undefined) => {
+  const assignRef = (el: HTMLDivElement) => {
+    rootEl = el
     const r = local.ref
-    if (typeof r === "function") (r as (el: HTMLDivElement | undefined) => void)(el)
-    else if (r != null && typeof r === "object" && "value" in r) (r as { value: HTMLDivElement | undefined }).value = el
+
+    if (r instanceof Function) r(el)
   }
 
   return (
@@ -108,11 +244,15 @@ export function SegmentedControl(props: SegmentedControlProps) {
         role="group"
         data-component="segmented-control-v2"
         data-slot="segmented-control-v2"
+        data-ready={ready() ? "" : undefined}
         classList={{
           ...local.classList,
           [local.class ?? ""]: !!local.class,
         }}
       >
+        <Show when={ready() && selected() !== null}>
+          <motion.span data-slot="segmented-control-v2-indicator" aria-hidden="true" style={{ x, width }} />
+        </Show>
         {local.children}
       </div>
     </SegmentedControlContext.Provider>
@@ -127,13 +267,22 @@ export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" |
 
 function invokeButtonHandler<E extends Event>(
   handler: JSX.EventHandlerUnion<HTMLButtonElement, E> | undefined,
-  e: E & { currentTarget: HTMLButtonElement },
+  e: Parameters<JSX.EventHandler<HTMLButtonElement, E>>[0],
 ) {
-  if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
+  if (handler instanceof Function) {
+    handler(e)
+
+    return
+  }
+
+  if (Array.isArray(handler)) {
+    handler[0](handler[1], e)
+  }
 }
 
 export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
+
   const [local, rest] = splitProps(merged, [
     "class",
     "classList",
@@ -142,55 +291,94 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     "disabled",
     "onClick",
     "onKeyDown",
+    "ref",
   ])
+
   const ctx = useSegmentedControlContext()
 
+  let buttonEl: HTMLButtonElement | undefined
+  createEffect(() => {
+    if (!buttonEl) return
+    const cleanup = ctx.registerItem(local.value, buttonEl)
+    onCleanup(cleanup)
+  })
+
   const pressed = createMemo(() => ctx.selected() === local.value)
   const disabled = createMemo(() => ctx.groupDisabled() || !!local.disabled)
 
   const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
     invokeButtonHandler(local.onClick, e)
+
     if (e.defaultPrevented || disabled()) return
-    if (pressed()) ctx.clearIfAllowed(local.value)
-    else ctx.select(local.value)
+
+    if (pressed()) {
+      ctx.clearIfAllowed(local.value)
+
+      return
+    }
+
+    ctx.select(local.value)
   }
 
   const onKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent> = (e) => {
     invokeButtonHandler(local.onKeyDown, e)
+
     if (e.defaultPrevented || disabled()) return
+
     const t = e.currentTarget
     const horizontal = t.closest(`[data-slot="segmented-control-v2"]`)?.matches(":dir(rtl)") ? -1 : 1
 
     if (e.key === "ArrowRight") {
       e.preventDefault()
       ctx.focusNext(t, horizontal)
-    } else if (e.key === "ArrowLeft") {
+
+      return
+    }
+
+    if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -horizontal as 1 | -1)
+      ctx.focusNext(t, horizontal === 1 ? -1 : 1)
+
+      return
     }
 
-    // accessibility stuff
-    else if (e.key === "Home") {
+    if (e.key === "Home") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const first = root?.querySelector<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       first?.focus()
-    } else if (e.key === "End") {
+
+      return
+    }
+
+    if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
+
       const buttons = root?.querySelectorAll<HTMLButtonElement>(
         `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
       )
+
       const last = buttons?.[buttons.length - 1]
       last?.focus()
     }
   }
 
+  const assignRef = (el: HTMLButtonElement) => {
+    buttonEl = el
+    const r = local.ref
+
+    if (r instanceof Function) r(el)
+  }
+
   return (
     <button
       {...rest}
+      ref={assignRef}
       type="button"
       data-slot="segmented-control-v2-item"
       data-pressed={pressed() ? "" : undefined}
@@ -207,3 +395,11 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     </button>
   )
 }
+
+export const SegmentedControlV2 = SegmentedControl
+
+export const SegmentedControlItemV2 = SegmentedControlItem
+
+export type SegmentedControlV2Props = SegmentedControlProps
+
+export type SegmentedControlItemV2Props = SegmentedControlItemProps

package/src/navigation/tab-state-indicator.tsx

@@ -2,6 +2,7 @@ import { splitProps, type ComponentProps } from "solid-js"
 
 export function TabStateIndicator(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/navigation/tabs/tabs-current.css

@@ -1,10 +1,6 @@
-* {
+[data-component="tabs-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="tabs-v2"] {
   width: 100%;
   height: 100%;
   display: flex;

package/src/navigation/tabs/tabs.css

@@ -568,11 +568,6 @@
       color: var(--v2-text-text-base);
     }
 
-    .tab-fileicon-color,
-    .tab-fileicon-mono {
-      margin-inline-start: -2px;
-    }
-
     .italic {
       font-style: italic !important;
       font-variation-settings: "slnt" -10 !important;
@@ -600,27 +595,15 @@
   flex: 1 1 0;
   min-width: 0;
   width: auto;
+  height: var(--tabs-bar-height);
+  padding-inline-end: 0;
   border-bottom: none;
 }
 
+/* The end gap lives inside the sticky "+" box. Sticky offsets respect the strip's padding, so padding there
+   would leave a gap after the "+" where scrolled tabs show through. */
 :root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"] > .sticky {
-  padding-inline-end: 0;
-
-  [data-component="icon-button-v2"] {
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      inset-inline-start: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 20px;
-      height: 28px;
-      background-color: var(--v2-background-bg-base);
-      pointer-events: none;
-    }
-  }
+  padding-inline-end: 12px;
 }
 
 :root