@opencode/ui 2.0.22 → 2.0.24

package/src/context/marked-parser.tsx

@@ -8,6 +8,7 @@ export function createMarkdownParser(highlight: (code: string, language: string)
 }
 
 const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+
 const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
 
 const katexExtension: MarkedExtension = {
@@ -17,12 +18,16 @@ const katexExtension: MarkedExtension = {
       level: "inline",
       start(src) {
         const index = src.indexOf("\\(")
+
         if (index === -1) return
+
         return index
       },
       tokenizer(src) {
         const match = src.match(inlineMathRegex)
+
         if (!match) return
+
         return {
           type: "inlineKatex",
           raw: match[0],
@@ -37,7 +42,9 @@ const katexExtension: MarkedExtension = {
       level: "block",
       tokenizer(src) {
         const match = src.match(blockMathRegex)
+
         if (!match) return
+
         return {
           type: "blockKatex",
           raw: match[0],

package/src/context/marked.tsx

@@ -17,8 +17,11 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
         langs: [],
         preferredHighlighter: "shiki-wasm",
       })
+
       const name = language in bundledLanguages ? language : "text"
+
       if (!highlighter.getLoadedLanguages().includes(name)) await highlighter.loadLanguage(name as BundledLanguage)
+
       return highlighter.codeToHtml(code, {
         lang: name,
         theme: "OpenCode",

package/src/context/worker-pool.tsx

@@ -15,6 +15,8 @@ export const WorkerPoolProvider = ctx.provider
 
 export function useWorkerPool(diffStyle: "unified" | "split" | undefined) {
   const pools = ctx.use()
+
   if (diffStyle === "split") return pools.split
+
   return pools.unified
 }

package/src/data-display/accordion/accordion.tsx

@@ -2,17 +2,27 @@ import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Root> {}
+export interface AccordionProps extends Omit<ComponentProps<typeof Root>, "value"> {
+  /** Controlled expanded items. Kobalte reads this iterable into its own selection; it never mutates this array. */
+  value?: readonly string[]
+}
+
 export interface AccordionItemProps extends ComponentProps<typeof Item> {}
+
 export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
+
 export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
+
 export interface AccordionContentProps extends ComponentProps<typeof Content> {}
 
 function AccordionRoot(props: AccordionProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+  const [split, rest] = splitProps(props, ["class", "classList", "value"])
+
+  // SAFETY: Kobalte's createMultipleSelectionState copies selectedKeys into a Selection before changing it.
   return (
     <Root
       {...rest}
+      value={split.value as string[] | undefined}
       data-component="accordion"
       classList={{
         ...split.classList,
@@ -24,6 +34,7 @@ function AccordionRoot(props: AccordionProps) {
 
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Item
       {...rest}
@@ -38,6 +49,7 @@ function AccordionItem(props: AccordionItemProps) {
 
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Header
       {...rest}
@@ -54,6 +66,7 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Trigger
       {...rest}
@@ -70,6 +83,7 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Content
       {...rest}

package/src/data-display/avatar/avatar.tsx

@@ -8,7 +8,9 @@ const segmenter =
 
 function first(value: string) {
   if (!value) return ""
+
   if (!segmenter) return Array.from(value)[0] ?? ""
+
   return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
 }
 
@@ -33,7 +35,9 @@ export function Avatar(props: AvatarProps) {
     "classList",
     "style",
   ])
+
   const src = split.src // did this so i can zero it out to test fallback
+
   return (
     <div
       {...rest}

package/src/data-display/badge/badge.tsx

@@ -8,6 +8,7 @@ export interface BadgeProps extends ComponentProps<"span"> {
 
 export function Badge(props: BadgeProps) {
   const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+
   return (
     <span
       {...rest}

package/src/data-display/diff-changes/diff-changes.tsx

@@ -11,11 +11,13 @@ export function DiffChanges(props: {
       ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
       : props.changes.additions,
   )
+
   const deletions = createMemo(() =>
     Array.isArray(props.changes)
       ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
       : props.changes.deletions,
   )
+
   const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
 
   return (

package/src/data-display/keybind/keybind.tsx

@@ -8,6 +8,7 @@ export interface KeybindProps extends ComponentProps<"div"> {
 
 export function Keybind(props: KeybindProps) {
   const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
+
   return (
     <div
       {...rest}

package/src/data-display/line-comment/line-comment.tsx

@@ -35,6 +35,7 @@ export interface LineCommentProps extends ComponentProps<"div"> {
 
 export function LineComment(props: LineCommentProps) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
+
   return (
     <div
       {...rest}
@@ -78,11 +79,13 @@ export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "chi
 
 function pathFilename(path: string) {
   const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+
   return index === -1 ? path : path.slice(index + 1)
 }
 
 function pathDirectory(path: string) {
   const index = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"))
+
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
@@ -118,12 +121,16 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const currentMention = () => {
     const textarea = textareaRef
+
     if (!textarea) return
+
     if (!local.mention) return
+
     if (textarea.selectionStart !== textarea.selectionEnd) return
 
     const end = textarea.selectionStart
     const match = textarea.value.slice(0, end).match(/@(\S*)$/)
+
     if (!match) return
 
     return {
@@ -138,6 +145,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
     const textarea = textareaRef
     const query = currentMention()
+
     if (!textarea || !query) return
 
     const value = `${textarea.value.slice(0, query.start)}@${item.path} ${textarea.value.slice(query.end)}`
@@ -155,8 +163,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
   const mention = useFilteredList<{ path: string }>({
     items: async (query) => {
       if (!local.mention) return []
+
       if (!query.trim()) return []
       const paths = await local.mention.items(query)
+
       return paths.map((path) => ({ path }))
     },
     key: (item) => item.path,
@@ -167,8 +177,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const syncMention = () => {
     const item = currentMention()
+
     if (!item) {
       closeMention()
+
       return
     }
 
@@ -178,6 +190,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const selectActiveMention = () => {
     const items = mention.flat()
+
     if (items.length === 0) return
     const active = mention.active()
     selectMention(items.find((item) => item.path === active) ?? items[0])
@@ -185,6 +198,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
 
   const submit = () => {
     const v = local.value.trim()
+
     if (!v) return
     local.onSubmit(v)
   }
@@ -225,12 +239,14 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
             onSelect={() => syncMention()}
             onKeyDown={(e) => {
               e.stopPropagation()
+
               if (e.isComposing || e.keyCode === 229) return
 
               if (mentionOpen()) {
                 if (e.key === "Escape") {
                   e.preventDefault()
                   closeMention()
+
                   return
                 }
 
@@ -238,14 +254,17 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                   if (mention.flat().length === 0) return
                   e.preventDefault()
                   selectActiveMention()
+
                   return
                 }
 
                 const nav = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Enter"
                 const ctrlNav = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && (e.key === "n" || e.key === "p")
+
                 if ((nav || ctrlNav) && mention.flat().length > 0) {
                   mention.onKeyDown(e)
                   e.preventDefault()
+
                   return
                 }
               }
@@ -254,8 +273,10 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                 e.preventDefault()
                 e.currentTarget.blur()
                 local.onCancel()
+
                 return
               }
+
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault()
                 submit()
@@ -268,6 +289,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
                 {(item) => {
                   const directory = item.path.endsWith("/") ? item.path : pathDirectory(item.path)
                   const name = item.path.endsWith("/") ? "" : pathFilename(item.path)
+
                   return (
                     <button
                       type="button"

package/src/data-display/project-avatar/project-avatar.tsx

@@ -8,7 +8,9 @@ const segmenter =
 
 function first(value: string) {
   if (!value) return ""
+
   if (!segmenter) return Array.from(value)[0] ?? ""
+
   return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
 }
 
@@ -33,14 +35,19 @@ const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
 
 export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
   if (id === OPENCODE_PROJECT_ID) return "https://opencode.ai/favicon.svg"
+
   if (icon?.override) return icon.override
+
   if (icon?.color) return undefined
+
   return icon?.url
 }
 
 export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
   if (key === "mint") return "cyan"
+
   if (key === "lime") return "green"
+
   if (
     key === "orange" ||
     key === "yellow" ||
@@ -53,12 +60,14 @@ export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
     key === "gray"
   )
     return key
+
   return "gray"
 }
 
 export const displayName = (project: { name?: string; worktree: string }) => {
   const trimmed = project.worktree.replace(/[/\\]+$/, "")
   const filename = trimmed.slice(Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\")) + 1)
+
   return project.name || filename || project.worktree
 }
 
@@ -71,6 +80,7 @@ export interface ProjectAvatarProps extends ComponentProps<"div"> {
 
 export function ProjectAvatar(props: ProjectAvatarProps) {
   const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+
   return (
     <div
       {...rest}

package/src/feedback/loader/loader.tsx

@@ -3,6 +3,7 @@ import "./loader.css"
 
 export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+
   return (
     <svg
       {...rest}

package/src/feedback/toast/description.ts

@@ -5,5 +5,6 @@ export const toastDescriptionLimit = 2000
 
 export function boundToastDescription<T extends { description?: string }>(options: T): T {
   if (!options.description || options.description.length <= toastDescriptionLimit) return options
+
   return { ...options, description: `${options.description.slice(0, toastDescriptionLimit)}…` }
 }

package/src/feedback/toast/toast.tsx

@@ -21,9 +21,12 @@ function ToastRegion(props: ToastRegionProps) {
         element.tabIndex = hidden ? -1 : 0
       })
     }
+
     let connected = false
+
     const connect = () => {
       const regions = document.querySelectorAll(".toast-v2-region")
+
       if (!regions.length) return
       observer.disconnect()
       regions.forEach((region) => {
@@ -37,14 +40,17 @@ function ToastRegion(props: ToastRegionProps) {
       connected = true
       sync()
     }
+
     const observer = new MutationObserver(() => {
       if (!connected) connect()
       else sync()
     })
+
     observer.observe(document.body, { subtree: true, childList: true })
     queueMicrotask(connect)
     onCleanup(() => observer.disconnect())
   })
+
   return (
     <Portal>
       <Toaster
@@ -55,7 +61,7 @@ function ToastRegion(props: ToastRegionProps) {
         duration={5000}
         swipeDirections={["bottom"]}
         className={["toast-v2-region", local.className, local.class].filter(Boolean).join(" ")}
-        style={{ "--width": "320px", ...local.style } as JSX.CSSProperties}
+        style={{ "--width": "320px", ...local.style }}
         toastOptions={{
           ...local.toastOptions,
           unstyled: true,
@@ -103,6 +109,7 @@ function ToastCloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
   const toastId = useContext(ToastContext)
   const [local, rest] = splitProps(props, ["children", "onClick"])
+
   return (
     <button
       type="button"
@@ -110,7 +117,8 @@ function ToastCloseButton(props: ComponentProps<"button">) {
       aria-label={i18n.t("ui.common.dismiss")}
       {...rest}
       onClick={(event) => {
-        if (typeof local.onClick === "function") local.onClick(event)
+        if (local.onClick instanceof Function) local.onClick(event)
+
         if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
       }}
     >
@@ -147,7 +155,7 @@ export const toaster = {
       duration?: number
       persistent?: boolean
       /** Reactive value the toast's height depends on; sonner re-measures when it changes. */
-      resize?: () => unknown
+      resize?: () => void
     },
   ) {
     const toastId = --toastV2Id
@@ -162,10 +170,12 @@ export const toaster = {
       description: options?.resize
         ? (): JSX.Element => {
             options.resize?.()
+
             return undefined
           }
         : undefined,
     })
+
     return toastId
   },
   dismiss(toastId?: number) {
@@ -175,6 +185,7 @@ export const toaster = {
     } else {
       releaseToast(activeToastById.get(toastId))
     }
+
     return toast.dismiss(toastId)
   },
 }
@@ -188,7 +199,8 @@ export interface ToastAction {
 export interface ToastOptions {
   title?: string
   description?: string
-  icon?: JSX.Element
+  /** An element, or a render function the toast calls under its own owner, for icons created from imperative code. */
+  icon?: JSX.Element | (() => JSX.Element)
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
@@ -203,10 +215,14 @@ interface ActiveToast {
 }
 
 const activeToastByKey = new Map<string, ActiveToast>()
+
 const activeToastById = new Map<number, ActiveToast>()
 
 export function showToast(options: ToastOptions | string) {
+  // SAFETY: `options` is declared `ToastOptions | string`; `typeof` separates the string shorthand from the object.
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- see SAFETY above
   const opts = boundToastDescription(typeof options === "string" ? { description: options } : options)
+
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -215,6 +231,7 @@ export function showToast(options: ToastOptions | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
+
   const active = activeToastByKey.get(key)
   const toasts = toast.getToasts()
 
@@ -222,6 +239,7 @@ export function showToast(options: ToastOptions | string) {
     active.options = opts
     publishToast(active)
     pulseToast(active.id)
+
     return active.id
   }
 
@@ -233,6 +251,7 @@ export function showToast(options: ToastOptions | string) {
   activeToastByKey.set(key, entry)
   activeToastById.set(entry.id, entry)
   publishToast(entry)
+
   return entry.id
 }
 
@@ -241,7 +260,9 @@ function publishToast(entry: ActiveToast) {
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
-    icon: entry.options.icon,
+    // SAFETY: solid-sonner inserts `icon` as a JSX child, and Solid calls a function child under the toast's render
+    // owner; solid-sonner's type omits function children.
+    icon: entry.options.icon as JSX.Element,
     action: entry.actions,
     closeButton: true,
     duration: entry.options.persistent ? Number.POSITIVE_INFINITY : entry.options.duration,
@@ -255,6 +276,7 @@ function publishToast(entry: ActiveToast) {
 
 function createToastActions(entry: ActiveToast) {
   if (!entry.options.actions?.length) return undefined
+
   return (
     <Toast.Actions>
       {/* Static map, not <For>: this JSX is created imperatively outside any Solid
@@ -268,7 +290,8 @@ function createToastActions(entry: ActiveToast) {
           data-action-variant={action.variant ?? "primary"}
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
-            if (typeof onClick === "function") onClick()
+
+            if (onClick && onClick !== "dismiss") onClick()
             toaster.dismiss(entry.id)
           }}
         >
@@ -283,6 +306,7 @@ function pulseToast(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
+
     if (!element || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
     element.animate([{ scale: 1 }, { scale: 1.025 }, { scale: 1 }], { duration: 160, easing: "ease-out" })
   })
@@ -290,7 +314,9 @@ function pulseToast(toastId: number) {
 
 function releaseToast(entry: ActiveToast | undefined) {
   if (!entry) return
+
   if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
+
   if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
 }
 

package/src/forms/checkbox/checkbox.tsx

@@ -10,6 +10,7 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>>
 
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
+
   return (
     <Root {...others} data-component="checkbox">
       <Input data-slot="checkbox-checkbox-input" />

package/src/forms/field/field.tsx

@@ -31,9 +31,11 @@ const FieldContext = createContext<FieldContextValue>()
 
 function useField() {
   const ctx = useContext(FieldContext)
+
   if (!ctx) {
     throw new Error("Field subcomponents must be used within <Field>")
   }
+
   return ctx
 }
 
@@ -72,17 +74,22 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     unregisterSuffix: () => setSuffixCount((n) => Math.max(0, n - 1)),
     getDescribedBy: () => {
       const ids: string[] = []
+
       if (prefixCount() > 0) ids.push(prefixId)
+
       if (suffixCount() > 0) ids.push(suffixId)
+
       return ids.length > 0 ? ids.join(" ") : undefined
     },
   }
 
   const syncControlA11y = () => {
     const root = rootRef
+
     if (!root) return
 
     const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
+
     if (!control) return
 
     const shell = control.closest(
@@ -93,6 +100,7 @@ function FieldRoot(props: ParentProps<FieldProps>) {
     control.setAttribute("aria-labelledby", labelId)
 
     const describedBy = ctx.getDescribedBy()
+
     if (describedBy) {
       control.setAttribute("aria-describedby", describedBy)
     } else {

package/src/forms/inline-input/inline-input.tsx

@@ -10,11 +10,15 @@ export function InlineInput(props: InlineInputProps) {
 
   const style = () => {
     if (!local.style) return { width: local.width }
+
     if (typeof local.style === "string") {
       if (!local.width) return local.style
+
       return `${local.style};width:${local.width}`
     }
+
     if (!local.width) return local.style
+
     return { ...local.style, width: local.width }
   }
 

package/src/forms/radio/radio.tsx

@@ -21,6 +21,7 @@ export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>
 
 export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
+
   return (
     <Root
       {...others}
@@ -54,6 +55,7 @@ export interface RadioItemProps extends ComponentProps<typeof Item> {
 
 export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+
   return (
     <Item
       {...others}