@opencode/ui 2.0.23 → 2.0.25

package/src/components/image-preview.tsx

@@ -10,6 +10,7 @@ export interface ImagePreviewProps {
 
 export function ImagePreview(props: ImagePreviewProps) {
   const i18n = useI18n()
+
   return (
     <div data-component="image-preview">
       <div data-slot="image-preview-container">

package/src/components/list.tsx

@@ -9,6 +9,7 @@ import { TextField } from "./text-field"
 
 function findByKey(container: HTMLElement, key: string) {
   const nodes = container.querySelectorAll<HTMLElement>('[data-slot="list-item"][data-key]')
+
   for (const node of nodes) {
     if (node.getAttribute("data-key") === key) return node
   }
@@ -58,11 +59,13 @@ export interface ListRef {
 export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void }) {
   const i18n = useI18n()
   let inputRef: HTMLInputElement | HTMLTextAreaElement | undefined
+
   const [store, setStore] = createStore({
     mouseActive: false,
     scrollRef: undefined as HTMLDivElement | undefined,
     internalFilter: "",
   })
+
   const scrollRef = () => store.scrollRef
   const setScrollRef = (el: HTMLDivElement | undefined) => setStore("scrollRef", el)
   const internalFilter = () => store.internalFilter
@@ -75,6 +78,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     const bottom = top + nodeRect.height
     const viewTop = container.scrollTop
     const viewBottom = viewTop + container.clientHeight
+
     const target =
       block === "center"
         ? top - container.clientHeight / 2 + nodeRect.height / 2
@@ -83,6 +87,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           : bottom > viewBottom
             ? bottom - container.clientHeight
             : viewTop
+
     const max = Math.max(0, container.scrollHeight - container.clientHeight)
     container.scrollTop = Math.max(0, Math.min(target, max))
   }
@@ -108,13 +113,16 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     // This is important for programmatic changes like Tab completion.
     if (prev === value) {
       void refetch()
+
       return
     }
+
     queueMicrotask(() => refetch())
   }
 
   createEffect(() => {
     if (props.filter === undefined) return
+
     if (props.filter === internalFilter()) return
     setInternalFilter(props.filter)
     onInput(props.filter)
@@ -132,11 +140,14 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
   createEffect(() => {
     const scroll = scrollRef()
+
     if (!scroll) return
+
     if (!props.current) return
     const key = props.key(props.current)
     requestAnimationFrame(() => {
       const element = findByKey(scroll, key)
+
       if (!element) return
       scrollIntoView(scroll, element, "center")
     })
@@ -144,16 +155,23 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
   createEffect(() => {
     const all = flat()
+
     if (store.mouseActive || all.length === 0) return
     const scroll = scrollRef()
+
     if (!scroll) return
+
     if (active() === props.key(all[0])) {
       scroll.scrollTo(0, 0)
+
       return
     }
+
     const key = active()
+
     if (!key) return
     const element = findByKey(scroll, key)
+
     if (!element) return
     scrollIntoView(scroll, element, "center")
   })
@@ -171,6 +189,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
   const handleKey = (e: KeyboardEvent) => {
     setStore("mouseActive", false)
+
     if (e.key === "Escape") return
 
     const all = flat()
@@ -182,12 +201,15 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
     if (e.key === "Enter" && !e.isComposing) {
       e.preventDefault()
+
       if (selected) handleSelect(selected, index)
     } else if (props.search) {
       if (e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && (e.key === "n" || e.key === "p")) {
         onKeyDown(e)
+
         return
       }
+
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         onKeyDown(e)
       }
@@ -204,7 +226,9 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
   const renderAdd = () => {
     const add = addProps()
+
     if (!add) return null
+
     return (
       <div data-slot="list-item-add" classList={{ [add.class ?? ""]: !!add.class }}>
         {add.render()}
@@ -221,6 +245,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     createEffect(() => {
       const scroll = scrollRef()
       const node = state.header
+
       if (!scroll || !node) return
 
       const handler = () => {
@@ -242,12 +267,15 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
   const emptyMessage = () => {
     if (grouped.loading) return props.loadingMessage ?? i18n.t("ui.list.loading")
+
     if (props.emptyMessage) return props.emptyMessage
 
     const query = filter()
+
     if (!query) return i18n.t("ui.list.empty")
 
     const suffix = i18n.t("ui.list.emptyWithFilter.suffix")
+
     return (
       <>
         <span>{i18n.t("ui.list.emptyWithFilter.prefix")}</span>
@@ -268,6 +296,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             classList={{ [searchProps().class ?? ""]: !!searchProps().class }}
             onPointerDown={(event) => {
               const container = event.currentTarget
+
               if (!(container instanceof HTMLElement)) return
 
               const node = container.querySelector("input, textarea")
@@ -327,6 +356,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           <For each={grouped.latest}>
             {(group, groupIndex) => {
               const isLastGroup = () => groupIndex() === grouped.latest.length - 1
+
               return (
                 <div data-slot="list-group">
                   <Show when={group.category}>
@@ -374,7 +404,9 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
                             </Show>
                           </button>
                         )
+
                         if (props.itemWrapper) return props.itemWrapper(item, node)
+
                         return node
                       }}
                     </For>

package/src/components/motion-spring.tsx

@@ -3,6 +3,7 @@ import type { SpringOptions } from "motion"
 import { createComputed, createEffect, createSignal, onCleanup } from "solid-js"
 
 type Opt = Partial<Pick<SpringOptions, "visualDuration" | "bounce" | "stiffness" | "damping" | "mass" | "velocity">>
+
 const eq = (a: Opt | undefined, b: Opt | undefined) =>
   a?.visualDuration === b?.visualDuration &&
   a?.bounce === b?.bounce &&
@@ -24,6 +25,7 @@ export function useSpring(target: () => number, options?: Opt | (() => Opt), sna
   createComputed(() => {
     const next = target()
     const nextSnap = snapKey?.()
+
     if (snapKey && nextSnap !== snapValue) {
       // State boundaries should adopt their target without animating from the previous context.
       snapValue = nextSnap
@@ -32,14 +34,17 @@ export function useSpring(target: () => number, options?: Opt | (() => Opt), sna
       source.jump(next)
       stop = attachSpring(spring, source, config)
       setValue(next)
+
       return
     }
+
     source.set(next)
   })
 
   createEffect(() => {
     if (!options) return
     const next = read()
+
     if (eq(config, next)) return
     config = next
     stop()

package/src/components/popover.tsx

@@ -22,6 +22,7 @@ export interface PopoverProps<T extends ValidComponent = "div">
 
 export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
   const i18n = useI18n()
+
   const [local, rest] = splitProps(props, [
     "trigger",
     "triggerAs",
@@ -47,14 +48,18 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
   })
 
   const controlled = () => local.open !== undefined
+
   const opened = () => {
     if (controlled()) return local.open ?? false
+
     return state.uncontrolledOpen
   }
 
   const onOpenChange = (next: boolean) => {
     if (next) setState("dismiss", null)
+
     if (local.onOpenChange) local.onOpenChange(next)
+
     if (controlled()) return
     setState("uncontrolledOpen", next)
   }
@@ -65,9 +70,12 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
     const inside = (node: Node | null | undefined) => {
       if (!node) return false
       const content = state.contentRef
+
       if (content && content.contains(node)) return true
       const trigger = state.triggerRef
+
       if (trigger && trigger.contains(node)) return true
+
       return false
     }
 
@@ -85,14 +93,18 @@ export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>
 
     const onPointerDown = (event: PointerEvent) => {
       const target = event.target
+
       if (!(target instanceof Node)) return
+
       if (inside(target)) return
       close("outside")
     }
 
     const onFocusIn = (event: FocusEvent) => {
       const target = event.target
+
       if (!(target instanceof Node)) return
+
       if (inside(target)) return
       close("outside")
     }

package/src/components/provider-icon.tsx

@@ -10,6 +10,7 @@ export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
 export const ProviderIcon: Component<ProviderIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["id", "class", "classList"])
   const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "synthetic"))
+
   return (
     <svg
       data-component="provider-icon"

package/src/components/resize-handle.tsx

@@ -33,10 +33,12 @@ export function ResizeHandle(props: ResizeHandleProps) {
     e.preventDefault()
     const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
     const start = local.direction === "horizontal" ? e.clientX : e.clientY
+
     const rtl =
       local.direction === "horizontal" &&
       e.currentTarget instanceof Element &&
       getComputedStyle(e.currentTarget).direction === "rtl"
+
     const startSize = local.size
     const min = local.min
     const max = local.max
@@ -52,6 +54,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
 
     const onMouseMove = (moveEvent: MouseEvent) => {
       const pos = local.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
+
       const delta =
         local.direction === "vertical"
           ? edge === "end"
@@ -60,12 +63,15 @@ export function ResizeHandle(props: ResizeHandleProps) {
           : (edge === "start") !== rtl
             ? start - pos
             : pos - start
+
       current = startSize + delta
       const nextCollapsed = threshold > 0 && current < threshold
+
       if (nextCollapsed !== collapsed) {
         collapsed = nextCollapsed
         onCollapseChange?.(collapsed)
       }
+
       onResize(Math.min(max, Math.max(min, current)))
     }
 
@@ -77,8 +83,10 @@ export function ResizeHandle(props: ResizeHandleProps) {
 
       if (collapsed) {
         onCollapse?.()
+
         return
       }
+
       onCollapseChange?.(false)
     }
 

package/src/components/scroll-view.tsx

@@ -28,6 +28,7 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
   if (event.altKey || event.ctrlKey || event.metaKey) return
+
   if (event.shiftKey && event.key !== " ") return
 
   switch (event.key) {
@@ -50,6 +51,7 @@ export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey
 
 export function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>) {
   const up = key === "up" || key === "page-up" || key === "home"
+
   return up ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight
 }
 
@@ -60,16 +62,23 @@ export function scrollKeyOwner(
 ) {
   const element = target instanceof Element ? target : undefined
   const owner = element?.closest<HTMLElement>("[data-scrollable]")
+
   if (!owner || owner === root) return root
+
   if (!root.contains(owner)) return owner
+
   return canScrollKey(owner, key) ? owner : root
 }
 
 export function isScrollKeyTarget(target: EventTarget | null, key: NonNullable<ReturnType<typeof scrollKey>>) {
   const element = target instanceof HTMLElement ? target : undefined
+
   if (!element) return true
+
   if (["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) || element.isContentEditable) return false
+
   if ((key === "page-up" || key === "page-down") && element.closest('button, a[href], [role="button"]')) return false
+
   return true
 }
 
@@ -106,18 +115,23 @@ export function scrollOffsetFromThumbPointer(input: {
 }) {
   const padding = 8
   const maxThumbStart = input.clientSize - padding * 2 - input.thumbSize
+
   if (maxThumbStart <= 0) return 0
+
   const thumbStart = Math.max(
     0,
     Math.min(input.pointer - input.viewportStart - padding - input.grabOffset, maxThumbStart),
   )
+
   const progress = input.reverse ? 1 - thumbStart / maxThumbStart : thumbStart / maxThumbStart
+
   return progress * Math.max(0, input.scrollSize - (input.scrollClientSize ?? input.clientSize))
 }
 
 export function ScrollView(props: ScrollViewProps) {
   const i18n = useI18n()
   const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
+
   const [local, events, rest] = splitProps(
     merged,
     [
@@ -165,6 +179,7 @@ export function ScrollView(props: ScrollViewProps) {
     horizontalThumbStart: 0,
     showHorizontalThumb: false,
   })
+
   const isHovered = () => state.isHovered
   const isDragging = () => state.dragging !== undefined
   const isScrolling = () => state.isScrolling
@@ -175,13 +190,16 @@ export function ScrollView(props: ScrollViewProps) {
 
   const markScrolling = () => {
     setState("isScrolling", true)
+
     if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
     scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
   }
 
   const thumbVisible = () => {
     if (isDragging()) return true
+
     if (isScrolling()) return true
+
     return local.thumbVisibility === "hover" && isHovered()
   }
 
@@ -198,9 +216,11 @@ export function ScrollView(props: ScrollViewProps) {
       const adjustment = local.verticalScrollAdjustment ?? 0
       const scrollHeight = viewportRef.scrollHeight + adjustment
       const trackSize = Math.max(0, (thumbMount()?.clientHeight || viewportRef.clientHeight) - trackPadding * 2)
+
       const size = trackSize
         ? Math.min(trackSize, Math.max((viewportRef.clientHeight / scrollHeight) * trackSize, minThumbSize))
         : 0
+
       const maxScroll = scrollHeight - viewportRef.clientHeight
       const maxStart = trackSize - size
       setState("showVerticalThumb", maxScroll > 0)
@@ -215,9 +235,11 @@ export function ScrollView(props: ScrollViewProps) {
 
     if (horizontal()) {
       const trackSize = Math.max(0, (thumbMount()?.clientWidth || viewportRef.clientWidth) - trackPadding * 2)
+
       const size = trackSize
         ? Math.min(trackSize, Math.max((viewportRef.clientWidth / viewportRef.scrollWidth) * trackSize, minThumbSize))
         : 0
+
       const maxScroll = viewportRef.scrollWidth - viewportRef.clientWidth
       const maxStart = trackSize - size
       const rtl = getComputedStyle(viewportRef).direction === "rtl"
@@ -262,6 +284,7 @@ export function ScrollView(props: ScrollViewProps) {
 
   createEffect(() => {
     const target = thumbHover()
+
     if (!target) return
 
     const enter = () => setState("isHovered", true)
@@ -288,10 +311,12 @@ export function ScrollView(props: ScrollViewProps) {
     prepareScroll()
     setState("dragging", axis)
     const thumb = axis === "vertical" ? verticalThumbRef : horizontalThumbRef
+
     const grabOffset =
       axis === "vertical"
         ? e.clientY - thumb.getBoundingClientRect().top
         : e.clientX - thumb.getBoundingClientRect().left
+
     const track = thumbMount() ?? viewportRef
 
     thumb.setPointerCapture(e.pointerId)
@@ -300,6 +325,7 @@ export function ScrollView(props: ScrollViewProps) {
       prepareScroll()
       const vertical = axis === "vertical"
       const rtl = !vertical && getComputedStyle(viewportRef).direction === "rtl"
+
       const offset = scrollOffsetFromThumbPointer({
         pointer: vertical ? e.clientY : e.clientX,
         viewportStart: vertical ? track.getBoundingClientRect().top : track.getBoundingClientRect().left,
@@ -310,10 +336,13 @@ export function ScrollView(props: ScrollViewProps) {
         thumbSize: vertical ? state.verticalThumbSize : state.horizontalThumbSize,
         reverse: rtl,
       })
+
       if (vertical) {
         viewportRef.scrollTop = offset
+
         return
       }
+
       viewportRef.scrollLeft = rtl ? -offset : offset
     }
 
@@ -375,7 +404,9 @@ export function ScrollView(props: ScrollViewProps) {
     if (document.activeElement && ["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
       return
     }
+
     const next = scrollKey(e)
+
     // Modified navigation (for example Ctrl+Home) stays native, but must read
     // the same reconciled geometry as the keys handled by this component.
     const intent =
@@ -387,11 +418,15 @@ export function ScrollView(props: ScrollViewProps) {
         ctrlKey: false,
         metaKey: false,
       })
+
     if (!intent) return
+
     if (!isScrollKeyTarget(e.target, intent)) return
+
     if (scrollKeyOwner(viewportRef, e.target, intent) !== viewportRef) return
 
     prepareScroll()
+
     if (!next) return
     const scrollAmount = viewportRef.clientHeight * 0.8
     const lineAmount = 40
@@ -446,12 +481,15 @@ export function ScrollView(props: ScrollViewProps) {
         onScroll={(e) => {
           updateThumb()
           markScrolling()
+
           if (typeof events.onScroll === "function") events.onScroll(e as any)
         }}
         onWheel={(e) => {
           markScrolling()
           const handler = events.onWheel
+
           if (typeof handler === "function") handler(e as any)
+
           if (Array.isArray(handler)) handler[0](handler[1], e as any)
         }}
         onTouchStart={events.onTouchStart as any}
@@ -465,6 +503,7 @@ export function ScrollView(props: ScrollViewProps) {
         aria-label={i18n.t("ui.scrollView.ariaLabel")}
         onKeyDown={(e) => {
           onKeyDown(e)
+
           if (typeof events.onKeyDown === "function") events.onKeyDown(e as any)
         }}
       >

package/src/components/spinner.tsx

@@ -1,7 +1,9 @@
 import { ComponentProps, For } from "solid-js"
 
 const outerIndices = new Set([1, 2, 4, 7, 8, 11, 13, 14])
+
 const cornerIndices = new Set([0, 3, 12, 15])
+
 const squares = Array.from({ length: 16 }, (_, i) => ({
   id: i,
   x: (i % 4) * 4,

package/src/components/text-field.tsx

@@ -34,6 +34,7 @@ export interface TextFieldProps
 
 export function TextField(props: TextFieldProps) {
   const i18n = useI18n()
+
   const [local, others] = splitProps(props, [
     "name",
     "defaultValue",
@@ -54,17 +55,22 @@ export function TextField(props: TextFieldProps) {
     "copyKind",
     "multiline",
   ])
+
   const [copied, setCopied] = createSignal(false)
 
   const label = () => {
     if (copied()) return i18n.t("ui.textField.copied")
+
     if (local.copyKind === "link") return i18n.t("ui.textField.copyLink")
+
     return i18n.t("ui.textField.copyToClipboard")
   }
 
   const icon = () => {
     if (copied()) return "check"
+
     if (local.copyKind === "link") return "link"
+
     return "copy"
   }
 

package/src/components/text-reveal.tsx

@@ -3,18 +3,23 @@ import { createStore } from "solid-js/store"
 
 const px = (value: number | string | undefined, fallback: number) => {
   if (typeof value === "number") return `${value}px`
+
   if (typeof value === "string") return value
+
   return `${fallback}px`
 }
 
 const ms = (value: number | string | undefined, fallback: number) => {
   if (typeof value === "number") return `${value}ms`
+
   if (typeof value === "string") return value
+
   return `${fallback}ms`
 }
 
 const pct = (value: number | undefined, fallback: number) => {
   const v = value ?? fallback
+
   return `${v}%`
 }
 
@@ -38,6 +43,7 @@ export function TextReveal(props: {
     ready: false,
     swapping: false,
   })
+
   const cur = () => state.cur
   const old = () => state.old
   const width = () => state.width
@@ -53,10 +59,13 @@ export function TextReveal(props: {
 
   const widen = (next: number) => {
     if (next <= 0) return
+
     if (props.growOnly ?? true) {
       const prev = Number.parseFloat(width())
+
       if (Number.isFinite(prev) && next <= prev) return
     }
+
     setState("width", `${next}px`)
   }
 
@@ -65,11 +74,14 @@ export function TextReveal(props: {
       () => props.text,
       (next, prev) => {
         if (next === prev) return
+
         if (typeof next === "string" && typeof prev === "string" && next.startsWith(prev)) {
           setState("cur", next)
           widen(win())
+
           return
         }
+
         setState("swapping", true)
         setState("old", prev)
         setState("cur", next)
@@ -78,8 +90,10 @@ export function TextReveal(props: {
           widen(Math.max(win(), wout()))
           rootRef?.offsetHeight
           setState("swapping", false)
+
           return
         }
+
         if (frame !== undefined && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame)
         frame = requestAnimationFrame(() => {
           widen(Math.max(win(), wout()))
@@ -94,14 +108,19 @@ export function TextReveal(props: {
   onMount(() => {
     widen(win())
     const fonts = typeof document !== "undefined" ? document.fonts : undefined
+
     if (typeof requestAnimationFrame !== "function") {
       setState("ready", true)
+
       return
     }
+
     if (!fonts) {
       requestAnimationFrame(() => setState("ready", true))
+
       return
     }
+
     void fonts.ready.finally(() => {
       widen(win())
       requestAnimationFrame(() => setState("ready", true))