@opencode/ui 0.0.0-dev-20607 → 0.0.0-dev-20609

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))

package/src/components/text-strikethrough.tsx

@@ -21,15 +21,18 @@ export function TextStrikethrough(props: {
 
   let baseRef: HTMLSpanElement | undefined
   let containerRef: HTMLSpanElement | undefined
+
   const [state, setState] = createStore({
     textWidth: 0,
     containerWidth: 0,
   })
+
   const textWidth = () => state.textWidth
   const containerWidth = () => state.containerWidth
 
   const measure = () => {
     if (baseRef) setState("textWidth", baseRef.scrollWidth)
+
     if (containerRef) setState("containerWidth", containerRef.offsetWidth)
   }
 
@@ -39,6 +42,7 @@ export function TextStrikethrough(props: {
   // Revealed pixels from left = progress * textWidth
   const revealedPx = () => {
     const tw = textWidth()
+
     return tw > 0 ? progress() * tw : 0
   }
 
@@ -46,15 +50,19 @@ export function TextStrikethrough(props: {
   const overlayClip = () => {
     const cw = containerWidth()
     const tw = textWidth()
+
     if (cw <= 0 || tw <= 0) return `inset(0 ${(1 - progress()) * 100}% 0 0)`
     const remaining = Math.max(0, cw - revealedPx())
+
     return `inset(0 ${remaining}px 0 0)`
   }
 
   // Base clip: hide everything to the left of revealed area (complementary)
   const baseClip = () => {
     const px = revealedPx()
+
     if (px <= 0.5) return "none"
+
     return `inset(0 0 0 ${px}px)`
   }
 

package/src/components/typewriter.tsx

@@ -11,6 +11,7 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
 
   createEffect(() => {
     const text = props.text
+
     if (!text) return
 
     let i = 0
@@ -21,8 +22,11 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
 
     const getTypingDelay = () => {
       const random = Math.random()
+
       if (random < 0.05) return 150 + Math.random() * 100
+
       if (random < 0.15) return 80 + Math.random() * 60
+
       return 30 + Math.random() * 50
     }
 

package/src/context/dialog.tsx

@@ -28,6 +28,7 @@ type Active = {
 }
 
 const Context = createContext<ReturnType<typeof init>>()
+
 // Lets the dialog rendered in a layer opt out of closing on a backdrop click.
 const LayerContext = createContext<{ setBackdropDismiss: (value: boolean) => void }>()
 
@@ -70,6 +71,7 @@ function init() {
       current.id,
       setTimeout(() => {
         closing.delete(current.id)
+
         if (closing.size === 0) lock.value = false
         setExiting((ids) => new Set([...ids].filter((id) => id !== current.id)))
         setStack((items) => items.filter((item) => item.id !== current.id))
@@ -84,6 +86,7 @@ function init() {
   /** Programmatic close. Without an id it closes the top dialog, one at a time; with an id it never waits. */
   const close = (id?: string) => {
     const current = id ? stack().find((item) => item.id === id) : stack().at(-1)
+
     if (!current || closing.has(current.id) || (!id && lock.value)) return
     closing.set(current.id, undefined)
     lock.value = true
@@ -93,6 +96,7 @@ function init() {
   /** Escape, a backdrop click, or Kobalte dismissing: only the top dialog, and one per exit animation. */
   const dismiss = (id?: string) => {
     const current = stack().at(-1)
+
     if (!current || (id && current.id !== id) || closing.has(current.id) || lock.value) return
     closing.set(current.id, undefined)
     lock.value = true
@@ -116,12 +120,14 @@ function init() {
     // A deferred open (e.g. from a focus callback) must not mount after the provider is gone.
     if (state.disposed) return
     const id = key ?? Math.random().toString(36).slice(2)
+
     // The layer follows the dialog's current place in the stack, so a new top dialog always renders above.
     const layer = () =>
       Math.max(
         0,
         stack().findIndex((item) => item.id === id),
       )
+
     const zIndex = () => String(50 + layer() * 10)
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
@@ -133,6 +139,7 @@ function init() {
         const [closing, setClosingSignal] = createSignal(false)
         const [backdropDismiss, setBackdropDismiss] = createSignal(true)
         setClosing = setClosingSignal
+
         return (
           <Kobalte
             modal={stack().findLast((item) => !exiting().has(item.id))?.id === id}
@@ -193,6 +200,7 @@ function init() {
     push,
   }
 }
+
 /** Runs a dialog callback so its throw is reported without stopping the caller's cleanup. */
 function isolate(fn: () => void) {
   try {
@@ -204,6 +212,7 @@ function isolate(fn: () => void) {
 
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
+
   return (
     <Context.Provider value={ctx}>
       {props.children}
@@ -221,6 +230,7 @@ export function useDialog() {
   if (!owner) {
     throw new Error("useDialog must be used within a DialogProvider")
   }
+
   if (!ctx) {
     throw new Error("useDialog must be used within a DialogProvider")
   }
@@ -235,6 +245,7 @@ export function useDialog() {
      */
     show(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
+
       return startTransition(() => {
         if (signal?.aborted) return isolate(() => onClose?.())
         ctx.show(element, base, onClose, id)
@@ -242,6 +253,7 @@ export function useDialog() {
     },
     push(element: DialogElement, onClose?: () => void, id?: string, signal?: AbortSignal) {
       const base = ctx.stack().at(-1)?.owner ?? owner
+
       return startTransition(() => {
         if (signal?.aborted) return isolate(() => onClose?.())
         ctx.push(element, base, onClose, id)

package/src/context/file.tsx

@@ -7,4 +7,5 @@ const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
 })
 
 export const FileComponentProvider = ctx.provider
+
 export const useFileComponent = ctx.use

package/src/context/helper.tsx

@@ -21,8 +21,10 @@ export function createSimpleContext<T, Props extends Record<string, any>>(
       const isReady = createMemo(() => {
         // @ts-expect-error
         const ready = init.ready as Accessor<boolean> | boolean | undefined
+
         return ready === undefined || (typeof ready === "function" ? ready() : ready)
       })
+
       return (
         <Show when={isReady()}>
           <ctx.Provider value={init}>{props.children}</ctx.Provider>
@@ -31,7 +33,9 @@ export function createSimpleContext<T, Props extends Record<string, any>>(
     },
     use() {
       const value = useContext(ctx)
+
       if (!value) throw new Error(`${input.name} context must be used within a context provider`)
+
       return value
     },
   }