@opencode/ui 0.0.0-dev-20716 → 0.0.0-dev-20718

package/dist/navigation/segmented-control/segmented-control.d.ts

@@ -1,7 +1,20 @@
-import { type JSX, type ParentProps } from "solid-js";
-import type { ComponentProps } from "solid-js";
+import { type Transition } from "@kitlangton/solid-motion";
+import { type ComponentProps, type JSX, type ParentProps } from "solid-js";
 import "./segmented-control.css";
 type OnChange = (value: string | null) => void;
+export declare const SEGMENTED_CONTROL_SPRING: Transition;
+export type OffsetElement = {
+    offsetLeft: number;
+    offsetWidth: number;
+    offsetParent: Element | OffsetElement | null;
+    getBoundingClientRect: () => {
+        left: number;
+    };
+};
+export declare function measureOffset(root: OffsetElement, button: OffsetElement): {
+    x: number;
+    width: number;
+};
 export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null;
@@ -11,6 +24,8 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & Pa
     /** 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 declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
 export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
@@ -18,4 +33,8 @@ export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" |
     children: JSX.Element;
 }>;
 export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
+export declare const SegmentedControlV2: typeof SegmentedControl;
+export declare const SegmentedControlItemV2: typeof SegmentedControlItem;
+export type SegmentedControlV2Props = SegmentedControlProps;
+export type SegmentedControlItemV2Props = SegmentedControlItemProps;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "0.0.0-dev-20716",
+  "version": "0.0.0-dev-20718",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -244,6 +244,7 @@
     "vite-plugin-solid": "2.11.10"
   },
   "dependencies": {
+    "@kitlangton/solid-motion": "0.2.2",
     "@kobalte/core": "0.13.13",
     "@pierre/diffs": "1.5.1",
     "@solid-primitives/event-listener": "2.4.6",

package/src/actions/button/button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="button-v2"] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -26,6 +22,10 @@
   outline: none;
 }
 
+[data-component="button-v2"] > * {
+  pointer-events: none;
+}
+
 [data-component="button-v2"]:focus {
   outline: none;
 }

package/src/actions/icon-button/icon-button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="icon-button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="icon-button-v2"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;

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,25 +1,37 @@
+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>()
@@ -32,6 +44,33 @@ function useSegmentedControlContext() {
   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. */
@@ -42,10 +81,12 @@ 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, [
@@ -57,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)
@@ -92,19 +208,32 @@ export function SegmentedControl(props: SegmentedControlProps) {
     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 (
@@ -115,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>
@@ -134,9 +267,17 @@ 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) {
@@ -150,10 +291,18 @@ 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)
 
@@ -162,27 +311,38 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
 
     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"]`)
 
@@ -191,7 +351,11 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
       )
 
       first?.focus()
-    } else if (e.key === "End") {
+
+      return
+    }
+
+    if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
 
@@ -204,9 +368,17 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     }
   }
 
+  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}
@@ -223,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/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;